/* ==========================================================================
   ARI THEME for osTicket v1.18.3
   Version: 2.0 — Rewritten against real osTicket selectors
   Source: paleta-ari.md + token-colores-ari.md + tipografia-ari.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. @FONT-FACE — Alliance Family from S3
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'AlliancePlatt';
  src: url('https://ari-s3bucket.s3.amazonaws.com/ari/fonts/alliance/alliance_platt_regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AlliancePlatt';
  src: url('https://ari-s3bucket.s3.amazonaws.com/ari/fonts/alliance/alliance_platt_medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AlliancePlatt';
  src: url('https://ari-s3bucket.s3.amazonaws.com/ari/fonts/alliance/alliance_platt_semi_bold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AlliancePlatt';
  src: url('https://ari-s3bucket.s3.amazonaws.com/ari/fonts/alliance/alliance_platt_bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AllianceText';
  src: url('https://ari-s3bucket.s3.amazonaws.com/ari/fonts/alliance/alliance_text_regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AllianceText';
  src: url('https://ari-s3bucket.s3.amazonaws.com/ari/fonts/alliance/alliance_text_medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AllianceText';
  src: url('https://ari-s3bucket.s3.amazonaws.com/ari/fonts/alliance/alliance_text_semi_bold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES — Light Mode (default)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Core palette */
  --ari-primary:           #163005;
  --ari-on-primary:        #FFFFFF;
  --ari-primary-ctr:       #EAFFCC;
  --ari-on-primary-ctr:    #163005;
  --ari-secondary:         #E7D4F6;
  --ari-tertiary:          #D4FF88;

  /* Surfaces */
  --ari-bg:                #F8F4F1;
  --ari-on-bg:             #333333;
  --ari-surface:           #FFFCFA;
  --ari-on-surface:        #333333;
  --ari-surface-dim:       #F4F0ED;
  --ari-on-surface-dim:    #4D4D4D;

  /* Outline / Dividers */
  --ari-outline:           #808080;
  --ari-outline-var:       #CCCCCC;
  --ari-divider:           #E7E1DD;

  /* Semantic states — exact from paleta-ari.md Light Mode */
  --ari-error:             #ED1826;  /* Red.color70 */
  --ari-on-error:          #FFFFFF;
  --ari-error-ctr:         #FFEDEE;  /* Red.color99 */
  --ari-on-error-ctr:      #B00F1A;  /* Red.color50 */
  --ari-success:           #1BA635;  /* Green.color60 */
  --ari-on-success:        #FFFFFF;
  --ari-success-ctr:       #CCF3D5;  /* Green.color99 */
  --ari-on-success-ctr:    #0A3C15;  /* Green.color20 */
  --ari-warning:           #CFA000;  /* Yellow.color70 */
  --ari-on-warning:        #FFFFFF;
  --ari-warning-ctr:       #FFF299;  /* Yellow.color95 */
  --ari-on-warning-ctr:    #6A4800;  /* Yellow.color30 */
  --ari-alert:             #FF7547;  /* Orange.color70 */
  --ari-on-alert:          #FFFFFF;
  --ari-alert-ctr:         #FFE4D6;  /* Orange.color95 */
  --ari-on-alert-ctr:      #6B2410;  /* Orange.color20 */
  --ari-safe:              #0060AB;  /* Blue.color60 */
  --ari-on-safe:           #FFFFFF;
  --ari-safe-ctr:          #BDDDFF;  /* Blue.color95 */
  --ari-on-safe-ctr:       #002447;  /* Blue.color20 */
  --ari-neutral:           #B3B3B3;  /* Gray.color70 */
  --ari-on-neutral:        #FFFFFF;
  --ari-neutral-ctr:       #EEEEEE;  /* Gray.color92 */
  --ari-on-neutral-ctr:    #333333;  /* Gray.color20 */

  /* Interactive */
  --ari-link:              #163005;
  --ari-link-hover:        #487028;
  --ari-text-hint:         #808080;
  --ari-input-bg:          #FFFFFF;
  --ari-input-border:      #CCCCCC;
  --ari-input-focus:       #163005;
  --ari-input-focus-ring:  rgba(22,48,5,0.15);

  /* Header / Nav */
  --ari-header-bg:         #163005;
  --ari-header-text:       #FFFFFF;
  --ari-header-link:       #D4FF88;
  --ari-nav-bg:            #EAFFCC;
  --ari-nav-text:          #163005;
  --ari-nav-active-bg:     #163005;
  --ari-nav-active-text:   #FFFFFF;
  --ari-nav-hover-bg:      #DEFFB5;
  --ari-subnav-bg:         #FFFCFA;
  --ari-subnav-border:     #CCCCCC;

  /* Tables */
  --ari-th-bg:             #EAFFCC;
  --ari-th-text:           #163005;
  --ari-td-even:           #FFFCFA;
  --ari-td-odd:            #F8F4F1;
  --ari-td-hover:          #F5FFE6;
  --ari-td-border:         #E7E1DD;

  /* Buttons */
  --ari-btn-bg:            #163005;
  --ari-btn-text:          #FFFFFF;
  --ari-btn-hover:         #314E1C;

  /* Thread — bg = semantic token, text = onX pair */
  --ari-thread-msg:        #EAFFCC;  /* primaryContainer */
  --ari-thread-msg-text:   #163005;  /* onPrimaryContainer */
  --ari-thread-msg-arrow:  #b3cc8e;
  --ari-thread-resp:       #E7D4F6;  /* secondary */
  --ari-thread-resp-text:  #361C54;  /* onSecondary */
  --ari-thread-resp-arrow: #c0a8d1;
  --ari-thread-note:       #FFF299;  /* warningContainer */
  --ari-thread-note-text:  #6A4800;  /* onWarningContainer */
  --ari-thread-note-arrow: #d4c96c;
  --ari-thread-system:     #EEEEEE;  /* neutralContainer */
  --ari-thread-system-text:#333333;  /* onNeutralContainer */

  /* Shadows */
  --ari-shadow-sm:         0 1px 2px rgba(0,0,0,0.06);
  --ari-shadow-md:         0 2px 8px rgba(0,0,0,0.08);
  --ari-shadow-lg:         0 4px 16px rgba(0,0,0,0.10);
  --ari-scrim:             rgba(0,0,0,0.30);
}

