/* ============================================
   QuickBite POS - Dashboard Page
   ============================================ */

.dashboard-page {
    --dash-purple: #9b7cff;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 30px;
}

.dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 83% 0%, rgba(255, 107, 61, .16), transparent 28%),
        linear-gradient(130deg, rgba(33, 40, 58, .92), rgba(16, 19, 31, .95));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.dashboard-eyebrow,
.panel-kicker {
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.dashboard-hero h1 {
    margin-top: 7px;
    font-size: clamp(25px, 2.3vw, 36px);
    letter-spacing: -.045em;
}

.dashboard-hero > div:first-child p {
    margin-top: 7px;
    color: var(--text-secondary);
    font-size: 13px;
}

.dashboard-filter {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-width: 330px;
}

.dashboard-filter > div { flex: 1; }
.dashboard-filter label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dashboard-date-field {
    display: flex;
    min-width: 190px;
}

.dashboard-date-field input {
    height: 44px;
    border-radius: 12px 0 0 12px;
    background: rgba(9, 11, 19, .72);
}

.dashboard-date-field button {
    width: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    color: var(--accent);
    background: rgba(9, 11, 19, .72);
}

.dashboard-refresh {
    height: 44px;
    border-radius: 12px;
}

.dashboard-refresh.is-loading i { animation: spin .8s linear infinite; }

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-kpi {
    position: relative;
    min-height: 142px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(29, 34, 51, .96), rgba(19, 23, 36, .98));
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.dashboard-kpi:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: 0 16px 35px rgba(0, 0, 0, .22);
}

.dashboard-kpi::before {
    content: '';
    position: absolute;
    right: -26px;
    top: -34px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: currentColor;
    opacity: .07;
}

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 650;
}

.kpi-top i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: currentColor;
    background: rgba(255, 255, 255, .055);
}

.dashboard-kpi > strong {
    display: block;
    margin: 12px 0 9px;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: clamp(23px, 2vw, 31px);
    line-height: 1;
    letter-spacing: -.045em;
}

.dashboard-kpi > small {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 9px;
}

.dashboard-kpi > small span { color: var(--text-muted); }
.dashboard-kpi > small.up { color: var(--success); }
.dashboard-kpi > small.down { color: var(--danger); }
.dashboard-kpi > small.flat { color: var(--text-secondary); }
.dashboard-kpi.orange { color: var(--accent); }
.dashboard-kpi.gold { color: var(--gold); }
.dashboard-kpi.green { color: var(--success); }
.dashboard-kpi.blue { color: var(--info); }
.dashboard-kpi.purple { color: var(--dash-purple); }

.dashboard-grid {
    display: grid;
    gap: 18px;
}

.dashboard-grid-primary { grid-template-columns: minmax(0, 1.75fr) minmax(300px, .75fr); }
.dashboard-grid-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dashboard-panel {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(23, 27, 42, .98), rgba(16, 19, 31, .98));
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 12px;
}

.dashboard-panel-head h3 {
    margin-top: 5px;
    font-size: 16px;
    letter-spacing: -.025em;
}

.panel-chip,
.payment-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    background: rgba(9, 11, 19, .5);
    font-size: 9px;
    font-weight: 700;
}

.panel-chip i { color: var(--accent); }

.panel-link {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}
.panel-link:hover { color: var(--accent); }
.panel-link i { margin-left: 5px; }

.dashboard-chart-loading {
    min-height: 270px;
    display: grid;
    place-items: center;
}

.trend-summary {
    display: flex;
    gap: 28px;
    padding: 4px 22px 0;
}

.trend-summary > div { display: flex; flex-direction: column; }
.trend-summary strong { font-family: var(--font-heading); font-size: 19px; }
.trend-summary span { margin-top: 2px; color: var(--text-muted); font-size: 9px; }

.sales-trend-chart {
    width: 100%;
    min-height: 220px;
    padding: 0 8px 5px;
    overflow: visible;
}

