/* =========================================================
   digital-passport/assets/css/mobile.css
   ---------------------------------------------------------
   MOBILE-SPECIFIC OVERRIDES
   - Loaded AFTER style.css
   - Target phones & small tablets
   - Touch-friendly, thumb-first UX
   ---------------------------------------------------------
   MARKING NOTES:
   ✅ ChatGPT builds this file fully
   ⬇️ Depends on:
   - assets/css/style.css
   - Bootstrap (base)
   ========================================================= */

/* ===============================
   GLOBAL MOBILE TWEAKS
   =============================== */
@media (max-width: 768px) {

    body {
        font-size: 15px;
        line-height: 1.5;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Prevent zoom on input focus (iOS) */
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* ===============================
   TOP BAR / HEADER
   =============================== */
@media (max-width: 768px) {

    .topbar {
        padding: 10px 0;
    }

    .brand-pill img {
        height: 28px;
    }

    .brand-pill div {
        font-size: 13px;
        line-height: 1.2;
    }
}

/* ===============================
   CARDS & SECTIONS
   =============================== */
@media (max-width: 768px) {

    .card,
    .cardx {
        border-radius: 14px;
        padding: 16px;
        box-shadow: 0 8px 26px rgba(0,0,0,0.07);
    }

    .section {
        padding: 16px 0;
    }
}

/* ===============================
   BUTTONS (THUMB FRIENDLY)
   =============================== */
@media (max-width: 768px) {

    .btn {
        min-height: 46px;
    }

    .btn-strong,
    .btn-xl {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 16px;
    }

    .btn-round {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ===============================
   FORMS
   =============================== */
@media (max-width: 768px) {

    .form-label {
        font-size: 12px;
    }

    .form-control,
    .form-select {
        padding: 14px;
        border-radius: 14px;
    }
}

/* ===============================
   DIGITAL PASSPORT GRID
   =============================== */
@media (max-width: 768px) {

    .passport-grid {
        gap: 12px;
    }

    .passport-item {
        padding: 12px;
        border-radius: 14px;
    }

    .passport-item .icon {
        font-size: 24px;
    }
}

@media (max-width: 480px) {

    .passport-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================
   QR SCANNER & FALLBACK INPUT
   =============================== */
@media (max-width: 768px) {

    .scanner-container {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
    }

    .code-input {
        gap: 6px;
    }

    .code-input input {
        width: 40px;
        height: 52px;
        font-size: 22px;
        border-radius: 10px;
    }
}

/* ===============================
   TABLES (MOBILE READABILITY)
   =============================== */
@media (max-width: 768px) {

    .table {
        font-size: 13px;
    }

    .table thead {
        display: none;
    }

    .table tbody tr {
        display: block;
        margin-bottom: 12px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }

    .table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 10px 14px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .table tbody td:last-child {
        border-bottom: none;
    }

    .table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: rgba(0,0,0,0.55);
    }
}

/* ===============================
   MODALS / POPUPS
   =============================== */
@media (max-width: 768px) {

    .modal-dialog {
        margin: 12px;
    }

    .modal-content {
        border-radius: 18px;
    }
}

/* ===============================
   ADMIN DASHBOARD (MOBILE)
   =============================== */
@media (max-width: 768px) {

    .admin-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .metric .value {
        font-size: 22px;
    }
}

/* ===============================
   ANIMATIONS (LIGHTER ON MOBILE)
   =============================== */
@media (max-width: 768px) {

    .btn-glow:hover {
        animation: none;
        box-shadow: none;
    }
}

/* ===============================
   SAFE AREAS (iOS NOTCH)
   =============================== */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}