/* --------------------------------------------------------------------------
   3. CSS CUSTOM PROPERTIES — Dark Mode
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --ari-primary:           #D4FF88;
  --ari-on-primary:        #1A2300;
  --ari-primary-ctr:       #314E1C;
  --ari-on-primary-ctr:    #FCFFF7;
  --ari-secondary:         #DFC8F3;
  --ari-tertiary:          #8FDE50;

  --ari-bg:                #101010;
  --ari-on-bg:             #FAFAFA;
  --ari-surface:           #232323;
  --ari-on-surface:        #FAFAFA;
  --ari-surface-dim:       #1A1A1A;
  --ari-on-surface-dim:    #E8E8E8;

  --ari-outline:           #808080;
  --ari-outline-var:       #404040;
  --ari-divider:           #333333;

  /* Semantic states — exact from paleta-ari.md Dark Mode */
  --ari-error:             #FF979E;  /* Red.color92 */
  --ari-on-error:          #3E0509;  /* Red.color12 */
  --ari-error-ctr:         #780A11;  /* Red.color30 */
  --ari-on-error-ctr:      #FFDBDD;  /* Red.color98 */
  --ari-success:           #4FD472;  /* Green.color87 */
  --ari-on-success:        #020D05;  /* Green.color4 */
  --ari-success-ctr:       #0E581E;  /* Green.color30 */
  --ari-on-success-ctr:    #CCF3D5;  /* Green.color99 */
  --ari-warning:           #E6B800;  /* Yellow.color80 */
  --ari-on-warning:        #170E00;  /* Yellow.color4 */
  --ari-warning-ctr:       #825C00;  /* Yellow.color40 */
  --ari-on-warning-ctr:    #FFF8CC;  /* Yellow.color98 */
  --ari-alert:             #FF7547;  /* Orange.color70 */
  --ari-on-alert:          #1E0A04;  /* Orange.color4 */
  --ari-alert-ctr:         #B23D1D;  /* Orange.color40 */
  --ari-on-alert-ctr:      #FFF0E8;  /* Orange.color98 */
  --ari-safe:              #47A6FF;  /* Blue.color87 */
  --ari-on-safe:           #000A13;  /* Blue.color4 */
  --ari-safe-ctr:          #00447D;  /* Blue.color40 */
  --ari-on-safe-ctr:       #EFF7FF;  /* Blue.color99 */
  --ari-neutral:           #B3B3B3;  /* Gray.color70 */
  --ari-on-neutral:        #0C0C0C;  /* Gray.color4 */
  --ari-neutral-ctr:       #666666;  /* Gray.color40 */
  --ari-on-neutral-ctr:    #CCCCCC;  /* Gray.color80 */

  --ari-link:              #D4FF88;
  --ari-link-hover:        #EAFFCC;
  --ari-text-hint:         #B3B3B3;
  --ari-input-bg:          #1A1A1A;
  --ari-input-border:      #404040;
  --ari-input-focus:       #D4FF88;
  --ari-input-focus-ring:  rgba(212,255,136,0.15);

  --ari-header-bg:         #0A0E00;
  --ari-header-text:       #FAFAFA;
  --ari-header-link:       #D4FF88;
  --ari-nav-bg:            #1A2300;
  --ari-nav-text:          #D4FF88;
  --ari-nav-active-bg:     #D4FF88;
  --ari-nav-active-text:   #1A2300;
  --ari-nav-hover-bg:      #223A10;
  --ari-subnav-bg:         #232323;
  --ari-subnav-border:     #404040;

  --ari-th-bg:             #1A2300;
  --ari-th-text:           #D4FF88;
  --ari-td-even:           #1E1E1E;
  --ari-td-odd:            #272727;
  --ari-td-hover:          #2E3D1F;
  --ari-td-border:         #3A3A3A;

  --ari-btn-bg:            #D4FF88;
  --ari-btn-text:          #1A2300;
  --ari-btn-hover:         #EAFFCC;

  /* Thread — bg = semantic token, text = onX pair */
  --ari-thread-msg:        #314E1C;  /* primaryContainer (Dark) */
  --ari-thread-msg-text:   #FCFFF7;  /* onPrimaryContainer (Dark) */
  --ari-thread-msg-arrow:  #4a6e35;
  --ari-thread-resp:       #DFC8F3;  /* secondary (Dark) */
  --ari-thread-resp-text:  #361C54;  /* onSecondary (Dark) */
  --ari-thread-resp-arrow: #6a3f94;
  --ari-thread-note:       #825C00;  /* warningContainer (Dark) */
  --ari-thread-note-text:  #FFF8CC;  /* onWarningContainer (Dark) */
  --ari-thread-note-arrow: #a07816;
  --ari-thread-system:     #666666;  /* neutralContainer (Dark) */
  --ari-thread-system-text:#CCCCCC;  /* onNeutralContainer (Dark) */

  --ari-shadow-sm:         0 1px 2px rgba(0,0,0,0.30);
  --ari-shadow-md:         0 2px 8px rgba(0,0,0,0.40);
  --ari-shadow-lg:         0 4px 16px rgba(0,0,0,0.50);
  --ari-scrim:             rgba(0,0,0,0.80);  /* #CC000000 = Black Alpha 80% */
}

/* --------------------------------------------------------------------------
   4. GLOBAL BASE
   -------------------------------------------------------------------------- */
body, html {
  background-color: var(--ari-bg) !important;
  color: var(--ari-on-surface) !important;
  font-family: 'AllianceText', 'Helvetica Neue', arial, helvetica, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Remove client tiled background image */
body {
  background-image: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'AlliancePlatt', sans-serif !important;
  color: var(--ari-on-surface) !important;
}
h2 { color: var(--ari-primary) !important; }

a, .link { color: var(--ari-link) !important; }
a:hover, .link:hover {
  color: var(--ari-link-hover) !important;
  text-decoration: underline !important;
}

/* Don't override nav link hover decorations */
#nav a:hover, #sub_nav a:hover { text-decoration: none !important; }

.faded { color: var(--ari-text-hint) !important; }
.faded b { color: var(--ari-on-surface) !important; }
.faded strong { color: var(--ari-on-surface-dim) !important; }
.faded-more { color: var(--ari-text-hint) !important; }
.error { color: var(--ari-error) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ari-surface-dim); }
::-webkit-scrollbar-thumb { background: var(--ari-outline-var); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ari-outline); }

/* --------------------------------------------------------------------------
   5. STAFF HEADER — #header (scp.css lines 133-175)
   -------------------------------------------------------------------------- */
#header {
  background-color: var(--ari-header-bg) !important;
  background-image: none !important;
  border-color: var(--ari-header-bg) !important;
  box-shadow: none !important;
}
div#header a { color: var(--ari-header-link) !important; }
#header p {
  background-color: transparent !important;
  border: none !important;
  color: var(--ari-header-text) !important;
}

/* --------------------------------------------------------------------------
   6. STAFF NAV — #nav (scp.css lines 176-300)
   KEY FIX: Only override background-color, NEVER background shorthand,
   so background-image icons are preserved.
   -------------------------------------------------------------------------- */
#nav {
  background-color: var(--ari-nav-bg) !important;
  background-image: none !important;
  border-top-color: var(--ari-outline-var) !important;
  border-bottom-color: var(--ari-outline-var) !important;
  border-left-color: var(--ari-nav-bg) !important;
  border-right-color: var(--ari-nav-bg) !important;
}

#nav .active, #nav .inactive {
  border-color: transparent !important;
  box-shadow: none !important;
}

#nav li.active {
  background-color: var(--ari-nav-active-bg) !important;
  border-radius: 5px 5px 0 0;
}
#nav li.inactive:hover {
  background-color: var(--ari-nav-hover-bg) !important;
  box-shadow: none !important;
}

#nav .active a {
  color: var(--ari-nav-active-text) !important;
  font-family: 'AlliancePlatt', sans-serif !important;
  font-weight: 700 !important;
}
#nav .inactive a {
  color: var(--ari-nav-text) !important;
  font-family: 'AlliancePlatt', sans-serif !important;
}

/* Staff dropdown menus */
#nav li.inactive > ul {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-outline-var) !important;
  box-shadow: var(--ari-shadow-lg) !important;
}
#nav .inactive li a { color: var(--ari-on-surface) !important; }
#nav .inactive li a:hover {
  color: var(--ari-primary) !important;
  background-color: var(--ari-primary-ctr) !important;
}

/* --------------------------------------------------------------------------
   7. STAFF SUB-NAV — #sub_nav (scp.css lines 302-395)
   -------------------------------------------------------------------------- */
#sub_nav {
  background-color: var(--ari-subnav-bg) !important;
  border-bottom-color: var(--ari-subnav-border) !important;
}

#sub_nav > li > a,
#customQ_nav .jb-overflowmenu-menu-primary li.item > a {
  color: var(--ari-on-surface-dim) !important;
  font-family: 'AlliancePlatt', sans-serif !important;
}