.chart-grid line { stroke: rgba(154, 163, 184, .12); stroke-width: 1; }
.chart-area { fill: url(#dashboardArea); }
.chart-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 8px rgba(255, 107, 61, .28));
}
.chart-point {
    fill: var(--bg-secondary);
    stroke: var(--accent);
    stroke-width: 3;
}
.chart-label {
    fill: var(--text-muted);
    font-family: var(--font-body);
    font-size: 10px;
}

.service-mix {
    min-height: 270px;
    padding: 12px 22px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.service-donut {
    width: 148px;
    height: 148px;
    flex: 0 0 148px;
    padding: 18px;
    border-radius: 50%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .22);
}

.service-donut > div {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    background: var(--bg-secondary);
}
.service-donut strong { font-family: var(--font-heading); font-size: 27px; }
.service-donut span { color: var(--text-muted); font-size: 10px; }

.service-legend {
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.service-legend > div {
    display: grid;
    grid-template-columns: 9px 1fr auto;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 10px;
}
.service-legend strong { color: var(--text-primary); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-action {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(23, 27, 42, .82);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.dashboard-action:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 107, 61, .45);
    background: var(--accent-subtle);
}
.dashboard-action > i:first-child {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--accent);
    background: var(--accent-subtle);
}
.dashboard-action > i:last-child { color: var(--text-muted); font-size: 10px; }
.dashboard-action span { display: flex; min-width: 0; flex-direction: column; }
.dashboard-action strong { font-size: 11px; }
.dashboard-action small { margin-top: 2px; color: var(--text-muted); font-size: 9px; }

.payment-breakdown,
.dashboard-ranking,
.operations-block {
    padding: 8px 20px 20px;
}

.payment-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(39, 45, 62, .72);
}
.payment-row:last-child { border-bottom: 0; }
.payment-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--info);
    background: var(--info-subtle);
}
.payment-data { min-width: 0; }
.payment-data > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 10px;
}
.payment-data span { color: var(--text-muted); font-size: 9px; }
.payment-track,
.ranking-track {
    display: block;
    height: 4px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}
.payment-track span,
.ranking-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #ff9c7b);
}
.payment-row > strong { font-size: 11px; }

.ranking-row {
    display: grid;
    grid-template-columns: 28px minmax(120px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(39, 45, 62, .72);
}
.ranking-row:last-child { border-bottom: 0; }
.ranking-number {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 9px;
}
.ranking-row > div { min-width: 0; }
.ranking-row > div > strong {
    display: block;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ranking-row > span:nth-last-child(2) { color: var(--text-muted); font-size: 9px; }
.ranking-row > strong { font-size: 10px; }

.dashboard-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.dashboard-table { min-width: 600px; }
.dashboard-table th {
    padding: 10px 18px;
    color: var(--text-muted);
    background: rgba(9, 11, 19, .28);
    font-size: 8px;
    letter-spacing: .11em;
    text-align: left;
    text-transform: uppercase;
}
.dashboard-table td {
    padding: 12px 18px;
    border-top: 1px solid rgba(39, 45, 62, .66);
    color: var(--text-secondary);
    font-size: 10px;
}
.dashboard-table td:first-child { display: flex; flex-direction: column; }
.dashboard-table td:first-child strong,
.dashboard-table td:last-child strong { color: var(--text-primary); }
.dashboard-table td:first-child span { margin-top: 2px; color: var(--text-muted); font-size: 8px; }

.dashboard-team-panel {
    display: grid;
    grid-template-rows: auto 1fr;
}
.dashboard-team-panel #dashboardOperations {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.operations-block + .operations-block { border-left: 1px solid var(--border); }
.operations-block h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 10px;
}
.operations-block h4 i { color: var(--accent); }
.operation-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(39, 45, 62, .6);
}
.operation-row:last-child { border-bottom: 0; }
.avatar-mini {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--accent);
    background: var(--accent-subtle);
    font-size: 10px;
    font-weight: 800;
}
.counter-status {
    width: 9px;
    height: 9px;
    margin-left: 10px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px var(--success-subtle);
}
.operation-row > div { display: flex; min-width: 0; flex-direction: column; }
.operation-row > div strong {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.operation-row > div span,
.operation-row > strong { color: var(--text-muted); font-size: 8px; }
.operation-row > strong { color: var(--text-primary); }

.dashboard-empty {
    min-height: 190px;
    display: grid;
    place-content: center;
    gap: 8px;
    text-align: center;
    color: var(--text-muted);
}
.dashboard-empty i { color: var(--warning); font-size: 24px; }
.dashboard-empty.compact { min-height: 90px; }
.muted-copy { padding: 14px 0; color: var(--text-muted); font-size: 10px; }

.skeleton-card span,
.skeleton-card strong,
.skeleton-card small {
    display: block;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
    background-size: 220% 100%;
    animation: dashboardShimmer 1.3s linear infinite;
}
.skeleton-card span { width: 48%; height: 10px; }
.skeleton-card strong { width: 66%; height: 28px; margin: 22px 0 15px; }
.skeleton-card small { width: 78%; height: 8px; }

@keyframes dashboardShimmer {
    to { background-position: -220% 0; }
}

@media (max-width: 1250px) {
    .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-kpi:nth-child(4),
    .dashboard-kpi:nth-child(5) { min-height: 124px; }
    .dashboard-grid-primary { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); }
}

