/* ==========================================================================
   Responsive Layer  ·  Mobile · Tablet · Desktop
   Breakpoints:
     - Mobile  : up to 575.98px
     - Tablet  : 576px – 991.98px
     - Desktop : 992px and up
   Applies to admin/staff shell, parent portal, public site, forms, tables,
   cards, gallery, modals, and print.
   ========================================================================== */

/* ---------- Global fluid safety ---------- */
html { -webkit-text-size-adjust: 100%; }
img, video, svg { max-width: 100%; height: auto; }
canvas { max-width: 100%; }
table { max-width: 100%; }

/* Prevent side-scroll from long words / URLs */
body, .app-content, .premium-card, .card-body { overflow-wrap: anywhere; word-break: break-word; }

/* Give hero/heading text a fluid scale */
h1 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.9rem); }
h3 { font-size: clamp(1.1rem, 1rem + .9vw, 1.6rem); }
h4 { font-size: clamp(1rem, .95rem + .5vw, 1.35rem); }

/* Tap targets on touch devices */
@media (pointer: coarse) {
    .btn, .nav-link, .side-nav a, .dropdown-item, .form-control, .form-select {
        min-height: 44px;
    }
}

/* ==========================================================================
   ADMIN / STAFF SHELL  (sidebar + topbar + content)
   ========================================================================== */

/* Hamburger button (hidden on desktop, shown on tablet & mobile) */
.sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(15,23,42,.12);
    color: var(--brand-primary, #0B32D9);
    width: 40px; height: 40px;
    border-radius: 10px;
    align-items: center; justify-content: center;
    font-size: 20px;
    margin-right: 8px;
    cursor: pointer;
}
.sidebar-toggle:hover { background: rgba(11,50,217,.06); }

/* Backdrop for the off-canvas sidebar */
.sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(2,6,23,.45);
    z-index: 29;
    backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }

/* --- Tablet (<= 991.98px) --- */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 260px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 30;
        box-shadow: 0 20px 60px rgba(0,0,0,.25);
        overflow-y: auto;
    }
    .app-sidebar.open { transform: translateX(0); }
    .app-main { width: 100%; margin-left: 0 !important; }
    .sidebar-toggle { display: inline-flex; }
    .app-topbar {
        position: sticky; top: 0; z-index: 20;
        padding: 10px 14px;
        gap: 8px;
    }
    .topbar-title { font-size: 1rem; }
    .topbar-actions .chip,
    .topbar-actions .me-2 span { display: none; }
    .app-content { padding: 14px; }
}

/* --- Mobile (<= 575.98px) --- */
@media (max-width: 575.98px) {
    .app-sidebar { width: 84vw; max-width: 300px; }
    .app-topbar { flex-wrap: wrap; padding: 8px 10px; }
    .topbar-title { flex: 1 1 100%; order: -1; font-size: .95rem; }
    .topbar-actions { flex-wrap: wrap; gap: 6px; }
    .topbar-actions .btn { padding: 6px 10px; font-size: .85rem; }
    .topbar-actions form .btn { padding: 6px 10px; }
    .topbar-actions .notif-bell .dropdown-menu {
        width: 92vw !important;
        max-width: 360px;
        right: 0 !important; left: auto !important;
    }
    .app-content { padding: 10px; }
    .premium-card, .card { border-radius: 12px; }
    .premium-card .p-5 { padding: 1.25rem !important; }
    .premium-card .p-4 { padding: 1rem !important; }
    /* KPIs stack cleanly */
    .kpi { min-height: 96px; padding: 12px; }
    .kpi h3, .kpi .display-6 { font-size: 1.35rem; }
    /* Tighter tables */
    .table td, .table th { padding: .5rem .5rem; font-size: .875rem; }
}

/* Hide brand tagline on very small side panels */
@media (max-width: 575.98px) {
    .brand-sub { display: none; }
    .brand-title { font-size: .95rem; }
}

/* --- Desktop (>= 992px) --- */
@media (min-width: 992px) {
    .sidebar-toggle, .sidebar-backdrop { display: none !important; }
    /* Keep sidebar fixed so page scroll doesn't move it */
    .app-sidebar { transform: none !important; position: fixed; top: 0; left: 0; height: 100vh; }
}

