/*
 * themeDarkV1.css — RSF framework dark layer (theme hooks).
 *
 * Opt-in: Page::head() links this file only when the project's Main overrides
 * themeDarkEnabled() to return true (default false = not linked, head byte-identical).
 * It is linked after the framework stylesheets and before project CSS. With the
 * opt-in, the "auto" theme preference resolves to data-theme="dark" on a dark OS,
 * so the [data-theme="dark"] rules here serve both Dark and Auto.
 *
 * Technique: framework and app CSS write colours as var(--thmX, <light literal>).
 * The --thm* tokens exist ONLY under [data-theme="dark"], so light themes and
 * projects that have not opted in fall back to the literal and render unchanged.
 * A project may redefine any --thm* token in its own CSS (loaded after this file).
 *
 * Token families:
 *   Surfaces  --thm*Bg, --thmTint*, --thmScrim   backgrounds (page, card, input, fills, pastel tints, veils)
 *   Text      --thmText*                         ink (primary, secondary, muted, faint, hue inks)
 *   Lines     --thmBorder*                       borders, outlines, 1px dividers
 *   Shadows   --thmShadow, --thmGlow             shadow colour of raised surfaces; white glows (off in dark)
 */
[data-theme="dark"]{
	color-scheme: dark;

	/* Surfaces */
	--thmPageBg: #1a1a1a;	/* base canvas: page, full-width sections, plain rows, tab panes */
	--thmCardBg: #2d2d2d;	/* raised: cards, tiles, popups, modals, menus, tooltips, sticky cells */
	--thmInputBg: #3a3a3a;	/* text inputs, selects, textareas, editable cells */
	--thmSubtleBg: #242424;	/* near-white greys: zebra rows, section headers, wells */
	--thmMutedBg: #3a3a3a;	/* light grey fills: chips, disabled, tracks, neutral buttons */
	--thmStrongBg: #4a4a4a;	/* mid grey fills */
	--thmHoverBg: #2d3748;	/* hover / focus-row fill */
	--thmTintBlue: #243a55;	/* pale blue: selected, info, header bands */
	--thmTintBlueStrong: #2f5d94;	/* mid blue fills carrying dark text */
	--thmTintGreen: #234a33;	/* pale green: success, done, good rows */
	--thmTintRed: #4a2424;	/* pale red: error, bad rows */
	--thmTintYellow: #453a1a;	/* pale yellow / amber: warning, pending */
	--thmTintOrange: #4a3320;	/* pale orange */
	--thmTintPurple: #352a52;	/* pale purple / violet */
	--thmScrim: rgba(0,0,0,.6);	/* translucent overlay veil */

	/* Text */
	--thmText: #e5e5e5;	/* primary ink */
	--thmText2: #b3b3b3;	/* secondary ink */
	--thmTextMuted: #969696;	/* muted / help text */
	--thmTextFaint: #6f6f6f;	/* placeholder, disabled, zero values */
	--thmTextBlue: #6bb3ff;	/* brand / link blue ink */
	--thmTextGreen: #4ade80;	/* green ink */
	--thmTextRed: #f87171;	/* red ink */
	--thmTextAmber: #fbbf24;	/* amber / brown ink */
	--thmTextPurple: #c4b5fd;	/* purple ink */

	/* Lines */
	--thmBorder: #404040;	/* standard hairline */
	--thmBorderLight: #353535;	/* faint divider */
	--thmBorderStrong: #5c5c5c;	/* strong outline */
	--thmBorderBlue: #35639c;	/* blue-tinted line */
	--thmBorderGreen: #2f6b47;	/* green-tinted line */
	--thmBorderRed: #8a3a3a;	/* red-tinted line */
	--thmBorderAmber: #7a5a1e;	/* amber-tinted line */

	/* Shadows */
	--thmShadow: rgba(0,0,0,.55);	/* shadow colour of a raised surface whose only edge is the shadow */
	--thmGlow: transparent;	/* white glows / inset highlights / white text-shadow */
}

/* ---- Base elements and native controls (dark only) ----
   :where() keeps each rule at one attribute selector (0,1,0), so any class rule in an app still wins.
   color-scheme: dark (above) already darkens scrollbars, date pickers, checkboxes, file buttons and UA fields. */

