/* =====================================================================
   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; }
/* =====================================================================
   Phones : cards instead of tables, pinned detail actions  (≤ 768px)
   ===================================================================== */
@media (max-width: 768px) {

    /* ---- table.table-cards: each row becomes a card ----
       Labels (data-label) and .m-hide / .m-actions come from js/mobile_ui.js. */
    .table-responsive:has(> .table-cards) {
        overflow: visible !important;
        box-shadow: none !important;
        border-radius: 0;
        background: transparent;
    }
    .table-cards { background: transparent !important; border: 0 !important; }
    .table-cards thead { display: none; }
    .table-cards tbody { display: block; }
    .table-cards tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem 0.9rem;
        margin-bottom: 0.75rem;
        padding: 0.85rem 0.95rem;
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }
    .table-cards tbody td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        white-space: normal !important;
        text-align: start !important;
        position: static !important;
        box-shadow: none !important;
        background: transparent !important;
        font-size: 0.9rem;
    }
    .table-cards tbody td::before {
        content: attr(data-label);
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--color-muted);
    }
    /* Card title: the first column (document number / product name) */
    .table-cards tbody td:first-child {
        grid-column: 1 / -1;
        font-size: 1rem;
        font-weight: 800;
        color: var(--color-primary-dark);
        padding-bottom: 0.5rem !important;
        border-bottom: 1px dashed var(--color-border-strong) !important;
    }
    /* Card footer: row actions */
    .table-cards tbody td.m-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        padding-top: 0.6rem !important;
        border-top: 1px dashed var(--color-border-strong) !important;
    }
    .table-cards tbody td:first-child::before,
    .table-cards tbody td.m-actions::before,
    .table-cards tbody td[colspan]::before { content: none; }
    .table-cards tbody td.m-hide { display: none; }
    .table-cards tbody td[colspan] {
        grid-column: 1 / -1;
        display: block;
        text-align: center !important;
        color: var(--color-muted);
    }
    .table-cards .row-actions .btn-sm { padding: 0.45rem 1.1rem !important; }
    .table-cards .btn-row-more { width: 36px; height: 36px; }

    /* ---- Detail pages: compact header + two-column info fields ---- */
    /* main …: detail_styles.css loads later in the page with the same specificity */
    main h2.page-title { font-size: 1.3rem; margin-bottom: 1rem !important; }

    /* Item summary chips: three small tiles in one row instead of three big boxes */
    .info-summary { --bs-gutter-x: 0.5rem; }
    .info-summary > [class*="col-"] { flex: 1 1 0 !important; max-width: none !important; width: auto; }
    .info-summary .summary-chip { padding: 0.55rem 0.6rem; gap: 2px; text-align: center; align-items: center; }
    .info-summary .summary-chip span { font-size: 0.72rem; }
    .info-summary .summary-chip strong { font-size: 1.1rem; }
    .info-summary .summary-chip small { display: none; }
    .info-group { --bs-gutter-y: 0.75rem; margin-top: 0.5rem !important; }
    .info-group > p {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin: 0;
        padding-inline-start: 0.6rem;
        font-size: 0.9rem;
        overflow-wrap: anywhere;
    }
    .info-group > p > strong {
        display: block;
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--color-muted);
        margin-bottom: 1px;
    }
    /* wide fields (address, description…) keep the full row */
    .info-group > p.col-md-8,
    .info-group > p.col-md-12,
    .info-group > p.col-12 { flex-basis: 100% !important; max-width: 100% !important; }

    /* ---- Detail pages: main actions pinned to the bottom of the screen ---- */
    body.has-action-bar main.container { padding-bottom: 6rem !important; }
    .order-actions-container {
        margin-top: 1.25rem;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .order-actions-container .top-actions {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
        margin-bottom: 0 !important;
    }
    .order-actions-container .top-actions > div:first-child {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1020;
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
        background: var(--glass-bg-strong);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -6px 20px rgba(6, 55, 43, 0.12);
    }
    .order-actions-container .top-actions > div:first-child > * { flex: 0 0 auto; margin: 0; }
    .order-actions-container .top-actions > div:first-child .btn {
        width: auto;
        margin: 0;
        padding: 0.6rem 1.1rem;
        font-size: 0.9rem;
    }
    /* Cancel / delete stay in the page (not pinned): full-width password + button */
    .order-actions-container .top-actions > div:last-child form {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .order-actions-container .top-actions > div:last-child .form-control {
        flex: 1 1 160px;
        width: auto !important;
    }
}