/* V5.7. Shared visual language inspired by the Workspace Admin console.
   Layout, widget spans, calendar label colors and client branding stay owned
   by their existing components. These tokens describe only interface roles. */
:root {
  --ws-page: #f8fafd;
  --ws-surface: #ffffff;
  --ws-container: #f1f4f9;
  --ws-hover: #e9eef6;
  --ws-text: #202124;
  --ws-secondary: #5f6368;
  --ws-tertiary: #646970;
  --ws-line: #dadce0;
  --ws-primary: #0b57d0;
  --ws-on-primary: #ffffff;
  --ws-primary-hover: #0842a0;
  --ws-selection: #e8f0fe;
  --ws-on-selection: #174ea6;
  --ws-focus: #1a73e8;
  --ws-shadow: 0 4px 18px #20212416;
  --ws-danger: #b3261e;
  --ws-danger-bg: #fce8e6;
  --ws-success: #137333;
  --ws-success-bg: #e6f4ea;
  --ws-warning: #805300;
  --ws-warning-bg: #fef7e0;
  --border: var(--ws-line);
  --line: var(--ws-line);
  --input: var(--ws-surface);
  --surface: var(--ws-surface);
  --text: var(--ws-text);
  --muted: var(--ws-secondary);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ws-text);
  background: var(--ws-page);
}
html[data-theme="dark"] {
  --ws-page: #171a1f;
  --ws-surface: #20242b;
  --ws-container: #292e37;
  --ws-hover: #343b46;
  --ws-text: #e8eaed;
  --ws-secondary: #bdc1c6;
  --ws-tertiary: #adb3bd;
  --ws-line: #49515e;
  --ws-primary: #a8c7fa;
  --ws-on-primary: #062e6f;
  --ws-primary-hover: #c2d7fc;
  --ws-selection: #263f62;
  --ws-on-selection: #d3e3fd;
  --ws-focus: #a8c7fa;
  --ws-shadow: 0 4px 18px #0004;
  --ws-danger: #f2b8b5;
  --ws-danger-bg: #442827;
  --ws-success: #a8dab5;
  --ws-success-bg: #243c2e;
  --ws-warning: #fdd663;
  --ws-warning-bg: #3e3522;
  --border: var(--ws-line);
  --line: var(--ws-line);
  --input: var(--ws-surface);
  --surface: var(--ws-surface);
  --text: var(--ws-text);
  --muted: var(--ws-secondary);
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme] body { color: var(--ws-text); background: var(--ws-page); }

/* Typography: one page title, section titles, labels and supporting text. */
html[data-theme] .hero { gap: 20px; margin-bottom: 24px; }
html[data-theme] :is(.hero,.auth) h1 {
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 6px 0 10px;
}
html[data-theme] main.client-theme .hero h1 { line-height: 1.25; letter-spacing: -.02em; }
html[data-theme] h2 { font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: 0; }
html[data-theme] h3 { font-size: 16px; line-height: 1.5; font-weight: 600; letter-spacing: 0; }
html[data-theme] h4 { font-size: 14px; line-height: 1.5; font-weight: 600; }
html[data-theme] :is(.panel,.card,.settings-section,.linear-section,.identity-details,.feature-panel,.hub-modal-head,.widget-content) h2 { font-size: 20px; }
html[data-theme] :is(.panel,.card,.settings-section,.linear-section) > h2 { margin: 0 0 16px; }
html[data-theme] :is(.card,.panel) h3 { margin: 0 0 8px; }
html[data-theme] :is(.hero p,.card p,.muted,.row small,.linear-row small,.history-item summary span,.history-item small,.task-date,.task-comment time,.task-history>li>span,.calendar-year-month span,.client-activity-facts small,.member-presence-detail small,.account-last-access,.website-facts small,.website-phase small,.hub-modal-head p) { color: var(--ws-secondary); }
html[data-theme] p { line-height: 1.6; }
html[data-theme] :is(.eyebrow,.hub-footer) { color: var(--ws-tertiary); }
html[data-theme] .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .07em; }
html[data-theme] :is(.card .number,.home-widget[data-size=small] .number,.personal-period .card .number) {
  font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; margin-top: 12px; color: var(--ws-text);
}
html[data-theme] .money-number { font-size: 28px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-theme] :is(.section-head,.identity-details .section-head) h2 { margin: 0; }

