:root {
  --daily-report-ink: #182033;
  --daily-report-muted: #667085;
  --daily-report-border: #e8eaf0;
  --daily-report-primary: #e61e6e;
  --daily-report-primary-soft: #fff0f6;
  --daily-report-shadow: 0 18px 44px rgba(39, 27, 52, 0.08);
}

body.today-report-page {
  min-height: 100vh;
  margin: 0;
  color: var(--daily-report-ink);
  background: radial-gradient(circle at 8% 0%, rgba(255, 221, 170, .28), transparent 28%), radial-gradient(circle at 94% 6%, rgba(230, 30, 110, .10), transparent 26%), #f8f8fb;
}

.today-report-experience { max-width: 1640px; padding: 12px 20px 18px; }
.today-report-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 8px; padding: 0 2px; }
.today-report-eyebrow, .report-kicker { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 2px; color: var(--daily-report-primary); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.today-report-intro-copy h1 { margin: 0; color: var(--daily-report-ink); font-size: clamp(19px, 1.6vw, 23px); font-weight: 750; letter-spacing: -.035em; line-height: 1.12; }
.today-report-intro-copy p { margin: 3px 0 0; color: var(--daily-report-muted); font-size: 11px; }

.report-view-tabs { display: grid; grid-template-columns: repeat(2, minmax(175px, 1fr)); gap: 4px; min-width: 390px; padding: 4px; border: 1px solid rgba(230, 30, 110, .1); border-radius: 14px; background: rgba(255,255,255,.78); box-shadow: 0 6px 18px rgba(31,37,54,.06); backdrop-filter: blur(12px); }
.report-view-tabs .btn-type-report { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 9px; border: 0 !important; border-radius: 10px !important; color: #667085 !important; background: transparent !important; box-shadow: none !important; text-align: left; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.report-view-tabs .btn-type-report:hover { transform: translateY(-1px); }
.report-view-tabs .btn-type-report.active { color: #fff !important; background: linear-gradient(135deg, #e61e6e 0%, #c91760 100%) !important; box-shadow: 0 8px 18px rgba(230,30,110,.24) !important; }
.report-view-tab-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--daily-report-primary); background: #fff; box-shadow: 0 3px 10px rgba(56,30,48,.08); font-size: 11px; }
.report-view-tabs .btn-type-report:not(.active) .report-view-tab-icon { background: #f5f6f8; }
.report-view-tabs strong, .report-view-tabs small { display: block; }
.report-view-tabs strong { font-size: 12px; font-weight: 750; }
.report-view-tabs small { margin-top: 0; color: inherit; font-size: 9px; opacity: .76; }

.report-surface { overflow: hidden; border: 1px solid rgba(33,39,54,.07); border-radius: 16px; background: #fff; box-shadow: var(--daily-report-shadow); }
.report-period-row, .closing-report-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px; }
.report-section-heading { display: flex; align-items: center; gap: 9px; }
.report-section-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--daily-report-primary); background: linear-gradient(145deg, #fff0f6, #f6efff); font-size: 11px; }
.report-section-heading h2, .report-breakdown-header h2 { margin: 0; color: var(--daily-report-ink); font-size: 13px; font-weight: 750; letter-spacing: -.015em; }
.report-section-heading p, .report-breakdown-header p { margin: 1px 0 0; color: var(--daily-report-muted); font-size: 9px; }
.report-period-control { min-width: 244px; }
.report-period-control .nav-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 12px; background: #f1f3f6; }
.report-period-control .nav-item { margin: 0; }
.report-period-control .nav-link { padding: 6px 14px; border: 0 !important; border-radius: 8px !important; color: #7b8190; font-size: 11px; font-weight: 650; text-align: center; }
.report-period-control .nav-link.active { color: var(--daily-report-primary); background: #fff; box-shadow: 0 3px 10px rgba(31,37,54,.09); }
.report-divider { height: 1px; background: #f0f1f4; }
.report-dashboard-content { padding: 10px 14px 12px; }
.report-breakdown-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

.report-live-badge, .closing-report-note, .report-period-label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; color: #667085; background: #f5f6f8; font-size: 9px; font-weight: 650; white-space: nowrap; }
.report-live-badge > span { width: 7px; height: 7px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 3px rgba(34,160,107,.12); }
.report-breakdown-tabs { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 6px; overflow-x: auto; padding: 1px 0 2px; scrollbar-width: thin; }
.report-breakdown-tabs .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--daily-report-border) !important; border-radius: 9px !important; color: #5e6575 !important; background: #fff !important; font-size: 11px; font-weight: 650; white-space: nowrap; box-shadow: none !important; transition: all 160ms ease; }
.report-breakdown-tabs .btn:hover { border-color: rgba(230,30,110,.38) !important; color: var(--daily-report-primary) !important; background: #fffafd !important; box-shadow: inset 0 0 0 1px rgba(230,30,110,.08) !important; transform: none; }
.report-breakdown-tabs .btn:focus-visible { outline: 2px solid rgba(230,30,110,.22); outline-offset: -2px; }
.report-breakdown-tabs .btn.active { border-color: var(--daily-report-primary) !important; color: var(--daily-report-primary) !important; background: var(--daily-report-primary-soft) !important; box-shadow: inset 0 0 0 1px rgba(230,30,110,.04) !important; }

.report-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.report-metric-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 1px solid #eeeff3; border-radius: 11px; background: #fbfbfc; }
.report-metric-card .report-metric-icon { display: inline-grid; flex: 0 0 30px; width: 30px; height: 30px; align-items: center; justify-content: center; place-items: center; border-radius: 9px; color: var(--metric-color, #e61e6e); background: var(--metric-bg, #fff0f6); font-size: 12px; line-height: 1; }
.report-metric-icon > i,
.report-metric-icon > svg { display: block; width: 12px; height: 12px; margin: auto; }
.report-metric-primary { --metric-color: #e61e6e; --metric-bg: #fff0f6; }
.report-metric-success { --metric-color: #16845b; --metric-bg: #eaf9f2; }
.report-metric-soft { --metric-color: #7c3aed; --metric-bg: #f2edff; }
.report-metric-info { --metric-color: #3478d4; --metric-bg: #ecf4ff; }
.report-metric-warning { --metric-color: #c77016; --metric-bg: #fff4e5; }
.report-metric-card > div { min-width: 0; }
.report-metric-card span, .report-metric-card strong { display: block; }
.report-metric-card > div > span { overflow: hidden; color: #777d8b; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.report-metric-card strong { overflow: hidden; margin-top: 1px; color: #202638; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.report-visual-panel { margin-top: 8px; border: 1px solid var(--daily-report-border); border-radius: 13px; background: #fff; }
.report-visual-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid #eff0f3; }
.report-visual-header h3 { margin: 0; color: var(--daily-report-ink); font-size: 12px; font-weight: 750; }
.report-visual-header p { margin: 1px 0 0; color: var(--daily-report-muted); font-size: 9px; }
.report-period-label { color: var(--daily-report-primary); background: var(--daily-report-primary-soft); }
.report-visual-body { min-height: 220px; max-height: calc(100vh - 330px); overflow: auto; padding: 4px 9px 2px; }
.report-chart-empty { display: flex; min-height: 200px; align-items: center; justify-content: center; flex-direction: column; padding: 18px; text-align: center; }
.report-chart-empty > span { display: grid; width: 42px; height: 42px; margin-bottom: 8px; place-items: center; border-radius: 13px; color: #e61e6e; background: linear-gradient(145deg, #fff0f6, #f4efff); font-size: 15px; }
.report-chart-empty h4 { margin: 0; color: #303748; font-size: 13px; font-weight: 750; }
.report-chart-empty p { margin: 5px 0 0; color: #858b98; font-size: 10px; }
.report-visual-body .apexcharts-canvas { margin: 0 auto; }
.report-visual-body .table-responsive, .closing-report-table-wrap { border-radius: 12px; }
.report-visual-body .kasair-table, .closing-report-table-wrap .kasair-table { margin-bottom: 0; color: #3a4151; font-size: 11px; }
.report-visual-body .kasair-table thead, .closing-report-table-wrap .kasair-table thead { color: #687082; background: #f7f7f9; }
.report-visual-body .kasair-table th, .closing-report-table-wrap .kasair-table th { padding: 8px 10px; border: 0; font-size: 9px; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.report-visual-body .kasair-table td, .closing-report-table-wrap .kasair-table td { padding: 8px 10px; border-color: #f0f1f4; vertical-align: middle; }

.closing-report-content { padding: 0 14px 12px; }
.closing-report-note { color: #16845b; background: #eaf9f2; }
.closing-report-table-wrap { max-height: calc(100vh - 258px); overflow: auto; border: 1px solid var(--daily-report-border); background: #fff; scrollbar-width: thin; }
.table-closing-report { width: 100% !important; min-width: 820px; table-layout: fixed; }
.table-closing-report col.closing-col-number { width: 50px; }
.table-closing-report col.closing-col-staff { width: 18%; }
.table-closing-report col.closing-col-time { width: 21%; }
.table-closing-report col.closing-col-total { width: 18%; }
.table-closing-report col.closing-col-actions { width: 126px; }
.closing-report-table-wrap .table-closing-report thead th { position: sticky; top: 0; z-index: 2; height: 38px; color: #596173; background: #f4f6f8; box-shadow: inset 0 -1px 0 #e3e6eb; }
.closing-report-table-wrap .table-closing-report tbody tr { transition: background-color 150ms ease; }
.closing-report-table-wrap .table-closing-report tbody tr:nth-child(even) { background: #fcfcfd; }
.closing-report-table-wrap .table-closing-report tbody tr:hover { background: #fff7fa; }
.closing-report-table-wrap .table-closing-report td { height: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closing-report-index { color: #9298a6; font-variant-numeric: tabular-nums; }
.closing-report-staff { display: flex; min-width: 0; align-items: center; gap: 9px; }
.closing-report-avatar { display: inline-grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #c91860; background: linear-gradient(145deg, #fff0f6, #f4efff); font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.closing-report-staff-name { overflow: hidden; color: #303748; font-weight: 700; text-overflow: ellipsis; }
.closing-report-time { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.closing-report-time span { color: #4e5668; }
.closing-report-time strong { color: #8a91a0; font-size: 9px; font-weight: 700; }
.closing-report-amount { display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.closing-report-amount small { color: #89909e; font-size: 9px; font-weight: 650; }
.closing-report-amount strong { color: #20283a; font-size: 11px; font-weight: 800; }
.closing-report-action-cell { overflow: visible !important; }
.closing-report-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.closing-action-button { display: inline-grid; flex: 0 0 31px; width: 31px; height: 31px; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 9px; font-size: 10px; line-height: 1; cursor: pointer; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.closing-action-view { border-color: #f3cfdf; color: #cf1a62; background: #fff1f7; }
.closing-action-print { border-color: #ded5f8; color: #6f45c8; background: #f5f1ff; }
.closing-action-email { border-color: #cce8df; color: #16845b; background: #edf9f4; }
.closing-action-button:hover, .closing-action-button:focus-visible { color: #fff; outline: 0; box-shadow: 0 5px 12px rgba(35,42,57,.14); }
.closing-action-view:hover, .closing-action-view:focus-visible { border-color: #d91b67; background: #d91b67; }
.closing-action-print:hover, .closing-action-print:focus-visible { border-color: #7047c7; background: #7047c7; }
.closing-action-email:hover, .closing-action-email:focus-visible { border-color: #18845c; background: #18845c; }
.closing-action-button:disabled { cursor: wait; opacity: .55; box-shadow: none; }
.closing-report-surface .dataTables_wrapper { padding: 0; }
.closing-report-surface .dataTables_length, .closing-report-surface .dataTables_filter { margin: 0 0 8px; color: #667085; font-size: 10px; }
.closing-report-surface .dataTables_filter input, .closing-report-surface .dataTables_length select { border: 1px solid #e4e6eb; border-radius: 8px; }
.closing-report-surface .dataTables_info { display: none; }
.closing-report-surface .dataTables_paginate { display: flex; justify-content: flex-end; margin-top: 8px; color: #737a89; font-size: 10px; }
.closing-report-surface .dataTables_paginate .pagination { gap: 4px; margin: 0; }
.closing-report-surface .dataTables_paginate .page-link,
.closing-report-surface .dataTables_paginate .paginate_button { min-width: 30px; min-height: 30px; padding: 6px 9px !important; border: 1px solid #e5e7ec !important; border-radius: 8px !important; color: #656d7c !important; background: #fff !important; box-shadow: none !important; text-align: center; }
.closing-report-surface .dataTables_paginate .active .page-link,
.closing-report-surface .dataTables_paginate .paginate_button.current { border-color: #e61e6e !important; color: #fff !important; background: #e61e6e !important; }

.sellingReportTodayPreviewCashier { max-width: 620px; margin: 0 auto; padding: 24px; border: 1px solid #e8eaf0; border-radius: 16px; color: #303747; background: linear-gradient(180deg, #fff 0%, #fdfbfd 100%); box-shadow: 0 12px 32px rgba(37,31,47,.08); font-size: 11px; line-height: 1.8; }
.sellingReportTodayPreviewCashier h1 { color: var(--daily-report-ink); }
.closing-preview-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #eceef2; }
.closing-preview-heading > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #e61e6e; background: #fff0f6; }
.closing-preview-heading h1 { margin: 0; font-size: 15px; font-weight: 750; text-align: left; }
.closing-preview-heading p { margin: 2px 0 0; color: #747b89; font-size: 10px; text-transform: capitalize; }
.closing-preview-time { display: flex; justify-content: space-between; gap: 20px; padding: 12px; border-radius: 11px; background: #f6f7f9; }
.closing-preview-time > div > div:first-child { color: #7b8190; font-size: 9px; font-weight: 650; text-transform: uppercase; }
.closing-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 0; }
.closing-preview-divider { margin: 12px 0; border-top: 1px dashed #d9dce4; }
.btnClosePreviewCashier { display: block; width: max-content; margin-right: auto; margin-left: auto; border-radius: 10px; }

.kasair-today-report-modal .modal-dialog { width: calc(100% - 40px) !important; max-width: 1640px !important; height: calc(100% - 32px) !important; margin: 16px auto !important; }
.kasair-today-report-modal .modal-content { overflow: hidden; border: 1px solid rgba(32,38,56,.08); border-radius: 20px; box-shadow: 0 26px 80px rgba(24,18,34,.22); }
.kasair-today-report-modal .modal-header { align-items: center; min-height: 54px; padding: 8px 14px 8px 18px; border-bottom: 1px solid #eceef2; background: rgba(255,255,255,.95); }
.kasair-today-report-modal .modal-title { color: var(--daily-report-ink); font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.today-report-modal-title { display: flex; align-items: center; gap: 11px; }
.today-report-modal-title small { display: block; margin-top: 2px; color: #858b98; font-size: 9px; font-weight: 500; }
.today-report-modal-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #e61e6e, #b91657); box-shadow: 0 5px 12px rgba(230,30,110,.2); font-size: 11px; }
.kasair-today-report-modal .close { display: grid; width: 32px; height: 32px; margin: 0; padding: 0; place-items: center; border-radius: 9px; color: #596173; background: #f3f4f7; font-size: 20px; opacity: 1; }
.kasair-today-report-modal .close:hover { color: var(--daily-report-primary); background: var(--daily-report-primary-soft); }
.kasair-today-report-frame { background: #f8f8fb !important; }

#modalTodayReport:not(.kasair-today-report-modal) .modal-dialog { width: calc(100% - 32px); max-width: 1500px !important; height: calc(100% - 32px); margin: 16px auto; }
#modalTodayReport:not(.kasair-today-report-modal) .modal-content { overflow: hidden; border: 0; border-radius: 20px; }
#modalTodayReport:not(.kasair-today-report-modal) .modal-body { overflow-y: auto; background: #f8f8fb; }

@media (max-width: 1199.98px) {
  .report-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-breakdown-tabs { grid-template-columns: repeat(5, minmax(135px, 1fr)); }
}

@media (max-width: 767.98px) {
  .today-report-experience { padding: 10px 10px 16px; }
  .today-report-intro { align-items: stretch; flex-direction: column; gap: 8px; }
  .report-view-tabs { grid-template-columns: 1fr 1fr; min-width: 0; width: 100%; }
  .report-view-tabs .btn-type-report { min-height: 44px; padding: 6px 9px; }
  .report-view-tabs small { display: none; }
  .report-surface { border-radius: 17px; }
  .report-period-row, .closing-report-header { align-items: flex-start; flex-direction: column; gap: 7px; padding: 10px 12px; }
  .report-period-control { width: 100%; min-width: 0; }
  .report-dashboard-content { padding: 10px 12px 12px; }
  .report-breakdown-header { align-items: flex-start; }
  .report-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metric-card:first-child { grid-column: 1 / -1; }
  .report-visual-header { align-items: flex-start; }
  .report-visual-header p { max-width: 250px; }
  .report-visual-body { min-height: 220px; max-height: none; padding: 4px; }
  .closing-report-content { padding: 0 12px 12px; }
  .closing-report-table-wrap { max-height: calc(100vh - 300px); }
  .kasair-today-report-modal .modal-dialog { width: 100% !important; height: 100% !important; margin: 0 !important; }
  .kasair-today-report-modal .modal-content { border: 0; border-radius: 0; }
}

@media (max-width: 479.98px) {
  .today-report-intro-copy h1 { font-size: 19px; }
  .today-report-intro-copy p { font-size: 11px; }
  .report-view-tab-icon { display: none; }
  .report-view-tabs .btn-type-report { justify-content: center; text-align: center; }
  .report-breakdown-header .report-live-badge { display: none; }
  .report-breakdown-tabs { grid-template-columns: repeat(5, minmax(118px, 1fr)); }
  .report-metric-grid { gap: 8px; }
  .report-metric-card { padding: 8px 9px; }
  .report-metric-icon { display: none; }
  .report-visual-header { flex-direction: column; gap: 9px; }
  .report-period-label { align-self: flex-start; }
}