/* ============================================================================
   ClassOn College ERP — Green Enterprise Design System
   ============================================================================
   Loaded after college-theme.css. Everything visual is expressed through the
   tokens in section 1; no component below hard-codes a green.

   Budget the spec asks for, and what this file holds to:
     70-80%  neutral white / very light surfaces
     15-20%  green, used as the brand accent
      5-10%  semantic colour (amber, red, blue) where meaning demands it

     1. Tokens          6. Tables
     2. Typography      7. Cards & KPIs
     3. Spacing         8. Sidebar
     4. Buttons         9. Badges & status
     5. Inputs         10. Dashboard, charts, header
   ============================================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* ---- Brand green ---- */
  --g-primary:        #15803D;   /* primary actions, links, active nav      */
  --g-primary-hover:  #166534;   /* hover / pressed                          */
  --g-dark:           #166534;   /* sidebar surface                          */
  --g-deep:           #14532D;   /* sidebar base, deepest brand tone         */
  --g-light:          #DCFCE7;   /* selected rows, icon backgrounds          */
  --g-lightest:       #F0FDF4;   /* highlighted regions, subtle fills        */
  --g-ring:           rgba(21, 128, 61, 0.16);   /* focus ring               */
  --g-on-dark:        #BBF7D0;   /* green text that sits on the dark sidebar */

  /* ---- Neutral surfaces ---- */
  --bg:               #F8FAFC;
  --surface:          #FFFFFF;
  --surface-sunken:   #F1F5F9;
  --border:           #E2E8F0;
  --border-strong:    #CBD5E1;

  /* ---- Text ---- */
  --text:             #0F172A;
  --text-secondary:   #334155;
  --text-muted:       #64748B;
  --text-on-brand:    #FFFFFF;

  /* ---- Semantic ---- */
  --success:          #15803D;
  --success-bg:       #DCFCE7;
  --warning:          #B45309;
  --warning-bg:       #FEF3C7;
  --danger:           #B91C1C;
  --danger-bg:        #FEE2E2;
  --info:             #1D4ED8;
  --info-bg:          #DBEAFE;
  --neutral:          #475569;
  --neutral-bg:       #F1F5F9;
  --success-border:   #86EFAC;
  --warning-border:   #FCD34D;
  --danger-border:    #FCA5A5;
  --info-border:      #93C5FD;
  --neutral-border:   #CBD5E1;
  --g-mid:            #22C55E;   /* light step for gradients and chart ramps */
  --classon-gold-subtle: #FEFCE8;

  /* ---- Elevation: minimal, as the spec asks ---- */
  --shadow-xs:        0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:        0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md:        0 4px 12px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg:        0 12px 28px -6px rgba(15, 23, 42, 0.12);

  /* ---- Radius ---- */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius:           8px;
  --radius-lg:        12px;
  --radius-pill:      999px;

  /* ============================================================
     Legacy aliases
     ------------------------------------------------------------
     college-theme.css references --classon-maroon in 114 places.
     Pointing those names at the green tokens repaints the whole
     stylesheet without editing it, and keeps one source of truth.
     ============================================================ */
  --classon-maroon:         var(--g-primary);
  --classon-maroon-dark:    var(--g-primary-hover);
  --classon-maroon-light:   var(--g-mid);
  --classon-maroon-subtle:  var(--g-light);
  --classon-gold:           #CA8A04;
  --classon-gold-dark:      #A16207;

  --college-primary:        var(--g-primary);
  --college-primary-dark:   var(--g-primary-hover);
  --college-secondary:      var(--g-light);
  --college-accent:         var(--g-lightest);

  --classon-dark:           var(--text);
  --classon-slate:          var(--text-secondary);
  --classon-muted:          var(--text-muted);
  --classon-border:         var(--border);
  --classon-bg:             var(--bg);
  --classon-card-bg:        var(--surface);

  /* Accent families used by KPI icons — kept for meaning, muted for restraint */
  --classon-teal-subtle:    var(--g-light);
  --classon-teal-text:      var(--g-primary);
  --classon-blue-subtle:    var(--info-bg);
  --classon-blue-text:      var(--info);
  --classon-yellow-subtle:  var(--warning-bg);
  --classon-yellow-text:    var(--warning);
  --classon-purple-subtle:  var(--info-bg);   /* purple is not in the palette */
  --classon-purple-text:    var(--info);      /* remapped to the info semantic */
  --classon-pink-subtle:    var(--danger-bg);
  --classon-pink-text:      var(--danger);

  --classon-shadow-sm:      var(--shadow-xs);
  --classon-shadow:         var(--shadow-sm);
  --classon-shadow-lg:      var(--shadow-lg);
}

