/* ── Viewport & Base ─────────────────────────────────────────── */
* { box-sizing: border-box; }

/* ── Login Card ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .vh-100 {
        min-height: 100svh !important;
        padding: 16px !important;
    }

    /* Login card full width on mobile */
    .card {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 16px !important;
    }

    /* Bigger tap targets for inputs */
    .form-control,
    input.form-control,
    select.form-select {
        font-size: 16px !important; /* prevents iOS zoom */
        height: 52px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
    }

    /* Bigger buttons */
    .btn {
        height: 52px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
    }

    /* Stack all columns vertically */
    .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Tabs — full width scrollable */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        border-bottom: 2px solid #dee2e6 !important;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link {
        white-space: nowrap !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* Form labels */
    .form-label {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
    }

    /* Textarea */
    textarea.form-control {
        height: auto !important;
        min-height: 100px !important;
        font-size: 16px !important;
    }

    /* Cards/panels */
    .card-body {
        padding: 16px !important;
    }

    /* Containers — no side padding on mobile */
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Logo */
    img[height="80px"] {
        height: 60px !important;
    }

    /* Headings */
    h3 { font-size: 20px !important; }
    h4 { font-size: 18px !important; }
    h5 { font-size: 16px !important; }
    h6 { font-size: 14px !important; }

    /* Status cards — stack 2 per row on phone */
    .status-card {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Upload button */
    .dcc-upload {
        padding: 20px !important;
        font-size: 15px !important;
    }

    /* Alert/toast messages */
    .alert {
        font-size: 14px !important;
        padding: 12px !important;
    }

    /* Table — horizontal scroll */
    .dash-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Navbar / header */
    .navbar-brand {
        font-size: 15px !important;
    }

    /* Modal full screen on mobile */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
    .modal-content {
        border-radius: 16px !important;
    }
}

/* ── Small phones (iPhone SE etc) ───────────────────────────── */
@media (max-width: 380px) {
    .form-control,
    input.form-control {
        font-size: 15px !important;
    }
    h3 { font-size: 18px !important; }
    .btn { height: 48px !important; }
}

/* ── Header fix — collapse on mobile ────────────────────────── */
@media (max-width: 768px) {

    /* Hide the tagline and separator pipes on mobile */
    .navbar-brand span,
    [style*="font-style: italic"],
    [style*="fontStyle: italic"] {
        display: none !important;
    }

    /* Header row — stack logo + title */
    .navbar, [class*="header"] {
        padding: 8px 12px !important;
    }

    /* Make header a single clean row */
    .navbar .row,
    .header-row {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Logo smaller on mobile */
    .navbar img, header img,
    img[src*="Logo"] {
        height: 40px !important;
        width: auto !important;
    }

    /* Company name — single line, smaller */
    h1, .navbar-brand h1 {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Quick Links button — smaller */
    .dropdown-toggle {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }

    /* Date/time display — smaller */
    [style*="fontSize: 13px"],
    [style*="font-size: 13px"] {
        font-size: 11px !important;
    }

    /* Logout button */
    #logout-btn {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

    /* Submit button full width */
    #submit-request-btn {
        width: 100% !important;
        height: 52px !important;
        font-size: 16px !important;
    }
}