/* =====================================================================
   Pizzeria look & feel (loaded after site.css)
   ===================================================================== */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .topbar-title .h5, .brand-name, .stat-value, .card-header, .display-font {
    font-family: var(--rms-display); font-weight: 600; letter-spacing: .01em;
}
.btn { font-weight: 700; border-radius: .65rem; }
.btn-lg { border-radius: .8rem; }
.badge { border-radius: 999px; padding: .38em .7em; }
.text-bg-success { background-color: var(--rms-basil) !important; }
.text-bg-warning { background-color: var(--rms-cheese) !important; color: #3b2a22 !important; }

/* Sidebar: warm espresso with a soft glow behind the logo */
.app-sidebar {
    background:
        radial-gradient(420px 220px at -60px -40px, rgba(210, 64, 31, .35), transparent 70%),
        radial-gradient(300px 260px at 120% 110%, rgba(242, 177, 52, .12), transparent 70%),
        var(--rms-sidebar-bg);
}
.brand-logo { background: linear-gradient(145deg, var(--rms-cheese), var(--rms-accent)); font-size: 1.35rem; box-shadow: 0 6px 16px rgba(210, 64, 31, .35); }
.brand-name { font-size: 1.05rem; color: #fff7ec; }
.app-nav .nav-link { font-weight: 600; }
.app-nav .nav-link.active { box-shadow: inset 3px 0 0 var(--rms-cheese); }
.app-nav .nav-link.active i { color: var(--rms-cheese); }
.app-topbar { background: color-mix(in srgb, var(--rms-page-bg) 88%, transparent); }

/* Cards & stats */
.card, .stat-card { border-color: var(--rms-border); box-shadow: 0 1px 0 rgba(120, 72, 40, .04), 0 6px 18px -12px rgba(120, 72, 40, .25); }
.stat-card { border-radius: 16px; }
.stat-icon { border-radius: 14px; }
.stat-emoji { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.55rem; flex-shrink: 0; }

/* Food tints (shared by tiles, chips, avatars) */
.tint-tomato { background: #fde3db; } .tint-cheese { background: #fdefcf; } .tint-basil { background: #dcefe2; }
.tint-olive { background: #ebeed3; } .tint-crust { background: #f4e2cf; } .tint-berry { background: #f7dce7; } .tint-sky { background: #dbeaf6; }
[data-bs-theme="dark"] .tint-tomato { background: rgba(210, 64, 31, .22); } [data-bs-theme="dark"] .tint-cheese { background: rgba(242, 177, 52, .18); }
[data-bs-theme="dark"] .tint-basil { background: rgba(47, 125, 79, .25); } [data-bs-theme="dark"] .tint-olive { background: rgba(150, 160, 60, .2); }
[data-bs-theme="dark"] .tint-crust { background: rgba(183, 121, 63, .22); } [data-bs-theme="dark"] .tint-berry { background: rgba(200, 80, 130, .2); }
[data-bs-theme="dark"] .tint-sky { background: rgba(80, 140, 200, .2); }
.food-emoji { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .7rem; font-size: 1.2rem; line-height: 1; flex-shrink: 0; }

/* Greeting banner (dashboard) */
.hero-banner {
    position: relative; overflow: hidden; border-radius: 20px; padding: 1.4rem 1.6rem; margin-bottom: 1rem; color: #fff8ef;
    background: linear-gradient(120deg, #b8321a 0%, var(--rms-accent) 45%, #e0782c 100%);
    box-shadow: 0 12px 28px -16px rgba(168, 50, 26, .8);
}
.hero-banner::after {
    content: "🍕"; position: absolute; right: -10px; bottom: -34px; font-size: 9rem; opacity: .18; transform: rotate(-18deg); pointer-events: none;
}
.hero-banner h2 { font-size: 1.6rem; margin: 0; }
.hero-banner .hero-sub { opacity: .92; }
.hero-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px; padding: .35rem .85rem; font-weight: 700; font-size: .88rem; color: #fff; text-decoration: none; }
.hero-chip:hover, .hero-chip:focus { background: rgba(255, 255, 255, .28); color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; position: relative; z-index: 1; }

/* ---------- POS ---------- */
.pos-cats .btn { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; padding: .35rem .85rem; border-color: var(--rms-border); background: var(--rms-surface); color: inherit; }
.pos-cats .btn.btn-primary { background: var(--rms-accent); border-color: var(--rms-accent); color: #fff; }
.pos-cats .chip-emoji { font-size: 1.05rem; line-height: 1; }
.pos-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: .75rem; }
.pos-tile { position: relative; padding: .7rem; min-height: 132px; gap: .45rem; border-radius: 16px; border-width: 1.5px;
    box-shadow: 0 1px 0 rgba(120, 72, 40, .05); transition: border-color .12s, transform .08s, box-shadow .12s; }
.pos-tile:hover { border-color: rgba(var(--rms-accent-rgb), .55); box-shadow: 0 8px 18px -12px rgba(168, 50, 26, .55); }
.pos-tile .food-emoji { width: 100%; height: 58px; border-radius: 12px; font-size: 2rem; }
.pos-tile .name { font-family: var(--rms-display); font-weight: 500; font-size: .95rem; }
.pos-tile .price { font-family: var(--rms-display); font-weight: 600; font-size: .95rem; }
.pos-tile.in-cart { border-color: var(--rms-accent); }
.tile-qty { position: absolute; top: .45rem; right: .45rem; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 999px;
    background: var(--rms-accent); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.pos-tile.pop { animation: tile-pop .25s ease; }
@keyframes tile-pop { 50% { transform: scale(.95); } }
.tile-deal-tag { position: absolute; top: .45rem; left: .45rem; background: var(--rms-cheese); color: #3b2a22; font-size: .68rem; font-weight: 800;
    border-radius: 999px; padding: .1rem .5rem; text-transform: uppercase; letter-spacing: .04em; }

/* Order panel styled like a kitchen ticket */
.pos-cart { border-radius: 18px; }
.pos-cart .card-header { background: linear-gradient(90deg, rgba(var(--rms-accent-rgb), .10), rgba(242, 177, 52, .12)); border-radius: 18px 18px 0 0; }
.cart-line { padding: .6rem .25rem; border-bottom: 1.5px dashed var(--rms-border); }
.cart-line .fw-semibold { font-family: var(--rms-display); font-weight: 500; }
.qty-group { border-radius: 999px; background: var(--rms-surface); }
.qty-group button { border-radius: 999px; font-weight: 800; color: var(--rms-accent-dark); }
.qty-group button:hover { background: rgba(var(--rms-accent-rgb), .1); }
.totals-row.grand { font-family: var(--rms-display); font-size: 1.35rem; border-top: 2px dashed var(--rms-border); }
.pos-cart .btn-group > .btn { border-radius: .65rem !important; }
.pos-cart .btn-group > .btn-check + .btn { margin-left: .3rem; }
.pos-cart .btn-group > .btn-check:first-child + .btn { margin-left: 0; }

/* ---------- Floor plan: tables with chairs ---------- */
.table-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.table-tile { position: relative; align-items: center; text-align: center; gap: .4rem; padding: 1rem .75rem; border-radius: 18px; border-width: 1.5px;
    min-height: 196px; transition: transform .1s, box-shadow .12s; }
.table-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -16px rgba(120, 72, 40, .7); }
.dine-table { --size: 80px; position: relative; width: calc(var(--size) + 40px); height: calc(var(--size) + 40px); display: grid; place-items: center; margin: 0 auto; }
.dine-table .top { position: relative; z-index: 1; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center;
    font-family: var(--rms-display); font-weight: 600; font-size: .9rem; background: #f4e2cf; border: 3px solid #d9b48c; color: #5b3a24; line-height: 1.1; padding: .3rem; }
.dine-table.square .top { border-radius: 16px; }
.dine-table .chair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 6px; background: #d9b48c;
    transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(var(--size) / -2 - 12px)); }
.table-tile.occupied .dine-table .top { background: #fde3db; border-color: var(--rms-accent); color: var(--rms-accent-dark); }
.table-tile.occupied .dine-table .chair { background: var(--rms-accent); }
.table-tile.available .dine-table .top { background: #e3f2e8; border-color: #8cc4a0; color: #24603d; }
.table-tile.available .dine-table .chair { background: #8cc4a0; }
[data-bs-theme="dark"] .dine-table .top { background: #3a2c25; color: #f4e2cf; }
[data-bs-theme="dark"] .table-tile.available .dine-table .top { background: rgba(47, 125, 79, .3); color: #cdebd8; }
[data-bs-theme="dark"] .table-tile.occupied .dine-table .top { background: rgba(210, 64, 31, .3); color: #ffd9cc; }
.table-meta { font-size: .82rem; }
.legend-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; }

/* ---------- Kitchen display: paper tickets ---------- */
.kot-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem 1.1rem; padding-top: .5rem; }
.kot-paper { position: relative; background: #fffaf0; color: #2b211c; border-radius: 4px 4px 10px 10px; box-shadow: 0 10px 22px -14px rgba(60, 35, 20, .6);
    border-top: 7px solid var(--age-color, var(--rms-basil)); }
.kot-paper.age-warn { --age-color: var(--rms-cheese); }
.kot-paper.age-late { --age-color: var(--rms-accent); animation: kot-pulse 2s ease-in-out infinite; }
@keyframes kot-pulse { 50% { box-shadow: 0 0 0 4px rgba(var(--rms-accent-rgb), .25), 0 10px 22px -14px rgba(60, 35, 20, .6); } }
.kot-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .7rem .9rem .5rem; border-bottom: 2px dashed #e9d9c4; }
.kot-head .num { font-family: var(--rms-display); font-weight: 600; font-size: 1.15rem; }
.kot-type { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .55rem; border-radius: 999px; background: #f4e2cf; white-space: nowrap; }
.kot-type.dinein { background: #dcefe2; color: #24603d; } .kot-type.takeaway { background: #fdefcf; color: #6b4a07; } .kot-type.delivery { background: #fde3db; color: #8a2a14; }
.kot-sub { padding: .35rem .9rem 0; font-size: .82rem; color: #7a6457; font-weight: 700; }
.kot-items { list-style: none; margin: 0; padding: .3rem .9rem; }
.kot-items li { display: flex; gap: .55rem; align-items: baseline; padding: .4rem 0; border-bottom: 1px dotted #e9d9c4; font-size: 1.05rem; font-weight: 700; }
.kot-paper .text-body-secondary { color: #8a7262 !important; }
.kot-items li:last-child { border-bottom: 0; }
.kot-items .q { font-family: var(--rms-display); font-weight: 600; font-size: 1.25rem; color: var(--rms-accent-dark); min-width: 2.2rem; }
.kot-items .note { display: block; font-size: .85rem; font-weight: 800; color: #b42318; }
.kot-foot { display: flex; justify-content: space-between; align-items: center; padding: .45rem .9rem .6rem; font-size: .8rem; color: #7a6457; border-top: 2px dashed #e9d9c4; }
.kot-foot .btn { --bs-btn-bg: #f4e2cf; --bs-btn-border-color: #f4e2cf; --bs-btn-color: #5b3a24; --bs-btn-hover-bg: #ecd2b7; --bs-btn-hover-border-color: #ecd2b7; }
.kot-age { font-family: var(--rms-display); font-weight: 600; font-size: 1rem; color: var(--age-color, var(--rms-basil)); }

/* ---------- Sign-in ---------- */
.auth-body {
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(210, 64, 31, .20), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(242, 177, 52, .22), transparent 60%),
        var(--rms-page-bg);
}
.auth-shell { width: 100%; max-width: 940px; display: grid; grid-template-columns: 1.05fr 1fr; border-radius: 24px; overflow: hidden;
    background: var(--rms-surface); box-shadow: 0 30px 60px -30px rgba(90, 40, 20, .55); }
.auth-art { position: relative; padding: 2.5rem; color: #fff8ef; display: flex; flex-direction: column; justify-content: flex-end; min-height: 480px;
    background: linear-gradient(150deg, #8f2814 0%, var(--rms-accent) 55%, #e58a2e 100%); overflow: hidden; }
.auth-art .art-emoji { position: absolute; font-size: 4rem; filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)); line-height: 1; }
.auth-art h1 { font-size: 2.2rem; margin-bottom: .35rem; color: #fff; }
.auth-art p { opacity: .92; margin: 0; }
.auth-shell .auth-card { box-shadow: none !important; border: 0; max-width: none; border-radius: 0; }
@media (max-width: 767.98px) { .auth-shell { grid-template-columns: 1fr; } .auth-art { min-height: 190px; padding: 1.5rem; } .auth-art .art-emoji { font-size: 2.6rem; } .auth-art h1 { font-size: 1.6rem; } }

/* Menu lists */
.menu-name { display: flex; align-items: center; gap: .6rem; }


/* =====================================================================
   Card views for list pages (toggle with the Cards / Table switch)
   ===================================================================== */
.view-switch[data-view="cards"] .table-view { display: none; }
.view-switch[data-view="table"] .cards-view { display: none; }
.view-toggle .btn { border: 1px solid var(--rms-border); background: var(--rms-surface); font-weight: 700; transition: none; }
.view-toggle .btn.active { background: var(--rms-accent); border-color: var(--rms-accent); color: #fff; }

.entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.entity-grid.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.entity-grid.compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.entity-card { position: relative; display: flex; flex-direction: column; background: var(--rms-surface); border: 1.5px solid var(--rms-border); border-radius: 18px;
    overflow: hidden; transition: transform .1s, box-shadow .15s, border-color .15s; box-shadow: 0 1px 0 rgba(120, 72, 40, .04), 0 8px 20px -16px rgba(120, 72, 40, .45); }
.entity-card:hover { transform: translateY(-2px); border-color: rgba(var(--rms-accent-rgb), .35); box-shadow: 0 14px 26px -18px rgba(120, 72, 40, .7); }
.entity-card.is-muted { opacity: .72; }
.entity-card.is-muted:hover { opacity: 1; }
.entity-card .ec-banner { height: 92px; display: grid; place-items: center; font-size: 2.9rem; position: relative; }
.entity-card .ec-banner img { width: 100%; height: 100%; object-fit: cover; }
.entity-card .ec-ribbon { position: absolute; top: .6rem; left: .6rem; font-size: .75rem; }
.entity-card .ec-ribbon-end, .entity-card .ec-banner .badge { font-size: .75rem; line-height: 1.2; }
.entity-card .ec-ribbon-end { position: absolute; top: .6rem; right: .6rem; }
.entity-card .ec-body { padding: .85rem 1rem .6rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.entity-card .ec-head { display: flex; align-items: center; gap: .7rem; }
.entity-card .ec-title { font-family: var(--rms-display); font-weight: 600; font-size: 1.08rem; line-height: 1.2; margin: 0; color: inherit; text-decoration: none; }
a.ec-title:hover { color: var(--rms-accent-dark); }
.entity-card .ec-sub { font-size: .82rem; color: var(--bs-secondary-color); }
.entity-card .ec-price { font-family: var(--rms-display); font-weight: 600; font-size: 1.3rem; color: var(--rms-accent-dark); }
[data-bs-theme="dark"] .entity-card .ec-price { color: #f2896a; }
.entity-card .ec-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .85rem; color: var(--bs-secondary-color); }
.entity-card .ec-meta strong { color: var(--bs-body-color); font-weight: 700; }
.entity-card .ec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .25rem; }
.entity-card .ec-stat { background: color-mix(in srgb, var(--rms-page-bg) 70%, transparent); border-radius: 10px; padding: .35rem .5rem; text-align: center; }
.entity-card .ec-stat .v { font-family: var(--rms-display); font-weight: 600; font-size: 1rem; display: block; }
.entity-card .ec-stat .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.entity-card .ec-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .55rem .8rem .7rem; border-top: 1.5px dashed var(--rms-border); }
.entity-card .ec-actions { display: flex; gap: .3rem; margin-left: auto; }
.entity-card .ec-actions .btn { padding: .3rem .55rem; }
.entity-card .stretched { position: absolute; inset: 0; z-index: 0; }
.entity-card .ec-foot, .entity-card .ec-actions, .entity-card .ec-body a:not(.stretched) { position: relative; z-index: 1; }
.avatar-lg { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--rms-display); font-weight: 600; font-size: 1.15rem; flex-shrink: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip-list .badge { font-weight: 700; }
.cards-empty { grid-column: 1 / -1; }

/* Bill / order tickets */
.bill-card .ec-banner { height: auto; padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; }
.bill-card .bill-total { font-family: var(--rms-display); font-weight: 600; font-size: 1.55rem; }
.bill-card .bill-num { font-family: var(--rms-display); font-weight: 600; font-size: 1.05rem; }
.bill-card.type-dinein .ec-banner { background: #dcefe2; } .bill-card.type-takeaway .ec-banner { background: #fdefcf; } .bill-card.type-delivery .ec-banner { background: #fde3db; }
[data-bs-theme="dark"] .bill-card.type-dinein .ec-banner { background: rgba(47, 125, 79, .25); }
[data-bs-theme="dark"] .bill-card.type-takeaway .ec-banner { background: rgba(242, 177, 52, .18); }
[data-bs-theme="dark"] .bill-card.type-delivery .ec-banner { background: rgba(210, 64, 31, .22); }

/* Mini dining table used on table cards */
.mini-table { --size: 54px; width: calc(var(--size) + 30px); height: calc(var(--size) + 30px); }
.mini-table .top { font-size: .8rem; border-width: 2px; }
.mini-table .chair { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 4px; transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(var(--size) / -2 - 9px)); }
.table-card.occupied .dine-table .top { background: #fde3db; border-color: var(--rms-accent); color: var(--rms-accent-dark); }
.table-card.occupied .dine-table .chair { background: var(--rms-accent); }
.table-card.available .dine-table .top { background: #e3f2e8; border-color: #8cc4a0; color: #24603d; }
.table-card.available .dine-table .chair { background: #8cc4a0; }

/* Period-over-period change on report cards */
.delta { font-weight: 800; font-size: .8rem; margin-right: .25rem; white-space: nowrap; }
.delta.good { color: var(--rms-basil); } .delta.bad { color: var(--rms-accent); } .delta.neutral { color: var(--bs-secondary-color); }

/* Top bar: shift pill, clock, sidebar badges, quick search */
.shift-pill { align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; font-weight: 800; text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
.shift-pill.open { background: #dcefe2; color: #24603d; border-color: #b7dcc4; }
.shift-pill.closed { background: #fde3db; color: #8a2a14; border-color: #f6c2b3; animation: kot-pulse 2.4s ease-in-out infinite; }
[data-bs-theme="dark"] .shift-pill.open { background: rgba(47, 125, 79, .25); color: #cdebd8; border-color: transparent; }
[data-bs-theme="dark"] .shift-pill.closed { background: rgba(210, 64, 31, .25); color: #ffd9cc; border-color: transparent; }
.topbar-clock { font-weight: 800; font-size: .85rem; color: var(--bs-secondary-color); white-space: nowrap; }
.nav-badge { margin-left: auto; min-width: 1.45rem; height: 1.45rem; padding: 0 .4rem; border-radius: 999px; background: var(--rms-cheese); color: #3b2a22;
    font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; }
.palette { border-radius: 18px; overflow: hidden; border: 0; box-shadow: 0 30px 60px -20px rgba(40, 20, 10, .5); }
.palette-input { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1.5px dashed var(--rms-border); font-size: 1.1rem; }
.palette-input input { border: 0; outline: 0; flex: 1; background: transparent; color: inherit; font-size: 1.05rem; }
.palette .list-group-item { border: 0; padding: .6rem 1.1rem; }
.palette .list-group-item.active { background: rgba(var(--rms-accent-rgb), .12); color: inherit; }
.palette .list-group-item.active i { color: var(--rms-accent); }
.palette-hint { font-size: .75rem; color: var(--bs-secondary-color); padding: .5rem 1.1rem .7rem; border-top: 1px solid var(--rms-border); }
.avail-btn { font-weight: 800; }

/* ---------- Quick action tiles (dashboard, My shift) ---------- */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.qa-tile { position: relative; display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; min-height: 76px; border-radius: 16px;
    background: var(--rms-surface); border: 1px solid var(--rms-border); color: var(--bs-body-color); text-decoration: none;
    box-shadow: 0 6px 18px -14px rgba(120, 72, 40, .35); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.qa-tile:hover, .qa-tile:focus-visible { transform: translateY(-2px); border-color: var(--rms-cheese); box-shadow: 0 12px 24px -16px rgba(120, 72, 40, .5); color: var(--bs-body-color); }
.qa-tile:active { transform: none; }
.qa-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; flex-shrink: 0; }
.qa-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.qa-label { font-family: var(--rms-display); font-weight: 600; font-size: 1.02rem; }
.qa-hint { font-size: .78rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-badge { position: absolute; top: .45rem; right: .5rem; }
@media (max-width: 575.98px) { .quick-actions { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .qa-tile { flex-direction: column; text-align: center; padding: .75rem .5rem; } .qa-hint { display: none; } }

/* ---------- Sidebar: foldable sections ---------- */
.app-nav .nav-section-title { width: 100%; border: 0; background: none; text-align: left; border-radius: 6px; cursor: pointer; }
.app-nav .nav-section-title:hover { color: var(--rms-sidebar-fg); background: rgba(255,255,255,.04); }
.app-nav .nav-section-title:focus-visible { outline: 2px solid var(--rms-cheese); outline-offset: 1px; }
.nav-section-name { flex: 1; }
.nav-chevron { font-size: .7rem; transition: transform .15s ease; }
.nav-section.is-closed .nav-chevron { transform: rotate(-90deg); }
.nav-section.is-closed .nav-section-links { display: none; }
.app-nav .nav-link span:not(.nav-badge) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Sidebar: icon rail (desktop) ---------- */
@media (min-width: 992px) {
    .app-sidebar, .app-main { transition: width .18s ease, margin-left .18s ease; }
    html.nav-collapsed { --rms-sidebar-width: 72px; }
    html.nav-collapsed .brand { padding: 1rem 0; justify-content: center; }
    html.nav-collapsed .brand-text, html.nav-collapsed .nav-section-name, html.nav-collapsed .nav-chevron,
    html.nav-collapsed .app-nav .nav-link span:not(.nav-badge) { display: none; }
    html.nav-collapsed .app-nav { padding: .4rem .5rem 2rem; }
    html.nav-collapsed .nav-section { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid rgba(255,255,255,.06); }
    html.nav-collapsed .nav-section:first-child { border-top: 0; }
    html.nav-collapsed .app-nav .nav-section-title { display: none; }
    html.nav-collapsed .nav-section.is-closed .nav-section-links { display: block; }
    html.nav-collapsed .app-nav .nav-link { position: relative; justify-content: center; padding: .6rem 0; }
    html.nav-collapsed .app-nav .nav-link i { font-size: 1.15rem; width: auto; }
    html.nav-collapsed .app-nav .nav-badge { position: absolute; top: 2px; right: 4px; min-width: 1.1rem; height: 1.1rem; font-size: .65rem; padding: 0 .25rem; }
}

/* ---------- Attendance register ---------- */
.attendance-table .att-btn { min-width: 2.6rem; font-weight: 700; }
.attendance-table .att-time { width: 7.5rem; }
@media (max-width: 767.98px) { .attendance-table .att-btn { min-width: 2.2rem; padding-left: .4rem; padding-right: .4rem; } }
.clock-card { border-left: 4px solid var(--rms-basil, #2f7d4f); }

/* ---------- Delivery board ---------- */
.rider-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.rider-chip { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem .45rem .5rem; border-radius: 999px; border: 1px solid var(--rms-border);
    background: var(--rms-surface); color: var(--bs-body-color); text-decoration: none; white-space: nowrap; }
.rider-chip:hover { border-color: var(--rms-cheese); color: var(--bs-body-color); }
.rider-chip .rc-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; background: var(--bs-tertiary-bg); }
.rider-chip.is-free .rc-icon { background: #dcefe2; } .rider-chip.is-out .rc-icon { background: #dbeaf6; } .rider-chip.is-off { opacity: .6; }
[data-bs-theme="dark"] .rider-chip.is-free .rc-icon { background: rgba(47,125,79,.3); } [data-bs-theme="dark"] .rider-chip.is-out .rc-icon { background: rgba(80,140,200,.25); }
.rc-text { display: flex; flex-direction: column; line-height: 1.15; } .rc-name { font-weight: 700; font-size: .9rem; } .rc-sub { font-size: .75rem; color: var(--bs-secondary-color); }
.delivery-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: .9rem; align-items: start; }
@media (max-width: 1399.98px) { .delivery-board { grid-template-columns: repeat(2, minmax(240px, 1fr)); } }
@media (max-width: 767.98px) { .delivery-board { grid-template-columns: 1fr; } }
.db-col { background: color-mix(in srgb, var(--rms-surface) 60%, transparent); border: 1px solid var(--rms-border); border-radius: 16px; padding: .75rem; min-height: 160px; }
.db-head { font-family: var(--rms-display); font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; margin: 0 0 .6rem; }
.db-card { background: var(--rms-surface); border: 1px solid var(--rms-border); border-radius: 12px; padding: .65rem .75rem; margin-bottom: .6rem; box-shadow: 0 4px 14px -12px rgba(120,72,40,.4); }
.db-card.is-late { border-left: 4px solid var(--rms-accent); }
.db-empty { text-align: center; color: var(--bs-secondary-color); font-size: .9rem; padding: 1.25rem 0; }
.db-card a.fw-bold, .db-card span.fw-bold { font-size: .88rem; white-space: nowrap; }