/* ============================================================
   PID ERP — Custom Overrides
   Edit this file to modify styles across the entire system.
   ============================================================ */

/* ── Scrollbar styling (Webkit browsers) ─────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }

/* ── Mobile: tables scroll sideways instead of being cut ── */
@media (max-width: 768px) {
    .main table, .page-wrap table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .main table td, .main table th,
    .page-wrap table td, .page-wrap table th {
        white-space: nowrap;
    }
}

/* ============================================================
   MOBILE UX IMPROVEMENTS
   Targets phones / small tablets (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ── 1. Touch targets — minimum 44×44px recommended by Apple/Google ── */
    .btn { min-height: 44px !important; padding: 0 16px !important; font-size: 14px !important; touch-action: manipulation; }
    .btn-sm { min-height: 38px !important; padding: 0 14px !important; font-size: 13px !important; }
    .btn-xs { min-height: 34px !important; padding: 0 10px !important; }

    /* ── 2. Inputs: 16px min prevents iOS auto-zoom on focus ── */
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    textarea { min-height: auto !important; }
    select { min-height: 44px !important; }

    /* ── 3. Page title & top bar ── */
    .page-title { font-size: 18px !important; }
    .top-bar { flex-wrap: wrap; gap: 10px; padding-bottom: 6px; }

    /* ── 4. Main content padding ── */
    .main, .page-wrap { padding: 14px !important; }

    /* ── 5. Summary / stat cards: 2-column grid ── */
    .summary { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .summary-card, .stat-card { padding: 14px !important; }
    .summary-card .sc-val, .stat-val { font-size: 20px !important; }

    /* ── 6. Kanban board: horizontal scroll with proper sizing ── */
    .board {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 20px !important;
        scroll-snap-type: x proximity;
    }
    .board-col {
        min-width: 260px !important;
        max-width: 290px !important;
        scroll-snap-align: start;
    }
    .board-card { padding: 12px 14px !important; }
    .c-name { font-size: 14px !important; line-height: 1.4 !important; }

    /* ── 7. Deal preview panel: vertical stack ── */
    .dp-body { flex-direction: column !important; max-height: none !important; }
    .dp-section {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,.07);
        overflow-y: visible !important;
        max-height: none !important;
    }
    .dp-panel { border-radius: 10px !important; }

    /* ── 8. Modals / dialogs: bottom-sheet style ── */
    #modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .modal-box, .modal-card, .modal-inner {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh !important;
        border-radius: 18px 18px 0 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
    }

    /* ── 9. Slide-in panels: full width ── */
    .panel {
        width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        transform: translateY(100%) !important;
    }
    .panel.open { transform: translateY(0) !important; }

    /* ── 10. Tabs: horizontal scroll ── */
    .tabs, .nav-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2px;
        gap: 2px;
    }
    .tab-btn, .nav-tab { white-space: nowrap !important; flex-shrink: 0 !important; }

    /* ── 11. 2-column grids → single column ── */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ── 12. Form grids → single column ── */
    .form-grid, .form-row, .grid-2, .grid-3 {
        grid-template-columns: 1fr !important;
    }

    /* ── 13. Deal view (deal_view.php): stack columns ── */
    .dv-body { flex-direction: column !important; }
    .dv-col {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    /* ── 14. Clock page: bigger clock-in button ── */
    #clockBtn, .clock-btn {
        min-height: 64px !important;
        font-size: 18px !important;
        border-radius: 14px !important;
        width: 100% !important;
    }

    /* ── 15. Tbl-card actions: stack vertically ── */
    .tbl-actions, .row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

    /* ── 16. Print template 2-col → 1-col ── */
    #tab-print [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #tab-calendar [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ── 17. cPanel-style table: allow wrapping ── */
    .tbl-card table td, .tbl-card table th { white-space: normal !important; }

    /* ── 18. Better spacing for table action buttons ── */
    table td .btn, table td .btn-sm { margin: 2px 0; }

    /* ── 19. Sidebar nav link tap size ── */
    .sb-nav a { padding: 13px 14px !important; font-size: 14px !important; min-height: 48px; }
    .sb-foot { padding: 14px !important; }
}

/* ── Very small screens (< 380px) ────────────────────────── */
@media (max-width: 380px) {
    .btn { padding: 0 12px !important; }
    .summary { grid-template-columns: 1fr !important; }
    .board-col { min-width: 240px !important; }
}

