/*
 * Clovant theme
 * Loaded last on every layout (public site, admin, auth). Re-skins the Bootstrap-based
 * templates with Clovant's design tokens: Inter / Space Grotesk, ink-and-teal palette,
 * soft cards. Dark is the default; light is chosen via <html data-theme-mode="light">.
 *
 * Tokens are stored as "R G B" triplets so they can be used with alpha:
 *   rgb(var(--cv-brand))  /  rgb(var(--cv-brand) / .15)
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..800&family=Space+Grotesk:wght@500;600;700&display=swap");

/* ------------------------------------------------------------------ tokens */
:root,
[data-theme-mode="light"] {
    color-scheme: light;
    --cv-bg: 245 247 249;
    --cv-ink: 14 21 31;
    --cv-subtle: 93 107 122;
    --cv-faint: 148 160 173;
    --cv-surface: 255 255 255;
    --cv-surface-2: 245 247 250;
    --cv-surface-3: 238 241 245;
    --cv-line: 228 232 238;
    --cv-brand: 13 148 136;
    --cv-brand-strong: 10 118 108;
    --cv-brand-soft: 229 247 244;
    --cv-brand-on: 255 255 255;
    --cv-fill: 16 23 37;          /* primary buttons: near-black in light mode */
    --cv-fill-hover: 30 39 56;
    --cv-fill-text: 255 255 255;
    --cv-success: 5 150 105;
    --cv-warning: 180 83 9;
    --cv-danger: 220 38 38;
    --cv-shadow: 0 1px 2px 0 rgb(15 23 42 / .04), 0 4px 14px -2px rgb(15 23 42 / .07);
    --cv-shadow-md: 0 2px 6px 0 rgb(15 23 42 / .05), 0 8px 24px -4px rgb(15 23 42 / .09);
    /* gray scale used by the Tailwind pages (slate/gray map here); flips in dark mode */
    --cv-g-50: 247 249 251; --cv-g-100: 240 243 247; --cv-g-200: 227 232 238; --cv-g-300: 205 213 222;
    --cv-g-400: 148 159 172; --cv-g-500: 100 112 126; --cv-g-600: 71 83 98; --cv-g-700: 52 63 77;
    --cv-g-800: 30 39 50; --cv-g-900: 16 23 33;
}

[data-theme-mode="dark"] {
    color-scheme: dark;
    --cv-bg: 11 13 16;
    --cv-ink: 240 243 247;
    --cv-subtle: 148 157 169;
    --cv-faint: 104 113 126;
    --cv-surface: 18 21 26;
    --cv-surface-2: 25 29 36;
    --cv-surface-3: 32 37 45;
    --cv-line: 38 43 52;
    --cv-brand: 45 212 191;
    --cv-brand-strong: 94 234 212;
    --cv-brand-soft: 16 45 41;
    --cv-brand-on: 11 13 16;
    --cv-fill: 237 242 247;       /* primary buttons: near-white in dark mode */
    --cv-fill-hover: 255 255 255;
    --cv-fill-text: 11 13 16;
    --cv-success: 52 211 153;
    --cv-warning: 251 191 36;
    --cv-danger: 248 113 113;
    --cv-shadow: 0 1px 2px 0 rgb(0 0 0 / .4), 0 4px 14px -2px rgb(0 0 0 / .4);
    --cv-shadow-md: 0 2px 6px 0 rgb(0 0 0 / .45), 0 8px 24px -4px rgb(0 0 0 / .45);
    --cv-g-50: 22 25 31; --cv-g-100: 28 32 39; --cv-g-200: 38 43 52; --cv-g-300: 54 60 71;
    --cv-g-400: 104 113 126; --cv-g-500: 145 153 165; --cv-g-600: 168 176 187; --cv-g-700: 194 200 209;
    --cv-g-800: 218 223 230; --cv-g-900: 240 243 247;
}

