/*
 * Portfolio Bridge CSS
 *
 * 1. CSS variables for the portfolio floating navbar.
 * 2. Tabler dark mode override — replaces the blue-ish Bootstrap gray palette
 *    with the portfolio's pure-black palette so both systems feel like one UI.
 */


/* ── 1. Navbar variables ────────────────────────────────────────────────────── */

:root {
    --panel:         rgba(25, 25, 25, 0.9);
    --panel-solid:   #181818;
    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text:          #f5f5f5;
    --text-muted:    #9a9a9a;
    --text-soft:     rgba(236, 231, 231, 0.82);
    --text-faint:    rgba(236, 231, 231, 0.34);
    --shadow:        0 24px 70px rgba(0, 0, 0, 0.38);
}

body.light-mode {
    --panel:         rgba(255, 255, 255, 0.88);
    --panel-solid:   #ffffff;
    --border:        #eeeeee;
    --border-strong: rgba(20, 20, 20, 0.16);
    --text:          #111111;
    --text-muted:    #888888;
    --text-soft:     rgba(18, 18, 18, 0.76);
    --text-faint:    rgba(18, 18, 18, 0.32);
    --shadow:        0 24px 70px rgba(24, 24, 24, 0.08);
}


/* ── 2. Tabler dark mode — portfolio black palette ──────────────────────────── */
/*
 * Tabler's default dark mode uses Bootstrap's blue-ish grays:
 *   gray-900 = #111827   gray-800 = #1f2937   gray-700 = #374151
 * We remap the darkest three to the portfolio's pure-black scale and override
 * all semantic surface/border variables that derive from them.
 *
 * This block is placed after tabler.css so the cascade wins without !important.
 */

[data-bs-theme=dark] {

    /* Gray palette — darkest shades remapped to portfolio blacks */
    --tblr-gray-900: #0f0f10;   /* portfolio --bg */
    --tblr-gray-800: #17181a;   /* portfolio --surface */
    --tblr-gray-700: #2a2c30;   /* portfolio --border */
    --tblr-gray-600: #3a3d42;   /* slightly lighter than border */

    /* Semantic surface variables */
    --tblr-body-bg:              #0f0f10;
    --tblr-bg-forms:             #0f0f10;
    --tblr-bg-surface:           #17181a;
    --tblr-bg-surface-primary:   #17181a;
    --tblr-bg-surface-secondary: #0f0f10;
    --tblr-bg-surface-tertiary:  #121315;

    /* Body text (grey-200 is fine but match portfolio exactly) */
    --tblr-body-color: #e8e8e8;

    /* Border variables */
    --tblr-border-color:             #2a2c30;
    --tblr-border-color-translucent: rgba(42, 44, 48, 0.5);
    --tblr-border-dark-color:        #2a2c30;
    --tblr-border-active-color:      #3a3d42;

    /* Dark-mode-specific border tokens Tabler uses for components */
    --tblr-dark-mode-border-color:             #2a2c30;
    --tblr-dark-mode-border-color-translucent: rgba(42, 44, 48, 0.2);
    --tblr-dark-mode-border-active-color:      #3a3d42;
    --tblr-dark-mode-border-dark-color:        #222428;

    /* Interactive / active state */
    --tblr-active-bg: rgba(42, 44, 48, 0.45);
}

/* Hard-coded class overrides that Tabler/Bootstrap set to a specific hex
   value instead of going through a variable — override class-level only. */
[data-bs-theme=dark] .dropdown-menu-dark {
    --tblr-dropdown-bg: #17181a;
}

[data-bs-theme=dark] .table-dark {
    --tblr-table-bg: #17181a;
}


/* ── 3. Hard-coded hex overrides (invoice-generator.css / lite.css) ─────────── */
/*
 * These files set background colors as literal hex values rather than CSS
 * variables, so the [data-bs-theme=dark] variable block above cannot reach
 * them.  We override each selector here with higher specificity.
 */

/* ── Invoice items table inputs (item name, qty, rate) — was #fff ── */
[data-bs-theme=dark] .invoice-items-table input {
    background: #17181a !important;
    color: #e8e8e8 !important;
    border-color: #2a2c30 !important;
}

