:root {
  --ink: #162b3b;
  --muted: #607485;
  --soft-muted: #8799a8;
  --line: #dbe6ec;
  --paper: #f4f8fa;
  --white: #ffffff;
  --sidebar: #112d3d;
  --coral: #0f6f8c;
  --coral-dark: #095c76;
  --coral-soft: #e6f3f7;
  --green: #21826d;
  --green-soft: #e8f6f1;
  --blue: #3f7fbd;
  --violet: #6572b8;
  --amber: #ae7628;
  --shadow: 0 1px 2px rgba(18, 55, 76, 0.035), 0 10px 28px rgba(18, 55, 76, 0.07);
}

* { box-sizing: border-box; }

html { max-width: 100%; overflow-x: clip; background: var(--paper); }

body {
  max-width: 100%;
  overflow-x: clip;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 14px;
}

button, input { font: inherit; }

button { color: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 25px 16px 17px;
  color: #d8d7d2;
  background:
    radial-gradient(circle at 18% 2%, rgba(31, 136, 165, 0.25), transparent 28%),
    var(--sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 0 9px 27px; }
.brand-logo { width: 190px; height: 82px; display: block; flex: 0 0 auto; object-fit: cover; object-position: center; }
.mobile-close { display: none; margin-left: auto; padding: 6px; border: 0; color: #aaa; background: transparent; }

.sidebar nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label { padding: 0 12px 8px; color: #6f716d; font-size: 10px; font-weight: 650; letter-spacing: 1.25px; text-transform: uppercase; }
.records-label { padding-top: 20px; }
.sidebar nav a {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  color: #9c9e99;
  background: transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  text-decoration: none;
  text-align: left;
}
.sidebar nav a:hover { color: #f7f6f2; background: rgba(255, 255, 255, 0.05); }
.sidebar nav a:active { transform: scale(0.985); }
.sidebar nav a.active { color: #fff; background: rgba(255, 255, 255, 0.085); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); }
.sidebar nav a.active svg { color: var(--coral); }
.sidebar nav a .active-dot { position: absolute; right: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(239, 118, 92, 0.09); }
.sidebar nav a span { white-space: nowrap; font-size: 12.5px; font-weight: 520; }

.sidebar-support { margin: auto 3px 15px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 12px; background: rgba(255, 255, 255, 0.035); }
.sidebar-support > span { width: 27px; height: 27px; display: grid; place-items: center; margin-bottom: 10px; color: var(--coral); border-radius: 8px; background: rgba(239, 118, 92, 0.12); }
.sidebar-support strong { display: block; color: #e9e8e4; font-size: 11.5px; }
.sidebar-support p { margin: 5px 0 10px; color: #797b76; font-size: 10px; line-height: 1.45; }
.sidebar-support button { padding: 0; color: #c6c6c2; border: 0; background: transparent; font-size: 10.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.user-card { width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px 8px 0; color: inherit; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.065); background: transparent; cursor: pointer; text-align: left; text-decoration: none; }
.user-card > span:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.user-card strong { color: #e4e4df; font-size: 11.5px; }
.user-card small { margin-top: 3px; color: #72746f; font-size: 9.5px; }
.user-card svg { color: #6f716e; }
.logout-form { margin: 9px 8px 0; }
.logout-button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 10px; color: #aeb0aa; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9px; background: rgba(255, 255, 255, 0.035); font-size: 11px; cursor: pointer; transition: color 150ms ease, background 150ms ease, border-color 150ms ease; }
.logout-button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.07); }

/* Authentication */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, rgba(91, 101, 216, .18), transparent 32%), linear-gradient(135deg, #15192a 0 46%, #f3f5fa 46% 100%); }
.auth-shell { width: min(920px, 100%); min-height: 560px; display: grid; grid-template-columns: minmax(260px, .8fr) minmax(340px, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(17, 24, 47, .24); }
.auth-brand { display: flex; align-items: flex-start; gap: 12px; padding: 42px; color: #fff; background: radial-gradient(circle at 22% 8%, rgba(91,101,216,.35), transparent 35%), var(--sidebar); }
.auth-logo { width: min(255px, 100%); height: 112px; display: block; object-fit: cover; object-position: center; }
.auth-card { width: min(410px, 100%); align-self: center; justify-self: center; padding: 42px; }
.auth-eyebrow { display: block; margin-bottom: 10px; color: var(--coral-dark); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.auth-card h1 { margin: 0; font-size: clamp(30px, 5vw, 42px); letter-spacing: -1.7px; }
.auth-card > p { margin: 10px 0 24px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 7px; }
.auth-form label span { color: #4f5669; font-size: 11px; font-weight: 650; }
.auth-form input:not([type="hidden"]) { width: 100%; height: 46px; padding: 0 13px; color: var(--ink); border: 1px solid #dfe3ec; border-radius: 10px; outline: 0; background: #fbfcff; font-size: 14px; }
.auth-form input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(91,101,216,.12); background: #fff; }
.auth-submit { width: 100%; height: 46px; margin-top: 2px; font-size: 13px; }
.auth-submit:disabled { cursor: not-allowed; opacity: .55; }
.auth-notice { margin: -6px 0 18px; padding: 10px 12px; color: #775b24; border: 1px solid #efddb9; border-radius: 9px; background: #fff9ec; font-size: 11px; line-height: 1.45; }
.auth-notice.error { color: #9b4437; border-color: #efc5bd; background: #fff3f0; }
.auth-notice.success { color: #347158; border-color: #c8e5d7; background: #f0faf5; }
.auth-card .auth-footnote { margin: 18px 0 0; color: var(--soft-muted); font-size: 10px; text-align: center; }

@media (max-width: 700px) {
  .auth-body { display: block; padding: 0; background: var(--sidebar); }
  .auth-shell { width: 100%; min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .auth-brand { align-items: center; padding: 24px; }
  .auth-card { width: 100%; padding: 34px 24px 46px; }
}

.main-content { min-width: 0; min-height: 100vh; margin-left: 250px; }
.topbar { height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); }
.global-search { width: min(340px, 42vw); height: 35px; display: flex; align-items: center; gap: 9px; padding: 0 10px; color: #768796; border: 1px solid #dce6eb; border-radius: 9px; background: #fbfdfe; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11.5px; }
.global-search input::placeholder { color: #9aabb6; }
.global-search kbd { padding: 2px 5px; color: #8b9ca8; border: 1px solid #dce6eb; border-radius: 4px; background: #fff; font-family: inherit; font-size: 9px; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { width: 35px; height: 35px; display: inline-grid; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid #dce6eb; border-radius: 9px; background: var(--white); cursor: pointer; transition: border-color 150ms ease, transform 150ms ease, background 150ms ease; }
.icon-button:hover { border-color: #a8c6d2; background: #f3fafc; }
.icon-button:active { transform: scale(0.95); }
.notification-button { position: relative; }
.notification-button i { position: absolute; top: 7px; right: 8px; width: 5px; height: 5px; border: 1.5px solid #fff; border-radius: 50%; background: var(--coral); }
.primary-button, .dark-button, .outline-button, .filter-button {
  height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border-radius: 9px; font-size: 11.5px; font-weight: 620; cursor: pointer; transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}
.primary-button { color: #fff; border: 1px solid var(--coral); background: var(--coral); box-shadow: 0 4px 12px rgba(15, 111, 140, 0.18); }
.primary-button:hover { background: var(--coral-dark); border-color: var(--coral-dark); }
.dark-button { color: #fff; border: 1px solid #143447; background: #143447; }
.dark-button:hover { background: #0d2939; }
.outline-button, .filter-button { border: 1px solid #d6e2e8; background: #fff; }
.outline-button:hover, .filter-button:hover { border-color: #9fc1cf; background: #f3fafc; }
.primary-button:active, .dark-button:active, .outline-button:active, .filter-button:active { transform: scale(0.975); }
.mobile-menu { display: none; width: 35px; height: 35px; place-items: center; padding: 0; border: 1px solid #dfdbd2; border-radius: 9px; background: #fff; }

.dashboard-content { max-width: 1550px; margin: 0 auto; padding: 27px 32px 42px; }
.page-header { min-height: 76px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-eyebrow, .eyebrow-label { display: block; margin-bottom: 7px; color: var(--coral-dark); font-size: 9.5px; font-weight: 680; letter-spacing: 1.1px; text-transform: uppercase; }
.page-header h1 { margin: 0; font-size: clamp(25px, 2.25vw, 34px); font-weight: 620; letter-spacing: -1.35px; line-height: 1.08; }
.page-header p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.header-tools { display: flex; align-items: center; gap: 8px; padding-top: 11px; }
.team-button { height: 35px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 8px; border: 1px solid #dfdbd2; border-radius: 9px; background: #fff; cursor: pointer; }
.team-button > span:nth-child(2) { font-size: 11px; font-weight: 600; }
.avatar-stack { display: flex; padding-left: 5px; }
.avatar-stack .avatar { width: 22px; height: 22px; margin-left: -5px; border: 2px solid #fff; font-size: 6.5px; }

.stats-grid { display: grid; gap: 13px; margin-bottom: 14px; }
.stats-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card { min-height: 117px; display: flex; align-items: flex-start; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.stat-icon { width: 36px; height: 36px; display: grid; flex: 0 0 auto; place-items: center; color: #2a6379; border-radius: 10px; background: #eaf4f7; }
.stat-copy { min-width: 0; flex: 1; }
.stat-copy > p { margin: 1px 0 7px; color: var(--muted); font-size: 10.5px; }
.stat-value-row { display: flex; align-items: flex-end; gap: 8px; }
.stat-value-row strong { font-size: 23px; font-weight: 650; letter-spacing: -0.8px; line-height: 1; }
.stat-copy small { display: block; margin-top: 8px; color: #a09d95; font-size: 9.5px; }
.trend { display: inline-flex; align-items: center; gap: 2px; padding: 3px 5px; border-radius: 5px; font-size: 8.5px; font-weight: 680; }
.trend.positive { color: #438062; background: var(--green-soft); }
.trend.negative { color: #bf634f; background: var(--coral-soft); }
.tone-coral { color: #fff; border-color: var(--coral); background: var(--coral); }
.tone-coral .stat-icon { color: #fff; background: rgba(255, 255, 255, 0.17); }
.tone-coral .stat-copy > p, .tone-coral .stat-copy small { color: rgba(255, 255, 255, 0.75); }
.tone-coral .trend { color: #fff; background: rgba(255, 255, 255, 0.17); }
.tone-dark { color: #fff; border-color: #143447; background: #143447; }
.tone-dark .stat-icon { color: var(--coral); background: rgba(255, 255, 255, 0.07); }
.tone-dark .stat-copy > p, .tone-dark .stat-copy small { color: #aaa9a5; }
.tone-mint .stat-icon { color: var(--green); background: var(--green-soft); }

.content-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.coach-main-grid { grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.86fr); }
.lower-grid { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.8fr); }
.principal-grid { grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.8fr); }
.it-grid { grid-template-columns: minmax(0, 1.58fr) minmax(310px, 0.75fr); }
.sales-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.72fr); }
.finance-grid { grid-template-columns: minmax(0, 1.28fr) minmax(340px, 0.85fr); }
.class-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
.padded-panel { padding: 20px; }
.section-heading { min-height: 21px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.section-heading h2 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: -0.2px; }
.section-heading > div > span, .customer-table-panel .section-heading span { display: block; margin-top: 4px; color: var(--soft-muted); font-size: 9.5px; }
.text-button { display: inline-flex; align-items: center; gap: 3px; padding: 0; color: #77746c; border: 0; background: transparent; font-size: 9.5px; font-weight: 570; cursor: pointer; }
.text-button:hover { color: var(--coral-dark); }

.schedule-panel, .performance-panel, .enrollment-panel, .priorities-panel, .tickets-panel, .storage-panel, .revenue-panel, .target-card, .pipeline-panel, .leaderboard-panel, .cashflow-panel, .budget-panel, .transactions-panel, .class-schedule-panel { padding: 20px; }
.session-list { min-height: 205px; }
.session-row { position: relative; min-height: 68px; display: grid; grid-template-columns: 45px 34px minmax(150px, 1fr) auto 28px; align-items: center; gap: 10px; border-top: 1px solid #eeebe4; }
.session-row:first-child { border-top: 0; }
.session-time { display: flex; flex-direction: column; }
.session-time strong { font-size: 11px; }
.session-time span { margin-top: 2px; color: var(--soft-muted); font-size: 8px; }
.avatar { display: inline-grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 8px; font-style: normal; font-weight: 720; letter-spacing: 0.2px; }
.avatar-coral { color: #414aac; background: #dfe2ff; }
.avatar-blue { color: #3e6594; background: #cedcf1; }
.avatar-violet { color: #695490; background: #ded6ed; }
.avatar-green { color: #3d7659; background: #cfe8d8; }
.avatar-amber { color: #8c6429; background: #f4dfb3; }
.session-person { min-width: 0; display: flex; flex-direction: column; }
.session-person strong { font-size: 10.5px; }
.session-person span { overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.session-mode { display: flex; align-items: center; gap: 5px; padding: 5px 7px; color: #77746d; border: 1px solid #e6e2d9; border-radius: 6px; font-size: 8px; white-space: nowrap; }
.session-row .icon-button { width: 28px; height: 28px; border: 0; background: transparent; }
.live-mark { position: absolute; top: 5px; left: -3px; color: var(--coral-dark); font-size: 7px; font-weight: 730; text-transform: uppercase; }
.full-quiet-button { width: 100%; height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; color: #716e67; border: 1px dashed #d9d4ca; border-radius: 8px; background: #fcfbf8; font-size: 9.5px; font-weight: 600; cursor: pointer; }
.full-quiet-button:hover { color: var(--coral-dark); border-color: #efb4a6; background: var(--coral-soft); }

.momentum-score { display: flex; align-items: center; gap: 24px; padding: 5px 3px 18px; }
.score-ring { --score: 84%; width: 116px; height: 116px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--coral) var(--score), #efebe3 0); }
.score-ring::before { content: ""; width: 86px; height: 86px; border-radius: 50%; background: var(--white); }
.score-ring span { position: absolute; display: flex; flex-direction: column; align-items: center; }
.score-ring strong { font-size: 20px; letter-spacing: -0.7px; }
.score-ring small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.momentum-legend { min-width: 0; flex: 1; }
.momentum-legend > div { display: grid; grid-template-columns: 8px minmax(70px, 1fr) auto; align-items: center; gap: 6px; padding: 7px 0; }
.momentum-legend span { color: var(--muted); font-size: 8.5px; }
.momentum-legend strong { font-size: 9.5px; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.coral-dot { background: var(--coral); }
.amber-dot { background: var(--amber); }
.gray-dot { background: #d8d4cc; }
.insight-note { display: flex; align-items: center; gap: 8px; padding: 10px; color: #914c3d; border-radius: 8px; background: var(--coral-soft); }
.insight-note p { margin: 0; font-size: 9px; }

.program-list { display: flex; flex-direction: column; gap: 15px; }
.program-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(100px, 1.2fr) 33px; align-items: center; gap: 13px; }
.program-row > div:first-child { display: flex; flex-direction: column; }
.program-row strong { font-size: 9.5px; }
.program-row span { margin-top: 3px; color: var(--soft-muted); font-size: 8px; }
.progress-track, .mini-track, .budget-track { height: 5px; overflow: hidden; border-radius: 9px; background: #efede7; }
.progress-track i, .mini-track i, .budget-track i { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
.program-row > strong:last-child { text-align: right; }
.activity-list > div { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid #eeebe4; }
.activity-list > div:first-child { border-top: 0; padding-top: 2px; }
.activity-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; }
.coral-soft { color: #ae5845; background: var(--coral-soft); }
.blue-soft { color: #5176a9; background: #edf2fa; }
.green-soft { color: #4d8568; background: var(--green-soft); }
.activity-list p { min-width: 0; display: flex; flex-direction: column; margin: 0; }
.activity-list strong { font-size: 9px; }
.activity-list small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.activity-list time { color: var(--soft-muted); font-size: 8px; }

/* Principal */
.bar-chart { height: 180px; display: flex; align-items: flex-end; gap: 10px; padding: 12px 5px 0; border-bottom: 1px solid #e9e5dc; background: repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #f0ede6 45px); }
.bar-column { height: 100%; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.bar-column i { width: min(24px, 70%); border-radius: 5px 5px 1px 1px; background: #ddd9d1; transition: height 250ms ease; }
.bar-column i.active { background: var(--coral); }
.bar-column span { height: 15px; color: var(--soft-muted); font-size: 7.5px; }
.chart-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 17px; }
.chart-summary > div { display: flex; flex-direction: column; padding-left: 16px; border-left: 1px solid #e8e4db; }
.chart-summary > div:first-child { padding-left: 0; border-left: 0; }
.chart-summary small { color: var(--muted); font-size: 8px; }
.chart-summary strong { margin-top: 5px; font-size: 14px; }
.priority-row { position: relative; min-height: 61px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-top: 1px solid #edeae3; cursor: pointer; }
.priority-row:first-of-type { border-top: 0; }
.priority-row input { position: absolute; opacity: 0; }
.custom-check { width: 17px; height: 17px; display: grid; place-items: center; color: transparent; border: 1px solid #d7d2c8; border-radius: 5px; }
.priority-row input:checked + .custom-check { color: #fff; border-color: var(--green); background: var(--green); }
.priority-row input:checked ~ span:nth-of-type(2) { opacity: 0.55; text-decoration: line-through; }
.priority-row > span:nth-of-type(2) { display: flex; flex-direction: column; }
.priority-row strong { font-size: 9.5px; }
.priority-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.priority-row em { padding: 4px 6px; color: #756f67; border-radius: 5px; background: #f2efe9; font-size: 7px; font-style: normal; }
.department-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.department-card { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #ebe7df; border-radius: 9px; background: #fdfcf9; }
.dept-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; font-size: 7px; font-weight: 750; }
.d0 { color: #9b4e3b; background: #f9d8cf; }.d1 { color: #3e6b94; background: #dce9f4; }.d2 { color: #547454; background: #dfeeda; }.d3 { color: #745b91; background: #e8dff0; }
.department-card p { min-width: 0; flex: 1; display: flex; flex-direction: column; margin: 0; }
.department-card strong { font-size: 9px; }.department-card small { margin-top: 3px; color: var(--muted); font-size: 7.5px; }.department-card b { font-size: 10px; }
.notice-panel { position: relative; overflow: hidden; padding: 20px; background: linear-gradient(135deg, #f0eee6, #fffefa); }
.notice-art { position: absolute; top: -23px; right: -18px; width: 110px; height: 110px; display: grid; place-items: center; color: rgba(239,118,92,.5); border: 20px solid rgba(239,118,92,.06); border-radius: 50%; }
.notice-panel h3, .target-card h3, .quick-class-card h3 { position: relative; margin: 0; font-size: 16px; letter-spacing: -.4px; }.notice-panel p { position: relative; max-width: 270px; margin: 8px 0 14px; color: var(--muted); font-size: 9px; line-height: 1.55; }

/* IT */
.system-banner { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; padding: 13px 16px; color: #dff1e6; border: 1px solid #355c49; border-radius: 12px; background: #294838; }
.system-pulse { position: relative; width: 34px; height: 34px; display: grid; place-items: center; color: #8fc6a5; }
.system-pulse i { position: absolute; width: 32px; height: 32px; border: 1px solid rgba(143,198,165,.3); border-radius: 50%; }
.system-banner > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; }.system-banner strong { font-size: 11px; }.system-banner span { margin-top: 3px; color: #9ebdac; font-size: 8.5px; }.system-banner .outline-button { color: #dff1e6; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
.table-wrap { width: 100%; overflow-x: auto; }
.ticket-table { min-width: 610px; }
.table-head, .table-row { display: grid; align-items: center; gap: 12px; }
.ticket-table .table-head, .ticket-table .table-row { grid-template-columns: 68px minmax(150px, 1.4fr) minmax(100px, 1fr) 74px 30px; }
.table-head { min-height: 27px; color: #aaa69e; border-bottom: 1px solid #e9e5dc; font-size: 7px; font-weight: 650; letter-spacing: .6px; text-transform: uppercase; }
.table-row { min-height: 49px; color: #77736c; border-bottom: 1px solid #f0ede7; font-size: 8.5px; }
.table-row:last-child { border-bottom: 0; }
.table-row strong { color: #3d3c39; font-size: 8.5px; }
.primary-cell { color: #373632 !important; font-weight: 560; }
.table-row > span { display: flex; align-items: center; gap: 5px; }
.priority-dot, .status-pin, .status-dot { width: 5px; height: 5px; display: inline-block; flex: 0 0 auto; border-radius: 50%; }
.priority-dot.high { background: #df705b; }.priority-dot.medium { background: var(--amber); }.priority-dot.low { background: #6da283; }
.infrastructure-list > div:nth-of-type(odd) { display: flex; align-items: center; gap: 9px; margin-top: 12px; }.infrastructure-list > div:first-child { margin-top: 0; }
.round-icon { width: 31px; height: 31px; display: grid; place-items: center; color: #5e645e; border-radius: 9px; background: #f1efe9; }
.infrastructure-list p { display: flex; flex: 1; flex-direction: column; margin: 0; }.infrastructure-list strong { font-size: 9px; }.infrastructure-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }.infrastructure-list b { font-size: 9px; }
.infrastructure-list .mini-track { margin: 7px 0 14px 40px; height: 4px; }.infrastructure-list .mini-track i { background: #687c6d; }
.device-cards { margin-bottom: 0; }.device-card { display: flex; align-items: center; gap: 12px; padding: 15px; }.device-card > svg { color: var(--coral); }.device-card p { display: grid; flex: 1; grid-template-columns: 1fr auto; align-items: center; margin: 0; }.device-card p span, .device-card p small { grid-column: 1; }.device-card p span { color: var(--muted); font-size: 8px; }.device-card p strong { grid-row: 1/3; grid-column: 2; font-size: 18px; }.device-card p small { margin-top: 3px; color: var(--soft-muted); font-size: 7.5px; }.device-card em { padding: 4px 6px; color: var(--green); border-radius: 5px; background: var(--green-soft); font-size: 7.5px; font-style: normal; }.device-card .warning-text { color: #a7742f; background: #fbf0dc; }

/* Sales */
.chart-topline { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 7px; }.chart-topline > div { display: flex; flex-direction: column; }.chart-topline strong { font-size: 22px; letter-spacing: -.7px; }.chart-topline span:not(.trend) { margin-top: 3px; color: var(--muted); font-size: 8px; }
.revenue-chart { height: 190px; display: flex; align-items: flex-end; gap: 10px; padding-top: 12px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, #f0ede6 48px); }
.revenue-column { height: 100%; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }.revenue-column i { width: 65%; max-width: 25px; border-radius: 5px 5px 1px 1px; background: #e2ded6; }.revenue-column i.current { background: var(--coral); }.revenue-column span { height: 12px; color: var(--soft-muted); font-size: 7px; }
.target-card { display: flex; flex-direction: column; background: linear-gradient(145deg, #fffefa 55%, #fff7f3); }
.target-number { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 10px; }.target-number strong { font-size: 26px; letter-spacing: -1px; }.target-number span { color: var(--muted); font-size: 9px; }.target-track { height: 7px; overflow: hidden; border-radius: 8px; background: #eeeae3; }.target-track i { display: block; width: 86%; height: 100%; border-radius: inherit; background: var(--coral); }
.target-card > p { display: flex; gap: 7px; margin: 17px 0; padding: 10px; color: #975242; border-radius: 8px; background: var(--coral-soft); font-size: 8.5px; line-height: 1.45; }.target-card > p svg { flex: 0 0 auto; }.target-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: auto; padding-top: 14px; border-top: 1px solid #e9e5dc; }.target-stats span { display: flex; flex-direction: column; }.target-stats span + span { padding-left: 17px; border-left: 1px solid #e9e5dc; }.target-stats small { color: var(--muted); font-size: 8px; }.target-stats strong { margin-top: 4px; font-size: 13px; }
.pipeline-list > div { display: grid; grid-template-columns: 90px 35px minmax(100px, 1fr) 45px; align-items: center; gap: 9px; margin: 13px 0; }.pipeline-list span { color: var(--muted); font-size: 8.5px; }.pipeline-list strong { font-size: 9px; }.pipeline-list em { color: #66635c; font-size: 8.5px; font-style: normal; text-align: right; }.pipeline-track { height: 11px; overflow: hidden; border-radius: 4px; background: #f1eee7; }.pipeline-track i { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
.leader-row { display: flex; align-items: center; gap: 9px; min-height: 54px; border-top: 1px solid #edeae3; }.leader-row:first-of-type { border-top: 0; }.leader-row > b { width: 15px; color: #aaa69e; font-size: 9px; }.leader-row p { display: flex; flex: 1; flex-direction: column; margin: 0; }.leader-row p strong { font-size: 9px; }.leader-row p small { margin-top: 3px; color: var(--muted); font-size: 7.5px; }.leader-row em { font-size: 9px; font-style: normal; font-weight: 650; }

/* Class management */
.class-aside { display: flex; flex-direction: column; gap: 14px; }.schedule-heading { align-items: flex-start; }.schedule-heading > div:last-child { display: flex; align-items: center; gap: 10px; }.schedule-heading .filter-button { height: 30px; }
.class-table { min-width: 740px; }.class-table .table-head, .class-table .table-row { grid-template-columns: 52px minmax(150px, 1.3fr) minmax(120px, 1fr) 80px 60px 78px; }
.status-pin.in-progress { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }.status-pin.next { background: var(--coral); }.status-pin.scheduled { background: #a7a39b; }.status-pin.full { background: var(--amber); }
.occupancy-card, .quick-class-card { padding: 19px; }.occupancy-number { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 14px; }.occupancy-number strong { font-size: 26px; letter-spacing: -1px; }.occupancy-number span { color: var(--muted); font-size: 8px; }
.room-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }.room-grid i { aspect-ratio: 1; border: 1px solid #ddd9d0; border-radius: 3px; background: #f5f2ed; }.room-grid i.used { border-color: #627d6b; background: #627d6b; }.room-grid i.turning { border-color: var(--amber); background: var(--amber); }.room-legend { display: flex; gap: 13px; margin-top: 12px; color: var(--muted); font-size: 7.5px; }.room-legend span { display: flex; align-items: center; gap: 5px; }.room-legend i { width: 6px; height: 6px; border: 1px solid #ddd9d0; border-radius: 2px; background: #f5f2ed; }.room-legend i.used { border-color: #627d6b; background: #627d6b; }
.quick-class-card { position: relative; overflow: hidden; color: #fff; background: #2c2d2b; }.quick-class-card::after { content: "+"; position: absolute; right: -9px; bottom: -45px; color: rgba(239,118,92,.12); font-size: 145px; font-weight: 200; }.quick-class-card .eyebrow-label { color: var(--coral); }.quick-class-card p { max-width: 210px; margin: 8px 0 15px; color: #aaa9a4; font-size: 8.5px; line-height: 1.5; }.quick-class-card .dark-button { position: relative; z-index: 1; color: #242421; border-color: var(--coral); background: var(--coral); }

/* Customers */
.customer-toolbar, .finance-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin: -5px 0 14px; }.page-search { height: 36px; display: flex; flex: 1; align-items: center; gap: 8px; padding: 0 11px; color: #8d8981; border: 1px solid #dfdbd2; border-radius: 9px; background: #fff; }.page-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 10.5px; }.customer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 14px; }.customer-table-panel { min-width: 0; padding: 20px; }.customer-table { min-width: 640px; }.customer-table .table-head, .customer-row { display: grid; grid-template-columns: minmax(170px, 1.35fr) minmax(120px, 1fr) 72px 100px 55px; align-items: center; gap: 13px; }
.customer-row { width: 100%; min-height: 64px; padding: 0; color: #746f68; border: 0; border-bottom: 1px solid #eeeae3; background: transparent; font-size: 8.5px; text-align: left; text-decoration: none; cursor: pointer; }.customer-row:hover { background: #fbfaf7; }.customer-row.selected { background: #fff6f2; box-shadow: inset 2px 0 var(--coral); }.customer-row > strong { color: #353431; font-size: 9px; }.customer-name { display: flex; align-items: center; gap: 9px; }.customer-name > span { display: flex; flex-direction: column; }.customer-name strong { color: #33322f; font-size: 9.5px; }.customer-name small { margin-top: 3px; color: var(--soft-muted); font-size: 7.5px; }.status-dot.active, .status-dot.paid, .status-dot.processed { background: var(--green); }.status-dot.pending { background: var(--amber); }.customer-progress { display: flex; align-items: center; gap: 7px; }.customer-progress > i { width: 48px; height: 4px; overflow: hidden; border-radius: 6px; background: #eeeae3; }.customer-progress b { display: block; height: 100%; border-radius: inherit; background: var(--coral); }.customer-progress em { font-size: 7.5px; font-style: normal; }
.profile-card { padding: 19px; }.profile-top { display: flex; align-items: flex-start; justify-content: space-between; }.profile-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; font-size: 12px; font-weight: 750; }.profile-top .icon-button { border: 0; background: transparent; }.profile-card h2 { margin: 13px 0 0; font-size: 17px; letter-spacing: -.5px; }.profile-card > p { margin: 4px 0 10px; color: var(--muted); font-size: 8.5px; }.profile-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: var(--green); border-radius: 6px; background: var(--green-soft); font-size: 7.5px; font-weight: 620; }.profile-status.pending { color: #9f702a; background: #fbf0dc; }.profile-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.profile-contact { margin: 17px 0; padding: 12px 0; border-top: 1px solid #eae6de; border-bottom: 1px solid #eae6de; }.profile-contact a, .profile-contact > div { display: flex; align-items: center; gap: 9px; padding: 7px 0; color: #65625c; text-decoration: none; }.profile-contact svg { color: #99958d; }.profile-contact span { min-width: 0; display: flex; flex-direction: column; font-size: 8px; }.profile-contact small { margin-bottom: 2px; color: #aaa69e; font-size: 7px; text-transform: uppercase; }
.profile-metrics { display: grid; grid-template-columns: repeat(2, 1fr); }.profile-metrics > div { display: flex; flex-direction: column; }.profile-metrics > div + div { padding-left: 13px; border-left: 1px solid #eae6de; }.profile-metrics small { color: var(--muted); font-size: 7.5px; }.profile-metrics strong { margin-top: 5px; font-size: 14px; }.profile-actions { display: flex; gap: 7px; margin-top: 18px; }.profile-actions button { flex: 1; padding: 0 8px; font-size: 8.5px; }.empty-state { height: 220px; display: none; flex-direction: column; align-items: center; justify-content: center; color: var(--soft-muted); }.empty-state.visible { display: flex; }.empty-state strong { margin-top: 10px; color: var(--ink); }.empty-state span { margin-top: 4px; font-size: 9px; }

/* Shared smart-table controls */
.dashboard-smart-toolbar { margin: -5px 0 14px; overflow: hidden; border: 1px solid #e1e4ec; border-radius: 13px; background: #fff; box-shadow: 0 5px 16px rgba(36, 42, 68, .035); }
.dashboard-smart-summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 15px; border-bottom: 1px solid #e8eaf0; background: #fafbfe; }
.dashboard-filter-chip { min-height: 36px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; color: #626b7f; border: 1px solid #dfe2ea; border-radius: 999px; background: #fff; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; }
.dashboard-filter-chip b { min-width: 21px; padding: 3px 6px; color: #6f778a; border-radius: 999px; background: #f1f2f6; font-size: 9px; text-align: center; }
.dashboard-filter-chip:hover { color: #4651bf; border-color: #aeb4d9; }
.dashboard-filter-chip.is-active { color: #fff; border-color: #5662d5; background: #5662d5; box-shadow: 0 5px 14px rgba(86, 98, 213, .18); }
.dashboard-filter-chip.is-active b { color: #4651bf; background: #fff; }
.dashboard-smart-controls { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(135px, 180px) minmax(145px, 195px) minmax(132px, 150px); align-items: end; gap: 10px; padding: 13px 15px 15px; }
.dashboard-smart-controls label { min-width: 0; }
.dashboard-smart-controls label > span:not(.sr-only) { display: block; margin-bottom: 5px; color: #8b92a3; font-size: 8px; font-weight: 750; letter-spacing: .5px; text-transform: uppercase; }
.dashboard-smart-controls input, .dashboard-smart-controls select { width: 100%; min-height: 40px; padding: 9px 11px; color: #30384b; border: 1px solid #dfe2ea; border-radius: 9px; outline: 0; background: #fff; font: inherit; font-size: 10px; }
.dashboard-smart-controls input:focus, .dashboard-smart-controls select:focus { border-color: #7981dd; box-shadow: 0 0 0 3px rgba(91, 101, 216, .12); }
.dashboard-smart-search { position: relative; align-self: end; }
.dashboard-smart-search svg { position: absolute; bottom: 12px; left: 12px; color: #8890a1; pointer-events: none; }
.dashboard-smart-search input { padding-left: 37px; }
.smart-date-range { min-width: 0; display: grid; grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 9px; padding: 9px 10px 10px; border: 1px solid #dfe2ea; border-radius: 10px; background: linear-gradient(135deg, #fafbff, #f5f7ff); }
.smart-date-range > span { grid-column: 1 / -1; color: #5966c8; font-size: 8px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.smart-date-range label { min-width: 0; }
.smart-date-range label > span { display: block; margin-bottom: 4px; color: #8991a2; font-size: 7px; font-weight: 750; letter-spacing: .45px; text-transform: uppercase; }
.smart-date-range input { width: 100%; min-height: 34px; padding: 7px 8px; color: #30384b; border: 1px solid #dfe2ea; border-radius: 7px; background: #fff; font: inherit; font-size: 10px; }
.smart-date-range input:focus { outline: 2px solid rgba(91, 101, 216, .12); border-color: #7981dd; }
.smart-export-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; color: #fff; border: 1px solid #4f5dce; border-radius: 9px; background: #5966d8; box-shadow: 0 6px 14px rgba(89, 102, 216, .16); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, transform 150ms ease; }
.smart-export-button:hover { border-color: #414db7; background: #4d59ca; }
.smart-export-button:active { transform: translateY(1px); }
.smart-export-button:focus-visible { outline: 3px solid rgba(89, 102, 216, .22); outline-offset: 2px; }
.smart-export-button svg { flex: 0 0 auto; }
.dashboard-smart-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; color: #81889a; border-top: 1px solid #eceef3; font-size: 8.5px; }
.dashboard-smart-footer b { color: #4550b7; }
.dashboard-smart-footer [hidden] { display: none; }
.customer-smart-toolbar + .customer-layout { margin-top: 0; }
.customer-smart-toolbar .dashboard-smart-controls { grid-template-columns: minmax(190px, 1fr) minmax(120px, 150px) minmax(125px, 170px) minmax(132px, 145px); }
.staff-smart-summary { margin-top: 10px; padding: 11px 0; border-top: 1px solid #eceef3; background: transparent; }
.staff-smart-controls { padding: 12px 0; border-bottom: 1px solid #eceef3; }
.staff-list-panel .dashboard-smart-footer { padding-bottom: 2px; }

/* Finance */
.finance-toolbar { margin-top: -58px; margin-bottom: 27px; }.period-picker { height: 35px; display: flex; align-items: center; gap: 8px; padding: 0 11px; color: #6b6861; border: 1px solid #dfdbd2; border-radius: 9px; background: #fff; font-size: 9px; }.cashflow-legend { display: flex; justify-content: flex-end; gap: 13px; margin-top: -8px; }.cashflow-legend span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 7.5px; }.cashflow-legend i { width: 7px; height: 7px; border-radius: 2px; }.cashflow-legend .income { background: var(--coral); }.cashflow-legend .expense { background: #d8d4cb; }
.cashflow-chart { height: 200px; display: flex; align-items: flex-end; gap: 13px; padding-top: 10px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 48px, #efede7 49px); }.cashflow-group { height: 100%; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }.cashflow-group > span { width: 100%; height: calc(100% - 15px); display: flex; align-items: flex-end; justify-content: center; gap: 3px; }.cashflow-group i { width: 24%; max-width: 17px; border-radius: 4px 4px 1px 1px; }.income-bar { background: var(--coral); }.expense-bar { background: #d8d4cb; }.cashflow-group small { height: 9px; color: var(--soft-muted); font-size: 7px; }
.budget-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 1fr) 30px; align-items: center; gap: 10px; margin: 17px 0; }.budget-row > div:first-child { display: flex; flex-direction: column; }.budget-row strong { font-size: 8.5px; }.budget-row span { margin-top: 3px; color: var(--muted); font-size: 7.5px; }.budget-row em { font-size: 8px; font-style: normal; text-align: right; }.budget-track i { background: #687c6d; }.budget-track i.near { background: var(--amber); }
.transactions-panel { margin-bottom: 0; }.transaction-table { min-width: 730px; }.transaction-table .table-head, .transaction-table .table-row { grid-template-columns: 65px 75px minmax(110px, 1.1fr) minmax(130px, 1.35fr) 75px 70px; }.amount-positive { color: var(--green) !important; }

/* IT staff user management */
.staff-users-section { container-name: staff-manager; container-type: inline-size; margin: 25px 0; scroll-margin-top: 88px; }
.staff-users-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.staff-users-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.45px; }
.staff-users-heading p { max-width: 660px; margin: 6px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.55; }
.staff-count { flex: 0 0 auto; padding: 6px 9px; color: #4d568f; border-radius: 7px; background: #edf0ff; font-size: 8.5px; font-weight: 700; }
.staff-notice { margin-bottom: 14px; padding: 11px 13px; color: #347158; border: 1px solid #c8e5d7; border-radius: 9px; background: #f0faf5; font-size: 10px; }
.staff-notice.is-error { color: #9b4437; border-color: #efc5bd; background: #fff3f0; }
.staff-users-layout { display: grid; grid-template-columns: minmax(320px, 360px) minmax(0, 1fr); align-items: start; gap: 14px; }
.staff-create-panel, .staff-list-panel { min-width: 0; }
.staff-create-form { display: grid; gap: 12px; }
.staff-create-form label, .staff-edit-form label { min-width: 0; display: grid; gap: 6px; }
.staff-create-form label > span, .staff-edit-form label > span { color: #575b68; font-size: 8.5px; font-weight: 680; }
.staff-create-form label small, .staff-edit-form label small { color: var(--soft-muted); font-size: 7px; font-weight: 500; }
.staff-create-form input, .staff-create-form select, .staff-edit-form input, .staff-edit-form select { width: 100%; height: 39px; padding: 0 10px; color: var(--ink); border: 1px solid #dedfe6; border-radius: 8px; outline: 0; background: #fbfcff; font-size: 10px; }
.staff-create-form input:focus, .staff-create-form select:focus, .staff-edit-form input:focus, .staff-edit-form select:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(91,101,216,.1); background: #fff; }
.staff-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.password-guidance { margin: -2px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.staff-create-button { width: 100%; height: 40px; }
.staff-edit-hint { color: var(--soft-muted); font-size: 8px; }
.staff-table { min-width: 0; }
.staff-table-head, .staff-table-row { display: grid; grid-template-columns: minmax(160px, 1.35fr) minmax(96px, .8fr) 68px minmax(86px, .75fr) 74px; align-items: center; gap: 10px; }
.staff-table-head { min-height: 28px; color: #aaa69e; border-bottom: 1px solid #e9e5dc; font-size: 7px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
.staff-account { border-bottom: 1px solid #eeeae3; }
.staff-account:last-child { border-bottom: 0; }
.staff-account > summary { list-style: none; }
.staff-account > summary::-webkit-details-marker { display: none; }
.staff-table-row { min-height: 58px; color: #6c6b67; font-size: 8.5px; cursor: pointer; transition: background 150ms ease; }
.staff-table-row:hover, .staff-account[open] > .staff-table-row { background: #f8f9ff; }
.staff-table-row > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.staff-table-row strong { overflow: hidden; color: #353431; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.staff-table-row small { overflow: hidden; color: var(--soft-muted); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.account-status { width: max-content; padding: 4px 7px; border-radius: 6px; font-size: 7.5px; font-weight: 700; }
.account-status.is-active { color: var(--green); background: var(--green-soft); }
.account-status.is-disabled { color: #8d6258; background: #f7e7e2; }
.staff-edit-toggle { display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: #5b65d8; font-size: 8px; font-weight: 700; }
.staff-edit-toggle > i:last-child { transition: transform 160ms ease; }
.staff-account[open] .staff-edit-toggle > i:last-child { transform: rotate(180deg); }
.staff-edit-shell { padding: 0 0 14px; }
.staff-edit-form { padding: 16px; border: 1px solid #dfe2f4; border-radius: 12px; background: #fafbff; box-shadow: inset 3px 0 #5b65d8; }
.staff-edit-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.staff-edit-heading > div { display: flex; flex-direction: column; gap: 4px; }
.staff-edit-heading strong { color: var(--ink); font-size: 10.5px; }
.staff-edit-heading small { color: var(--muted); font-size: 8px; }
.staff-edit-heading > span { flex: 0 0 auto; padding: 5px 7px; color: #545da9; border-radius: 6px; background: #edf0ff; font-size: 7.5px; font-weight: 700; }
.staff-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.staff-permissions { min-width: 0; margin: 15px 0 0; padding: 13px; border: 1px solid #dedfe9; border-radius: 10px; background: #fff; }
.staff-permissions legend { padding: 0 5px; color: #4f5361; font-size: 9px; font-weight: 750; }
.staff-permissions > p { margin: 0 0 10px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.staff-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.staff-edit-form .staff-permission-option { min-height: 35px; display: flex; grid-template-columns: none; flex-direction: row; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #e4e5ec; border-radius: 8px; background: #fbfcff; cursor: pointer; }
.staff-edit-form .staff-permission-option:has(input:checked) { color: #4d56a7; border-color: #cbd0fb; background: #f0f2ff; }
.staff-edit-form .staff-permission-option input { width: 15px; height: 15px; flex: 0 0 auto; padding: 0; accent-color: #5b65d8; }
.staff-edit-form .staff-permission-option > span { color: inherit; font-size: 8px; font-weight: 650; }
.staff-edit-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.staff-edit-actions p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.staff-edit-action-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.staff-edit-actions .primary-button, .staff-edit-actions .danger-button { min-width: 132px; }
.danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 31px; padding: 8px 12px; color: #9b3d38; border: 1px solid #e8c6c1; border-radius: 8px; background: #fff7f5; font-size: 8px; font-weight: 750; cursor: pointer; }
.danger-button:hover { background: #fdecea; border-color: #dca39c; }

@container staff-manager (max-width: 1080px) {
  .staff-users-layout { grid-template-columns: 1fr; }
  .staff-create-panel { max-width: none; }
}

@container staff-manager (max-width: 720px) {
  .staff-table-head { display: none; }
  .staff-account { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .staff-account:first-of-type { margin-top: 0; }
  .staff-table-row { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; padding: 14px; }
  .staff-table-row > div:first-child { grid-column: 1 / -1; }
  .staff-table-row strong, .staff-table-row small { white-space: normal; overflow-wrap: anywhere; }
  .staff-edit-toggle { justify-content: flex-start; }
  .staff-edit-shell { padding: 0 10px 10px; }
  .staff-edit-form { padding: 14px; }
}

@container staff-manager (min-width: 721px) and (max-width: 780px) {
  .staff-smart-controls { grid-template-columns: minmax(0, 1fr) minmax(140px, .6fr); }
  .staff-smart-controls .smart-export-button { grid-column: 1 / -1; width: 100%; }
}

@container staff-manager (max-width: 520px) {
  .staff-users-heading { align-items: flex-start; }
  .staff-form-row, .staff-edit-grid, .staff-permission-grid { grid-template-columns: 1fr; }
  .staff-list-panel { padding: 14px; }
  .staff-edit-heading, .staff-edit-actions { align-items: stretch; flex-direction: column; }
  .staff-edit-heading > span { width: max-content; }
  .staff-edit-action-buttons, .staff-edit-actions .primary-button, .staff-edit-actions .danger-button { width: 100%; }
  .staff-edit-action-buttons { align-items: stretch; flex-direction: column; }
}

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; visibility: hidden; align-items: center; gap: 9px; padding: 11px 15px; color: #fff; border-radius: 10px; opacity: 0; background: #2b2c2a; box-shadow: 0 12px 35px rgba(0,0,0,.18); font-size: 10.5px; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; }.toast.visible { visibility: visible; opacity: 1; transform: translateY(0); }.toast span { width: 23px; height: 23px; display: grid; place-items: center; color: #28352e; border-radius: 50%; background: #97c4a8; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }
.sidebar-scrim { display: none; }

@media (max-width: 1180px) {
  .sidebar { width: 226px; }
  .main-content { margin-left: 226px; }
  .dashboard-content, .topbar { padding-left: 23px; padding-right: 23px; }
  .stats-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-main-grid, .principal-grid, .it-grid, .sales-grid, .finance-grid { grid-template-columns: minmax(0, 1.4fr) minmax(270px, .8fr); }
  .customer-layout { grid-template-columns: minmax(0, 1fr) 265px; }
  .customer-smart-toolbar .dashboard-smart-controls { grid-template-columns: minmax(190px, 1fr) minmax(140px, .5fr); }
  .customer-smart-toolbar .smart-date-range,
  .customer-smart-toolbar .smart-export-button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 900px) {
  .sidebar { width: min(290px, 86vw); transform: translateX(-100%); transition: transform 220ms ease; box-shadow: 20px 0 60px rgba(0,0,0,.2); }
  .brand-logo { width: 150px; height: 64px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim.visible { position: fixed; inset: 0; z-index: 25; display: block; border: 0; background: rgba(25,25,24,.42); backdrop-filter: blur(2px); }
  body.menu-open { overflow: hidden; }
  .mobile-close, .mobile-menu { display: grid; }
  .main-content { margin-left: 0; }
  .topbar { position: sticky; top: 0; z-index: 20; padding-left: 18px; padding-right: 18px; }
  .global-search { margin-right: auto; }
  .dashboard-content { padding: 23px 18px 35px; }
  .coach-main-grid, .principal-grid, .it-grid, .sales-grid, .finance-grid, .class-layout, .customer-layout, .lower-grid, .staff-users-layout { grid-template-columns: 1fr; }
  .performance-panel, .storage-panel, .target-card, .profile-card { min-height: auto; }
  .class-aside { display: grid; grid-template-columns: repeat(2, 1fr); }
  .finance-toolbar { margin-top: -5px; margin-bottom: 14px; justify-content: flex-start; }
}

@media (max-width: 620px) {
  .topbar { gap: 9px; }
  .global-search { width: auto; flex: 1; }
  .global-search kbd { display: none; }
  .top-actions .primary-button span { display: none; }
  .top-actions .primary-button { width: 35px; padding: 0; }
  .page-header { align-items: flex-start; }
  .header-tools { display: none; }
  .page-header h1 { font-size: 25px; }
  .stats-grid.four, .stats-grid.three { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 105px; padding: 14px; }
  .stat-value-row strong { font-size: 20px; }
  .stat-icon { width: 32px; height: 32px; }
  .session-row { grid-template-columns: 42px 32px minmax(110px, 1fr) 28px; }
  .session-mode { display: none; }
  .lower-grid { grid-template-columns: 1fr; }
  .momentum-score { justify-content: center; }
  .department-grid { grid-template-columns: 1fr; }
  .device-cards { grid-template-columns: 1fr !important; }
  .class-aside { grid-template-columns: 1fr; }
  .customer-toolbar { flex-wrap: wrap; }
  .customer-toolbar .page-search { flex-basis: 100%; }
  .customer-toolbar .filter-button, .customer-toolbar .primary-button { flex: 1; min-width: 0; }
  .finance-toolbar { flex-wrap: wrap; }
  .padded-panel, .schedule-panel, .performance-panel, .enrollment-panel, .priorities-panel, .tickets-panel, .storage-panel, .revenue-panel, .target-card, .pipeline-panel, .leaderboard-panel, .cashflow-panel, .budget-panel, .transactions-panel, .class-schedule-panel, .customer-table-panel { padding: 16px; }
  .page-header { min-height: 0; margin-bottom: 19px; }
  .page-header p { max-width: 46rem; line-height: 1.5; }
  .section-heading, .schedule-heading, .schedule-heading > div:last-child { flex-wrap: wrap; }
  .system-banner { flex-wrap: wrap; }
  .system-banner .outline-button { width: 100%; }
  .table-wrap { scrollbar-width: thin; }
  .ticket-table, .class-table, .customer-table, .transaction-table { min-width: 0; overflow: visible; }
  .ticket-table .table-head, .class-table .table-head, .customer-table .table-head, .transaction-table .table-head { display: none; }
  .ticket-table .table-row, .class-table .table-row, .transaction-table .table-row, .customer-row {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 16px;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }
  .ticket-table .table-row:first-of-type, .class-table .table-row:first-of-type, .transaction-table .table-row:first-of-type, .customer-row:first-of-type { margin-top: 0; }
  .ticket-table .table-row > *, .class-table .table-row > *, .transaction-table .table-row > *, .customer-row > * { min-width: 0; }
  [data-label] { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 7px; overflow-wrap: anywhere; }
  [data-label]::before { content: attr(data-label); width: 100%; color: var(--soft-muted); font-size: 7px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
  .ticket-table .primary-cell, .class-table .primary-cell, .transaction-table .primary-cell { grid-column: 1 / -1; }
  .customer-row { width: 100%; color: #746f68; }
  .customer-row.selected { border-color: #cfd3fb; background: #f7f8ff; box-shadow: inset 3px 0 var(--coral); }
  .customer-row .customer-name { grid-column: 1 / -1; }
  .customer-progress > i { width: min(74px, 100%); }
  .profile-contact span { overflow-wrap: anywhere; }
  .dashboard-smart-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .dashboard-smart-controls { grid-template-columns: 1fr; padding: 12px; }
  .dashboard-filter-chip, .dashboard-smart-controls input, .dashboard-smart-controls select, .smart-date-range input, .smart-export-button { min-height: 44px; }
  .smart-date-range { grid-column: auto; }
  .dashboard-smart-search { align-self: auto; }
  .dashboard-smart-footer { align-items: flex-start; flex-direction: column; }
  .staff-smart-summary { padding: 11px 0; }
  .staff-smart-controls { padding: 12px 0; }
}

@media (max-width: 720px) {
  .smart-export-button { min-height: 44px; }
}

@media (max-width: 480px) {
  .topbar { height: auto; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .mobile-menu { order: 1; }
  .top-actions { order: 2; margin-left: auto; }
  .global-search { order: 3; flex: 1 0 100%; width: 100%; }
  .dashboard-content { padding-top: 19px; }
  .bar-chart, .revenue-chart { gap: 5px; }
  .cashflow-chart { gap: 7px; }
  .pipeline-list > div { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .pipeline-list .pipeline-track { grid-column: 1 / -1; grid-row: 2; }
  .pipeline-list em { grid-column: 2; grid-row: 1; }
  .finance-toolbar > * { width: 100%; justify-content: center; }
  .profile-actions { flex-direction: column; }
  .profile-actions button { width: 100%; }
  .toast { right: 13px; bottom: 13px; left: 13px; }
}

@media (max-width: 420px) {
  .dashboard-content { padding-left: 13px; padding-right: 13px; }
  .topbar { padding-left: 13px; padding-right: 13px; }
  .stats-grid.four, .stats-grid.three { grid-template-columns: 1fr; }
  .stat-card { min-height: 96px; }
  .smart-date-range { grid-template-columns: 1fr; }
  .momentum-score { align-items: flex-start; gap: 14px; }
  .score-ring { width: 96px; height: 96px; }.score-ring::before { width: 70px; height: 70px; }
  .program-row { grid-template-columns: minmax(100px, 1fr) 80px 30px; }
  .chart-summary > div { padding-left: 10px; }
}

@media (hover: none) and (pointer: coarse) {
  .icon-button, .mobile-menu, .mobile-close { min-width: 44px; min-height: 44px; }
  .primary-button, .dark-button, .outline-button, .filter-button, .full-quiet-button, .team-button { min-height: 44px; }
  .sidebar nav a { min-height: 44px; }
  .dashboard-filter-chip, .dashboard-smart-controls input, .dashboard-smart-controls select { min-height: 44px; }
}

.auth-body .auth-submit { height: 46px; }

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

/* Live-data dashboard cleanup */
.sidebar .user-card { margin-top: auto; }
.topbar.mobile-topbar { display: none; }
.mobile-topbar strong { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.customer-table { min-width: 500px; }
.customer-table .table-head,
.customer-row { grid-template-columns: minmax(190px, 1.35fr) minmax(150px, 1fr) 90px; }
.workspace-empty { min-height: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 34px; text-align: center; }
.workspace-empty-icon { width: 58px; height: 58px; display: grid; place-items: center; color: var(--coral-dark); border-radius: 18px; background: var(--coral-soft); }
.workspace-empty h2 { margin: 18px 0 0; font-size: 18px; letter-spacing: -.4px; }
.workspace-empty p { max-width: 560px; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

@media (max-width: 900px) {
  .topbar.mobile-topbar { display: flex; justify-content: flex-start; }
}

@media (max-width: 620px) {
  .customer-table { min-width: 0; }
  .customer-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-empty { min-height: 230px; padding: 25px 18px; }
}

/* Compatible role accents: each dashboard gets its own color without changing its data or permissions. */
body { --role-accent: #0f6f8c; --role-accent-dark: #095c76; --role-accent-soft: #e6f3f7; --role-highlight: #65c6dc; --role-active-bg: rgba(15, 111, 140, 0.18); --role-active-outline: rgba(101, 198, 220, 0.13); --role-support-bg: rgba(15, 111, 140, 0.15); --role-border: #c7e0e7; --role-focus-ring: rgba(15, 111, 140, 0.13); --coral: var(--role-accent); --coral-dark: var(--role-accent-dark); --coral-soft: var(--role-accent-soft); }
body.dashboard-view-coach { --role-accent: #078990; --role-accent-dark: #056f76; --role-accent-soft: #e5f7f7; --role-highlight: #68ddd7; --role-active-bg: rgba(7, 137, 144, 0.18); --role-active-outline: rgba(104, 221, 215, 0.14); --role-support-bg: rgba(7, 137, 144, 0.14); --role-border: #b9e4e2; --role-focus-ring: rgba(7, 137, 144, 0.13); }
body.dashboard-view-principal { --role-accent: #5d4ac7; --role-accent-dark: #4636a9; --role-accent-soft: #f0eeff; --role-highlight: #b8adff; --role-active-bg: rgba(93, 74, 199, 0.18); --role-active-outline: rgba(184, 173, 255, 0.14); --role-support-bg: rgba(93, 74, 199, 0.14); --role-border: #d5cff8; --role-focus-ring: rgba(93, 74, 199, 0.13); }
body.dashboard-view-it { --role-accent: #1d73c6; --role-accent-dark: #155ba5; --role-accent-soft: #eaf3ff; --role-highlight: #82bfff; --role-active-bg: rgba(29, 115, 198, 0.18); --role-active-outline: rgba(130, 191, 255, 0.14); --role-support-bg: rgba(29, 115, 198, 0.14); --role-border: #c3dcf7; --role-focus-ring: rgba(29, 115, 198, 0.13); }
body.dashboard-view-sales { --role-accent: #0969da; --role-accent-dark: #0758b6; --role-accent-soft: #eaf3ff; --role-highlight: #75b6ff; --role-active-bg: rgba(9, 105, 218, 0.18); --role-active-outline: rgba(117, 182, 255, 0.14); --role-support-bg: rgba(9, 105, 218, 0.14); --role-border: #bfdafb; --role-focus-ring: rgba(9, 105, 218, 0.13); }
body.dashboard-view-finance { --role-accent: #088862; --role-accent-dark: #056d4f; --role-accent-soft: #e8f7f0; --role-highlight: #70d1a8; --role-active-bg: rgba(8, 136, 98, 0.18); --role-active-outline: rgba(112, 209, 168, 0.14); --role-support-bg: rgba(8, 136, 98, 0.14); --role-border: #bce6d4; --role-focus-ring: rgba(8, 136, 98, 0.13); }
body.dashboard-view-customers { --role-accent: #347ab9; --role-accent-dark: #255f94; --role-accent-soft: #eaf4fb; --role-highlight: #85c0ed; --role-active-bg: rgba(52, 122, 185, 0.18); --role-active-outline: rgba(133, 192, 237, 0.14); --role-support-bg: rgba(52, 122, 185, 0.14); --role-border: #c5dff1; --role-focus-ring: rgba(52, 122, 185, 0.13); }
.sidebar nav a.active { background: var(--role-active-bg); box-shadow: inset 3px 0 0 var(--coral), inset 0 0 0 1px var(--role-active-outline); }
.sidebar nav a .active-dot { background: var(--role-highlight); box-shadow: 0 0 0 4px var(--role-active-outline); }
.sidebar-support > span { color: var(--role-highlight); background: var(--role-support-bg); }
.nav-label { color: #7b9bab; }
.topbar, .panel { border-color: #dce7ec; }
.page-eyebrow, .eyebrow-label { color: var(--coral-dark); }
.dashboard-smart-toolbar { border-color: #d7e5eb; box-shadow: 0 7px 20px rgba(18, 67, 88, 0.055); }
.dashboard-smart-summary { border-color: #e1ebef; background: #f8fbfc; }
.dashboard-filter-chip { color: #536c7a; border-color: #d5e3e8; background: #fff; }
.dashboard-filter-chip b { color: #4c7180; background: #eaf3f6; }
.dashboard-filter-chip:hover { color: var(--coral-dark); border-color: #91becd; background: #f6fbfc; }
.dashboard-filter-chip.is-active { border-color: var(--coral); background: var(--coral); box-shadow: 0 6px 16px rgba(15, 111, 140, 0.19); }
.dashboard-filter-chip.is-active b { color: var(--coral-dark); }
.dashboard-smart-controls { border-color: #e1ebef; background: linear-gradient(180deg, #ffffff, #fbfdfe); }
.dashboard-smart-controls label > span:not(.sr-only), .smart-date-range label > span { color: #718896; }
.dashboard-smart-controls input, .dashboard-smart-controls select, .smart-date-range input { color: #264151; border-color: #d5e3e8; background: #fff; }
.dashboard-smart-controls input:focus, .dashboard-smart-controls select:focus, .smart-date-range input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--role-focus-ring); }
.smart-date-range { border-color: var(--role-border); background: linear-gradient(135deg, #f6fbfc, var(--role-accent-soft)); }
.smart-date-range > span { color: var(--coral-dark); }
.smart-export-button { border-color: var(--coral-dark); background: var(--coral); box-shadow: 0 6px 15px rgba(15, 111, 140, 0.19); }
.smart-export-button:hover { border-color: #074c62; background: var(--coral-dark); }
.dashboard-smart-footer { border-color: #e3ecef; color: #6f8490; }
.dashboard-smart-footer b { color: var(--coral-dark); }
.customer-row:hover, .staff-table-row:hover, .staff-account[open] > .staff-table-row { background: #f5fafb; }
.customer-row.selected { background: var(--role-accent-soft); box-shadow: inset 3px 0 var(--coral); }
.staff-edit-form { border-color: var(--role-border); background: #f7fbfc; box-shadow: inset 3px 0 var(--coral); }
.avatar-coral { color: #075a73; background: #d8f0f5; }
.avatar-blue { color: #2d6397; background: #dceafa; }
.avatar-violet { color: #555f9d; background: #e5e6f7; }
.avatar-green { color: #2b6d59; background: #dcf0e8; }
.avatar-amber { color: #8a5c1f; background: #f9e7c6; }