/* ==========================================================================
   TABLES  — responsive scroll containers
   ========================================================================== */
.table-responsive-lg,
.table-responsive-md,
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
    .table thead th { white-space: nowrap; }
    /* Auto-wrap non-scrollable tables in horizontal scroll */
    .app-content > table,
    .premium-card > table {
        display: block; overflow-x: auto; white-space: nowrap;
    }
}

/* ==========================================================================
   FORMS  — stack labels, avoid iOS zoom on inputs
   ========================================================================== */
@media (max-width: 767.98px) {
    .form-control, .form-select, .form-control-lg, .form-select-lg,
    .input-group-text {
        font-size: 16px; /* prevents iOS zoom */
    }
    .row.g-3 > [class*="col-"] { margin-bottom: .5rem; }
    .btn-group-lg > .btn, .btn-lg { padding: .55rem 1rem; font-size: 1rem; }
}

/* ==========================================================================
   MODALS  — fullscreen on mobile for readability
   ========================================================================== */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen-sm-down) { margin: 8px; }
    .modal-dialog.modal-xl, .modal-dialog.modal-lg {
        max-width: calc(100vw - 16px);
    }
    .modal-body { padding: 12px; }
    .modal-header, .modal-footer { padding: 10px 12px; }
    .gallery-modal .modal-dialog {
        margin: 0;
        max-width: 100vw;
        height: 100vh;
    }
    .gallery-modal .modal-content { height: 100vh; border-radius: 0; }
}

/* ==========================================================================
   GALLERY  — grouped cards & slideshow
   ========================================================================== */
@media (max-width: 575.98px) {
    .album-card { border-radius: 14px; }
    .album-card img, .album-card video { height: 180px; }
    .album-title { font-size: 1rem; }
    .thumb-row { gap: 6px; }
    .thumb-row button { width: 56px; height: 42px; }
    .carousel-item img, .carousel-item video { max-height: 55vh; object-fit: contain; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .album-card img, .album-card video { height: 220px; }
    .carousel-item img, .carousel-item video { max-height: 62vh; object-fit: contain; }
}

/* ==========================================================================
   PARENT PORTAL
   ========================================================================== */
@media (max-width: 767.98px) {
    .portal-hero, .portal-header { padding: 14px !important; }
    .portal-hero h1, .portal-header h1 { font-size: 1.25rem; }
    .portal-tiles .kpi { min-height: 88px; }
    .portal-tabs .nav-link { padding: .5rem .75rem; font-size: .9rem; }
    /* Finance summary tiles stack */
    .finance-summary .col-md-4,
    .finance-summary .col-lg-4 { flex: 0 0 100%; max-width: 100%; margin-bottom: .5rem; }
}

/* ==========================================================================
   PUBLIC SITE
   ========================================================================== */
@media (max-width: 991.98px) {
    .public-topstrip { display: none !important; }
    .public-navbar .navbar-brand { font-size: 1rem; }
    .public-logo { width: 38px; height: 38px; }
    .hero, .hero-slim { min-height: auto; padding: 24px 12px; text-align: center; }
    .hero h1 { font-size: clamp(1.4rem, 4vw, 2.25rem); }
    .mv-card, .feature-card { padding: 18px; }
}
@media (max-width: 575.98px) {
    .public-footer .col-md-3,
    .public-footer .col-md-4 { margin-bottom: 1.25rem; }
    .btn-premium-cta, .btn-brand-gold, .btn-brand { width: 100%; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.desktop-only { display: none; }
.mobile-only  { display: initial; }
@media (min-width: 992px) {
    .desktop-only { display: initial; }
    .mobile-only  { display: none; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .app-sidebar, .app-topbar, .sidebar-toggle, .sidebar-backdrop,
    .no-print, .btn, .topbar-actions, .toast-stack, .public-navbar,
    .public-topstrip, .public-footer { display: none !important; }
    .app-main, .app-content, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    .premium-card, .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    a { color: #000 !important; text-decoration: none !important; }
}