/* ------------------------------------------- map tokens onto the templates */
:root,
[data-theme-mode="light"],
[data-theme-mode="dark"] {
    --cv-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cv-display: "Space Grotesk", "Inter", sans-serif;
    --cv-radius: 12px;
    --cv-radius-sm: 8px;

    /* Bootstrap 5.3 */
    --bs-body-font-family: var(--cv-font);
    --bs-body-bg: rgb(var(--cv-bg));
    --bs-body-color: rgb(var(--cv-subtle));
    --bs-emphasis-color: rgb(var(--cv-ink));
    --bs-heading-color: rgb(var(--cv-ink));
    --bs-secondary-color: rgb(var(--cv-subtle));
    --bs-tertiary-color: rgb(var(--cv-faint));
    --bs-secondary-bg: rgb(var(--cv-surface-2));
    --bs-tertiary-bg: rgb(var(--cv-surface-3));
    --bs-border-color: rgb(var(--cv-line));
    --bs-border-radius: var(--cv-radius-sm);
    --bs-border-radius-lg: var(--cv-radius);
    --bs-primary: rgb(var(--cv-brand));
    --bs-primary-rgb: var(--cv-brand-triplet, 13, 148, 136);
    --bs-link-color: rgb(var(--cv-brand));
    --bs-link-color-rgb: var(--cv-brand-triplet, 13, 148, 136);
    --bs-link-hover-color: rgb(var(--cv-brand-strong));
    --bs-card-bg: rgb(var(--cv-surface));

    /* Public site template (--tg-*) */
    --tg-body-font-family: var(--cv-font);
    --tg-heading-font-family: var(--cv-display);
    --tg-body-color: rgb(var(--cv-subtle));
    --tg-heading-color: rgb(var(--cv-ink));
    --tg-theme-primary: rgb(var(--cv-brand));
    --tg-theme-secondary: rgb(var(--cv-brand-soft));
    --tg-common-color-white: rgb(var(--cv-surface));
    --tg-common-color-dark: rgb(var(--cv-ink));
    --tg-common-color-gray: rgb(var(--cv-surface-2));
    --tg-border-1: rgb(var(--cv-line));
    --tg-border-2: rgb(var(--cv-line));

    /* Admin template (--color-*) */
    --color-primary: rgb(var(--cv-brand));
    --color-body: rgb(var(--cv-subtle));
    --color-body-bg: rgb(var(--cv-bg));
    --color-card-bg: rgb(var(--cv-surface));
    --color-heading: rgb(var(--cv-ink));
    --color-border: rgb(var(--cv-line));
    --color-text-muted: rgb(var(--cv-faint));
    --color-menu: rgb(var(--cv-subtle));
    --color-white: rgb(var(--cv-surface));
    --color-black: rgb(var(--cv-ink));
    --color-light: rgb(var(--cv-surface-2));
    --gray-1: rgb(var(--cv-surface-2));
    --gray-2: rgb(var(--cv-surface-3));
}
[data-theme-mode="dark"] { --cv-brand-triplet: 45, 212, 191; }

/* ------------------------------------------------------------------- base */
html, body {
    background: rgb(var(--cv-bg)) !important;
    color: rgb(var(--cv-subtle));
    font-family: var(--cv-font) !important;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title, .section__title .title {
    font-family: var(--cv-display) !important;
    color: rgb(var(--cv-ink));
    letter-spacing: -0.015em;
}
p, li, label, td, th, span, small { font-family: var(--cv-font); }
a { color: rgb(var(--cv-brand)); }
a:hover { color: rgb(var(--cv-brand-strong)); }
.text-muted, .text-secondary { color: rgb(var(--cv-subtle)) !important; }
.text-dark, .text-heading, .text-black { color: rgb(var(--cv-ink)) !important; }
.text-primary { color: rgb(var(--cv-brand)) !important; }
.bg-white, .bg-light { background-color: rgb(var(--cv-surface)) !important; }
.bg-primary { background-color: rgb(var(--cv-brand)) !important; color: rgb(var(--cv-brand-on)) !important; }
hr, .border, .border-top, .border-bottom, .border-start, .border-end { border-color: rgb(var(--cv-line)) !important; }
::selection { background: rgb(var(--cv-brand) / .3); color: rgb(var(--cv-ink)); }

/* small uppercase labels, Clovant style */
.label-caps, .form-label, label.form-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(var(--cv-faint));
}

