/* Today: a slim header, a three-figure strip, quick-jump chips and flat panels with one-line rows. Uses the --rpt-* colors and area-* accents from reports.css. */
#app .tdy-page { display: grid; gap: 10px; max-width: 1500px; }
#app .tdy-top h1 { margin: 0 0 1px; font-size: 1.5rem; letter-spacing: -.02em; }
#app .tdy-top p { margin: 0; color: var(--rpt-muted); font-size: .85rem; }
#app .tdy-note { margin: 0; padding: 8px 12px; border-radius: 8px; color: var(--rpt-muted); font-size: .85rem; }
#app .tdy-note.is-bad { background: color-mix(in srgb, #dc2626 12%, transparent); color: var(--rpt-text); }
#app .tdy-clear { margin: 0; padding: 14px 16px; border: 1px dashed var(--rpt-line); border-radius: 10px; color: var(--rpt-muted); font-size: .9rem; text-align: center; }
#app .tdy-clear strong { color: var(--rpt-text); }
#app .tdy-jump { display: flex; flex-wrap: wrap; gap: 6px; }
#app .tdy-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; min-height: 28px !important; padding: 0 10px !important; border: 1px solid var(--rpt-line) !important; border-radius: 999px !important; background: transparent !important; color: var(--rpt-text) !important; font-size: .76rem !important; font-weight: 600 !important; box-shadow: none !important; cursor: pointer; }
#app .tdy-chip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--area); }
#app .tdy-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .tdy-chip b { flex: none; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--area) 16%, transparent); color: var(--area); font-size: .7rem; }
#app .tdy-chip:hover { border-color: var(--area) !important; }
#app .tdy-cols { column-width: 400px; column-gap: 10px; }
#app .tdy-box { display: block; break-inside: avoid; margin: 0 0 10px; padding: 0 !important; border: 1px solid var(--rpt-line); border-left: 4px solid var(--area); border-radius: 10px; background: var(--rpt-surface); box-shadow: none !important; min-height: 0 !important; overflow: hidden; }
#app .tdy-box > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--rpt-line); background: color-mix(in srgb, var(--area) 6%, var(--rpt-surface)); }
#app .tdy-box > header h2 { margin: 0 !important; font-size: .88rem !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.3 !important; color: var(--rpt-text) !important; }
#app .tdy-n { flex: none; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--area) 16%, transparent); color: var(--area); font-size: .74rem; font-weight: 750; text-align: center; }
#app .tdy-box ul { list-style: none; margin: 0; padding: 0; }
#app .tdy-box li { border-top: 1px solid var(--rpt-line); }
#app .tdy-box li:first-child { border-top: 0; }
#app .tdy-box li a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 5px 12px 6px; color: var(--rpt-text); text-decoration: none; font-size: .84rem; }
#app .tdy-box li a:hover { background: color-mix(in srgb, var(--area) 7%, transparent); }
#app .tdy-box li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#app .tdy-box li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rpt-muted); font-size: .75rem; line-height: 1.35; }
#app .tdy-more { display: block; padding: 6px 12px 8px; border-top: 1px solid var(--rpt-line); color: var(--area); font-size: .78rem; font-weight: 700; text-decoration: none; }
#app .tdy-more:hover { text-decoration: underline; }
#app .tdy-page .rm-box, #app .tdy-page .tdm-box { margin: 0; }
@media (max-width: 640px) {
    #app .tdy-cols { column-width: auto; }
    #app .tdy-box li a { grid-template-columns: minmax(0, 1fr); gap: 0; }
    #app .tdy-box li span { max-width: none; }
}