#sub_nav > li > a:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a,
#sub_nav a.active, #sub_nav li.active > a {
  color: var(--ari-primary) !important;
}

#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-outline-var) !important;
}

/* Sub-nav queue icons — ONLY override background-color */
#sub_nav .open, #sub_nav .answered, #sub_nav .mine,
#sub_nav .closed, #sub_nav .search, #sub_nav .new {
  /* Icons use background-image from scp.css — don't touch it */
}

/* Queue dropdown */
.customQ-dropdown ul li, .customQ-dropdown ul li > a {
  color: var(--ari-on-surface) !important;
}
.customQ-dropdown ul li:not(.personalQ):hover {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
}
.customQ-dropdown ul li:hover > a { color: var(--ari-on-primary) !important; }
.customQ-dropdown li:not(.personalQ) > span,
.customQ-dropdown li > span { color: var(--ari-primary) !important; }
.customQ-dropdown li:hover > span { color: var(--ari-on-primary) !important; }

.jb-overflowmenu-menu-primary div.customQ-dropdown,
.jb-overflowmenu-menu-secondary div.customQ-dropdown {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-outline-var) !important;
}
.customQ-dropdown li h4, .customQ-dropdown li.top-level {
  background-color: var(--ari-neutral-ctr) !important;
  color: var(--ari-on-neutral-ctr) !important;
}

/* Overflow menu container */
.jb-overflowmenu .jb-overflowmenu-container {
  background-color: var(--ari-subnav-bg) !important;
  border-color: var(--ari-subnav-border) !important;
}
.jb-overflowmenu .jb-overflowmenu-container > a.jb-overflowmenu-menu-secondary-handle {
  background-color: var(--ari-subnav-bg) !important;
  color: var(--ari-on-surface-dim) !important;
  border-right-color: var(--ari-outline-var) !important;
}
.jb-overflowmenu-menu-secondary {
  background-color: var(--ari-subnav-bg) !important;
  border-color: var(--ari-subnav-border) !important;
}
.jb-overflowmenu-menu-secondary li.item > a { color: var(--ari-on-surface) !important; }
.jb-overflowmenu-menu-secondary li.item:hover {
  background-color: var(--ari-primary-ctr) !important;
}
.jb-overflowmenu-menu-secondary li.item:hover > a {
  color: var(--ari-primary) !important;
}

/* --------------------------------------------------------------------------
   8. CLIENT NAV — #nav li a (theme.css lines 325-387)
   FIX: Icons (.home, .new, .status, .kb, .tickets) use background-image.
   We must ONLY set background-color on hover/active, not background shorthand.
   -------------------------------------------------------------------------- */
#nav li a {
  color: var(--ari-nav-text) !important;
  font-family: 'AlliancePlatt', sans-serif !important;
  font-weight: 600 !important;
}

/* Active/hover: only set bg-color so the icon image survives */
#nav li a.active {
  background-color: var(--ari-nav-active-bg) !important;
  color: var(--ari-nav-active-text) !important;
}
#nav li a:hover {
  background-color: var(--ari-nav-hover-bg) !important;
  color: var(--ari-nav-text) !important;
}

/* --------------------------------------------------------------------------
   9. CONTENT AREA — #content
   -------------------------------------------------------------------------- */
#content {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
  border-color: var(--ari-outline-var) !important;
}

/* Container (client uses box-shadow, staff uses borders) */
#container {
  background-color: var(--ari-surface) !important;
  box-shadow: var(--ari-shadow-md) !important;
}

/* --------------------------------------------------------------------------
   10. NOTIFICATION BARS — using container + onContainer pairs
   -------------------------------------------------------------------------- */
#notice_bar, .notice_bar, #msg_notice, .success-banner, .notice-banner {
  background-color: var(--ari-success-ctr) !important;
  color: var(--ari-on-success-ctr) !important;
  border-color: var(--ari-success) !important;
  border-radius: 6px;
}
#notice_bar a, .notice_bar a, #msg_notice a { color: var(--ari-on-success-ctr) !important; text-decoration: underline !important; }

#warning_bar, .warning_bar, #msg_warning, .warning-banner {
  background-color: var(--ari-warning-ctr) !important;
  color: var(--ari-on-warning-ctr) !important;
  border-color: var(--ari-warning) !important;
  border-radius: 6px;
}
#warning_bar a, .warning_bar a, #msg_warning a { color: var(--ari-on-warning-ctr) !important; text-decoration: underline !important; }

#error_bar, .error_bar, #msg_error, .error-banner {
  background-color: var(--ari-error-ctr) !important;
  color: var(--ari-on-error-ctr) !important;
  border-color: var(--ari-error) !important;
  border-radius: 6px;
}
#error_bar a, .error_bar a, #msg_error a { color: var(--ari-on-error-ctr) !important; text-decoration: underline !important; }

#msg_info, .info-banner {
  background-color: var(--ari-safe-ctr) !important;
  color: var(--ari-on-safe-ctr) !important;
  border-color: var(--ari-safe) !important;
  border-radius: 6px;
}
#msg_info a { color: var(--ari-on-safe-ctr) !important; text-decoration: underline !important; }

/* --------------------------------------------------------------------------
   11. TABLES — table.list (staff ticket queues, scp.css ~line 1095)
   -------------------------------------------------------------------------- */
table.list {
  background-color: var(--ari-td-border) !important;
  border-bottom-color: var(--ari-td-border) !important;
}
table.list caption {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
}
table.list thead th {
  background-color: var(--ari-th-bg) !important;
  color: var(--ari-th-text) !important;
  font-family: 'AlliancePlatt', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
table.list th a, table.list thead th a {
  color: var(--ari-th-text) !important;
}
table.list thead th a.asc,
table.list thead th a.desc {
  background-color: var(--ari-primary-ctr) !important;
}

table.list tbody td {
  background-color: var(--ari-td-even) !important;
  border-color: var(--ari-td-border) !important;
  color: var(--ari-on-surface) !important;
}
table.list tbody tr:nth-child(2n+1) td {
  background-color: var(--ari-td-odd) !important;
}
table.list tbody tr:hover td,
table.list tbody tr.highlight td,
table.list tbody tr:nth-child(2n+1):hover td {
  background-color: var(--ari-td-hover) !important;
}

/* FIX: Table links need enough contrast */
table.list tbody td a,
table.list tbody td a .truncate {
  color: var(--ari-link) !important;
}
table.list tbody tr:hover td a {
  color: var(--ari-link-hover) !important;
}

table tfoot td, table.list tfoot td {
  background-color: var(--ari-neutral-ctr) !important;
}

/* Priority chip — convert from full-cell absolute to contained pill.
   osTicket default: position:absolute covering entire td.
   We override to inline-block so it becomes a visible badge/chip. */
.offset {
  position: relative !important;
  text-align: center !important;
}
.offset .fill {
  position: relative !important;
  display: inline-block !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 4px 14px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 0.82em !important;
  font-family: 'AlliancePlatt', sans-serif !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Light mode: dark text on pastel inline bg */
:root .offset .fill,
[data-theme="light"] .offset .fill {
  color: #333333 !important;
}

/* Dark mode: darken the pastel while preserving its color identity.
   box-shadow:inset renders ABOVE background but BELOW text.
   0.45 opacity preserves more of the original pastel tint. */
[data-theme="dark"] .offset .fill,
[data-theme="dark"] table.list [style*="background"] .fill,
[data-theme="dark"] table.list .offset .fill {
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.45) !important;
  color: #FAFAFA !important;
  -webkit-text-fill-color: #FAFAFA !important;
}
[data-theme="dark"] .offset .fill *,
[data-theme="dark"] .offset .fill a,
[data-theme="dark"] table.list [style*="background"] .fill *,
[data-theme="dark"] table.list [style*="background"] .fill a {
  color: #FAFAFA !important;
  -webkit-text-fill-color: #FAFAFA !important;
}

/* Dashboard stats */
table.dashboard-stats { border-bottom-color: var(--ari-divider) !important; }
table.dashboard-stats tbody:first-child th {
  border-bottom-color: var(--ari-divider) !important;
  color: var(--ari-on-surface) !important;
}
table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) {
  background-color: var(--ari-td-odd) !important;
}
table.dashboard-stats tbody:nth-child(2) th {
  border-right-color: var(--ari-td-border) !important;
  color: var(--ari-text-hint) !important;
}
table.dashboard-stats tbody:nth-child(2) td {
  border-right-color: var(--ari-td-border) !important;
  color: var(--ari-on-surface) !important;
}
table.dashboard-stats tbody:nth-child(2) tr:hover {
  background-color: var(--ari-td-hover) !important;
}
table.dashboard-stats tbody:nth-child(2) tr:hover th {
  color: var(--ari-on-surface) !important;
}

