/* =========================================================================
   theme.css - SigmaPMS design tokens (single source of truth)
   -------------------------------------------------------------------------
   Loaded once, last, via the shared layout (include/layout_top.php /
   include/layout_min.php) so tokens and token-based utilities can theme the
   legacy Bootstrap 3 CSS that loads before it.

   PHASE 0: tokens are DEFINED here but not yet broadly applied, so adding this
   file is visually inert. Later phases (design-tokens / ui-components) migrate
   the scattered inline styles and hard-coded colors (e.g. #1980BD) onto these
   variables and onto the include/ui/* component partials.
   Do NOT introduce a Bootstrap 3 -> 5 migration; layer on top instead.
   ========================================================================= */

:root {
    /* Brand palette (derived from the existing UI) */
    --sg-brand:            #1980BD;   /* primary header/footer blue */
    --sg-brand-dark:       #14689a;
    --sg-brand-light:      #cee2ed;
    --sg-sidebar-header:   #738dad;
    --sg-accent:           #86bc42;   /* existing green accents */
    --sg-danger:           #e74c3c;

    /* Neutrals */
    --sg-text:             #333333;
    --sg-text-muted:       #6b7785;
    --sg-bg:               #f4f6f9;
    --sg-surface:          #ffffff;
    --sg-surface-cream:    cornsilk;  /* legacy "cornsilk" report/scroll panels */
    --sg-border:           #e1e6ed;
    --sg-row-hover:        #eaf2f8;   /* subtle on-brand table row hover tint */

    /* Spacing scale (4px base) */
    --sg-space-1: 4px;
    --sg-space-2: 8px;
    --sg-space-3: 12px;
    --sg-space-4: 16px;
    --sg-space-5: 24px;
    --sg-space-6: 32px;

    /* Radius / elevation */
    --sg-radius:    6px;
    --sg-radius-sm: 4px;
    --sg-shadow-1:  0 1px 3px rgba(0, 0, 0, 0.08);
    --sg-shadow-2:  0 2px 8px rgba(0, 0, 0, 0.12);

    /* Typography */
    --sg-font: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --sg-fs-sm: 12px;
    --sg-fs-md: 14px;
    --sg-fs-lg: 18px;

    /* Layout metrics (kept in sync with the sidebar width in style.css) */
    --sg-sidebar-width: 240px;
    --sg-topbar-height: 60px;
}

/* =========================================================================
   PHASE 4 - region uplift (sidebar / header / content).
   These layer on top of style.css (loaded before this file). They replace
   inline styles that used to live in the include/*.php partials and add the
   desktop current-page highlight. Token-driven; no Bootstrap 3 -> 5 changes.
   ========================================================================= */

/* ---- Sidebar ---------------------------------------------------------- */
/* De-inlined logo sizing (was style="height:60px;width:200px" / "height:43px"
   in include/leftbar.php). max-width keeps the logo inside the sidebar width. */
.left-sidebar-pro .sidebar-header .main-logo {
    height: 60px;
    width: auto;
    max-width: 100%;
}
.left-sidebar-pro .sidebar-header .mini-logo {
    height: 43px;
    width: auto;
    max-width: 100%;
}

/* Current-page highlight (set by js/metisMenu/metisMenu-active.js before init).
   Matches the existing hover colour so the active item reads as "selected". */
.sidebar-nav .metismenu a.is-current,
.sidebar-nav .metismenu li.is-current-parent > a {
    background: var(--sg-brand);
    color: #fff;
}
.sidebar-nav .metismenu a.is-current {
    font-weight: 600;
}

/* Consistent top-level icon column so labels line up regardless of glyph
   width (Font Awesome advance widths vary), and the icon stays centred in the
   collapsed icon-only mini rail. */
.sidebar-nav .metismenu > li > a .icon-wrap {
    display: inline-block;
    width: 22px;
    text-align: center;
}

/* ---- Sidebar menu filter (#sgMenuFilter) ----------------------------- */
/* Live client-side filter over the already-rendered menu (logic in
   js/metisMenu/metisMenu-active.js). Sits on the white sidebar body, above the
   scrollable menu. Hidden in the collapsed icon-only rail (no room, and the
   labels it searches are hidden there). */
.sg-menu-filter {
    position: relative;
    padding: var(--sg-space-2) var(--sg-space-3);
    background: #fff;
}
.sg-menu-filter-icon {
    position: absolute;
    top: 50%;
    left: calc(var(--sg-space-3) + 9px);
    transform: translateY(-50%);
    color: var(--sg-text-muted);
    font-size: var(--sg-fs-sm);
    pointer-events: none;
}
.sg-menu-filter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px 6px 28px;
    font-size: var(--sg-fs-sm);
    color: var(--sg-text);
    background: var(--sg-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-sm);
    outline: none;
}
.sg-menu-filter-input:focus {
    border-color: var(--sg-brand);
    box-shadow: 0 0 0 2px var(--sg-brand-light);
}
/* Collapsed icon-only rail: drop the filter (no room; labels hidden). */
#sidebar.active .sg-menu-filter,
body.mini-navbar .sg-menu-filter {
    display: none;
}