/* White surfaces, quiet grouped sections and thin separators. */
html[data-theme] :is(.panel,.card,.home-widget,.task-native-card,.hub-modal,.page-action-popover,.personal-nav,.client-nav,.client-subnav) {
  color: var(--ws-text); background: var(--ws-surface); border-color: var(--ws-line); border-radius: 12px; box-shadow: none;
}
html[data-theme] :is(.panel,.card) { padding: 24px; }
html[data-theme] .panel { margin: 16px 0; }
html[data-theme] :is(.inset,.report-line,.permission-group,.website-facts>div,.website-phase,.brief-section,.contract-fields>div,.job-slot,.plan-card,.attendance-session,.attendance-week-day,.attendance-month-bar,.task-lane,.home-layout-toolbar) {
  background: var(--ws-container); color: var(--ws-text); border-color: var(--ws-line); border-radius: 10px; box-shadow: none;
}
html[data-theme] :is(.panel>.grid .card,.personal-period .card) { background: var(--ws-container); border-color: var(--ws-line); }
html[data-theme] :is(.row,.linear-row,.comp-settings-row,.history-item,.report-member,.material-group,.payout-person,.work-role,.job-department,.resolve-expense,.settings-section,.linear-section,.client-appointment-history,.attendance-request-history,.task-comment,.task-history>li,.settings-faq) { border-color: var(--ws-line); }
html[data-theme] :is(.linear-section,.settings-section) { padding: 24px 0 28px; }
html[data-theme] :is(.row,.linear-row) { padding-top: 16px; padding-bottom: 16px; }
html[data-theme] .stack { gap: 16px; }
html[data-theme] :is(.grid,.two,.three,.split) { gap: 16px; }
html[data-theme] .section-head { gap: 16px; margin-bottom: 16px; }
html[data-theme] .inset { padding: 18px; margin: 0; }
html[data-theme] .create-panel { padding: 0; }
html[data-theme] .create-panel>summary { padding: 16px 24px; font-weight: 500; }
html[data-theme] .create-panel>summary:hover { background: var(--ws-hover); }
html[data-theme] .create-panel[open]>summary { border-color: var(--ws-line); }
html[data-theme] .create-content { padding: 24px; }
html[data-theme] .material-item { border-color: var(--ws-line); border-radius: 10px; }
html[data-theme] :is(.inset,.history-item,.settings-detail,.attendance-request-history,.attendance-month-comparison,.client-appointment-history)>summary { font-weight: 500; }
/* Client pages keep their existing flat section hierarchy and branded actions. */
html[data-theme] .client-workspace :is(.panel,.card,.website-card) {
  background: transparent; border: 0; border-top: 1px solid var(--ws-line); border-radius: 0; margin: 0; padding: 24px 0;
}
html[data-theme] .client-workspace .create-panel { padding: 0; }
html[data-theme] .client-workspace .create-panel>summary { padding: 16px 0; }
html[data-theme] .client-workspace .create-content { padding: 20px 0; }
html[data-theme] .client-workspace .website-facts>div { background: transparent; border-radius: 0; border-left-color: var(--ws-line); }
html[data-theme] .client-workspace .client-service-cards { border-color: var(--ws-line); }

/* Header geometry is retained: brand, central search, refresh, then menu. */
html[data-theme] .app-header { background: var(--ws-surface); color: var(--ws-text); box-shadow: none; border-bottom: 1px solid var(--ws-line); }
html[data-theme="light"] .app-header .brand img { filter: invert(1); mix-blend-mode: multiply; }
html[data-theme="dark"] .app-header .brand img { filter: none; mix-blend-mode: screen; }
html[data-theme] .app-header .global-search input {
  background: var(--ws-container); border-color: transparent; color: var(--ws-text); border-radius: 24px; padding-left: 42px;
}
html[data-theme] .app-header .global-search input:focus { background: var(--ws-surface); border-color: var(--ws-line); }
html[data-theme] .global-search .search-control svg { stroke: var(--ws-secondary); }
html[data-theme] .global-search input::placeholder { color: var(--ws-secondary); }
html[data-theme] .global-search-results { background: var(--ws-surface); border-color: var(--ws-line); border-radius: 12px; box-shadow: var(--ws-shadow); }
html[data-theme] .global-search-results a:hover,html[data-theme] .global-search-results a:focus { background: var(--ws-selection); color: var(--ws-on-selection); }
html[data-theme] .global-search-results small { color: var(--ws-secondary); }
html[data-theme] .app-header .nav a,html[data-theme] .app-header .menu-toggle {
  color: var(--ws-secondary); background: transparent; font-size: 14px; font-weight: 500; border-radius: 20px;
}
html[data-theme] .app-header .nav a:hover,html[data-theme] .app-header .menu-toggle:hover { background: var(--ws-hover); color: var(--ws-text); }
html[data-theme] .app-header .nav a.active { background: var(--ws-selection); color: var(--ws-on-selection); }
html[data-theme] .app-header.nav-collapsed .nav { background: var(--ws-surface); border-color: var(--ws-line); border-radius: 12px; box-shadow: var(--ws-shadow); }

