/* =============================================================
   ECMill — Modern ERP theme layer ("Clean Enterprise", teal, dark sidebar)
   Loads AFTER bootstrap.min.css, style.css (INSPINIA), pom-custom.css.
   Selector convention: every rule starts with `html ` so this layer
   outranks equal-specificity rules in earlier sheets, page <style>
   blocks, and $extra_head re-links of pom-custom.css. Higher-specificity
   local rules (page <style> blocks like .kpi-card .kpi-*, deep pom-custom
   selectors) still win and need their own case-by-case selector match
   here — see the patch comments throughout section [7] for examples.
   Rollback: THEME_MODERN=false in db.php. style.css is never edited.
   Sections: [1] fonts/tokens  [2] base  [3] buttons/forms  [4] cards
             [5] tables/DataTables  [6] badges  [7] sidebar/favbar
             [8] modals/plugins  [9] dashboard/login
   ============================================================= */

/* ── [1] Fonts & tokens ── */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/inter-700.woff2") format("woff2"); }

:root {
    --tm-bg: #f6f8fb;
    --tm-surface: #ffffff;
    --tm-ink: #111827;
    --tm-body: #374151;
    --tm-muted: #8a94a6;
    --tm-line: #e7eaf0;
    --tm-line-soft: #eef0f4;
    --tm-border-input: #d8dde6;
    --tm-teal: #1ab394;
    --tm-teal-hover: #159c81;
    --tm-teal-tint: #e6f7f2;
    --tm-teal-tint-ink: #0e8e73;
    --tm-sidebar: #1f2733;
    --tm-sidebar-text: #aeb7c2;
    --tm-radius-sm: 8px;
    --tm-radius-lg: 12px;
    --tm-shadow-card: 0 1px 3px rgba(16, 24, 40, .08);
    --tm-shadow-btn: 0 1px 2px rgba(26, 179, 148, .4);
    --tm-focus-ring: 0 0 0 3px rgba(26, 179, 148, .15);
}

/* ── [2] Base ── */
html body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: var(--tm-body);
}
html .gray-bg,
html #page-wrapper { background-color: var(--tm-bg); }
html h1, html h2, html h3, html h4, html h5 { color: var(--tm-ink); }
html .text-muted { color: var(--tm-muted); }

/* Page heading bar (structure/padding are inline in header.php — only skin here) */
html .page-heading { border-color: var(--tm-line); }
html .page-heading h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: var(--tm-ink); }

/* ── [3] Buttons & forms ── */
html .btn {
    border-radius: var(--tm-radius-sm);
    font-weight: 600;
}
html .btn-primary {
    background-color: var(--tm-teal);
    border-color: var(--tm-teal);
    box-shadow: var(--tm-shadow-btn);
}
html .btn-primary:hover, html .btn-primary:focus,
html .btn-primary:active, html .btn-primary:active:focus {
    background-color: var(--tm-teal-hover);
    border-color: var(--tm-teal-hover);
}
/* QA fallout: .btn-primary.btn-outline (the "View" ghost action on list rows
   for locked/non-editable records, e.g. store_issue list) inherits the
   .btn-primary rule above at rest, painting the button solid teal while
   style.css's .btn-primary.btn-outline still sets its text color to the same
   teal — invisible text on a same-color background. Outline stays transparent
   at rest; because this rule ties on specificity with the .btn-primary:hover
   block above and comes later in the cascade, it would otherwise also win
   during hover/focus/active — the teal fill is restored explicitly below. */
html .btn-primary.btn-outline {
    background-color: transparent;
    box-shadow: none;
}
html .btn-primary.btn-outline:hover,
html .btn-primary.btn-outline:focus,
html .btn-primary.btn-outline:active {
    background-color: var(--tm-teal-hover);
    border-color: var(--tm-teal-hover);
    color: #fff;
}
/* Ghost secondary — the app's standard is .btn-secondary.btn-outline */
html .btn-secondary,
html .btn-default,
html .btn-white {
    background-color: #fff;
    border: 1px solid var(--tm-border-input);
    color: #4b5565;
}
html .btn-secondary:hover, html .btn-default:hover, html .btn-white:hover {
    background-color: #fff;
    border-color: #b9c2cf;
    color: var(--tm-ink);
}
/* Semantic buttons keep their INSPINIA colors (success=blue #1c84c6 per app
   convention, danger red, etc.) — shape only, no recolor. */

html .form-control {
    border-color: var(--tm-border-input);
    border-radius: var(--tm-radius-sm);
    color: var(--tm-body);
    /* NO font-size here — pom-custom pairs 0.9rem with calc() heights */
}
html .form-control:focus {
    border-color: var(--tm-teal);
    box-shadow: var(--tm-focus-ring);
}
html .input-group .input-group-addon {
    background-color: #f8f9fc;
    border-color: var(--tm-border-input);
    color: var(--tm-muted);
    border-radius: var(--tm-radius-sm);
}
/* Keep joined input-group corners square where pieces meet */
html .input-group .input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html .input-group .input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html .input-group .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html .input-group .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

