/* IDS brand colors */
:root {
    --ids-green: #2e7d32;
    --ids-green-dark: #1f5e23;
    --ids-green-light: #e7f3e8;
}

/* App chrome */
body {
    min-height: 100vh;
    font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    margin: 0;
}
/* Logged-out pages keep the old vertical-flow shell */
body:not(.ids-app-body) {
    display: flex;
    flex-direction: column;
}
body:not(.ids-app-body) main {
    flex: 1;
}

/* Auth pages reset (the .auth-body class below also gets applied) */
.ids-app-body {
    background: #f4f5f7;
}

/* ============================================================
 * Sidebar app shell (Slice 9.0a)
 * ============================================================ */

.ids-app {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100vh;
}

.ids-sidebar {
    background: #1a1d24;
    color: #e6e8eb;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #2a2e36;
    z-index: 1040;
    overflow-y: auto;
    /* Desktop: pin sidebar to viewport so it scrolls internally instead of
       letting the whole window scroll. Without this, the grid track grew
       with the sidebar's content and there was nothing to scroll inside
       the .ids-sidebar element — the body scrolled instead. */
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;  /* critical in grid: stop the item from stretching */
}

.ids-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #2a2e36;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
}
.ids-sidebar-brand:hover {
    color: #fff;
    background: rgba(255,255,255,0.03);
}
.ids-sidebar-brand img {
    height: 32px;
    width: auto;
    background: #fff;
    padding: 3px 5px;
    border-radius: 4px;
}

.ids-sidebar-nav {
    padding: 0.5rem 0;
    flex: 1;
}

.ids-nav-section {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c7280;
    padding: 0.9rem 1.1rem 0.35rem;
}
.ids-section-super {
    color: #c084fc;
}

.ids-nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.1rem;
    color: #cdd2da;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ids-nav-item:hover {
    background: rgba(255,255,255,0.04);
    color: #fff;
}
.ids-nav-item.active {
    background: rgba(46,125,50,0.18);
    color: #fff;
    border-left-color: var(--ids-green);
}
.ids-nav-item i.bi {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
}
.ids-nav-super {
    color: #d9c6f5;
}
.ids-nav-super:hover {
    color: #fff;
}
.ids-nav-super.active {
    background: rgba(107,33,168,0.25);
    border-left-color: #a855f7;
}
.ids-nav-badge {
    margin-left: auto;
    background: #fbbf24;
    color: #1a1d24;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    line-height: 1.3;
}

.ids-sidebar-backdrop {
    display: none;
}

/* Main column */
.ids-main {
    display: flex;
    flex-direction: column;
    min-width: 0; /* allow content to shrink instead of forcing horizontal scroll */
}

.ids-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.ids-sidebar-toggle {
    display: none;             /* hidden on desktop */
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    color: #374151;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.ids-sidebar-toggle:hover { background: #f3f4f6; }

.ids-search {
    flex: 1;
    max-width: 480px;
    position: relative;
    margin: 0;
}
.ids-search .form-control {
    padding-left: 2rem;
}
.ids-search-icon {
    position: absolute;
    top: 50%;
    left: 0.65rem;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    font-size: 0.9rem;
}

.ids-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.ids-user-menu-btn .ids-user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.ids-flash-wrap {
    padding: 1rem 1.5rem 0;
}

.ids-main-content {
    padding: 1.5rem;
    flex: 1;
}

/* Compact back link rendered above page content. Hidden when the page
   body provides its own breadcrumb (the `:has` rule below) so the two
   never stack. */
.ids-breadcrumb {
    padding: 0.5rem 1.5rem 0;
}
.ids-back-link {
    display: inline-flex;
    align-items: center;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.85rem;
}
.ids-back-link:hover {
    color: #1B5E20;
    text-decoration: underline;
}
/* Suppress auto back link when the rendered page provides its own breadcrumb. */
.ids-app:has(.ids-main-content .breadcrumb) .ids-breadcrumb {
    display: none;
}

/* ---------- Mobile: sidebar slides over content ---------- */
@media (max-width: 991.98px) {
    .ids-app {
        grid-template-columns: 1fr;
    }
    .ids-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }
    body.sidebar-open .ids-sidebar {
        transform: translateX(0);
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }
    .ids-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0);
        pointer-events: none;
        transition: background 0.22s ease;
        z-index: 1035;
    }
    body.sidebar-open .ids-sidebar-backdrop {
        background: rgba(0,0,0,0.45);
        pointer-events: auto;
    }
    .ids-sidebar-toggle { display: inline-flex; align-items: center; }
}

