/* ═══════════════════════════════════════════
   TLC Mobilization Portal — mob.css
   Mobile-first, clean, field-friendly UI
   ═══════════════════════════════════════════ */

:root {
    --mob-primary:     #2b5e6d;
    --mob-primary-lt:  #e8f4f6;
    --mob-accent:      #1d9090;
    --mob-info:        #0d6efd;
    --mob-info-lt:     #e7f0ff;
    --mob-warning:     #f59e0b;
    --mob-warning-lt:  #fef9ec;
    --mob-success:     #16a34a;
    --mob-success-lt:  #f0fdf4;
    --mob-danger:      #dc2626;
    --mob-danger-lt:   #fff1f1;
    --mob-muted:       #6c757d;
    --mob-border:      #e2e8f0;
    --mob-bg:          #f0f4f6;
    --mob-card-bg:     #ffffff;
    --mob-topbar-h:    56px;
    --mob-radius:      12px;
    --mob-radius-sm:   8px;
}

*, *::before, *::after { box-sizing: border-box; }

.mob-body {
    background: var(--mob-bg);
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1a2a33;
}

/* ── Login ─────────────────────────────────── */
.mob-login-body {
    background: linear-gradient(135deg, #1a3a44 0%, #1d9090 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.mob-login-card {
    background: #fff;
    border-radius: var(--mob-radius);
    padding: 40px 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.mob-login-logo  { display: flex; justify-content: center; margin-bottom: 16px; }
.mob-login-title { font-size: 1.4rem; font-weight: 700; color: var(--mob-primary); text-align: center; margin: 0 0 4px; }
.mob-login-sub   { font-size: .85rem; color: var(--mob-muted); text-align: center; margin-bottom: 24px; }

/* ── Top bar ────────────────────────────────── */
.mob-topbar {
    position: sticky; top: 0; z-index: 100;
    height: var(--mob-topbar-h);
    background: var(--mob-primary); color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.mob-brand        { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.mob-brand-name   { font-size: 1rem; font-weight: 700; letter-spacing: .3px; }
.mob-brand-sub    { font-weight: 400; font-size: .85rem; opacity: .85; }
.mob-topbar-right { display: flex; align-items: center; gap: 8px; }
.mob-user-badge   { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.mob-user-name    { font-weight: 600; }
.mob-role-pill {
    background: rgba(255,255,255,.2); border-radius: 999px;
    padding: 1px 8px; font-size: .72rem; font-weight: 600;
    letter-spacing: .4px; text-transform: uppercase;
}

/* ── Main content ───────────────────────────── */
.mob-main { max-width: 720px; margin: 0 auto; padding: 16px; }

/* ── Alerts ─────────────────────────────────── */
.mob-alert { border-radius: var(--mob-radius-sm); padding: 12px 16px; font-size: .9rem; margin-bottom: 12px; }
.mob-alert-success { background: var(--mob-success-lt); color: #14532d; border: 1px solid #bbf7d0; }
.mob-alert-danger  { background: var(--mob-danger-lt);  color: #7f1d1d;  border: 1px solid #fecaca; }
.mob-alert-warning { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; }

/* ── Buttons ────────────────────────────────── */
.mob-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 16px; border-radius: var(--mob-radius-sm);
    font-size: .88rem; font-weight: 600; border: none; cursor: pointer;
    text-decoration: none; transition: opacity .15s, background .15s; white-space: nowrap;
}
.mob-btn:hover   { opacity: .88; }
.mob-btn:disabled { opacity: .45; cursor: default; }
.mob-btn-primary { background: var(--mob-primary); color: #fff; }
.mob-btn-ghost   { background: rgba(0,0,0,.06); color: #333; border: 1px solid var(--mob-border); }

/* ── Stats row ──────────────────────────────── */
.mob-stat-row        { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.mob-stat-row-3      { grid-template-columns: repeat(3,1fr); }
.mob-stat            { background: var(--mob-card-bg); border-radius: var(--mob-radius-sm); padding: 12px; text-align: center; border: 1px solid var(--mob-border); }
.mob-stat-val        { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--mob-primary); }
.mob-stat-unit       { font-size: .9rem; font-weight: 600; }
.mob-stat-warning .mob-stat-val { color: var(--mob-warning); }
.mob-stat-info    .mob-stat-val { color: var(--mob-info); }
.mob-stat-primary .mob-stat-val { color: var(--mob-accent); }
.mob-stat-success .mob-stat-val { color: var(--mob-success); }
.mob-stat-danger  .mob-stat-val { color: var(--mob-danger); }
.mob-stat-lbl { font-size: .72rem; color: var(--mob-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }

/* ── Status badges (success) ─────────────────── */
.mob-badge-success { background: var(--mob-success-lt); color: #14532d; }

/* ── Dashboard ───────────────────────────────── */
.mob-dash-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.mob-dash-head-title { font-size: 1.15rem; font-weight: 700; color: var(--mob-primary); }
.mob-dash-filter-form { display: flex; gap: 6px; align-items: center; }
.mob-dash-sel { width: auto; min-width: 0; }
.mob-dash-filter-btn { padding: 6px 12px; }

.mob-dash-section { margin-bottom: 24px; }
.mob-dash-section-lbl {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--mob-muted);
    margin-bottom: 10px; display: flex; align-items: center;
}

.mob-dash-empty-month {
    text-align: center; padding: 20px; color: var(--mob-muted);
    font-size: .88rem; background: var(--mob-card-bg);
    border: 1px solid var(--mob-border); border-radius: var(--mob-radius-sm);
}

.mob-dash-activity-list {
    background: var(--mob-card-bg); border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm); overflow: hidden;
}
.mob-dash-activity-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--mob-border);
}
.mob-dash-activity-row:last-child { border-bottom: none; }
.mob-dash-act-left {
    display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.mob-dash-act-order { font-weight: 700; font-size: .82rem; color: var(--mob-primary); }
.mob-dash-act-guest { font-size: .88rem; font-weight: 600; color: #1a2a33; margin-bottom: 2px; }
.mob-dash-act-meta  { font-size: .76rem; color: var(--mob-muted); display: flex; gap: 6px; flex-wrap: wrap; }
.mob-dash-act-by    { color: #94a3b8; }

/* ── Filter bar ─────────────────────────────── */
.mob-filter-bar    { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mob-filter-input  { flex: 1; min-width: 160px; }
.mob-filter-select { width: 150px; flex-shrink: 0; }

/* ── Week navigator ─────────────────────────── */
.mob-week-nav {
    display: inline-flex; align-items: stretch; flex-shrink: 0;
    border: 1px solid var(--mob-border); border-radius: var(--mob-radius-sm);
    background: var(--mob-card-bg); overflow: hidden;
}
.mob-week-btn {
    background: none; border: none; cursor: pointer;
    color: var(--mob-primary); padding: 6px 10px; line-height: 1;
    display: flex; align-items: center; transition: background .15s;
}
.mob-week-btn:hover { background: var(--mob-primary-lt); }
.mob-week-label {
    font-size: .82rem; font-weight: 600; color: #1a2a33;
    padding: 0 8px; white-space: nowrap; min-width: 148px; text-align: center;
    border-left: 1px solid var(--mob-border); border-right: 1px solid var(--mob-border);
    display: flex; align-items: center; justify-content: center;
}
.mob-week-label.is-all { color: var(--mob-muted); font-style: italic; font-weight: 400; }
.mob-week-this {
    background: none; border: none; border-left: 1px solid var(--mob-border);
    cursor: pointer; font-size: .78rem; font-weight: 600;
    color: var(--mob-primary); padding: 6px 10px; white-space: nowrap;
    transition: background .15s, color .15s;
}
.mob-week-this:hover   { background: var(--mob-primary-lt); }
.mob-week-this.active  { background: var(--mob-primary); color: #fff; }

/* ── Booking card list ──────────────────────── */
.mob-card-list { display: flex; flex-direction: column; gap: 10px; }
.mob-booking-card {
    background: var(--mob-card-bg); border-radius: var(--mob-radius);
    border: 1px solid var(--mob-border); padding: 14px 44px 14px 16px;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: 5px;
    position: relative; transition: box-shadow .15s, border-color .15s;
}
.mob-booking-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); border-color: var(--mob-accent); }
.mob-booking-header   { display: flex; align-items: center; gap: 8px; }
.mob-request-no       { font-size: .82rem; font-weight: 700; color: var(--mob-primary); letter-spacing: .3px; }
.mob-booking-name     { font-size: 1rem; font-weight: 600; color: #1a2a33; }
.mob-booking-meta     { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--mob-muted); }
.mob-booking-address  { font-size: .82rem; color: #4a5568; }
.mob-booking-chevron  { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mob-muted); font-size: 1rem; }

/* ── Empty state ────────────────────────────── */
.mob-empty      { text-align: center; padding: 48px 16px; color: var(--mob-muted); }
.mob-empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; opacity: .4; }

/* ── Status badges ──────────────────────────── */
.mob-badge         { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .3px; }
.mob-badge-warning { background: var(--mob-warning-lt); color: #92400e; }
.mob-badge-info    { background: var(--mob-info-lt);    color: #1e40af; }
.mob-badge-primary { background: #e0f2fe;               color: #075985; }
.mob-badge-danger  { background: var(--mob-danger-lt);  color: #991b1b; }
.mob-badge-muted   { background: #f1f5f9;               color: var(--mob-muted); }

/* ── Detail page ────────────────────────────── */
.mob-detail-back { margin-bottom: 12px; }
.mob-card        { background: var(--mob-card-bg); border-radius: var(--mob-radius); border: 1px solid var(--mob-border); overflow: hidden; }
.mob-card-header { background: #f8fafc; border-bottom: 1px solid var(--mob-border); padding: 12px 16px; font-size: .95rem; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mob-card-body   { padding: 16px; }
.mob-card-closed { border-color: var(--mob-border); }

.mob-info-row          { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.mob-info-row:last-child { border-bottom: none; }
.mob-info-row-muted    { opacity: .75; }
.mob-info-icon  { color: var(--mob-accent); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; width: 20px; text-align: center; }
.mob-info-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--mob-muted); margin-bottom: 2px; }
.mob-info-value { font-size: .95rem; color: #1a2a33; font-weight: 500; }
.mob-info-sub   { font-size: .8rem; color: var(--mob-muted); font-weight: 400; }
.mob-info-slot  { background: var(--mob-primary-lt); color: var(--mob-primary); padding: 1px 8px; border-radius: 4px; font-size: .82rem; font-weight: 600; }

/* ── Status action buttons ──────────────────── */
.mob-status-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mob-status-btn {
    flex: 1; min-width: 110px; padding: 10px 14px;
    border-radius: var(--mob-radius-sm); border: 2px solid transparent;
    font-size: .88rem; font-weight: 600; transition: all .15s; cursor: pointer;
}
.mob-btn-action-confirm { background: var(--mob-info-lt); color: #1e40af; border-color: #93c5fd; }
.mob-btn-action-confirm.selected, .mob-btn-action-confirm:hover { background: var(--mob-info); color: #fff; border-color: var(--mob-info); }
.mob-btn-action-pickup  { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.mob-btn-action-pickup.selected, .mob-btn-action-pickup:hover { background: #0284c7; color: #fff; border-color: #0284c7; }
.mob-btn-action-cancel  { background: var(--mob-danger-lt); color: #991b1b; border-color: #fca5a5; }
.mob-btn-action-cancel.selected, .mob-btn-action-cancel:hover { background: var(--mob-danger); color: #fff; border-color: var(--mob-danger); }
.mob-closed-icon { display: block; font-size: 2.5rem; margin: 12px auto 8px; color: var(--mob-muted); opacity: .5; }

/* ── Undo button ────────────────────────────── */
.mob-undo-hint {
    font-size: .82rem; color: var(--mob-muted); margin-bottom: 8px;
}
.mob-btn-undo {
    background: var(--mob-warning-lt); color: #92400e;
    border: 1.5px solid #fcd34d; border-radius: var(--mob-radius-sm);
    padding: 9px 18px; font-size: .88rem; font-weight: 700;
    display: inline-flex; align-items: center; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.mob-btn-undo:hover { background: #fef3c7; border-color: var(--mob-warning); }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 600px) {
    .mob-stat-row { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
    .mob-stat-row     { grid-template-columns: repeat(2,1fr); }
    .mob-stat-row-3   { grid-template-columns: repeat(3,1fr); }
    .mob-dash-head    { flex-direction: column; align-items: flex-start; }
    .mob-filter-select { width: 100%; }
    .mob-filter-input  { width: 100%; }
    .mob-week-nav      { width: 100%; }
    .mob-week-label    { flex: 1; }
    .mob-login-card    { padding: 28px 20px; }
}

/* ── Bottom navigation ──────────────────────── */
.mob-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    height: 58px;
    background: var(--mob-primary);
    display: flex; align-items: stretch;
    box-shadow: 0 -2px 10px rgba(0,0,0,.18);
}
.mob-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    color: rgba(255,255,255,.7); font-size: .7rem; font-weight: 600;
    text-decoration: none; letter-spacing: .3px;
    transition: background .15s, color .15s;
}
.mob-nav-item i     { font-size: 1.3rem; line-height: 1; }
.mob-nav-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.mob-nav-active     { color: #fff; background: rgba(255,255,255,.15); border-top: 3px solid var(--mob-accent); }

/* push main content above bottom nav */
.mob-with-bottom-nav { padding-bottom: calc(58px + 16px); }

/* ── Today page ─────────────────────────────── */
.mob-today-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 14px;
}
.mob-today-title { font-size: 1.2rem; font-weight: 700; color: var(--mob-primary); margin: 0 0 2px; }
.mob-today-date  { font-size: .82rem; color: var(--mob-muted); }

.mob-today-summary {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px;
}
.mob-all-summary { grid-template-columns: repeat(5,1fr); }
.mob-today-tile {
    border-radius: var(--mob-radius-sm); padding: 10px 6px; text-align: center;
    border: 2px solid transparent;
}
.mob-today-tile-val { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.mob-today-tile-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; color: var(--mob-muted); }
.mob-today-tile-total  { background: var(--mob-primary-lt); border-color: #b8d8df; }
.mob-today-tile-total  .mob-today-tile-val { color: var(--mob-primary); }
.mob-today-tile-warning{ background: var(--mob-warning-lt); border-color: #fde68a; }
.mob-today-tile-warning .mob-today-tile-val { color: var(--mob-warning); }
.mob-today-tile-pending{ background: var(--mob-info-lt);    border-color: #bfdbfe; }
.mob-today-tile-pending .mob-today-tile-val { color: var(--mob-info); }
.mob-today-tile-done   { background: #f0fdf4;               border-color: #bbf7d0; }
.mob-today-tile-done   .mob-today-tile-val { color: var(--mob-success); }
.mob-today-tile-cancel { background: var(--mob-danger-lt);  border-color: #fecaca; }
.mob-today-tile-cancel .mob-today-tile-val { color: var(--mob-danger); }

/* Tile filter — interactive (Apple-style tap feedback) */
.mob-today-tile[data-filter] {
    cursor: pointer;
    user-select: none;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.mob-today-tile[data-filter]:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
}
.mob-today-tile[data-filter]:active { transform: scale(.95); transition-duration: .08s; }
.mob-today-tile-total.is-active   { background: var(--mob-primary);  border-color: var(--mob-primary); }
.mob-today-tile-total.is-active .mob-today-tile-val,
.mob-today-tile-total.is-active .mob-today-tile-lbl { color: #fff; }
.mob-today-tile-warning.is-active { background: var(--mob-warning); border-color: var(--mob-warning); }
.mob-today-tile-warning.is-active .mob-today-tile-val,
.mob-today-tile-warning.is-active .mob-today-tile-lbl { color: #fff; }
.mob-today-tile-pending.is-active { background: var(--mob-info);     border-color: var(--mob-info); }
.mob-today-tile-pending.is-active .mob-today-tile-val,
.mob-today-tile-pending.is-active .mob-today-tile-lbl { color: #fff; }
.mob-today-tile-done.is-active    { background: var(--mob-success);  border-color: var(--mob-success); }
.mob-today-tile-done.is-active .mob-today-tile-val,
.mob-today-tile-done.is-active .mob-today-tile-lbl { color: #fff; }
.mob-today-tile-cancel.is-active  { background: var(--mob-danger);   border-color: var(--mob-danger); }
.mob-today-tile-cancel.is-active .mob-today-tile-val,
.mob-today-tile-cancel.is-active .mob-today-tile-lbl { color: #fff; }

.mob-today-list { display: flex; flex-direction: column; }

.mob-today-card {
    background: var(--mob-card-bg); border-radius: var(--mob-radius);
    border: 2px solid var(--mob-border);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 12px; overflow: hidden; max-height: 800px;
    transition: box-shadow .18s, border-color .18s, opacity .22s ease, max-height .28s ease, margin .22s ease, padding .22s ease;
}
.mob-today-card-hidden {
    opacity: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
}
.mob-today-card:not(.mob-today-card-done):not(.mob-today-card-cancel) {
    border-left: 4px solid var(--mob-accent);
}
.mob-today-card-done   { border-left: 4px solid var(--mob-success); background: #f8fffe; opacity: .85; }
.mob-today-card-cancel { border-left: 4px solid var(--mob-danger);  background: #fff8f8; opacity: .75; }

.mob-today-card-header {
    display: flex; align-items: center; justify-content: space-between;
}
.mob-today-slot  { font-size: .88rem; font-weight: 700; color: var(--mob-primary); }
.mob-today-reqno { font-size: .78rem; font-weight: 600; color: var(--mob-muted); background: #f1f5f9; border-radius: 4px; padding: 1px 7px; }
.mob-today-guest { font-size: 1.05rem; font-weight: 700; color: #1a2a33; }
.mob-today-meta  { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; }
.mob-today-contact { color: var(--mob-muted); text-decoration: none; }
.mob-today-contact:hover { color: var(--mob-accent); }
.mob-today-addr  { font-size: .82rem; color: #4a5568; }

.mob-today-timestamp {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    font-size: .78rem; padding: 4px 8px; border-radius: var(--mob-radius-sm);
    margin-top: 6px;
}
.mob-today-timestamp span { font-weight: 600; }
.mob-today-timestamp-confirmed {
    color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe;
}
.mob-today-timestamp-inline {
    font-size: .8rem; font-weight: 600; margin-left: 6px;
}
.mob-today-timestamp-by { font-size: .75rem; color: var(--mob-muted); font-weight: 400; }

.mob-today-locked {
    font-size: .88rem; color: var(--mob-muted);
    padding: 6px 10px; border-radius: var(--mob-radius-sm);
    background: #f8fafc; border: 1px dashed var(--mob-border);
}
.mob-today-remark { font-size: .8rem; color: var(--mob-muted); margin-top: 4px; font-style: italic; }

.mob-today-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 2px; }

.mob-btn-pickup {
    background: #0e7490; color: #fff;
    border-radius: var(--mob-radius-sm); border: none;
    padding: 9px 18px; font-size: .9rem; font-weight: 700;
    display: inline-flex; align-items: center; cursor: pointer;
    transition: background .15s;
}
.mob-btn-pickup:hover { background: #0a5f74; }

.mob-btn-cancel-toggle {
    background: var(--mob-danger-lt); color: #991b1b;
    border: 1.5px solid #fca5a5; border-radius: var(--mob-radius-sm);
    padding: 9px 16px; font-size: .9rem; font-weight: 700;
    display: inline-flex; align-items: center; cursor: pointer;
    transition: background .15s;
}
.mob-btn-cancel-toggle:hover { background: #fecaca; }

.mob-today-cancel-panel {
    background: #fff8f8; border: 1.5px solid #fca5a5;
    border-radius: var(--mob-radius-sm); padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.mob-today-remark-label { font-size: .82rem; font-weight: 600; color: #991b1b; }
.mob-today-remark-input { font-size: .88rem; border-color: #fca5a5; }
.mob-today-remark-input:focus { border-color: var(--mob-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.mob-today-cancel-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.mob-btn-cancel-confirm {
    background: var(--mob-danger); color: #fff;
    border: none; border-radius: var(--mob-radius-sm);
    padding: 8px 16px; font-size: .88rem; font-weight: 700;
    display: inline-flex; align-items: center; cursor: pointer;
    transition: background .15s;
}
.mob-btn-cancel-confirm:hover { background: #b91c1c; }

@media (max-width: 480px) {
    .mob-today-summary { grid-template-columns: repeat(2,1fr); }
    .mob-today-tile-val { font-size: 1.35rem; }
}

/* ── POS / New order ───────────────────────── */
.mob-pos-list { display: flex; flex-direction: column; gap: 8px; }
.mob-pos-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--mob-card-bg); border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm); padding: 10px 12px;
}
.mob-pos-info { min-width: 0; }
.mob-pos-name { font-weight: 600; font-size: .92rem; }
.mob-pos-desc { color: var(--mob-muted); font-size: .78rem; }
.mob-pos-price { color: var(--mob-primary); font-weight: 700; font-size: .85rem; margin-top: 2px; }

.mob-qty { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mob-qty-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--mob-border); background: #f8fafc;
    font-size: 1.1rem; font-weight: 700; line-height: 1; color: var(--mob-primary);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.mob-qty-btn:active { background: var(--mob-primary-lt); }
.mob-qty-input {
    width: 46px; height: 34px; text-align: center; font-weight: 700;
    border: 1px solid var(--mob-border); border-radius: var(--mob-radius-sm);
    -moz-appearance: textfield;
}
.mob-qty-input::-webkit-outer-spin-button,
.mob-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mob-pos-footer {
    position: sticky; bottom: calc(var(--mob-bottom-nav-h, 64px));
    background: var(--mob-card-bg); border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius); padding: 12px 16px; margin-bottom: 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,.05);
}
.mob-pos-total {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 1.05rem; margin-bottom: 10px;
}
.mob-pos-total strong { color: var(--mob-primary); font-size: 1.25rem; }

/* ── Per-service sections (Today + Requests) ─────────────────────────── */
.mob-svc-section { margin-top: 22px; }

.mob-svc-section-head {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--mob-muted);
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(120,140,150,.18);
    margin-bottom: 12px;
}

.mob-svc-section-count {
    display: inline-block; min-width: 1.4rem; padding: 1px 7px;
    border-radius: 20px; background: rgba(120,140,150,.16);
    font-size: .72rem; text-align: center; color: #37474f;
}

.mob-svc-section-empty {
    font-size: .84rem; color: var(--mob-muted);
    padding: 10px 2px; font-style: italic;
}

/* Sub-heading inside a dashboard section (e.g. Housekeeping & Aircon totals) */
.mob-dash-sub-lbl {
    font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--mob-muted);
    margin: 16px 0 8px; padding: 0 2px;
}