@media (max-width: 980px) {
    .dashboard-hero { align-items: stretch; flex-direction: column; }
    .dashboard-filter { min-width: 0; }
    .dashboard-grid-primary,
    .dashboard-grid-secondary { grid-template-columns: 1fr; }
    .dashboard-quick-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
    .dashboard-page { gap: 14px; }
    .dashboard-hero { padding: 20px; border-radius: 17px; }
    .dashboard-filter { align-items: stretch; flex-direction: column; }
    .dashboard-refresh { width: 100%; }
    .dashboard-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dashboard-kpi { min-height: 125px; padding: 15px; }
    .dashboard-kpi:last-child { grid-column: 1 / -1; }
    .dashboard-quick-actions { grid-template-columns: 1fr; }
    .service-mix { flex-direction: column; }
    .dashboard-team-panel #dashboardOperations { grid-template-columns: 1fr; }
    .operations-block + .operations-block { border-top: 1px solid var(--border); border-left: 0; }
    .dashboard-panel-head { padding: 16px 16px 10px; }
    .payment-breakdown,
    .dashboard-ranking,
    .operations-block { padding-right: 16px; padding-left: 16px; }
    .ranking-row { grid-template-columns: 24px minmax(90px, 1fr) auto; }
    .ranking-row > span:nth-last-child(2) { display: none; }
}

.dashboard-recent {
    margin-top: var(--sp-6);
}
.dashboard-recent h3 {
    margin-bottom: var(--sp-4);
}

/* ============================================
   Mobile Sales App
   ============================================ */

.mobile-sales-page {
    width: min(100%, 620px);
    height: 100dvh;
    min-height: 0;
    margin: 0 auto;
    padding: 7px;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, .92fr);
    gap: 6px;
    overflow: hidden;
}

.mobile-sales-content .mobile-sales-page {
    min-height: 0;
}

.mobile-sales-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 56px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 193, 7, .28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 107, 61, .32), rgba(34, 197, 94, .14) 48%, rgba(16, 19, 31, .98) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.2);
}

.mobile-sales-header span,
.mobile-sales-controls span,
.mobile-sales-section-title span {
    display: block;
    color: rgba(255,255,255,.78);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.mobile-sales-header h1 {
    margin-top: 2px;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
}

.mobile-sales-icon-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--gold));
}

.mobile-sales-icon-btn.is-loading i {
    animation: spin .8s linear infinite;
}

