/* Business overview. Kept separate from dashboard-v2.css, which also owns the shared toolbar. */
.page-company-app.page-dashboard .main.main-dashboard {
    --dashboard-page-gutter: clamp(24px, 2.5vw, 40px);
    width: 100%;
    max-width: 1600px;
    min-width: 0;
    margin-inline: auto;
    padding: 0 var(--dashboard-page-gutter) 48px;
    background: var(--os-color-surface);
}
.dashboard-business {
    --db-ink: var(--os-color-ink);
    --db-muted: var(--os-color-text-secondary);
    --db-line: var(--os-color-border);
    --db-surface: var(--os-color-surface);
    --db-soft: var(--os-color-surface-muted);
    --db-accent: var(--os-color-primary);
    --db-accent-ink: var(--os-color-accent-text, var(--os-color-primary));
    --db-accent-soft: var(--os-color-primary-softer);
    --db-green: var(--os-color-success, #19845d);
    --db-green-soft: color-mix(in srgb, var(--db-green) 9%, var(--db-surface));
    display: grid;
    gap: 24px;
    width: 100%;
    min-width: 0;
    color: var(--db-ink);
    font-family: var(--os-font-family);
    font-size: 14px;
    line-height: 1.5;
    container-type: inline-size;
}
.dashboard-business *, .dashboard-business *::before, .dashboard-business *::after { box-sizing: border-box; }
.dashboard-business :is(h1,h2,h3,p) { margin: 0; }
.dashboard-business :is(a,button) { -webkit-tap-highlight-color: transparent; }
.dashboard-business a { color: inherit; text-decoration: none; }
.dashboard-business :is(a,button):focus-visible { outline: 3px solid color-mix(in srgb, var(--db-accent) 45%, transparent); outline-offset: 4px; }
.dashboard-business [hidden] { display: none !important; }
.db-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 184px; padding: 32px 0 28px; border-bottom: 1px solid var(--db-line); }
.db-heading > div:first-child { min-width: 0; }
.db-kicker { display: block; margin-bottom: 10px; color: var(--os-color-accent-text, var(--db-muted)); font-size: 11px; font-weight: 650; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-business .db-heading h1 { color: var(--db-ink); font-size: clamp(34px, 3.4vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -.05em; overflow-wrap: anywhere; }
.db-heading p { max-width: 640px; margin-top: 10px; color: var(--db-muted); font-size: 14px; line-height: 1.6; }
.db-header-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.dashboard-business .db-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 17px; border: 1px solid var(--db-line); border-radius: 10px; background: var(--db-surface); color: var(--db-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; box-shadow: none; cursor: pointer; }
.dashboard-business .db-button:hover { border-color: color-mix(in srgb, var(--db-accent) 40%, var(--db-line)); background: var(--db-soft); }
.dashboard-business .db-button.is-primary { border-color: var(--db-accent-ink); background: var(--db-accent); color: var(--os-color-on-primary, #fff); }
.dashboard-business .db-button.is-primary:hover { background: var(--os-color-primary-hover, var(--db-accent)); }
.db-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.db-metric { display: flex; flex-direction: column; min-width: 0; min-height: 156px; padding: 20px 22px; border: 1px solid var(--db-line); border-radius: 12px; background: var(--db-surface); }
.db-metric-label { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 12px; color: var(--db-muted); font-size: 12px; font-weight: 500; line-height: 1.4; }
.db-metric-label :is(svg,i) { flex: 0 0 15px; width: 15px; font-size: 14px; color: var(--db-muted); }
.db-metric-value { display: block; margin-bottom: 6px; color: var(--db-ink); font-size: clamp(27px, 2.65vw, 36px); font-weight: 650; line-height: 1.15; letter-spacing: -.045em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.db-metric > small { display: block; margin-top: auto; color: var(--db-muted); font-size: 11px; line-height: 1.5; }
.db-mini-meter { display: block; height: 4px; margin: 5px 0 10px; overflow: hidden; border-radius: 3px; background: var(--db-soft); }
.db-mini-meter > :is(i,span) { display: block; width: var(--meter-width, var(--progress, 0%)); max-width: 100%; height: 100%; border-radius: inherit; background: var(--db-accent); }
.db-overview-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 20px; align-items: stretch; }
.db-operations-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 20px; align-items: start; }
.db-panel { min-width: 0; overflow: hidden; border: 1px solid var(--db-line); border-radius: 12px; background: var(--db-surface); box-shadow: none; }
.db-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; }
.db-panel-heading > div { min-width: 0; }
.dashboard-business .db-panel-heading h2 { margin: 0; color: var(--db-ink); font-size: 17px; font-weight: 650; line-height: 1.4; letter-spacing: -.025em; }
.db-panel-heading p { margin-top: 4px; color: var(--db-muted); font-size: 12px; line-height: 1.5; }
.db-panel-heading > a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding-block: 3px; color: var(--db-muted); font-size: 12px; line-height: 1.5; }
.db-panel-heading > a:hover { color: var(--db-accent-ink); }
.db-revenue-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 0 24px; }
.db-revenue-total strong { color: var(--db-ink); font-size: 32px; font-weight: 650; line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.db-revenue-total small { color: var(--db-muted); font-size: 12px; }
.db-chart { position: relative; min-width: 0; height: 218px; margin: 22px 24px 0; }
.db-chart-grid { position: absolute; inset: 0 0 27px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.db-chart-grid > span { display: block; width: 100%; height: 1px; border-top: 1px dashed var(--db-line); }
.db-chart-bars { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: clamp(8px, 1.3vw, 22px); width: 100%; height: 100%; }
.db-chart-day { position: relative; display: grid; grid-template-rows: 22px minmax(0,1fr) 27px; gap: 0; min-width: 0; height: 100%; text-align: center; }
.db-chart-value { display: block; align-self: start; max-width: 100%; color: var(--db-muted); font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-chart-track { display: flex; align-items: flex-end; justify-content: center; min-height: 0; height: 100%; }
.db-chart-track > i { display: block; width: min(100%,42px); min-height: 0; height: clamp(0%, var(--bar-height, 0%), 100%); border-radius: 5px 5px 0 0; background: color-mix(in srgb,var(--db-accent) 19%,var(--db-surface)); }
.db-chart-label { display: block; padding-top: 9px; color: var(--db-muted); font-size: 11px; line-height: 1.5; }
.db-chart-day.is-today .db-chart-track > i { background: var(--db-accent); }
.db-chart-day.is-today :is(.db-chart-value,.db-chart-label) { color: var(--db-accent-ink); font-weight: 650; }
.db-chart-note { padding: 14px 24px 20px; color: var(--db-muted); font-size: 11px; line-height: 1.5; }
.db-next { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; background: color-mix(in srgb, var(--db-accent) 3%, var(--db-surface)); }
.db-next > .db-kicker { position: relative; z-index: 1; max-width: calc(100% - 72px); margin-bottom: 5px; color: var(--db-muted); }
.dashboard-business .db-next > h2 { max-width: calc(100% - 72px); color: var(--db-ink); font-size: 17px; font-weight: 650; line-height: 1.4; letter-spacing: -.025em; }
.db-next-visual { position: absolute; top: 21px; right: 20px; width: 74px; height: 74px; color: var(--db-accent-ink); opacity: .8; pointer-events: none; }
.db-next-visual svg { display: block; width: 100%; height: 100%; }
.db-next-time { display: block; margin-top: 28px; color: var(--db-ink); font-size: clamp(36px,3.4vw,48px); font-weight: 650; line-height: 1.05; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.db-next-time small { display: inline-block; margin-left: 5px; color: var(--db-muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.db-next-person { margin-top: 18px; color: var(--db-ink); font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.db-next-person strong { display: block; font: inherit; }
.db-next-person p,.db-next > p { margin-top: 5px; color: var(--db-muted); font-size: 13px; font-weight: 400; line-height: 1.6; }
.db-next-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; color: var(--db-muted); font-size: 11px; line-height: 1.5; }
.db-next-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.dashboard-business .db-next-link { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 26px; color: var(--db-accent-ink); font-size: 13px; font-weight: 600; }
.dashboard-business .db-next-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.db-day-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; padding: 0 24px; color: var(--db-muted); font-size: 11px; }
.db-day-summary > span { display: inline-flex; align-items: center; gap: 6px; }
.db-day-summary :is(i,b) { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.db-day-summary .is-confirmed { color: var(--db-accent-ink); }
.db-day-summary .is-completed { color: var(--db-green); }
.db-day-progress { display: flex; gap: 3px; height: 4px; margin: 14px 24px 4px; overflow: hidden; border-radius: 3px; background: var(--db-soft); }
.db-day-progress > :is(i,span) { display: block; flex: 0 0 auto; width: var(--segment-width, 0%); max-width: 100%; height: 100%; background: var(--db-accent); }
.db-day-progress > .is-completed { background: var(--db-green); }
.db-day-progress > :is(.is-cancelled,.is-pending) { background: color-mix(in srgb, var(--db-muted) 30%, var(--db-surface)); }
.db-appointments { padding: 4px 24px 0; }
.db-appointment { display: grid; grid-template-columns: 48px 3px minmax(0,1fr) minmax(55px,.55fr) auto; align-items: center; gap: 14px; min-width: 0; min-height: 89px; padding: 16px 0; border-bottom: 1px solid var(--db-line); }
.db-appointment:last-child { border-bottom: 0; }
.db-appointment:hover .db-appointment-copy strong { color: var(--db-accent-ink); }
.db-appointment > time,.db-appointment-time { display: grid; align-content: center; gap: 4px; color: var(--db-ink); font-size: 13px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.db-appointment > time small,.db-appointment-time small { color: var(--db-muted); font-size: 11px; font-weight: 400; }
.db-appointment-marker { display: block; width: 3px; height: 35px; border-radius: 2px; background: var(--appointment-color,var(--db-accent)); }
.db-appointment-copy { min-width: 0; }
.db-appointment-copy strong { display: block; color: var(--db-ink); font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.db-appointment-copy small { display: block; margin-top: 3px; color: var(--db-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.db-appointment-person { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--db-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.db-status { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: fit-content; max-width: 100%; padding: 5px 8px; border-radius: 5px; background: var(--db-soft); color: var(--db-muted); font-size: 10px; font-weight: 550; line-height: 1.4; white-space: nowrap; }
.db-status.is-confirmed { background: var(--db-accent-soft); color: var(--db-accent-ink); }
.db-status.is-completed { background: var(--db-green-soft); color: var(--db-green); }
.db-status:is(.is-cancelled,.is-canceled,.is-no-show) { background: color-mix(in srgb,var(--os-color-danger,#c84650) 8%,var(--db-surface)); color: var(--os-color-danger,#c84650); }
.db-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--db-line); }
.db-panel-footer a { display: inline-flex; align-items: center; gap: 8px; color: var(--db-accent-ink); font-size: 12px; font-weight: 550; }
.db-panel-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.db-panel-footer small { color: var(--db-muted); font-size: 11px; }
.db-attention .db-panel-heading { align-items: center; }
.db-attention-count { display: inline-grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; border: 1px solid var(--db-line); border-radius: 6px; color: var(--db-muted); font-size: 12px; font-weight: 600; }
.db-attention-list { display: grid; padding: 0 24px; }
.db-attention-list > a { display: grid; grid-template-columns: 32px minmax(0,1fr) 12px; align-items: center; gap: 12px; min-width: 0; min-height: 90px; padding: 18px 0; border-top: 1px solid var(--db-line); }
.db-attention-list > a:first-child { border-top: 0; }
.db-attention-list > a > :is(i,svg,span):first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--db-soft); color: var(--db-muted); font-size: 15px; }
.db-attention-list > a > :is(i,svg):last-child { width: 12px; color: var(--db-muted); font-size: 11px; }
.db-attention-list strong { display: block; color: var(--db-ink); font-size: 13px; font-weight: 600; line-height: 1.5; }
.db-attention-list small { display: block; margin-top: 4px; color: var(--db-muted); font-size: 12px; line-height: 1.5; }
.db-attention-list > a:hover strong { color: var(--db-accent-ink); }
.db-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 230px; padding: 28px 24px 34px; text-align: center; }
.db-empty > :is(svg,span):first-child { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 7px; color: color-mix(in srgb,var(--db-accent) 60%,var(--db-muted)); }
.db-empty > span:first-child svg { width: 100%; height: 100%; }
.db-empty strong { max-width: 320px; color: var(--db-ink); font-size: 15px; font-weight: 600; line-height: 1.5; }
.db-empty p { max-width: 300px; color: var(--db-muted); font-size: 13px; line-height: 1.6; }
.db-empty a { margin-top: 8px; color: var(--db-accent-ink); font-size: 12px; font-weight: 600; }
.db-next > .db-empty { flex: 1; width: 100%; min-height: 220px; padding-inline: 0; }
.db-shortcuts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.db-shortcuts > a { display: grid; grid-template-columns: 38px minmax(0,1fr) 14px; align-items: center; gap: 13px; min-width: 0; min-height: 101px; padding: 20px; border: 1px solid var(--db-line); border-radius: 12px; background: var(--db-surface); }
.db-shortcuts > a > :is(i,svg,span):first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--db-soft); color: var(--db-muted); font-size: 17px; }
.db-shortcuts > a > :is(i,svg):last-child { width: 14px; font-size: 12px; color: var(--db-muted); }
.db-shortcuts strong { display: block; color: var(--db-ink); font-size: 13px; font-weight: 600; line-height: 1.5; }
.db-shortcuts small { display: block; margin-top: 3px; color: var(--db-muted); font-size: 11px; line-height: 1.5; }
.db-shortcuts > a:hover { border-color: color-mix(in srgb,var(--db-accent) 45%,var(--db-line)); }
.db-shortcuts > a:hover strong { color: var(--db-accent-ink); }
@container (max-width: 1020px) {
    .db-heading { align-items: flex-start; }
    .db-header-actions { max-width: 280px; }
    .db-overview-grid { grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); }
    .db-metric { padding: 18px; }
    .db-operations-grid { grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); }
    .db-appointment { grid-template-columns: 43px 3px minmax(0,1fr) auto; column-gap: 11px; row-gap: 4px; }
    .db-appointment > time,.db-appointment-time,.db-appointment-marker { grid-row: 1 / 3; }
    .db-appointment-copy { grid-column: 3; grid-row: 1; }
    .db-appointment-person { grid-column: 3; grid-row: 2; }
    .db-appointment .db-status { grid-column: 4; grid-row: 1 / 3; }
    .db-next { padding: 22px; }
    .db-next-visual { top: 20px; right: 18px; width: 64px; height: 64px; }
    .db-shortcuts > a { grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 18px; }
    .db-shortcuts > a > :is(i,svg):last-child { display: none; }
}
@container (max-width: 800px) {
    .db-heading { flex-direction: column; align-items: stretch; gap: 20px; }
    .db-header-actions { max-width: none; justify-content: flex-start; }
    .db-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
    .db-metric { min-height: 140px; }
    .db-metric-value { font-size: 32px; }
    .db-overview-grid,.db-operations-grid { grid-template-columns: minmax(0,1fr); }
    .db-next { min-height: 305px; }
    .db-next-visual { width: 88px; height: 88px; top: 24px; right: 24px; }
    .db-next > .db-kicker,.dashboard-business .db-next > h2 { max-width: calc(100% - 100px); }
    .db-next-time { font-size: 44px; margin-top: 22px; }
    .db-next-person { margin-top: 12px; }
    .db-next-meta { margin-top: 12px; }
    .db-next-link { padding-top: 24px; }
    .db-attention-list > a { min-height: 84px; }
    .db-shortcuts { grid-template-columns: minmax(0,1fr); gap: 12px; }
    .db-shortcuts > a { grid-template-columns: 38px minmax(0,1fr) 14px; min-height: 88px; }
    .db-shortcuts > a > :is(i,svg):last-child { display: block; }
}
@container (max-width: 440px) {
    .db-heading { min-height: 0; padding: 26px 0 24px; }
    .dashboard-business .db-heading h1 { font-size: 34px; }
    .db-heading p { font-size: 13px; }
    .db-kicker { font-size: 10px; }
    .db-header-actions { gap: 8px; }
    .dashboard-business .db-header-actions .db-button { flex: 1 1 125px; padding-inline: 12px; font-size: 12px; }
    .db-metrics { gap: 10px; }
    .db-metric { min-height: 136px; padding: 16px 14px; }
    .db-metric-label { align-items: flex-start; gap: 6px; margin-bottom: 13px; font-size: 11px; }
    .db-metric-label :is(svg,i) { margin-top: 1px; flex-basis: 13px; width: 13px; font-size: 12px; }
    .db-metric-value { font-size: 28px; }
    .db-metric > small { font-size: 10px; }
    .db-panel-heading { padding: 20px 18px 17px; gap: 12px; flex-wrap: wrap; }
    .dashboard-business .db-panel-heading h2 { font-size: 16px; }
    .db-panel-heading p { font-size: 11px; }
    .db-panel-heading > a { font-size: 11px; }
    .db-revenue-total { padding-inline: 18px; gap: 7px; }
    .db-revenue-total strong { font-size: 28px; }
    .db-chart { height: 185px; margin: 20px 14px 0; }
    .db-chart-bars { gap: 7px; }
    .db-chart-value { font-size: 9px; letter-spacing: -.02em; }
    .db-chart-label { font-size: 10px; }
    .db-chart-track > i { width: min(100%,27px); border-radius: 3px 3px 0 0; }
    .db-chart-note { padding: 14px 18px 18px; font-size: 10px; }
    .db-next { padding: 22px 20px; }
    .db-next-visual { width: 76px; height: 76px; top: 20px; right: 20px; }
    .db-day-summary { padding-inline: 18px; gap: 8px 14px; font-size: 10px; }
    .db-day-progress { margin-inline: 18px; }
    .db-appointments { padding-inline: 18px; }
    .db-appointment { grid-template-columns: 42px 3px minmax(0,1fr); gap: 4px 11px; padding-block: 17px; }
    .db-appointment > time,.db-appointment-time { align-self: start; padding-top: 2px; grid-row: 1 / 4; }
    .db-appointment-marker { align-self: start; margin-top: 3px; grid-row: 1 / 4; height: 38px; }
    .db-appointment-copy { grid-row: 1; }
    .db-appointment-person { grid-row: 2; }
    .db-appointment .db-status { grid-column: 3; grid-row: 3; justify-self: start; margin-top: 4px; padding: 4px 7px; font-size: 9px; }
    .db-panel-footer { padding: 16px 18px; }
    .db-attention-list { padding-inline: 18px; }
    .db-attention-list > a { gap: 10px; }
    .db-attention-list small { font-size: 11px; }
    .db-empty { min-height: 220px; padding-inline: 20px; }
    .db-shortcuts > a { padding: 18px; }
}
@media (max-width: 900px) {
    .page-company-app.page-dashboard .main.main-dashboard { --dashboard-page-gutter: 24px; padding-bottom: 36px; }
}
@media (max-width: 600px) {
    .page-company-app.page-dashboard .main.main-dashboard { --dashboard-page-gutter: 18px; padding-bottom: 30px; }
    .dashboard-business { gap: 20px; }
}
@media (max-width: 360px) {
    .page-company-app.page-dashboard .main.main-dashboard { --dashboard-page-gutter: 14px; }
    .dashboard-business { gap: 16px; }
    .db-metric { padding-inline: 12px; }
    .db-metric-value { font-size: 25px; }
    .db-chart-value { font-size: 8px; }
}
/* The visible axes and appointment states use the server-rendered values. */
.db-overview-grid > :only-child,.db-operations-grid > :only-child,.db-metrics > :only-child,.db-shortcuts > :only-child { grid-column: 1 / -1; }
.db-next { border: 1px solid var(--db-line); border-radius: 12px; overflow: hidden; }
.db-next-time > span { display: inline-block; margin-left: 8px; color: var(--db-muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.db-next:not(:has(.db-next-time)) .db-next-person { margin-top: 40px; }
.db-chart { height: 230px; }
.db-chart-grid { inset: 22px 0 40px; }
.db-chart-grid > span { position: relative; border: 0; color: var(--db-muted); font-size: 9px; line-height: 1px; font-variant-numeric: tabular-nums; }
.db-chart-grid > span::after { content: ''; position: absolute; left: 48px; right: 0; top: 0; height: 1px; border-top: 1px dashed var(--db-line); }
.db-chart-bars { width: calc(100% - 48px); margin-left: 48px; }
.db-chart-day { grid-template-rows: 22px minmax(0,1fr) 40px; }
.db-chart-label small { display: block; margin-top: 1px; color: var(--db-muted); font-size: 9px; font-weight: 400; }
.db-day-summary b { display: inline; width: auto; height: auto; border-radius: 0; background: none; color: var(--db-ink); font-weight: 650; }
.db-day-progress > .is-missed { background: color-mix(in srgb,var(--os-color-danger,#c84650) 55%,var(--db-surface)); }
.db-agenda-caption { padding: 17px 24px 0; color: var(--db-muted); font-size: 11px; }
.db-panel-footer > span { color: var(--db-muted); font-size: 11px; }
.db-status.is-current { background: var(--db-green-soft); color: var(--db-green); }
.db-status.is-warning { background: color-mix(in srgb,var(--os-color-danger,#c84650) 8%,var(--db-surface)); color: var(--os-color-danger,#c84650); }
.db-attention-action { display: inline-flex; align-items: center; margin-top: 7px; color: var(--db-accent-ink); font-size: 11px; font-weight: 550; }
.db-empty > span:first-child { border-radius: 18px; background: var(--db-soft); font-size: 32px; }
@container(min-width:801px) {
    .db-metrics:has(>.db-metric:nth-child(3):last-child) { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .db-metrics:has(>.db-metric:nth-child(2):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .db-shortcuts:has(>a:nth-child(2):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container(max-width:440px) {
    .db-chart { height: 208px; margin-inline: 14px; }
    .db-chart-grid { top: 30px; }
    .db-chart-grid > span { font-size: 8px; }
    .db-chart-grid > span::after { left: 40px; }
    .db-chart-bars { width: calc(100% - 40px); margin-left: 40px; gap: 5px; }
    .db-chart-day { grid-template-rows: 30px minmax(0,1fr) 40px; }
    .db-chart-value { font-size: 9px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
    .db-chart-label { font-size: 10px; }
    .db-chart-label small { font-size: 8px; }
    .db-agenda-caption { padding-inline: 18px; }
    .db-panel-footer { flex-wrap: wrap; }
}
/* A functional calendar/customer illustration introduces the working day. */
.dashboard-business .db-heading {
    align-items: center;
    gap: 28px;
    min-height: 260px;
    margin-top: 28px;
    padding: 28px 32px;
    border: 1px solid color-mix(in srgb,var(--db-accent) 12%,var(--db-line));
    border-radius: 16px;
    background: color-mix(in srgb,var(--db-accent) 5%,var(--db-surface));
}
.db-heading > div:first-child { flex: 1 1 56%; }
.dashboard-business .db-heading h1 { font-size: clamp(34px,3.2vw,46px); }
.db-heading .db-kicker { color: var(--db-accent-ink); }
.db-heading p { max-width: 580px; }
.db-heading .db-header-actions { justify-content: flex-start; max-width: none; margin-top: 21px; }
.db-hero-visual { display: block; flex: 0 1 300px; width: min(36%,300px); height: 200px; overflow: visible; color: var(--db-accent-ink); }
@media (max-width: 700px) {
    .db-hero-visual { display: none; }
}
.db-metric-label { gap: 10px; }
.db-metric-label :is(svg,i) { display: inline-grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--db-accent-ink); background: var(--db-accent-soft); font-size: 14px; }
.db-metric:nth-child(2) .db-metric-label :is(svg,i) { color: var(--db-green); background: var(--db-green-soft); }
.db-metric:nth-child(3) .db-metric-label :is(svg,i) { color: #bd761d; background: color-mix(in srgb,#bd761d 10%,var(--db-surface)); }
.db-metric:nth-child(4) .db-metric-label :is(svg,i) { color: #3979b3; background: color-mix(in srgb,#3979b3 9%,var(--db-surface)); }
@container (max-width:1020px) {
    .dashboard-business .db-heading { padding: 26px; gap: 20px; }
    .db-hero-visual { flex-basis: 240px; width: min(33%,260px); height: 190px; }
    .dashboard-business .db-heading h1 { font-size: 38px; }
}
@container (max-width:800px) {
    .dashboard-business .db-heading { flex-direction: row; align-items: center; }
    .db-heading > div:first-child { flex-basis: 65%; }
    .db-hero-visual { flex-basis: 190px; width: 30%; height: 170px; }
    .dashboard-business .db-heading h1 { font-size: 34px; }
    .db-heading .db-header-actions { margin-top: 20px; }
}
@container (max-width:520px) {
    .dashboard-business .db-heading { position: relative; flex-direction: column; align-items: stretch; gap: 18px; min-height: 0; margin-top: 22px; padding: 22px; }
    .db-heading > div:first-child { flex: none; }
    .db-hero-visual { flex: none; width: 180px; height: 110px; align-self: flex-end; margin-top: 0; }
    .dashboard-business .db-heading h1 { font-size: 34px; }
    .db-heading .db-header-actions { gap: 8px; }
    .dashboard-business .db-heading .db-button { flex: 1 1 125px; }
    .db-metric-label { align-items: center; gap: 7px; font-size: 11px; }
    .db-metric-label :is(svg,i) { margin: 0; flex-basis: 25px; width: 25px; height: 25px; border-radius: 7px; font-size: 12px; }
}
@container (max-width:320px) {
    .dashboard-business .db-heading { padding: 20px; }
    .dashboard-business .db-heading h1 { font-size: 32px; }
    .db-heading .db-header-actions { flex-direction: column; align-items: stretch; }
    .dashboard-business .db-heading .db-button { flex: none; width: 100%; }
    .db-metric-label { flex-wrap: wrap; }
}

.db-hero-visual .db-art-paper,.db-empty-visual .db-art-paper { fill: var(--db-surface); }
.db-hero-visual .db-art-ink,.db-empty-visual .db-art-ink { fill: var(--db-ink); }
.dashboard-business .db-empty > .db-empty-visual { width: 120px; height: 88px; margin-bottom: 10px; color: var(--db-accent-ink); }
.db-chart-value-compact { display: none; }
html[data-theme="dark"] .db-metric:nth-child(3) .db-metric-label :is(svg,i) { color: #efbf6b; }
html[data-theme="dark"] .db-metric:nth-child(4) .db-metric-label :is(svg,i) { color: #8eb8ed; }
@container(max-width:440px) {
    .db-chart-value-full { display: none; }
    .db-chart-value-compact { display: inline; }
    .db-chart-value { white-space: nowrap; overflow-wrap: normal; font-size: 10px; }
}
html[data-theme="dark"] .db-chart-track > i { background: color-mix(in srgb,var(--db-accent-ink) 62%,var(--db-surface)); }
html[data-theme="dark"] .db-chart-day.is-today .db-chart-track > i { background: var(--db-accent-ink); }