/* ============================================================
   COLOR THEME — single fixed Dark palette (multi-theme picker removed
   2026-07-11; this used to be one of 4 selectable themes swapped in via a
   data-theme attribute on <html> — see git history if it ever needs to
   come back). Follows Linear's "Midnight" theme (base #0f0f10, text
   #eeeff1, accent #7c5cfc), with a 3-tier elevation (bg → surface →
   surface-2) instead of one flat panel color.
   This file is linked AFTER every page's own inline <style> block, so on
   tied specificity it wins the cascade — that's what lets one shared file
   reskin every page without editing each one. !important is used on the
   handful of color/background/border-color properties below specifically
   so this always wins regardless of a given page's exact selector
   specificity, without needing to audit every page individually.
   ============================================================ */
:root {
  --bg:#0f0f10; --surface:#18181b; --surface-2:#1e1e22;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13);
  --text:#eeeff1; --text-dim:rgba(238,239,241,.68); --text-faint:rgba(238,239,241,.42); --text-heading:#ffffff;
  --accent:#7c5cfc; --accent-2:#5b8def;
  --accent-soft-bg:rgba(124,92,252,.16); --accent-soft-text:#b8a6ff;
  --field-bg:rgba(255,255,255,.05); --field-border:rgba(255,255,255,.11);
  --hover-bg:rgba(255,255,255,.05);
  --scroll-track:rgba(255,255,255,.05); --scroll-thumb:rgba(255,255,255,.18);
  /* Tells the browser to render NATIVE controls (the popped-open <select>
     listbox, checkboxes, date pickers) using dark OS chrome. Without this,
     Chrome/Edge render an open dropdown's option list using light native
     styling regardless of any color/background CSS put on <option> — this
     is what caused dropdown popups to show black-on-white even though the
     closed select box correctly showed the dark theme. */
  color-scheme: dark;
}

/* ── Page background + base text ── */
body { background:var(--bg) !important; color:var(--text) !important; }

/* ── Sidebar note: the sidebar's OWN styles (_sidebar.php) now reference
   these same variables directly, so it themes along with everything else —
   no override needed here. Its avatar/logo badges intentionally keep a
   fixed accent gradient with white text, which stays readable against a
   light or dark sidebar background either way. ── */

/* ── Page chrome / headings (note the !important — several pages set these
   via a plain element selector like `h1{color:#fff}`, which otherwise ties
   with this rule and can lose depending on source order) ── */
.page-title, .as-title, .page-header h2, .cal-title, .modal-head h3,
h1, h2, h3 { color:var(--text-heading) !important; }
.page-header p, .pane-sub { color:var(--text-faint) !important; }

/* ── Cards / panels / tiles / tables (shared across every list/board page) ── */
.tbl-section, .as-head-card, .act-tabs, .tab-body, .settings-panel, .vsp-panel,
.view-panel, .cd-panel, .sig-preview, .tbl-card, .card, .stat-card, .mod-card,
.ann-board, .chip, .rc-panel {
  background:var(--surface) !important; border-color:var(--border) !important;
}
.modal-box, .modal, .ann-modal, .del-card, .mg-day, .wk-col {
  background:var(--surface-2) !important; border-color:var(--border) !important;
}
/* Catches the many one-off `style="background:#1e1e35..."` boxes on pages
   (like floorplan.php) that don't use a shared class name at all. */
[style*="background:#1e1e35"], [style*="background: #1e1e35"] { background:var(--surface) !important; }
[style*="background:#1a1a2e"], [style*="background: #1a1a2e"],
[style*="background:#12122a"], [style*="background: #12122a"],
[style*="background:#161628"], [style*="background: #161628"] { background:var(--surface-2) !important; }

table th { color:var(--text-faint) !important; background:rgba(127,127,127,.05) !important; }
table td { color:var(--text-dim) !important; border-color:var(--border) !important; }
tr:hover td { background:var(--hover-bg) !important; }
.empty { color:var(--text-faint) !important; }

/* ── Tile / card text (stat cards, module tiles, announcement board, delivery cards) ── */
.stat-value, .ct-status, .mod-name, .ann-title, .ann-head h3, .section-title,
.del-info .cust {
  color:var(--text-heading) !important;
}
.stat-label, .stat-icon, .ct-sub, .mod-desc, .ann-meta, .ann-body, .card-title,
.del-info .addr, .del-info .notes, .mg-num, .wk-hour, .wk-headcell, .chip-lbl,
.cal-legend, .mg-head {
  color:var(--text-dim) !important;
}
.ann-item { border-color:var(--border) !important; }
.ann-item.is-pinned { background:var(--accent-soft-bg) !important; }
.stat-link { color:var(--accent) !important; }

