/* Responsive layer. The screen markup carries the design's inline styles from
   the fixed 1920/1440/768 canvases; these rules relax them for real viewports.
   !important is used deliberately · it is the only way to beat inline styles. */

html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; }

/* Roots: fill the viewport instead of a fixed canvas, capped at the design width. */
.screen { width: 100% !important; margin-inline: auto; }
.screen--tv { max-width: 1920px; height: auto !important; min-height: 100dvh; }
.screen--kiosk { max-width: 768px; height: auto !important; min-height: 100dvh; }
.screen--console,
.screen--admin { max-width: 1440px; }

/* Flex/grid children default to min-width:auto, which makes them refuse to
   shrink below their content and pushes the page sideways. Opt them out. */
.console-main > *,
.tv-main > *,
.admin-shell,
.admin-shell > *,
.admin-nav-list,
.table-wrap { min-width: 0; max-width: 100%; }

/* Tables overflow on narrow screens · scroll them instead of the page. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > .table { min-width: 620px; }

/* Fluid type for the oversized display numerals. */
.fluid-hero { font-size: clamp(56px, 5.6vw, 100px) !important; }
.fluid-ticket { font-size: clamp(64px, 8.4vw, 120px) !important; }
.fluid-window { font-size: clamp(24px, 2.9vw, 54px) !important; }
.fluid-tile { font-size: clamp(22px, 2.1vw, 38px) !important; }
.fluid-brand { font-size: clamp(15px, 1.5vw, 27px) !important; }
.fluid-clock { font-size: clamp(20px, 2.2vw, 40px) !important; }
.fluid-h1 { font-size: clamp(30px, 6vw, 52px) !important; }
.fluid-h1-sm { font-size: clamp(26px, 5.4vw, 48px) !important; }
.fluid-dept { font-size: clamp(22px, 4.4vw, 32px) !important; }
.fluid-lane { font-size: clamp(24px, 4.8vw, 36px) !important; }
.fluid-kpi { font-size: clamp(30px, 3.2vw, 46px) !important; }
.fluid-stat { font-size: clamp(28px, 3vw, 44px) !important; }

/* ---------- Customer TV ---------- */
@media (max-width: 1280px) {
    /* Drop the ad/announcements column; the queue is what matters on a small screen. */
    .tv-main { grid-template-columns: 1fr !important; }
    .tv-aside { display: none !important; }
}
@media (max-width: 900px) {
    .tv-header { flex-wrap: wrap !important; gap: 12px !important; padding: 16px 20px !important; }
    .tv-main { padding: 20px !important; gap: 20px !important; }
    .tv-nowserving { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; text-align: left; }
    .tv-nowserving .tv-arrow { transform: rotate(90deg); padding: 0 !important; }
    .tv-nowserving > div:last-child { text-align: left !important; }
    .tv-windows { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
    .tv-queue { flex-wrap: wrap !important; }
    .tv-settings { width: 100% !important; max-width: 460px; padding: 24px !important; }
}

/* ---------- Kiosk ---------- */
@media (max-width: 640px) {
    .kiosk-header { padding: 14px 18px !important; gap: 8px !important; }
    .kiosk-body { padding: 20px !important; gap: 18px !important; }
    .kiosk-hero { height: 96px !important; }
    .kiosk-choice { padding: 18px 20px !important; gap: 12px !important; }
    .kiosk-footer { padding: 12px 18px !important; flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 420px) {
    /* Stack the service name away from the prefix/waiting count. */
    .kiosk-choice { flex-direction: column !important; align-items: flex-start !important; }
    .kiosk-choice > span:last-child { align-items: flex-start !important; flex-direction: row !important; gap: 10px !important; align-self: stretch; justify-content: space-between; }
}

/* ---------- Operator console ---------- */
@media (max-width: 1100px) {
    .console-main { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
    .console-nav { flex-wrap: wrap !important; gap: 8px !important; padding: 12px 16px !important; }
    .console-nav .nav-brand { margin-right: 0 !important; }
    .console-main { padding: 16px !important; gap: 16px !important; }
    .console-call { padding: 20px !important; }
    .console-actions .btn { flex: 1 1 auto; min-width: 0 !important; font-size: 14px !important; padding: 10px 12px !important; }
    .console-stats { grid-template-columns: 1fr 1fr !important; }
    .console-login { width: 100% !important; }
}

/* ---------- Admin ---------- */
@media (max-width: 1000px) {
    .admin-shell { flex-direction: column !important; }
    .admin-sidebar { width: 100% !important; padding: 16px 0 !important; }
    .admin-sidebar .admin-nav-list { flex-direction: row !important; overflow-x: auto; }
    .admin-sidebar .admin-nav { white-space: nowrap; border-left: none !important; border-bottom: 3px solid transparent; padding: 10px 16px !important; font-size: 13px !important; }
    .admin-sidebar .admin-user { margin-top: 0 !important; }
    .admin-kpis { grid-template-columns: repeat(2, 1fr) !important; }
    .admin-split,
    .admin-content-split,
    .admin-settings-split { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
    .admin-main { padding: 20px 16px !important; gap: 16px !important; }
    .admin-kpis { grid-template-columns: 1fr !important; }
    .admin-pagehead { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
}

/* ---------- Demo index ---------- */
/* The blocks are capped at 1240px but were left-aligned, so they hugged the
   left edge on wide screens. Center them on a shared column instead. */
.demo-page > * { width: 100%; max-width: 1240px; margin-inline: auto; }

@media (max-width: 640px) {
    .demo-page { padding: 28px 20px !important; gap: 28px !important; }
    .demo-hero { height: 120px !important; }
}

/* ---------- Ticket preview ---------- */
@media (max-width: 360px) {
    .receipt { width: 100% !important; }
}