/* One look per component across team hq. Loaded last, and scoped through #main / #drawer so these beat
   every older page rule without !important. Charts, the calendar grid, happiness colors and the sidebar keep
   their own look on purpose. */

/* tokens */
body.balanced-blue.minimal-calm{--r-frame:18px;--r-drawer:16px;--r-card:14px;--r-control:10px;--r-item:10px;--r-seg:8px;--r-badge:6px;
  --tone-green:#1f8a5b;--tone-amber:#b7791f;--tone-red:#c2413b;--tone-blue:#2f6fcf;--tone-violet:#6d5bd0}
body.balanced-blue.minimal-calm.theme-dark{--tone-green:#4cc38a;--tone-amber:#e3a94f;--tone-red:#f0827a;--tone-blue:#72a7ff;--tone-violet:#a99bf6}

/* page frame: four rounded corners, inset from the window like the sidebar */
body.balanced-blue.minimal-calm .workspace{border:1px solid var(--line);border-radius:var(--r-frame);box-shadow:0 1px 3px rgb(0 0 0 / 3%)}
body.balanced-blue.minimal-calm.theme-dark .workspace{box-shadow:none}
@media (min-width:851px){body.balanced-blue.minimal-calm .workspace{margin:0;overflow:hidden}}
@media (max-width:850px){body.balanced-blue.minimal-calm .workspace{border-radius:var(--r-card)}}

/* tab switchers and segmented controls: one gray pill group everywhere */
body.balanced-blue.minimal-calm :is(#main,#drawer,.topbar) :is(.page-tabs,.seg,.segmented,.mkt-switch,.ho-segment,.ho-payment-tabs,.hq-closer-chart-modes,.dl-status-tabs,.ful-inbox-filters,.mkt-purpose-tabs,.calls-filters,.sx-crm-views){display:inline-flex;flex-wrap:nowrap;align-items:center;gap:4px;width:max-content;max-width:100%;justify-self:start;align-self:start;padding:4px;overflow-x:auto;scrollbar-width:none;background:var(--control-tray);border:1px solid var(--line);border-radius:11px;box-shadow:none}
body.balanced-blue.minimal-calm :is(#main,#drawer,.topbar) :is(.page-tabs,.seg,.segmented,.mkt-switch,.ho-segment,.ho-payment-tabs,.hq-closer-chart-modes,.dl-status-tabs,.ful-inbox-filters,.mkt-purpose-tabs,.calls-filters,.sx-crm-views) :is(button,[role=tab]){position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;width:auto;min-height:30px;height:auto;padding:5px 11px;border:1px solid transparent;border-radius:var(--r-seg);background:transparent;box-shadow:none;outline-offset:1px;color:var(--secondary);font:inherit;font-size:14px;font-weight:400;line-height:18px;white-space:nowrap}
body.balanced-blue.minimal-calm :is(#main,#drawer,.topbar) :is(.page-tabs,.seg,.segmented,.mkt-switch,.ho-segment,.ho-payment-tabs,.hq-closer-chart-modes,.dl-status-tabs,.ful-inbox-filters,.mkt-purpose-tabs,.calls-filters,.sx-crm-views) :is(button,[role=tab]):hover{background:transparent;color:var(--ink)}
body.balanced-blue.minimal-calm :is(#main,#drawer,.topbar) :is(.page-tabs,.seg,.segmented,.mkt-switch,.ho-segment,.ho-payment-tabs,.hq-closer-chart-modes,.dl-status-tabs,.ful-inbox-filters,.mkt-purpose-tabs,.calls-filters,.sx-crm-views) :is(button,[role=tab]):is(.active,.selected,[aria-pressed=true],[aria-selected=true]){background:var(--surface);border-color:var(--control-border);box-shadow:var(--control-shadow);color:var(--ink);font-weight:400}
body.balanced-blue.minimal-calm :is(#main,#drawer,.topbar) :is(.page-tabs,.seg,.segmented,.mkt-switch,.ho-segment,.ho-payment-tabs,.hq-closer-chart-modes,.dl-status-tabs,.ful-inbox-filters,.mkt-purpose-tabs,.calls-filters,.sx-crm-views) button::after{content:none}
body.balanced-blue.minimal-calm :is(#main,#drawer,.topbar) :is(.page-tabs,.seg,.segmented,.mkt-switch,.ho-segment,.ho-payment-tabs,.hq-closer-chart-modes,.dl-status-tabs,.ful-inbox-filters,.mkt-purpose-tabs,.calls-filters,.sx-crm-views) [class*=count]{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;border:0;border-radius:5px;background:var(--surface);box-shadow:none;color:var(--secondary);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
body.balanced-blue.minimal-calm :is(#main,#drawer,.topbar) :is(.page-tabs,.seg,.segmented,.mkt-switch,.ho-segment,.ho-payment-tabs,.hq-closer-chart-modes,.dl-status-tabs,.ful-inbox-filters,.mkt-purpose-tabs,.calls-filters,.sx-crm-views) :is(.active,[aria-pressed=true],[aria-selected=true]) [class*=count]{background:var(--soft);color:var(--ink)}
body.balanced-blue.minimal-calm :is(#main,#drawer) .mkt-switch button:has(>svg:only-child){width:30px;padding:0}
body.balanced-blue.minimal-calm #main .sx-crm-views{margin:14px 18px}

/* cards */
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.panel,.sx-side,.ful-aside,.ful-ticket,.team-simple-list,.ful-roster,.sx-crm,.cl-card,.minimal-closer-card,.closer-ideas,.sx-payment-card,.dl-rail,.dl-fresh,.mkt-daily,.usage-account,.ho-section,.cs-roster-summary,.cs-detail-card,.calls-queue,.ful-inbox,.mkt-reference-panel){background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--cc-panel-shadow)}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.panelhead,.cl-card-head,.ho-section>header,.dl-rail-head,.hq-closer-chart-head){display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:56px;padding:14px 18px;margin:0;border:0}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.panelhead,.cl-card-head,.ho-section>header,.dl-rail-head,.hq-closer-chart-head) :is(h2,h3){margin:0;font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.panelhead,.cl-card-head,.ho-section>header,.dl-rail-head,.hq-closer-chart-head)>:is(p,small,span){font-size:13px;color:var(--secondary)}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.mkt-card,.mkt-content-card,.mkt-post-preview-card,.member-tile,.renewal-review-draft){border:1px solid var(--line);border-radius:var(--r-item);box-shadow:none;background:var(--surface)}
/* board lanes: a soft gray lane holding separate white cards */
body.balanced-blue.minimal-calm #main .ful-stage{border:1px solid var(--line);border-radius:var(--r-card);background:var(--soft);box-shadow:none;overflow:hidden}
body.balanced-blue.minimal-calm #main .ful-stage>header{min-height:44px;padding:0 14px;background:transparent;border-bottom:0}
body.balanced-blue.minimal-calm #main .ful-stage>header h3{font-size:12px;font-weight:500;color:var(--secondary)}

/* tables: a table on its own is a card; inside a card it sits flush */
body.balanced-blue.minimal-calm #main :is(.table-container,.tablewrap,.table-scroll,.sx-table-wrap,.dl-table-wrap,.cs-daily-history){background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--cc-panel-shadow);overflow-x:auto}
body.balanced-blue.minimal-calm #main :is(.panel,.ful-roster,.sx-crm,.cl-card,.minimal-closer-card,.closer-ideas,.sx-payment-card,.ho-section,.cs-detail-card,.mkt-daily,.sx-section) :is(.table-container,.tablewrap,.table-scroll,.sx-table-wrap,.dl-table-wrap){border:0;border-radius:0;box-shadow:none}
body.balanced-blue.minimal-calm #main .team-simple-head{min-height:40px;padding:0 18px;background:var(--soft);border-bottom:1px solid var(--line);font-size:12px;font-weight:500;color:var(--secondary)}
body.balanced-blue.minimal-calm #main .team-simple-row{padding:12px 18px}

/* metric cards */
body.balanced-blue.minimal-calm #main :is(.metric-row,.sx-metrics,.ho-metrics){gap:12px;margin:0 0 24px;padding:0}
body.balanced-blue.minimal-calm #main :is(.metric-row>.metric,.sx-metrics>.sx-stat,.ho-metrics>.ho-metric,.cs-activity-card,.eod-stat){display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-width:0;min-height:124px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--cc-panel-shadow)}
body.balanced-blue.minimal-calm #main :is(.metric>p,.metric-label,.sx-stat>span,.ho-metric>dt,.cs-activity-card>span){margin:0 0 8px;font-size:13px;font-weight:400;color:var(--secondary)}
body.balanced-blue.minimal-calm #main :is(.metric strong,.metric-value,.sx-stat>strong,.ho-metric>dd,.cs-activity-card>strong){margin:0;font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
body.balanced-blue.minimal-calm #main .dl-stats>.sx-stat.is-alert{border-color:color-mix(in srgb,var(--tone-red) 35%,var(--line));background:color-mix(in srgb,var(--tone-red) 6%,var(--surface))}
@media (max-width:600px){body.balanced-blue.minimal-calm #main :is(.metric-row,.sx-metrics,.ho-metrics){grid-template-columns:1fr 1fr;gap:10px}body.balanced-blue.minimal-calm #main :is(.metric-row>.metric,.sx-metrics>.sx-stat,.ho-metrics>.ho-metric){min-height:104px;padding:16px}body.balanced-blue.minimal-calm #main :is(.metric strong,.metric-value,.sx-stat>strong,.ho-metric>dd){font-size:24px}}

/* badges: one tag shape, colored by --tone. greens mean good, amber needs a look, red is a problem */
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.status,.sx-badge,.ful-fact,.eod-chip,.mkt-trend,.sx-crm-stage,.dl-tag,.mkt-meta-chip,.student-payment-state,.ful-card-deal,.ful-deal-tag){--tone:var(--secondary);display:inline-flex;align-items:center;gap:6px;min-height:22px;height:auto;min-width:0;padding:0 8px;border:0;border-radius:var(--r-badge);box-shadow:none;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;background:color-mix(in srgb,var(--tone) 11%,var(--surface));color:color-mix(in srgb,var(--tone) 82%,var(--ink))}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.status:is(.green,.success,.positive,.teal,.inbox-sent,.inbox-approved),.sx-green,.ful-fact[data-tone=green],.mkt-trend.up,.sx-crm-won,.student-payment-state[data-state=paid]){--tone:var(--tone-green)}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.status:is(.amber,.warning,.orange,.inbox-open),.sx-amber,.ful-fact:is([data-tone=amber],[data-tone=renewal],.ful-program-ending),.sx-crm-due){--tone:var(--tone-amber)}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.status:is(.red,.danger),.sx-red,.ful-fact:is([data-tone=red],[data-tone=ended],.ful-program-ended),.mkt-trend.down,.sx-crm-lost){--tone:var(--tone-red)}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.status:is(.blue,.info,.inbox-queued),.sx-crm-booked){--tone:var(--tone-blue)}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.status:is(.purple,.inbox-review),.sx-crm-follow){--tone:var(--tone-violet)}
body.balanced-blue.minimal-calm.theme-dark :is(#main,#drawer) :is(.status,.sx-badge,.ful-fact,.eod-chip,.mkt-trend,.sx-crm-stage,.dl-tag,.mkt-meta-chip,.student-payment-state,.ful-card-deal,.ful-deal-tag){background:color-mix(in srgb,var(--tone) 18%,var(--surface))}
/* the calendar key keeps its event colors; the call drawer chips stay outlined */
body.balanced-blue.minimal-calm #main .calendar-key .status{min-height:0;padding:3px 7px}

/* buttons */
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(td,.panelhead,.cl-card-head,.ho-section>header,.dl-rail-head,.hq-closer-chart-head,.student-csm-item,.ful-current-deals-head,.deal-picker-row,.sx-payment-tools) :is(.btn,.hq-select-trigger,select.input){min-height:30px;padding:4px 10px;border-radius:var(--r-seg);font-size:13px}
body.balanced-blue.minimal-calm :is(#main,#drawer) td :is(.btn,.hq-select-trigger){box-shadow:none}
body.balanced-blue.minimal-calm :is(#main,#drawer,.topbar) :is(.icon-btn,#mobile-menu,.ful-roster-trash,.mkt-card-delete,.sx-lead-edit,.dl-copy,.forms-icon-btn,.ful-delete-student){display:inline-grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;border:1px solid transparent;border-radius:var(--r-seg);background:transparent;box-shadow:none;color:var(--secondary)}
body.balanced-blue.minimal-calm :is(#main,#drawer,.topbar) :is(.icon-btn,#mobile-menu,.ful-roster-trash,.mkt-card-delete,.sx-lead-edit,.dl-copy,.forms-icon-btn,.ful-delete-student):hover{background:var(--soft);color:var(--ink)}
body.balanced-blue.minimal-calm :is(#main,#drawer) .btn.btn-danger{color:var(--tone-red)}

/* inputs line up with buttons */
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(input.input,textarea.input){min-height:36px;padding-block:7px;padding-right:12px;border:1px solid var(--control-border);border-radius:var(--r-control);background:var(--surface);box-shadow:none;font-size:14px;font-weight:400;color:var(--ink)}
body.balanced-blue.minimal-calm :is(#main,#drawer) textarea.input{min-height:88px;padding:9px 12px;line-height:1.5;resize:vertical}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(input,textarea):not([type=checkbox],[type=radio],[type=range]):focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
body.balanced-blue.minimal-calm :is(#main,#drawer) :is(.form-field,.sx-field>span,.ful-field>span){font-size:13px;font-weight:500;color:var(--ink)}

/* section headings outside cards, and one rhythm between sections */
body.balanced-blue.minimal-calm #main :is(.sx-section-head,.ful-sectionhead,.mkt-sectionhead,.cs-section-heading,.calls-section-head){display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;margin:0 0 12px;padding:0;border:0}
body.balanced-blue.minimal-calm #main :is(.sx-section-head,.ful-sectionhead,.mkt-sectionhead,.cs-section-heading,.calls-section-head) :is(h2,h3){margin:0;font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
body.balanced-blue.minimal-calm #main :is(.sx-section-head,.ful-sectionhead,.mkt-sectionhead,.cs-section-heading,.calls-section-head)>:is(p,span,small){font-size:13px;color:var(--secondary)}
body.balanced-blue.minimal-calm #main .page-tabs{margin-bottom:20px}