/* Amount output cells — was #f4f7fa */
[data-bs-theme=dark] .invoice-items-table .amount-output {
    background: #121315 !important;
    color: #c9c9c9 !important;
}

/* ── Shipping field inputs/textareas — was #fff ── */
[data-bs-theme=dark] .shipping-field input,
[data-bs-theme=dark] .shipping-field textarea {
    background: #17181a !important;
    color: #e8e8e8 !important;
    border-color: #2a2c30 !important;
}

/* ── Shipping combobox trigger — was #fff ── */
[data-bs-theme=dark] .shipping-combobox-trigger {
    background: #17181a !important;
    color: #e8e8e8 !important;
    border-color: #2a2c30 !important;
}

/* Locked / disabled combobox trigger — was #f8fafc / #f3f6f9 */
[data-bs-theme=dark] .page--lite .shipping-combobox--locked .shipping-combobox-trigger,
[data-bs-theme=dark] .shipping-combobox-trigger[disabled] {
    background: #121315 !important;
    border-color: #2a2c30 !important;
    color: #9a9a9a !important;
}

/* Shipping combobox menu panel — was #fff */
[data-bs-theme=dark] .shipping-combobox-menu {
    background: #17181a !important;
    border-color: #2a2c30 !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45) !important;
}

/* Search input inside the menu — inherits but set explicitly */
[data-bs-theme=dark] .shipping-combobox-search {
    background: #0f0f10 !important;
    border-color: #2a2c30 !important;
    color: #e8e8e8 !important;
}

/* Base option — was #f4f7fa */
[data-bs-theme=dark] .shipping-combobox-option,
[data-bs-theme=dark] .shipping-combobox-empty {
    background: #17181a !important;
    color: #e8e8e8 !important;
}

/* Hover / selected (is-active) — was #dfe9f1 */
[data-bs-theme=dark] .shipping-combobox-option:hover,
[data-bs-theme=dark] .shipping-combobox-option:focus,
[data-bs-theme=dark] .shipping-combobox-option.is-active {
    background: #2a2c30 !important;
    color: #f0f0f0 !important;
}

/* Disabled option — was #f7f9fb */
[data-bs-theme=dark] .shipping-combobox-option.is-disabled {
    background: #17181a !important;
    color: #5a5d63 !important;
}

/* ── Courier / service option buttons — was #fff ── */
[data-bs-theme=dark] .inv-courier-btn,
[data-bs-theme=dark] .inv-shipping-option {
    background: #17181a !important;
    border-color: #2a2c30 !important;
    color: #e8e8e8 !important;
}

[data-bs-theme=dark] .inv-courier-btn.is-disabled {
    background: #121315 !important;
    border-color: #222428 !important;
}

/* ── Invoice panels — was #ffffff ── */
[data-bs-theme=dark] .invoice-panel,
[data-bs-theme=dark] .invoice-items-panel {
    background: #17181a !important;
    border-color: #2a2c30 !important;
}

/* Live summary (subtotal/grand total panel) — was #fff */
[data-bs-theme=dark] .invoice-live-summary {
    background: #17181a !important;
    border-color: #2a2c30 !important;
}

/* ── Readonly inputs (invoice meta + lite.css) ── */
[data-bs-theme=dark] .invoice-field input[readonly]:not(.flatpickr-input) {
    background: #121315 !important;
    color: #9a9a9a !important;
}

[data-bs-theme=dark] .page--lite input[readonly],
[data-bs-theme=dark] .page--lite textarea[readonly] {
    background: #121315 !important;
    color: #9a9a9a !important;
}

/* Shipping cost readonly input — was #f3f6f9 */
[data-bs-theme=dark] #shipping-cost-input[readonly] {
    background: #121315 !important;
    color: #9a9a9a !important;
}

/* Flatpickr readonly date input — was #fff */
[data-bs-theme=dark] .flatpickr-input[readonly] {
    background: #17181a !important;
    color: #e8e8e8 !important;
}

/* ── Footer preview frame — was blue gradient ── */
[data-bs-theme=dark] .footer-editor-preview__frame {
    background: #000000 !important;
    border-color: #2a2c30 !important;
}

/* Modal body preview area (invoice preview) — was #f1f5f9 */
[data-bs-theme=dark] #modal-invoice-preview .modal-body {
    background: #0f0f10 !important;
}