/* Client ticket table */
#ticketTable { border-color: var(--ari-outline-var) !important; }
#ticketTable caption {
  background-color: var(--ari-neutral-ctr) !important;
  color: var(--ari-on-neutral-ctr) !important;
  border-color: var(--ari-outline-var) !important;
}
#ticketTable th {
  background-color: var(--ari-th-bg) !important;
  color: var(--ari-th-text) !important;
  border-color: var(--ari-outline-var) !important;
}
#ticketTable td {
  border-color: var(--ari-outline-var) !important;
  color: var(--ari-on-surface) !important;
}
#ticketTable tr.alt td { background-color: var(--ari-td-odd) !important; }

/* General form/settings tables */
.table td:not(:empty) { background-color: var(--ari-surface) !important; }
.table tr:not(:last-child):not(.header) { border-bottom-color: var(--ari-divider) !important; }
.table tr.header { border-bottom-color: var(--ari-outline) !important; }

.form_table td { border-bottom-color: var(--ari-divider) !important; }
.form_table th, div.section-break {
  background-color: var(--ari-neutral-ctr) !important;
  border-color: var(--ari-outline-var) !important;
  color: var(--ari-on-neutral-ctr) !important;
}
.form_table th h4 {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
}
.form_table th em, .form_table em { color: var(--ari-text-hint) !important; }

.settings_table td { border-bottom-color: var(--ari-divider) !important; }
#content .settings_table th h4 a { color: var(--ari-on-primary) !important; }

.ticket_info, .infoTable, table.custom-data th {
  background-color: var(--ari-surface-dim) !important;
}
.ticket_info.custom-data thead th {
  background-color: var(--ari-surface) !important;
}
table.custom-data .headline {
  background-color: var(--ari-surface) !important;
}

#breadcrumbs {
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface) !important;
}
#breadcrumbs a { color: var(--ari-on-surface-dim) !important; }

/* --------------------------------------------------------------------------
   12. BUTTONS — matching real scp.css selectors (lines 2439-2610)
   -------------------------------------------------------------------------- */
input[type="submit"],
input[type="reset"],
input[type="button"],
.action-button,
.button {
  font-family: 'AlliancePlatt', sans-serif !important;
  font-weight: 600 !important;
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
  box-shadow: 0 0 0 1px var(--ari-outline-var) inset !important;
  border-radius: 5px !important;
}

.button:hover, .button:active,
.action-button:hover, .action-button:active,
input[type=button]:hover, input[type=button]:active,
input[type=reset]:hover, input[type=reset]:active {
  color: var(--ari-primary) !important;
  box-shadow: 0 0 0 2px var(--ari-primary) inset !important;
  background-color: var(--ari-primary-ctr) !important;
}

button[type=submit], input[type="submit"], .primary.button {
  background-color: var(--ari-btn-bg) !important;
  color: var(--ari-btn-text) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
button[type=submit]:hover, input[type=submit]:hover, input[type=submit]:active {
  background-color: var(--ari-btn-hover) !important;
  color: var(--ari-btn-text) !important;
  box-shadow: none !important;
}

/* Client portal green/blue buttons */
.green.button, .green.button:visited {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.green.button:hover {
  background-color: var(--ari-btn-hover) !important;
  box-shadow: none !important;
  color: var(--ari-on-primary) !important;
}

.blue.button, .blue.button:visited {
  background-color: var(--ari-safe) !important;
  color: white !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.blue.button:hover { opacity: 0.9; }

.red.button:hover {
  box-shadow: 0 0 0 2px var(--ari-error) inset !important;
  color: var(--ari-error) !important;
}

.dark.button {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
  box-shadow: none !important;
}

.action-button.danger {
  color: var(--ari-error) !important;
  border-color: var(--ari-error) !important;
  opacity: 0.8;
}
.action-button.danger:hover {
  background-color: var(--ari-error) !important;
  color: var(--ari-on-error) !important;
  opacity: 1;
}

.muted-button {
  color: var(--ari-on-surface-dim) !important;
  border-color: var(--ari-outline-var) !important;
  background-color: var(--ari-surface-dim) !important;
}
.muted-button:hover {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
}

.button:disabled, .action-button:disabled,
button[type=submit]:disabled, input[type=submit]:disabled {
  opacity: 0.5 !important;
}

/* --------------------------------------------------------------------------
   13. FORMS
   -------------------------------------------------------------------------- */
input[type=text], input[type=password], input[type=email],
input[type=search], input[type=tel], input[type=url],
input[type=number], input[type=date], textarea, select {
  background-color: var(--ari-input-bg) !important;
  color: var(--ari-on-surface) !important;
  border-color: var(--ari-input-border) !important;
  font-family: 'AllianceText', sans-serif !important;
  border-radius: 5px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ari-input-focus) !important;
  box-shadow: 0 0 0 3px var(--ari-input-focus-ring) !important;
  outline: none !important;
}
input[type=text]:disabled, input[type=checkbox]:disabled {
  background-color: var(--ari-neutral-ctr) !important;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--ari-primary);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--ari-input-bg) !important;
  border-color: var(--ari-input-border) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ari-on-surface) !important;
}
.select2-dropdown {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-input-border) !important;
}
.select2-results__option { color: var(--ari-on-surface) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
}

/* --------------------------------------------------------------------------
   14. THREAD ENTRIES — scp.css ~lines 1520-1700
   -------------------------------------------------------------------------- */
.thread-entry .header {
  border-color: var(--ari-divider) !important;
}
.thread-entry.message .header {
  background-color: var(--ari-thread-msg) !important;
  color: var(--ari-thread-msg-text) !important;
}
.thread-entry.response .header {
  background-color: var(--ari-thread-resp) !important;
  color: var(--ari-thread-resp-text) !important;
}
.thread-entry.note .header {
  background-color: var(--ari-thread-note) !important;
  color: var(--ari-thread-note-text) !important;
}
.thread-entry.system .header {
  background-color: var(--ari-thread-system) !important;
  color: var(--ari-thread-system-text) !important;
}

/* Thread header text inherits color from header */
.thread-entry.message .header *,
.thread-entry.message .header a { color: var(--ari-thread-msg-text) !important; }
.thread-entry.response .header *,
.thread-entry.response .header a { color: var(--ari-thread-resp-text) !important; }
.thread-entry.note .header *,
.thread-entry.note .header a { color: var(--ari-thread-note-text) !important; }
.thread-entry.system .header *,
.thread-entry.system .header a { color: var(--ari-thread-system-text) !important; }

