/*
 * CRM 26 — Liquid Glass visual layer.
 * Glass is intentionally reserved for navigation, controls and transient UI.
 * Data-heavy content keeps a denser material for contrast and scanability.
 */

:root {
  --page: #edf3f7;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-raised: rgba(255, 255, 255, 0.94);
  --surface-muted: rgba(246, 249, 251, 0.88);
  --surface-strong: #e7eef3;
  --text: #132b3d;
  --muted: #60778a;
  --muted-2: #8798a6;
  --line: rgba(99, 129, 149, 0.18);
  --line-strong: rgba(70, 111, 137, 0.3);
  --accent: #078f9e;
  --accent-strong: #057180;
  --accent-soft: rgba(116, 222, 220, 0.18);
  --accent-glow: rgba(25, 174, 181, 0.2);
  --sidebar: rgba(242, 249, 250, 0.68);
  --sidebar-deep: rgba(229, 240, 244, 0.72);
  --sidebar-line: rgba(88, 126, 147, 0.16);
  --nav-text: #506d7f;
  --nav-active: rgba(85, 206, 207, 0.2);
  --hover: rgba(219, 241, 242, 0.72);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.76);
  --glass-popover: rgba(250, 253, 254, 0.94);
  --glass-border: rgba(255, 255, 255, 0.76);
  --glass-line: rgba(95, 128, 149, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 12px 34px rgba(38, 69, 88, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --glass-shadow-raised: 0 24px 68px rgba(20, 49, 68, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.84);
  --control-radius: 13px;
  --panel-radius: 20px;
  --spring: cubic-bezier(0.2, 0.82, 0.2, 1);
}

:root[data-theme="dark"] {
  --page: #061521;
  --surface: rgba(15, 36, 52, 0.9);
  --surface-raised: rgba(18, 42, 60, 0.95);
  --surface-muted: rgba(22, 46, 63, 0.88);
  --surface-strong: #1a3448;
  --text: #eef8fa;
  --muted: #9ab1bf;
  --muted-2: #738b9b;
  --line: rgba(151, 193, 208, 0.14);
  --line-strong: rgba(150, 206, 218, 0.27);
  --accent: #58d7d2;
  --accent-strong: #83e6e1;
  --accent-soft: rgba(51, 198, 196, 0.16);
  --accent-glow: rgba(63, 218, 212, 0.17);
  --sidebar: rgba(8, 28, 41, 0.7);
  --sidebar-deep: rgba(5, 20, 31, 0.78);
  --sidebar-line: rgba(177, 218, 228, 0.1);
  --nav-text: #9ab2c0;
  --nav-active: rgba(72, 213, 207, 0.17);
  --hover: rgba(44, 91, 108, 0.4);
  --glass: rgba(17, 42, 58, 0.55);
  --glass-strong: rgba(19, 45, 62, 0.74);
  --glass-popover: rgba(17, 41, 58, 0.94);
  --glass-border: rgba(195, 232, 239, 0.13);
  --glass-line: rgba(175, 218, 228, 0.11);
  --glass-highlight: rgba(255, 255, 255, 0.13);
  --glass-shadow: 0 16px 40px rgba(0, 8, 15, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --glass-shadow-raised: 0 28px 78px rgba(0, 7, 13, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

html {
  background: var(--page);
}

body {
  position: relative;
  background:
    radial-gradient(ellipse 65% 48% at 86% -8%, rgba(65, 203, 203, 0.2), transparent 65%),
    radial-gradient(ellipse 48% 45% at -8% 72%, rgba(83, 151, 205, 0.13), transparent 68%),
    linear-gradient(145deg, color-mix(in srgb, var(--page) 94%, #c7f2ef), var(--page));
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 68px 0 0 244px;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 18%, rgba(92, 213, 209, 0.08), transparent 24rem),
    radial-gradient(circle at 22% 80%, rgba(87, 146, 210, 0.07), transparent 28rem);
}

.app-shell {
  background: transparent;
}

/* Functional glass layer: global navigation and controls. */
.topbar {
  background: var(--glass-strong);
  border-bottom-color: var(--glass-line);
  box-shadow: 0 10px 34px rgba(34, 64, 82, 0.07), inset 0 -1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
  backdrop-filter: blur(28px) saturate(1.55);
}

.mark,
.login-art-mark {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(111, 237, 230, 0.94), rgba(5, 132, 157, 0.96) 74%);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 10px 26px rgba(5, 125, 148, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.58);
}

.mark::after,
.login-art-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px 5px auto;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent);
  pointer-events: none;
}

.topbar-context,
.sync-state,
.account-menu > summary,
.system-state > button,
.intro-actions,
.toolbar,
.data-menu > summary,
.detail-jump-link {
  background: var(--glass);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  backdrop-filter: blur(22px) saturate(1.45);
}

.system-state > button,
.account-menu > summary,
.data-menu > summary {
  overflow: hidden;
  position: relative;
}

.system-state > button::after,
.account-menu > summary::after,
.data-menu > summary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--glass-highlight), transparent 38%);
  opacity: 0.28;
  pointer-events: none;
}

