/*
 * Hedge brand theme for FileSender 3.3 — dark.
 * Loaded LAST via $config['site_css'] so it overrides the compiled Bootstrap (default.css),
 * the FileSender theme vars (themes/default.css) and new-ui/styles.css.
 *
 * FileSender 3.3's new UI is Bootstrap 5 + a thin --fs-* theme layer. So the rebrand is done
 * by (1) redefining the Bootstrap --bs-* palette and the --fs-* vars to Hedge colors, and
 * (2) overriding the handful of surfaces that hardcode the stock cream/white (most with
 * !important, so we match that). Brand ref: hedge.co — black bg, dark surface, white text,
 * signature mint accent #01fecd.
 */

:root {
    /* ---- Hedge palette ---- */
    --hedge-bg: #000000;
    --hedge-surface: #15151a;
    --hedge-surface-2: #1e1e23;
    --hedge-surface-3: #26262c;
    --hedge-border: #34343c;
    --hedge-text: #ffffff;
    --hedge-muted: #9ca3af;
    --hedge-accent: #01fecd;
    --hedge-accent-2: #00d9ad;
    /* State colors: ok/confirm -> green, destructive/cancel -> red.
       Mint stays the brand/primary action color. */
    --hedge-ok: #22c55e;
    --hedge-ok-hover: #16a34a;
    --hedge-danger: #ef4444;
    --hedge-danger-hover: #dc2626;

    /* ---- Override Bootstrap core vars (drives body, links, borders, components) ---- */
    --bs-body-bg: var(--hedge-bg) !important;
    --bs-body-bg-rgb: 0, 0, 0 !important;
    --bs-body-color: var(--hedge-text) !important;
    --bs-body-color-rgb: 255, 255, 255 !important;
    --bs-emphasis-color: #ffffff !important;
    --bs-emphasis-color-rgb: 255, 255, 255 !important;
    --bs-secondary-color: var(--hedge-muted) !important;
    --bs-secondary-bg: var(--hedge-surface-2) !important;
    --bs-tertiary-bg: var(--hedge-surface) !important;
    --bs-border-color: var(--hedge-border) !important;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12) !important;

    --bs-primary: var(--hedge-accent) !important;
    --bs-primary-rgb: 1, 254, 205 !important;
    --bs-link-color: var(--hedge-accent) !important;
    --bs-link-color-rgb: 1, 254, 205 !important;
    --bs-link-hover-color: var(--hedge-accent-2) !important;
    --bs-link-hover-color-rgb: 0, 217, 173 !important;

    /* ---- Override FileSender --fs-* theme vars ---- */
    --fs-bg-color: var(--hedge-bg) !important;
    --fs-bg-color-secondary: var(--hedge-surface) !important;
    --fs-bg-color-tertiary: var(--hedge-surface-2) !important;
    --fs-bg-color-quarternary: var(--hedge-surface-3) !important;
    --fs-bg-color-quinary: var(--hedge-border) !important;
    --fs-bg-light: var(--hedge-surface) !important;
    /* --fs-light is FileSender's button TEXT color (text on accent bg), not a surface.
       Set it to black so labels read on the mint button. */
    --fs-light: #000000 !important;
    --fs-border: var(--hedge-border) !important;
    --fs-text-color: var(--hedge-text) !important;
    --fs-accent: var(--hedge-accent) !important;
    --fs-primary: var(--hedge-accent) !important;
    --fs-btn: var(--hedge-accent) !important;
    --fs-btn-hover: var(--hedge-accent-2) !important;
    --fs-btn-active: var(--hedge-accent-2) !important;
    --fs-hover: var(--hedge-surface-3) !important;

    /* Stock theme has THREE highlight surfaces, all pale blue (#edf5ff / #adcdff).
       Overriding only --fs-hightlight-bg left the advanced-settings panel
       (.fs-collapse uses --fs-hightlight-bg-alternative) and the selected table
       row (--fs-hightlight-bg-secondary) bright blue with unreadable dark text. */
    --fs-hightlight-bg: var(--hedge-surface-2) !important;
    --fs-hightlight-bg-alternative: var(--hedge-surface-2) !important;
    --fs-hightlight-bg-secondary: var(--hedge-surface-3) !important;

    /* Stock semantic button colors are saturated mid blues/greens that clashed and
       were too bright on black. State model: info -> mint (neutral brand action),
       success -> green (OK/confirm), danger -> red (destructive/cancel),
       warning -> amber. All share the .fs-button shape; only the fill differs. */
    --fs-info: var(--hedge-accent) !important;
    --fs-info-hover: var(--hedge-accent-2) !important;
    --fs-info-active: var(--hedge-accent-2) !important;
    --fs-success: var(--hedge-ok) !important;
    --fs-success-hover: var(--hedge-ok-hover) !important;
    --fs-success-active: var(--hedge-ok-hover) !important;
    --fs-warning: #f5b301 !important;
    --fs-warning-hover: #d99e00 !important;
    --fs-warning-active: #b88600 !important;
    --fs-danger: var(--hedge-danger) !important;
    --fs-danger-hover: var(--hedge-danger-hover) !important;
    --fs-danger-active: #b91c1c !important;

    /* stock blue ramp -> neutral/mint so any raw --fs-blue-* usage stays dark */
    --fs-blue: var(--hedge-accent) !important;
    --fs-blue-100: var(--hedge-surface-2) !important;
    --fs-blue-200: var(--hedge-surface-3) !important;
    --fs-blue-300: var(--hedge-accent) !important;
}

