/* Maya Settlement Operations — responsive design system */
:root {
  --ink: #17151a;
  --ink-2: #26232b;
  --muted: #746f7b;
  --muted-2: #9b96a1;
  --line: #e9e6ec;
  --line-soft: #f1eff3;
  --surface: #ffffff;
  --canvas: #f8f7fa;
  --purple: #6f3ff5;
  --purple-dark: #5525d9;
  --purple-soft: #eee9ff;
  --green: #159a64;
  --green-soft: #e7f8f0;
  --orange: #df7b24;
  --orange-soft: #fff0e2;
  --red: #ce4449;
  --red-soft: #ffeaeb;
  --shadow-sm: 0 1px 2px rgb(23 21 26 / 4%), 0 6px 18px rgb(23 21 26 / 3%);
  --shadow-lg: 0 24px 70px rgb(23 21 26 / 18%);
  --sidebar: 248px;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-size: 14px; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(111 63 245 / 20%); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.app-shell { display: none; min-height: 100vh; }
.app-shell.ready { display: block; }

/* Authentication */
.login-screen { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(480px, 1.15fr) minmax(420px, .85fr); background: var(--surface); }
.login-screen.hidden { display: none; }
.login-art { position: relative; overflow: hidden; padding: 44px 56px; color: #fff; background: radial-gradient(circle at 100% 100%, #332160 0, transparent 43%), #121014; }
.login-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; font: 700 16px Manrope, sans-serif; }
.login-brand-logo { display: block; width: min(360px,65%); height: auto; filter: drop-shadow(0 10px 20px rgb(0 0 0 / 25%)); }
.login-brand b { color: #fff; font: 750 18px Manrope,sans-serif; white-space: nowrap; }
.brand-mark { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #9b7aff, #6030e4); box-shadow: 0 10px 28px rgb(111 63 245 / 35%); font: 800 19px Manrope, sans-serif; }
.login-copy { position: absolute; z-index: 2; top: 50%; left: 9%; transform: translateY(-50%); }
.login-copy p { color: #9f93bb; font-size: 10px; font-weight: 700; letter-spacing: 2.2px; }
.login-copy h2 { margin: 17px 0; font: 700 clamp(36px, 4.3vw, 62px)/1.08 Manrope, sans-serif; letter-spacing: -2.8px; }
.login-copy h2 span { color: #a98dff; }
.login-copy small { color: #aaa4ad; font-size: 13px; }
.login-glow { position: absolute; right: -180px; bottom: -250px; width: 580px; height: 580px; border-radius: 50%; background: #7341ff; filter: blur(80px); opacity: .38; }
.login-side { display: grid; place-items: center; padding: 48px; }
.login-card { width: min(370px, 100%); }
.login-card h1 { font: 750 30px Manrope, sans-serif; letter-spacing: -1px; }
.login-card > p { margin: 8px 0 32px; color: var(--muted); }
.login-card label { display: block; margin: 16px 0; color: #5e5963; font-size: 11px; font-weight: 700; }
.login-card input { display: block; width: 100%; min-height: 48px; margin-top: 7px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; outline: none; transition: border .2s, box-shadow .2s; }
.login-card input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgb(111 63 245 / 8%); }
.password-input-wrap { position: relative; display: block; margin-top: 7px; }
.password-input-wrap input { margin-top: 0; padding-right: 46px; }
.password-input-wrap button { position: absolute; top: 50%; right: 7px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; color: #46708f; background: transparent; font-size: 14px; transform: translateY(-50%); }
.password-input-wrap button:hover { color: #007fff; background: #eaf5ff; }
.login-button { width: 100%; min-height: 48px; margin-top: 8px; }
.login-button:disabled { cursor: wait; opacity: .7; }
.login-card > small { display: block; margin-top: 23px; color: var(--muted-2); text-align: center; }
.login-error { min-height: 18px; color: var(--red); font-size: 11px; }

/* Navigation */
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; width: var(--sidebar); flex-direction: column; padding: 30px 20px 25px; color: #fff; background: #131116; }
.brand { display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 0 9px 28px; color: #fff; text-decoration: none; }
.sidebar-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 7px 14px rgb(0 0 0 / 32%)); }
.brand-product-name { text-align: center; font: 750 12px Manrope,sans-serif; letter-spacing: .2px; }
.brand b { display: block; font: 800 19px Manrope, sans-serif; letter-spacing: -.6px; }
.brand small, .sidebar-foot small, .user small { display: block; margin-top: 2px; color: #8d8791; font-size: 10px; }
.sidebar nav { display: grid; gap: 5px; }
.nav { display: flex; min-height: 44px; align-items: center; gap: 12px; padding: 0 13px; border: 0; border-radius: 11px; color: #96909a; background: transparent; font-size: 13px; font-weight: 600; text-align: left; transition: color .15s, background .15s; }
.nav > span { width: 21px; font-size: 17px; text-align: center; }
.nav i { margin-left: auto; padding: 2px 7px; border-radius: 10px; color: #bdb7c1; background: #302c33; font-size: 10px; font-style: normal; }
.nav:hover { color: #fff; background: #201d23; }
.nav.active { color: #fff; background: #28242c; box-shadow: inset 3px 0 var(--purple); }
.nav.active i { color: #fff; background: var(--purple); }
.admin-only { display: none !important; }
.admin-only.visible { display: flex !important; }
.sidebar-foot { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding: 21px 7px 0; border-top: 1px solid #2c2830; font-size: 10px; }
.sidebar-foot b { display: block; font-size: 10px; }
.system-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 3px; border-radius: 50%; background: #2bd88a; box-shadow: 0 0 0 4px rgb(43 216 138 / 10%); }

/* Main shell */
main { min-height: 100vh; margin-left: var(--sidebar); padding: 0 clamp(24px, 3vw, 48px) 56px; }
header { display: flex; height: 90px; align-items: center; justify-content: space-between; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
h1 { font: 700 18px Manrope, sans-serif; }
.eyebrow { margin-bottom: 5px; color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.install-app-btn { min-height: 38px; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid #8fc7fa; border-radius: 10px; color: #0066cc; background: #eaf5ff; font-size: 10px; font-weight: 750; }
.install-app-btn.available { display: inline-flex; }
.install-app-btn span { font-size: 14px; }
.profile-trigger { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 4px 8px 4px 4px; border: 0; border-radius: 12px; color: inherit; background: transparent; text-align: left; transition: background .15s; }
.profile-trigger:hover { background: #efedf1; }
.profile-trigger .avatar { margin-left: 0; }
.profile-chevron { color: var(--muted-2); font-size: 12px; }
.icon-btn, .logout-btn { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--surface); }
.icon-btn { position: relative; color: #b0abb3; font-size: 9px; }
.icon-btn span { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--purple); }
.avatar { display: grid; width: 38px; height: 38px; place-items: center; margin-left: 5px; border-radius: 11px; color: var(--purple); background: var(--purple-soft); font-size: 11px; font-weight: 800; }
.user b { font-size: 11px; }
.logout-btn { margin-left: 3px; font-size: 16px; }
.view { display: none; }
.view.active { display: block; animation: appear .22s ease; }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-head h2 { font: 750 25px Manrope, sans-serif; letter-spacing: -.75px; }
.section-head p, .panel-head p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.date-chip { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; color: #615c65; background: var(--surface); font-size: 10px; }
.date-chip span { color: var(--green); }

/* Cards and metrics */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.metric { position: relative; min-width: 0; min-height: 150px; overflow: hidden; padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.metric.featured { color: #fff; border-color: #19171b; background: linear-gradient(140deg, #181619, #242027); }
.metric > span, .metric-top span { display: block; color: var(--muted); font-size: 10px; font-weight: 600; }
.metric.featured .metric-top span { color: #aaa4ad; }
.metric strong { display: block; margin: 17px 0 4px; overflow: hidden; font: 750 clamp(21px, 2vw, 27px) Manrope, sans-serif; letter-spacing: -1px; text-overflow: ellipsis; }
.metric small { color: var(--muted-2); font-size: 9px; }
.metric-top { display: flex; justify-content: space-between; gap: 8px; }
.metric-top b { white-space: nowrap; font-size: 9px; }
.up { color: var(--green) !important; }
.danger { color: var(--red) !important; }
.metric-icon { display: grid; width: 31px; height: 31px; place-items: center; margin-bottom: 15px; border-radius: 9px; font-weight: 800; }
.metric-icon.purple { color: var(--purple); background: var(--purple-soft); }
.metric-icon.green { color: var(--green); background: var(--green-soft); }
.metric-icon.orange { color: var(--orange); background: var(--orange-soft); }
.metric-icon.blue { color: #2877c7; background: #e7f2ff; }
.metric-icon.teal { color: #087e7a; background: #e2f7f5; }
.total-settled-card { border-color: #dcd4f7; background: linear-gradient(145deg, #fff, #f7f3ff); }
.provider-monthly-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.monthly-strip { display: flex; min-width: 0; align-items: stretch; gap: 18px; margin-bottom: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.gcash-monthly { border-color: #b9ddff; background: linear-gradient(145deg,#fff,#f1f8ff); }
.provider-monthly-grid .monthly-strip { display: block; }
.provider-monthly-grid .monthly-label { min-width: 0; margin-bottom: 11px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
.provider-monthly-grid .monthly-dropdown-wrap select { min-width: 0; flex: 1; }
.monthly-label { display: flex; min-width: 155px; flex-direction: column; justify-content: center; padding-right: 17px; border-right: 1px solid var(--line); }
.monthly-label span { font: 700 13px Manrope, sans-serif; }
.monthly-label small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.monthly-links { display: flex; min-width: 0; flex: 1; gap: 9px; overflow-x: auto; scrollbar-width: thin; }
.month-link { position: relative; display: grid; min-width: 190px; flex: 1; gap: 3px; padding: 10px 32px 10px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--canvas); text-align: left; transition: border .15s, transform .15s, background .15s; }
.month-link:hover { border-color: #bfb0ef; background: var(--purple-soft); transform: translateY(-1px); }
.month-link span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.month-link strong { font: 750 16px Manrope, sans-serif; }
.month-link small { color: var(--muted-2); font-size: 9px; }
.month-link i { position: absolute; top: 50%; right: 11px; color: var(--purple); font-style: normal; transform: translateY(-50%); }
.monthly-empty { align-self: center; color: var(--muted); font-size: 11px; }
.monthly-dropdown-wrap { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; }
.monthly-dropdown-wrap select { width: min(430px, 100%); min-height: 46px; padding: 0 42px 0 14px; border: 1px solid #d9d3e1; border-radius: 11px; color: var(--ink); background: #faf9fc; font-size: 12px; font-weight: 600; }
.monthly-dropdown-wrap select:hover, .monthly-dropdown-wrap select:focus { border-color: #ad99ea; }
.monthly-selected { min-width: 150px; margin-left: auto; text-align: right; }
.monthly-selected span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.monthly-selected strong { display: block; margin-top: 3px; font: 750 16px Manrope, sans-serif; }
.spark { position: absolute; right: 12px; bottom: 13px; width: 105px; height: 43px; opacity: .8; }
.spark svg { width: 100%; height: 100%; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 14px; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 14px; margin-top: 14px; }
.panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.empty-workspace { display: grid; min-height: 320px; place-items: center; text-align: center; }
.empty-workspace span { display: grid; width: 58px; height: 58px; margin: 0 auto 14px; place-items: center; border-radius: 18px; color: #007fff; background: #e6f2ff; font: 800 24px Manrope,sans-serif; }
.empty-workspace h3 { font: 750 18px Manrope,sans-serif; }
.empty-workspace p { margin-top: 7px; color: var(--muted); }
.source-pill { display: flex; min-height: 36px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #cdddea; border-radius: 999px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 700; }
.source-pill i { width: 7px; height: 7px; border-radius: 50%; background: #e1a536; box-shadow: 0 0 0 4px #fff4d9; }
.source-pill.connected i { background: #18a86b; box-shadow: 0 0 0 4px #e0f5ea; }
.daily-payment-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.daily-payment-metrics article { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.daily-payment-metrics article > span { display: block; color: var(--muted); font-size: 11px; }
.daily-payment-metrics article > strong { display: block; margin: 13px 0 4px; font: 750 22px Manrope,sans-serif; }
.daily-payment-metrics article > small { color: var(--muted-2); font-size: 9px; }
.daily-payment-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(260px,1fr); gap: 14px; margin-bottom: 14px; }
.payment-monthly-panel { margin-bottom: 14px; }
.payment-monthly-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 10px; }
.payment-monthly-cards article { padding: 14px 15px; border: 1px solid #cbe3f8; border-radius: 12px; background: linear-gradient(145deg,#fff,#eff8ff); }
.payment-monthly-cards span,.payment-monthly-cards small { display: block; }
.payment-monthly-cards span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.payment-monthly-cards strong { display: block; margin: 7px 0 4px; font: 750 19px Manrope,sans-serif; }
.payment-monthly-cards small { color: var(--muted-2); font-size: 10px; }
.daily-payment-grid .empty-workspace { min-height: 240px; }
.empty-table-message { display: grid; min-height: 120px; place-items: center; color: var(--muted); font-size: 11px; }
.export-button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.daily-report-hero { background: radial-gradient(circle at 90% 20%,#1d527d,transparent 32%),linear-gradient(120deg,#071f35,#123e61); }
.payment-summary-list > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.payment-summary-list > div:last-child { border-bottom: 0; }
.payment-summary-list span,.payment-summary-list small { display: block; }
.payment-summary-list span { color: var(--ink); font-size: 11px; font-weight: 700; }
.payment-summary-list small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }
.payment-summary-list strong { font: 700 12px Manrope,sans-serif; white-space: nowrap; }
.daily-payment-table table { min-width: 1450px; }
.daily-payment-table details { min-width: 105px; }
.daily-payment-table summary { color: #0071e6; cursor: pointer; font-weight: 700; }
.daily-payment-table details small { display: block; width: 270px; padding-top: 8px; line-height: 1.5; white-space: normal; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.panel-head h3 { font: 700 14px Manrope, sans-serif; }
.panel-head select, .toolbar select { min-height: 36px; padding: 0 32px 0 11px; border: 1px solid var(--line); border-radius: 9px; color: #5e5961; background: #fff; font-size: 10px; }
.chart-wrap { display: flex; height: 245px; gap: 10px; }
.chart-axis { display: flex; height: 210px; flex-direction: column; justify-content: space-between; padding-top: 4px; color: #aaa5ad; font-size: 9px; }
.chart-wrap svg { width: 100%; height: 220px; overflow: visible; }
.legend { display: flex; justify-content: center; gap: 24px; color: var(--muted); font-size: 9px; }
.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.gross-dot { background: var(--purple); }
.net-dot { background: #c8b8ff; }
.donut-wrap { display: grid; place-items: center; margin: 5px 0 18px; }
.donut { position: relative; display: grid; width: 135px; height: 135px; place-items: center; border-radius: 50%; background: conic-gradient(var(--purple) 0 75%, #ece9ed 75%); }
.donut::before { position: absolute; inset: 15px; border-radius: 50%; background: #fff; content: ""; }
.donut div { position: relative; z-index: 1; display: grid; width: calc(100% - 34px); place-items: center; text-align: center; }
.donut strong { display: block; max-width: 100%; font: 750 21px Manrope, sans-serif; line-height: 1.05; white-space: nowrap; }
.donut small { color: var(--muted-2); font-size: 9px; }
.status-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.status-row { color: var(--muted); font-size: 9px; }
.status-row b { display: block; margin-top: 3px; color: var(--ink); font-size: 12px; }
.status-row i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }

/* Tables and activity */
.table-wrap { width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d8d4dc transparent; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: .6px; text-align: left; text-transform: uppercase; }
td { padding: 13px 12px; border-bottom: 1px solid var(--line-soft); font-size: 10px; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: #faf9fc; }
tbody tr:last-child td { border-bottom: 0; }
td b { font-size: 10px; }
td small { display: block; margin-top: 3px; color: var(--muted-2); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 14px; font-size: 9px; font-weight: 700; }
.badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.badge.Settled, .badge.Resolved { color: var(--green); background: var(--green-soft); }
.badge.Pending { color: #9b7220; background: #fff5dc; }
.badge.Review, .badge.Investigating { color: var(--orange); background: var(--orange-soft); }
.badge.Failed, .badge.Open { color: var(--red); background: var(--red-soft); }
.link-btn { padding: 4px; border: 0; color: var(--purple); background: none; font-size: 10px; font-weight: 700; }
.activity-item { display: flex; gap: 11px; margin-bottom: 15px; padding: 0 0 15px; border-bottom: 1px solid var(--line-soft); }
.activity-item:last-child { margin: 0; padding: 0; border: 0; }
.activity-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; color: var(--purple); background: var(--purple-soft); font-size: 10px; }
.activity-item b { font-size: 10px; }
.activity-item p { margin: 3px 0; color: var(--muted); font-size: 9px; }
.activity-item small { color: var(--muted-2); font-size: 9px; }

/* Controls, reports, issues */
.primary, .secondary { min-height: 39px; padding: 0 15px; border: 0; border-radius: 10px; font-size: 10px; font-weight: 700; }
.primary { color: #fff; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); box-shadow: 0 7px 18px rgb(111 63 245 / 20%); }
.primary:hover { filter: brightness(1.05); }
.secondary { color: #57525a; background: #f0eef2; }
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.month-context { min-height: 38px; padding: 0 12px; border: 1px solid #d8cef5; border-radius: 10px; color: var(--purple-dark); background: var(--purple-soft); font-size: 11px; font-weight: 700; }
.month-context[hidden] { display: none; }
.search { display: flex; width: min(390px, 100%); min-height: 40px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted-2); background: #fff; }
.search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.table-panel { padding: 8px 8px 12px; }
.table-panel .panel-head { padding: 12px 12px 0; }
.issue-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.issue-summary article { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.issue-summary span { color: var(--muted); font-size: 10px; }
.issue-summary strong { float: right; font: 750 20px Manrope, sans-serif; }
.issue-list { display: grid; gap: 10px; }
.issue-card { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: start; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.severity-bar { width: 4px; min-height: 76px; border-radius: 3px; background: var(--orange); }
.severity-bar.Critical { background: var(--red); }
.issue-card h3 { font: 700 12px Manrope, sans-serif; }
.issue-card p { margin: 7px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.issue-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted-2); font-size: 9px; }
.issue-actions { display: grid; justify-items: end; gap: 18px; text-align: right; }
.resolve-btn { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 9px; }
.report-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; margin-bottom: 14px; padding: 30px 34px; border-radius: 18px; color: #fff; background: radial-gradient(circle at 90% 20%, #432b70, transparent 30%), linear-gradient(120deg, #181619, #28202f); }
.report-hero p { color: #aaa0b8; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
.report-hero h3 { max-width: 620px; margin: 8px 0; font: 700 24px Manrope, sans-serif; }
.report-hero h3 span { color: #aa8fff; }
.report-hero small { color: #9e97a5; }
.report-orb { display: grid; width: 78px; height: 78px; flex: 0 0 78px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #946eff, #592bcf); box-shadow: 0 0 55px rgb(136 93 255 / 45%); font-size: 28px; }
.export-actions { display: flex; align-items: center; gap: 8px; }
.export-button { min-width: 112px; }
.report-month-label { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 700; }
.report-month-label select { min-width: 175px; font-size: 12px; }

/* Users */
.user-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.user-stats article { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.user-stats .metric-icon { float: left; margin: 0 13px 0 0; }
.user-stats span { display: block; color: var(--muted); font-size: 9px; }
.user-stats strong { font: 750 20px Manrope, sans-serif; }
.user-name { display: flex; align-items: center; gap: 10px; }
.mini-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 9px; color: var(--purple); background: var(--purple-soft); font-size: 9px; font-weight: 800; }
.role-pill { padding: 5px 8px; border-radius: 12px; color: var(--purple); background: var(--purple-soft); font-size: 9px; font-weight: 700; }
.status-switch { padding: 5px 9px; border: 0; border-radius: 12px; font-size: 9px; font-weight: 700; }
.status-switch.on { color: var(--green); background: var(--green-soft); }
.status-switch.off { color: #77717b; background: #eeecef; }
.status-switch:disabled { cursor: not-allowed; opacity: .65; }
.edit-user-btn { min-height: 32px; margin-right: 8px; padding: 0 11px; }
.user-row-actions { display: flex; align-items: center; gap: 6px; }
.delete-user-btn { min-height: 32px; padding: 0 10px; border: 1px solid #f0b8b8; border-radius: 9px; color: #b52d2d; background: #fff1f1; font-size: 10px; font-weight: 700; }
.delete-user-btn:hover { border-color: #db4c4c; background: #ffe5e5; }
.delete-user-btn:disabled { cursor: not-allowed; opacity: .4; }
.settlement-link { padding: 0; border: 0; border-bottom: 1px solid transparent; color: var(--purple); background: transparent; font-weight: 800; text-align: left; }
.settlement-link:hover { border-bottom-color: currentColor; color: var(--purple-dark); }

/* Dialogs */
.modal { position: fixed; z-index: 50; inset: 0; display: none; overflow-y: auto; align-items: center; justify-content: center; padding: 24px; background: rgb(20 17 23 / 62%); backdrop-filter: blur(7px); }
.modal.open { display: flex; }
.modal-card { width: min(620px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.modal-head h3 { font: 700 18px Manrope, sans-serif; }
.modal-head p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.modal-head button { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 0; border-radius: 9px; color: #645f67; background: #f1eff2; font-size: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label { color: #625d65; font-size: 10px; font-weight: 700; }
.form-grid input, .form-grid select { display: block; width: 100%; min-height: 42px; margin-top: 6px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #fff; }
.form-grid input:focus, .form-grid select:focus { border-color: var(--purple); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 23px; }
.role-help { display: grid; gap: 5px; margin-top: 18px; padding: 12px; border-radius: 10px; color: var(--muted); background: #f7f5ff; font-size: 9px; }
.role-help > b { margin-bottom: 3px; color: var(--ink); }
.role-help strong { margin-right: 4px; color: #514c55; }
.profile-modal-card { width: min(650px, 100%); }
.settings-section { display: grid; gap: 18px; }
.settings-title { display: flex; align-items: flex-start; gap: 11px; }
.settings-title > span { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 8px; color: var(--purple); background: var(--purple-soft); font-size: 9px; font-weight: 800; }
.settings-title b { display: block; font: 700 12px Manrope, sans-serif; }
.settings-title small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.settings-divider { height: 1px; margin: 24px 0; background: var(--line); }
.profile-error { min-height: 17px; margin-top: 14px; color: var(--red); font-size: 10px; }
.show-password-toggle { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; margin-top: 12px; padding: 0 11px; border: 1px solid #c7d9e9; border-radius: 9px; color: #174d7f; background: #eef7ff; font-size: 10px; font-weight: 700; }
.show-password-toggle:hover { border-color: #007fff; background: #e3f2ff; }
.show-password-toggle span { font-size: 12px; }
.settlement-modal { padding: 22px; }
.settlement-detail-card { width: min(1380px, 100%); max-height: calc(100vh - 44px); }
.detail-kicker { margin-bottom: 5px !important; color: var(--purple) !important; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.detail-summary { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; margin-bottom: 25px; }
.detail-summary article { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.detail-summary span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.detail-summary strong { display: block; overflow: hidden; font: 750 16px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.detail-summary .badge { display: inline-flex; width: auto; font-family: "DM Sans", sans-serif; }
.detail-loading { grid-column: 1 / -1; padding: 20px; color: var(--muted); text-align: center; }
.detail-table-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 10px; }
.detail-table-head h3 { font: 700 15px Manrope, sans-serif; }
.detail-table-head p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.detail-table-wrap { max-height: min(48vh, 510px); border: 1px solid var(--line); border-radius: 12px; }
.detail-table-wrap table { min-width: 1390px; }
.detail-table-wrap thead { position: sticky; z-index: 2; top: 0; background: #f5f3f7; }
.detail-table-wrap th { padding-top: 12px; padding-bottom: 12px; }
.toast { position: fixed; z-index: 80; right: 24px; bottom: 24px; max-width: calc(100vw - 48px); padding: 12px 18px; border-radius: 10px; color: #fff; background: #19171b; box-shadow: var(--shadow-lg); font-size: 10px; opacity: 0; transform: translateY(80px); transition: .25s; }
.toast.show { opacity: 1; transform: none; }

/* Tablet: compact icon rail and single-column charts */
@media (max-width: 1100px) and (min-width: 701px) {
  :root { --sidebar: 82px; }
  .sidebar { align-items: center; padding: 25px 13px; }
  .brand { padding: 0 0 30px; }
  .sidebar-logo { width: 56px; height: 56px; padding: 3px; object-fit: cover; object-position: left; }
  .brand-product-name { display: none; }
  .brand > span:last-child, .sidebar-foot { display: none; }
  .sidebar nav { width: 100%; }
  .nav { justify-content: center; padding: 0; font-size: 0; }
  .nav > span { width: auto; font-size: 19px; }
  .nav i { position: absolute; margin: -22px 0 0 27px; padding: 1px 5px; font-size: 8px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .daily-payment-metrics { grid-template-columns: 1fr 1fr; }
  .daily-payment-grid { grid-template-columns: 1fr; }
  .provider-monthly-grid { grid-template-columns: 1fr; }
  .dashboard-grid, .lower-grid { grid-template-columns: 1fr; }
  .health-panel { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; }
  .health-panel .panel-head { margin: 0; }
  .status-list { grid-template-columns: 1fr; }
}

/* Phone: bottom tab bar and touch-first content */
@media (max-width: 700px) {
  :root { --sidebar: 0px; }
  body { padding-bottom: 74px; }
  .login-screen { position: fixed; display: block; overflow-y: auto; background: linear-gradient(180deg, #17131c 0 27%, #fff 27%); }
  .login-art { height: 27vh; min-height: 185px; padding: 25px 22px; background: transparent; }
  .login-brand { align-items: flex-start; gap: 8px; }
  .login-brand-logo { width: min(245px,65%); padding: 4px 6px; }
  .login-brand b { font-size: 13px; }
  .login-copy { top: 98px; left: 22px; transform: none; }
  .login-copy p, .login-copy small, .login-glow { display: none; }
  .login-copy h2 { margin: 0; font-size: 25px; line-height: 1.14; letter-spacing: -1px; }
  .login-side { display: block; padding: 28px 22px 45px; }
  .login-card { width: 100%; max-width: 420px; margin: auto; padding: 25px 22px; border-radius: 18px; background: #fff; box-shadow: 0 18px 55px rgb(23 21 26 / 12%); }
  .login-card h1 { font-size: 25px; }
  .sidebar { inset: auto 0 0; width: 100%; height: 70px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #302c33; }
  .brand, .sidebar-foot { display: none; }
  .sidebar nav { display: flex; width: 100%; justify-content: space-around; gap: 2px; }
  .nav { min-width: 0; min-height: 54px; flex: 1; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 2px; border-radius: 9px; font-size: 8px; text-align: center; }
  .nav > span { width: auto; font-size: 16px; }
  .nav.active { box-shadow: none; background: #29242d; }
  .nav i { position: absolute; margin: -29px 0 0 25px; padding: 1px 4px; font-size: 7px; }
  main { margin: 0; padding: 0 14px 28px; }
  header { position: sticky; z-index: 12; top: 0; height: 69px; margin: 0 -14px 23px; padding: 0 14px; background: rgb(248 247 250 / 92%); backdrop-filter: blur(12px); }
  header h1 { max-width: 160px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .eyebrow, .icon-btn, .profile-trigger .user, .profile-chevron, .logout-btn { display: none; }
  .install-app-btn.available { min-height: 36px; padding: 0 10px; }
  .profile-trigger { min-height: 42px; padding: 2px; }
  .avatar { margin: 0; }
  .section-head { align-items: flex-start; margin-bottom: 18px; }
  .section-head h2 { font-size: 21px; }
  .section-head p { max-width: 240px; line-height: 1.45; }
  .date-chip { display: none; }
  .section-head .primary { flex: 0 0 auto; padding: 0 12px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .daily-payment-metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
  .daily-payment-metrics article { padding: 14px; }
  .daily-payment-metrics article > strong { font-size: 18px; }
  .daily-payment-grid { grid-template-columns: 1fr; gap: 10px; }
  .metric { min-height: 132px; padding: 15px; }
  .metric.featured { grid-column: 1 / -1; min-height: 145px; }
  .provider-monthly-grid { grid-template-columns: 1fr; gap: 10px; }
  .monthly-strip { display: block; padding: 13px; }
  .monthly-label { min-width: 0; margin-bottom: 10px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .monthly-links { margin: 0 -2px; padding: 1px 2px 4px; }
  .month-link { min-width: 175px; }
  .monthly-dropdown-wrap { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .monthly-dropdown-wrap select { width: 100%; }
  .monthly-selected { display: flex; width: 100%; align-items: center; justify-content: space-between; margin: 0; text-align: left; }
  .metric strong { margin-top: 13px; font-size: 21px; }
  .metric-icon { margin-bottom: 11px; }
  .dashboard-grid, .lower-grid { grid-template-columns: 1fr; }
  .panel { padding: 16px; border-radius: 14px; }
  .chart-wrap { height: 210px; }
  .chart-wrap svg { height: 190px; }
  .chart-axis { height: 180px; }
  .trend-panel .panel-head select { display: none; }
  .health-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .health-panel .panel-head { grid-column: 1 / -1; }
  .donut { width: 120px; height: 120px; }
  .status-list { grid-template-columns: 1fr; }
  .lower-grid .panel:first-child { padding: 12px 6px; }
  .lower-grid .panel:first-child .panel-head { padding: 6px 10px 0; }
  .toolbar { align-items: stretch; }
  .search { min-width: 0; flex: 1; }
  .toolbar select { width: 115px; padding-right: 8px; }
  .table-panel { padding: 5px; }
  th, td { padding: 12px 9px; }
  #settlements table { min-width: 900px; }
  #reports table { min-width: 780px; }
  #users table { min-width: 620px; }
  .table-wrap::after { display: block; padding: 6px 9px 3px; color: var(--muted-2); content: "Swipe horizontally to view more →"; font-size: 8px; }
  .lower-grid .table-wrap::after { display: none; }
  .issue-summary, .user-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .issue-summary article, .user-stats article { padding: 13px 10px; text-align: center; }
  .issue-summary strong { float: none; display: block; margin-top: 5px; }
  .user-stats .metric-icon { float: none; margin: 0 auto 8px; }
  .issue-card { grid-template-columns: 5px 1fr; padding: 15px; }
  .issue-actions { grid-column: 2; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 10px; }
  .report-hero { padding: 24px 20px; }
  .report-hero h3 { font-size: 19px; }
  .report-orb { display: none; }
  #reports .section-head { display: block; }
  .export-actions { margin-top: 14px; }
  .export-button { min-width: 0; flex: 1; }
  #reports .panel-head { display: block; }
  .report-month-label { display: grid; gap: 5px; margin-top: 14px; }
  .report-month-label select { width: 100%; min-height: 43px; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-card { width: 100%; max-height: 91vh; padding: 21px 18px calc(21px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .settlement-modal { align-items: flex-end; padding: 0; }
  .settlement-detail-card { height: 92vh; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .detail-summary { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
  .detail-summary article { padding: 12px; }
  .detail-summary strong { font-size: 15px; }
  .detail-table-wrap { max-height: calc(92vh - 390px); }
  .form-grid { grid-template-columns: 1fr; gap: 13px; }
  .form-grid input, .form-grid select { min-height: 45px; }
  .form-actions { position: sticky; bottom: -21px; margin: 22px -18px -21px; padding: 13px 18px calc(13px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
  .form-actions button { flex: 1; }
  .toast { right: 14px; bottom: 85px; max-width: calc(100vw - 28px); }
}

@media (max-width: 420px) {
  .metric:not(.featured) { min-height: 125px; }
  .metric:not(.featured) strong { font-size: 19px; }
  .metric:not(.featured) > span { max-width: 95px; }
  .health-panel { display: block; }
  .status-list { grid-template-columns: 1fr 1fr; }
  .toolbar { flex-direction: column; }
  .month-context { width: 100%; }
  .toolbar select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Readability pass: larger type and stronger contrast */
:root {
  --muted: #5f5965;
  --muted-2: #7b7580;
}
body { font-size: 15px; }
.nav { font-size: 14px; }
.brand small, .sidebar-foot small, .user small { font-size: 11px; }
.sidebar-foot, .sidebar-foot b { font-size: 11px; }
h1 { font-size: 19px; }
.eyebrow { font-size: 10px; }
.user b { font-size: 12px; }
.section-head h2 { font-size: 27px; }
.section-head p, .panel-head p { font-size: 13px; line-height: 1.45; }
.date-chip, .metric > span, .metric-top span { font-size: 12px; }
.metric small, .metric-top b { font-size: 10px; }
.metric strong { font-size: clamp(23px, 2vw, 29px); }
.panel-head h3 { font-size: 16px; }
.panel-head select, .toolbar select, .search input { font-size: 12px; }
.chart-axis, .legend, .donut small, .status-row { font-size: 10px; }
.status-row b { font-size: 14px; }
th { font-size: 10px; }
td, td b { font-size: 12px; }
td small { font-size: 10px; }
.badge, .link-btn, .resolve-btn, .role-pill, .status-switch { font-size: 10px; }
.activity-item b { font-size: 12px; }
.activity-item p, .activity-item small { font-size: 10px; line-height: 1.45; }
.primary, .secondary { font-size: 12px; }
.issue-summary span, .user-stats span { font-size: 11px; }
.issue-card h3 { font-size: 14px; }
.issue-card p { font-size: 12px; }
.issue-meta { font-size: 10px; }
.report-hero p { font-size: 10px; }
.report-hero h3 { font-size: 26px; }
.report-hero small { font-size: 11px; }
.form-grid label, .login-card label { font-size: 12px; }
.form-grid input, .form-grid select, .login-card input { font-size: 13px; }
.modal-head h3 { font-size: 20px; }
.modal-head p { font-size: 12px; }
.role-help, .settings-title small, .profile-error, .login-error, .toast { font-size: 11px; }
.settings-title b { font-size: 14px; }
.detail-summary span { font-size: 11px; }
.detail-table-head h3 { font-size: 16px; }
.detail-table-head p { font-size: 11px; }
.login-card > p { font-size: 14px; }
.login-card > small { font-size: 11px; }

@media (max-width: 700px) {
  .nav { font-size: 9px; }
  header h1 { font-size: 15px; }
  .section-head h2 { font-size: 23px; }
  .section-head p { font-size: 12px; }
  .metric > span, .metric-top span { font-size: 11px; }
  .metric strong { font-size: 23px; }
  .panel-head h3 { font-size: 15px; }
  .report-hero h3 { font-size: 21px; }
  th { font-size: 10px; }
  td, td b { font-size: 12px; }
}

/* Compact dashboard and refreshed multi-color palette */
:root {
  --purple: #0a9187;
  --purple-dark: #08736d;
  --purple-soft: #e3f6f3;
  --canvas: #f5f7f8;
  --line: #e2e7e9;
  --line-soft: #edf1f2;
}
.sidebar { background: #12212a; }
.brand-mark { background: linear-gradient(135deg, #23b7aa, #07877f); box-shadow: 0 10px 28px rgb(10 145 135 / 26%); }
.nav:hover { background: #1a303b; }
.nav.active { background: #203943; box-shadow: inset 3px 0 #30c2b4; }
.nav.active i { background: #0a9187; }
.sidebar-foot { border-color: #29404a; }
main { padding-right: clamp(20px, 2.4vw, 38px); padding-bottom: 38px; padding-left: clamp(20px, 2.4vw, 38px); }
header { height: 76px; margin-bottom: 21px; }
.section-head { margin-bottom: 16px; }
.section-head h2 { font-size: 24px; }
.metrics { grid-template-columns: 1.22fr repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.metric { min-height: 122px; padding: 15px; border-radius: 14px; }
.metric.featured { background: linear-gradient(145deg, #172831, #203943); border-color: #172831; }
.metric strong { margin: 11px 0 3px; font-size: clamp(19px, 1.6vw, 25px); }
.metric-icon { width: 28px; height: 28px; margin-bottom: 10px; }
.metric:nth-child(2) { border-color: #cde9e4; background: #f4fcfa; }
.metric:nth-child(3) { border-color: #ccdef3; background: #f3f8fe; }
.metric:nth-child(4) { border-color: #e2d9f4; background: #f9f6ff; }
.metric:nth-child(5) { border-color: #cce8d8; background: #f2faf5; }
.metric:nth-child(6) { border-color: #f1d9ce; background: #fff8f4; }
.metric-icon.purple { color: #0a9187; background: #dff4ef; }
.metric-icon.blue { color: #2979bd; background: #e1effc; }
.metric-icon.teal { color: #7250b5; background: #eee7fa; }
.metric-icon.green { color: #23895a; background: #dff3e8; }
.metric-icon.orange { color: #d06937; background: #fbe8de; }
.monthly-strip { gap: 14px; margin-bottom: 10px; padding: 10px 13px; border-radius: 14px; }
.monthly-label { min-width: 145px; }
.monthly-dropdown-wrap select { min-height: 40px; }
.monthly-selected strong { font-size: 15px; }
.dashboard-grid, .lower-grid { gap: 10px; }
.lower-grid { margin-top: 10px; }
.panel { padding: 16px; border-radius: 14px; }
.panel-head { margin-bottom: 14px; }
.chart-wrap { height: 205px; }
.chart-axis { height: 175px; }
.chart-wrap svg { height: 185px; }
.donut-wrap { margin: 0 0 12px; }
.donut { width: 112px; height: 112px; }
.donut::before { inset: 13px; }
.activity-item { margin-bottom: 11px; padding-bottom: 11px; }
.report-hero { padding: 24px 28px; }
.primary { background: linear-gradient(135deg, #0aa096, #08736d); box-shadow: 0 7px 18px rgb(10 145 135 / 18%); }
.settlement-link, .link-btn { color: #087f78; }
.month-link i, .detail-kicker { color: #087f78 !important; }
.donut { background: conic-gradient(#0a9187 0 75%, #e5eaeb 75%); }
.report-hero h3 span { color: #65d8cc; }
.report-orb { background: linear-gradient(135deg, #23b9ad, #08736d); box-shadow: 0 0 55px rgb(10 145 135 / 35%); }

@media (max-width: 1400px) and (min-width: 1101px) {
  .metrics { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) and (min-width: 701px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  main { padding-right: 12px; padding-left: 12px; }
  header { height: 64px; margin-right: -12px; margin-bottom: 17px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
  .section-head { margin-bottom: 14px; }
  .metrics { gap: 8px; }
  .metric { min-height: 115px; padding: 13px; }
  .metric.featured { min-height: 126px; }
  .metric strong { font-size: 21px; }
  .monthly-strip { padding: 11px; }
  .panel { padding: 14px; }
  .dashboard-grid, .lower-grid { gap: 8px; }
  .lower-grid { margin-top: 8px; }
}

/* DoubleSquare Networks blue motif */
:root {
  --purple: #3b82d0;
  --purple-dark: #2366ad;
  --purple-soft: #e7f2fc;
  --canvas: #f4f8fc;
  --line: #dfe8f0;
  --line-soft: #ebf1f6;
}
.sidebar { background: #102b46; }
.brand-mark { background: linear-gradient(135deg, #69b7f3, #347fc2); box-shadow: 0 10px 28px rgb(52 127 194 / 28%); }
.nav:hover { background: #173b5b; }
.nav.active { background: #1c466b; box-shadow: inset 3px 0 #74c4ff; }
.nav.active i { background: #4a9cde; }
.sidebar-foot { border-color: #254b69; }
.metric.featured { border-color: #173b5b; background: linear-gradient(145deg, #153653, #22587f); }
.metric:nth-child(2) { border-color: #c9e1f4; background: #f3f9fe; }
.metric:nth-child(3) { border-color: #c8dff4; background: #f2f8fe; }
.metric:nth-child(4) { border-color: #d7e3f1; background: #f7faff; }
.total-settled-card { border-color: #c5def2; background: linear-gradient(145deg, #fff, #edf7ff); }
.metric-icon.purple, .metric-icon.blue, .metric-icon.teal { color: #2877bb; background: #dfedf9; }
.primary { background: linear-gradient(135deg, #4d9dde, #2876bb); box-shadow: 0 7px 18px rgb(40 118 187 / 20%); }
.settlement-link, .link-btn { color: #2876bb; }
.month-link i, .detail-kicker { color: #2876bb !important; }
.month-link:hover { border-color: #8fc1e7; background: #ebf6ff; }
.monthly-dropdown-wrap select:hover, .monthly-dropdown-wrap select:focus { border-color: #79add7; }
.month-context { border-color: #bdd9ef; color: #2366ad; background: #e8f4fd; }
.donut { background: conic-gradient(#3b82d0 0 75%, #e3ebf1 75%); }
.report-hero { background: radial-gradient(circle at 90% 20%, #285f8e, transparent 32%), linear-gradient(120deg, #15324b, #1b4669); }
.report-hero h3 span { color: #83c9fb; }
.report-orb { background: linear-gradient(135deg, #70bcf2, #2d76b5); box-shadow: 0 0 55px rgb(75 159 222 / 35%); }
.login-art { background: radial-gradient(circle at 100% 100%, #214f79 0, transparent 46%), #10263c; }
.login-copy h2 span { color: #7cc6f7; }
.login-copy p { color: #8eb9da; }
.login-glow { background: #3d9cdf; opacity: .36; }
.role-pill { color: #2366ad; background: #e6f2fc; }
.mini-avatar, .avatar { color: #2876bb; background: #e3f1fc; }
.settings-title > span { color: #2876bb; background: #e6f2fc; }
.profile-trigger:hover { background: #e7f0f7; }
.login-card input:focus { border-color: #3b82d0; box-shadow: 0 0 0 4px rgb(59 130 208 / 10%); }

@media (max-width: 700px) {
  .login-screen { background: linear-gradient(180deg, #102b46 0 27%, #fff 27%); }
  .sidebar { background: #102b46; border-color: #254b69; }
  .nav.active { background: #1c466b; }
}

/* Dark-blue brand refinement */
:root {
  --purple: #174d7f;
  --purple-dark: #0c3459;
  --purple-soft: #e5eef6;
}
.sidebar { background: #081f35; }
.brand-mark { background: linear-gradient(135deg, #2c6598, #0d365c); box-shadow: 0 10px 28px rgb(5 27 48 / 38%); }
.nav:hover { background: #102f4a; }
.nav.active { background: #163b59; box-shadow: inset 3px 0 #4f8ec3; }
.nav.active i { background: #245e91; }
.sidebar-foot { border-color: #1b3b55; }
.metric.featured { border-color: #092843; background: linear-gradient(145deg, #092843, #16466c); }
.primary { background: linear-gradient(135deg, #215d91, #0c3459); box-shadow: 0 7px 18px rgb(12 52 89 / 24%); }
.settlement-link, .link-btn { color: #174d7f; }
.month-link i, .detail-kicker { color: #174d7f !important; }
.month-context { border-color: #b9cada; color: #0c3459; background: #e7eff6; }
.donut { background: conic-gradient(#174d7f 0 75%, #e3eaf0 75%); }
.report-hero { background: radial-gradient(circle at 90% 20%, #1d527d, transparent 32%), linear-gradient(120deg, #071f35, #123e61); }
.report-hero h3 span { color: #79b7e5; }
.report-orb { background: linear-gradient(135deg, #397caf, #0d365c); box-shadow: 0 0 55px rgb(22 73 112 / 40%); }
.login-art { background: radial-gradient(circle at 100% 100%, #164c77 0, transparent 46%), #071c30; }
.login-copy h2 span { color: #76b4e3; }
.login-glow { background: #1e6197; opacity: .38; }
.role-pill, .settings-title > span { color: #174d7f; background: #e4edf5; }
.mini-avatar, .avatar { color: #174d7f; background: #e2ebf3; }
.profile-trigger:hover { background: #e5ebf0; }
.login-card input:focus { border-color: #174d7f; box-shadow: 0 0 0 4px rgb(23 77 127 / 10%); }

@media (max-width: 700px) {
  .login-screen { background: linear-gradient(180deg, #081f35 0 27%, #fff 27%); }
  .sidebar { background: #081f35; border-color: #1b3b55; }
  .nav.active { background: #163b59; }
}

/* DSNI primary brand color: Azure #007FFF */
:root {
  --purple: #007fff;
  --purple-dark: #0066cc;
  --purple-soft: #e6f2ff;
}
.brand-mark { background: linear-gradient(135deg, #35a0ff, #007fff); box-shadow: 0 10px 28px rgb(0 127 255 / 28%); }
.nav.active { box-shadow: inset 3px 0 #007fff; }
.nav.active i { background: #007fff; }
.primary { background: linear-gradient(135deg, #168aff, #0066cc); box-shadow: 0 7px 18px rgb(0 127 255 / 23%); }
.settlement-link, .link-btn { color: #0071e6; }
.month-link i, .detail-kicker { color: #007fff !important; }
.month-link:hover { border-color: #77baff; background: #edf7ff; }
.monthly-dropdown-wrap select:hover, .monthly-dropdown-wrap select:focus { border-color: #007fff; }
.month-context { border-color: #9dceff; color: #0066cc; background: #e6f2ff; }
.donut { background: conic-gradient(#007fff 0 75%, #e3eaf0 75%); }
.report-hero h3 span, .login-copy h2 span { color: #65b2ff; }
.report-orb { background: linear-gradient(135deg, #35a0ff, #0071e6); box-shadow: 0 0 55px rgb(0 127 255 / 34%); }
.login-glow { background: #007fff; }
.role-pill, .settings-title > span, .mini-avatar, .avatar { color: #006dcc; background: #e6f2ff; }
.login-card input:focus { border-color: #007fff; box-shadow: 0 0 0 4px rgb(0 127 255 / 11%); }
.nav[data-provider="GCash"] > span { color: #53c99c; }
.nav[data-provider="GCash"].active { box-shadow: inset 3px 0 #31b982; }

@media (max-width: 700px) {
  .nav { min-width: 58px; }
  .nav[data-provider="GCash"].active { box-shadow: inset 0 -3px #31b982; }
}

/* Responsive hardening for phones and tablets */
img, svg { max-width: 100%; }
main, .view, .panel, .table-panel, .table-wrap { min-width: 0; }
.table-wrap, .monthly-links {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1100px) and (min-width: 701px) {
  .sidebar { overflow-y: auto; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar nav { flex: 0 0 auto; }
  main { padding-right: 24px; padding-left: 24px; }
  .section-head, .panel-head { flex-wrap: wrap; }
  .export-actions { flex-wrap: wrap; }
  .report-hero h3 { max-width: 540px; }
  .detail-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .sidebar {
    height: calc(72px + env(safe-area-inset-bottom));
    overflow: hidden;
    padding: 7px 8px env(safe-area-inset-bottom);
  }
  .sidebar nav {
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px;
    scroll-padding-inline: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav,
  .admin-only.visible {
    display: flex !important;
    min-width: 72px;
    max-width: 82px;
    flex: 0 0 72px;
    scroll-snap-align: start;
    line-height: 1.08;
  }
  .nav.active { box-shadow: inset 0 -3px #007fff; }
  .nav i { right: 5px; margin: 0; top: 4px; }
  header { gap: 8px; }
  .header-actions { gap: 5px; }
  .install-app-btn.available { font-size: 9px; white-space: nowrap; }
  .section-head { flex-wrap: wrap; gap: 12px; }
  .section-head > div:first-child { min-width: 0; }
  .section-head p { max-width: none; }
  .source-pill { flex: 0 0 auto; white-space: nowrap; }
  .export-actions { width: 100%; margin-top: 0; }
  .export-button { min-height: 44px; }
  .toolbar { flex-wrap: wrap; }
  .search { flex: 1 1 220px; }
  .toolbar select { flex: 1 1 130px; width: auto; min-height: 42px; }
  .month-context { flex: 1 1 100%; }
  .table-wrap { border-radius: 10px; }
  .table-wrap::after { position: sticky; left: 0; width: max-content; }
  .modal-head { gap: 12px; }
  .detail-table-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  main { padding-right: 10px; padding-left: 10px; }
  header { margin-right: -10px; margin-left: -10px; padding-right: 10px; padding-left: 10px; }
  header h1 { max-width: 125px; }
  .install-app-btn.available { width: 38px; padding: 0; justify-content: center; font-size: 0; }
  .install-app-btn.available span { font-size: 16px; }
  .metrics, .daily-payment-metrics { grid-template-columns: 1fr; }
  .metric.featured { grid-column: auto; }
  .metric, .metric.featured { min-height: 112px; }
  .metric:not(.featured) > span { max-width: none; }
  .daily-payment-metrics article > strong,
  .payment-monthly-cards strong { overflow-wrap: anywhere; }
  .payment-monthly-cards { grid-template-columns: 1fr; }
  .section-head .primary { width: 100%; min-height: 44px; }
  .issue-summary, .user-stats { grid-template-columns: 1fr; }
  .issue-summary article, .user-stats article { text-align: left; }
  .issue-summary strong { float: right; display: inline; margin-top: 0; }
  .user-stats .metric-icon { float: left; margin: 0 13px 0 0; }
  .detail-summary { grid-template-columns: 1fr; }
  .detail-table-wrap { max-height: calc(92vh - 460px); }
  .form-actions { flex-direction: column-reverse; }
  .form-actions button { width: 100%; min-height: 44px; }
  .login-art { min-height: 172px; padding: 20px 17px; }
  .login-brand-logo { width: min(205px, 62%); }
  .login-brand b { font-size: 11px; }
  .login-copy { top: 90px; left: 17px; }
  .login-copy h2 { font-size: 22px; }
  .login-side { padding: 24px 14px 38px; }
  .login-card { padding: 22px 17px; }
}

/* Professional mobile presentation for provider reports */
@media (max-width: 700px) {
  #reports[data-provider] .section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #reports[data-provider] .section-head h2 { font-size: 25px; }
  #reports[data-provider] .export-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  #reports[data-provider] .export-button {
    width: 100%;
    min-height: 46px;
    border: 1px solid #cfe4f8;
    border-radius: 12px;
    font-size: 11px;
  }
  #reports[data-provider] .report-hero {
    position: relative;
    min-height: 174px;
    align-items: flex-end;
    padding: 23px 20px;
    border-radius: 17px;
    background: radial-gradient(circle at 100% 0, rgb(0 127 255 / 38%), transparent 47%), linear-gradient(145deg, #071f35, #123e61);
    box-shadow: 0 12px 28px rgb(7 31 53 / 16%);
  }
  #reports[data-provider] .report-hero::after {
    position: absolute;
    top: 19px;
    right: 19px;
    width: 36px;
    height: 36px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 12px;
    background: rgb(255 255 255 / 8%);
    content: "↗";
    font-size: 17px;
    line-height: 34px;
    text-align: center;
  }
  #reports[data-provider] .report-hero h3 {
    max-width: 290px;
    margin: 10px 0 8px;
    font-size: clamp(21px, 6.4vw, 27px);
    line-height: 1.2;
  }
  #reports[data-provider] .report-hero small {
    display: block;
    max-width: 290px;
    line-height: 1.45;
  }
  #reports[data-provider] .table-panel {
    padding: 15px;
    border-radius: 17px;
  }
  #reports[data-provider] .table-panel .panel-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 0;
  }
  #reports[data-provider] .report-month-label {
    display: grid;
    width: 100%;
    gap: 7px;
    margin: 0;
  }
  #reports[data-provider] .report-month-label select {
    width: 100%;
    min-height: 47px;
    padding: 0 40px 0 13px;
    border: 1px solid #bddcff;
    border-radius: 12px;
    color: #103a60;
    background-color: #f4f9ff;
    font-weight: 700;
  }
  #reports[data-provider] .table-wrap { overflow: visible; }
  #reports[data-provider] .table-wrap::after { display: none; }
  #reports[data-provider] table,
  #reports[data-provider] tbody { display: block; min-width: 0; }
  #reports[data-provider] thead { display: none; }
  #reports[data-provider] tbody { display: grid; gap: 10px; }
  #reports[data-provider] tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid #dde9f3;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 13px rgb(19 57 89 / 5%);
  }
  #reports[data-provider] tbody td {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
    border-right: 1px solid #edf2f6;
    border-bottom: 1px solid #edf2f6;
    white-space: normal;
    text-align: right;
  }
  #reports[data-provider] tbody td:nth-child(even) { border-right: 0; }
  #reports[data-provider] tbody td:nth-last-child(-n+2) { border-bottom: 0; }
  #reports[data-provider] tbody td::before {
    flex: 0 0 auto;
    color: #748596;
    content: "";
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
  }
  #reports[data-provider] tbody td:nth-child(1)::before { content: "Date"; }
  #reports[data-provider] tbody td:nth-child(2)::before { content: "Batches"; }
  #reports[data-provider] tbody td:nth-child(3)::before { content: "Entries"; }
  #reports[data-provider] tbody td:nth-child(4)::before { content: "Gross"; }
  #reports[data-provider] tbody td:nth-child(5)::before { content: "Fees"; }
  #reports[data-provider] tbody td:nth-child(6)::before { content: "Expected"; }
  #reports[data-provider] tbody td:nth-child(7)::before { content: "Settled"; }
  #reports[data-provider] tbody td:nth-child(8)::before { content: "Variance"; }
  #reports[data-provider] tbody td[colspan] {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 90px;
    border: 0;
    color: var(--muted);
    text-align: center;
  }
  #reports[data-provider] tbody td[colspan]::before { display: none; }
}

@media (max-width: 380px) {
  #reports[data-provider] tbody tr { grid-template-columns: 1fr; }
  #reports[data-provider] tbody td { border-right: 0; }
  #reports[data-provider] tbody td:nth-last-child(2) { border-bottom: 1px solid #edf2f6; }
}

@media (max-width: 700px) {
  #reports[data-provider="GCash"] .export-button { border-color: #bdebd7; }
  #reports[data-provider="GCash"] .primary {
    background: linear-gradient(135deg, #28bd83, #119b67);
    box-shadow: 0 7px 18px rgb(17 155 103 / 22%);
  }
  #reports[data-provider="GCash"] .report-hero {
    background: radial-gradient(circle at 100% 0, rgb(49 185 130 / 42%), transparent 48%), linear-gradient(145deg, #082f29, #115a48);
    box-shadow: 0 12px 28px rgb(8 76 59 / 17%);
  }
  #reports[data-provider="GCash"] .report-hero h3 span { color: #72e8b8; }
  #reports[data-provider="GCash"] .report-month-label select {
    border-color: #aee3cd;
    color: #0b6044;
    background-color: #f1fbf7;
  }
  #reports[data-provider="GCash"] tbody tr {
    border-color: #d7eee5;
    box-shadow: 0 4px 13px rgb(15 111 77 / 5%);
  }
  #reports[data-provider="GCash"] tbody td::before { color: #638578; }
}

/* Cross-platform layout: desktop, tablet, phone, touch and print */
main {
  width: calc(100% - var(--sidebar));
  max-width: 1800px;
  margin-right: auto;
}

@media (min-width: 1801px) {
  main { padding-right: 48px; padding-left: 48px; }
  .metrics { grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr)); }
}

/* Portrait tablets need a stacked login instead of two overflowing columns. */
@media (max-width: 960px) and (min-width: 701px) {
  .login-screen {
    display: block;
    overflow-y: auto;
    background: linear-gradient(180deg, #081f35 0 245px, #fff 245px);
  }
  .login-art { height: 245px; padding: 30px 34px; background: transparent; }
  .login-brand-logo { width: min(290px, 48vw); }
  .login-copy { top: 125px; left: 34px; transform: none; }
  .login-copy p, .login-copy small { display: none; }
  .login-copy h2 { margin: 0; font-size: clamp(27px, 5vw, 39px); letter-spacing: -1.6px; }
  .login-glow { display: none; }
  .login-side { display: block; padding: 38px 24px 55px; }
  .login-card {
    width: min(470px, 100%);
    margin: auto;
    padding: 30px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 60px rgb(11 39 64 / 14%);
  }
}

@media (max-width: 700px) {
  main { width: 100%; }
  .table-wrap:not(#reports[data-provider] .table-wrap) table th:first-child,
  .table-wrap:not(#reports[data-provider] .table-wrap) table td:first-child {
    position: sticky;
    z-index: 1;
    left: 0;
    background: #fff;
    box-shadow: 1px 0 0 var(--line);
  }
  .table-wrap:not(#reports[data-provider] .table-wrap) table th:first-child {
    z-index: 2;
    background: #f8fafc;
  }
  #maya-payment-reports table { min-width: 0; table-layout: fixed; }
  #maya-payment-reports th,
  #maya-payment-reports td { padding: 12px 8px; white-space: normal; }
  #maya-payment-reports th:first-child,
  #maya-payment-reports td:first-child { width: 36%; }
  .panel-head > div { min-width: 0; }
  .payment-summary-list > div { align-items: flex-start; }
  .payment-summary-list strong { max-width: 52%; overflow-wrap: anywhere; text-align: right; white-space: normal; }
  .issue-meta { gap: 7px 12px; }
  .user-row-actions { flex-wrap: wrap; }
}

@media (hover: none) and (pointer: coarse) {
  button, select, .settlement-link, .link-btn { touch-action: manipulation; }
  .nav, .primary, .secondary, .month-context, .resolve-btn,
  .status-switch, .edit-user-btn, .delete-user-btn { min-height: 44px; }
  .settlement-link, .link-btn { min-height: 38px; }
  input, select { font-size: 16px; }
  tbody tr:hover, .month-link:hover { background: inherit; transform: none; }
}

@media (max-width: 700px) and (orientation: landscape) and (max-height: 520px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .sidebar { height: calc(58px + env(safe-area-inset-bottom)); padding-top: 3px; }
  .nav, .admin-only.visible { min-height: 50px; flex-direction: row; gap: 5px; max-width: 118px; flex-basis: 108px; }
  .nav > span { font-size: 14px; }
  .modal-card { max-height: 96vh; }
}

@media print {
  :root { color: #111; background: #fff; }
  body { padding: 0; background: #fff; }
  .sidebar, header, .section-head .primary, .export-actions,
  .toolbar, .toast, .modal, .table-wrap::after { display: none !important; }
  main { width: 100%; max-width: none; margin: 0; padding: 0; }
  .view { display: none !important; }
  .view.active { display: block !important; animation: none; }
  .panel, .metric, .monthly-strip, .report-hero { break-inside: avoid; box-shadow: none; }
  .table-wrap { overflow: visible; }
  table { min-width: 0 !important; font-size: 9pt; white-space: normal; }
}

/* Maya Daily Payments Reports */
.daily-report-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.daily-report-stats article { min-width: 0; padding: 16px; border: 1px solid #d7e7f5; border-radius: 14px; background: linear-gradient(145deg, #fff, #f5faff); box-shadow: var(--shadow-sm); }
.daily-report-stats span, .daily-report-stats small { display: block; }
.daily-report-stats span { color: #607487; font-size: 10px; font-weight: 700; }
.daily-report-stats strong { display: block; overflow: hidden; margin: 9px 0 4px; color: #0c3459; font: 750 clamp(18px, 1.8vw, 24px) Manrope, sans-serif; letter-spacing: -.6px; text-overflow: ellipsis; white-space: nowrap; }
.daily-report-stats small { color: var(--muted-2); font-size: 9px; }

@media (max-width: 1100px) {
  .daily-report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  #maya-payment-reports .section-head { display: grid; grid-template-columns: 1fr; gap: 14px; }
  #maya-payment-reports .section-head h2 { font-size: 24px; line-height: 1.18; }
  #maya-payment-reports .export-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  #maya-payment-reports .export-button { width: 100%; min-height: 46px; border: 1px solid #cfe4f8; border-radius: 12px; }
  #maya-payment-reports .daily-report-hero { position: relative; min-height: 174px; align-items: flex-end; padding: 23px 20px; border-radius: 17px; background: radial-gradient(circle at 100% 0, rgb(0 127 255 / 40%), transparent 48%), linear-gradient(145deg, #071f35, #123e61); box-shadow: 0 12px 28px rgb(7 31 53 / 16%); }
  #maya-payment-reports .daily-report-hero::after { position: absolute; top: 19px; right: 19px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgb(255 255 255 / 18%); border-radius: 12px; background: rgb(255 255 255 / 8%); content: "▦"; font-size: 16px; }
  #maya-payment-reports .daily-report-hero h3 { max-width: 280px; margin: 10px 0 8px; font-size: clamp(21px, 6.4vw, 27px); line-height: 1.2; }
  #maya-payment-reports .daily-report-hero small { display: block; max-width: 290px; line-height: 1.45; }
  #maya-payment-reports .daily-report-stats { gap: 8px; }
  #maya-payment-reports .daily-report-stats article { padding: 13px; }
  #maya-payment-reports .daily-report-stats strong { font-size: 18px; overflow-wrap: anywhere; white-space: normal; }
  #maya-payment-reports .table-panel { padding: 15px; border-radius: 17px; }
  #maya-payment-reports .table-panel .panel-head { display: grid; grid-template-columns: 1fr; gap: 13px; padding: 0; }
  #maya-payment-reports .report-month-label { display: grid; width: 100%; gap: 7px; margin: 0; }
  #maya-payment-reports .report-month-label select { width: 100%; min-height: 47px; padding: 0 40px 0 13px; border: 1px solid #bddcff; border-radius: 12px; color: #103a60; background-color: #f4f9ff; font-weight: 700; }
  #maya-payment-reports tbody tr:nth-child(even) { background: #f7fbff; }
  #maya-payment-reports tbody td[colspan] { color: var(--muted); text-align: center; }
}

@media (max-width: 390px) {
  #maya-payment-reports .daily-report-stats { grid-template-columns: 1fr; }
}

/* Dedicated tablet layouts */
@media (min-width: 701px) and (max-width: 1100px) {
  :root { --sidebar: 88px; }
  body { overflow-x: hidden; }
  .sidebar { align-items: center; padding: 20px 12px; }
  .brand { padding-bottom: 20px; }
  .sidebar-logo { width: 58px; height: 58px; }
  .sidebar nav { gap: 6px; }
  .nav { min-height: 48px; border-radius: 12px; }
  main { width: calc(100% - var(--sidebar)); padding-right: 20px; padding-left: 20px; }
  header { position: sticky; z-index: 10; top: 0; height: 72px; margin-bottom: 20px; background: rgb(244 248 252 / 92%); backdrop-filter: blur(12px); }
  .section-head { align-items: flex-start; gap: 14px; }
  .section-head h2 { font-size: 24px; line-height: 1.2; }
  .section-head p { max-width: 540px; }
  .metrics, .daily-payment-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric, .daily-payment-metrics article { min-height: 125px; }
  .provider-monthly-grid { grid-template-columns: 1fr; }
  .payment-monthly-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid, .lower-grid, .daily-payment-grid { grid-template-columns: 1fr; }
  .panel { padding: 17px; }
  .toolbar { flex-wrap: wrap; }
  .search { flex: 1 1 280px; }
  .toolbar select { min-height: 42px; }
  .table-wrap { padding-bottom: 3px; scrollbar-color: #8bbce8 #edf5fb; scrollbar-width: auto; }
  .table-wrap::-webkit-scrollbar { height: 9px; }
  .table-wrap::-webkit-scrollbar-track { border-radius: 10px; background: #edf5fb; }
  .table-wrap::-webkit-scrollbar-thumb { border: 2px solid #edf5fb; border-radius: 10px; background: #8bbce8; }
  #settlements table { min-width: 980px; }
  #reports table { min-width: 850px; }
  #users table { min-width: 720px; }
  .daily-payment-table table { min-width: 1380px; }
  .table-wrap:not(#reports[data-provider] .table-wrap) table th:first-child,
  .table-wrap:not(#reports[data-provider] .table-wrap) table td:first-child {
    position: sticky;
    z-index: 1;
    left: 0;
    background: #fff;
    box-shadow: 1px 0 0 var(--line);
  }
  .table-wrap:not(#reports[data-provider] .table-wrap) table th:first-child { z-index: 2; background: #f8fafc; }
  .report-hero { padding: 25px 27px; }
  .report-hero h3 { font-size: 23px; }
  .report-month-label { width: min(300px, 100%); }
  .report-month-label select { flex: 1; min-height: 43px; }
  .export-button { min-height: 43px; }
  .issue-card { grid-template-columns: 6px minmax(0, 1fr); }
  .issue-actions { grid-column: 2; grid-template-columns: auto auto; align-items: center; justify-content: start; }
  .modal { padding: 22px; }
  .modal-card { width: min(680px, 100%); max-height: calc(100dvh - 44px); }
  .settlement-detail-card { width: 100%; }
  .detail-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-table-wrap { max-height: calc(100dvh - 390px); }
}

/* Landscape tablets have enough room for readable navigation labels. */
@media (min-width: 901px) and (max-width: 1100px) {
  :root { --sidebar: 205px; }
  .sidebar { align-items: stretch; padding: 22px 15px 18px; }
  .brand { align-items: center; padding: 0 8px 20px; }
  .sidebar-logo { width: 150px; height: auto; padding: 0; object-fit: contain; }
  .brand-product-name, .brand > span:last-child { display: block; }
  .sidebar nav { width: 100%; gap: 4px; }
  .nav { justify-content: flex-start; gap: 10px; padding: 0 11px; font-size: 11px; line-height: 1.15; }
  .nav > span { width: 20px; flex: 0 0 20px; font-size: 17px; }
  .nav i { position: static; margin: 0 0 0 auto; font-size: 8px; }
  main { padding-right: 24px; padding-left: 24px; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .header-actions { gap: 6px; }
  .profile-trigger .user, .profile-chevron { display: none; }
  .section-head .export-actions { width: 100%; margin-top: 0; }
  .export-actions .export-button { flex: 1; }
  .health-panel { grid-template-columns: minmax(0, 1fr) 145px minmax(0, 1fr); }
  .donut { width: 112px; height: 112px; }
}

@media (min-width: 701px) and (max-width: 1100px) and (max-height: 720px) {
  .sidebar { padding-top: 12px; padding-bottom: 12px; }
  .brand { padding-bottom: 10px; }
  .sidebar-logo { max-height: 45px; }
  .sidebar nav { gap: 2px; }
  .nav { min-height: 40px; }
}