.thread-entry .thread-body {
  border-color: var(--ari-divider) !important;
  border-bottom-color: var(--ari-outline) !important;
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
}
.thread-body .attachments {
  background-color: var(--ari-surface-dim) !important;
  border-top-color: var(--ari-divider) !important;
}

/* Thread arrows */
.thread-entry.avatar.message .header:before { border-right-color: var(--ari-outline-var) !important; }
.thread-entry.avatar.message .header:after { border-right-color: var(--ari-thread-msg) !important; }
.thread-entry.avatar .header:before { border-left-color: var(--ari-outline-var) !important; }
.thread-entry.avatar .header:after { border-left-color: var(--ari-thread-resp) !important; }
.thread-entry.avatar.response .header:before { border-right-color: var(--ari-outline-var) !important; }
.thread-entry.avatar.response .header:after { border-right-color: var(--ari-thread-resp) !important; }
.thread-entry.avatar.note .header:before { border-right-color: var(--ari-outline-var) !important; }
.thread-entry.avatar.note .header:after { border-right-color: var(--ari-thread-note) !important; }

#ticketThread { border-bottom-color: var(--ari-divider) !important; }

.thread-entry .info, #ticket_notes .info {
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface) !important;
}
#ticket_notes td { background-color: var(--ari-surface-dim) !important; }

.type-icon {
  background-color: var(--ari-neutral-ctr) !important;
  border-color: var(--ari-divider) !important;
}

/* Reply area */
#response_options, #ticket_actions {
  background-color: var(--ari-neutral-ctr) !important;
  border-color: var(--ari-outline-var) !important;
}
#reply {
  background-color: var(--ari-surface-dim) !important;
  border-color: var(--ari-outline-var) !important;
}

/* --------------------------------------------------------------------------
   15. TOOLTIP / TIP BOX — scp.css ~lines 1931-2070
   -------------------------------------------------------------------------- */
.tip_box { background-color: var(--ari-surface) !important; }
.tip_content {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
}
.tip_content a { color: var(--ari-link) !important; }
.tip_content hr { border-color: var(--ari-divider) !important; }

/* --------------------------------------------------------------------------
   16. DIALOG / OVERLAY / LOADING
   -------------------------------------------------------------------------- */
#overlay { background-color: var(--ari-scrim) !important; }
.dialog {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-outline-var) !important;
  border-radius: 8px !important;
}

/* jQuery UI dialog */
.ui-widget-content { background-color: var(--ari-surface) !important; color: var(--ari-on-surface) !important; }
.ui-widget-header { background-color: var(--ari-primary) !important; color: var(--ari-on-primary) !important; }
.ui-dialog .ui-dialog-titlebar { background-color: var(--ari-primary) !important; color: var(--ari-on-primary) !important; }
.ui-state-default { background-color: var(--ari-neutral-ctr) !important; color: var(--ari-on-neutral-ctr) !important; }
.ui-state-hover, .ui-state-focus { background-color: var(--ari-primary-ctr) !important; color: var(--ari-primary) !important; }
.ui-state-active { background-color: var(--ari-primary) !important; color: var(--ari-on-primary) !important; }

/* Noclick dropdown */
.noclick-dropdown {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-outline-var) !important;
  box-shadow: var(--ari-shadow-lg) !important;
}

/* --------------------------------------------------------------------------
   17. REDACTOR (Rich text editor)
   -------------------------------------------------------------------------- */
.redactor-box { border-color: var(--ari-input-border) !important; }
.redactor-toolbar {
  background-color: var(--ari-neutral-ctr) !important;
  border-bottom-color: var(--ari-divider) !important;
}
.redactor-toolbar a { color: var(--ari-on-surface) !important; }
.redactor-editor, .redactor-box textarea {
  background-color: var(--ari-input-bg) !important;
  color: var(--ari-on-surface) !important;
}

/* --------------------------------------------------------------------------
   18. CLIENT SIDEBAR — theme.css sidebar section
   -------------------------------------------------------------------------- */
.sidebar .content {
  background-color: var(--ari-surface-dim) !important;
  border-color: var(--ari-outline-var) !important;
}
.sidebar section .header {
  color: var(--ari-on-surface) !important;
}

/* Client login box */
#clientLogin {
  background-color: var(--ari-surface-dim) !important;
  background-image: none !important;
  border-color: var(--ari-outline-var) !important;
}
.login-box {
  box-shadow: 4px 0 8px -4px var(--ari-scrim) !important;
}

/* Client search */
.searchbar .search, .search-form .search {
  border-color: var(--ari-input-border) !important;
  background-color: var(--ari-input-bg) !important;
  color: var(--ari-on-surface) !important;
}
.search.well { background-color: var(--ari-surface-dim) !important; }

/* FAQ */
#faq ol { border-top-color: var(--ari-divider) !important; }
#faq ol li a { border-bottom-color: var(--ari-divider) !important; }
#faq ol li a:hover { background-color: var(--ari-primary-ctr) !important; }
#faq .article-meta { background-color: var(--ari-surface-dim) !important; }
#kb > li { border-bottom-color: var(--ari-divider) !important; background-image: none !important; }
#kb > li h4 span { color: var(--ari-text-hint) !important; }

/* Landing page */
#landing_page h1, #landing_page h2, #landing_page h3 {
  color: var(--ari-on-surface) !important;
}

/* --------------------------------------------------------------------------
   19. STAFF LOGIN — scp/css/login.css
   -------------------------------------------------------------------------- */
body#loginBody {
  background-color: var(--ari-bg) !important;
  font-family: 'AllianceText', sans-serif !important;
}
#loginBody #brickwall { filter: brightness(0.6); }
#loginBox {
  box-shadow: 0 0 30px 5px var(--ari-scrim) !important;
}
#loginBox:after {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-outline-var) !important;
  opacity: 0.92;
}
#loginBox h3#login-message { color: var(--ari-error) !important; }
#loginBox fieldset input {
  background-color: var(--ari-input-bg) !important;
  border-color: var(--ari-input-border) !important;
  color: var(--ari-on-surface) !important;
}

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
#footer { color: var(--ari-on-surface-dim) !important; }
#footer a { color: var(--ari-link) !important; }

/* --------------------------------------------------------------------------
   21. LABELS / MISC
   -------------------------------------------------------------------------- */
.label {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
  text-shadow: none !important;
}
.label-bare {
  background-color: transparent !important;
  border-color: var(--ari-outline) !important;
  color: var(--ari-outline) !important;
}

.banner {
  background-color: var(--ari-neutral-ctr) !important;
  border-color: var(--ari-outline-var) !important;
  color: var(--ari-on-neutral-ctr) !important;
}

/* Loading bar */
#loadingbar { background-color: var(--ari-primary) !important; }
#loadingbar .peg {
  box-shadow: 0 0 10px var(--ari-primary), 0 0 5px var(--ari-primary) !important;
}

/* Draft saved */
.draft-saved {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
}

/* Sortable rows */
.sortable:hover { background-color: var(--ari-surface-dim) !important; }
.sortable:active { background-color: var(--ari-primary-ctr) !important; }
.row-item { border-color: var(--ari-outline-var) !important; }

/* Accordian */
.accordian dt { border-color: var(--ari-outline-var) !important; }
.accordian dt.active a { color: var(--ari-primary) !important; }
.accordian dd {
  border-color: var(--ari-outline-var) !important;
  color: var(--ari-on-surface) !important;
}

