/* ==========================================================================
   eXo CRM — brand layer over Valex
   Loaded AFTER styles.min.css. Never edit styles.min.css.

   1. Tokens          5. Sidebar & header
   2. Typography      6. Components (cards, chips, score, timeline, kanban)
   3. Buttons         7. Vendor library skins (gridjs, choices, flatpickr, fullcalendar)
   4. Forms & tables  8. Overrides for icon families we do not ship
   ========================================================================== */

/* ===== 1. TOKENS =========================================================== */
:root {
  /* eXo brand palette — Brand & Design Guidelines v1.0 */
  --exo-green:        #1E4C37;
  --exo-green-deep:   #10271D;
  --exo-green-light:  #3B956C;
  --exo-amber:        #E28F30;
  --exo-amber-light:  #EFBF89;
  --exo-ink:          #212529;
  --exo-muted:        #6C757D;
  --exo-light:        #F8F9FA;
  --exo-sage:         #68897B;
  --exo-taupe:        #B4A996;
  --exo-slate:        #425C81;

  /* Valex levers. Brand Green is 9.8:1 on white, so it is safe as --primary-rgb
     (.btn-primary hardcodes color:#fff). Amber is 2.6:1 on white — accent only. */
  --primary-rgb:    30, 76, 55;
  --secondary-rgb:  104, 137, 123;
  --success-rgb:    59, 149, 108;
  --warning-rgb:    226, 143, 48;
  --info-rgb:       66, 92, 129;
  --danger-rgb:     176, 74, 58;
  --orange-rgb:     226, 143, 48;

  --body-bg-rgb:  248, 249, 250;
  --body-bg-rgb2: 255, 255, 255;
  --light-rgb:    244, 246, 245;
  --dark-rgb:     16, 39, 29;

  --default-text-color: #212529;
  --default-border:     #e6e8e7;
  --text-muted:         #6C757D;
  --custom-white:       #ffffff;
  --default-body-color: #212529;

  --default-font-family: 'Play', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --exo-display-font:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --default-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
  --exo-shadow-lg:  0 24px 80px rgba(0, 0, 0, 0.12);
}

[data-theme-mode="dark"] {
  --body-bg-rgb:  13, 26, 20;
  --body-bg-rgb2: 18, 36, 27;
  --light-rgb:    26, 48, 37;
  --default-border: rgba(255, 255, 255, 0.09);
  --default-text-color: #e9edeb;
  --text-muted: #93a49c;
  /* NOT a typo away from #ffffff: the vendor paints dropdown menus, modals and
     other floating surfaces with var(--custom-white), so on dark it has to be an
     opaque dark colour. An 8-digit hex ending 00 makes every dropdown see-through. */
  --custom-white: rgb(var(--body-bg-rgb2));
  --primary-rgb: 59, 149, 108;   /* Brand Green is too dark on dark; use Green Light */
}

/* ===== 2. TYPOGRAPHY ======================================================= */
body { font-family: var(--default-font-family); font-size: 0.875rem; line-height: 1.62; letter-spacing: 0; }
h1, h2, h3, h4, h5, h6,
.page-title, .card-title, .side-menu__label, .nav-link, .btn,
.breadcrumb, .form-label, .badge, .exo-num {
  font-family: var(--exo-display-font);
  letter-spacing: -0.01em;
}
h1, h2, h3, .card-title { font-weight: 700; }
.page-title { font-weight: 700; letter-spacing: -0.02em; }