html label, html .col-form-label { font-weight: 600; color: #4b5565; }
html .form-text, html .help-block { color: var(--tm-muted); }

/* ── [4] Cards & page chrome ── */
html .ibox {
    background-color: var(--tm-surface);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-card);
}
html .ibox-title {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--tm-line-soft);
    border-radius: var(--tm-radius-lg) var(--tm-radius-lg) 0 0;
}
html .ibox-title h5 { font-weight: 600; color: var(--tm-ink); }
html .ibox-content {
    background-color: transparent;
    border: none;
    border-radius: 0 0 var(--tm-radius-lg) var(--tm-radius-lg);
}
html .hr-line-dashed {
    border-top: 1px solid var(--tm-line-soft);
    margin: 18px 0;
}
/* Dropdown menus (Export button, user menu) */
html .dropdown-menu {
    border: 1px solid var(--tm-line);
    border-radius: var(--tm-radius-sm);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
    padding: 6px;
}
html .dropdown-menu > li > a {
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--tm-body);
}
html .dropdown-menu > li > a:hover { background-color: #f4f6f9; }
html .dropdown-menu .divider { background-color: var(--tm-line-soft); margin: 5px 0; }

/* ── [5] Tables, DataTables, pagination, chips ── */
html .table > thead > tr > th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tm-muted);
    font-weight: 700;
    background-color: #fafbfd;
    border-bottom: 1px solid var(--tm-line-soft);
    padding: 9px 10px;
}
html .table > tbody > tr > td {
    padding: 9px 10px;
    border-top: 1px solid #f1f3f7;
    vertical-align: middle;
}
html .table-hover > tbody > tr:hover > td,
html table.dataTable tbody tr:hover > td { background-color: #f8fafb; }

/* Approved mockup shows clean white rows with hairline horizontal dividers
   only — neutralize BS zebra striping and .table-bordered vertical/outer
   borders that page markup (`table table-striped table-bordered`) carries. */
html .table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
html .table-bordered { border: none; }
html .table-bordered > thead > tr > th,
html .table-bordered > thead > tr > td,
html .table-bordered > tbody > tr > th,
html .table-bordered > tbody > tr > td,
html .table-bordered > tfoot > tr > th,
html .table-bordered > tfoot > tr > td {
    border-left: none;
    border-right: none;
}

/* DataTables top/bottom control bars (classes centralized in pom-custom) */
html .pom-dt-top .dataTables_filter input,
html .pom-dt-top .dataTables_length select,
html .pom-dt-bl .dataTables_length select {
    border: 1px solid var(--tm-border-input);
    border-radius: var(--tm-radius-sm);
}
html .pom-dt-bottom { border-top: 1px solid var(--tm-line-soft); }
html .dataTables_info { color: var(--tm-muted); }

/* Pagination (BS4 DataTables: .page-item/.page-link) — kept per plan; the
   app currently renders pom-dt.js's custom pom-paging-group widget instead
   (styled by the button rules), so this block is inert unless native
   DataTables paging is ever re-enabled. */
html .pagination .page-link {
    border: 1px solid var(--tm-line);
    color: #4b5565;
    border-radius: 6px;
    margin: 0 2px;
}
html .pagination .page-item.active .page-link {
    background-color: var(--tm-teal);
    border-color: var(--tm-teal);
    color: #fff;
}
html .pagination .page-item.disabled .page-link { color: #c3cad5; }

/* Filter chips — pages define white-on-dark chips in local <style> blocks
   (rgba(0,0,0,.18) bg + white text) that were legible on the old colored
   ibox-title. On the new white card they'd be invisible — retint to teal. */
html .filter-chip {
    background-color: var(--tm-teal-tint);
    color: var(--tm-teal-tint-ink);
    border-radius: 999px;
    font-weight: 600;
    padding: 3px 10px;
}
html .filter-chip:hover { background-color: #d3f0e7; color: var(--tm-teal-tint-ink); }

/* Total pill — inline style="background:#1ab394;border-radius:3px" on
   span#result-total in every list page; !important is the only way to
   reshape an inline style without markup changes. */
html span#result-total {
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-weight: 600;
}

/* ── [6] Status badges — tinted pills (pom_status_badge map unchanged) ── */
html .label {
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    padding: 3px 10px;
    text-shadow: none;
}
html .label-success { background-color: #ecfdf3; color: #027a48; }  /* Approved/Completed/Active */
html .label-info    { background-color: #e8f1fd; color: #1c64c6; }  /* Submitted/Open */
html .label-warning { background-color: #fff4e5; color: #b54708; }  /* In Progress/Pending */
html .label-danger  { background-color: #fef2f2; color: #b42318; }  /* Voided/Rejected */
html .label-primary { background-color: var(--tm-teal-tint); color: var(--tm-teal-tint-ink); } /* Issued */
html .label-default { background-color: #f2f4f7; color: #667085; }  /* Draft/Inactive */

/* ── [7] Sidebar (ink #1f2733, rounded active, teal accent bar) ── */
html body.pom-sidebar,
html .navbar-default.navbar-static-side,
html .navbar-static-side .sidebar-collapse { background-color: var(--tm-sidebar); }
html .nav > li.nav-header {
    background-color: var(--tm-sidebar);
    background-image: none;   /* INSPINIA header-profile.png pattern */
}
html .navbar-static-side .nav > li > a {
    color: var(--tm-sidebar-text);
    font-weight: 500;
    border-radius: var(--tm-radius-sm);
    margin: 2px 8px;
    padding: 9px 12px;
}
html .navbar-static-side .nav > li.active {
    background-color: transparent;
    border-left: none;        /* INSPINIA 4px #19aa8d active border */
}
html .navbar-static-side .nav > li.active > a,
html .navbar-static-side .nav > li > a:hover,
html .navbar-static-side .nav > li > a:focus {
    color: #fff;
    background-color: rgba(26, 179, 148, .18);
    box-shadow: inset 3px 0 0 var(--tm-teal);
}
/* An expanded group header and the active leaf inside it were both painted
   with the same teal fill + accent bar — two stacked highlight boxes, so
   nothing read as "the current page". The group header is context, not a
   destination: it drops the fill and bar and keeps only white text + a teal
   icon, leaving one filled pill (the leaf) as the you-are-here marker.
   :has(> .nav-second-level) scopes this to group headers — flat top-level
   items (Dashboard) still get the filled pill when active. */
html .navbar-static-side .nav > li.active:has(> .nav-second-level) > a {
    background-color: transparent;
    box-shadow: none;
    color: #fff;
}
html .navbar-static-side .nav > li.active:has(> .nav-second-level) > a > .fa:not(.arrow) {
    color: var(--tm-teal);
}
/* Group headers keep hover feedback, but a neutral wash rather than the teal
   pill — otherwise hovering the header of the open group re-creates the same
   double-highlight this block removes. */
html .navbar-static-side .nav > li:has(> .nav-second-level) > a:hover,
html .navbar-static-side .nav > li:has(> .nav-second-level) > a:focus {
    background-color: rgba(255, 255, 255, .06);
    box-shadow: none;
    color: #fff;
}
html .navbar-static-side .nav-second-level { background-color: transparent; }
html .navbar-static-side .nav-second-level > li > a {
    color: #97a1ae;
    border-radius: var(--tm-radius-sm);
    margin: 1px 8px;
    padding: 7px 10px 7px 40px;
}
html .navbar-static-side .nav-second-level > li.active > a,
html .navbar-static-side .nav-second-level > li > a:hover {
    color: #fff;
    background-color: rgba(26, 179, 148, .14);
    box-shadow: inset 3px 0 0 var(--tm-teal);
}
html .pom-side-divider {
    color: #6c7684;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: 10px;
}
html .nav-header .pom-side-welcome { color: var(--tm-sidebar-text); }
html .nav-header .pom-side-welcome strong { color: #fff; }
/* pom-custom.css's earlier sidebar rules (body.pom-sidebar .pom-side-divider,
   body.pom-sidebar .nav-header .pom-side-welcome) carry one more class than
   the rules above and still win — match their exact selectors to bring the
   divider/welcome text onto the theme-modern token palette. */
html body.pom-sidebar .pom-side-divider { color: #6c7684; }
html body.pom-sidebar .nav-header .pom-side-welcome { color: var(--tm-sidebar-text); }
/* Mini-navbar (collapsed) keeps the same ink */
html body.mini-navbar .navbar-static-side,
html body.mini-navbar .nav-header { background-color: var(--tm-sidebar); }
html body.mini-navbar .logo-element { color: #fff; }

/* ── Favorites bar: white with hairline, teal-tint chips ── */
html body.pom-sidebar .pom-favbar-row {
    background-color: var(--tm-surface);
    border-bottom: 1px solid var(--tm-line);
}
html .pom-fav-chip a {
    background-color: #f2f4f7;
    color: #4b5565;
    border-radius: 999px;
    font-weight: 600;
}
html .pom-fav-chip a:hover,
html .pom-fav-chip.active a {
    background-color: var(--tm-teal-tint);
    color: var(--tm-teal-tint-ink);
}
/* pom-custom paints the active chip icon #fff (for the old dark chip) at
   (0,3,1) — repaint for the light tint surface. No matching .fa rule exists
   for the plain :hover state (pom-custom's a:hover only recolors the anchor
   text/border, and the icon's default #1ab394 already reads fine against
   the tint), so only the active case needs the override. */
html .pom-fav-chip.active a .fa { color: var(--tm-teal-tint-ink); }
html .pom-fav-hint { color: var(--tm-muted); }
html .navbar-minimalize.minimalize-styl-2 {
    background-color: var(--tm-teal);
    border-color: var(--tm-teal);
    border-radius: var(--tm-radius-sm);
}
/* pom-custom's ".pom-favbar .navbar-minimalize:hover" (0,3,0) beats the
   base rule above (0,2,1) on hover, giving its dead-code #18a689 instead of
   the token hover teal — match its exact selector (0,3,1) to win. */
html .pom-favbar .navbar-minimalize:hover { background-color: var(--tm-teal-hover); border-color: var(--tm-teal-hover); }
/* QA fallout: on the Pending Approvals page, the bell's <li class="nav-item
   active"> matches style.css's generic ".nav > li.active" (dark sidebar-active
   background + teal left border, meant for the dark sidebar nav) — a stray
   dark box in the now-white favbar row. Pre-existing in the classic theme too
   (favbar row was already light there); neutralized here since it's the
   layer that owns "what belongs on a light surface". Its sibling rule
   ".nav > li.active > a { color:#fff }" (white text for the dark sidebar)
   also bleeds in — without an override the bell icon goes white-on-white
   once the dark box above is removed, so recolor it teal to double as an
   on-this-page indicator instead. */
html .pom-favbar-right .nav-item.active {
    background-color: transparent;
    border-left: none;
    box-shadow: none;
}
html .pom-favbar-right .nav-item.active > a {
    color: var(--tm-teal);
}

/* ── [8] Modals & plugins ── */
html .modal-content {
    border: none;
    border-radius: var(--tm-radius-lg);
    box-shadow: 0 8px 30px rgba(16, 24, 40, .18);
}
html .modal-header { border-bottom: 1px solid var(--tm-line-soft); }
html .modal-footer { border-top: 1px solid var(--tm-line-soft); }
html .modal-title { font-weight: 700; color: var(--tm-ink); }

/* SweetAlert (Draft-delete confirms, approval prompts) */
html .sweet-alert {
    border-radius: var(--tm-radius-lg);
    font-family: inherit;
}
html .sweet-alert h2 { color: var(--tm-ink); font-weight: 700; }
html .sweet-alert p { color: var(--tm-body); }
html .sweet-alert button {
    border-radius: var(--tm-radius-sm);
    font-weight: 600;
    box-shadow: none !important;   /* sweetalert.css puts !important shadows on focus */
}

/* Toastr */
html #toast-container > div {
    border-radius: var(--tm-radius-sm);
    box-shadow: var(--tm-shadow-card);
    opacity: 1;
}

/* Datepicker popover (pages that load plugins/datapicker) */
html .datepicker.dropdown-menu { border-radius: var(--tm-radius-sm); }
html .datepicker table tr td.active.active,
html .datepicker table tr td.active:hover.active {
    background-color: var(--tm-teal);
    background-image: none;
}
html .datepicker table tr td.today {
    background-color: var(--tm-teal-tint);
    background-image: none;
}

/* Flatpickr popover — the plugin the app actually uses everywhere (unlike
   the dead bootstrap-datepicker rules above). Its default CDN theme ships an
   off-brand blue selected/today state that reads as jarring against a UI
   where every other selected/active/focus accent is teal; the calendar box
   itself is also unstyled against the new card/dropdown look. */
html .flatpickr-calendar {
    border: 1px solid var(--tm-line);
    border-radius: var(--tm-radius-sm);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}
html .flatpickr-day.selected,
html .flatpickr-day.selected:hover,
html .flatpickr-day.selected:focus {
    background-color: var(--tm-teal);
    border-color: var(--tm-teal);
}
html .flatpickr-day.today { border-color: var(--tm-teal); }
html .flatpickr-day.today:hover,
html .flatpickr-day.today:focus {
    background-color: var(--tm-teal);
    border-color: var(--tm-teal);
    color: #fff;
}
html .flatpickr-day:hover {
    background-color: var(--tm-teal-tint);
    border-color: var(--tm-teal-tint);
}

/* ── [9] Dashboard & login ── */
html .kpi-value { font-size: 22px; font-weight: 700; color: var(--tm-ink); }
html .kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tm-muted);
    font-weight: 700;
}
html .kpi-sub { color: var(--tm-muted); }
html .list-group-item { border-color: var(--tm-line-soft); }
/* .text-navy is INSPINIA teal (#1ab394) — correct already, keep */

/* Login (loads theme via its own link; page uses .gray-bg + an inline card) */
html body.gray-bg { background-color: var(--tm-bg); }