html, body {
    background-color: var(--hedge-bg) !important;
    color: var(--hedge-text) !important;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---- Surfaces that hardcode the stock cream/white (most use !important) ---- */
.nav-link-coretop,
.navbar-bg,
.navbar-fixed-top .nav-item a.active,
.filesender-topcontent,
#wrap,
.mainbox,
.download_page, .box, .core-tabbed, .core,
.card {
    background-color: var(--hedge-surface) !important;
    color: var(--hedge-text) !important;
    border-color: var(--hedge-border) !important;
}

/* Top nav / header bar -> black, drop the banner image */
.navbar-bg,
#header, #headeruid {
    background: var(--hedge-bg) none !important;
    border-bottom: 1px solid var(--hedge-border) !important;
}

/* Footer */
.fs-footer-container,
.fs-footer-container__brand {
    background-color: var(--hedge-bg) !important;
    color: var(--hedge-muted) !important;
    border-top: 1px solid var(--hedge-border) !important;
}

/* ---- Logo ---- */
#logo, img#logo {
    height: 58px !important;
    width: auto !important;
    max-height: 58px !important;
}
/* header bar must grow to fit the larger logo */
header { height: auto !important; min-height: 80px !important; }
header nav img { max-height: 58px !important; }
.site_name { color: var(--hedge-text) !important; font-weight: 600; }
.site_baseline { color: var(--hedge-muted) !important; }

/* ---- Cards / panels / modals ---- */
.card, .modal-content, .dropdown-menu, .list-group-item, .accordion-item {
    background-color: var(--hedge-surface) !important;
    color: var(--hedge-text) !important;
    border-color: var(--hedge-border) !important;
}
/* ---- Modals ---- */
.modal-header, .modal-footer {
    border-color: var(--hedge-border) !important;
    background-color: #333 !important;
    color: #fff !important;
}

.modal-body {
    background-color: #222 !important;
    color: #e0e0e0 !important;
}

/* ---- Primary buttons -> mint, black text ---- */
.btn-primary,
.btn-info,
a.btn-primary,
button.ui-button.primary,
.ui-dialog .ui-dialog-buttonpane button {
    background-color: var(--hedge-accent) !important;
    border-color: var(--hedge-accent) !important;
    color: #000 !important;
    font-weight: 600 !important;
}
.btn-primary:hover, .btn-info:hover,
a.btn-primary:hover,
.ui-dialog .ui-dialog-buttonpane button:hover {
    background-color: var(--hedge-accent-2) !important;
    border-color: var(--hedge-accent-2) !important;
    color: #000 !important;
}
/* .fs-button label/icon must be black on the mint fill (default).
   Per-state label colors are set in the fs-button label block below. */
.fs-button, .fs-button i, .fs-button span {
    color: #000 !important;
}
/* Bootbox dialog buttons: accept -> green fill, cancel -> red fill */
.bootbox-accept,
.modal-footer .btn-primary {
    background-color: var(--hedge-ok) !important;
    border-color: var(--hedge-ok) !important;
    color: #fff !important;
}
.bootbox-accept:hover,
.modal-footer .btn-primary:hover {
    background-color: var(--hedge-ok-hover) !important;
    border-color: var(--hedge-ok-hover) !important;
}
.bootbox-cancel,
.modal-footer .btn-secondary,
.modal-footer .btn-default {
    background-color: var(--hedge-danger) !important;
    border-color: var(--hedge-danger) !important;
    color: #fff !important;
}
.bootbox-cancel:hover,
.modal-footer .btn-secondary:hover {
    background-color: var(--hedge-danger-hover) !important;
    border-color: var(--hedge-danger-hover) !important;
}
.btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--hedge-border) !important;
    color: var(--hedge-text) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--hedge-surface-3) !important;
    color: var(--hedge-text) !important;
}