/* Filtering state (set on #menu1 while the box has a query): hide the
   non-matching items and force every still-visible group open so leaf matches
   show regardless of metisMenu's collapse state. Class-only — metisMenu keeps
   its own state for when the box is cleared. */
#menu1 .sg-filter-hide {
    display: none !important;
}
#menu1.sg-menu-filtering li > ul {
    display: block !important;
    height: auto !important;
}
.sg-menu-noresults {
    padding: var(--sg-space-3) var(--sg-space-4);
    color: var(--sg-text-muted);
    font-size: var(--sg-fs-sm);
    font-style: italic;
    list-style: none;
}
.sg-menu-noresults[hidden] {
    display: none;
}

/* ---- Table row hover -------------------------------------------------- */
/* Extend the row-hover scannability highlight to EVERY .table, not just the
   ~90 files that opt into Bootstrap's .table-hover. Loads last, so it overrides
   .table-striped's zebra on hover. Hover-only background, and NON-!important so
   rows that carry their own inline background (semantic status colours) keep it
   — only the neutral rows light up. Set on the <tr> (not the cells) so an inline
   background on the row OR on a cell still wins on hover. */
.table > tbody > tr:hover {
    background-color: var(--sg-row-hover);
}

/* ---- Header / topbar — SINGLE SOURCE OF TRUTH for header positioning --- */
/* One in-flow STICKY header for EVERY page. The legacy template made
   .header-top-area `position:fixed; left:200px; right:0; top:0` (style.css) with
   the .logo-pro banner below acting as its spacer, while the shared-layout pages
   have no .logo-pro and expect an in-flow header. A single in-flow sticky bar
   works for both: it sits flush at the top and stays put on scroll.
   All header POSITIONING (position/top/left/right/z-index, incl. the collapsed
   .mini-navbar rail) now lives HERE ONLY. The old conflicting rules — style.css
   (position:fixed + left:200px/right:0 insets, .mini-navbar left:80px/z-index)
   and responsive.css (position:relative/left:0) — were removed: this sheet loads
   last and already won the cascade, so their removal is a no-op at render time
   but ends the "fighting the cascade" duplication. z-index sits below the sidebar
   (#sidebar 999 / .left-sidebar-pro 9999); the collapsed rail keeps legacy 9999. */
.header-top-area {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 998;
}
.mini-navbar .header-top-area {
    z-index: 9999;
}
/* The legacy pages render a redundant logo banner (<div class="logo-pro">) at
   the top of the content column - the same logo already shown in the sidebar
   header. It used to be hidden behind the fixed header; with the in-flow header
   it would push the header down (the "detached header" report). Hide it inside
   the app content area so the header is flush on every page. Standalone pages
   (login/print) keep their own logo - they have no .all-content-wrapper. */
.all-content-wrapper .logo-pro {
    display: none;
}
/* De-inlined upperbar styles (were inline style="" in include/upperbar.php). */
.header-top-area .sg-topbar-bar {
    background: var(--sg-brand);
}
.header-top-area .sg-topbar-title {
    padding-top: 15px;
}
.header-top-area .sg-topbar-title h3,
.header-top-area .sg-topbar-title h3 small {
    color: #fff;
}
.header-top-area .sg-topbar-title h3 small {
    font-size: 13px;
}
.header-top-area .sg-topbar-bell-li {
    padding-top: 20px;
}
.header-top-area .sg-topbar-bell {
    color: #fff;
    position: relative;
    display: inline-block;
    margin-right: 14px;
    font-size: 18px;
}
.header-top-area .sg-topbar-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background: var(--sg-danger);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    padding: 1px 6px;
    line-height: 1.4;
}

/* ---- Footer ----------------------------------------------------------- */
/* De-inlined footer background (was style="background:#1980BD"). */
.footer-copyright-area {
    background: var(--sg-brand);
}

/* ---- Content ---------------------------------------------------------- */
/* Replacement for the scattered inline style="margin-top:5%" wrappers: one
   consistent, fixed top gap (the % hack scaled with viewport width). Applied
   by swapping the inline style for this class in the page content wrappers. */
.sg-content-top {
    margin-top: var(--sg-space-6);
}

/* Reusable page title (include/page_title.php). */
.sg-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sg-space-3);
    margin: 0 0 var(--sg-space-4);
    padding-bottom: var(--sg-space-3);
    border-bottom: 1px solid var(--sg-border);
}
.sg-page-title__heading {
    margin: 0;
    font-size: var(--sg-fs-lg);
    font-weight: 600;
    color: var(--sg-text);
}
.sg-page-title__sub {
    margin: var(--sg-space-1) 0 0;
    font-size: var(--sg-fs-sm);
    color: var(--sg-text-muted);
}
.sg-page-title__actions {
    display: flex;
    align-items: center;
    gap: var(--sg-space-2);
    flex-wrap: wrap;
}

/* =========================================================================
   PHASE 5 - design-system component partials (include/ui/*).
   Token-styled polish layered on the Bootstrap 3 markup the partials emit, so
   each component renders correctly everywhere while picking up the SigmaPMS
   look. New / changed screens compose these; legacy markup migrates over time.
   ========================================================================= */

