/**
 * Mobile & tablet responsive styles — Gold Bullion ERP + Jewellery Store
 */

/* ─── Global mobile base ─────────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }

/* Touch-friendly tap targets */
@media (max-width: 768px) {
    .btn, .sidebar-link, .nav-link-custom, .role-pick-card,
    .role-card-detailed, .quick-action-btn, .sidebar-toggle, .landing-mobile-toggle {
        min-height: 44px;
    }

    input.form-control, select.form-select, .login-input-wrap .form-control {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }
}

/* ─── Landing: mobile nav drawer ─────────────────────────── */
.landing-mobile-toggle {
    display: none;
    background: linear-gradient(135deg, #d97706, #fbbf24);
    border: none;
    border-radius: 10px;
    padding: .45rem .65rem;
    color: #1a0a0f;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.landing-mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: min(300px, 88vw);
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, #1a0a0f, #4a0e1e);
    z-index: 1100;
    padding: 1.25rem;
    transition: right .3s ease;
    box-shadow: -8px 0 32px rgba(0,0,0,.4);
    overflow-y: auto;
}

.landing-mobile-nav.open { right: 0; }

.landing-mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,215,0,.2);
}

.landing-mobile-nav-header span {
    font-family: Georgia, serif;
    color: #ffd700;
    font-weight: 600;
}

.landing-mobile-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: .25rem;
}

.landing-mobile-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.landing-mobile-links a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-weight: 600;
    padding: .85rem 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.landing-mobile-links a:hover,
.landing-mobile-links a:active {
    background: rgba(255,215,0,.12);
    color: #ffd700;
}

.landing-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1090;
    backdrop-filter: blur(4px);
}

.landing-mobile-overlay.show { display: block; }

/* ─── Landing: jewellery store ─────────────────────────── */
@media (max-width: 991px) {
    .landing-mobile-toggle { display: flex; align-items: center; justify-content: center; }

    .jewellery-nav .nav-link-custom { display: none !important; }

    .jewellery-nav { top: 0; }

    .store-topbar {
        font-size: .68rem;
        padding: .35rem 0;
        text-align: center;
    }

    .store-topbar .container-fluid {
        flex-direction: column;
        align-items: center !important;
        gap: .25rem !important;
    }

    .store-topbar span:first-child {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .jewellery-hero {
        padding: 6.5rem 0 3rem;
        min-height: auto;
    }

    .jewellery-hero h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }

    .hero-desc { font-size: .95rem; max-width: 100%; }

    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: .65rem;
    }

    .hero-actions .btn { width: 100%; margin-left: 0 !important; }

    .hero-trust {
        flex-direction: column;
        gap: .65rem;
    }

    .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }

    .ov-bridal { min-height: 140px !important; }

    .ornament-visual i { font-size: 2rem !important; }
    .showcase-main .ornament-visual i { font-size: 3rem !important; }

    .stock-strip-inner {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .stock-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }

    .stock-item {
        background: rgba(255,255,255,.06);
        border-radius: 12px;
        padding: .75rem;
        text-align: center;
    }

    .landing-section { padding: 3rem 0; }

    .section-heading { font-size: 1.5rem; }

    .section-sub { margin-bottom: 2rem; font-size: .9rem; }

    .about-visual { margin-bottom: 1.5rem; }

    .about-frame { width: 100%; max-width: 280px; height: 260px; }

    .section-heading.text-start { text-align: center !important; }

    .team-card strong { font-size: .85rem; }

    .jewellery-footer .row { text-align: center; }

    .landing-cta h2 { font-size: 1.35rem; }

    .logo-text { font-size: .95rem; max-width: 160px; line-height: 1.2; }
}

@media (max-width: 575px) {
    .container-fluid.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }

    .ornament-card .ornament-design { height: 130px; }

    .ornament-design i { font-size: 2.75rem !important; }

    .stock-items { grid-template-columns: 1fr 1fr; }

    .stock-item strong { font-size: .95rem; }

    .showcase-grid { grid-template-columns: 1fr 1fr; }

    .service-card { padding: 1.25rem; }

    .jewellery-nav .btn-gold { padding: .45rem .75rem !important; font-size: .82rem; }

    .jewellery-nav .btn-gold .bi-lock-fill + span,
    .jewellery-nav .btn-gold { white-space: nowrap; }
}

/* ─── Login page mobile ──────────────────────────────────── */
@media (max-width: 991px) {
    .jewellery-login .login-left { display: none !important; }

    .login-compact-page { padding: 1rem; align-items: flex-start; padding-top: 1.5rem; }

    .login-compact-card { border-radius: 20px; }

    .role-pick-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── ERP dashboard mobile ───────────────────────────────── */
@media (max-width: 991px) {
    .app-header {
        padding: 0 1rem;
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        gap: .5rem;
        padding-top: .65rem;
        padding-bottom: .65rem;
    }

    .header-title h2 { font-size: 1rem; }

    .header-title .breadcrumb-text { display: none; }

    .header-right {
        flex-wrap: wrap;
        gap: .4rem;
        width: 100%;
        justify-content: flex-start;
    }

    .header-chip.gold-rate { display: none; }

    .app-content { padding: 1rem !important; }

    .corp-hero {
        padding: 1rem 1.15rem !important;
    }

    .corp-hero-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .75rem !important;
    }

    .corp-hero h1 { font-size: 1.25rem !important; }

    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .toolbar-left, .toolbar-right {
        flex-wrap: wrap;
        width: 100%;
    }

    .toolbar-sort, .toolbar-dir {
        flex: 1;
        min-width: 120px;
    }

    .toolbar-right {
        justify-content: flex-start;
        gap: .35rem;
    }

    .btn-export { flex: 1; text-align: center; min-width: 0; }

    .quick-actions { grid-template-columns: 1fr; }

    .quick-action-btn { padding: 1rem; }

    .calc-panel { padding: 1rem; }

    .totals-bar { flex-direction: column; gap: .75rem; }

    .panel-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .5rem;
    }

    /* Scrollable tables */
    .app-content .corp-panel,
    .app-content .panel-card,
    .app-content .table-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .app-content table {
        min-width: 520px;
    }

    .report-card { padding: 1.25rem; }

    .modal-dialog { margin: .75rem; max-width: calc(100% - 1.5rem); }
}

@media (max-width: 575px) {
    .stat-grid { grid-template-columns: 1fr !important; }

    .stat-card { padding: 1rem; }

    .stat-card .stat-value { font-size: 1.35rem; }

    .header-chip.live span:not(.live-dot) {
        font-size: .68rem;
    }

    .sidebar-brand h1 { font-size: .95rem; }

    .form-row-mobile-stack .col,
    .form-row-mobile-stack [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .inventory-form-grid .row > [class*="col-"] {
        margin-bottom: .5rem;
    }

    .role-cards { grid-template-columns: 1fr !important; }

    .ornament-meta { flex-direction: column; gap: .25rem; }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
    .app-header,
    .jewellery-nav,
    .store-topbar,
    .landing-mobile-nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .app-content,
    .landing-footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}