.mobile-sales-controls {
    padding: 7px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    background: rgba(23, 27, 42, .96);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 7px;
}

.mobile-sales-controls label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.mobile-sales-controls select,
.mobile-sales-controls input {
    width: 100%;
    height: 38px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(9, 11, 19, .82);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 900;
}

.mobile-sales-controls input[type="date"] {
    color-scheme: dark;
    letter-spacing: 0;
}

.mobile-sales-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 0;
}

.mobile-sales-status {
    min-height: 12px;
    padding: 0 2px;
    color: var(--success);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    text-align: right;
}

.mobile-sales-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(64px, .95fr) minmax(52px, .72fr) minmax(52px, .72fr);
    gap: 6px;
    min-height: 0;
}

.mobile-sales-metric,
.mobile-sales-card,
.mobile-sales-error {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(29, 34, 51, .98), rgba(16, 19, 31, .98));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.mobile-sales-metric {
    min-height: 0;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mobile-sales-metric:first-child {
    grid-column: 1 / -1;
    min-height: 0;
}

.mobile-sales-metric span {
    display: block;
    color: rgba(255,255,255,.76);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.mobile-sales-metric strong {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
}

.mobile-sales-metric:first-child strong {
    font-size: 31px;
}

.mobile-sales-metric > i {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, .13);
}

.mobile-sales-metric.accent { background: linear-gradient(145deg, rgba(255,107,61,.88), rgba(151,55,34,.9)); }
.mobile-sales-metric.green { background: linear-gradient(145deg, rgba(49,211,125,.82), rgba(20,91,65,.92)); }
.mobile-sales-metric.blue { background: linear-gradient(145deg, rgba(41,182,246,.82), rgba(23,78,126,.92)); }
.mobile-sales-metric.gold { background: linear-gradient(145deg, rgba(255,193,7,.82), rgba(113,79,18,.94)); }
.mobile-sales-metric.purple { background: linear-gradient(145deg, rgba(155,124,255,.82), rgba(63,50,126,.94)); }

.mobile-sales-metric.loading span,
.mobile-sales-metric.loading strong,
.mobile-sales-metric.loading i {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04));
    background-size: 220% 100%;
    animation: dashboardShimmer 1.3s linear infinite;
}

.mobile-sales-metric.loading span { width: 76px; height: 11px; }
.mobile-sales-metric.loading strong { width: 120px; height: 26px; }
.mobile-sales-metric.loading i { border-radius: 8px; }

.mobile-sales-panels {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
}

.mobile-sales-card {
    min-height: 0;
    padding: 8px;
    overflow: hidden;
}

.mobile-sales-payment-card {
    border-color: rgba(49, 211, 125, .24);
    background:
        linear-gradient(145deg, rgba(18, 52, 42, .92), rgba(16, 19, 31, .98));
}

.mobile-sales-recent-card {
    border-color: rgba(155, 124, 255, .26);
    background:
        linear-gradient(145deg, rgba(46, 38, 82, .9), rgba(16, 19, 31, .98));
}

#mobileSalesPayments,
#mobileSalesRecent {
    min-height: 0;
}

.mobile-sales-recent-card,
.mobile-sales-payment-card {
    display: flex;
    flex-direction: column;
}

.mobile-sales-recent-card #mobileSalesRecent,
.mobile-sales-payment-card #mobileSalesPayments {
    overflow-y: auto;
}

.mobile-sales-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 5px;
}

.mobile-sales-section-title h2 {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
}

.mobile-sales-link {
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
}

.mobile-sales-payment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 7px;
    margin-bottom: 5px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: rgba(255,255,255,.045);
}

.mobile-sales-payment-row:last-child {
    margin-bottom: 0;
}

.mobile-sales-payment-row.cash {
    border-color: rgba(49,211,125,.28);
    background: linear-gradient(135deg, rgba(49,211,125,.18), rgba(11, 20, 26, .42));
}