/* One control scale; inline summaries and main actions are equally readable. */
html[data-theme] :is(button.primary,.button) {
  background: var(--ws-primary); color: var(--ws-on-primary); border: 1px solid transparent; border-radius: 8px;
  min-height: 44px; padding: 10px 18px; font-size: 14px; line-height: 22px; font-weight: 600; text-align: center; text-decoration: none;
}
html[data-theme] :is(button.primary,.button):hover { background: var(--ws-primary-hover); }
html[data-theme] :is(button.secondary,.button.secondary),html[data-theme] .app-header>.internal-refresh {
  background: var(--ws-surface); color: var(--ws-primary); border: 1px solid var(--ws-line); border-radius: 8px;
  min-height: 44px; padding: 10px 18px; font-size: 14px; line-height: 22px; font-weight: 600; box-shadow: none;
}
html[data-theme] :is(button.secondary,.button.secondary):hover,html[data-theme] .app-header>.internal-refresh:hover { background: var(--ws-selection); color: var(--ws-on-selection); border-color: var(--ws-line); }
html[data-theme] .app-header>.internal-refresh { min-height: 48px; padding: 12px 18px; }
html[data-theme] button.danger,html[data-theme] .photo-remove { color: var(--ws-danger); background: var(--ws-danger-bg); border-color: var(--ws-danger); border-radius: 8px; min-height: 44px; padding: 10px 16px; font-weight: 600; }
html[data-theme] main.client-theme :is(button.primary,.button:not(.secondary)) { background: var(--client-accent); color: var(--client-ink); }
html[data-theme] main.client-theme :is(button.primary,.button:not(.secondary)):hover { filter: brightness(.94); }
html[data-theme] :is(button,.button,a,input,select,textarea) { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
html[data-theme] :is(button,a):focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 3px; }
html[data-theme] :is(input,select,textarea):focus { outline: 2px solid var(--ws-focus); outline-offset: 1px; border-color: var(--ws-focus); }
html[data-theme] :is(input,select,textarea):where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])) {
  font-size: 14px; line-height: 20px; font-weight: 400; border-color: var(--ws-line); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); min-height: 44px; padding: 11px 12px;
}
html[data-theme] :is(input,textarea)::placeholder { color: var(--ws-tertiary); opacity: 1; }
html[data-theme] .search-control input { padding-left: 42px; }
html[data-theme] input[readonly] { background: var(--ws-container)!important; color: var(--ws-secondary)!important; }
html[data-theme] label { color: var(--ws-secondary); font-size: 13px; line-height: 20px; font-weight: 500; gap: 8px; }
html[data-theme] :is(input[type=checkbox],input[type=radio],progress) { accent-color: var(--ws-primary); }
html[data-theme] :is(.member-choice,.checkboxes label) { color: var(--ws-text); }
html[data-theme] .attendance-filter :is(input,select,button) { height: 48px; min-height: 48px; }
html[data-theme] :is(.plan-card,.permission-group) :is(input,select) { height: 48px; min-height: 48px; }

