/*
 * main.dark.css — Dark theme overrides for accounting
 *
 * Loaded after base.css + layout.css + tables.css + pagination.css + forms.css +
 * components/*.css + utilities.css, so variable overrides here win for any rule
 * that reads from --color-* tokens.
 *
 * Important: do NOT override nav chrome tokens here (--color-nav-bg, the
 * div.navigation/div.content h2 tabs rules). Those remain on the user theme's
 * defaults so that company.css.php's per-customer nav color (loaded AFTER this
 * file) keeps winning. Brand colors survive in dark mode.
 */

/* Tell the browser this document is dark so native form controls, scrollbars,
   and autofill render with the dark UA stylesheet. */
:root { color-scheme: dark; }

/* ─── CSS variable overrides ─────────────────────────────────────────────── */

:root {
  /* Core palette — unified slate hue family (no navy/slate/gray mix) */
  --color-bg:               #1c2129;   /* slate base, replaces navy-purple #2e2e4b */
  --color-text:             #d8dde4;   /* off-white, easier than pure #e5e5e5 */
  --color-text-soft:        #aab2bc;
  --color-muted:            #8b95a1;   /* desaturated slightly */
  --color-muted-light:      #5a6470;
  --color-muted-lighter:    #3a424d;
  --color-border:           #3a424d;   /* softer separator, still visible */
  --color-border-soft:      #2a3038;
  --color-divider-heavy:    #6b7585;   /* lift heavy section divider above bg */
  --color-divider-thin:     #4a5260;
  --tooltip-bg:             rgba(60, 70, 84, 0.95);   /* lifted slate so text reads */
  --tooltip-text:           #f0f3f7;
  --shadow-card:            0 1px 2px rgba(0, 0, 0, 0.5),  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-card-hover:      0 6px 18px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
  --color-row-hover:        #344157;   /* softer slate hover, same family */
  --color-badge-bg:         rgba(140, 152, 168, 0.85);

  /* Form fields — paired with --input-* in base.css. Mirrors body palette so
     inputs lift one notch above page bg. */
  --input-bg:               #232a35;
  --input-fg:               #d8dde4;
  --input-border:           #3a424d;

  /* Button semantic palette — paired with --color-{danger,success,warning,dark}*
     in base.css. Lifted/tuned for the dark slate body so each variant reads
     without flashing. Glow alphas slightly higher for the darker surround. */
  --color-danger:             #ef4444;
  --color-danger-hover:       #dc2626;
  --color-danger-glow:        rgba(239, 68, 68, 0.40);
  --color-success-strong:     #22c55e;
  --color-success-strong-hov: #16a34a;
  --color-success-glow:       rgba(34, 197, 94, 0.40);
  --color-warning-strong:     #fbbf24;
  --color-warning-strong-hov: #f59e0b;
  --color-warning-glow:       rgba(251, 191, 36, 0.40);
  --color-dark-strong:        #374151;
  --color-dark-strong-hover:  #1f2937;
  --color-dark-glow:          rgba(55, 65, 81, 0.50);
  --color-heading-bg:         #232a35;   /* same family as body, slight lift */
  --color-heading-text:       #d8dde4;
  --color-subheading:         #aab2bc;

  /* Accent: slate-toned blue, less saturated so it doesn't "flash" against
     the calm slate body. Reserved for chrome (focus rings, active tabs,
     pagination hover), not body links. */
  --color-accent:           #6aa9e0;
  --color-accent-hover:     #8cc1ee;
  --color-focus-ring:       #6aa9e0;
  --color-focus-ring-soft:  rgba(106, 169, 224, 0.3);

  /* Link text — soft white, matches body text */
  --color-link:             #d8dde4;

  /* Hover / selection — deeper than body so the row visibly lifts and
     white text passes contrast. Same tokens combobox in widgets.css and
     friends use in light theme — only the values change per theme. */
  --color-hover-bg:         #4b627e;
  --color-hover-text:       #ffffff;
  --color-selection-bg:     #1e3a5e;
  --color-selection-text:   #ffffff;

  /* Page-specific "canvas" overrides — surfaces that should stay light-ish
     in dark mode (report designer, invoice preview, etc.). Keep paper-gray
     rather than pure white so they don't glare against the dark chrome. */
  --designer-canvas-bg:     #c8c8c8;

  /* Report designer chrome — section header bars and page-width edge.
     Defaults (#ccc/#999/#000) live in rpt/designer/style.scss as fallbacks
     so the classic theme keeps its strong contrast against the white canvas;
     dark theme remaps them to the palette. */
  --designer-section-bg:     var(--color-heading-bg);
  --designer-section-border: var(--color-border);
  --designer-page-edge:      var(--color-text);

  /* Row colors — alt rows LIFTED (lighter than body), matching light-theme
     convention where #efefef alt sits over #ffffff body. */
  --color-row-alt-light:    #232a35;
  --color-row-alt-dark:     #2a323e;
  --color-row-even:         #424d5e;   /* ColGroupLight */
  --color-row-alt:          #2a323e;   /* ColGroupDark */
  --color-quick-add:        #1a2e22;   /* dark green tint */
  --color-quick-filter:     #2a2818;   /* dark amber tint */
  --color-filter-bg:        #1e2535;

  /* Semantic row colors — dimmed for dark background */
  --row-purple-even: #4a2d5a;  --row-purple-odd: #402550;
  --row-blue-even:   #1e4d66;  --row-blue-odd:   #184056;
  --row-red-even:    #5a2d2d;  --row-red-odd:    #4a2525;
  --row-orange-even: #5a4020;  --row-orange-odd: #4a341a;
  --row-yellow-even: #4a4a1a;  --row-yellow-odd: #3a3a14;
  --row-green-even:  #2d4a2d;  --row-green-odd:  #254025;

  /* Alert backgrounds — dim dark variants */
  --color-notice-bg:        #1a3a52;  --color-notice-border:  #2a5a82;
  --color-warning-bg:       #3d3010;  --color-warning-border: #6a5420;
  --color-error-bg:         #3d1010;  --color-error-border:   #6a2020;
  --color-success-bg:       #0d2e1a;  --color-success-border: #1a5a33;
  --color-bank-balance: #70a3fa;
}