.mobile-sales-payment-row.card {
    border-color: rgba(41,182,246,.3);
    background: linear-gradient(135deg, rgba(41,182,246,.18), rgba(11, 20, 35, .42));
}

.mobile-sales-payment-row.upi {
    border-color: rgba(255,193,7,.3);
    background: linear-gradient(135deg, rgba(255,193,7,.18), rgba(30, 24, 12, .42));
}

.mobile-sales-payment-row strong,
.mobile-sales-order strong {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 900;
}

.mobile-sales-payment-row span,
.mobile-sales-order span {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
}

.mobile-sales-payment-value {
    margin-top: 0;
    color: #fff !important;
    font-weight: 900;
    font-size: 12px;
    text-align: right;
}

.mobile-sales-payment-track {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
}

.mobile-sales-payment-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--success));
}

.mobile-sales-payment-row.cash .mobile-sales-payment-track i { background: linear-gradient(90deg, #31d37d, #b8ff7a); }
.mobile-sales-payment-row.card .mobile-sales-payment-track i { background: linear-gradient(90deg, #29b6f6, #9b7cff); }
.mobile-sales-payment-row.upi .mobile-sales-payment-track i { background: linear-gradient(90deg, #ffc107, #ff6b3d); }

.mobile-sales-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 5px;
    padding: 7px;
    border: 1px solid rgba(155,124,255,.18);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(155,124,255,.15), rgba(9, 11, 19, .42));
}

.mobile-sales-order:last-child {
    margin-bottom: 0;
}

.mobile-sales-order.cash { border-color: rgba(49,211,125,.22); }
.mobile-sales-order.card { border-color: rgba(41,182,246,.24); }

.mobile-sales-order > div {
    min-width: 0;
}

.mobile-sales-order > div strong,
.mobile-sales-order > div span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-sales-empty {
    padding: 10px 0;
    color: var(--text-muted);
    font-size: 9px;
    text-align: center;
}

.mobile-sales-error {
    grid-column: 1 / -1;
    min-height: 128px;
    padding: 18px;
    display: grid;
    place-items: center;
    gap: 7px;
    text-align: center;
}

.mobile-sales-error i {
    color: var(--warning);
    font-size: 22px;
}

.mobile-sales-error span {
    color: var(--text-muted);
    font-size: 11px;
}

@media (max-width: 650px) {
    .mobile-sales-page {
        width: 100%;
        padding: 7px;
    }

    .mobile-sales-header,
    .mobile-sales-controls,
    .mobile-sales-card,
    .mobile-sales-metric,
    .mobile-sales-error {
        border-radius: 8px;
    }

    .mobile-sales-metric strong { font-size: 18px; }
    .mobile-sales-metric:first-child strong { font-size: 29px; }
}

@media (max-width: 390px) {
    .mobile-sales-page { gap: 6px; padding: 6px; }
    .mobile-sales-header { min-height: 50px; padding: 7px 9px; }
    .mobile-sales-header h1 { font-size: 18px; }
    .mobile-sales-controls { grid-template-columns: 1fr; }
    .mobile-sales-controls span { font-size: 8px; }
    .mobile-sales-controls select,
    .mobile-sales-controls input { height: 34px; font-size: 13px; }
    .mobile-sales-kpis { gap: 6px; }
    .mobile-sales-metric { padding: 8px; }
    .mobile-sales-metric:first-child strong { font-size: 26px; }
    .mobile-sales-metric strong { font-size: 16px; }
    .mobile-sales-metric span { font-size: 9px; }
    .mobile-sales-metric > i { width: 22px; height: 22px; flex-basis: 22px; font-size: 10px; }
    .mobile-sales-card { padding: 7px; }
}

@media (max-height: 720px) {
    .mobile-sales-page {
        grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, .78fr);
        gap: 5px;
        padding: 5px;
    }
    .mobile-sales-header { min-height: 46px; padding: 6px 8px; }
    .mobile-sales-header h1 { font-size: 17px; }
    .mobile-sales-section-title span { display: none; }
    .mobile-sales-icon-btn { width: 32px; height: 32px; flex-basis: 32px; }
    .mobile-sales-controls { padding: 6px; gap: 5px; }
    .mobile-sales-controls span { display: none; }
    .mobile-sales-controls select,
    .mobile-sales-controls input { height: 33px; padding: 5px 8px; font-size: 12px; }
    .mobile-sales-status { min-height: 10px; font-size: 9px; }
    .mobile-sales-kpis { gap: 5px; grid-template-rows: minmax(56px, .8fr) minmax(46px, .62fr) minmax(46px, .62fr); }
    .mobile-sales-metric { padding: 7px; }
    .mobile-sales-metric span { font-size: 8px; }
    .mobile-sales-metric strong { font-size: 15px; margin-top: 3px; }
    .mobile-sales-metric:first-child strong { font-size: 24px; }
    .mobile-sales-metric > i { width: 22px; height: 22px; flex-basis: 22px; font-size: 10px; }
    .mobile-sales-panels { gap: 5px; }
    .mobile-sales-card { padding: 6px; }
    .mobile-sales-section-title { margin-bottom: 3px; }
    .mobile-sales-payment-row { margin-bottom: 3px; padding: 5px; }
    .mobile-sales-order { margin-bottom: 3px; padding: 5px; }
    .mobile-sales-payment-row span,
    .mobile-sales-order span { display: none; }
    .mobile-sales-payment-row strong,
    .mobile-sales-order strong { font-size: 11px; }
}

/* Order cards in dashboard */
.order-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
    transition: all var(--transition-fast);
}
.order-card:hover {
    border-color: var(--accent);
}

.order-card .oc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.order-card .oc-left { display: flex; align-items: center; gap: var(--sp-3); }
.order-card .oc-number {
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    color: var(--accent);
}
.order-card .oc-time {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.order-card .oc-items {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--sp-3);
    line-height: var(--lh-relaxed);
}

.order-card .oc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-card .oc-total {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
}
.order-card .oc-actions {
    display: flex;
    gap: var(--sp-2);
}

/* Report section */
.report-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
}

.report-chart-placeholder {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.report-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.report-bar .bar-label {
    width: 120px;
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.report-bar .bar-track {
    flex: 1;
    height: 20px;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.report-bar .bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--accent);
    transition: width 500ms ease;
}
.report-bar .bar-value {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    min-width: 80px;
    text-align: right;
}

@media (max-width: 768px) {
    .report-grid {
        grid-template-columns: 1fr;
    }
}

/* Orders workspace */
.orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
}
.order-tabs {
    display: flex;
    gap: 7px;
    margin-bottom: 18px;
    overflow-x: auto;
}
.order-tab {
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}
.order-tab.active { color: #fff; border-color: var(--accent); background: var(--accent-subtle); }
.order-card { margin: 0; }
.order-card .oc-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 13px;
    color: var(--text-secondary);
    font-size: 11px;
}
.order-card .oc-meta i { margin-right: 5px; color: var(--text-muted); }
.order-detail-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.order-detail-summary > div {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-primary);
}
.order-detail-summary small { display:block; color:var(--text-secondary); margin-bottom:4px; }
.order-detail-summary strong { text-transform:capitalize; }
.order-detail-totals {
    margin: 15px 0;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    color: var(--text-secondary);
}
.order-detail-totals span { display:flex; flex-direction:column; gap:3px; }
.order-detail-totals .grand-total { color:var(--text-primary); font-size:16px; }
.edit-order-line {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto 90px 38px;
    gap: 12px;
    align-items: center;
    padding: 11px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-primary);
}
.edit-order-line small { display:block; color:var(--text-secondary); }
.edit-order-line .ci-qty { display:flex; align-items:center; gap:7px; }
.edit-order-line .ci-qty button {
    width:28px; height:28px; border:1px solid var(--border); border-radius:8px;
}

