/* =====================================================================
   Mobile / responsive layer — "Emerald Glass"
   Every rule here is scoped to small viewports (or coarse-pointer devices),
   so the desktop layout is left exactly as it is. Tuned for phones:
   comfortable spacing, legible type, real tap targets, and data tables
   that keep their context while scrolling.
   ===================================================================== */

/* =====================================================================
   Phones & small tablets : ≤ 768px
   ===================================================================== */
@media (max-width: 768px) {

    /* ---- Layout & spacing ---- */
    .container,
    main.container { padding-left: 14px; padding-right: 14px; }
    main.container.py-4 { padding-top: 1rem; padding-bottom: 1.5rem; }

    [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }

    /* ---- Typography: smaller but readable ---- */
    h1 { font-size: 1.55rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.18rem; }
    h4 { font-size: 1.05rem; }
    h5 { font-size: 1rem; }

    /* ---- Navbar ---- */
    .navbar { padding-top: 0.4rem; padding-bottom: 0.4rem; }
    .navbar-brand { font-size: 1.02rem; }
    .navbar-brand .logo { height: 40px; }
    .nav-link { padding: 0.7rem 0.9rem !important; }

    /* ---- Buttons: comfortable height; block-width only for primary/form actions ---- */
    .btn { padding: 0.62rem 1.05rem; font-size: 0.95rem; }
    .bsp-form .btn,
    .home-panel .btn,
    .mx-auto .btn,
    .order-actions-container .btn:not(.btn-sm) { width: 100%; margin-bottom: 0.4rem; }
    /* keep inline/compact buttons their natural size (tables, header dropdown) */
    .btn-sm,
    .table .btn,
    .dropdown > .btn { width: auto; margin-bottom: 0; }

    /* ---- Forms ---- */
    .bsp-form { padding: 1.1rem !important; }
    .bsp-form h5 { font-size: 1.1rem; }
    .form-label { font-size: 0.95rem; margin-bottom: 0.4rem; }
    .form-control,
    .form-select { font-size: 16px !important; padding: 0.62rem 0.8rem; }

    /* ---- Data tables: smooth horizontal scroll + pinned first column ---- */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
    }
    .table { font-size: 0.86rem; }
    .table th,
    .table td {
        padding: 0.6rem 0.7rem !important;
        white-space: nowrap;
    }

    /* keep the id/number column visible while the rest scrolls (list pages) */
    .table-hover thead th:first-child,
    .table-hover tbody td:first-child {
        position: sticky;
        inset-inline-start: 0;
    }
    .table-hover thead th:first-child { z-index: 3; }
    .table-hover tbody td:first-child {
        z-index: 2;
        background: var(--color-surface);
        font-weight: 700;
        box-shadow: 6px 0 12px -8px rgba(6, 55, 43, 0.28);
    }
    .table-hover tbody tr:nth-of-type(even) td:first-child { background: var(--color-bg-strong); }

    /* action-column buttons: compact, wrap, still tappable */
    .table td.text-center,
    .table th.text-center { min-width: 110px; }
    .table td .btn,
    .table td .btn-sm {
        padding: 0.42rem 0.75rem !important;
        font-size: 0.82rem !important;
        margin: 0.15rem;
        display: inline-block;
    }

    /* ---- Dashboards ---- */
    .task-first-dashboard { margin-top: 0.5rem; }
    .section-title { font-size: 1.2rem; }
    .actions-grid,
    .top-tasks-grid,
    .top-section-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
    .lists-section .list-container { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }
    .list-item { padding: 1rem 0.75rem !important; font-size: 0.95rem; }
    .action-button { padding: 1.1rem !important; }
    .primary-task-card {
        flex-direction: column !important;
        text-align: center;
        padding: 1.4rem 1rem !important;
        gap: 0.8rem;
    }
    .primary-task-card .task-icon { margin: 0 !important; }
    .primary-task-card .task-counter {
        margin: 0 !important;
        border: none !important;
        padding: 0 !important;
    }
    .stats-overview { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }
    .stat-card { padding: 1rem !important; }
    .stat-card .count { font-size: 1.6rem; }
    .welcome-section { padding: 1.4rem 1.1rem !important; }
    .welcome-section h2 { font-size: 1.3rem; }
    .user-info-header { margin-bottom: 1.5rem; }

    /* ---- Detail pages ---- */
    .card-body { padding: 1.1rem; }
    .summary-chip { padding: 0.7rem 0.85rem; }
    .summary-chip strong { font-size: 1.15rem; }

    /* ---- Pagination / badges / alerts ---- */
    .pagination { font-size: 0.9rem; flex-wrap: wrap; gap: 0.15rem; }
    .page-link { padding: 0.4rem 0.7rem; }
    .badge { font-size: 0.78rem; padding: 0.38rem 0.6rem; }
    .alert { font-size: 0.92rem; }
}

/* =====================================================================
   Small phones : ≤ 576px
   ===================================================================== */
@media (max-width: 576px) {
    body { font-size: 15px; }
    .container,
    main.container { padding-left: 11px; padding-right: 11px; }

    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.25rem; }

    .navbar-brand { font-size: 0.92rem; }
    .navbar-brand .logo { height: 36px; }

    /* dashboard tiles single-column on the narrowest screens, stats stay 2-up */
    .lists-section .list-container { grid-template-columns: 1fr !important; }
    .stats-overview { grid-template-columns: 1fr 1fr !important; }

    .card { border-radius: var(--radius-md); }
    .card-body { padding: 0.9rem; }

    .table { font-size: 0.8rem; }
    .table th,
    .table td { padding: 0.5rem 0.55rem !important; }
}

/* =====================================================================
   Touch devices : bigger targets, no hover motion
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .page-link { min-height: 44px; }
    .nav-link { min-height: 44px; display: flex; align-items: center; }

    /* hover transforms feel broken on touch — disable them */
    .btn:hover,
    .action-button:hover,
    .list-item:hover,
    .card:hover,
    .stat-card:hover,
    .summary-chip:hover,
    .primary-task-card:hover,
    .navbar:hover { transform: none; }

    .form-check-input { width: 1.4em; height: 1.4em; }
}

/* =====================================================================
   Global safety (all viewports) — prevents accidental sideways scroll
   ===================================================================== */
html,
body { overflow-x: hidden; }

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

.table-responsive { -webkit-overflow-scrolling: touch; }

/* Fix iOS auto-zoom on focus (16px minimum) */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="tel"] { font-size: 16px; }