/* ═══════════════════════════════════════════════════════════════
   Global mobile layout
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Collapsed: 50px icon-only strip */
    .hi-sidebar-collapsed {
        width: 50px !important;
        min-width: 50px !important;
        align-items: center !important;
        padding-top: 14px !important;
    }

    /* Expanded: full-width slide-in overlay drawer */
    .hi-sidebar-expanded {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 260px !important;
        min-width: 260px !important;
        height: 100dvh !important;   /* dvh = real visible height on mobile browsers */
        z-index: 1050 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.65) !important;
        overflow: hidden !important; /* outer clips; only nav section scrolls */
    }

    /* Nav links: scrollable; logout icon is at top so long menus are fine */
    .hi-sidebar-expanded .hi-sidebar-nav {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; /* iOS momentum scroll */
        overscroll-behavior: contain !important;
    }

    /* Page content: full usable width (sidebar is overlay, not inline) */
    #page-content {
        min-width: 0 !important;
        overflow-x: hidden;
    }

    /* Bootstrap containers: tighter padding */
    .container { padding: 12px !important; }
    .card      { padding: 14px !important; }

    /* Landing quick-cards: single column on mobile */
    .hi-landing-cards { grid-template-columns: 1fr !important; }

    /* Login / unlock cards: full-width with margin */
    .d-flex.justify-content-center > div,
    .d-flex.justify-content-center.align-items-center > div,
    .d-flex.justify-content-center.align-items-start > div {
        max-width: 100% !important;
        margin: 12px !important;
    }
}

@media (max-width: 480px) {
    /* DatePicker: shrink font on tiny screens */
    .dash-date-picker-range input { font-size: 13px !important; padding: 8px !important; }
    /* Buttons */
    .btn { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Landing page  (.hi-landing-*)  — dark defaults
   ══════════════════════════════════════════════════════════════ */
.hi-landing-page        { padding: 36px 40px; background-color: #1a1f2e; min-height: 100vh; }
.hi-landing-title       { font-weight: 700; color: #e8eaf0; }
.hi-landing-subtitle    { font-size: 0.875rem; color: #8892a4; }
.hi-landing-card {
    position: relative; background-color: #252b3b;
    border-radius: 8px; padding: 18px 18px 18px 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 1px solid #2d3548;
    width: 240px; cursor: pointer;
}
.hi-landing-card:hover  { transform: translateY(-2px); border-color: #4a5578; }
.hi-landing-card-title  { font-weight: 700; font-size: 0.95rem; color: #e8eaf0; margin-bottom: 6px; }
.hi-landing-card-desc   { font-size: 0.8rem; color: #8892a4; line-height: 1.4; }
.hi-landing-section          { margin-bottom: 32px; }
.hi-landing-section-title {
    font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; color: #5a6478;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid #2d3548;
}
.hi-landing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}
.hi-landing-card-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hi-landing-card-title-row .hi-landing-card-title { margin-bottom: 0; }
.hi-landing-card-flag  { font-size: 14px; margin-right: 5px; }
.hi-landing-ext-icon   { font-size: 11px; color: #5a6478; flex-shrink: 0; margin-left: 4px; }
.hi-landing-state-flags { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; flex-shrink: 0; }
.hi-landing-state-flag  { height: 22px; width: auto; border-radius: 2px;
                           box-shadow: 0 1px 3px rgba(0,0,0,0.35);
                           object-fit: cover; vertical-align: middle; }
.hi-landing-state-flag:-moz-broken { display: none; }
.hi-landing-state-flag[src]:not([naturalWidth]) { opacity: 0; width: 0; margin: 0; }