/* Text selection: the OS highlight stays pale blue on a light OS, under #e5e5e5 ink (unreadable) */
[data-theme="dark"] ::selection{
	background-color: var(--thmTintBlueStrong);
	color: var(--thmText);
}

/* Autofilled fields: Safari (and older Chrome) paint a UA !important #faffbd / #e8f0fe fill with black ink; an inset
   shadow covers the fill (author CSS cannot beat a UA !important background), text-fill-color repaints the ink */
[data-theme="dark"] :where(input, textarea, select):where(:-webkit-autofill, :autofill){
	-webkit-box-shadow: 0 0 0 1000px var(--thmInputBg) inset;
	box-shadow: 0 0 0 1000px var(--thmInputBg) inset;
	-webkit-text-fill-color: var(--thmText);
	caret-color: var(--thmText);
}

/* Option and optgroup rows: Windows draws them in the select's own fill; framework baseline for projects without
   a dark select rule (PTB's ptbThemes.css `select option` !important rule takes over there) */
[data-theme="dark"] :where(option, optgroup){
	background-color: var(--thmInputBg);
	color: var(--thmText);
}

/* Unclassed links: UA #0000ee / visited #551a8b are unreadable on #1a1a1a; one colour serves :visited too
   (PTB's ptbThemes.css `a` !important rule takes over there; classed links keep their own rules) */
[data-theme="dark"] :where(a[href]:not([class])){
	color: var(--thmTextBlue);
}

/* mark: the UA Mark system colour stays bright yellow in dark (a glaring block; light link ink inside it vanishes) */
[data-theme="dark"] :where(mark){
	background-color: var(--thmTintYellow);
	color: var(--thmText);
}

/* hr: main.css:3591 draws the rule as a #ddd/#aaa/#ddd gradient (border:0), a bright stripe in dark; PTB's dark
   `hr{border-color}` cannot reach it. (0,1,0) beats the bare `hr` (0,0,1) */
[data-theme="dark"] :where(hr){
	background-image: linear-gradient(to right, var(--thmBorder), var(--thmBorderStrong), var(--thmBorder));
}

/* code / pre / kbd / samp carrying an inline near-white fill: the inherited #e5e5e5 ink sat on #f0f0f0 / #f5f5f5.
   !important beats the inline style attributes at ryca-solutions-framework/classes/TwoFactorAuth.php:337
   (<code style='background: #f0f0f0'>, 2FA setup secret) and mod/settings/testing.php:67 (<pre style='background:#f5f5f5'>) */
[data-theme="dark"] :where(code, pre, kbd, samp):where([style*="background: #f"], [style*="background:#f"], [style*="background-color: #f"], [style*="background-color:#f"], [style*="background: white"], [style*="background:white"]){
	background: var(--thmSubtleBg) !important;
	color: var(--thmText);
}

/* Unfilled input buttons (<input type=button|submit|reset>, e.g. a bare `.formBtn` / `.formBtn.inRow`, main.css:224 sets
   no fill): the UA ButtonFace turns mid-grey #6b6b6b under color-scheme:dark and reads as disabled. Give them the
   neutral-button fill. Fully zero specificity (0,0,0), so every author rule (.formBtn.green / .red / .primary,
   .gray, element+attribute rules, PTB's dark input rule) still wins. */