/* Report centre */
.report-controls {
    display: grid;
    grid-template-columns: minmax(190px, 1.3fr) minmax(170px, 1fr) 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}
.report-controls .form-group { margin: 0; }
.report-result {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-secondary);
}
.report-result-header {
    padding: 17px 19px;
    border-bottom: 1px solid var(--border);
}
.report-result-header p { margin-top:3px; color:var(--text-secondary); font-size:11px; }

@media (max-width: 760px) {
    .orders-grid { grid-template-columns: 1fr; }
    .order-detail-summary { grid-template-columns: 1fr 1fr; }
    .order-detail-totals { flex-wrap:wrap; justify-content:flex-start; }
    .edit-order-line { grid-template-columns: 1fr auto; }
    .report-controls { grid-template-columns: 1fr 1fr; }
}
.orders-date-tools {
    display: flex;
    align-items: end;
    gap: 12px;
}

.orders-date-tools .form-group { margin: 0; }
.orders-date-tools input { min-width: 158px; }

/* Kitchen / bar / order status displays */
.display-page {
    min-height: calc(100vh - var(--topbar-height) - 44px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.display-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(140deg, rgba(29, 34, 51, .96), rgba(13, 16, 28, .98));
}

.display-eyebrow {
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.display-head h2 {
    margin-top: 4px;
    font-size: 25px;
}

.display-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.display-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(49, 211, 125, .28);
    border-radius: 999px;
    color: var(--success);
    background: rgba(49, 211, 125, .1);
    font-size: 11px;
    font-weight: 800;
}

.display-live span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(49, 211, 125, .13);
}