/* Saved search */
.saved-search + .saved-search { border-top-color: var(--ari-divider) !important; }

/* Filedrop */
.freetext-files {
  border-color: var(--ari-outline-var) !important;
  background-color: var(--ari-surface-dim) !important;
}

/* External auth */
.external-auth-box { border-color: var(--ari-outline-var) !important; }
.external-auth-icon { color: var(--ari-on-surface) !important; border-right-color: var(--ari-divider) !important; }
.external-auth-name { color: var(--ari-on-surface) !important; }

/* --------------------------------------------------------------------------
   22. THEME TOGGLE BUTTON (injected by ari-theme.js)
   -------------------------------------------------------------------------- */
.ari-theme-toggle {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background-color: var(--ari-btn-bg) !important;
  color: var(--ari-btn-text) !important;
  border: 2px solid var(--ari-outline-var) !important;
  cursor: pointer;
  z-index: 9999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ari-shadow-lg) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.ari-theme-toggle:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25) !important;
  background-color: var(--ari-btn-hover) !important;
  color: var(--ari-btn-text) !important;
}

/* Show/hide icons based on theme */
.ari-theme-toggle .icon-sun,
.ari-theme-toggle .icon-moon { display: none; pointer-events: none; }

:root .ari-theme-toggle .icon-moon,
[data-theme="light"] .ari-theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .ari-theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .ari-theme-toggle .icon-moon { display: none; }

/* --------------------------------------------------------------------------
   23. LOGO TINTING
   Per identidad-ari.md: Light → primary (#163005), Dark → primary (#D4FF88)
   On dark header backgrounds, logo must be tinted light to be visible.
   -------------------------------------------------------------------------- */

/* Staff header logo — make white on dark bg */
#header #logo img,
#logo a img {
  filter: brightness(0) invert(1) !important;
}

/* Dark mode: tint logo to lime (#D4FF88) */
[data-theme="dark"] #header #logo img,
[data-theme="dark"] #logo a img {
  filter: brightness(0) saturate(100%) invert(91%) sepia(24%) saturate(740%) hue-rotate(35deg) brightness(104%) contrast(101%) !important;
}

/* --------------------------------------------------------------------------
   24. CLIENT NAV ICONS — Remove broken PNGs, clean text-only nav
   The .home, .new, .status, .kb, .tickets classes load PNG icons via
   background-image. Since these aren't needed, remove icon space.
   -------------------------------------------------------------------------- */

#nav li a.home,
#nav li a.kb,
#nav li a.new,
#nav li a.status,
#nav li a.tickets {
  background-image: none !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* --------------------------------------------------------------------------
   25. CLIENT SIDEBAR BUTTONS — Both Ari primary green, not blue/lime
   Template uses .blue.button and .green.button classes
   -------------------------------------------------------------------------- */

/* Both sidebar buttons: same Ari primary style */
.front-page-button .blue.button,
.front-page-button .blue.button:visited,
.front-page-button .green.button,
.front-page-button .green.button:visited {
  background-color: var(--ari-btn-bg) !important;
  color: var(--ari-btn-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 6px !important;
  font-family: 'AlliancePlatt', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 16px !important;
  height: auto !important;
  line-height: 1.4 !important;
}

.front-page-button .blue.button:hover,
.front-page-button .green.button:hover {
  background-color: var(--ari-btn-hover) !important;
  color: var(--ari-btn-text) !important;
}

/* Second button (Check Status) — outlined variant
   Must beat .front-page-button .green.button specificity (0-3-0) */
.front-page-button p:last-child .green.button,
.front-page-button p:last-child .green.button:visited {
  background-color: transparent !important;
  color: var(--ari-primary) !important;
  box-shadow: 0 0 0 2px var(--ari-primary) inset !important;
}
.front-page-button p:last-child .green.button:hover {
  background-color: var(--ari-primary-ctr) !important;
  color: var(--ari-primary) !important;
}

/* --------------------------------------------------------------------------
   26. CLIENT LANDING PAGE — Improve main content area
   -------------------------------------------------------------------------- */

/* Hero section with Ari welcome */
#landing_page {
  font-family: 'AllianceText', sans-serif !important;
}

/* Main content buttons — "Abrir un ticket" / "Ver estado" */
.button, .button:visited {
  font-family: 'AlliancePlatt', sans-serif !important;
  border-radius: 6px !important;
}

/* Client container better styling */
#container {
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   27. STAFF PANEL — Improved fidelity to preview
   -------------------------------------------------------------------------- */

/* Staff nav active tab — stronger visual */
#nav li.active {
  border-bottom: 2px solid var(--ari-surface) !important;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

/* Table action buttons row — icon buttons */
.action-button i,
.button i {
  color: inherit !important;
}

/* Sort button */
.Sort.button,
.action-button.muted {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface-dim) !important;
}

/* Search input in staff */
.input.attached input {
  background-color: var(--ari-input-bg) !important;
  border-color: var(--ari-input-border) !important;
  color: var(--ari-on-surface) !important;
}
.input.attached .button.attached {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
}

/* Queue title h2 */
h2 i { color: var(--ari-success) !important; }

/* Staff container full width backgrounds */
body, html {
  min-height: 100vh;
}

/* Header "Welcome" text and links */
#header .pull-right,
#header .flush-right {
  color: var(--ari-header-text) !important;
}
#header .pull-right a,
#header .flush-right a {
  color: var(--ari-header-link) !important;
}
#header .pull-right strong,
#header .flush-right strong {
  color: var(--ari-header-text) !important;
}

/* --------------------------------------------------------------------------
   28. CLIENT NAV — Active state pill shape (like preview)
   -------------------------------------------------------------------------- */

#nav li a.active {
  border-radius: 20px !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   29. DARK MODE — Specific overrides for improved contrast
   -------------------------------------------------------------------------- */

[data-theme="dark"] #container {
  background-color: var(--ari-bg) !important;
}

[data-theme="dark"] #content {
  background-color: var(--ari-surface) !important;
}

/* Dark mode footer — powered by osTicket logo */
[data-theme="dark"] #footer #poweredBy {
  filter: invert(1) !important;
}

/* Dark mode action buttons — need visible outlines */
[data-theme="dark"] .action-button,
[data-theme="dark"] .button {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
  box-shadow: 0 0 0 1px var(--ari-outline) inset !important;
}
[data-theme="dark"] .action-button:hover,
[data-theme="dark"] .button:hover {
  background-color: var(--ari-primary-ctr) !important;
  color: var(--ari-primary) !important;
  box-shadow: 0 0 0 2px var(--ari-primary) inset !important;
}

/* Dark mode submit buttons still use primary */
[data-theme="dark"] button[type=submit],
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] .primary.button {
  background-color: var(--ari-btn-bg) !important;
  color: var(--ari-btn-text) !important;
  box-shadow: none !important;
}
[data-theme="dark"] button[type=submit]:hover,
[data-theme="dark"] input[type=submit]:hover {
  background-color: var(--ari-btn-hover) !important;
  color: var(--ari-btn-text) !important;
}

/* Dark mode action button icons */
[data-theme="dark"] .action-button i {
  color: var(--ari-on-surface) !important;
}
[data-theme="dark"] .action-button:hover i {
  color: var(--ari-primary) !important;
}

/* Dark mode Sort button */
[data-theme="dark"] .Sort.button,
[data-theme="dark"] .action-button.muted {
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface-dim) !important;
  box-shadow: 0 0 0 1px var(--ari-outline-var) inset !important;
}