:where([data-theme="dark"]) :where(input[type="button"], input[type="submit"], input[type="reset"]){
	background-color: var(--thmMutedBg);
	color: var(--thmText);
	border-color: var(--thmBorder);
}
:where([data-theme="dark"]) :where(input[type="button"], input[type="submit"], input[type="reset"]):where(:hover:not(:disabled)){
	background-color: var(--thmStrongBg);
}
:where([data-theme="dark"]) :where(input[type="button"], input[type="submit"], input[type="reset"]):where(:disabled){
	color: var(--thmTextFaint);
}
/* ---- jQuery UI theme (vendored css/jquery-ui.css, v1.13.2): dark-only overrides ---- */
/* Containers: widget body, header band, shadows */
[data-theme="dark"] .ui-widget-content {border-color: var(--thmBorder); background: var(--thmCardBg); color: var(--thmText);}
[data-theme="dark"] .ui-widget-content a,
[data-theme="dark"] .ui-widget-header a {color: var(--thmText);}
[data-theme="dark"] .ui-widget-header {border-color: var(--thmBorder); background: var(--thmSubtleBg); color: var(--thmText);}
[data-theme="dark"] .ui-widget-shadow {-webkit-box-shadow: 0 0 5px var(--thmShadow); box-shadow: 0 0 5px var(--thmShadow);}
/* Interaction states: default, hover / focus, active */
[data-theme="dark"] .ui-state-default,
[data-theme="dark"] .ui-button,
[data-theme="dark"] .ui-button.ui-state-disabled:hover,
[data-theme="dark"] .ui-button.ui-state-disabled:active {border-color: var(--thmBorder); background: var(--thmMutedBg); color: var(--thmText);}
[data-theme="dark"] .ui-state-default a,
[data-theme="dark"] .ui-state-default a:link,
[data-theme="dark"] .ui-state-default a:visited,
[data-theme="dark"] a.ui-button,
[data-theme="dark"] a:link.ui-button,
[data-theme="dark"] a:visited.ui-button {color: var(--thmText);}
[data-theme="dark"] .ui-state-hover,
[data-theme="dark"] .ui-state-focus,
[data-theme="dark"] .ui-button:hover,
[data-theme="dark"] .ui-button:focus {border-color: var(--thmBorderStrong); background: var(--thmHoverBg); color: var(--thmText);}
[data-theme="dark"] .ui-state-hover a,
[data-theme="dark"] .ui-state-hover a:hover,
[data-theme="dark"] .ui-state-hover a:link,
[data-theme="dark"] .ui-state-hover a:visited,
[data-theme="dark"] .ui-state-focus a,
[data-theme="dark"] .ui-state-focus a:hover,
[data-theme="dark"] .ui-state-focus a:link,
[data-theme="dark"] .ui-state-focus a:visited,
[data-theme="dark"] a.ui-button:hover,
[data-theme="dark"] a.ui-button:focus {color: var(--thmText);}
[data-theme="dark"] .ui-state-active,
[data-theme="dark"] a.ui-button:active,
[data-theme="dark"] .ui-button:active,
[data-theme="dark"] .ui-button.ui-state-active:hover {border-color: var(--primary); background: var(--primary); color: #fff;}
[data-theme="dark"] .ui-state-active a,
[data-theme="dark"] .ui-state-active a:link,
[data-theme="dark"] .ui-state-active a:visited {color: #fff;}
/* Interaction cues: highlight / checked, error */
[data-theme="dark"] .ui-state-highlight,
[data-theme="dark"] .ui-state-checked {border-color: var(--thmBorderAmber); background: var(--thmTintYellow); color: var(--thmTextAmber);}
[data-theme="dark"] .ui-state-highlight a {color: var(--thmTextAmber);}
[data-theme="dark"] .ui-state-error {border-color: var(--thmBorderRed); background: var(--thmTintRed); color: var(--thmTextRed);}
[data-theme="dark"] .ui-state-error a,
[data-theme="dark"] .ui-state-error-text {color: var(--thmTextRed);}
/* Sprite icons: the grey sprites are dark PNGs, invert them; keep the white (active) sprite, lift the coloured ones */
[data-theme="dark"] .ui-icon {filter: invert(.85);}
[data-theme="dark"] .ui-state-active .ui-icon,
[data-theme="dark"] .ui-button:active .ui-icon {filter: none;}
[data-theme="dark"] .ui-state-highlight .ui-icon,
[data-theme="dark"] .ui-state-error .ui-icon,
[data-theme="dark"] .ui-state-error-text .ui-icon {filter: brightness(1.8);}
/* Datepicker: surface, header band, weekday row */
[data-theme="dark"] .ui-datepicker {border: 1px solid var(--thmBorder); background: var(--thmCardBg); color: var(--thmText); box-shadow: 0 6px 18px var(--thmShadow);}
[data-theme="dark"] .ui-datepicker .ui-datepicker-header {border-color: var(--thmBorder); background: var(--thmSubtleBg); color: var(--thmText);}
[data-theme="dark"] .ui-datepicker th {color: var(--thmText2);}
[data-theme="dark"] .ui-datepicker .ui-datepicker-week-col {color: var(--thmTextMuted);}
/* Datepicker: prev / next arrows drawn as CSS triangles (sprite hidden, works even when the PNG 404s) */
[data-theme="dark"] .ui-datepicker .ui-datepicker-prev,
[data-theme="dark"] .ui-datepicker .ui-datepicker-next {cursor: pointer; border: 1px solid transparent; background: transparent;}
[data-theme="dark"] .ui-datepicker .ui-datepicker-prev.ui-state-hover,
[data-theme="dark"] .ui-datepicker .ui-datepicker-next.ui-state-hover {border-color: var(--thmBorder); background: var(--thmHoverBg);}
[data-theme="dark"] .ui-datepicker .ui-datepicker-prev span,
[data-theme="dark"] .ui-datepicker .ui-datepicker-next span {width: 0; height: 0; margin-top: -6px; background-image: none; filter: none; border-style: solid; border-color: transparent;}
[data-theme="dark"] .ui-datepicker .ui-datepicker-prev span {margin-left: -5px; border-width: 6px 8px 6px 0; border-right-color: var(--thmText2);}
[data-theme="dark"] .ui-datepicker .ui-datepicker-next span {margin-left: -3px; border-width: 6px 0 6px 8px; border-left-color: var(--thmText2);}
[data-theme="dark"] .ui-datepicker .ui-datepicker-prev.ui-state-hover span {border-right-color: var(--thmText);}
[data-theme="dark"] .ui-datepicker .ui-datepicker-next.ui-state-hover span {border-left-color: var(--thmText);}
/* Datepicker: month / year selects themed like inputs */
[data-theme="dark"] .ui-datepicker select.ui-datepicker-month,
[data-theme="dark"] .ui-datepicker select.ui-datepicker-year {background-color: var(--thmInputBg); color: var(--thmText); border: 1px solid var(--thmBorder); color-scheme: dark;}
/* Datepicker: day cells (order matters: default, today, hover, selected) */
[data-theme="dark"] .ui-datepicker td .ui-state-default {border-color: var(--thmBorder); background: var(--thmMutedBg); color: var(--thmText);}
[data-theme="dark"] .ui-datepicker td .ui-state-highlight {border-color: var(--thmBorderAmber); background: var(--thmTintYellow); color: var(--thmTextAmber);}
[data-theme="dark"] .ui-datepicker td .ui-state-hover {border-color: var(--thmBorderStrong); background: var(--thmHoverBg); color: var(--thmText);}
[data-theme="dark"] .ui-datepicker td .ui-state-active {border-color: var(--primary); background: var(--primary); color: #fff;}
/* Datepicker: other-month and disabled days (faint ink instead of a 35% fade that vanishes on dark) */
[data-theme="dark"] .ui-datepicker td.ui-datepicker-other-month .ui-state-default {border-color: var(--thmBorderLight); background: var(--thmSubtleBg); color: var(--thmTextFaint);}
[data-theme="dark"] .ui-datepicker td.ui-state-disabled {opacity: 1;}
[data-theme="dark"] .ui-datepicker td.ui-state-disabled .ui-state-default {border-color: var(--thmBorderLight); background: var(--thmSubtleBg); color: var(--thmTextFaint);}
/* Datepicker: button pane (Today / Done) */
[data-theme="dark"] .ui-datepicker .ui-datepicker-buttonpane {border-color: var(--thmBorder);}
/* Menu / autocomplete: raised list, focused item uses the hover fill */
[data-theme="dark"] .ui-menu {box-shadow: 0 6px 18px var(--thmShadow);}
[data-theme="dark"] .ui-menu .ui-menu-divider {border-color: var(--thmBorderLight);}
[data-theme="dark"] .ui-menu .ui-state-focus,
[data-theme="dark"] .ui-menu .ui-state-active {border-color: var(--thmBorder); background: var(--thmHoverBg); color: var(--thmText);}
/* Tooltip */
[data-theme="dark"] .ui-tooltip {border-color: var(--thmBorder); background: var(--thmCardBg); color: var(--thmText); box-shadow: 0 0 5px var(--thmShadow);}
/* Dialog: raised shell, header band from .ui-widget-header, content stays transparent on the shell */
[data-theme="dark"] .ui-dialog {box-shadow: 0 10px 30px var(--thmShadow);}
[data-theme="dark"] .ui-dialog .ui-dialog-buttonpane {border-color: var(--thmBorder);}
/* Overlay: keep the vendored near-zero opacity, swap the grey for the dark veil */
[data-theme="dark"] .ui-widget-overlay {background: var(--thmScrim);}