/* ---- Getting started checklist on Today ---- */
#app .gs-box { border: 1px solid var(--rpt-line); border-left: 4px solid var(--rpt-accent); border-radius: 10px; background: var(--rpt-surface); padding: 8px 12px 6px; }
#app .gs-box > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#app .gs-box > header > div { display: flex; align-items: baseline; gap: 10px; }
#app .gs-box h2 { margin: 0 !important; font-size: .9rem !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--rpt-text) !important; }
#app .gs-box header span { color: var(--rpt-muted); font-size: .78rem; }
#app .gs-hide { min-height: 24px !important; padding: 0 9px !important; border: 1px solid var(--rpt-line) !important; border-radius: 7px !important; background: transparent !important; color: var(--rpt-muted) !important; font-size: .72rem !important; box-shadow: none !important; cursor: pointer; }
#app .gs-bar { height: 5px; margin: 7px 0 4px; border-radius: 999px; background: color-mix(in srgb, var(--rpt-muted) 20%, transparent); overflow: hidden; }
#app .gs-bar i { display: block; height: 100%; border-radius: 999px; background: var(--rpt-accent); }
#app .gs-steps { list-style: none; margin: 0; padding: 0; }
#app .gs-steps li { border-top: 1px solid var(--rpt-line); }
#app .gs-steps li:first-child { border-top: 0; }
#app .gs-steps a { display: grid; grid-template-columns: 14px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; color: var(--rpt-text); text-decoration: none; font-size: .85rem; }
#app .gs-dot { width: 12px; height: 12px; border: 2px solid var(--rpt-muted); border-radius: 50%; }
#app .gs-steps small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rpt-muted); font-size: .76rem; }
#app .gs-steps em { font-style: normal; color: var(--rpt-accent); font-weight: 700; font-size: .78rem; }
#app .gs-steps a:hover b { text-decoration: underline; }
@media (max-width: 640px) { #app .gs-steps a { grid-template-columns: 14px minmax(0, 1fr) auto; } #app .gs-steps small { display: none; } }

/* ---- Notifications ---- */
#app .nt-page { display: grid; gap: 10px; max-width: 980px; }
#app .nt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#app .nt-top h1 { margin: 0 0 1px; font-size: 1.5rem; letter-spacing: -.02em; }
#app .nt-top p { margin: 0; color: var(--rpt-muted); font-size: .85rem; }
#app .nt-all { min-height: 30px !important; padding: 0 12px !important; border: 1px solid var(--rpt-accent) !important; border-radius: 8px !important; background: transparent !important; color: var(--rpt-accent) !important; font-size: .78rem !important; font-weight: 700 !important; box-shadow: none !important; cursor: pointer; }
#app .nt-views { display: flex; gap: 2px; border-bottom: 1px solid var(--rpt-line); }
#app .nt-views button { min-height: 32px !important; padding: 0 12px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--rpt-muted) !important; font-size: .84rem !important; font-weight: 650 !important; box-shadow: none !important; cursor: pointer; }
#app .nt-views button span { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--rpt-muted) 16%, transparent); font-size: .7rem; }
#app .nt-views button.is-on { border-bottom-color: var(--rpt-accent) !important; color: var(--rpt-accent) !important; }
#app .nt-none { margin: 0; padding: 18px 16px; border: 1px dashed var(--rpt-line); border-radius: 10px; color: var(--rpt-muted); text-align: center; font-size: .88rem; }
#app .nt-group h2 { margin: 6px 0 4px !important; font-size: .72rem !important; font-weight: 750 !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--rpt-muted) !important; }
#app .nt-stack { border: 1px solid var(--rpt-line); border-radius: 10px; background: var(--rpt-surface); overflow: hidden; }
#app .nt-line { display: grid !important; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 8px 14px !important; border: 0 !important; border-top: 1px solid var(--rpt-line) !important; border-radius: 0 !important; background: transparent !important; text-align: left; box-shadow: none !important; min-height: 0 !important; cursor: pointer; color: var(--rpt-text) !important; }
#app .nt-line:first-child { border-top: 0 !important; }
#app .nt-line:hover { background: color-mix(in srgb, var(--rpt-accent) 6%, transparent) !important; }
#app .nt-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--rpt-muted); opacity: .45; }
#app .nt-line.sev-warning i { background: #d97706; }
#app .nt-line.sev-critical i, #app .nt-line.sev-error i { background: #dc2626; }
#app .nt-line.is-new i { opacity: 1; background: var(--rpt-accent); }
#app .nt-line.is-new.sev-warning i { background: #d97706; }
#app .nt-line.is-new.sev-critical i, #app .nt-line.is-new.sev-error i { background: #dc2626; }
#app .nt-copy { display: grid; gap: 1px; min-width: 0; text-align: left; }
#app .nt-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 500; color: var(--rpt-text); }
#app .nt-line.is-new .nt-copy strong { font-weight: 750; }
#app .nt-copy small { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--rpt-muted); }
#app .nt-kind { padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--rpt-muted) 14%, transparent); color: var(--rpt-muted); font-size: .7rem; font-weight: 650; white-space: nowrap; }
#app .nt-line time { min-width: 64px; text-align: right; color: var(--rpt-muted); font-size: .76rem; white-space: nowrap; }
@media (max-width: 640px) { #app .nt-line { grid-template-columns: 10px minmax(0, 1fr) auto; } #app .nt-kind { display: none; } }

/* ---- Settings overview: a slim plan strip and lighter tiles ---- */
#app .settings-plan-card { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; margin: 8px 0 10px !important; padding: 0 !important; border: 1px solid var(--rpt-line) !important; border-radius: 10px !important; background: var(--rpt-surface) !important; box-shadow: none !important; overflow: hidden; }
#app .settings-plan-item { display: grid !important; gap: 1px; min-height: 0 !important; padding: 8px 14px !important; border: 0 !important; border-left: 1px solid var(--rpt-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
#app .settings-plan-item:first-child { border-left: 0 !important; }
#app .settings-plan-label { color: var(--rpt-muted) !important; font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase; }
#app .settings-plan-value { color: var(--rpt-text) !important; font-size: 1.1rem !important; font-weight: 750 !important; line-height: 1.25 !important; }
#app .settings-tiles .settings-tile { min-height: 0 !important; padding: 10px 12px !important; }
#app .settings-tiles .settings-tile strong { font-size: .92rem; }
#app .settings-tiles .settings-tile span { font-size: .78rem; line-height: 1.35; }
@media (max-width: 700px) { #app .settings-plan-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } #app .settings-plan-item:nth-child(odd) { border-left: 0 !important; } }

/* ---- Dispatch calendar: one slim strip, one filter row, theme-colored buttons ---- */
#app .jobcalendar-page .jobcalendar-topbar { display: grid !important; grid-template-columns: minmax(220px, 1.3fr) minmax(0, 3fr); gap: 0 !important; margin: 0 0 10px !important; border: 1px solid var(--rpt-line); border-radius: 10px; background: var(--rpt-surface); overflow: hidden; }
#app .jobcalendar-page .jobcalendar-range-card { display: grid !important; gap: 1px; padding: 8px 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 0 !important; }
#app .jobcalendar-page .jobcalendar-stats-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; margin: 0 !important; }
#app .jobcalendar-page .jobcalendar-stat-card { display: grid !important; gap: 1px; padding: 8px 14px !important; border: 0 !important; border-left: 1px solid var(--rpt-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 0 !important; }
#app .jobcalendar-page :is(.jobcalendar-range-label, .jobcalendar-stat-label) { color: var(--rpt-muted) !important; font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase; }
#app .jobcalendar-page .jobcalendar-range-value { font-size: 1.1rem !important; font-weight: 750 !important; color: var(--rpt-text) !important; }
#app .jobcalendar-page .jobcalendar-stat-value { font-size: 1.3rem !important; font-weight: 750 !important; line-height: 1.2 !important; color: var(--rpt-text) !important; }
#app .jobcalendar-page .jobcalendar-toolbar-left { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 8px !important; flex: 1 1 auto; }
#app .jobcalendar-page .jobcalendar-search { flex: 1 1 140px; min-width: 120px; max-width: 320px; width: auto !important; height: 34px !important; min-height: 34px !important; font-size: .85rem !important; }
#app .jobcalendar-page .jobcalendar-filter { flex: 0 0 140px; width: auto !important; height: 34px !important; min-height: 34px !important; font-size: .85rem !important; }
#app .jobcalendar-page .jobcalendar-toolbar { align-items: center !important; gap: 10px !important; }
#app .jobcalendar-page :is(.jobcalendar-today-btn, .jobcalendar-agenda-add) { border: 1px solid var(--rpt-accent) !important; background: var(--rpt-accent) !important; background-image: none !important; color: #fff !important; box-shadow: none !important; }
#app .jobcalendar-page :is(.jobcalendar-nav-btn, .jobcalendar-expand-btn, .jobcalendar-filter-toggle) { min-height: 32px !important; border: 1px solid var(--rpt-line) !important; background: transparent !important; color: var(--rpt-text) !important; box-shadow: none !important; }
#app .users-stats-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; margin: 0 0 10px !important; border: 1px solid var(--rpt-line); border-radius: 10px; background: var(--rpt-surface); overflow: hidden; }
#app .users-stat-card { display: grid !important; gap: 1px; min-height: 0 !important; padding: 8px 14px !important; border: 0 !important; border-left: 1px solid var(--rpt-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
#app .users-stat-card:first-child { border-left: 0 !important; }
#app .users-stat-label { color: var(--rpt-muted) !important; font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase; }
#app .users-stat-value { font-size: 1.3rem !important; font-weight: 750 !important; line-height: 1.2 !important; color: var(--rpt-text) !important; }
#app .user-actions-select { width: 116px !important; height: 32px !important; min-height: 32px !important; padding: 0 8px !important; font-size: .82rem !important; }
@media (max-width: 800px) { #app .jobcalendar-page .jobcalendar-topbar { grid-template-columns: 1fr; } #app .jobcalendar-page .jobcalendar-stats-grid { border-top: 1px solid var(--rpt-line); } #app .users-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #app .users-stat-card:nth-child(odd) { border-left: 0 !important; } }

/* The reminders button sits just above the page help button instead of beside it, so it never covers page-level help buttons (Dispatch help and similar). */
#app .dashboard-reminder-launcher { right: 1.1rem !important; bottom: 4.5rem !important; width: 44px !important; height: 44px !important; min-height: 44px !important; }

/* ---- Workspace health (Manage) ---- */
#app .wh-box { margin: 10px 0; border: 1px solid var(--rpt-line); border-radius: 10px; background: var(--rpt-surface); padding: 8px 14px 6px; }
#app .wh-box > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#app .wh-box h2 { margin: 0 !important; font-size: .92rem !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--rpt-text) !important; }
#app .wh-sum { padding: 1px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
#app .wh-sum.is-ok { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; }
#app .wh-sum.is-warn { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #b45309; }
#app .wh-sum.is-bad { background: color-mix(in srgb, #dc2626 16%, transparent); color: #b91c1c; }
html[data-theme="dark"] #app .wh-sum.is-ok { color: #4ade80; }
html[data-theme="dark"] #app .wh-sum.is-warn { color: #fbbf24; }
html[data-theme="dark"] #app .wh-sum.is-bad { color: #f87171; }
#app .wh-stack { list-style: none; margin: 6px 0 0; padding: 0; }
#app .wh-line { display: grid; grid-template-columns: 10px 130px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rpt-line); font-size: .85rem; }
#app .wh-line i { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; align-self: center; }
#app .wh-line.is-warn i { background: #d97706; }
#app .wh-line.is-bad i { background: #dc2626; }
#app .wh-line b { font-weight: 650; color: var(--rpt-text); }
#app .wh-line span { color: var(--rpt-muted); }
@media (max-width: 640px) { #app .wh-line { grid-template-columns: 10px minmax(0, 1fr); } #app .wh-line span { grid-column: 2; } }

/* ---- Leases & Rent: recent payments as one-line rows ---- */
#app .leases-audit-list { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none; }
#app .leases-audit-list li { display: grid !important; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; gap: 12px !important; padding: 6px 14px !important; border-bottom: 1px solid var(--rpt-line) !important; font-size: .85rem; }
#app .leases-audit-list li:last-child { border-bottom: 0 !important; }
#app .lz-when { color: var(--rpt-muted); font-size: .78rem; white-space: nowrap; }
#app .lz-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rpt-text); }
#app .lz-sum { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--rpt-text); }