/* Flow Logistics — Shared Styles
   Industrial/logistics visual identity: dark slate sidebar, high-contrast
   status colors, compact operational typography. */

:root {
    --flow-primary: #2563eb;
    --flow-dark: #0f172a;
    --flow-dark-2: #1e293b;
    --flow-border: #e2e8f0;
    --flow-success: #16a34a;
    --flow-warning: #d97706;
    --flow-danger: #dc2626;
    --flow-info: #0891b2;
    --flow-bg: #f8fafc;
}

body.flow-app {
    background: var(--flow-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body.flow-auth-body {
    background: var(--flow-dark);
}

/* Layout: sidebar + main
   ------------------------------------------------------------------
   The sidebar markup uses Bootstrap's .offcanvas-lg so it slides in on
   mobile. Two things about that component have to be worked around at
   desktop width:

   1. Bootstrap 5.3 sets `background-color: transparent !important` on
      .offcanvas-* above its breakpoint. Without an equally-!important
      override, the sidebar renders WHITE — which, with light-grey nav
      text on it, looks like an empty washed-out column. That was the
      "blank space" bug.
   2. Its default closed state is translated off-screen, so the dark
      column can vanish entirely while .flow-main still reserves its
      margin, leaving a genuine empty gutter.

   Rather than fight the component's internals piecemeal, at desktop we
   take the sidebar out of the offcanvas flow entirely: position it fixed,
   full viewport height, own scroll. That guarantees a solid dark column
   regardless of what Bootstrap's offcanvas CSS does. */
.flow-sidebar {
    width: 240px;
    background: var(--flow-dark);
    color: #cbd5e1;
    border-right: 1px solid var(--flow-dark-2);
}
.flow-sidebar-brand { color: #fff; font-size: 1.05rem; border-bottom: 1px solid var(--flow-dark-2); }
.flow-nav-link { color: #94a3b8; border-radius: 6px; padding: .55rem .75rem; font-size: .9rem; }
.flow-nav-link:hover { background: var(--flow-dark-2); color: #fff; }
.flow-nav-link.active { background: var(--flow-primary); color: #fff; }

@media (min-width: 992px) {
    .flow-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        max-width: 240px;
        /* Every !important below is load-bearing: Bootstrap's .offcanvas-lg
           rules above its breakpoint set background to transparent, and its
           base .offcanvas rules set width/transform/visibility for the
           slide-in panel. Any one of those leaking through leaves either a
           white column or an empty gutter. Neutralise the lot rather than
           chase them one at a time. */
        background: var(--flow-dark) !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        border-right: 1px solid var(--flow-dark-2) !important;
        z-index: 1030;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto;
    }

    /* The offcanvas body inside must stretch and stay transparent, otherwise
       it can paint its own light background over the dark panel. */
    .flow-sidebar .offcanvas-body {
        background: transparent !important;
        flex: 1 1 auto;
        padding: 0;
    }

    /* The backdrop should never appear at desktop width — if one is left in
       the DOM it covers the page with a dark translucent layer that reads as
       "the content is missing". */
    .offcanvas-backdrop { display: none !important; }

    .flow-main {
        margin-left: 240px;
        min-height: 100vh;
    }
}

/* Below the breakpoint the offcanvas panel slides over the page, so the
   main column must not reserve any margin for it. */
@media (max-width: 991.98px) {
    .flow-main { margin-left: 0; }
    .flow-sidebar { background: var(--flow-dark) !important; }
}

/* Sidebar contents must stay legible on the dark panel. Bootstrap's default
   offcanvas header/close-button styling assumes a light background, so the
   close icon would otherwise render near-black on near-black. */
.flow-sidebar .offcanvas-header { color: #fff; border-bottom: 1px solid var(--flow-dark-2); }
.flow-sidebar .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.flow-sidebar .nav-link { color: #94a3b8; }
.flow-sidebar a { text-decoration: none; }

.flow-topbar { background: #fff; height: 60px; }

/* Stat cards */
.flow-stat-card { border: 1px solid var(--flow-border); border-radius: 10px; }

/* Status badges use inline colors sourced from flow_statuses.color via the
   status_badge() helper in includes/functions.php, so every status code
   (including ones added later through Admin > Settings) is colored
   correctly without needing a matching CSS class here. */
.badge.flow-badge { font-weight: 600; font-size: .72rem; padding: .35em .6em; border-radius: 5px; }