/* ============================================================
   2. TYPOGRAPHY
   ------------------------------------------------------------
   One family. Hierarchy comes from size, weight and colour —
   not from bolding everything.
   ============================================================ */

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --classon-font-primary: var(--font);
  --classon-font-heading: var(--font);

  --text-page:    18px;   /* page title      */
  --text-section: 14px;   /* section heading */
  --text-card:    13px;   /* card heading    */
  --text-body:    12.5px;
  --text-meta:    11px;   /* metadata, captions */
  --text-micro:   10px;
}

body { font-family: var(--font); color: var(--text-secondary); }

h1, h2, h3, h4, h5, h6,
.font-heading { font-family: var(--font); letter-spacing: -0.011em; color: var(--text); }

/* Page title */
.classon-page-title,
.container-fluid > .d-flex h4.font-heading {
  font-size: var(--text-page);
  font-weight: 650;
  letter-spacing: -0.02em;
}

/* Section / card heading */
.classon-card-title {
  font-size: var(--text-card);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}

.kpi-card-label,
.sidebar-section-label,
.erp-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.text-muted { color: var(--text-muted) !important; }

/* The template leaned on fw-bold for emphasis; 600 reads calmer at this size. */
.fw-bold { font-weight: 600 !important; }
.fw-semibold { font-weight: 550 !important; }

/* ============================================================
   3. SPACING
   ------------------------------------------------------------
   A 4px base step, so gutters and paddings line up across
   cards, tables and forms.
   ============================================================ */

:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
}

/* ============================================================
   4. BUTTONS
   ------------------------------------------------------------
   Primary green · secondary outlined · tertiary text ·
   danger red · warning amber. Green is not every state.
   ============================================================ */

.btn { font-weight: 550; letter-spacing: 0; border-radius: var(--radius-sm); }

.btn:focus-visible,
.btn.focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--g-ring);
}

/* Primary — green fill, white text */
.btn-classon,
.btn-college-primary,
.btn-classon-submit,
.btn-primary {
  background: var(--g-primary) !important;
  border: 1px solid var(--g-primary) !important;
  color: var(--text-on-brand) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-classon:hover,
.btn-college-primary:hover,
.btn-classon-submit:hover,
.btn-primary:hover {
  background: var(--g-primary-hover) !important;
  border-color: var(--g-primary-hover) !important;
  color: var(--text-on-brand) !important;
}

/* Secondary — white with a green edge */
.btn-college-outline,
.btn-classon-cancel,
.btn-outline-primary {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  font-weight: 550 !important;
}

.btn-college-outline:hover,
.btn-classon-cancel:hover,
.btn-outline-primary:hover {
  background: var(--g-lightest) !important;
  border-color: var(--g-primary) !important;
  color: var(--g-primary-hover) !important;
}

/* Tertiary — text only */
.btn-link,
.btn-college-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--g-primary) !important;
  text-decoration: none !important;
}

.btn-link:hover,
.btn-college-ghost:hover { color: var(--g-primary-hover) !important; }