/* ── Buttons ── */
.btn-primary, .btn-purple, .tab.active { background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important; color:#fff !important; }
.btn-ghost, .back-btn, .ann-btn, .btn-gray, .time-btn { background:var(--field-bg) !important; color:var(--text-dim) !important; border-color:var(--border) !important; }
.time-btn:hover { background:var(--accent-soft-bg) !important; color:var(--accent-soft-text) !important; }

/* ── Accent-tinted highlight boxes (date badges, "today" markers) stay
   accent-colored rather than neutral, since they're meant to draw the eye ── */
.del-date-box { background:var(--accent-soft-bg) !important; border-color:var(--accent) !important; }
.del-date-box .day, .chip-num { color:var(--accent) !important; }
.del-info .time { color:var(--accent) !important; }
.wk-headcell.today { background:var(--accent-soft-bg) !important; }
.mg-day.today { border-color:var(--accent) !important; }

/* ── Form fields (covers every page using these shared classes or bare inputs) ── */
.search-input, .select-filter, .sf-input, .sf-textarea, .fg input, .fg textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], select, textarea {
  background:var(--field-bg) !important; border-color:var(--field-border) !important; color:var(--text) !important;
}

/* ── Dropdown popup options — the closed <select> box picks up the themed
   colors above automatically, but the OPEN option list is a separate native
   control that browsers only theme correctly when color-scheme (set on
   :root per theme above) AND explicit option colors are both present.
   This used to be hardcoded to color:#000/background:#fff (pre-dating the
   theme system), which forced every dropdown's option list to light mode
   no matter what theme was active — that's why it's themed via variables now. */
select option {
  background:var(--surface-2) !important; color:var(--text) !important;
}

/* ── Date/time picker icon — DO NOT add filter:invert() here, even though
   that seems like the obvious fix for a dark icon on a dark field.
   `color-scheme: dark` on :root (see COLOR THEME above) already tells the
   browser to draw this icon in a light color suited to dark backgrounds —
   confirmed live: with no filter at all, the icon renders light and is
   clearly visible. Adding invert() flips that already-light icon back to
   dark/invisible, which is exactly what caused this icon to silently go
   black before (an earlier version of this rule had the invert filter and
   that was the bug, not a fix for it). Only cursor needs to be set here. ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* ── Pagination ── */
.pagination a, .pagination span { background:var(--field-bg) !important; color:var(--text-dim) !important; border-color:var(--border) !important; }
.pagination .cur { background:var(--accent-soft-bg) !important; color:var(--accent-soft-text) !important; border-color:var(--accent) !important; }
.page-info { color:var(--text-faint) !important; }

/* ── Modal scrims stay dark regardless of theme, for contrast ── */
.view-overlay, .modal-overlay, #cdOverlay, .mod-ov { background:rgba(0,0,0,.7) !important; }

/* ── Dashboard clock-in bar (dashboard.php) — was omitted from the card
   list above, so it kept its hardcoded navy gradient in every theme ── */
.clock-bar { background:var(--surface) !important; border-color:var(--border) !important; }

/* ── Deal Stages page (deal_stages.php) — its table has its own hardcoded
   dark background, and its inputs/selects have no type="" attribute so the
   input[type="text"] rule above never matched them ── */
.stage-table { background:var(--surface) !important; border-color:var(--border) !important; }
.sub-note, .mv button { color:var(--text-faint) !important; }
.stage-table input, .stage-table select, .add-row input, .add-row select {
  background:var(--field-bg) !important; border-color:var(--field-border) !important; color:var(--text) !important;
}

/* ── Admin Tools tab bar (admin_tools.php) — inactive tab labels were
   rgba(255,255,255,.4), i.e. near-invisible light text on a light page ── */
.tab-btn { color:var(--text-faint) !important; }
.tab-btn:hover:not(.active) { color:var(--text-dim) !important; }
.tab-btn.active { color:var(--accent-soft-text) !important; border-bottom-color:var(--accent) !important; }

/* ── Floor Plan editor (floorplan.php?id=…) — this whole tool never linked
   custom.css until now and every panel/input color was hardcoded. The
   drawing canvas (.fp-canvas) and the white icon/preview swatches (.lib-ico,
   .cub-sty) are deliberately left alone — they represent the actual drawing
   surface and printed-paper previews, which stay neutral/white in any
   theme, the same way design tools like Figma keep their canvas fixed. ── */