/* ─── Menu search placeholder ────────────────────────────────────────────── */
/* company.css.php (loads after this file) sets #menuSearch::placeholder to
   the per-company brand color, which is fine on light but unreadable on
   dark slate. Force a muted slate placeholder via !important. */
#menuSearch::placeholder {
  color: var(--color-muted) !important;
  opacity: 0.7;
}

/* ─── Form fields ────────────────────────────────────────────────────────── */
/* Base styling lives in base.css and reads --input-bg/--input-fg/--input-border.
   Dark theme rebinds those tokens at :root above. Only dark-specific bits stay
   here: native control color-scheme + focus ring. */

select { color-scheme: dark; }

input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
  border-color: var(--color-focus-ring);
  outline-color: var(--color-focus-ring);
}

/* ─── Global element tweaks ──────────────────────────────────────────────── */

::selection {
  background: var(--color-focus-ring);
  color: #1a1a1a;
}

/* ─── Menu tiles (blockmenu / dashmenu) ──────────────────────────────────── */
/* Give tiles a visible surface against the near-black body so cards don't
   disappear. Border uses --color-border (stronger than --color-border-soft)
   and background is a subtle lift from body. */

ul.blockmenu a,
ul.dashmenu > li {
  /* background: #242428; */
  border-color: var(--color-border);
}
ul.blockmenu a:hover {
  border-color: var(--color-text) !important;
  background: #2a323e;          /* slate hover, same family as body */
}

/* Combo + autocomplete hover/selection styling lives in widgets.css and
   uses the --color-hover-bg / --color-selection-bg tokens — no dark-specific
   override needed here. */

/* Swap the block sprite to its white variant in dark mode. The default
   block-sprite.png is dark/colored icons on transparent — invisible on a
   dark body. block-sprite-white.png is the same sprite tinted white. */
ul.blockmenu li.icon a div {
  background-image: url('../../../images/block-sprite-white.png');
}
ul.blockmenu a href {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
}

/* ─── company.css.php overrides ──────────────────────────────────────────── */
/* company.css.php loads AFTER this file and hardcodes a few light backgrounds
   that ignore the user theme (pagination bg #f0f0f0, brand-flipped tab.selected).
   We prefix with body.theme-dark / body.theme-system so the selector specificity
   beats company.css.php (which uses unscoped selectors), without needing
   !important. classic stays untouched — company.css.php's hardcodes still apply
   on body.theme-classic. */

body.theme-dark   div.PaginationNavigation,
body.theme-system div.PaginationNavigation {
  background: var(--color-heading-bg);
}