/* In-app navbar brand: IDS logo + IDS Portal text (legacy class kept for any
   stray markup; the new shell uses .ids-sidebar-brand). */
.navbar-brand {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.navbar-brand img {
    height: 36px;
    width: auto;
    background: #fff;
    padding: 3px 6px;
    border-radius: 4px;
}

/* Generic form cards (used elsewhere in admin etc) */
.form-card {
    max-width: 450px;
    margin: 2rem auto;
}

/* ============================================================
 * Auth pages (login / signup) — uses the stripped auth layout
 * ============================================================ */

.auth-body {
    background: #f5f5f5;
    display: block;
    min-height: 100vh;
    margin: 0;
}

.auth-flash {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.auth-split {
    display: flex;
    min-height: 100vh;
}

.auth-hero {
    flex: 1 1 55%;
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.auth-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20,40,30,0.85) 0%, rgba(46,125,50,0.55) 50%, rgba(20,40,30,0.85) 100%);
}
.auth-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2.5rem;
    max-width: 540px;
}
.auth-hero-logo {
    max-width: 280px;
    background: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    margin-bottom: 1.75rem;
}
.auth-hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.auth-hero-subtitle {
    font-size: 0.95rem;
    letter-spacing: 4px;
    font-weight: 500;
    opacity: 0.92;
    margin: 0 0 2rem 0;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.auth-hero-tagline {
    font-size: 1.05rem;
    opacity: 0.95;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.auth-panel {
    flex: 1 1 45%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
}
.auth-card-title {
    font-weight: 700;
    color: #222;
    margin-bottom: 0.25rem;
}
.auth-card-subtitle {
    color: #666;
    margin-bottom: 1.5rem;
}
.auth-card-footer {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0;
    color: #666;
}
.auth-card-footer a {
    color: var(--ids-green);
    font-weight: 600;
    text-decoration: none;
}
.auth-card-footer a:hover {
    text-decoration: underline;
}

/* IDS-green primary button on auth pages */
.auth-btn-primary {
    background-color: var(--ids-green);
    border-color: var(--ids-green);
    color: #fff;
    font-weight: 600;
    padding: 0.625rem 1rem;
    transition: background-color 0.15s, transform 0.05s;
}
.auth-btn-primary:hover,
.auth-btn-primary:focus {
    background-color: var(--ids-green-dark);
    border-color: var(--ids-green-dark);
    color: #fff;
}
.auth-btn-primary:active {
    transform: translateY(1px);
}

/* Form input groups on auth pages */
.auth-card .input-group-text {
    background: #f8f9fa;
    color: #888;
    border-right: 0;
}
.auth-card .form-control {
    border-left: 0;
}
.auth-card .form-control:focus {
    border-color: var(--ids-green);
    box-shadow: 0 0 0 0.2rem rgba(46,125,50,0.18);
}

/* Stack vertically on small screens */
@media (max-width: 767px) {
    .auth-split {
        flex-direction: column;
    }
    .auth-hero {
        flex: 0 0 auto;
        min-height: 280px;
    }
    .auth-hero-content {
        padding: 1.5rem;
    }
    .auth-hero-logo {
        max-width: 180px;
        margin-bottom: 1rem;
    }
    .auth-hero-title {
        font-size: 1.8rem;
    }
    .auth-hero-subtitle {
        font-size: 0.8rem;
        letter-spacing: 3px;
    }
    .auth-hero-tagline {
        font-size: 0.95rem;
    }
    .auth-panel {
        padding: 1.5rem 1rem;
    }
}

/* ----- Print styles (Slice 9.2 — hole detail PDF export, but generic) -----
 * Strips app chrome so the printed page is just the content. Elements that
 * shouldn't appear in print should carry the `.no-print` class.
 */
@media print {
    .ids-sidebar,
    .ids-topbar,
    .ids-sidebar-backdrop,
    .breadcrumb,
    .no-print {
        display: none !important;
    }
    .ids-app, .ids-main {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body, body.ids-app-body { background: #fff !important; }
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* Plotly's 3D scene prints from its canvas snapshot — give it room. */
    .ids-chart-target { break-inside: avoid; page-break-inside: avoid; }
    @page { margin: 0.5in; }
}

/* ============================================================
 * PWA / iOS polish (Phase 8 — installable on iPad + iPhone)
 * ============================================================ */

/* Stop iOS Safari from inflating text after orientation flips. */
html { -webkit-text-size-adjust: 100%; }

/* Subtle gray tap flash on iOS. Previously transparent, but with the SW
   doing network-first HTML the brief loading delay made taps feel dead.
   A subtle highlight tells the user "yes, that registered, hang on." */
* { -webkit-tap-highlight-color: rgba(0,0,0,0.08); }

/* Eliminate the 300 ms tap delay + double-tap-zoom interpretation for
   every interactive element. The previous rule scoped this to .btn only,
   so sidebar nav links, dropdown items, table-row links, and breadcrumbs
   were all subject to iOS's double-tap heuristic and felt "dead." */
a, button, [role="button"], summary, label, .dropdown-item, .nav-link,
.list-group-item-action, .ids-nav-item, .ids-back-link {
    touch-action: manipulation;
}

/* iOS Safari zooms when an input focuses and its computed font-size
   is < 16px. Bootstrap's .form-control-sm and .form-select-sm are 14px,
   which triggers the zoom — annoying mid-form. Bump them to 16px on
   touch screens so focus never auto-zooms. Visual size is preserved
   on desktop via the @media gate. */
@media (hover: none) and (pointer: coarse) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    textarea,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"] {
        font-size: 16px !important;
    }
    /* Larger tap targets on touch screens — Apple's 44pt guideline. */
    .btn-sm { min-height: 36px; padding-top: 0.4rem; padding-bottom: 0.4rem; }
    .btn:not(.btn-sm) { min-height: 44px; }

    /* Sidebar nav links were ~32px tall. iOS skips taps in dense lists
       under 44px — the most-reported "dead area" symptom in the PWA. */
    .ids-nav-item {
        min-height: 44px;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    /* Bootstrap dropdown items (notifications, user menu) — same issue. */
    .dropdown-item {
        min-height: 44px;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    /* Notification dropdown is min-width: 340px inline — overflows a 375px
       iPhone with the right-anchored placement, pushing items off-screen
       where taps land on nothing. Clamp it to viewport width. */
    .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }

    /* Action links inside list-group / table rows — table-action density
       is the second-most-reported tap miss area. */
    .list-group-item-action {
        min-height: 44px;
    }
    .table td .btn-sm,
    .table td a.btn {
        min-height: 36px;
    }
}

/* KPI cards rendered as <a> elements — make the tap obvious and lift on
   hover so it's clear the whole card is the link, not just the text. */
.kpi-card-link {
    display: block;
    transition: transform 0.08s ease, box-shadow 0.12s ease;
    cursor: pointer;
}
.kpi-card-link:hover,
.kpi-card-link:focus {
    box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}
.kpi-card-link:active {
    transform: scale(0.99);
}

/* Defensive: the mobile sidebar backdrop is always in the DOM at inset:0
   with z-index 1035. pointer-events:none should let taps through, but on
   some iOS versions a backdrop-blur or stale composition layer still
   intercepts. Add visibility:hidden when closed as a belt-and-suspenders
   guarantee — visibility:hidden cannot receive any input. */
@media (max-width: 991.98px) {
    .ids-sidebar-backdrop {
        visibility: hidden;
    }
    body.sidebar-open .ids-sidebar-backdrop {
        visibility: visible;
    }
}

/* Safe-area awareness — when installed as a PWA in standalone mode the
   notch / dynamic island / home indicator sit at the edges of the viewport.
   Pad the topbar and sidebar so nothing slides under them. */
.ids-topbar {
    padding-top:    env(safe-area-inset-top,    0);
    padding-left:   env(safe-area-inset-left,   0);
    padding-right:  env(safe-area-inset-right,  0);
}
.ids-sidebar {
    padding-top:    env(safe-area-inset-top,    0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
main.container {
    /* Bottom-padding so footer content clears the iPhone home indicator. */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0)) !important;
}

/* Bootstrap form-control-sm uses 0.875rem (~14px), but on iPad ≥1024 we
   want to keep desktop density. The pointer:coarse override above only
   targets actual touch input, so iPad with a Bluetooth trackpad/mouse
   stays at 14px — that's fine. */