.fp-top, .panel, .panel-l, .panel-r, .sc-help, .mod, .ctx, .props, .align-bar, .zoom-ui button {
  background:var(--surface-2) !important; border-color:var(--border) !important;
}
.fp-top .back, .fp-top input.name, .fp-top select { background:var(--field-bg) !important; border-color:var(--field-border) !important; color:var(--text) !important; }
.cat { border-color:var(--border) !important; }
.cat-h { background:var(--hover-bg) !important; color:var(--text-dim) !important; }
.cat-h:hover { color:var(--text-heading) !important; }
.mod h3, .fi .nm { color:var(--text-heading) !important; }
.p-title, .hint, .save-state, .tpl-sz-row .x, .fld label, .fi .sz {
  color:var(--text-faint) !important;
}
.sc-row, .lib-grp, .room-row, .menu-cfg-row, .ctx-i, .tpl-sz-row {
  color:var(--text-dim) !important; background:var(--field-bg) !important;
}
.mini, .tool, .fi, .room-row button, .menu-cfg-row button {
  background:var(--field-bg) !important; color:var(--text-dim) !important; border-color:var(--border) !important;
}
.mini:hover, .tool:hover { background:var(--hover-bg) !important; }
.mini.active, .tool.active, .cub-sty.active {
  background:var(--accent-soft-bg) !important; border-color:var(--accent) !important; color:var(--accent-soft-text) !important;
}
.rev-badge { background:var(--accent-soft-bg) !important; color:var(--accent-soft-text) !important; }
.fld input, .fld select, .tpl-sz-row input, .dimfill input, .dimfill select,
.seg-table input, .seg-table select, .sc-row kbd {
  background:var(--field-bg) !important; border-color:var(--field-border) !important; color:var(--text) !important;
}

/* ── Floor Plan list view (floorplan.php, before opening a plan) — a plain
   <table> tag with its own hardcoded panel color, plus small icon buttons
   that were pure-white-on-white in Light theme ── */
table { background:var(--surface) !important; }
.bulk { background:var(--surface-2) !important; }
.act { background:var(--field-bg) !important; color:var(--text-dim) !important; }
.thumb-none { color:var(--text-faint) !important; border-color:var(--border) !important; }

/* ── Scrollbars ── */
::-webkit-scrollbar-track { background:var(--scroll-track) !important; }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb) !important; }

/* ── Add your custom styles below ────────────────────────── */

/* Dropdown option lists — dark background so light option text stays
   readable when a <select> menu is open (fixes white-on-white). */
select option,
select optgroup {
  background: #1e1e35;
  color: #e8e8f0;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE UI  (≤768px) — added 2026-07-11
   Turns wide list tables into stacked cards, single-column forms,
   full-width filters, and bigger tap targets. The card transform ONLY
   applies to tables the sidebar script tags with .mob-cards (the main
   list tables), so line-item / detail / modal tables are untouched.
   Everything lives inside the media query — desktop is unaffected.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Card-style list rows ─────────────────────────────────────── */
  table.mob-cards thead { display: none; }
  table.mob-cards, table.mob-cards tbody { display: block; width: 100%; }
  table.mob-cards tr {
    display: block;
    background: var(--surface-1, #1e1e35);
    border: 0.5px solid var(--border, rgba(255,255,255,.12));
    border-radius: 12px;
    padding: 11px 13px;
    margin: 0 0 10px;
  }
  table.mob-cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 4px 0 !important; border: none !important;
    white-space: normal !important; text-align: right; font-size: 13px;
    max-width: 100% !important; overflow: hidden; text-overflow: ellipsis;
  }
  table.mob-cards td::before {
    content: attr(data-label);
    color: var(--text-secondary, rgba(255,255,255,.45));
    font-weight: 500; text-align: left; flex: 0 0 42%; font-size: 12px;
  }
  table.mob-cards td.cb-col { display: none !important; }
  /* Cells with no header label (Actions / Linked / icon columns) → full-width button row */
  table.mob-cards td:not([data-label]) {
    justify-content: flex-start; flex-wrap: wrap; gap: 6px;
    margin-top: 6px; padding-top: 8px !important;
    border-top: 0.5px solid var(--border, rgba(255,255,255,.08)) !important;
  }
  table.mob-cards td:not([data-label])::before { display: none; }
  table.mob-cards td[data-label="Actions"], table.mob-cards td[data-label="Linked"] {
    flex-wrap: wrap; justify-content: flex-start; text-align: left;
    margin-top: 6px; padding-top: 8px !important;
    border-top: 0.5px solid var(--border, rgba(255,255,255,.08)) !important;
  }
  table.mob-cards td[data-label="Actions"]::before, table.mob-cards td[data-label="Linked"]::before { flex-basis: 100%; margin-bottom: 4px; }
  table.mob-cards td .btn, table.mob-cards td .btn-sm { margin: 0; }
  table.mob-cards td select { max-width: 60%; }

  /* ── Filters: search full width, dropdowns share rows ─────────── */
  .search-input { width: 100% !important; }
  .select-filter { flex: 1 1 42%; }

  /* ── Single-column forms (collapse equal-column field grids) ──── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  .adv-grid { grid-template-columns: 1fr !important; }

  /* ── Bigger, easier tap targets + iOS niceties ────────────────── */
  .btn, .btn-sm { min-height: 40px; }
  select, input, textarea { font-size: 16px; }        /* 16px stops iOS zoom-on-focus */
  .bottom-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  main.main, .main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}