.exo-eyebrow {
  font-family: var(--exo-display-font); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--exo-green);
}
[data-theme-mode="dark"] .exo-eyebrow { color: var(--exo-green-light); }
.exo-num { font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.exo-lede { font-size: 0.9375rem; line-height: 1.65; color: var(--text-muted); max-width: 62ch; }
.exo-measure { max-width: 65ch; }
.text-amber { color: var(--exo-amber) !important; }
.bg-amber { background-color: var(--exo-amber) !important; color: var(--exo-green-deep) !important; }
.bg-amber-light { background-color: var(--exo-amber-light) !important; color: #7A5A2A !important; }
.bg-exo-green { background-color: var(--exo-green) !important; color: #fff !important; }

/* ===== 3. BUTTONS — pill radius per brand ================================== */
.btn { border-radius: 100px; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0; padding: 0.5rem 1.15rem; }
.btn-sm { padding: 0.3rem 0.85rem; font-size: 0.75rem; }
.btn-lg { padding: 0.7rem 1.6rem; font-size: 0.875rem; }
.btn-icon { border-radius: 100px; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09); }
.btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn:active { transform: translateY(0); }

/* The booking-equivalent action: amber, ink text, one per view. */
.btn-amber {
  background: var(--exo-amber); border-color: var(--exo-amber); color: var(--exo-green-deep);
}
.btn-amber:hover, .btn-amber:focus { background: #d0801f; border-color: #d0801f; color: var(--exo-green-deep); }
.btn-outline-amber { border: 1px solid var(--exo-amber); color: #9A5E12; background: transparent; }
.btn-outline-amber:hover { background: var(--exo-amber); color: var(--exo-green-deep); }
[data-theme-mode="dark"] .btn-outline-amber { color: var(--exo-amber); }

/* ===== 4. SURFACES, FORMS, TABLES ========================================== */
.card.custom-card {
  border-radius: 12px; border: 1px solid var(--default-border); box-shadow: none;
  background-color: var(--custom-white);
}
[data-theme-mode="dark"] .card.custom-card { background-color: rgb(var(--body-bg-rgb2)); }
.card.custom-card:hover { box-shadow: var(--default-shadow); }
.card.custom-card .card-header { border-bottom: 1px solid var(--default-border); padding: 1rem 1.25rem; }
.card.custom-card .card-title { font-size: 0.9375rem; margin-bottom: 0; }
.exo-panel { border-radius: 16px; }
.exo-flat:hover { box-shadow: none; }

.form-control, .form-select, .choices__inner {
  border-radius: 8px; font-family: var(--default-font-family); font-size: 0.8125rem;
}
.form-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 0.35rem; }
.form-control:focus, .form-select:focus { border-color: var(--exo-green-light); box-shadow: 0 0 0 3px rgba(59, 149, 108, 0.14); }

.table > :not(caption) > * > * { padding: 0.7rem 0.75rem; }
.table thead th {
  font-family: var(--exo-display-font); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--exo-green);
  border-bottom: 1.5px solid var(--exo-green); white-space: nowrap;
}
[data-theme-mode="dark"] .table thead th { color: var(--exo-green-light); border-bottom-color: rgba(59,149,108,.5); }
.table-hover > tbody > tr:hover > * { background-color: rgba(30, 76, 55, 0.035); }
[data-theme-mode="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,.04); }

/* ===== 5. SIDEBAR & HEADER ================================================= */
.app-sidebar { border-inline-end: 1px solid var(--default-border); }
.main-sidebar-header { border-inline-end: 1px solid var(--default-border); border-bottom: 1px solid var(--default-border); }
.main-sidebar-header .header-logo img { max-height: 34px; width: auto; }
.app-sidebar .side-menu__item { padding: 0.55rem 1.15rem; border-radius: 0; }
.app-sidebar .side-menu__label { font-size: 0.8125rem; font-weight: 500; }
.app-sidebar .slide__category {
  font-family: var(--exo-display-font); font-weight: 700; font-size: 0.625rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted);
  padding: 1.15rem 1.15rem 0.4rem;
}
.app-sidebar .side-menu__item { position: relative; }
.app-sidebar .slide.active .side-menu__item,
.app-sidebar .side-menu__item.active {
  background: rgba(30, 76, 55, 0.07); color: var(--exo-green); font-weight: 700;
}
/* The amber marker is a pseudo-element, not a border. A 3px inline-start border
   widens the active row's box and shunts its icon and label 3px right, so the
   whole menu jogs sideways as the active item moves down the list. */
.app-sidebar .slide.active .side-menu__item::before,
.app-sidebar .side-menu__item.active::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 3px; background: var(--exo-amber);
}
[data-theme-mode="dark"] .app-sidebar .side-menu__item.active { background: rgba(59,149,108,.14); color: #fff; }
.app-sidebar .side-menu__item.active .side-menu__label { font-weight: 700; }

/* The vendor's menu icons are inline SVGs sized by their own viewBox; ours are
   icon-font glyphs. A glyph in a plain block box is laid out on the inherited
   34px line box, which drops it ~8px below the label it is supposed to sit beside.
   Centring the glyph inside its own box is what puts icon and text on one line. */
.app-sidebar .side-menu__icon {
  width: 18px; height: 18px; font-size: 1rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.app-sidebar .side-menu__label { line-height: 1.25; }
.app-sidebar .side-menu__item .badge { font-size: 0.625rem; padding: 0.2em 0.5em; }

.app-header { border-bottom: 1px solid var(--default-border); }
.header-logo .desktop-logo { max-height: 32px; width: auto; }
.main-header-container { min-height: 62px; }
.header-link-icon { font-size: 1.05rem; }

/* ===== 6. COMPONENTS ======================================================= */

/* --- fit score dial --- */
.exo-score { display: inline-flex; align-items: center; gap: 0.6rem; }
.exo-score-ring {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--exo-display-font); font-weight: 700; font-size: 0.875rem; flex: 0 0 auto;
}
.exo-score-ring span { background: var(--custom-white); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
[data-theme-mode="dark"] .exo-score-ring span { background: rgb(var(--body-bg-rgb2)); }
.exo-score-ring.lg { width: 76px; height: 76px; font-size: 1.375rem; }
.exo-score-ring.lg span { width: 62px; height: 62px; }

/* --- grade chips A/B/C/D --- */
.exo-grade {
  font-family: var(--exo-display-font); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: 100px; display: inline-block;
}
.exo-grade-a { background: var(--exo-green); color: #fff; }
.exo-grade-b { background: rgba(59, 149, 108, 0.16); color: #2b6e4f; }
.exo-grade-c { background: var(--exo-amber-light); color: #7A5A2A; }
.exo-grade-d { background: #ECEEF0; color: var(--exo-muted); }
[data-theme-mode="dark"] .exo-grade-b { color: #86d4ac; }
[data-theme-mode="dark"] .exo-grade-d { background: rgba(255,255,255,.08); color: #93a49c; }

/* --- provenance: fact vs inference --- */
.exo-fact, .exo-infer { display: inline-flex; align-items: center; gap: 0.28rem; }
.exo-infer { color: var(--exo-slate); font-style: italic; }
.exo-infer::after {
  content: "est"; font-family: var(--exo-display-font); font-style: normal; font-weight: 700;
  font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(66, 92, 129, 0.12); color: var(--exo-slate);
  padding: 0.05rem 0.32rem; border-radius: 100px;
}
[data-theme-mode="dark"] .exo-infer { color: #9db4d6; }
[data-theme-mode="dark"] .exo-infer::after { background: rgba(157,180,214,.16); color: #9db4d6; }
/* Valex pins bare <a> to a fixed dark green, which disappears on dark surfaces.
   Bootstrap's .text-* utilities are !important, so they still win where a link is
   deliberately muted or reset. */
a { color: var(--exo-green); }
a:hover { color: var(--exo-green-light); }
[data-theme-mode="dark"] a { color: var(--exo-green-light); }
[data-theme-mode="dark"] a:hover { color: var(--exo-amber-light); }

.exo-src { font-size: 0.6875rem; color: var(--text-muted); }
.exo-src a { color: var(--text-muted); text-decoration: underline dotted; }
.exo-src a:hover { color: var(--exo-green); }
.exo-stale { color: #9A5E12 !important; }

/* --- action card (Today list) --- */
.exo-action {
  display: flex; gap: 0.9rem; padding: 0.85rem 1rem; border-radius: 12px;
  border: 1px solid var(--default-border); background: var(--custom-white);
  transition: box-shadow .2s ease, transform .2s ease;
}
[data-theme-mode="dark"] .exo-action { background: rgb(var(--body-bg-rgb2)); }
.exo-action:hover { box-shadow: var(--default-shadow); transform: translateY(-2px); }
.exo-action.is-due { border-inline-start: 3px solid var(--exo-amber); }
.exo-action.is-overdue { border-inline-start: 3px solid #B04A3A; }
.exo-action > .flex-fill { min-width: 0; }
@media (max-width: 640px) {
  .exo-action { flex-wrap: wrap; }
  .exo-action > :last-child { width: 100%; text-align: start !important; }
}

/* --- stat tile --- */
.exo-stat .exo-stat-v { font-family: var(--exo-display-font); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1; }
.exo-stat .exo-stat-k { font-family: var(--exo-display-font); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted); }
.exo-stat-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; flex: 0 0 auto; }
/* Stat chips carry their colour inline so each KPI keeps its own hue. On dark
   surfaces those hues sink into the background, so lift them rather than
   flattening them all to one grey. */
[data-theme-mode="dark"] .exo-stat-icon { background: rgba(255, 255, 255, 0.07) !important; filter: brightness(1.9) saturate(1.1); }

/* --- kanban pipeline --- */
.exo-board { display: flex; gap: 0.85rem; overflow-x: auto; padding-bottom: 0.75rem; }
.exo-col { flex: 0 0 244px; background: rgba(30, 76, 55, 0.035); border-radius: 14px; padding: 0.75rem; }
[data-theme-mode="dark"] .exo-col { background: rgba(255,255,255,.035); }
.exo-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.65rem; padding: 0 0.2rem; }
.exo-col-head .t { font-family: var(--exo-display-font); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; }
.exo-deal {
  background: var(--custom-white); border: 1px solid var(--default-border); border-radius: 10px;
  padding: 0.7rem 0.8rem; margin-bottom: 0.55rem; cursor: pointer; transition: box-shadow .2s, transform .2s;
}
[data-theme-mode="dark"] .exo-deal { background: rgb(var(--body-bg-rgb2)); }
.exo-deal:hover { box-shadow: var(--default-shadow); transform: translateY(-2px); }
.exo-deal .n { font-family: var(--exo-display-font); font-weight: 700; font-size: 0.8125rem; line-height: 1.25; }

/* --- timeline --- */
.exo-timeline { position: relative; padding-inline-start: 1.6rem; }
.exo-timeline::before { content: ""; position: absolute; inset-inline-start: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--default-border); }
.exo-tl-item { position: relative; padding-bottom: 1.25rem; }
.exo-tl-item::before {
  content: ""; position: absolute; inset-inline-start: -1.6rem; top: 4px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--custom-white); border: 2px solid var(--exo-green-light);
}
[data-theme-mode="dark"] .exo-tl-item::before { background: rgb(var(--body-bg-rgb2)); }
.exo-tl-item.is-ai::before { border-color: var(--exo-amber); }
.exo-tl-item.is-now::before { background: var(--exo-amber); border-color: var(--exo-amber); }
.exo-tl-when { font-family: var(--exo-display-font); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

/* --- stage rail (10 pipeline stages on the hotel record) --- */
.exo-rail { display: flex; gap: 3px; }
.exo-rail i { flex: 1; height: 6px; border-radius: 100px; background: var(--default-border); }
.exo-rail i.done { background: var(--exo-green-light); }
.exo-rail i.now { background: var(--exo-amber); }

/* --- header territory picker ---------------------------------------------
   .dropdown-item is display:block by default; these rows are three columns.
   The current row uses .is-current rather than .active because Bootstrap's own
   .dropdown-item.active paints a solid primary background and white text. */
/* The selector mirrors the vendor's own
   `.main-header-container .main-header-dropdown .dropdown-item { border-block-end: 1px … }`
   so it can win on specificity without !important. Rules plus rounded hover pills
   read as a table fighting a list; the pills carry the structure alone. */
.main-header-container .main-header-dropdown .exo-territory {
  display: flex; align-items: center; gap: 0.6rem;
  border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 0.8125rem;
  border-block-end: 0;
}
.exo-territory:hover, .exo-territory:focus-visible { background: rgba(30, 76, 55, 0.06); }
[data-theme-mode="dark"] .exo-territory:hover,
[data-theme-mode="dark"] .exo-territory:focus-visible { background: rgba(255, 255, 255, 0.06); }
.exo-territory.is-all { font-weight: 700; }
.exo-territory-meta {
  font-family: var(--exo-display-font); font-weight: 700; font-size: 0.6875rem;
  white-space: nowrap; flex: 0 0 auto;
}
.exo-territory-bar {
  width: 34px; height: 5px; border-radius: 100px; flex: 0 0 auto; overflow: hidden;
  background: rgba(30, 76, 55, 0.12);
}
[data-theme-mode="dark"] .exo-territory-bar { background: rgba(255, 255, 255, 0.12); }
.exo-territory-bar span { display: block; height: 100%; border-radius: 100px; background: var(--exo-green-light); }
.exo-territory-tick { opacity: 0; color: var(--exo-green); font-size: 0.875rem; flex: 0 0 auto; }
[data-theme-mode="dark"] .exo-territory-tick { color: var(--exo-green-light); }
.exo-territory.is-current { background: rgba(30, 76, 55, 0.08); color: var(--exo-green); font-weight: 700; }
[data-theme-mode="dark"] .exo-territory.is-current { background: rgba(59, 149, 108, 0.16); color: #fff; }
.exo-territory.is-current .exo-territory-tick { opacity: 1; }
.territory-dropdown .header-link { padding-inline: 0.5rem; }
/* The name column is flex-fill, so it takes exactly the space left over and the
   longest label sits flush against its own box — zero slack, which means any
   slightly wider rendering (the bold current row, a longer region, a larger
   browser font) silently ellipsises it. Sized here for the longest real
   Bundesland name in bold, with headroom, and clamped so it can never overflow
   a narrow window. */
.exo-territory-menu { width: min(372px, calc(100vw - 1.5rem)); }

/* --- source pill --- */
.exo-pill {
  font-family: var(--exo-display-font); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.06em;
  padding: 0.18rem 0.55rem; border-radius: 100px; background: var(--exo-light); color: var(--exo-muted);
  display: inline-block; white-space: nowrap;
}
[data-theme-mode="dark"] .exo-pill { background: rgba(255,255,255,.07); color: #93a49c; }
.exo-pill.ok { background: rgba(59, 149, 108, 0.14); color: #2b6e4f; }
.exo-pill.warn { background: rgba(226, 143, 48, 0.16); color: #9A5E12; }
.exo-pill.bad { background: rgba(176, 74, 58, 0.13); color: #8f3a2c; }
[data-theme-mode="dark"] .exo-pill.ok { color: #86d4ac; }
[data-theme-mode="dark"] .exo-pill.warn { color: var(--exo-amber-light); }

/* --- green surfaces: the feature band and the auth art panel ---------------
   styles.min.css colours headings explicitly, so they do not inherit the white
   from a full-bleed green section. Both green surfaces need the same override. */
.exo-auth-art h1, .exo-auth-art h2, .exo-auth-art h3 { color: #fff; }
.exo-band, .card.custom-card.exo-band { background: var(--exo-green); color: #fff; border-radius: 16px; border-color: transparent; }
.card.custom-card.exo-band:hover { box-shadow: var(--exo-shadow-lg); }
.exo-band h1, .exo-band h2, .exo-band h3, .exo-band h4, .exo-band .card-title { color: #fff; }
.exo-band p, .exo-band .exo-lede { color: rgba(255, 255, 255, 0.62); }
.exo-band .exo-band-k { font-family: var(--exo-display-font); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.exo-band .exo-eyebrow { color: var(--exo-amber); }
.exo-band .hair { border-color: rgba(255, 255, 255, 0.12) !important; }

/* --- empty state --- */
.exo-empty { text-align: center; padding: 3rem 1rem; }
.exo-empty i { font-size: 2.25rem; color: var(--exo-amber-light); display: block; margin-bottom: 0.75rem; }

/* --- avatar initials --- */
.exo-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--exo-display-font); font-weight: 700; font-size: 0.75rem;
  background: rgba(30, 76, 55, 0.1); color: var(--exo-green);
}
.exo-avatar.sm { width: 26px; height: 26px; font-size: 0.625rem; }
.exo-avatar.lg { width: 48px; height: 48px; font-size: 0.9375rem; }
[data-theme-mode="dark"] .exo-avatar { background: rgba(59,149,108,.2); color: #86d4ac; }

/* --- weight slider row (score editor) --- */
.exo-weight { display: grid; grid-template-columns: 1fr 76px 52px; gap: 0.9rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--default-border); }
.exo-weight:last-child { border-bottom: 0; }
.form-range::-webkit-slider-thumb { background: var(--exo-green); }
.form-range::-moz-range-thumb { background: var(--exo-green); }

/* --- coverage scatter --- */
.exo-scatter { position: relative; width: 100%; aspect-ratio: 3 / 4; max-width: 380px; margin-inline: auto; }
.exo-scatter .grat { position: absolute; inset: 0; background-image: linear-gradient(rgba(30,76,55,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(30,76,55,.06) 1px, transparent 1px); background-size: 12.5% 12.5%; border-radius: 12px; }
[data-theme-mode="dark"] .exo-scatter .grat { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); }
.exo-dot { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: var(--exo-green); opacity: .82; cursor: pointer; transition: transform .2s; }
.exo-dot:hover { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
.exo-dot.hot { background: var(--exo-amber); }

/* ===== 7. VENDOR SKINS ===================================================== */
.gridjs-wrapper { border-radius: 10px; box-shadow: none; border: 1px solid var(--default-border); overflow-x: auto; }
/* Below this the wrapper scrolls sideways rather than compressing columns. */
.gridjs-table { min-width: 1060px; }
/* Long trigger text is allowed two lines, then ellipsis — one 40-character
   trigger must not set the height of every row in the table. */
.exo-clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.gridjs-table { font-family: var(--default-font-family); }
th.gridjs-th {
  font-family: var(--exo-display-font); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--exo-green);
  background: transparent; border-bottom: 1.5px solid var(--exo-green);
}
[data-theme-mode="dark"] th.gridjs-th { color: var(--exo-green-light); background: transparent; }
td.gridjs-td { font-size: 0.8125rem; border-bottom: 1px solid var(--default-border); background: transparent; }
/* Grid.js's own theme pays 12px of padding on each side of every cell — 216px of
   a 1112px table across nine columns, which is what starved the name column.
   Selector is doubled up because the theme stylesheet loads after this one. */
.gridjs-container td.gridjs-td,
.gridjs-container th.gridjs-th { padding: 0.7rem 0.6rem; }
.gridjs-search-input, .gridjs-input { border-radius: 100px; font-size: 0.8125rem; }
.gridjs-pagination .gridjs-pages button { border-radius: 8px !important; font-family: var(--exo-display-font); font-size: 0.75rem; }
.gridjs-pagination .gridjs-pages button.gridjs-currentPage { background: var(--exo-green); color: #fff; }
.gridjs-footer, .gridjs-head { border: 0; box-shadow: none; background: transparent; }
.gridjs-container { color: var(--default-text-color); }

.choices__inner { min-height: 38px; padding: 0.25rem 0.5rem; }
.choices__list--dropdown .choices__item--selectable.is-highlighted { background: rgba(30, 76, 55, 0.08); }

.fc .fc-toolbar-title { font-family: var(--exo-display-font); font-weight: 700; font-size: 1rem; }
.fc .fc-button { border-radius: 100px !important; font-family: var(--exo-display-font); font-weight: 700; font-size: 0.75rem; text-transform: none; }
.fc .fc-button-primary { background: var(--exo-green); border-color: var(--exo-green); }
.fc-event { border-radius: 6px; border: 0; font-size: 0.75rem; padding: 1px 4px; }

.flatpickr-day.selected { background: var(--exo-green); border-color: var(--exo-green); }

/* ===== 8. ICON FAMILIES WE DO NOT SHIP ===================================== */
/* styles.min.css reaches for tabler (breadcrumb divider) and remixicon (accordion
   chevron). Neither font ships here, so replace the glyphs with characters. */
.breadcrumb-item + .breadcrumb-item::before { content: "/" !important; font-family: inherit !important; color: var(--text-muted); }
.accordion-button::after { background-image: none !important; content: "\F282"; font-family: "bootstrap-icons" !important; font-size: 0.75rem; transition: transform .2s; }
.accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.side-menu__angle::before { font-family: "feather" !important; }

/* ===== 9. PRINT ============================================================ */
@media print {
  .app-sidebar, .app-header, .footer, .exo-noprint { display: none !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
}