/* Dark mode sub-nav icons — make them visible */
[data-theme="dark"] #sub_nav .open,
[data-theme="dark"] #sub_nav .answered,
[data-theme="dark"] #sub_nav .mine,
[data-theme="dark"] #sub_nav .closed,
[data-theme="dark"] #sub_nav .search,
[data-theme="dark"] #sub_nav .new {
  filter: invert(1) brightness(1.5) !important;
}

/* Dark mode sidebar buttons */
[data-theme="dark"] .front-page-button .blue.button,
[data-theme="dark"] .front-page-button .green.button {
  background-color: var(--ari-btn-bg) !important;
  color: var(--ari-btn-text) !important;
}
[data-theme="dark"] .front-page-button p:last-child .green.button {
  background-color: transparent !important;
  color: var(--ari-primary) !important;
  box-shadow: 0 0 0 2px var(--ari-primary) inset !important;
}

/* Dark mode table — ensure all text is light */
[data-theme="dark"] table.list tbody td,
[data-theme="dark"] table.list tbody td * {
  color: var(--ari-on-surface) !important;
}
[data-theme="dark"] table.list tbody td a,
[data-theme="dark"] table.list tbody td a * {
  color: var(--ari-link) !important;
}

/* Dark mode search input + attached button */
[data-theme="dark"] .input.attached input {
  background-color: var(--ari-input-bg) !important;
  border-color: var(--ari-input-border) !important;
  color: var(--ari-on-surface) !important;
}

/* Staff search bar — #basic_search container and input (scp.css line 3655) */
[data-theme="dark"] #basic_search {
  background-color: var(--ari-surface-dim) !important;
  border-bottom-color: var(--ari-outline-var) !important;
  box-shadow: inset 0 4px 12px -10px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] #basic-ticket-search,
[data-theme="dark"] .search input[type=text] {
  background-color: var(--ari-input-bg) !important;
  border-color: var(--ari-input-border) !important;
  color: var(--ari-on-surface) !important;
}
[data-theme="dark"] #basic-ticket-search:focus,
[data-theme="dark"] .search input[type=text]:focus {
  border-color: var(--ari-input-focus) !important;
  box-shadow: 0 0 0 3px var(--ari-input-focus-ring) !important;
}

/* Dark mode thread entries — body text uses onSurface (body is shared, not colored) */
[data-theme="dark"] .thread-entry .thread-body {
  color: var(--ari-on-surface) !important;
}
[data-theme="dark"] .thread-entry .thread-body a {
  color: var(--ari-link) !important;
}

/* Dark mode thread HEADERS — use correct on-pair for each type */
[data-theme="dark"] .thread-entry.message .header,
[data-theme="dark"] .thread-entry.message .header *,
[data-theme="dark"] .thread-entry.message .header a {
  color: var(--ari-thread-msg-text) !important;
}
[data-theme="dark"] .thread-entry.response .header,
[data-theme="dark"] .thread-entry.response .header *,
[data-theme="dark"] .thread-entry.response .header a {
  color: var(--ari-thread-resp-text) !important;
}
[data-theme="dark"] .thread-entry.note .header,
[data-theme="dark"] .thread-entry.note .header *,
[data-theme="dark"] .thread-entry.note .header a {
  color: var(--ari-thread-note-text) !important;
}
[data-theme="dark"] .thread-entry.system .header,
[data-theme="dark"] .thread-entry.system .header *,
[data-theme="dark"] .thread-entry.system .header a {
  color: var(--ari-thread-system-text) !important;
}

/* Dark mode breadcrumbs */
[data-theme="dark"] #breadcrumbs {
  background-color: var(--ari-surface-dim) !important;
}

/* Dark mode dropdown menus */
[data-theme="dark"] .customQ-dropdown .add-queue a {
  color: var(--ari-on-surface-dim) !important;
}
[data-theme="dark"] .customQ-dropdown .add-queue a:hover {
  background-color: var(--ari-surface-dim) !important;
}

/* --------------------------------------------------------------------------
   30. DARK MODE — TABS (ul.tabs / scp.css lines 1701-1850)
   These stay light blue/white by default. Override everything.
   -------------------------------------------------------------------------- */
[data-theme="dark"] ul.tabs {
  background-color: var(--ari-surface-dim) !important;
  background-image: none !important;
  border-bottom-color: var(--ari-outline-var) !important;
  box-shadow: none !important;
}
[data-theme="dark"] ul.tabs li {
  background-color: transparent !important;
  border-color: var(--ari-outline-var) !important;
  box-shadow: none !important;
}
[data-theme="dark"] ul.tabs li.active {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-outline-var) !important;
  border-top-color: var(--ari-primary) !important;
  border-bottom-color: var(--ari-surface) !important;
  box-shadow: none !important;
}
[data-theme="dark"] ul.tabs li a {
  color: var(--ari-on-surface-dim) !important;
}
[data-theme="dark"] ul.tabs li.active a {
  color: var(--ari-primary) !important;
  font-weight: bold !important;
}
[data-theme="dark"] ul.tabs li:not(.active):hover {
  background-color: var(--ari-surface) !important;
}
[data-theme="dark"] ul.tabs li:not(.active) a:hover {
  color: var(--ari-on-surface) !important;
}

/* Vertical tabs (settings pages) */
[data-theme="dark"] ul.tabs.vertical li.active {
  background-color: var(--ari-surface) !important;
}

/* Tab content area */
[data-theme="dark"] .tab_content {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
}

/* --------------------------------------------------------------------------
   31. DARK MODE — CATCH-ALL for remaining white interior areas
   -------------------------------------------------------------------------- */

/* Any element that could have white/light bg in ticket views */
[data-theme="dark"] .flush-left,
[data-theme="dark"] .flush-right,
[data-theme="dark"] .clear,
[data-theme="dark"] .pull-left,
[data-theme="dark"] .pull-right {
  color: var(--ari-on-surface) !important;
}

/* Ticket info table (top of ticket view) */
[data-theme="dark"] .ticket_info,
[data-theme="dark"] .infoTable,
[data-theme="dark"] table.custom-data,
[data-theme="dark"] table.custom-data th,
[data-theme="dark"] table.custom-data td,
[data-theme="dark"] .ticket_info.custom-data thead th {
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface) !important;
  border-color: var(--ari-divider) !important;
}
[data-theme="dark"] table.custom-data .headline {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
}

/* Form tables inside tickets */
[data-theme="dark"] .form_table td,
[data-theme="dark"] .form_table th {
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface) !important;
  border-color: var(--ari-divider) !important;
}
[data-theme="dark"] .form_table th h4 {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
}

/* Settings table */
[data-theme="dark"] .settings_table td,
[data-theme="dark"] .settings_table th {
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface) !important;
  border-color: var(--ari-divider) !important;
}

/* General table cells */
[data-theme="dark"] .table td:not(:empty) {
  background-color: var(--ari-surface) !important;
}
[data-theme="dark"] .table tr:not(:last-child):not(.header) {
  border-bottom-color: var(--ari-divider) !important;
}

/* Reply/response area at bottom of ticket */
[data-theme="dark"] #response_options,
[data-theme="dark"] #ticket_actions {
  background-color: var(--ari-surface-dim) !important;
  border-color: var(--ari-outline-var) !important;
}
[data-theme="dark"] #reply {
  background-color: var(--ari-surface-dim) !important;
  border-color: var(--ari-outline-var) !important;
}