/* Semantic buttons keep their own meaning */
.btn-outline-success { border-color: var(--success) !important; color: var(--success) !important; }
.btn-outline-success:hover { background: var(--success) !important; color: #fff !important; }

.btn-outline-warning { border-color: var(--warning) !important; color: var(--warning) !important; }
.btn-outline-warning:hover { background: var(--warning) !important; color: #fff !important; }

.btn-outline-danger { border-color: var(--danger) !important; color: var(--danger) !important; }
.btn-outline-danger:hover { background: var(--danger) !important; color: #fff !important; }

.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
.btn-success { background: var(--success) !important; border-color: var(--success) !important; }

/* The accent button was a gold CTA; make it the secondary brand action */
.btn-college-accent {
  background: var(--g-lightest) !important;
  border: 1px solid var(--g-primary) !important;
  color: var(--g-primary-hover) !important;
}
.btn-college-accent:hover { background: var(--g-light) !important; }

/* ============================================================
   5. INPUTS
   ------------------------------------------------------------
   White field, neutral border, green focus ring.
   ============================================================ */

.form-control,
.form-select {
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder { color: #94A3B8; }

.form-control:focus,
.form-select:focus,
.erp-form .form-control:focus,
.erp-form .form-select:focus {
  background-color: var(--surface);
  border-color: var(--g-primary);
  box-shadow: 0 0 0 3px var(--g-ring);
  outline: none;
}

.form-label,
.erp-label { color: var(--text-muted); }

/* Required marker: a quiet green dot, not a shouting red star */
.erp-form .form-label .text-danger,
.form-label .text-danger {
  color: var(--g-primary) !important;
  font-weight: 700;
}

/* Errors stay red — that is what red is for */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
.invalid-feedback { color: var(--danger); }

/* Checkboxes and radios take the brand accent */
.form-check-input:checked {
  background-color: var(--g-primary);
  border-color: var(--g-primary);
}
.form-check-input:focus {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 3px var(--g-ring);
}
.form-check-input:indeterminate {
  background-color: var(--g-primary);
  border-color: var(--g-primary);
}

.input-group-text {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.erp-form-section-title {
  color: var(--g-primary-hover);
  font-size: var(--text-meta);
  letter-spacing: 0.06em;
}

.erp-form-section + .erp-form-section { border-top-color: var(--border); }

/* ============================================================
   6. TABLES
   ------------------------------------------------------------
   Neutral header. Green only for selection, links and actions.
   ============================================================ */

.table { color: var(--text-secondary); border-color: var(--border); }

.table > thead th,
.table-light > th,
.table thead.table-light th {
  background: var(--surface-sunken) !important;
  color: var(--text-muted) !important;
  font-weight: 600;
  font-size: var(--text-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border) !important;
}

.table > tbody > tr { border-color: var(--border); }
.table-hover > tbody > tr:hover > * { background-color: var(--g-lightest); }

.erp-row-selected,
.erp-row-selected > * { background-color: var(--g-light) !important; }

.table a:not(.btn):not(.btn-paces-pill) { color: var(--g-primary); text-decoration: none; }
.table a:not(.btn):not(.btn-paces-pill):hover { color: var(--g-primary-hover); text-decoration: underline; }

.erp-bulk-bar {
  background: var(--g-lightest);
  border-top: 1px solid var(--g-light);
  border-bottom: 1px solid var(--g-light);
  color: var(--text-secondary);
}

/* Pagination */
.page-link { color: var(--g-primary); border-color: var(--border); }
.page-item.active .page-link,
.page-link.bg-danger {
  background: var(--g-primary) !important;
  border-color: var(--g-primary) !important;
  color: #fff !important;
}
.page-item.disabled .page-link { color: #94A3B8; background: var(--surface); }

/* Row action pills */
.btn-paces-pill,
a.btn-paces-pill,
button.btn-paces-pill {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
a.btn-paces-pill.paces-view:hover   { background: var(--info-bg) !important;    border-color: var(--info) !important; }
a.btn-paces-pill.paces-edit:hover   { background: var(--warning-bg) !important; border-color: var(--warning) !important; }
a.btn-paces-pill.paces-status:hover { background: var(--g-light) !important;    border-color: var(--g-primary) !important; }
a.btn-paces-pill.paces-delete:hover { background: var(--danger-bg) !important;  border-color: var(--danger) !important; }

.btn-paces-pill.paces-view i   { color: var(--info) !important; }
.btn-paces-pill.paces-edit i   { color: var(--warning) !important; }
.btn-paces-pill.paces-status i { color: var(--success) !important; }
.btn-paces-pill.paces-delete i { color: var(--danger) !important; }

.erp-avatar { background: var(--g-light); color: var(--g-primary-hover); }

.erp-empty i { color: var(--border-strong); opacity: 1; }

/* ============================================================
   7. CARDS & KPIs
   ------------------------------------------------------------
   White surfaces, hairline border, almost no shadow.
   ============================================================ */

.classon-card,
.card,
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs) !important;
}

.classon-card-header,
.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

.classon-card-title i { color: var(--g-primary); }

/* KPI card: a green hairline at the top is the only brand fill it needs */
.kpi-card {
  position: relative;
  overflow: hidden;
  padding: var(--sp-4);
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 3px;
  height: 100%;
  background: var(--g-primary);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.kpi-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-md) !important;
}
.kpi-card:hover::before { opacity: 1; }

.kpi-card-label {
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-card-value {
  font-size: 22px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.kpi-card-footer { font-size: var(--text-meta); color: var(--text-muted); }

.kpi-card-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.kpi-trend-up   { background: var(--success-bg) !important; color: var(--success) !important; }
.kpi-trend-down { background: var(--danger-bg) !important;  color: var(--danger) !important; }

/* Features grid tile */
.module-widget-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.module-widget-card:hover {
  border-color: var(--g-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.module-widget-title { color: var(--text); font-weight: 600; }
.module-fallback-icon { color: var(--g-primary); }

.hub-filter-pill-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  font-weight: 550;
}

.hub-filter-pill-btn:hover { border-color: var(--g-primary); color: var(--g-primary-hover); }

.hub-filter-pill-btn.active {
  background: var(--g-primary) !important;
  border-color: var(--g-primary) !important;
  color: #fff !important;
}
.hub-filter-pill-btn.active i,
.hub-filter-pill-btn.active .badge { color: #fff !important; }
.hub-filter-pill-btn.active .badge { background: rgba(255, 255, 255, 0.22) !important; }

/* ============================================================
   8. SIDEBAR
   ------------------------------------------------------------
   The one large green surface in the product. Deep, quiet, and
   only the active item is lit.
   ============================================================ */

.module-left-sidebar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--sp-3) var(--sp-2) !important;
  /* The rail sticks at 110px with a max-height of calc(100vh - 130px). Give it
     the same min-height so it fills its column instead of stopping wherever the
     link list happens to end - every screen then shows a rail of identical
     height. */
  min-height: calc(100vh - 130px) !important;
}

.module-left-sidebar .sidebar-section-label {
  color: var(--text-muted) !important;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  display: block;
}

.module-left-sidebar .module-sidebar-nav { list-style: none; margin: 0; padding: 0; }

.module-left-sidebar .module-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 7px 11px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary) !important;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.14s ease, color 0.14s ease;
}

.module-left-sidebar .module-nav-link i {
  color: var(--text-muted);
  font-size: 12px;
  margin-right: 7px;
  transition: color 0.14s ease;
}

.module-left-sidebar .module-nav-link:hover {
  background: var(--g-lightest) !important;
  color: var(--g-dark) !important;
}
.module-left-sidebar .module-nav-link:hover i { color: var(--g-primary); }

/* Active item: the light green wash, with the brand carrying the left edge */
.module-left-sidebar .module-nav-link.active {
  background: var(--g-light) !important;
  border-left-color: var(--g-primary);
  color: var(--g-deep) !important;
  font-weight: 600;
}
.module-left-sidebar .module-nav-link.active i { color: var(--g-primary); }

.module-left-sidebar .sidebar-count {
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.module-left-sidebar .module-nav-link.active .sidebar-count {
  background: var(--g-primary);
  color: #fff;
}

/* Horizontal variant used on the full-width wizard pages */
.module-nav-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.module-strip-label {
  color: var(--text-muted);
  border-right-color: var(--border);
}
.module-strip-link { color: var(--text-secondary); }
.module-strip-link i { color: var(--text-muted); opacity: 1; }
.module-strip-link:hover { background: var(--g-lightest); color: var(--g-dark); }
.module-strip-link:hover i { color: var(--g-primary); }
.module-strip-link.active {
  background: var(--g-light);
  color: var(--g-deep);
  font-weight: 600;
}
.module-strip-link.active i { color: var(--g-primary); }

/* ============================================================
   9. BADGES & STATUS
   ------------------------------------------------------------
   Success green, warning amber, error red, info blue, neutral
   grey. Green is not forced onto every state.
   ============================================================ */

.badge { font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-xs); }

.bg-success-subtle   { background: var(--success-bg) !important; }
.text-success        { color: var(--success) !important; }
.bg-warning-subtle   { background: var(--warning-bg) !important; }
.text-warning        { color: var(--warning) !important; }
.bg-danger-subtle    { background: var(--danger-bg) !important; }
.text-danger         { color: var(--danger) !important; }
.bg-info-subtle      { background: var(--info-bg) !important; }
.text-info           { color: var(--info) !important; }
.bg-primary-subtle   { background: var(--info-bg) !important; }
.text-primary        { color: var(--info) !important; }
.bg-secondary-subtle { background: var(--neutral-bg) !important; }
.text-secondary      { color: var(--neutral) !important; }

.status-pill-active {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: 600;
}

.status-pill-disabled,
.status-pill-inactive {
  background: var(--neutral-bg);
  color: var(--neutral);
  border: 1px solid var(--border);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: 600;
}

/* ============================================================
   10. HEADER, DASHBOARD, CHARTS
   ============================================================ */

/* ---- Top header: white, hairline border, green only on accents ---- */
/* The top bar is now the product's one large green surface. Everything sitting
   on it switches to on-dark treatment: translucent white pills rather than
   grey ones, so the controls read as part of the bar instead of patches on it. */
.classon-topbar {
  /* Lighter than the flat deep green, and graded so the bar has some depth:
     the brand green carries the left where the logo sits and settles into the
     darker tones on the right behind the account controls. All three stops are
     the palette's own greens - no new shade is introduced. */
  background: linear-gradient(100deg,
              var(--g-primary) 0%,
              var(--g-dark) 55%,
              var(--g-deep) 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--g-deep);
  box-shadow: none !important;
  height: 58px;
}

.classon-topbar .classon-brand a { color: #fff; }
.classon-school-info { border-left: 1px solid rgba(255, 255, 255, 0.18); color: #fff; }
.classon-school-name { color: #fff; font-weight: 600; }
.classon-school-sub  { color: rgba(255, 255, 255, 0.62); opacity: 1; }

.command-palette-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: none;
  border-radius: var(--radius-sm) !important;
  min-width: 300px;
}

.command-palette-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  color: #fff !important;
}

.command-palette-btn:focus-visible {
  border-color: var(--g-on-dark) !important;
  box-shadow: 0 0 0 3px rgba(187, 247, 208, 0.22);
  outline: none;
}

.kbd-shortcut {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.78);
}

.role-switcher-dropdown .dropdown-toggle,
.classon-session-container,
.classon-theme-btn,
.classon-notification-circle,
.classon-user-pill {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
}

.role-switcher-dropdown .dropdown-toggle:hover,
.classon-session-container:hover,
.classon-theme-btn:hover,
.classon-notification-circle:hover,
.classon-user-pill:hover,
.classon-user-dropdown.show .classon-user-pill {
  background: rgba(255, 255, 255, 0.20) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: #fff !important;
}

/* Icons on the bar: pale green reads as brand without shouting */
.role-switcher-dropdown .dropdown-toggle i,
.classon-session-container i { color: var(--g-on-dark) !important; }
.classon-theme-btn i { color: rgba(255, 255, 255, 0.75) !important; }
.classon-notification-circle i { color: rgba(255, 255, 255, 0.88) !important; }
.command-palette-btn i { color: rgba(255, 255, 255, 0.65) !important; }

.classon-session-select {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
}
/* Native dropdown items render on the OS surface, so they need dark text */
.classon-session-select option { color: var(--text); background: var(--surface); }

.classon-avatar-circle {
  background: var(--g-on-dark) !important;
  color: var(--g-deep) !important;
  font-weight: 700;
}

/* Notification indicator is the one place red belongs in the header */
.icon-badge-dot {
  background: var(--danger) !important;
  box-shadow: 0 0 0 2px var(--g-deep);
}

/* The logo lockup sits on green now */
.classon-topbar .classon-logo-img { filter: none; }

/* ---- Tab bar: green underline marks the active hub ---- */
.classon-nav-tabs-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.classon-tab-link {
  color: var(--text-muted) !important;
  font-weight: 550;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.classon-tab-link:hover { color: var(--text) !important; }

.classon-tab-link.active {
  color: var(--g-primary) !important;
  border-bottom-color: var(--g-primary) !important;
  font-weight: 600;
}
.classon-tab-link.active i { color: var(--g-primary) !important; }

/* ---- Breadcrumb ---- */
.classon-breadcrumb-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.classon-breadcrumb-bar .breadcrumb-item a { color: var(--text-muted); }
.classon-breadcrumb-bar .breadcrumb-item a:hover { color: var(--g-primary); }
.classon-breadcrumb-bar .breadcrumb-item.active { color: var(--text); }

.classon-breadcrumb-back {
  color: var(--g-primary);
  border-color: var(--border);
}
.classon-breadcrumb-back:hover {
  background: var(--g-lightest);
  border-color: var(--g-primary);
  color: var(--g-primary-hover);
}

/* ---- Quick actions bar on the dashboard ---- */
.quick-actions-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}

.quick-action-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.quick-action-btn:hover {
  background: var(--g-lightest);
  border-color: var(--g-primary);
  color: var(--g-primary-hover);
}

/* ---- Command palette ---- */
.command-item { color: var(--text-secondary); }
.command-item:hover,
.command-item.is-highlighted {
  background: var(--g-lightest);
  color: var(--g-primary-hover);
}
.command-item.is-highlighted { box-shadow: inset 2px 0 0 var(--g-primary); }
.command-item-group { background: var(--surface-sunken); color: var(--text-muted); }

/* ---- Notification drawer ---- */
.notification-item.unread {
  border-left: 3px solid var(--g-primary);
  background: var(--g-lightest);
}
.notification-item:hover { background: var(--surface-sunken); }

/* ---- Floating help button ---- */
.classon-fab {
  background: var(--g-primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-lg) !important;
}
.classon-fab:hover { background: var(--g-primary-hover) !important; }

/* ---- 360° tabs ---- */
.erp-tab { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
.erp-tab:hover { border-color: var(--g-primary); color: var(--g-primary-hover); }
.erp-tab.active { background: var(--g-primary); border-color: var(--g-primary); color: #fff; }

/* ---- Draft banner ---- */
.erp-draft-banner {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

/* ---- Charts ----
   ApexCharts reads these where the page passes them through; the
   restrained palette keeps green as the primary series and grey
   as the comparison. */
:root {
  --chart-1: #15803D;   /* primary series      */
  --chart-2: #94A3B8;   /* comparison, neutral */
  --chart-3: #4ADE80;   /* secondary green     */
  --chart-4: #B45309;   /* warning series      */
  --chart-5: #1D4ED8;   /* informational       */
  --chart-grid: #F1F5F9;
  --chart-axis: #94A3B8;
}

.apexcharts-gridline { stroke: var(--chart-grid); }
.apexcharts-text { fill: var(--chart-axis); }

/* ---- Focus visibility across the app ---- */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.module-nav-link:focus-visible,
.classon-tab-link:focus-visible {
  outline: 2px solid var(--g-primary);
  outline-offset: 2px;
}

.module-left-sidebar .module-nav-link:focus-visible,
.module-strip-link:focus-visible { outline-color: var(--g-on-dark); }

/* ============================================================
   DARK THEME
   ------------------------------------------------------------
   Same tokens, re-pointed. The sidebar keeps its green identity
   so the brand does not disappear at night.
   ============================================================ */

[data-theme="dark"] {
  /* Soft-badge borders and the gold accent need dark values too, or they glow
     against the dark surfaces instead of sitting quietly on them. */
  --success-border: #166534;
  --warning-border: #78350F;
  --danger-border:  #7F1D1D;
  --info-border:    #1E3A8A;
  --neutral-border: #33475F;
  --classon-gold:        #FBBF24;
  --classon-gold-dark:   #CA8A04;
  --classon-gold-subtle: #2A1F08;

  --bg:             #0B1220;
  --surface:        #131C2B;
  --surface-sunken: #0F1727;
  --border:         #24334A;
  --border-strong:  #33475F;

  --text:           #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted:     #94A3B8;

  --g-primary:       #22C55E;
  --g-primary-hover: #4ADE80;
  --g-light:         #14532D;
  --g-lightest:      #10281B;
  --g-ring:          rgba(34, 197, 94, 0.22);

  --success:    #4ADE80;  --success-bg: #10281B;
  --warning:    #FBBF24;  --warning-bg: #2A1F08;
  --danger:     #F87171;  --danger-bg:  #2A1113;
  --info:       #60A5FA;  --info-bg:    #10203C;
  --neutral:    #94A3B8;  --neutral-bg: #1B2637;

  --classon-dark:    var(--text);
  --classon-slate:   var(--text-secondary);
  --classon-muted:   var(--text-muted);
  --classon-border:  var(--border);
  --classon-bg:      var(--bg);
  --classon-card-bg: var(--surface);
}

[data-theme="dark"] body { background: var(--bg) !important; color: var(--text-secondary) !important; }

[data-theme="dark"] .classon-nav-tabs-bar,
[data-theme="dark"] .classon-breadcrumb-bar,
[data-theme="dark"] .classon-card,
[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .quick-actions-bar,
[data-theme="dark"] .module-widget-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .dropdown-menu {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .classon-card-header,
[data-theme="dark"] .card-header { background: var(--surface) !important; }

[data-theme="dark"] .table > thead th,
[data-theme="dark"] .table thead.table-light th {
  background: var(--surface-sunken) !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] .table { color: var(--text-secondary) !important; }
[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(34, 197, 94, 0.08) !important; }
[data-theme="dark"] .erp-row-selected > * { background-color: rgba(34, 197, 94, 0.14) !important; }

/* background-color, not the shorthand: the shorthand resets the chevron's
   background-repeat and tiles it across the whole control. */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--surface-sunken);
  border-color: var(--border-strong);
  color: var(--text);
}

.form-select,
[data-theme="dark"] .form-select { background-repeat: no-repeat; }

/* The default chevron is near-black and vanishes on a dark field. */
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .command-palette-btn,
[data-theme="dark"] .role-switcher-dropdown .dropdown-toggle,
[data-theme="dark"] .classon-session-container,
[data-theme="dark"] .classon-theme-btn,
[data-theme="dark"] .classon-notification-circle,
[data-theme="dark"] .classon-user-pill,
[data-theme="dark"] .quick-action-btn,
[data-theme="dark"] .hub-filter-pill-btn,
[data-theme="dark"] .erp-tab {
  background: var(--surface-sunken) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .kpi-card-value,
[data-theme="dark"] .module-widget-title,
[data-theme="dark"] .classon-card-title,
[data-theme="dark"] .classon-school-name { color: var(--text) !important; }

[data-theme="dark"] .text-dark { color: var(--text) !important; }

/* The sidebar is already deep green; nudge it darker so it sits on the
   darker page without glowing. */
/* The top bar keeps its green identity in dark mode, just deeper. The rail is
   a white surface in light mode, so here it follows the other dark surfaces. */
[data-theme="dark"] .classon-topbar {
  background: linear-gradient(100deg, #166534 0%, #14532D 55%, #0D3320 100%) !important;
  border-bottom-color: #0D3320 !important;
  color: #fff !important;
}
[data-theme="dark"] .icon-badge-dot { box-shadow: 0 0 0 2px #0D3320; }

[data-theme="dark"] .module-left-sidebar,
[data-theme="dark"] .module-nav-strip {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .module-left-sidebar .module-nav-link.active,
[data-theme="dark"] .module-strip-link.active {
  background: rgba(34, 197, 94, 0.16) !important;
  color: #DCFCE7 !important;
  border-left-color: var(--g-primary);
}
[data-theme="dark"] .module-left-sidebar .module-nav-link:hover,
[data-theme="dark"] .module-strip-link:hover {
  background: rgba(34, 197, 94, 0.09) !important;
  color: #DCFCE7 !important;
}
[data-theme="dark"] .module-left-sidebar .module-nav-link.active .sidebar-count {
  background: var(--g-primary);
  color: #06210F;
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .classon-topbar,
  .classon-nav-tabs-bar,
  .classon-breadcrumb-bar,
  .module-left-sidebar,
  .module-nav-strip,
  .classon-fab,
  .erp-bulk-bar { display: none !important; }

  .classon-card, .card, .kpi-card { border: 1px solid #CBD5E1 !important; box-shadow: none !important; }
  body { background: #fff !important; }
}

/* ============================================================
   BRAND UTILITIES
   ------------------------------------------------------------
   The template used .text-danger wherever it wanted the brand
   colour. Under a semantic palette that reads as an error, so
   decorative uses move to these instead.
   ============================================================ */

.text-brand { color: var(--g-primary) !important; }
.bg-brand-subtle { background: var(--g-light) !important; }

.quick-action-primary {
  border-color: var(--g-primary) !important;
  color: var(--g-primary-hover) !important;
  font-weight: 600;
}
.quick-action-primary:hover {
  background: var(--g-light) !important;
  border-color: var(--g-primary-hover) !important;
}

/* Required-field markers, wherever they appear */
.erp-form .form-label .text-danger,
.modal-footer .text-danger,
label .text-danger { color: var(--g-primary) !important; }

/* Card and modal heading icons carry the brand, not an alarm */
.classon-card-title i,
.modal-title i,
.classon-card-header h5 i,
.classon-card-header h6 i { color: var(--g-primary) !important; }

/* ============================================================
   BOOTSTRAP GREEN OVERRIDES
   ------------------------------------------------------------
   Bootstrap ships its own success green (#198754). Left alone it
   sits next to the brand green and reads as a second, slightly
   different shade — exactly the drift the design system exists
   to prevent.
   ============================================================ */

:root {
  --bs-success:      #15803D;
  --bs-success-rgb:  21, 128, 61;
  --bs-primary:      #15803D;
  --bs-primary-rgb:  21, 128, 61;
  --bs-danger:       #B91C1C;
  --bs-danger-rgb:   185, 28, 28;
  --bs-warning:      #B45309;
  --bs-warning-rgb:  180, 83, 9;
  --bs-info:         #1D4ED8;
  --bs-info-rgb:     29, 78, 216;
  --bs-link-color:   #15803D;
  --bs-link-hover-color: #166534;
  --bs-border-color: #E2E8F0;
  --bs-body-color:   #334155;
  --bs-body-bg:      #F8FAFC;
}

.progress { background: var(--surface-sunken); border-radius: var(--radius-pill); }
.progress-bar { background-color: var(--g-primary) !important; }
.progress-bar.bg-warning { background-color: var(--warning) !important; }
.progress-bar.bg-danger  { background-color: var(--danger) !important; }

.bg-success { background-color: var(--success) !important; }
.bg-danger  { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info    { background-color: var(--info) !important; }
.bg-primary { background-color: var(--g-primary) !important; }

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.module-nav-link):not(.classon-tab-link):not(.module-strip-link) {
  color: var(--g-primary);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.module-nav-link):not(.classon-tab-link):not(.module-strip-link):hover {
  color: var(--g-primary-hover);
}

/* Toasts follow the semantic palette too */
.toast.bg-success { background: var(--success) !important; }
.toast.bg-danger  { background: var(--danger) !important; }
.toast.bg-warning { background: var(--warning) !important; color: #fff !important; }
.toast.bg-info    { background: var(--info) !important; color: #fff !important; }
.toast.bg-info .btn-close,
.toast.bg-warning .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Bootstrap's gray-100 utilities are a fourth off-token neutral; pin them
   to the sunken surface so table headers and light panels match everywhere. */
.bg-light,
.table-light,
.table-light > :not(caption) > * > * { background-color: var(--surface-sunken) !important; }
.table > thead > tr > th { background-color: var(--surface-sunken); }

/* Hub filter pills: neutral at rest, brand green when selected. State is what
   carries colour here, not hub identity. */
.hub-filter-pill-btn { color: var(--text-secondary); }
.hub-filter-pill-btn i { color: var(--text-muted); }
.hub-filter-pill-btn:hover { border-color: var(--g-primary); color: var(--g-dark); }
.hub-filter-pill-btn:hover i { color: var(--g-primary); }
.hub-filter-pill-btn.active,
.hub-filter-pill-btn.active i { color: #fff; }
.hub-filter-pill-btn .badge {
  background: var(--surface-sunken) !important;
  color: var(--text-muted) !important;
}
.hub-filter-pill-btn.active .badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* Dashboard quick actions are shortcuts, not statuses. One brand tile for all
   of them; the semantic palette stays free for things that actually mean
   error, warning or info. */
.quick-action-brand {
  background: var(--g-light) !important;
  color: var(--g-primary) !important;
}
.quick-action:hover .quick-action-brand,
a:hover > .quick-action-brand {
  background: var(--g-primary) !important;
  color: #fff !important;
}

/* Metadata chip: file format, access level, category. Reads as information
   without spending a semantic colour on it. */
.badge-neutral {
  background: var(--neutral-bg) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--neutral-border);
}

/* Below lg the rail goes static and its links become a horizontal scroller,
   so the full-column min-height from section 8 must not apply. */
@media (max-width: 991.98px) {
  .module-left-sidebar {
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* The narrow-screen rule lets the topbar wrap but never releases its fixed
   54px height, so the wrapped row printed straight over the tab bar below.
   Let the bar size to its content once it is allowed to wrap. */
@media (max-width: 991.98px) {
  .classon-topbar {
    height: auto !important;
    min-height: 54px !important;
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    padding: 10px 14px !important;
  }
  .classon-topbar > * { min-width: 0; }
}

/* A domain module's rail ends with a way back to the grid; set it apart from
   the sections above rather than letting it read as one more screen. */
.module-left-sidebar .module-sidebar-foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.module-left-sidebar .module-sidebar-foot .module-nav-link { color: var(--text-muted) !important; }
.module-left-sidebar .module-sidebar-foot .module-nav-link:hover { color: var(--g-dark) !important; }

/* ============================================================
   FEATURES DIRECTORY - SORT & PIN
   ------------------------------------------------------------
   The sort control is a quiet neutral group; green is spent on
   the two things that carry state - the active pin toggle and a
   card that is actually pinned.
   ============================================================ */

.module-sort-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 31px;
}

.module-sort-label {
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-right: 1px solid var(--border);
  height: 100%;
  white-space: nowrap;
}

.module-sort-select {
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  padding: 0 26px 0 9px;
  height: 100%;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
}
.module-sort-select:focus-visible {
  box-shadow: inset 0 0 0 2px var(--g-ring);
}

.module-pin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}
.module-pin-toggle:hover {
  border-color: var(--g-primary);
  color: var(--g-dark);
}
.module-pin-toggle.active {
  background: var(--g-primary);
  border-color: var(--g-primary);
  color: #fff;
}
.module-pin-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--g-ring);
}

/* ---- The pin control on a card ---- */

.module-card-item { position: relative; }

.module-pin-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  z-index: 2;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

/* Visible while pinning, and always visible once a card is pinned so the
   marker still reads after leaving pin mode. */
#modulesGrid.pin-mode .module-pin-btn,
.module-card-item.is-pinned .module-pin-btn { display: inline-flex; }

.module-pin-btn:hover {
  color: var(--g-primary);
  border-color: var(--g-primary);
  background: var(--g-lightest);
}
.module-pin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--g-ring);
}

.module-card-item.is-pinned .module-pin-btn {
  color: #fff;
  background: var(--g-primary);
  border-color: var(--g-primary);
}

.module-card-item.is-pinned .module-widget-card {
  border-color: var(--g-primary) !important;
  box-shadow: 0 0 0 1px var(--g-primary), var(--shadow-sm);
}

[data-theme="dark"] .module-pin-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="dark"] .module-card-item.is-pinned .module-pin-btn {
  background: var(--g-primary);
  border-color: var(--g-primary);
  color: #06210F;
}

/* ============================================================
   FEATURES CARD
   ------------------------------------------------------------
   The screen count told nobody what a module does, so it gave
   way to a tagline. The card is laid out for two lines of text:
   artwork on top, name, then the description in muted grey.
   ============================================================ */

.module-widget-card {
  padding: 18px 14px 16px !important;
  /* Sized so the artwork, the gap under it and the two text lines share the
     card evenly - at 164px the icon floated with a 50px hole beneath it. */
  min-height: 148px !important;
  gap: 10px;
  justify-content: flex-start !important;
  border-color: var(--border) !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
}

.module-widget-card:hover {
  border-color: var(--g-primary) !important;
  box-shadow: 0 6px 16px -6px rgba(21, 128, 61, 0.28) !important;
  transform: translateY(-2px);
}

.module-3d-icon {
  width: 52px !important;
  height: 52px !important;
  margin-bottom: 0 !important;
}

/* Name and tagline travel together, so the artwork keeps a fixed gap from the
   text block no matter how many lines the tagline wraps to. */
.module-widget-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  width: 100%;
}

.module-widget-title {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.25 !important;
}

.module-widget-sub {
  display: block;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-muted);
  font-weight: 400;
}

.module-widget-card:hover .module-widget-title { color: var(--g-dark) !important; }

/* ---- Pin marker ----
   Quiet at rest: a small outline pin that only appears while pinning or once
   the card is pinned. A pinned card gets a green edge, not a green slab. */

.module-pin-btn {
  /* Inset from the card edge rather than hugging it - the marker should sit
     inside the card's padding, not on its border. */
  top: 12px;
  right: 14px;
  width: 22px;
  height: 22px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.module-card-item.is-pinned .module-pin-btn {
  color: var(--g-primary);
  background: var(--g-light);
  border-color: var(--success-border);
}
.module-card-item.is-pinned .module-pin-btn:hover {
  color: var(--g-dark);
  background: var(--g-light);
  border-color: var(--g-primary);
}

.module-card-item.is-pinned .module-widget-card {
  border-color: var(--g-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .module-card-item.is-pinned .module-pin-btn {
  color: var(--g-primary);
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.4);
}