/* ============================================================
   SKF Backoffice — Shared Controls Styling
   ============================================================
   Single source of truth for the filter/control bar that sits
   above every SKF backoffice table (overview, stock-map,
   positions, products, receipts, shipments).

   Load on every skf-*.html page that uses .skf-controls so the
   Active/Archived <select>, search <input>, "+ New" button, and
   the SkfExport.mount() trigger all share one look. Per-page
   <style> blocks must NOT redefine these selectors — that's how
   the inconsistency crept in originally.

   Canonical look pulled from the original skf-products.html
   spec (referenced by the user as the "active products" style).
   ============================================================ */

/* Control bar layout */
.skf-controls {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: center;
}

/* Inputs, native <select>, and the custom SkfExport trigger all
   share the same pill shape so the row reads as one toolbar. */
.skf-controls input,
.skf-controls select,
.skf-controls .skf-export-trigger {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary, #1e293b);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
}
.skf-controls input { cursor: text; }
.skf-controls input { min-width: 240px; }

/* Buttons — secondary by default (ghost), .primary for the
   accent-orange call-to-action (New, Apply, etc). */
.skf-controls .btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
}
.skf-controls .btn:hover {
    border-color: var(--accent-orange, #f97316);
    color: var(--accent-orange, #f97316);
}
.skf-controls .btn.primary {
    background: var(--accent-orange, #f97316);
    color: #fff;
    border-color: var(--accent-orange, #f97316);
}
.skf-controls .btn.primary:hover {
    background: #ea580c;
    border-color: #ea580c;
    color: #fff;
}

/* ============================================================
   SKF Sub-nav (pill group) — SINGLE SOURCE OF TRUTH
   ============================================================
   Used on every skf-*.html backoffice page (overview, stock-
   map, positions, products, receipts, shipments, dispatch).
   Active item uses the SAME marine navy gradient as the top
   navbar so the active section reads as "you are here". Uses
   high specificity + !important to win over the per-page
   inline styles that drift apart between pages.
   ============================================================ */
nav.skf-subnav,
.skf-page-wrap .skf-subnav,
div .skf-subnav {
    display: flex !important;
    gap: 2px !important;
    align-items: center !important;
    padding: 4px !important;
    background: var(--bg-secondary, #1e293b) !important;
    border: 1px solid var(--border-color, #334155) !important;
    border-radius: 10px !important;
    margin-bottom: 1.25rem !important;
    flex-wrap: wrap !important;
}
.skf-subnav a {
    padding: 7px 14px !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: var(--text-muted, #94a3b8) !important;
    text-decoration: none !important;
    border: 0 !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.skf-subnav a:hover:not(.active) {
    color: var(--text-primary) !important;
    background: rgba(148, 163, 184, 0.08) !important;
}
/* Active = top-navbar marine navy + WHITE text. This is the
   "same blue as the top bar menu" the spec asks for. */
.skf-subnav a.active {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(22, 33, 62, 0.30) !important;
    border-color: transparent !important;
}
/* Customer-portal external link — sits on the far right of the
   subnav. Solid cyan gradient + white text so it stands out as the
   primary "go to portal" CTA, with a subtle glow for affordance. */
.skf-subnav .skf-portal-link {
    margin-left: auto !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.30) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease !important;
}
.skf-subnav .skf-portal-link:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.45) !important;
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
}
.skf-subnav .skf-portal-link:active { transform: scale(0.97) !important; }

/* === Light theme: subnav stays card-white with marine active === */
[data-theme="light"] .skf-subnav {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(22, 33, 62, 0.04) !important;
}
[data-theme="light"] .skf-subnav a { color: #64748b !important; }
[data-theme="light"] .skf-subnav a:hover:not(.active) {
    color: #16213e !important;
    background: rgba(22, 33, 62, 0.06) !important;
}
[data-theme="light"] .skf-subnav a.active {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(22, 33, 62, 0.25) !important;
}
[data-theme="light"] .skf-subnav .skf-portal-link {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.30) !important;
}
[data-theme="light"] .skf-subnav .skf-portal-link:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.45) !important;
}

/* ============================================================
   LIGHT THEME — comprehensive audit of every SKF backoffice
   pattern that was rendering dark-on-dark (invisible) when the
   user flipped to the white theme.
   ============================================================ */
[data-theme="light"] body { background: #eef2f7; color: #0f172a; }
[data-theme="light"] .skf-page-wrap,
[data-theme="light"] .skf-page,
[data-theme="light"] .dt-page { color: #0f172a; }
[data-theme="light"] .skf-page-title,
[data-theme="light"] .skf-title,
[data-theme="light"] .skf-title small,
[data-theme="light"] .dt-title { color: #0f172a !important; }
[data-theme="light"] .skf-counter { color: #64748b !important; }

/* Filter bar inputs/selects/buttons */
[data-theme="light"] .skf-controls input,
[data-theme="light"] .skf-controls select,
[data-theme="light"] .skf-controls .skf-export-trigger {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
[data-theme="light"] .skf-controls input::placeholder { color: #94a3b8; }
[data-theme="light"] .skf-controls input:focus,
[data-theme="light"] .skf-controls select:focus {
    border-color: #16213e !important;
    box-shadow: 0 0 0 3px rgba(22, 33, 62, 0.15) !important;
    outline: none;
}
[data-theme="light"] .skf-controls .btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
[data-theme="light"] .skf-controls .btn:hover {
    border-color: #f97316 !important;
    color: #f97316 !important;
    background: rgba(249, 115, 22, 0.06) !important;
}
[data-theme="light"] .skf-controls .btn.primary {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}
[data-theme="light"] .skf-controls .btn.primary:hover {
    background: #ea580c !important;
    border-color: #ea580c !important;
}

/* Generic ghost buttons / ctrl-btn anywhere on page */
[data-theme="light"] button.btn-secondary,
[data-theme="light"] .btn.secondary,
[data-theme="light"] .ctrl-btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
[data-theme="light"] .ctrl-btn:hover {
    background: rgba(22, 33, 62, 0.06) !important;
    border-color: #16213e !important;
}

/* Generic tables */
[data-theme="light"] .skf-table,
[data-theme="light"] .pos-table-wrap,
[data-theme="light"] table.skf-list {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(22, 33, 62, 0.04);
}
[data-theme="light"] .skf-table th,
[data-theme="light"] table.skf-list th {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] .skf-table td,
[data-theme="light"] table.skf-list td {
    color: #0f172a !important;
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] .skf-table tbody tr:hover,
[data-theme="light"] table.skf-list tbody tr:hover {
    background: rgba(22, 33, 62, 0.05) !important;
}

/* Modals used by edit/add forms across SKF pages */
[data-theme="light"] .modal-mask { background: rgba(22, 33, 62, 0.45) !important; }
[data-theme="light"] .modal-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 20px 40px rgba(22, 33, 62, 0.20);
}
[data-theme="light"] .modal-card h3 { color: #0f172a !important; }
[data-theme="light"] .modal-row label { color: #64748b !important; }
[data-theme="light"] .modal-row input,
[data-theme="light"] .modal-row select,
[data-theme="light"] .modal-row textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] .modal-row input:focus,
[data-theme="light"] .modal-row select:focus,
[data-theme="light"] .modal-row textarea:focus {
    border-color: #16213e !important;
    box-shadow: 0 0 0 3px rgba(22, 33, 62, 0.15) !important;
    outline: none;
}
[data-theme="light"] .modal-actions .cancel {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] .modal-actions .save {
    background: #f97316 !important;
    color: #ffffff !important;
    border-color: #f97316 !important;
}
[data-theme="light"] .modal-actions .danger {
    background: #ffffff !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}
[data-theme="light"] .modal-actions .danger:hover { background: #fee2e2 !important; }

/* Empty states */
[data-theme="light"] .skf-empty,
[data-theme="light"] .empty-state,
[data-theme="light"] .pos-empty,
[data-theme="light"] .pos-table-empty { color: #64748b !important; }

/* Status badges */
[data-theme="light"] .skf-badge.in { background: #dcfce7 !important; color: #166534 !important; }
[data-theme="light"] .skf-badge.out { background: #fee2e2 !important; color: #991b1b !important; }
[data-theme="light"] .skf-badge.muted { background: #e2e8f0 !important; color: #475569 !important; }
[data-theme="light"] .skf-badge.warn { background: #fef3c7 !important; color: #92400e !important; }
[data-theme="light"] .skf-badge.placed { background: #dbeafe !important; color: #1e40af !important; }
[data-theme="light"] .skf-badge.picking { background: #fef3c7 !important; color: #b45309 !important; }
[data-theme="light"] .skf-badge.packing { background: #fed7aa !important; color: #9a3412 !important; }
[data-theme="light"] .skf-badge.ready { background: #dcfce7 !important; color: #166534 !important; }
[data-theme="light"] .skf-badge.dispatched { background: #e2e8f0 !important; color: #475569 !important; }
[data-theme="light"] .skf-badge.cancelled { background: #fee2e2 !important; color: #991b1b !important; }

/* KPI strips/pills */
[data-theme="light"] .kpi-pill,
[data-theme="light"] .skf-kpi {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(22, 33, 62, 0.04);
}
[data-theme="light"] .kpi-pill .l,
[data-theme="light"] .skf-kpi-label { color: #64748b !important; }
[data-theme="light"] .kpi-pill .v,
[data-theme="light"] .skf-kpi-value { color: #16213e !important; }
[data-theme="light"] .skf-kpi-value.split .week { color: #16213e !important; }
[data-theme="light"] .skf-kpi-value.split .month { color: #94a3b8 !important; }
[data-theme="light"] .skf-kpi-sub { color: #94a3b8 !important; }

/* Overview panels */
[data-theme="light"] .skf-panel {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(22, 33, 62, 0.04);
}
[data-theme="light"] .skf-panel-header {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] .skf-panel-header h3 { color: #0f172a !important; }
[data-theme="light"] .skf-panel-header .panel-link { color: #0a5989 !important; }
[data-theme="light"] .skf-panel-header .panel-link:hover { background: rgba(10, 89, 137, 0.12) !important; }

/* Stock-map rack cards / mini cells / dividers */
[data-theme="light"] .wh-divider:hover { background: rgba(22, 33, 62, 0.06) !important; }
[data-theme="light"] .wh-divider::after { background: #cbd5e1 !important; }
[data-theme="light"] .wh-chevron { color: #64748b !important; }
[data-theme="light"] .wh-divider.expanded .wh-chevron { color: #16213e !important; }
[data-theme="light"] .wh-name,
[data-theme="light"] .wh-count,
[data-theme="light"] .hint-line { color: #64748b !important; }
[data-theme="light"] .rack-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(22, 33, 62, 0.04);
}
[data-theme="light"] .rack-card:hover {
    border-color: #16213e !important;
    box-shadow: 0 8px 18px rgba(22, 33, 62, 0.12) !important;
}
[data-theme="light"] .rack-card-head { border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] .rack-card-id { color: #0f172a !important; }
[data-theme="light"] .rack-card-meta { color: #64748b !important; }
[data-theme="light"] .rack-card-meta b { color: #0f172a !important; }
[data-theme="light"] .level-axis-cell {
    background: #f1f5f9 !important;
    color: #64748b !important;
}
[data-theme="light"] .mini-cell .pos-chip { color: rgba(0, 0, 0, 0.55) !important; }
[data-theme="light"] .mini-cell.empty { background: #f1f5f9 !important; }
[data-theme="light"] .mini-cell.empty .pos-chip { color: #94a3b8 !important; }
[data-theme="light"] .mini-cell:hover {
    outline-color: #16213e !important;
    box-shadow: 0 6px 14px rgba(22, 33, 62, 0.18) !important;
}
[data-theme="light"] .floor-cell {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .floor-cell .code { color: rgba(0, 0, 0, 0.65) !important; }

/* Stock-map tooltip + drill-in modal */
[data-theme="light"] .skf-tooltip {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-color: #16213e !important;
    color: #0f172a !important;
    box-shadow: 0 12px 28px rgba(22, 33, 62, 0.20) !important;
}
[data-theme="light"] .skf-tooltip .t-code { color: #16213e !important; }
[data-theme="light"] .skf-tooltip .t-meta { color: #64748b !important; border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] .skf-tooltip .t-sku { color: #0f172a !important; }
[data-theme="light"] .skf-tooltip .t-qty { color: #d97706 !important; }
[data-theme="light"] .skf-tooltip .t-total { color: #64748b !important; border-top-color: #e2e8f0 !important; }
[data-theme="light"] .skf-tooltip .t-total b { color: #d97706 !important; }

/* Positions page row cards (.pos-trow) — preserve the kind-coded
   LEFT border (cyan for shelf, orange for floor, gray for inactive)
   so each row stays visually categorised; only the other three sides
   go neutral. The first audit pass swallowed all four sides into
   #e2e8f0 which killed the colour cues. */
[data-theme="light"] .pos-trow {
    background: #ffffff !important;
    border-top-color: #e2e8f0 !important;
    border-right-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
    color: #0f172a !important;
}
/* Explicit per-kind left-border colour so the rule wins in light theme */
[data-theme="light"] .pos-trow { border-left-color: #06b6d4 !important; }      /* shelf default */
[data-theme="light"] .pos-trow.kind-shelf { border-left-color: #06b6d4 !important; }
[data-theme="light"] .pos-trow.kind-floor { border-left-color: #f97316 !important; }
[data-theme="light"] .pos-trow.inactive {
    border-left-color: #94a3b8 !important;
    background: #f8fafc !important;
    opacity: 0.85;
}
[data-theme="light"] .pos-trow:hover {
    box-shadow: 0 4px 12px rgba(22, 33, 62, 0.08) !important;
    border-top-color: rgba(22, 33, 62, 0.22) !important;
    border-right-color: rgba(22, 33, 62, 0.22) !important;
    border-bottom-color: rgba(22, 33, 62, 0.22) !important;
    /* keep coloured left border on hover */
}
[data-theme="light"] .pos-trow.selected {
    background: #f0f9ff !important;
    border-color: #38bdf8 !important;
    box-shadow: inset 3px 0 0 #0284c7 !important;
}
[data-theme="light"] .pos-trow .t-code { color: #0f172a !important; }
[data-theme="light"] .pos-trow .meta-pair .lbl { color: #64748b !important; }
[data-theme="light"] .pos-trow .meta-pair .val { color: #0f172a !important; }
[data-theme="light"] .pos-trow .meta-pair.weight .val { color: #ea580c !important; }
[data-theme="light"] .pos-trow .meta-pair.weight.over .val { color: #dc2626 !important; }
[data-theme="light"] .pos-trow-status.on { background: #dcfce7 !important; color: #166534 !important; }
[data-theme="light"] .pos-trow-status.off { background: #e2e8f0 !important; color: #475569 !important; }
[data-theme="light"] .pos-trow .t-kind.shelf { background: #dbeafe !important; color: #1e40af !important; }
[data-theme="light"] .pos-trow .t-kind.floor { background: #fed7aa !important; color: #9a3412 !important; }
[data-theme="light"] .pos-table-wrap {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

/* Positions bulk-action toolbar (sticky bar above list) */
[data-theme="light"] .bulk-bar {
    background: linear-gradient(180deg, #1e3a5f, #16213e) !important;
    color: #ffffff !important;
    border-color: #16213e !important;
    box-shadow: 0 4px 12px rgba(22, 33, 62, 0.30) !important;
}

/* Dispatch tray cards */
[data-theme="light"] .dt-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(22, 33, 62, 0.04);
    color: #0f172a !important;
}
[data-theme="light"] .dt-card-code { color: #0f172a !important; }
[data-theme="light"] .dt-card-cust { color: #64748b !important; }
[data-theme="light"] .dt-card-pkgs { background: #f8fafc !important; }
[data-theme="light"] .dt-card-pkgs-row .l { color: #64748b !important; }
[data-theme="light"] .dt-card-pkgs-row .r { color: #0f172a !important; }
[data-theme="light"] .dt-card-status { background: #fef3c7 !important; color: #b45309 !important; }

/* Dispatch modal */
[data-theme="light"] .dt-modal-mask { background: rgba(22, 33, 62, 0.45) !important; }
[data-theme="light"] .dt-modal {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 20px 40px rgba(22, 33, 62, 0.20) !important;
}
[data-theme="light"] .dt-modal h3 { color: #0f172a !important; }
[data-theme="light"] .dt-modal label { color: #64748b !important; }
[data-theme="light"] .dt-modal-sub { color: #64748b !important; border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] .dt-modal input[type="text"],
[data-theme="light"] .dt-modal textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] .dt-photo-input {
    color: #64748b !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] .dt-photo-input:hover { border-color: #f97316 !important; color: #0f172a !important; }
[data-theme="light"] .dt-modal-actions { border-top-color: #e2e8f0 !important; }
[data-theme="light"] .dt-modal-actions .cancel {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] .dt-modal-actions .confirm {
    background: #f97316 !important;
    color: #ffffff !important;
    border-color: #f97316 !important;
}