/* ---- Links ---- */
a, a:link, a:visited, .fs-link { color: var(--hedge-accent) !important; }
a:hover, a:active, .fs-link:hover { color: var(--hedge-accent-2) !important; }

/* ---- Forms ---- */
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"],
input[type="date"], textarea, select {
    background-color: var(--hedge-surface-2) !important;
    color: var(--hedge-text) !important;
    border: 1px solid var(--hedge-border) !important;
}
.form-control:focus, .form-select:focus,
input:focus, textarea:focus, select:focus {
    background-color: var(--hedge-surface-2) !important;
    color: var(--hedge-text) !important;
    border-color: var(--hedge-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 254, 205, 0.25) !important;
}
::placeholder { color: var(--hedge-muted) !important; opacity: 1; }
label, .form-label { color: var(--hedge-text) !important; }

/* ---- Tables ---- */
.table, table.list {
    --bs-table-bg: var(--hedge-surface) !important;
    --bs-table-color: var(--hedge-text) !important;
    --bs-table-border-color: var(--hedge-border) !important;
    color: var(--hedge-text) !important;
}

table.list thead tr, table.list .subheader tr,
.table > thead {
    background-color: var(--hedge-surface-3) !important;
    color: var(--hedge-text) !important;
}

table.list tbody td, .table td, .table th {
    border-color: var(--hedge-border) !important;
}

/* WCAG 2.1 AA: 7:1 contrast for striped rows */
.table-striped tbody tr:nth-child(odd) {
    background-color: #2a2a2a !important;
}

/* WCAG 2.1 AA: 7:1 contrast for hover effects */
.table-hover tbody tr:hover {
    background-color: #3a3a3a !important;
}

/* WCAG 2.1 AA: 4.5:1 contrast for disabled inputs */
input:disabled,
textarea:disabled {
    background-color: #444 !important;
    color: #aaa !important;
}