/* Local menus stay where they were; selected state is a quiet blue surface. */
html[data-theme] :is(.client-nav-links,.client-subnav,.personal-nav-links,.settings-nav,.portal-nav,.ped-view-nav,.calendar-view-switch,.task-view-nav) a {
  color: var(--ws-secondary); font-size: 14px; font-weight: 500; border-radius: 8px; box-shadow: none; transform: none;
}
html[data-theme] :is(.client-nav-links,.client-subnav,.personal-nav-links,.settings-nav,.portal-nav,.ped-view-nav,.calendar-view-switch,.task-view-nav) a:hover,
html[data-theme] :is(.client-nav-links,.client-subnav,.personal-nav-links,.settings-nav,.portal-nav,.ped-view-nav,.calendar-view-switch,.task-view-nav) a:focus-visible {
  background: var(--ws-hover); color: var(--ws-text); box-shadow: none; transform: none;
}
html[data-theme] :is(.client-nav-links,.client-subnav,.personal-nav-links,.settings-nav,.portal-nav,.ped-view-nav,.calendar-view-switch,.task-view-nav) a.active {
  background: var(--ws-selection); color: var(--ws-on-selection); box-shadow: none;
}
html[data-theme] main .page-sidebar nav a,html[data-theme] main .page-sidebar details>summary {
  color: var(--ws-secondary); font-weight: 500; font-size: 14px; border-radius: 8px;
}
html[data-theme] main .page-sidebar nav a:hover,html[data-theme] main .page-sidebar details>summary:hover { background: var(--ws-hover); color: var(--ws-text); }
html[data-theme] main .page-sidebar nav a.active { background: var(--ws-selection); color: var(--ws-on-selection); }
html[data-theme] main .page-sidebar nav>strong,html[data-theme] .task-view-nav strong { font-size: 11px; color: var(--ws-tertiary); letter-spacing: .06em; font-weight: 600; }
html[data-theme] main .page-sidebar details>div { border-color: var(--ws-line); }
html[data-theme] .page-sidebar-inner { border-color: var(--ws-line); }
@media(min-width:901px) {
  html[data-theme] :is(.page-sidebar-inner,.task-view-nav) { top: 160px; max-height: calc(100dvh - 184px); }
}
html[data-theme] .home-layout-toolbar { top: 160px; }
html[data-theme] .theme-options label { background: var(--ws-surface); color: var(--ws-text); border-color: var(--ws-line); border-radius: 8px; }
html[data-theme] .accounting-nav .button.secondary { background: var(--ws-surface); color: var(--ws-primary); border-color: var(--ws-line); }
html[data-theme] .accounting-nav .button[aria-current=page] { background: var(--ws-selection); color: var(--ws-on-selection); box-shadow: inset 0 -2px 0 var(--ws-primary); }