.tabs {
  background:
    radial-gradient(circle at 12% 2%, rgba(68, 217, 211, 0.16), transparent 18rem),
    linear-gradient(180deg, var(--sidebar), var(--sidebar-deep));
  border-right-color: var(--sidebar-line);
  box-shadow: inset -1px 0 0 var(--glass-highlight), 12px 0 40px rgba(24, 56, 74, 0.04);
  -webkit-backdrop-filter: blur(30px) saturate(1.35);
  backdrop-filter: blur(30px) saturate(1.35);
}

.workspace-switcher {
  border-color: var(--glass-border);
  background: color-mix(in srgb, var(--glass) 82%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}

.workspace-option,
.tab,
.nav-group > summary {
  transition:
    color 150ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 240ms var(--spring);
}

.tabs .tab.active,
.tabs .tab.active:hover:not(:disabled) {
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--glass) 72%, transparent));
  border-color: color-mix(in srgb, var(--accent) 27%, var(--glass-border));
  box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--glass-highlight), 0 8px 24px rgba(11, 119, 139, 0.08);
}

/* Content stays deliberately denser than the navigation layer. */
.content {
  isolation: isolate;
}

.intro h1,
.login-card h1 {
  text-wrap: balance;
  letter-spacing: -0.05em;
}

.section-overline,
.eyebrow,
.login-art-overline {
  letter-spacing: 0.13em;
}

.kpi-card,
.table-panel,
.stat-card,
.stat-section,
.work-card,
.work-metric,
.help-progress,
.help-lesson,
.help-repeat,
.compensation-card,
.load-change-row,
.filters-panel,
.selection-tray,
.organization-intro,
.management-lead,
.organization-metric,
.organization-leader,
.organization-branch,
.organization-unlinked,
.responsibility-step,
.management-card {
  border-color: var(--glass-border);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface) 90%, transparent));
  box-shadow: 0 12px 32px rgba(33, 65, 84, 0.075), inset 0 1px 0 var(--glass-highlight);
}

.kpi-card {
  border-radius: 17px;
}

.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%);
  pointer-events: none;
}

.kpi-card:hover {
  transform: translateY(-3px) scale(1.006);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-border));
  box-shadow: 0 20px 42px rgba(28, 70, 91, 0.12), inset 0 1px 0 var(--glass-highlight);
}

