/* VolunTrak Acara Overrides
   Only add VolunTrak-specific tokens and utility rules here.
   Do NOT duplicate Acara's style.css rules.
*/

/* Status badge helpers (used in table cells) */
.badge-vt-pending  { background: rgba(250,204,21,.18); color: #a16207; }
.badge-vt-approved { background: rgba(34,197,94,.18);  color: #166534; }
.badge-vt-denied   { background: rgba(248,113,113,.18); color: #b91c1c; }

/* Page title section used on content pages */
.vt-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.vt-page-header h4 { margin: 0; font-size: 1.35rem; font-weight: 700; }
.vt-page-header .vt-subtitle { color: #6e6e78; font-size: .9rem; margin: .2rem 0 0; }

/* Breadcrumb item override */
.breadcrumb-item + .breadcrumb-item::before { content: "›"; }

/* Layout-injected breadcrumb bar (appears above page content, below header) */
.vt-layout-breadcrumb {
    padding: .55rem 0 .35rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.vt-layout-breadcrumb .breadcrumb {
    font-size: .82rem;
    background: none;
    padding: 0;
}
.vt-layout-breadcrumb .breadcrumb-item a { color: #FE634E; text-decoration: none; }
.vt-layout-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
.vt-layout-breadcrumb .breadcrumb-item.active { color: #6e6e78; }

/* Inline filter bar */
.vt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}
.vt-filters .form-control,
.vt-filters .form-select { max-width: 220px; }

/* Stat card metric text */
.vt-stat-value { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.vt-stat-label { font-size: .78rem; color: #6e6e78; font-weight: 500; margin-bottom: .25rem; }

/* Keep inline form from Razor Pages stacking oddly */
form.d-inline { display: inline !important; }

/* Table row hover */
.table-hover tbody tr:hover { background-color: rgba(254, 99, 78, .04); }

/* ============================================================
   VolunTrak Grid & Card Sizing System
   ============================================================
   Built on Bootstrap 5. Add .vt-grid to any <div class="row">
   to apply standard gap and section bottom-margin tokens.
   Use .vt-col-* on column divs for the canonical size variants.

   ALLOWED combinations (width × height):
     h=1:  1×1   2×1   3×1   4×1
     h=2:  1×2   2×2         4×2
     h=3:  1×3               4×3
     h=4:                    4×4

   All other combinations (e.g. 3×2, 3×3, 2×3) are NOT defined
   here and must not be used. Any column div that carries none of
   the .vt-col-* classes inside a .vt-grid row is normalised to
   1×1 by the .vt-grid > [class*="col"] fallback rule below.

   Widths map to Bootstrap column fractions out of 4:
     w=1 → 25%    w=2 → 50%    w=3 → 75%    w=4 → 100%
   ============================================================ */

/* --- Spacing tokens --- */
:root {
    --vt-gap:        1rem;       /* gutter between columns          */
    --vt-section-mb: 1.5rem;     /* margin-bottom between sections  */
    --vt-card-pad:   1.25rem;    /* card-body inner padding         */
    --vt-h2:         17rem;      /* min-height for h=2 variants     */
    --vt-h3:         26rem;      /* min-height for h=3 variants     */
}

/* --- Standard grid row ---
   Add .vt-grid alongside .row to standardise gap + section spacing.
   Replaces ad-hoc .g-3 / .g-4 / .mb-3 / .mb-4 combinations.      */
.vt-grid {
    --bs-gutter-x: var(--vt-gap);
    --bs-gutter-y: var(--vt-gap);
    margin-bottom: var(--vt-section-mb) !important;
}

/* Standard card body padding when inside a .vt-grid row */
.vt-grid .card > .card-body {
    padding: var(--vt-card-pad);
}

/* Fallback: any column child of .vt-grid that has no .vt-col-*
   class is silently clamped to 1×1 (25% width, natural height).
   This prevents invalid or unmapped sizes from breaking layout.  */
.vt-grid > [class*="col"]:not([class*="vt-col-"]) {
    flex: 0 0 auto;
    width: 25%;
}

/* ---- h=1 variants (natural card height) ---- */

/* 1×1 — quarter-width; use for stat/KPI cards (4 per row) */
.vt-col-1x1 { flex: 0 0 auto; width: 25%; }

/* 2×1 — half-width; use for medium-width panels (2 per row) */
.vt-col-2x1 { flex: 0 0 auto; width: 50%; }

/* 3×1 — three-quarter-width; use for wide primary panels */
.vt-col-3x1 { flex: 0 0 auto; width: 75%; }

/* 4×1 — full-width; use for full-bleed panels and tables */
.vt-col-4x1 { flex: 0 0 auto; width: 100%; }

/* ---- h=2 variants (enforced min-height) ---- */

/* 1×2 — quarter-width, tall */
.vt-col-1x2 { flex: 0 0 auto; width: 25%; }
.vt-col-1x2 > .card { min-height: var(--vt-h2); }

/* 2×2 — half-width, tall */
.vt-col-2x2 { flex: 0 0 auto; width: 50%; }
.vt-col-2x2 > .card { min-height: var(--vt-h2); }

/* NOTE: 3×2 is NOT an allowed combination. Use 4×2 or 2×2 instead. */

/* 4×2 — full-width, tall (calendars, rich data panels) */
.vt-col-4x2 { flex: 0 0 auto; width: 100%; }
.vt-col-4x2 > .card { min-height: var(--vt-h2); }

/* ---- h=3 variants (enforced min-height) ---- */

/* 1×3 — quarter-width, extra-tall (deep sidebars / detail panels) */
.vt-col-1x3 { flex: 0 0 auto; width: 25%; }
.vt-col-1x3 > .card { min-height: var(--vt-h3); }

/* 4×3 — full-width, extra-tall (full-page rich panels, calendars) */
.vt-col-4x3 { flex: 0 0 auto; width: 100%; }
.vt-col-4x3 > .card { min-height: var(--vt-h3); }

/* NOTE: 2×3, 3×3 are NOT allowed combinations.                */

/* ---- h=4 variants (enforced min-height) ---- */

/* 4×4 — full-width, maximum-tall (e.g. full-page embeds, large calendars) */
:root { --vt-h4: 40rem; }
.vt-col-4x4 { flex: 0 0 auto; width: 100%; }
.vt-col-4x4 > .card { min-height: var(--vt-h4); }

/* NOTE: only 4×4 is permitted at h=4. 1×4, 2×4, 3×4 are disallowed. */

/* ============================================================
   Mobile PWA Improvements (#1180)
   Touch targets ≥ 44×44px, overflow control, 375px layout.
   ============================================================ */

/* --- Touch target enforcement (WCAG 2.5.5) ---
   Buttons, links, and interactive controls must be at least 44×44px
   on touch devices so they are easily tappable.                  */
@media (pointer: coarse) {
    .btn,
    button:not([aria-label="Close"]),
    a.btn,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        min-width: 44px;
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 1rem; /* prevent iOS auto-zoom (<= 16px triggers it) */
    }

    .form-check {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0;
    }

    /* Table action buttons in a cell: ensure tap size */
    td .btn-sm, th .btn-sm { min-height: 44px; min-width: 44px; }
}

/* --- Prevent horizontal overflow on mobile ---
   Images, tables, and inputs must not cause horizontal scrolling
   at 375px viewport.                                              */
@media (max-width: 575.98px) {
    /* Prevent any element from overflowing the viewport */
    .container,
    .container-fluid,
    .card,
    .card-body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Ensure all form inputs fill available width */
    .form-control,
    .form-select,
    .input-group {
        max-width: 100%;
        width: 100%;
    }

    /* Input groups: stack on very small screens to avoid overflow */
    .input-group { flex-wrap: wrap; }
    .input-group > .form-control,
    .input-group > .form-select { flex: 1 1 100%; border-radius: .375rem !important; }
    .input-group > .btn { flex: 0 0 100%; border-radius: .375rem !important; margin-top: .25rem; }

    /* Tables: force horizontal scrolling within a wrapper, not page-level */
    table:not(.table-responsive table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Images */
    img { max-width: 100%; height: auto; }

    /* Reduce padding on containers for narrow screens */
    .container { padding-left: .75rem; padding-right: .75rem; }
    .card-body { padding: 1rem; }

    /* Page header: stack title and actions vertically */
    .vt-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Filter bars: stack on mobile */
    .vt-filters .form-control,
    .vt-filters .form-select { max-width: 100%; width: 100%; }

    /* Stat value font size: scale down for narrow screens */
    .vt-stat-value { font-size: 1.5rem; }

    /* Modal dialogs: full-width on mobile */
    .modal-dialog { margin: .5rem; }
    .modal-content { border-radius: .5rem; }

    /* Ensure nav header doesn't overflow */
    .nav-header { padding: .75rem 1rem; }

    /* QR scanner: fill width */
    #qr-reader { width: 100% !important; max-width: 100% !important; }
}

/* ============================================================
   Clickable stat cards — dashboard metric cards
   Add .vt-card-clickable to any .card that wraps a stretched-link.
   Bootstrap 5 .card already has position:relative, so the
   stretched-link ::after pseudo-element covers the full surface.
   ============================================================ */
.vt-card-clickable {
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease;
}
.vt-card-clickable:hover,
.vt-card-clickable:focus-within {
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}

/* ---- Responsive behaviour ----
   Tablet (< 992 px):
     quarter-width columns (1×1, 1×2, 1×3) → 50%
     3×1 → 100%
   Mobile (< 576 px): every variant stacks to 100%.            */
@media (max-width: 991.98px) {
    .vt-col-1x1,
    .vt-col-1x2,
    .vt-col-1x3  { width: 50%; }
    .vt-col-3x1  { width: 100%; }

    /* Fallback columns also widen on tablet */
    .vt-grid > [class*="col"]:not([class*="vt-col-"]) { width: 50%; }
}

@media (max-width: 575.98px) {
    .vt-col-1x1,
    .vt-col-2x1,
    .vt-col-3x1,
    .vt-col-4x1,
    .vt-col-1x2,
    .vt-col-2x2,
    .vt-col-4x2,
    .vt-col-1x3,
    .vt-col-4x3,
    .vt-col-4x4  { width: 100%; }

    /* Fallback columns stack on mobile */
    .vt-grid > [class*="col"]:not([class*="vt-col-"]) { width: 100%; }
}