/* EPM v0.2.1 Responsive Audit Patch
   Applies across Build01 + Build02 pages.
   Loaded last, so it only improves layout without changing app logic.
*/

html {
    -webkit-text-size-adjust: 100%;
}
body {
    overflow-x: hidden;
}
img,
video {
    max-width: 100%;
}
.content,
.public-shell,
.panel,
.card,
.public-card,
.auth-card,
.step-card,
.luxury-preview-card,
.order-card,
.luxury-main,
.luxury-layout {
    min-width: 0;
}

/* Tables: many Build01/Build02 pages use wide tables.
   Keep desktop table layout, but make them usable on phones/tablets. */
.panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table {
    min-width: 760px;
}
.public-card table,
.confirmation-card table {
    min-width: 0;
}
th,
td {
    white-space: nowrap;
}
td .btn,
td button {
    white-space: nowrap;
}

/* Typography scaling */
h1 {
    font-size: clamp(28px, 4vw, 46px);
}
h2 {
    font-size: clamp(21px, 3vw, 28px);
}
.card strong {
    font-size: clamp(28px, 5vw, 38px);
}
.queue-number {
    font-size: clamp(42px, 12vw, 72px);
    word-break: break-word;
}

/* Sidebar / navigation */
.sidebar {
    min-width: 0;
}
.sidebar nav {
    display: grid;
    gap: 8px;
}
.sidebar nav a {
    margin-bottom: 0;
}

/* Headers and action rows */
.topbar.spread,
.spread {
    min-width: 0;
}
.actions,
.form-actions,
.table-actions {
    max-width: 100%;
}
.actions .btn,
.actions button {
    white-space: nowrap;
}

/* Inputs/buttons: easier tapping */
input,
select,
button,
.btn {
    min-height: 44px;
}
input[type="checkbox"],
input[type="radio"] {
    min-height: 0;
}
.form-actions {
    margin-top: 16px;
}

/* Staff nav */
.staff-nav {
    max-width: 100%;
}
.staff-nav a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Guest ordering */
.public-shell {
    width: 100%;
    max-width: 1220px;
}
.luxury-order,
.luxury-confirmation {
    width: 100%;
}
.luxury-layout {
    min-width: 0;
}
.luxury-preview-card {
    min-width: 0;
}
.luxury-product-card {
    min-width: 0;
}
.luxury-product-card img,
.product-option img {
    max-height: 180px;
}
.guest-stage,
.mockup-stage {
    max-width: 100%;
}
.mockup-stage {
    min-height: clamp(240px, 45vw, 420px);
}
.mockup-stage img {
    max-height: min(62vh, 520px);
}
#stampBox {
    max-width: 100%;
}
.foil-tile {
    min-height: 48px;
}

/* Confirmation QR */
.qr-box {
    max-width: 100%;
}
.qr-box img {
    width: min(220px, 72vw);
    height: min(220px, 72vw);
}

/* Ready board / TV */
.ready-board {
    min-height: 100vh;
}
.ready-numbers {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ready-numbers div {
    font-size: clamp(28px, 6vw, 54px);
}

/* Scanner */
.scanner-box,
.scan-panel {
    width: 100%;
}

/* Client portal */
.client-summary {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Tablet landscape / small laptop */
@media (max-width: 1180px) {
    .content {
        padding: 32px;
    }
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .luxury-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        gap: 18px;
    }
    .luxury-products {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
}

/* Tablet portrait */
@media (max-width: 900px) {
    .page {
        display: block;
    }
    .sidebar {
        padding: 20px;
    }
    .brand {
        margin-bottom: 18px;
    }
    .sidebar nav {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
    .sidebar nav a {
        text-align: center;
        padding: 11px 10px;
    }
    .content {
        padding: 26px;
    }
    .topbar.spread,
    .spread {
        align-items: stretch;
    }
    .actions {
        width: 100%;
    }
    .actions .btn,
    .actions button {
        flex: 1 1 auto;
    }
    .luxury-layout {
        grid-template-columns: 1fr;
    }
    .luxury-preview-card {
        position: static;
        order: -1;
    }
    .mockup-stage {
        min-height: 300px;
    }
    .staff-nav {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Phone */
@media (max-width: 640px) {
    .content,
    .public-shell {
        padding: 16px;
    }
    .sidebar {
        padding: 16px;
    }
    .brand {
        gap: 10px;
    }
    .brand-mark {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }
    .brand-name {
        font-size: 18px;
    }
    .brand-sub {
        font-size: 10px;
    }
    .sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sidebar nav a {
        font-size: 14px;
        padding: 10px 8px;
    }
    .cards,
    .cards.compact,
    .grid-2,
    .queue-progress,
    .status-track {
        grid-template-columns: 1fr;
    }
    .card,
    .panel,
    .auth-card,
    .public-card,
    .step-card,
    .luxury-preview-card,
    .order-card {
        border-radius: 16px;
        padding: 18px;
    }
    .auth-card {
        margin: 24px auto;
    }
    .topbar {
        margin-bottom: 18px;
    }
    .actions,
    .form-actions,
    .table-actions {
        gap: 8px;
    }
    .actions .btn,
    .actions button,
    .form-actions .btn,
    .form-actions button {
        width: 100%;
        min-width: 0;
    }
    table {
        min-width: 680px;
        font-size: 14px;
    }
    th,
    td {
        padding: 11px 9px;
    }
    .product-grid,
    .luxury-products {
        grid-template-columns: 1fr;
    }
    .product-option img,
    .luxury-product-card img {
        height: 150px;
    }
    .foil-tiles {
        grid-template-columns: 1fr 1fr;
    }
    .mockup-stage {
        min-height: 240px;
        border-radius: 16px;
    }
    .luxury-banner {
        height: 110px;
        margin: 10px 0 14px;
    }
    .luxury-header {
        padding: 12px 4px 20px;
    }
    .event-logo {
        max-width: 130px;
        max-height: 64px;
    }
    .ready-board {
        padding: 24px 16px;
    }
    .ready-numbers {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ready-numbers div {
        padding: 22px;
    }
    .search-row {
        grid-template-columns: 1fr;
    }
    .search-row button {
        width: 100%;
    }
    .inline-status-form {
        min-width: 180px;
    }
}

/* Small phones */
@media (max-width: 420px) {
    .content,
    .public-shell {
        padding: 12px;
    }
    .sidebar nav {
        grid-template-columns: 1fr 1fr;
    }
    .card,
    .panel,
    .public-card,
    .step-card,
    .luxury-preview-card {
        padding: 15px;
    }
    .foil-tiles {
        grid-template-columns: 1fr;
    }
    table {
        min-width: 620px;
    }
    .queue-number {
        letter-spacing: .02em;
    }
}

/* Print / screenshot friendly confirmation */
@media print {
    .sidebar,
    .staff-nav,
    .actions,
    button,
    .btn {
        display: none !important;
    }
    body,
    .public-body {
        background: white !important;
    }
    .public-card,
    .confirmation-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}