.display-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.display-order-card {
    min-height: 250px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    background: rgba(20, 24, 38, .96);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.display-order-card.status-pending { border-color: rgba(255,193,7,.34); }
.display-order-card.status-preparing { border-color: rgba(41,182,246,.36); }
.display-order-card.status-ready {
    border-color: rgba(49,211,125,.45);
    background: linear-gradient(145deg, rgba(19, 54, 38, .92), rgba(16, 24, 28, .98));
}

.display-order-top,
.display-order-meta,
.display-order-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.display-order-top strong {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: capitalize;
}

.display-order-number {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 900;
}

.display-status-pill {
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--text-primary);
    background: rgba(255,255,255,.08);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.status-pending .display-status-pill { color: var(--warning); background: rgba(255,193,7,.12); }
.status-preparing .display-status-pill { color: var(--info); background: rgba(41,182,246,.12); }
.status-ready .display-status-pill { color: var(--success); background: rgba(49,211,125,.13); }

.display-order-meta {
    justify-content: flex-start;
    color: var(--text-secondary);
    font-size: 11px;
    flex-wrap: wrap;
}

.display-items {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 8px;
}

.display-item {
    padding: 10px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: rgba(8, 10, 18, .38);
}

.display-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
}

.display-item span {
    display: block;
    margin-top: 5px;
    padding-left: 12px;
    color: var(--text-secondary);
    font-size: 12px;
}

.display-notes {
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--warning);
    background: rgba(255,193,7,.09);
    font-size: 12px;
}

.display-order-actions {
    justify-content: flex-end;
    margin-top: auto;
}

.display-order-actions .btn {
    min-height: 38px;
    border-radius: 10px;
}

.display-empty {
    min-height: 360px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: var(--text-secondary);
    background: rgba(18, 21, 34, .7);
}

.display-empty i {
    color: var(--accent);
    font-size: 34px;
}

@media (max-width: 760px) {
    .display-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .display-head-actions { width: 100%; justify-content: space-between; }
    .display-grid { grid-template-columns: 1fr; }
}

.register-date-control {
    display: flex;
    align-items: stretch;
}

.register-date-control input {
    min-width: 160px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.register-date-control button {
    width: 42px;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--accent);
    background: var(--bg-tertiary);
    cursor: pointer;
}