/* Hubhome design system — canonical visual layer loaded after feature styles. */
:root {
  --hb-canvas: #edf5fc;
  --hb-surface: #fff;
  --hb-surface-muted: #eff4f8;
  --hb-ink: #0b1826;
  --hb-muted: #72859a;
  --hb-line: #dde6ef;
  --hb-accent: #087cf5;
  --hb-accent-hover: #096fd8;
  --hb-accent-soft: #eff7ff;
  --hb-success: #2f8c69;
  --hb-warning: #c98020;
  --hb-danger: #cb4b52;
  --hb-danger-soft: #fff3f4;
  --hb-focus: rgb(11 120 244 / 32%);
  --hb-radius-control: 12px;
  --hb-radius-card: 18px;
  --hb-radius-panel: 24px;
  --hb-shadow-card: 0 8px 28px rgb(24 59 94 / 8%);
  --hb-shadow-overlay: 0 20px 52px rgb(16 32 51 / 18%);
}

#app.authenticated {
  --workspace-ink: var(--hb-ink);
  --workspace-muted: var(--hb-muted);
  --workspace-accent: var(--hb-accent);
  --workspace-line: var(--hb-line);
  --workspace-surface: var(--hb-surface);
  --icloud-canvas: var(--hb-canvas);
  --icloud-glass: var(--hb-surface);
  --icloud-glass-strong: var(--hb-surface);
  --icloud-border: var(--hb-line);
  --icloud-hairline: var(--hb-line);
  --icloud-shadow: var(--hb-shadow-card);
  --icloud-shadow-soft: 0 3px 14px rgb(24 59 94 / 5%);
  --accent: var(--hb-accent);
  --muted: var(--hb-muted);
  color: var(--hb-ink);
  background: var(--hb-canvas);
}

.workspace-shell--top .workspace-header {
  border-color: var(--hb-line);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 4px 18px rgb(24 59 94 / 7%);
}

.workspace-shell--top .workspace-brand b { background-color: var(--hb-ink); }
.workspace-shell--top .workspace-company select,
.workspace-shell--top .workspace-search input {
  border-color: var(--hb-line);
  background: #f7fafe;
  color: var(--hb-ink);
}
.workspace-shell--top .workspace-top-navigation > a,
.workspace-shell--top .workspace-top-group > summary { color: #31465a; }
.workspace-shell--top .workspace-top-group[open] > summary,
.workspace-shell--top .workspace-top-group[data-current='true'] > summary,
.workspace-shell--top .workspace-top-navigation > a[aria-current] {
  color: #075fbf;
  background: var(--hb-accent-soft);
}
.workspace-shell--top .workspace-top-group > summary:hover,
.workspace-shell--top .workspace-top-navigation > a:hover,
.workspace-shell--top .workspace-top-dropdown > a:hover,
.workspace-shell--top .workspace-top-dropdown > button:hover { background: #f0f6fd; }

.workspace-shell--top .workspace-content :is(h1, h2, h3) { color: var(--hb-ink); }
.workspace-shell--top .eyebrow { color: #326997; }
.workspace-shell--top .workspace-content :is(.card, .settings-panel, .project-card),
.workspace-shell--top .employee-directory,
.workspace-shell--top .project-profile-shell {
  border-color: var(--hb-line);
  background: var(--hb-surface);
  box-shadow: var(--hb-shadow-card);
}
.workspace-shell--top .project-cover { color: #356083; background: var(--hb-surface-muted); }

.workspace-shell--top .workspace-content :is(input, select, textarea) {
  border-color: var(--hb-line);
  background: #fbfdff;
  color: var(--hb-ink);
}
.workspace-shell--top :is(input, select, textarea):focus,
.workspace-shell--top :is(input, select, textarea):focus-visible {
  border-color: var(--hb-accent);
  outline: 0;
  background: var(--hb-surface);
  box-shadow: 0 0 0 3px var(--hb-focus);
}
.workspace-shell--top :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--hb-focus);
  outline-offset: 2px;
}

.workspace-shell--top :is(button, .button-link) {
  border-color: var(--hb-line);
  border-radius: var(--hb-radius-control);
  color: #263c50;
  background: var(--hb-surface);
}
.workspace-shell--top :is(button, .button-link):hover:not(:disabled) {
  border-color: #b9cce0;
  background: #f2f7fd;
}
.workspace-shell--top button.primary,
.workspace-shell--top .button-link.primary,
.workspace-shell--top .action-disclosure > .disclosure-button.primary,
.workspace-shell--top .finance-command-center > .primary {
  border-color: var(--hb-accent);
  color: #fff;
  background: var(--hb-accent);
  box-shadow: 0 8px 18px rgb(11 120 244 / 18%);
}
.workspace-shell--top button.primary:hover:not(:disabled),
.workspace-shell--top .button-link.primary:hover {
  border-color: var(--hb-accent-hover);
  color: #fff;
  background: var(--hb-accent-hover);
}
.workspace-shell--top :is(button.danger, .danger, .project-delete button[type='submit']) {
  border-color: #f0c7ca !important;
  color: #b63a42 !important;
  background: var(--hb-danger-soft) !important;
}

.workspace-shell--top .functional-tabs,
.workspace-shell--top :is(.project-status-tabs, .project-view-tabs, .task-view-switch, .finance-tabs) {
  border-color: var(--hb-line);
  background: var(--hb-surface-muted);
}
.workspace-shell--top .functional-tabs [role='tab'],
.workspace-shell--top .finance-tabs :is(a, button) { color: #4f657a; }
.workspace-shell--top .functional-tabs [role='tab'][aria-selected='true'],
.workspace-shell--top .finance-tabs :is(a, button)[aria-current] {
  border-color: #bfd8f5;
  color: #075fbf;
  background: var(--hb-surface);
  box-shadow: inset 0 -2px var(--hb-accent);
}

.workspace-shell--top .workspace-content .table-scroll,
.workspace-shell--top .workspace-content .diadoc-table-scroll {
  border-color: var(--hb-line);
  border-radius: var(--hb-radius-card);
  background: var(--hb-surface);
}
.workspace-shell--top .workspace-content thead th {
  border-color: var(--hb-line);
  color: #455d74;
  background: var(--hb-surface-muted);
}
.workspace-shell--top .workspace-content tbody :is(td, th) { border-color: #e8eef5; }
.workspace-shell--top .workspace-content tbody tr:hover > :is(td, th) { background: #f7fafe; }
.workspace-shell--top .workspace-content .data-table-row-selected > :is(td, th) { background: var(--hb-accent-soft); }
.workspace-shell--top .data-table-bulk-bar {
  border-color: #bcd7f5;
  background: #f2f8ff;
  box-shadow: var(--hb-shadow-card);
}

.workspace-shell--top .status-tag,
.workspace-shell--top .finance-state { color: #22674e; background: #e8f5ef; }
.workspace-shell--top .finance-state.reversed { color: #9b3d44; background: var(--hb-danger-soft); }
.workspace-shell--top .employee-directory-avatar,
.workspace-shell--top .workspace-user-avatar { color: #285a83; background: var(--hb-surface-muted); }

@media (max-width: 720px) {
  .workspace-shell--top :is(button, .button-link, summary, input:not([type='checkbox']):not([type='radio']), select) { min-height: 44px; }
  .workspace-shell--top .workspace-content :is(.table-scroll, .diadoc-table-scroll) { overflow-x: auto; overscroll-behavior-inline: contain; }
  .workspace-shell--top .workspace-content table { min-width: max-content; }
  .workspace-shell--top .workspace-content thead { display: table-header-group; }
}

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