.freshness-banner {
  border: 1px solid color-mix(in srgb, var(--warning-text) 22%, transparent);
  background: color-mix(in srgb, var(--warning-surface) 84%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.toolbar {
  border-radius: 16px;
}

.toolbar button,
.data-menu summary,
button {
  border-radius: var(--control-radius);
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px var(--accent-glow), inset 0 1px 0 var(--glass-highlight);
}

button:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

.primary,
.toolbar #new-program:not([hidden]),
#new-order:not([hidden]),
.toolbar #new-person:not([hidden]) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: color-mix(in srgb, var(--accent) 78%, white);
  box-shadow: 0 9px 22px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

input,
select,
textarea {
  border-color: var(--glass-line);
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  box-shadow: inset 0 1px 2px rgba(12, 39, 55, 0.04), 0 1px 0 var(--glass-highlight);
}

select {
  cursor: pointer;
}

input:focus,
select:focus,
textarea:focus {
  background-color: var(--surface-raised);
  box-shadow: 0 0 0 4px var(--accent-glow), inset 0 1px 0 var(--glass-highlight);
}

.account-menu-popover,
.data-menu-content {
  border-color: var(--glass-border);
  background: var(--glass-popover);
  box-shadow: var(--glass-shadow-raised);
  -webkit-backdrop-filter: blur(34px) saturate(1.6);
  backdrop-filter: blur(34px) saturate(1.6);
}

.account-menu-popover {
  border-radius: 18px;
}

.data-menu-content {
  border-radius: 16px;
}

.account-menu-popover button:hover:not(:disabled),
.data-menu-content button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

.table-panel {
  border-radius: 18px;
}

.table-meta {
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  border-color: var(--glass-line);
}

th {
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 64%, var(--surface));
}

.status-chip {
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.detail-panel {
  border-color: var(--glass-border);
  background: var(--glass-popover);
  box-shadow: -28px 0 80px rgba(3, 25, 38, 0.24), inset 1px 0 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(34px) saturate(1.45);
  backdrop-filter: blur(34px) saturate(1.45);
}

.detail-head,
.entity-actionbar {
  background: color-mix(in srgb, var(--glass-popover) 96%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
}

.detail-backdrop,
dialog::backdrop {
  background: rgba(4, 20, 31, 0.4);
  -webkit-backdrop-filter: blur(9px) saturate(0.88);
  backdrop-filter: blur(9px) saturate(0.88);
}

dialog {
  border-color: var(--glass-border);
  border-radius: 22px;
  background: var(--glass-popover);
  box-shadow: var(--glass-shadow-raised);
  -webkit-backdrop-filter: blur(34px) saturate(1.5);
  backdrop-filter: blur(34px) saturate(1.5);
}

.dialog-head {
  background: color-mix(in srgb, var(--glass-popover) 97%, transparent);
}

/* Login is a product surface, not a small utility box. */
.login-view,
.login-panel {
  background:
    radial-gradient(circle at 84% 12%, rgba(87, 221, 215, 0.23), transparent 25rem),
    radial-gradient(circle at 13% 88%, rgba(73, 136, 200, 0.18), transparent 30rem),
    var(--page);
}

.login-art {
  background:
    radial-gradient(circle at 78% 16%, rgba(100, 232, 223, 0.28), transparent 28%),
    radial-gradient(circle at 7% 93%, rgba(75, 141, 197, 0.34), transparent 37%),
    linear-gradient(150deg, rgba(18, 67, 83, 0.97), rgba(6, 36, 53, 0.98) 62%, rgba(4, 24, 37, 0.99));
}

.login-art::before {
  border-color: rgba(143, 241, 233, 0.15);
  box-shadow: 0 0 0 90px rgba(107, 228, 221, 0.035), 0 0 0 180px rgba(107, 228, 221, 0.02);
}

.login-preview {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(244, 253, 253, 0.74);
  box-shadow: 0 36px 90px rgba(0, 15, 25, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
}

.login-card {
  align-items: center;
  background: rgba(248, 252, 253, 0.62);
  border-left: 1px solid rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  backdrop-filter: blur(28px) saturate(1.35);
}

:root[data-theme="dark"] .login-card {
  background: rgba(8, 27, 40, 0.7);
}

.login-card-inner {
  position: relative;
  padding: clamp(25px, 3vw, 38px);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: var(--glass);
  box-shadow: var(--glass-shadow-raised);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
}

.login-card form input {
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
}

/* Fluid, quiet motion: transitions explain state without delaying work. */
.account-menu-popover,
.data-menu-content {
  animation: liquid-menu-in 280ms var(--spring) both;
}

dialog[open] {
  animation: liquid-dialog-in 340ms var(--spring) both;
}

.detail-panel {
  transition: transform 380ms var(--spring), opacity 240ms ease, visibility 0s linear 380ms;
}

.detail-panel.is-open {
  transition-delay: 0s;
}

@keyframes liquid-menu-in {
  from { opacity: 0; transform: translateY(-9px) scale(0.94); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes liquid-dialog-in {
  from { opacity: 0; transform: translateY(24px) scale(0.965); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .topbar,
  .tabs,
  .toolbar,
  .account-menu-popover,
  .data-menu-content,
  .detail-panel,
  dialog,
  .login-card,
  .login-card-inner {
    background: var(--surface-raised);
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(46, 79, 99, 0.42);
    --glass-border: rgba(46, 79, 99, 0.48);
  }
  :root[data-theme="dark"] {
    --line: rgba(190, 226, 234, 0.38);
    --glass-border: rgba(190, 226, 234, 0.42);
  }
  .topbar,
  .tabs,
  .toolbar,
  dialog,
  .detail-panel { background: var(--surface-raised); }
}

@media (forced-colors: active) {
  .topbar,
  .tabs,
  .toolbar,
  .account-menu-popover,
  .data-menu-content,
  .detail-panel,
  dialog,
  .login-card,
  .login-card-inner { border: 1px solid CanvasText; background: Canvas; box-shadow: none; }
}

@media (max-width: 1260px) {
  body::before { left: 214px; }
}

@media (max-width: 960px) {
  body::before { left: 0; }
  .tabs {
    border-right: 1px solid var(--glass-border);
    background:
      radial-gradient(circle at 12% 2%, rgba(68, 217, 211, 0.18), transparent 18rem),
      color-mix(in srgb, var(--sidebar-deep) 91%, transparent);
    box-shadow: 22px 0 72px rgba(1, 18, 29, 0.3), inset -1px 0 0 var(--glass-highlight);
  }
}

@media (max-width: 680px) {
  body { background-attachment: scroll; }
  .topbar {
    background: var(--glass-strong);
    border-bottom-color: var(--glass-line);
    box-shadow: 0 9px 28px rgba(8, 35, 51, 0.1), inset 0 -1px 0 var(--glass-highlight);
    -webkit-backdrop-filter: blur(25px) saturate(1.5);
    backdrop-filter: blur(25px) saturate(1.5);
  }
  .content { padding-top: 20px; }
  .toolbar { border-radius: 15px; }
  .login-panel { background: var(--page); }
  .login-art { min-height: 226px; }
  .login-card {
    min-height: calc(100vh - 226px);
    padding: 24px 18px 42px;
    border-left: 0;
    border-top: 1px solid var(--glass-border);
    border-radius: 26px 26px 0 0;
    margin-top: -20px;
  }
  .login-card-inner {
    width: min(430px, 100%);
    padding: 23px 20px;
    border-radius: 22px;
  }
  .login-art-copy { margin-top: 27px; }
}

@media (hover: none) {
  button:hover:not(:disabled),
  .kpi-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .account-menu-popover,
  .data-menu-content,
  dialog[open] { filter: none !important; }
}