body.theme-dark   div.content h2 span.tabs a,
body.theme-system div.content h2 span.tabs a {
  background: var(--color-heading-bg);
  color: var(--color-text);
}
body.theme-dark   div.content h2 span.tabs a.selected,
body.theme-system div.content h2 span.tabs a.selected,
body.theme-dark   div.content h2 span.tabs a:hover,
body.theme-system div.content h2 span.tabs a:hover {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */

/* Link rows (clickable detail-row in tables) use --color-accent for hover
   from tables.css. In dark, --color-accent (#6aa9e0) is too light for
   white text — same contrast issue as the combobox.selected. Use the
   deeper --color-selection-bg navy so white text reads cleanly. */
table.ListingTable tr.Link:hover td {
  background-color: var(--color-selection-bg) !important;
  color: var(--color-selection-text);
}

table.ListingTable.Natural td,
table.ListingTable.Natural th {
  border-color: var(--color-border) !important;
}

/* ─── Code blocks ────────────────────────────────────────────────────────── */

pre.code-block {
  background: var(--color-heading-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* ─── Floating save bar ──────────────────────────────────────────────────── */

.FloatingFloater,
div.submitDiv {
  background: var(--color-bg) !important;
  border-top: 1px solid var(--color-border);
}

/* ─── Report thumbnail ───────────────────────────────────────────────────── */

.report-thumb {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
}

/* ─── jQuery UI dark overrides ───────────────────────────────────────────── */
/* Vendor jquery-ui-1.10.4.min.css is @imported from header.php AFTER this
   file, so equal-specificity rules would lose on source order. Scoping every
   selector under body.theme-dark / body.theme-system lifts specificity above
   the vendor's unscoped (0,2,1) rules — same trick as the leaflet + tabs
   overrides below. No !important needed. */

body.theme-dark   .ui-datepicker,
body.theme-system .ui-datepicker,
body.theme-dark   .ui-dialog,
body.theme-system .ui-dialog,
body.theme-dark   .ui-autocomplete,
body.theme-system .ui-autocomplete {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}
body.theme-dark   .ui-datepicker td a,
body.theme-system .ui-datepicker td a,
body.theme-dark   .ui-datepicker td span,
body.theme-system .ui-datepicker td span,
body.theme-dark   .ui-dialog .ui-dialog-content,
body.theme-system .ui-dialog .ui-dialog-content,
body.theme-dark   .ui-autocomplete .ui-menu-item,
body.theme-system .ui-autocomplete .ui-menu-item,
body.theme-dark   .ui-autocomplete .ui-menu-item a,
body.theme-system .ui-autocomplete .ui-menu-item a,
body.theme-dark   .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper,
body.theme-system .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
  background: var(--color-bg);
  color: var(--color-text);
}
body.theme-dark   .ui-autocomplete .ui-menu-item a.ui-state-focus,
body.theme-system .ui-autocomplete .ui-menu-item a.ui-state-focus,
body.theme-dark   .ui-autocomplete .ui-menu-item a.ui-state-active,
body.theme-system .ui-autocomplete .ui-menu-item a.ui-state-active,
body.theme-dark   .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active,
body.theme-system .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: var(--color-selection-bg);
  color: var(--color-selection-text, #fff);
}

/* Vendor jQuery UI gives every datepicker cell a 1px #69c border. Kill that —
   cell visual states drive off background + inset ring (today) instead. */
body.theme-dark   .ui-datepicker td a.ui-state-default,
body.theme-system .ui-datepicker td a.ui-state-default,
body.theme-dark   .ui-datepicker td a.ui-state-hover,
body.theme-system .ui-datepicker td a.ui-state-hover,
body.theme-dark   .ui-datepicker td a.ui-state-active,
body.theme-system .ui-datepicker td a.ui-state-active {
  border-color: transparent;
}
body.theme-dark   .ui-datepicker td a.ui-state-hover,
body.theme-system .ui-datepicker td a.ui-state-hover {
  background: var(--color-hover-bg);
  color: var(--color-text);
}
body.theme-dark   .ui-datepicker td a.ui-state-active,
body.theme-system .ui-datepicker td a.ui-state-active,
body.theme-dark   .ui-datepicker td.ui-datepicker-current-day a,
body.theme-system .ui-datepicker td.ui-datepicker-current-day a {
  background: var(--color-selection-bg);
  color: var(--color-selection-text, #fff);
}
body.theme-dark   .ui-datepicker td.ui-datepicker-today a.ui-state-default,
body.theme-system .ui-datepicker td.ui-datepicker-today a.ui-state-default {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
body.theme-dark   .ui-datepicker .ui-datepicker-header,
body.theme-system .ui-datepicker .ui-datepicker-header {
  background: var(--color-heading-bg, #232a35);
  color: var(--color-text);
  border-color: var(--color-border-soft);
}
body.theme-dark   .ui-datepicker .ui-datepicker-title,
body.theme-system .ui-datepicker .ui-datepicker-title,
body.theme-dark   .ui-datepicker th,
body.theme-system .ui-datepicker th {
  color: var(--color-text);
}

/* ─── Leaflet map popups (vendor leaflet.css) ────────────────────────────── */
/* leaflet.css hardcodes white popup wrapper + #333 text. The map pages
   @import leaflet.css from inside the page, so it loads AFTER main.dark.css —
   equal-specificity rules would lose on source order. Scope to body.theme-*
   (same trick we use for company.css.php overrides above) so we win without
   !important. */

body.theme-dark   .leaflet-popup-content-wrapper,
body.theme-system .leaflet-popup-content-wrapper,
body.theme-dark   .leaflet-popup-tip,
body.theme-system .leaflet-popup-tip {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
}
body.theme-dark   .leaflet-popup-content-wrapper,
body.theme-system .leaflet-popup-content-wrapper {
  border: 1px solid var(--color-border);
}
body.theme-dark   .leaflet-popup-content a,
body.theme-system .leaflet-popup-content a {
  color: var(--color-accent);
}
body.theme-dark   .leaflet-container a.leaflet-popup-close-button,
body.theme-system .leaflet-container a.leaflet-popup-close-button {
  color: var(--color-muted);
}
body.theme-dark   .leaflet-container a.leaflet-popup-close-button:hover,
body.theme-system .leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--color-text);
}

/* ─── Theme-aware utility classes ────────────────────────────────────────── */

.warning-notice {
  background-color: var(--color-warning-bg) !important;
  background-image: none !important;
}

/* Muted text preserves meaning without blending into dark background */
.text-muted { color: var(--color-muted) !important; }