/* Redactor (rich text editor) in dark mode — key classes from redactor.css */
[data-theme="dark"] .redactor-box {
  border-color: var(--ari-outline-var) !important;
}
[data-theme="dark"] .redactor-box.redactor-styles-on {
  background: var(--ari-input-bg) !important;
  border-color: var(--ari-outline-var) !important;
}
/* Toolbar container — doubled-class selector from redactor.css line 1387 */
[data-theme="dark"] .redactor-toolbar,
[data-theme="dark"] .redactor-toolbar.redactor-toolbar,
[data-theme="dark"] .redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
  background: var(--ari-surface-dim) !important;
  background-color: var(--ari-surface-dim) !important;
  border-bottom-color: var(--ari-divider) !important;
  box-shadow: none !important;
}
/* Toolbar buttons — redactor.css sets background SHORTHAND rgba(255,255,255,0.97) on .redactor-toolbar a
   Must override 'background' not just 'background-color' */
[data-theme="dark"] .redactor-toolbar a,
[data-theme="dark"] .redactor-toolbar.redactor-toolbar a,
[data-theme="dark"] .redactor-air a {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ari-on-surface) !important;
  box-shadow: none !important;
  border: 1px solid var(--ari-outline-var) !important;
}
[data-theme="dark"] .redactor-toolbar a:hover,
[data-theme="dark"] .redactor-air a:hover {
  background: var(--ari-primary) !important;
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
}
[data-theme="dark"] .redactor-toolbar a.redactor-button-active {
  background: var(--ari-primary-ctr) !important;
  background-color: var(--ari-primary-ctr) !important;
  color: var(--ari-primary) !important;
}
/* Editor content area — aggressive selectors + contenteditable */
[data-theme="dark"] .redactor-in,
[data-theme="dark"] .redactor-editor,
[data-theme="dark"] .redactor-box textarea,
[data-theme="dark"] .redactor-box .redactor-in,
[data-theme="dark"] .redactor-box.redactor-styles-on .redactor-in,
[data-theme="dark"] [contenteditable="true"] {
  background: var(--ari-input-bg) !important;
  background-color: var(--ari-input-bg) !important;
  color: var(--ari-on-surface) !important;
}
/* Unsaved draft bar - redactor.css uses background shorthand */
[data-theme="dark"] .redactor-statusbar {
  background: var(--ari-surface-dim) !important;
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface-dim) !important;
}
[data-theme="dark"] .redactor-statusbar li {
  color: var(--ari-on-surface-dim) !important;
}
/* Focus border */
[data-theme="dark"] .redactor-focus.redactor-styles-on,
[data-theme="dark"] .redactor-focus:focus.redactor-styles-on {
  border-color: var(--ari-input-focus) !important;
}

/* Placeholder text — redactor.css sets color: rgba(0,0,0,0.4) */
[data-theme="dark"] .redactor-placeholder::before,
[data-theme="dark"] .redactor-in[placeholder]::before,
[data-theme="dark"] .redactor-in figcaption[placeholder]:empty::before {
  color: rgba(255,255,255,0.4) !important;
}


/* Tooltip/tip box */
[data-theme="dark"] .tip_box,
[data-theme="dark"] .tip_content {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
}

/* Dialog/overlay */
[data-theme="dark"] .dialog {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-outline-var) !important;
}

/* jQuery UI in dark mode */
[data-theme="dark"] .ui-widget-content {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
}
[data-theme="dark"] .ui-widget-header,
[data-theme="dark"] .ui-dialog .ui-dialog-titlebar {
  background-color: var(--ari-primary) !important;
  color: var(--ari-on-primary) !important;
}

/* Noclick dropdown */
[data-theme="dark"] .noclick-dropdown {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-outline-var) !important;
}

/* Thread body attachments */
[data-theme="dark"] .thread-body .attachments {
  background-color: var(--ari-surface-dim) !important;
  border-top-color: var(--ari-divider) !important;
}

/* Ticket notes area */
[data-theme="dark"] #ticket_notes .info,
[data-theme="dark"] #ticket_notes td {
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface) !important;
}

/* Thread info bar */
[data-theme="dark"] .thread-entry .info {
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface) !important;
}

/* Type icon badges */
[data-theme="dark"] .type-icon {
  background-color: var(--ari-surface-dim) !important;
  border-color: var(--ari-divider) !important;
}

/* File drop areas */
[data-theme="dark"] .freetext-files {
  border-color: var(--ari-outline-var) !important;
  background-color: var(--ari-surface-dim) !important;
}

/* Section breaks */
[data-theme="dark"] div.section-break {
  background-color: var(--ari-neutral-ctr) !important;
  color: var(--ari-on-neutral-ctr) !important;
  border-color: var(--ari-outline-var) !important;
}

/* External auth */
[data-theme="dark"] .external-auth-box {
  border-color: var(--ari-outline-var) !important;
  background-color: var(--ari-surface-dim) !important;
}
[data-theme="dark"] .external-auth-icon {
  color: var(--ari-on-surface) !important;
  border-right-color: var(--ari-divider) !important;
}

/* Accordian */
[data-theme="dark"] .accordian dt {
  border-color: var(--ari-outline-var) !important;
  background-color: var(--ari-surface-dim) !important;
}
[data-theme="dark"] .accordian dd {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
}

/* FAQ and KB in dark mode */
[data-theme="dark"] #faq ol li a:hover {
  background-color: var(--ari-primary-ctr) !important;
}
[data-theme="dark"] #faq .article-meta {
  background-color: var(--ari-surface-dim) !important;
}

/* Client sidebar in dark mode */
[data-theme="dark"] .sidebar .content {
  background-color: var(--ari-surface-dim) !important;
  border-color: var(--ari-outline-var) !important;
}

/* Client login */
[data-theme="dark"] #clientLogin {
  background-color: var(--ari-surface-dim) !important;
  border-color: var(--ari-outline-var) !important;
}

/* Select2 in dark mode */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--ari-input-bg) !important;
  border-color: var(--ari-input-border) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ari-on-surface) !important;
}
[data-theme="dark"] .select2-dropdown {
  background-color: var(--ari-surface) !important;
  border-color: var(--ari-input-border) !important;
}
[data-theme="dark"] .select2-results__option {
  color: var(--ari-on-surface) !important;
}

/* Dashboard stats in dark mode */
[data-theme="dark"] table.dashboard-stats tbody:first-child th,
[data-theme="dark"] table.dashboard-stats tbody:nth-child(2) th {
  background-color: var(--ari-surface-dim) !important;
  color: var(--ari-on-surface-dim) !important;
  border-color: var(--ari-divider) !important;
}
[data-theme="dark"] table.dashboard-stats tbody:nth-child(2) td {
  background-color: var(--ari-surface) !important;
  color: var(--ari-on-surface) !important;
  border-color: var(--ari-divider) !important;
}
[data-theme="dark"] table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) {
  background-color: var(--ari-surface-dim) !important;
}
[data-theme="dark"] table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) td {
  background-color: var(--ari-surface-dim) !important;
}

/* Staff login in dark mode */
[data-theme="dark"] #loginBox:after {
  background-color: var(--ari-surface) !important;
}
[data-theme="dark"] #loginBox fieldset input {
  background-color: var(--ari-input-bg) !important;
  border-color: var(--ari-input-border) !important;
  color: var(--ari-on-surface) !important;
}

/* Row items and sortable */
[data-theme="dark"] .row-item {
  border-color: var(--ari-outline-var) !important;
}
[data-theme="dark"] .sortable:hover {
  background-color: var(--ari-surface-dim) !important;
}

/* --------------------------------------------------------------------------
   30. PRINT
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .ari-theme-toggle { display: none !important; }
  #header { background-color: #163005 !important; -webkit-print-color-adjust: exact; }
}