/* ------------------------------------------------------------------ cards */
.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item,
.courses__item, .event__item, .community-card, .dashboard__content-wrap, .cv-card {
    background-color: rgb(var(--cv-surface)) !important;
    border: 1px solid rgb(var(--cv-line)) !important;
    border-radius: var(--cv-radius) !important;
    box-shadow: var(--cv-shadow);
    color: rgb(var(--cv-subtle));
}
.card-header, .card-footer, .modal-header, .modal-footer {
    background: transparent !important;
    border-color: rgb(var(--cv-line)) !important;
}
.dropdown-item { color: rgb(var(--cv-ink)); border-radius: 6px; }
.dropdown-item:hover, .dropdown-item:focus { background: rgb(var(--cv-surface-2)); color: rgb(var(--cv-ink)); }

/* ---------------------------------------------------------------- buttons */
.btn {
    font-family: var(--cv-font);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    border-radius: var(--cv-radius-sm) !important;
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary, .tg-btn, .btn.btn-two, .btn-three, .tg-button-wrap .btn {
    background: rgb(var(--cv-fill)) !important;
    border-color: rgb(var(--cv-fill)) !important;
    color: rgb(var(--cv-fill-text)) !important;
}
.btn-primary:hover, .tg-btn:hover, .btn.btn-two:hover, .btn-three:hover, .tg-button-wrap .btn:hover {
    background: rgb(var(--cv-fill-hover)) !important;
    border-color: rgb(var(--cv-fill-hover)) !important;
    color: rgb(var(--cv-fill-text)) !important;
}
/* the template's buttons draw an offset "shadow" block; Clovant buttons are flat */
.btn::before, .btn::after { box-shadow: none !important; }
.btn-success, .btn-brand {
    background: rgb(var(--cv-brand)) !important;
    border-color: rgb(var(--cv-brand)) !important;
    color: rgb(var(--cv-brand-on)) !important;
}
.btn-outline-primary, .btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark {
    background: transparent !important;
    border: 1px solid rgb(var(--cv-line)) !important;
    color: rgb(var(--cv-ink)) !important;
}
.btn-outline-primary:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover {
    background: rgb(var(--cv-surface-2)) !important;
    color: rgb(var(--cv-ink)) !important;
}
.btn-danger { background: rgb(var(--cv-danger)) !important; border-color: rgb(var(--cv-danger)) !important; color: #fff !important; }
.btn-outline-danger { color: rgb(var(--cv-danger)) !important; border-color: rgb(var(--cv-danger) / .5) !important; background: transparent !important; }

/* ------------------------------------------------------------------ forms */
.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"], input[type="tel"],
input[type="date"], input[type="datetime-local"], input[type="time"], textarea, select,
.select2-container--default .select2-selection {
    background-color: rgb(var(--cv-surface-2)) !important;
    border: 1px solid rgb(var(--cv-line)) !important;
    border-radius: var(--cv-radius-sm) !important;
    color: rgb(var(--cv-ink)) !important;
    font-family: var(--cv-font);
    font-size: 14px;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
    border-color: rgb(var(--cv-brand) / .6) !important;
    box-shadow: 0 0 0 3px rgb(var(--cv-brand) / .15) !important;
    outline: none;
}
::placeholder { color: rgb(var(--cv-faint)) !important; opacity: 1; }
.form-check-input { background-color: rgb(var(--cv-surface-2)); border-color: rgb(var(--cv-line)); }
.form-check-input:checked { background-color: rgb(var(--cv-brand)); border-color: rgb(var(--cv-brand)); }
.input-group-text { background: rgb(var(--cv-surface-3)); border-color: rgb(var(--cv-line)); color: rgb(var(--cv-subtle)); }

/* ----------------------------------------------------------------- tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: rgb(var(--cv-subtle));
    --bs-table-border-color: rgb(var(--cv-line));
    --bs-table-striped-bg: rgb(var(--cv-surface-2));
    --bs-table-hover-bg: rgb(var(--cv-surface-2));
    color: rgb(var(--cv-subtle));
}
.table thead th {
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: rgb(var(--cv-faint)) !important; background: transparent !important;
}

/* ---------------------------------------------------------- badges, alerts */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: .02em; }
.badge.bg-primary, .badge.bg-success { background: rgb(var(--cv-brand-soft)) !important; color: rgb(var(--cv-brand)) !important; }
.alert { border-radius: var(--cv-radius) !important; border: 1px solid rgb(var(--cv-line)) !important; background: rgb(var(--cv-surface-2)) !important; color: rgb(var(--cv-ink)) !important; }
.alert-success { border-color: rgb(var(--cv-success) / .4) !important; }
.alert-danger { border-color: rgb(var(--cv-danger) / .4) !important; }
.nav-tabs, .nav-pills { border-color: rgb(var(--cv-line)); }
.nav-tabs .nav-link, .nav-pills .nav-link { color: rgb(var(--cv-subtle)); border-radius: var(--cv-radius-sm); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
    background: rgb(var(--cv-surface-2)) !important; color: rgb(var(--cv-ink)) !important; border-color: rgb(var(--cv-line)) !important;
}
.pagination .page-link { background: rgb(var(--cv-surface)); border-color: rgb(var(--cv-line)); color: rgb(var(--cv-ink)); }
.pagination .active .page-link { background: rgb(var(--cv-fill)); border-color: rgb(var(--cv-fill)); color: rgb(var(--cv-fill-text)); }

/* --------------------------------------------------- public site: header */
.tg-header__area, .tgmenu__wrap, .header__top, .tg-header__top, #sticky-header, .sticky-menu {
    background: rgb(var(--cv-bg) / .85) !important;
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgb(var(--cv-line)) !important;
    box-shadow: none !important;
}
.tgmenu__navbar-wrap ul li a, .navigation li a {
    font-family: var(--cv-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(var(--cv-subtle)) !important;
}
.tgmenu__navbar-wrap ul li a:hover, .navigation li.active > a, .navigation li a:hover { color: rgb(var(--cv-ink)) !important; }
.tgmobile__menu, .tgmobile__menu-box { background: rgb(var(--cv-surface)) !important; }
/* header.blade.php has its own <style> block with fixed colors */
.clv-nav a {
    color: rgb(var(--cv-subtle)) !important; font-size: 12px !important; font-weight: 600 !important;
    letter-spacing: .08em; text-transform: uppercase;
}
.clv-nav a:hover, .clv-nav a.active { color: rgb(var(--cv-ink)) !important; }
.clv-nav a.active { box-shadow: inset 0 -2px 0 rgb(var(--cv-brand)); padding-bottom: 6px; }
.tgmenu__search-form .input-grp input { background: rgb(var(--cv-surface-2)) !important; border: 1px solid rgb(var(--cv-line)) !important; color: rgb(var(--cv-ink)) !important; }
.tgmenu__search-form .input-grp button { background: rgb(var(--cv-brand)) !important; color: rgb(var(--cv-brand-on)) !important; }
.notification-panel { background: rgb(var(--cv-surface)) !important; border-color: rgb(var(--cv-line)) !important; box-shadow: var(--cv-shadow-md) !important; }
.notif-header { border-color: rgb(var(--cv-line)) !important; }
.notif-header h6, .notif-text strong { color: rgb(var(--cv-ink)) !important; }
.notif-header a, .notification-panel a { color: rgb(var(--cv-brand)) !important; }
.notif-item { border-color: rgb(var(--cv-line)) !important; }
.notif-item:hover { background: rgb(var(--cv-surface-2)) !important; }
.notif-text, .notif-text p { color: rgb(var(--cv-subtle)) !important; }
.notif-text span { color: rgb(var(--cv-faint)) !important; }
.notification-panel .dot { background: rgb(var(--cv-brand)) !important; }
.notification-count { background: rgb(var(--cv-brand)) !important; color: rgb(var(--cv-brand-on)) !important; border-color: rgb(var(--cv-bg)) !important; }
.profile-avatar { border: 1px solid rgb(var(--cv-line)); }

/* --------------------------------------------------- public site: sections */
.banner-area, .breadcrumb__area, .section-bg, .courses__area, .event__area,
.cta__area, .newsletter__area, .categories-area, .about-area, .section-py-120, .section-py-130 {
    background-color: rgb(var(--cv-bg)) !important;
    background-image: none !important;
}
.breadcrumb__area { border-bottom: 1px solid rgb(var(--cv-line)); }
.breadcrumb__content .title { font-size: 40px; }
.breadcrumb__content span, .breadcrumb__content a { color: rgb(var(--cv-subtle)) !important; }
.sub-title, .section__title .sub-title {
    background: rgb(var(--cv-brand-soft)) !important;
    color: rgb(var(--cv-brand)) !important;
    border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
/* decorative template shapes don't fit the Clovant look */
.banner__shape, .shape, [class*="__shape"], .tg-cursor, .tg-cursor-follow { display: none !important; }

/* --------------------------------------------------- public site: footer */
.footer__area, .footer-bg, .footer__bottom, .footer__top {
    background: rgb(var(--cv-surface)) !important;
    border-top: 1px solid rgb(var(--cv-line));
    color: rgb(var(--cv-subtle)) !important;
}
.footer__area a, .footer__widget a, .footer__bottom a { color: rgb(var(--cv-subtle)) !important; }
.footer__area a:hover { color: rgb(var(--cv-ink)) !important; }
.footer__widget-title, .footer__area .title { color: rgb(var(--cv-ink)) !important; }

/* ---------------------------------------------------------- admin layout */
.app-sidebar, .sidebar, .app-sidebar .main-sidebar, .main-sidebar-header, .app-header, .header-area {
    background: rgb(var(--cv-surface)) !important;
    border-color: rgb(var(--cv-line)) !important;
    box-shadow: none !important;
}
.app-sidebar .side-menu__item, .sidebar-menu a {
    color: rgb(var(--cv-subtle)) !important;
    border-radius: var(--cv-radius-sm);
    font-size: 14px;
}
.app-sidebar .side-menu__item:hover, .app-sidebar .side-menu__item.active, .sidebar-menu a.active, .sidebar-menu a:hover {
    background: rgb(var(--cv-surface-2)) !important;
    color: rgb(var(--cv-ink)) !important;
}
.app-sidebar .side-menu__item.active .side-menu__icon, .app-sidebar .side-menu__item.active i { color: rgb(var(--cv-brand)) !important; }
.app-sidebar .slide__category, .sidebar-menu .menu-title {
    font-size: 10px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: rgb(var(--cv-faint)) !important;
}
.app-content, .main-content, .page-wrapper { background: rgb(var(--cv-bg)) !important; }
.footer, .app-footer { background: transparent !important; border-top: 1px solid rgb(var(--cv-line)); color: rgb(var(--cv-faint)); }

/* stat numbers in dashboards */
.counter, .card .fs-24, .card .fs-28, .card h2, .card h3 { font-family: var(--cv-display) !important; color: rgb(var(--cv-ink)); }

/* ------------------------------------------------------ auth (login etc.) */
.authentication-wrapper {
    background:
        radial-gradient(ellipse 70% 55% at 50% 30%, rgb(var(--cv-brand) / .12), transparent 70%),
        rgb(var(--cv-bg)) !important;
    min-height: 100vh;
}
.authentication-wrapper .card { box-shadow: var(--cv-shadow-md); padding: 8px; }
.authentication-wrapper h4 { font-size: 26px; font-weight: 700; }

/* ------------------------------------------------------------------- logo */
.cv-logo {
    display: inline-flex; align-items: center; gap: calc(var(--cv-logo-size, 40px) * .22);
    text-decoration: none; line-height: 1; vertical-align: middle;
}
.cv-logo-mark { width: var(--cv-logo-size, 40px); height: var(--cv-logo-size, 40px); object-fit: contain; flex: none; }
.cv-logo-word {
    font-family: var(--cv-display); font-weight: 700; letter-spacing: -0.03em;
    font-size: calc(var(--cv-logo-size, 40px) * .9); line-height: 1; color: rgb(var(--cv-ink));
}
/* mark + "lovant": the mark reads as the C, so it sits tight against the letters */
.cv-logo--word { gap: 0 !important; }
.cv-logo--word .cv-logo-mark { margin-right: calc(var(--cv-logo-size, 40px) * -0.13); }
.cv-logo-mark--on-dark { display: none; }
[data-theme-mode="dark"] .cv-logo-mark--on-dark { display: block; }
[data-theme-mode="dark"] .cv-logo-mark--on-light { display: none; }

/* --------------------------------------------------- theme toggle button */
.cv-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 999px;
    border: 1px solid rgb(var(--cv-line)); background: rgb(var(--cv-surface));
    color: rgb(var(--cv-subtle)); cursor: pointer; transition: color .15s, border-color .15s;
}
.cv-theme-toggle:hover { color: rgb(var(--cv-ink)); border-color: rgb(var(--cv-faint)); }
[data-cv-theme-toggle] .cv-sun { display: none; }
[data-theme-mode="dark"] [data-cv-theme-toggle] .cv-sun { display: inline; }
[data-theme-mode="dark"] [data-cv-theme-toggle] .cv-moon { display: none; }

/* scrollbars */
* { scrollbar-color: rgb(var(--cv-surface-3)) transparent; }

/* ------------------------------------------------- SweetAlert popups */
/* The template painted popups navy; match the Clovant surface and buttons. */
.swal2-popup {
    background: rgb(var(--cv-surface)) !important;
    border: 1px solid rgb(var(--cv-line)) !important;
    border-radius: var(--cv-radius, 16px) !important;
    color: rgb(var(--cv-subtle)) !important;
    font-family: var(--cv-font, Inter, sans-serif) !important;
    box-shadow: var(--cv-shadow-md) !important;
}
.swal2-popup .swal2-title { color: rgb(var(--cv-ink)) !important; font-family: var(--cv-display, inherit) !important; }
.swal2-popup .swal2-html-container { color: rgb(var(--cv-subtle)) !important; }
/* The animated success tick is built from masked pieces that the template's CSS
   distorts; draw a clean Remix check instead. */
.swal2-icon.swal2-success { border-color: rgb(34 197 94 / .45) !important; color: #22c55e !important; }
.swal2-icon.swal2-success > * { display: none !important; }
.swal2-icon.swal2-success::before {
    content: "\eb7b"; font-family: remixicon !important; font-size: 2.75em; line-height: 1;
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    animation: cvSwalPop .3s ease-out;
}
@keyframes cvSwalPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.swal2-popup .swal2-actions .swal2-styled { border-radius: 999px !important; padding: 9px 22px !important; font-weight: 600; }
.swal2-popup .swal2-styled.swal2-confirm { background: rgb(var(--cv-brand)) !important; color: rgb(var(--cv-brand-on)) !important; }
.swal2-popup .swal2-styled.swal2-cancel { background: transparent !important; color: rgb(var(--cv-ink)) !important; border: 1px solid rgb(var(--cv-line)) !important; }