/* Data surfaces and modal stacks. No lane, widget or window is repositioned. */
html[data-theme] table :is(th,td) { border-color: var(--ws-line); padding: 14px 12px; }
html[data-theme] table th { background: var(--ws-container); color: var(--ws-secondary); font-size: 12px; font-weight: 500; text-transform: none; line-height: 1.5; }
html[data-theme] .task-lane { padding: 12px; }
html[data-theme] .task-lane h2 { font-size: 14px; font-weight: 600; }
html[data-theme] .task-native-card { padding: 16px; border-radius: 10px; }
html[data-theme] .task-lane .task-native-card { padding: 12px; }
html[data-theme] .task-native-card h3 { font-size: 15px; line-height: 1.45; font-weight: 600; margin: 10px 0 8px; }
html[data-theme] .task-native-card select { min-height: 40px; padding: 9px 10px; font-size: 12px; }
html[data-theme] .task-native-card label { font-size: 12px; }
html[data-theme] .plan-card h3 { font-size: 16px; margin-bottom: 20px; color: var(--ws-text); }
html[data-theme] .plan-card label { color: var(--ws-secondary); }
html[data-theme] .badge { background: var(--ws-container); color: var(--ws-secondary); font-size: 12px; font-weight: 500; line-height: 18px; padding: 4px 10px; }
html[data-theme] :is(.task-priority-urgent,.badge.unpaid) { color: var(--ws-danger); background: var(--ws-danger-bg); }
html[data-theme] .task-priority-high { color: var(--ws-warning); background: var(--ws-warning-bg); }
html[data-theme] :is(.notice,.profile-modal-notice) { background: var(--ws-success-bg); color: var(--ws-success); border-radius: 8px; }
html[data-theme] :is(.notice.error,.profile-modal-notice.error,.payment-warning) { background: var(--ws-danger-bg); color: var(--ws-danger); }
html[data-theme] :is(.task-overdue,.client-inactive-reasons) { color: var(--ws-danger); }
html[data-theme] :is(.account-online,.client-online,.success-check) { color: var(--ws-success); }
html[data-theme] :is(.session-open .badge,.office-present) { background: var(--ws-success-bg); color: var(--ws-success); }
html[data-theme] .session-review .badge { background: var(--ws-warning-bg); color: var(--ws-warning); }
html[data-theme] .hub-modal { --modal-surface: var(--ws-surface); box-shadow: 0 12px 48px #0004; border-radius: 16px; }
html[data-theme] .hub-modal::backdrop { background: #10182880; backdrop-filter: blur(2px); }
html[data-theme] :is(.hub-modal-head,.hub-modal-footer,.profile-appearance-first) { border-color: var(--ws-line); }
html[data-theme] .hub-modal-head { padding: 20px 24px; }
html[data-theme] .hub-modal-body { padding: 24px; }
html[data-theme] .hub-modal-footer { padding: 16px 24px; gap: 12px; }
html[data-theme] .modal-close { border: 0; border-radius: 50%; width: 40px; height: 40px; color: var(--ws-secondary); background: transparent; }
html[data-theme] .modal-close:hover { color: var(--ws-text); background: var(--ws-hover); }
html[data-theme] .page-action-popover { box-shadow: var(--ws-shadow); padding: 24px; }

/* Calendar chrome only; event labels and client accents are never replaced. */
html[data-theme] .calendar-grid { border-color: var(--ws-line); background: var(--ws-line); border-radius: 10px; }
html[data-theme] :is(.calendar-cell,.calendar-blank) { background: var(--ws-surface); }
html[data-theme] .calendar-weeklabel { background: var(--ws-container); color: var(--ws-secondary); font-weight: 500; }
html[data-theme] .calendar-cell:hover { background: var(--ws-container); }
html[data-theme] .calendar-cell.today .calendar-date { background: var(--ws-primary); color: var(--ws-on-primary); }
html[data-theme] main.client-theme .calendar-cell.today .calendar-date { background: var(--client-accent); color: var(--client-ink); }
html[data-theme] :is(.calendar-date,.calendar-controls strong,.ped-month-navigation strong) { font-weight: 500; }
html[data-theme] :is(.calendar-hour-track,.calendar-hour-line,.calendar-all-day,.calendar-day-details) { border-color: var(--ws-line); }
html[data-theme] .calendar-hour-label { color: var(--ws-secondary); }
html[data-theme] :is(.calendar-editor-tabs button.active,.calendar-weekday-choice input:checked+span) { background: var(--ws-selection)!important; color: var(--ws-on-selection)!important; }
html[data-theme] .ped-columns>aside { border-color: var(--ws-line); }

/* Keep the user's standard widget sizes and scrolling content. */
html[data-theme] .widget-content>:is(.panel,.card,.linear-section) { padding: 20px; border: 0; border-radius: 0; background: transparent; margin: 0; }
html[data-theme] .widget-content>.shortcut-panel { padding: 16px; }
html[data-theme] .widget-content :is(h2,.shortcut-panel h2) { font-size: 18px; line-height: 1.4; font-weight: 500; }
html[data-theme] .home-widget[data-size=small] h3 { font-size: 16px; }
html[data-theme] .widget-more { min-height: 32px; padding: 5px 12px; font-size: 11px; line-height: 20px; }
html[data-theme] .widget-tools { border-radius: 0; background: var(--ws-container); }
html[data-theme] .layout-placeholder { border-color: var(--ws-focus); border-radius: 12px; background: var(--ws-selection); }
html[data-theme] .work-person { color: var(--ws-text); background: var(--ws-container); border-color: var(--ws-line); border-radius: 8px; }
html[data-theme] :is(.row,.linear-row)>.button,html[data-theme] :is(.row,.linear-row)>button { flex-shrink: 0; white-space: nowrap; }

@media(max-width:760px) {
  html[data-theme] :is(.hero,.auth) h1 { font-size: 26px; }
  html[data-theme] :is(.panel,.card) { padding: 20px; }
  html[data-theme] .create-panel { padding: 0; }
  html[data-theme] .create-content { padding: 20px; }
  html[data-theme] :is(button.primary,button.secondary,button.danger,.button) { min-height: 48px; padding: 12px 16px; }
  html[data-theme] :is(.hub-modal-head,.hub-modal-body,.hub-modal-footer) { padding: 18px; }
  html[data-theme] .hero>.hero-actions { max-width: 55%; }
  html[data-theme] .widget-content>:is(.panel,.card,.linear-section) { padding: 16px; }
  html[data-theme] .widget-more { min-height: 32px; padding: 5px 12px; }
  html[data-theme] .home-layout-toolbar { top: 146px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-theme] :is(button,.button,a,input,select,textarea) { transition: none; }
}