/* ---- Admin Tables ---- */
/* Base admin table styles */
table.list,
table.results,
table.client-logs {
    background-color: #222 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* Table headers */
table.list th,
table.results th,
table.client-logs th {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* Table rows (striped) */
table.list tbody tr:nth-child(odd),
table.results tbody tr:nth-child(odd),
table.client-logs tbody tr:nth-child(odd) {
    background-color: #2a2a2a !important;
}

/* Table rows (hover) */
table.list tbody tr:hover,
table.results tbody tr:hover,
table.client-logs tbody tr:hover {
    background-color: #3a3a3a !important;
}

/* Table cells */
table.list td,
table.results td,
table.client-logs td {
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

/* ---- Admin Tabs ---- */
/* Fix whitish background behind tabs */
.nav-tabs,
.tab-content {
    background-color: #222 !important;
}

.nav-tabs .nav-link {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

.nav-tabs .nav-link.active {
    background-color: #222 !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* ---- Pagination Buttons ---- */
/* Fix white-on-green contrast (WCAG 2.1 AA) */
.paginator .btn-success {
    background-color: #22c55e !important;
    color: #000 !important;
    border-color: #22c55e !important;
}

.paginator .btn-success:hover {
    background-color: #16a34a !important;
    color: #000 !important;
    border-color: #16a34a !important;
}

/* ---- Admin Navigation Tabs ---- */
.admin-page .nav-item,
.admin-page .nav-link {
    background-color: #222 !important;
    color: #e0e0e0 !important;
}

.admin-page .nav-link.active {
    background-color: #333 !important;
    color: #fff !important;
}

.admin-page .nav-link:hover {
    background-color: #3a3a3a !important;
    color: #fff !important;
}

/* ---- Alerts / messages (keep semantic hue, dark fill) ---- */
.alert, .warning, .adminaction, .must_login_message {
    background-color: var(--hedge-surface-2) !important;
    color: var(--hedge-text) !important;
    border-color: var(--hedge-border) !important;
}

/* Muted helper text */
.text-muted, .desc, .info, small, .hint { color: var(--hedge-muted) !important; }

/* ---- Hide upstream "FileSender Silver and Gold contributors" sponsor banner ----
   BSD-3 requires retaining the copyright notice in source/LICENSE only (kept intact);
   it does NOT require displaying the sponsor logos in the rendered UI. Remove for Hedge. */
.fs-footer-container { display: none !important; }
footer { background: var(--hedge-bg) !important; border-top: none !important; }

/* ---- Graphs (Chart.js) ---- */
.chartjs-legend {
    color: #e0e0e0 !important;
}

.chartjs-tooltip {
    background: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}

.chartjs-text {
    fill: #e0e0e0 !important;
}

.chartjs-grid {
    stroke: #333 !important;
}

/* ============================================================
   New-UI (Bootstrap-less) component fixes — the bright-blue surfaces
   the --fs-* var overrides above don't fully reach.
   ============================================================ */

/* ---- Advanced settings panel (.fs-collapse) ----
   Stock: pale-blue bg + accent text. On Hedge the var retint makes the bg
   dark; force the body text white so every label/toggle row is readable. */
.fs-collapse,
.fs-collapse__content,
.advanced_options,
.hidden_options {
    background: var(--hedge-surface) !important;
    color: var(--hedge-text) !important;
    border: 1px solid var(--hedge-border) !important;
}
.fs-collapse *,
.advanced_options *,
.hidden_options * {
    color: var(--hedge-text) !important;
}
/* the collapse toggle header: white label/icon so it reads on the dark pill
   (mint accent was too dim on the dark surface -> unreadable).
   Stock gives it a mint accent border that no other button has -> force the
   neutral border so it matches the rest of the controls. */
.fs-collapse__header,
.toggle_advanced_options {
    background: var(--hedge-surface-2) !important;
    color: var(--hedge-text) !important;
    border: 1px solid var(--hedge-border) !important;
}
.fs-collapse__header *,
.toggle_advanced_options * { color: var(--hedge-text) !important; }

/* ---- Selected / highlighted table row ----
   Stock used --fs-hightlight-bg-secondary (#adcdff). Now dark surface, white text. */
table.list tr.selected,
table.list tr.selected td,
tr.selected, tr.selected td,
.fs-table tr.selected,
.fs-table tr.selected td,
tr[aria-selected="true"], tr[aria-selected="true"] td {
    background-color: var(--hedge-surface-3) !important;
    color: var(--hedge-text) !important;
}
table.list tr.selected a,
tr.selected a { color: var(--hedge-accent) !important; }

/* ---- fs-button labels: contrast text per fill color ----
   All buttons share the .fs-button shape (set by stock). We only set the fill
   (via --fs-* vars above) and the label/icon color for contrast:
     - mint fill  (default, --info)  -> black label
     - green fill (--success / OK)   -> white label
     - red fill   (--danger / cancel)-> white label
     - amber fill (--warning)        -> black label
   The mint-on-mint "invisible label" bug came from bare label text inheriting
   the accent color instead of the contrast color, so we target the children. */

/* mint fill -> black label (default + info) */
.fs-button,
.fs-button *,
a.fs-button,
.fs-button--info:not(.fs-button--transparent),
.fs-button--info:not(.fs-button--transparent) * {
    color: #000 !important;
}
/* green fill (OK/confirm) -> white label */
.fs-button--success:not(.fs-button--transparent),
.fs-button--success:not(.fs-button--transparent) *,
.bootbox-accept,
.bootbox-accept * {
    color: #fff !important;
}
/* red fill (destructive + cancel) -> white label */
.fs-button--danger:not(.fs-button--transparent),
.fs-button--danger:not(.fs-button--transparent) *,
.bootbox-cancel,
.bootbox-cancel * {
    color: #fff !important;
}
/* warning fill is light amber -> dark label for contrast */
.fs-button--warning:not(.fs-button--transparent),
.fs-button--warning:not(.fs-button--transparent) * { color: #000 !important; }

/* transparent buttons have no fill -> text is the semantic color, not the fill contrast */
.fs-button--transparent { color: var(--hedge-accent) !important; }
.fs-button--transparent * { color: inherit !important; }
.fs-button--transparent.fs-button--danger,
.fs-button--transparent.fs-button--danger * { color: var(--hedge-danger) !important; }
.fs-button--transparent.fs-button--info,
.fs-button--transparent.fs-button--info * { color: var(--hedge-accent) !important; }
.fs-button--transparent.fs-button--success,
.fs-button--transparent.fs-button--success * { color: var(--hedge-ok) !important; }

/* ---- Switch toggles (advanced panel) ----
   off-state track is hardcoded #fff in stock; darken so it reads on dark panel. */
.fs-switch .fs-switch__slider,
.fs-switch input:not(:checked) + .fs-switch__slider,
label.switch .slider {
    background-color: var(--hedge-surface-3) !important;
    border: 1px solid var(--hedge-border) !important;
}

/* ---- Catch any remaining pale-blue info/highlight callout boxes ---- */
.fs-info, .info-box, .fs-highlight, .highlight {
    background-color: var(--hedge-surface-2) !important;
    color: var(--hedge-text) !important;
    border-color: var(--hedge-border) !important;
}