/* ---- Breadcrumb ------------------------------------------------------- */
.sg-breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 var(--sg-space-2);
    font-size: var(--sg-fs-sm);
}

/* ---- Card / panel ----------------------------------------------------- */
.sg-card {
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius);
    box-shadow: var(--sg-shadow-1);
    background: var(--sg-surface);
}
.sg-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-space-3);
    font-weight: 600;
    color: var(--sg-text);
}
.sg-card__actions {
    font-weight: 400;
}

/* ---- Form field ------------------------------------------------------- */
.sg-field {
    margin-bottom: var(--sg-space-4);
}
.sg-field__label {
    font-weight: 600;
    color: var(--sg-text);
}
.sg-field__req {
    color: var(--sg-danger);
}
.sg-field__help {
    color: var(--sg-text-muted);
    font-size: var(--sg-fs-sm);
    margin-top: var(--sg-space-1);
}
.sg-field__error {
    color: var(--sg-danger);
    font-size: var(--sg-fs-sm);
    margin-top: var(--sg-space-1);
}

/* ---- Alert ------------------------------------------------------------ */
.sg-alert {
    border-radius: var(--sg-radius-sm);
    border-width: 1px;
    box-shadow: var(--sg-shadow-1);
}

/* ---- Status badge ----------------------------------------------------- */
.sg-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--sg-fs-sm);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    border: 1px solid transparent;
}
.sg-badge--success { background: #e7f4ec; color: #1e7e44; border-color: #bfe3cd; }
.sg-badge--danger  { background: #fbeaea; color: #b02a2a; border-color: #f1c4c4; }
.sg-badge--warning { background: #fdf3e3; color: #9a6700; border-color: #f3dcae; }
.sg-badge--info    { background: var(--sg-brand-light); color: var(--sg-brand-dark); border-color: #b6d6e7; }
.sg-badge--neutral { background: #eef1f5; color: var(--sg-text-muted); border-color: var(--sg-border); }

/* ---- Button group ----------------------------------------------------- */
.sg-btn-group .btn + .btn {
    margin-left: 0;
}

/* =========================================================================
   Token utilities — 1:1 replacements for high-frequency inline styles
   (guard_no_inline_style burndown, ADR-0004). Inline styles always beat
   selectors, so where a utility swaps in for an always-winning inline style
   it carries !important to reproduce that exact win from a single audited
   source instead of N scattered per-element copies.
   ========================================================================= */
/* Brand-filled table header / banner row: replaces
   style="background-color:#1980bd;color:aliceblue". Child selectors keep the
   fill on th/td even where Bootstrap's `.table thead th` is more specific. */
.sg-brand-fill,
.sg-brand-fill > tr > th,
.sg-brand-fill > tr > td,
.sg-brand-fill > th,
.sg-brand-fill > td {
    background-color: var(--sg-brand) !important;
    color: aliceblue !important;
}

/* Danger text: replaces inline style="color:red" with the tokenised danger
   colour (a slightly softer, on-brand red). */
.sg-text-danger {
    color: var(--sg-danger);
}

/* Square image thumbnail: replaces inline style="width:100px;height:100px" on
   the (class-less) product/related-image <img> tags. Exact px kept so rendering
   is identical; !important reproduces the inline win from one audited source. */
.sg-thumb-100 {
    width: 100px !important;
    height: 100px !important;
}
/* Tooling/related-image thumbnail (the 103x100 variant). Exact px kept. */
.sg-thumb-103 {
    width: 103px !important;
    height: 100px !important;
}

/* Top-margin spacing utility: replaces inline style="margin-top:10px" (tables
   and rows). Merged into the element's existing class list; !important keeps the
   exact spacing the inline style always won with. */
.sg-mt-10 {
    margin-top: 10px !important;
}

/* Bottom-margin spacing utilities: replace inline style="margin-bottom:15px" /
   "margin-bottom:10px" (forms, rows, divs). Exact px kept; !important reproduces
   the always-winning inline value from one audited source. */
.sg-mb-15 {
    margin-bottom: 15px !important;
}
.sg-mb-10 {
    margin-bottom: 10px !important;
}

/* Uniform padding utility: replaces inline style="padding:10px" (panels,
   headings, detail blocks). Exact px kept; !important matches the inline win. */
.sg-pad-10 {
    padding: 10px !important;
}

/* Cream panel family: composable replacements for the scattered inline
   "background-color:cornsilk" report/scroll boxes. Tokenised via
   --sg-surface-cream so the cream can be re-themed from one place. These three
   compose to reproduce each original combo exactly (cream, centred row, and/or
   vertical scroll); !important matches the always-winning inline declarations.
     background-color:cornsilk                         -> sg-cream
     +margin-left:auto;margin-right:auto (centred row) -> sg-center-block
     +overflow-y:scroll (scroll box)                   -> sg-scroll-y */
.sg-cream {
    background-color: var(--sg-surface-cream) !important;
}
.sg-center-block {
    margin-left: auto !important;
    margin-right: auto !important;
}
.sg-scroll-y {
    overflow-y: scroll !important;
}