/* BIMFM Portal Release 20.9 — Visual System Refresh
   Presentation-only layer. No database or workflow logic changes. */

:root {
  --ui-brand-950: #0a2742;
  --ui-brand-900: #10395f;
  --ui-brand-800: #174e7c;
  --ui-brand-700: #1f659e;
  --ui-brand-600: #2c7fbd;
  --ui-brand-500: #3b95d4;
  --ui-brand-100: #eaf5fd;
  --ui-accent: #f7bd38;
  --ui-accent-soft: #fff6d8;
  --ui-canvas: #f5f8fc;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  --ui-surface-soft: #f8fbfe;
  --ui-border: #dfe8f1;
  --ui-border-strong: #cddae6;
  --ui-text: #1d3145;
  --ui-text-strong: #102a43;
  --ui-muted: #6e8194;
  --ui-success: #1f8a58;
  --ui-success-soft: #eaf8f1;
  --ui-warning: #a96b00;
  --ui-warning-soft: #fff6df;
  --ui-danger: #c64545;
  --ui-danger-soft: #fff0f0;
  --ui-info: #2678b5;
  --ui-info-soft: #eaf4fc;
  --ui-purple: #7254b7;
  --ui-purple-soft: #f2edff;
  --ui-shadow-xs: 0 1px 2px rgba(10, 39, 66, 0.04);
  --ui-shadow-sm: 0 8px 24px rgba(10, 39, 66, 0.07);
  --ui-shadow-md: 0 16px 42px rgba(10, 39, 66, 0.10);
  --ui-shadow-lg: 0 30px 70px rgba(10, 39, 66, 0.16);
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-radius-xl: 28px;
  --ui-sidebar-width: 282px;
  --ui-topbar-height: 78px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --ui-canvas: #0d1722;
  --ui-surface: #142130;
  --ui-surface-raised: #182738;
  --ui-surface-soft: #101c29;
  --ui-border: #2a3b4d;
  --ui-border-strong: #3a4d61;
  --ui-text: #d7e3ee;
  --ui-text-strong: #f3f8fc;
  --ui-muted: #9db0c1;
  --ui-brand-100: #123450;
  --ui-success-soft: #153b2b;
  --ui-warning-soft: #3a2e12;
  --ui-danger-soft: #3e2023;
  --ui-info-soft: #173650;
  --ui-purple-soft: #2b2441;
  --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --ui-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.22);
  --ui-shadow-md: 0 20px 44px rgba(0, 0, 0, 0.30);
  --ui-shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  background: var(--ui-canvas);
}

body {
  color: var(--ui-text);
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 149, 212, 0.10), transparent 28rem),
    radial-gradient(circle at 0% 100%, rgba(247, 189, 56, 0.06), transparent 24rem),
    var(--ui-canvas);
  font-family: Inter, "Segoe UI", "Microsoft JhengHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 149, 212, 0.13), transparent 30rem),
    radial-gradient(circle at 0% 100%, rgba(247, 189, 56, 0.05), transparent 26rem),
    var(--ui-canvas);
}

::selection {
  color: #fff;
  background: var(--ui-brand-600);
}

:focus-visible {
  outline: 3px solid rgba(59, 149, 212, 0.34);
  outline-offset: 2px;
}

a {
  color: var(--ui-brand-700);
}

h1, h2, h3, h4,
strong {
  color: var(--ui-text-strong);
}

.muted,
small,
.subtitle,
.version {
  color: var(--ui-muted);
}

/* Main application shell */
.app-frame {
  min-height: 100vh;
}

.side-nav {
  width: var(--ui-sidebar-width);
  padding: 18px 14px 16px;
  background:
    radial-gradient(circle at 0 0, rgba(59, 149, 212, 0.22), transparent 18rem),
    linear-gradient(180deg, #102f4d 0%, #0b2137 52%, #081b2d 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 12px 0 40px rgba(7, 28, 47, 0.15);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 99px; }

.side-nav-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 10px;
}

.side-brand {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 16px;
}

.side-brand:hover {
  background: rgba(255, 255, 255, 0.05);
}

.brand-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.brand-copy strong {
  color: #fff;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.brand-copy small {
  margin-top: 3px;
  color: #a9bfd3;
  font-size: 0.69rem;
}

.nav-close {
  display: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 11px;
  color: #d9e7f3;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.35rem;
  cursor: pointer;
}

.side-workspace-card {
  position: relative;
  overflow: hidden;
  margin: 7px 6px 15px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
}

.side-workspace-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -38px;
  width: 92px;
  height: 92px;
  border: 20px solid rgba(247, 189, 56, 0.12);
  border-radius: 50%;
}

.side-workspace-card span,
.side-workspace-card strong,
.side-workspace-card small {
  position: relative;
  z-index: 1;
  display: block;
}

.workspace-kicker {
  color: #7eb9e5;
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.side-workspace-card strong {
  margin-top: 5px;
  color: #fff;
  font-size: 0.82rem;
}

.side-workspace-card small {
  margin-top: 5px;
  color: #91a9bd;
  font-size: 0.66rem;
}

.side-nav nav {
  gap: 2px;
}

.side-nav nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 1px 0;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #c9d8e6;
  font-size: 0.81rem;
  font-weight: 650;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.side-nav nav a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.075);
  transform: translateX(2px);
}

.side-nav nav a.active {
  color: #fff;
  border-color: rgba(115, 184, 236, 0.18);
  background: linear-gradient(90deg, rgba(59, 149, 212, 0.26), rgba(59, 149, 212, 0.10));
  box-shadow: inset 3px 0 0 #54a7e0;
}

.side-nav nav a.active::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-accent);
  box-shadow: 0 0 0 4px rgba(247, 189, 56, 0.10);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 9px;
  color: #a9cae4;
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.76rem;
  font-weight: 900;
}

.side-nav nav a.active .nav-icon,
.side-nav nav a:hover .nav-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.11);
}

.nav-label {
  padding: 18px 10px 7px;
  color: #708aa2;
  font-size: 0.60rem;
  letter-spacing: 0.16em;
}

.side-nav-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 6px 0;
  padding: 13px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.side-nav-foot strong,
.side-nav-foot small {
  display: block;
}

.side-nav-foot strong {
  color: #dce9f4;
  font-size: 0.72rem;
}

.side-nav-foot small {
  margin-top: 2px;
  color: #7892aa;
  font-size: 0.61rem;
}

.system-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ed394;
  box-shadow: 0 0 0 5px rgba(78, 211, 148, 0.10);
}

.app-main {
  margin-left: var(--ui-sidebar-width);
  min-width: 0;
}

.modern-topbar {
  min-height: var(--ui-topbar-height);
  height: auto;
  padding: 11px 26px;
  gap: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 92%, transparent);
  background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
  box-shadow: 0 8px 24px rgba(10, 39, 66, 0.035);
  backdrop-filter: blur(18px) saturate(140%);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  flex: 0 0 42px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface-soft);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px auto;
  border-radius: 99px;
  background: var(--ui-text-strong);
}

.topbar-title {
  min-width: 0;
}

.topbar-title strong {
  font-size: 0.94rem;
  letter-spacing: -0.012em;
}

.topbar-title > span:last-child {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 0.67rem;
}

.topbar-kicker {
  margin-bottom: 2px;
  color: var(--ui-brand-600) !important;
  font-size: 0.55rem !important;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.topbar-date {
  max-width: 160px;
  color: var(--ui-muted);
  font-size: 0.70rem;
  font-weight: 650;
  white-space: nowrap;
}

.topbar-icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  color: var(--ui-text);
  background: var(--ui-surface-soft);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.topbar-icon-button:hover {
  transform: translateY(-1px);
  border-color: var(--ui-border-strong);
  background: var(--ui-surface);
}

.topbar-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-text);
  text-decoration: none;
}

.topbar-shortcut em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 750;
}

.theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-icon-dark { display: inline; }

.language-switcher {
  height: 40px;
  margin: 0;
  padding: 4px;
  gap: 1px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface-soft);
}

.language-switcher span {
  display: none;
}

.language-switcher button {
  min-width: 38px;
  height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  color: var(--ui-muted);
  font-size: 0.66rem;
  font-weight: 800;
  opacity: 1;
  text-decoration: none !important;
}

.language-switcher button.active {
  color: #fff;
  background: var(--ui-brand-700);
  box-shadow: 0 5px 12px rgba(31, 101, 158, 0.20);
}

.user-menu {
  gap: 10px;
  padding-left: 2px;
}

.user-avatar {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1px solid rgba(59, 149, 212, 0.18);
  border-radius: 13px;
  color: var(--ui-brand-800) !important;
  background: linear-gradient(135deg, var(--ui-brand-100), var(--ui-surface));
  font-size: 0.82rem !important;
  font-weight: 900;
}

.user-menu > div {
  min-width: 112px;
  text-align: left;
}

.user-menu > div strong {
  max-width: 180px;
  overflow: hidden;
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu > div span {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 0.63rem;
}

.ghost-button {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  color: var(--ui-text);
  background: var(--ui-surface-soft);
  font-size: 0.68rem;
}

.staff-layout .page-shell,
.member-layout .page-shell {
  width: min(1460px, calc(100% - 44px));
  margin: 28px auto 64px;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  color: var(--ui-muted);
  font-size: 0.68rem;
}

/* Public/login shell */
.public-layout {
  overflow-x: hidden;
}

.public-background {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(16, 57, 95, 0.98), rgba(8, 31, 52, 0.98)),
    var(--ui-brand-950);
}

.public-background span {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}

.public-background span:nth-child(1) {
  width: 520px;
  height: 520px;
  top: -240px;
  right: -140px;
  background: radial-gradient(circle, rgba(59, 149, 212, 0.34), transparent 68%);
}

.public-background span:nth-child(2) {
  width: 420px;
  height: 420px;
  left: -180px;
  bottom: -180px;
  background: radial-gradient(circle, rgba(247, 189, 56, 0.17), transparent 70%);
}

.public-background span:nth-child(3) {
  width: 260px;
  height: 260px;
  left: 48%;
  top: 32%;
  border: 38px solid rgba(255, 255, 255, 0.025);
}

.public-topbar {
  min-height: 82px;
  padding: 16px clamp(18px, 5vw, 68px);
  background: rgba(7, 27, 45, 0.40);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.public-brand img {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.public-brand .brand { color: #fff; }
.public-brand .subtitle { color: #a9bfd3; }
.public-topbar .version { color: #a9bfd3; }
.public-topbar .topbar-icon-button,
.public-topbar .language-switcher {
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.public-topbar .language-switcher button { color: #c7d5e2; }
.public-topbar .language-switcher button.active { color: #fff; background: rgba(59, 149, 212, 0.85); }

.public-page-shell {
  width: min(1180px, calc(100% - 30px));
  min-height: calc(100vh - 170px);
  margin: 0 auto 40px;
  display: grid;
  align-items: center;
}

.auth-card,
.auth-card.modern-auth {
  position: relative;
  width: min(500px, 100%);
  margin: 52px auto;
  padding: clamp(28px, 5vw, 44px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ui-radius-xl);
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
  box-shadow: var(--ui-shadow-lg);
  backdrop-filter: blur(20px);
}

.auth-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -72px;
  top: -82px;
  border: 28px solid rgba(59, 149, 212, 0.09);
  border-radius: 50%;
}

.auth-card .eyebrow,
.auth-card h1,
.auth-card p,
.auth-card form,
.auth-card .link-row,
.auth-icon {
  position: relative;
  z-index: 1;
}

.auth-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--ui-brand-600), var(--ui-brand-800));
  box-shadow: 0 14px 30px rgba(31, 101, 158, 0.26);
}

.auth-card h1 {
  margin-bottom: 9px;
  color: var(--ui-text-strong);
  font-size: clamp(1.9rem, 4vw, 2.45rem);
  letter-spacing: -0.04em;
}

.auth-card form {
  margin-top: 28px;
}

.auth-card label {
  margin-top: 16px;
}

.auth-card input {
  min-height: 50px;
}

.auth-card .primary {
  width: 100%;
  min-height: 50px;
  margin-top: 22px;
}

.auth-card .link-row {
  margin: 22px 0 0;
  text-align: center;
  font-size: 0.78rem;
}

/* Shared cards and page headings */
.panel,
.table-panel,
.dashboard-panel,
.attendance-card,
.stat-card,
.kpi-card,
.content-card,
.payable-card,
.clear-dtr-card,
.member-summary-card,
.assignment-card {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.panel,
.table-panel,
.dashboard-panel,
.content-card,
.attendance-card {
  border-radius: var(--ui-radius-lg);
}

.panel,
.table-panel,
.dashboard-panel,
.content-card {
  padding: clamp(19px, 2.4vw, 28px);
}

.page-heading,
.member-page-heading,
.finance-page-header {
  margin-bottom: 24px;
}

.page-heading h1,
.member-page-heading h1,
.finance-page-header h1,
.hero-panel h1 {
  color: var(--ui-text-strong);
  font-size: clamp(1.78rem, 3vw, 2.55rem);
  letter-spacing: -0.045em;
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--ui-brand-600);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
}

.hero-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(25px, 4vw, 38px);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-xl);
  color: var(--ui-text);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--ui-brand-100) 70%, var(--ui-surface)), var(--ui-surface) 62%);
  box-shadow: var(--ui-shadow-sm);
}

.hero-panel::after {
  content: "";
  position: absolute;
  right: -78px;
  bottom: -116px;
  width: 260px;
  height: 260px;
  border: 44px solid rgba(59, 149, 212, 0.08);
  border-radius: 50%;
}

.hero-panel > * {
  position: relative;
  z-index: 1;
}

.hero-panel p {
  max-width: 780px;
  color: var(--ui-muted);
  line-height: 1.65;
}

.hero-badge,
.role-pill,
.status-badge,
.badge,
.status-chip {
  border-radius: 999px;
}

.hero-badge {
  border-color: color-mix(in srgb, var(--ui-brand-600) 28%, var(--ui-border));
  color: var(--ui-brand-700);
  background: color-mix(in srgb, var(--ui-brand-100) 78%, var(--ui-surface));
}

/* Dashboard */
.dashboard-hero {
  position: relative;
  overflow: hidden;
  min-height: 268px;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 10%, rgba(92, 174, 232, 0.22), transparent 20rem),
    linear-gradient(125deg, #123d66 0%, #185b8f 56%, #257cad 100%);
  box-shadow: 0 26px 60px rgba(16, 57, 95, 0.24);
}

.dashboard-hero::before {
  content: "";
  position: absolute;
  right: 6%;
  top: -70px;
  width: 270px;
  height: 270px;
  border: 46px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  right: 30%;
  bottom: -82px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(247, 189, 56, 0.09);
}

.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.05em; }
.dashboard-hero p { max-width: 720px; color: #d7e9f7; font-size: 0.94rem; line-height: 1.65; }
.hero-eyebrow { color: #9ad2f6; }

.light-button,
.glass-button {
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 13px;
}

.light-button {
  color: var(--ui-brand-900);
  background: #fff;
}

.glass-button {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.10);
}

.hero-status-card {
  min-width: 250px;
  padding: 23px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(10px);
}

.hero-status-card span,
.hero-status-card small { color: #d7e9f7; }
.hero-status-card strong { color: #fff; font-size: 2.4rem; letter-spacing: -0.05em; }
.hero-progress { height: 8px; background: rgba(255, 255, 255, 0.16); }
.hero-progress i { background: linear-gradient(90deg, #ffca49, #fff1ad); }

.dashboard-kpi-grid {
  gap: 16px;
  margin: 20px 0;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  padding: 20px;
  border-radius: 19px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.kpi-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -38px;
  width: 100px;
  height: 100px;
  border: 16px solid currentColor;
  border-radius: 50%;
  opacity: 0.035;
}

.kpi-card:hover {
  transform: translateY(-3px);
  border-color: var(--ui-border-strong);
  box-shadow: var(--ui-shadow-md);
}

.kpi-card strong {
  font-size: 2.25rem;
  letter-spacing: -0.05em;
}

.kpi-card small {
  color: var(--ui-muted);
  font-size: 0.68rem;
}

.kpi-card p {
  color: var(--ui-muted);
  font-size: 0.70rem;
}

.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.dashboard-main-grid,
.dashboard-bottom-grid {
  gap: 20px;
}

.dashboard-panel {
  border-radius: var(--ui-radius-lg);
}

.panel-heading-modern {
  margin-bottom: 20px;
}

.panel-heading-modern h2 {
  color: var(--ui-text-strong);
  font-size: 1.18rem;
  letter-spacing: -0.025em;
}

.panel-heading-modern p {
  color: var(--ui-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.text-link {
  color: var(--ui-brand-700);
}

.approval-row,
.sync-metric {
  border-color: var(--ui-border);
}

.approval-row {
  border-radius: 12px;
  padding: 13px 9px;
  transition: background 140ms ease, transform 140ms ease;
}

.approval-row:hover {
  background: var(--ui-surface-soft);
  transform: translateX(2px);
}

.approval-row strong,
.sync-metric strong {
  color: var(--ui-text-strong);
}

.all-clear,
.dashboard-empty,
.empty-state {
  border: 1px dashed var(--ui-border-strong);
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
}

.quick-launch-grid a {
  border-color: var(--ui-border);
  background: var(--ui-surface-soft);
}

.quick-launch-grid a:hover {
  border-color: color-mix(in srgb, var(--ui-brand-600) 42%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-brand-100) 56%, var(--ui-surface));
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-xs);
}

.quick-launch-grid strong,
.activity-item strong {
  color: var(--ui-text-strong);
}

.quick-launch-grid small,
.activity-item p,
.activity-item small {
  color: var(--ui-muted);
}

/* Statistics */
.stats-grid,
.finance-overview-cards,
.member-monthly-grid,
.clear-dtr-grid,
.compact-payroll-grid {
  gap: 15px;
}

.stat-card,
.member-summary-card,
.clear-dtr-card,
.payable-card {
  position: relative;
  overflow: hidden;
  padding: 21px;
  border-radius: 18px;
}

.stat-card::after,
.member-summary-card::after,
.clear-dtr-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -42px;
  width: 100px;
  height: 100px;
  border: 17px solid currentColor;
  border-radius: 50%;
  opacity: 0.035;
}

.stat-card span,
.member-summary-card span,
.clear-dtr-card span,
.payable-card span {
  color: var(--ui-muted);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}

.stat-card strong,
.member-summary-card strong,
.clear-dtr-card strong,
.payable-card strong {
  color: var(--ui-text-strong);
  font-size: 2.35rem;
  letter-spacing: -0.05em;
}

.stat-card small,
.member-summary-card small,
.clear-dtr-card small,
.payable-card small {
  color: var(--ui-muted);
}

/* Tables */
.modern-table-wrap,
.table-wrap,
.responsive-table {
  overflow: auto;
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  background: var(--ui-surface);
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}

.modern-table-wrap::after,
.table-wrap::after {
  content: "";
  display: block;
  height: 1px;
}

.modern-table,
table {
  border-collapse: separate;
  border-spacing: 0;
}

.modern-table th,
table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 12px;
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-muted);
  background: color-mix(in srgb, var(--ui-surface-soft) 94%, transparent);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.modern-table td,
table td {
  padding: 13px 12px;
  border-bottom-color: var(--ui-border);
  color: var(--ui-text);
}

.modern-table tbody tr,
table tbody tr {
  transition: background 120ms ease;
}

.modern-table tbody tr:hover,
table tbody tr:hover {
  background: color-mix(in srgb, var(--ui-brand-100) 40%, transparent);
}

.modern-table tbody tr:last-child td,
table tbody tr:last-child td {
  border-bottom: 0;
}

.person-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-600) 16%, var(--ui-border));
  border-radius: 13px;
  color: var(--ui-brand-800);
  background: linear-gradient(135deg, var(--ui-brand-100), var(--ui-surface));
}

.person-cell strong,
.table-value {
  color: var(--ui-text-strong);
}

.person-cell small,
.mapping-detail {
  color: var(--ui-muted);
}

.row-arrow,
.task-count {
  background: var(--ui-surface-soft);
}

.row-arrow:hover {
  color: #fff;
  background: var(--ui-brand-700);
}

.status-chip,
.badge,
.status-badge {
  border: 1px solid transparent;
  font-weight: 800;
}

.status-chip.status-complete,
.status-chip.status-currently-working,
.badge.good,
.good {
  border-color: color-mix(in srgb, var(--ui-success) 18%, transparent);
  color: var(--ui-success);
  background: var(--ui-success-soft);
}

.status-chip.status-no-record,
.status-chip.status-account-disabled,
.badge.danger,
.danger,
.error {
  border-color: color-mix(in srgb, var(--ui-danger) 18%, transparent);
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}

.status-chip.status-missing-time-out,
.badge.warning,
.warning {
  border-color: color-mix(in srgb, var(--ui-warning) 18%, transparent);
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

.mapping-table .unmapped-row {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-warning-soft) 72%, transparent), transparent 46%);
}

.mapping-form {
  margin: 0;
}

/* Table toolbar added in Release 20.9 */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 16px;
}

.table-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
}

.table-search::before {
  content: "⌕";
  position: absolute;
  left: 13px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--ui-muted);
  font-size: 1rem;
}

.table-search input {
  min-height: 42px;
  padding-left: 38px;
  border-radius: 13px;
  background: var(--ui-surface-soft);
}

.table-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  color: var(--ui-text);
  background: var(--ui-surface-soft);
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}

.table-filter-toggle input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.table-result-count {
  color: var(--ui-muted);
  font-size: 0.69rem;
}

/* Forms */
label {
  color: var(--ui-text-strong);
  font-size: 0.79rem;
  font-weight: 750;
}

input,
select,
textarea {
  min-height: 44px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 12px;
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-xs);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--ui-brand-600) 34%, var(--ui-border-strong));
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ui-brand-500);
  box-shadow: 0 0 0 4px rgba(59, 149, 212, 0.13);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--ui-muted) 72%, transparent);
}

input[readonly],
.readonly-field {
  background: var(--ui-surface-soft);
}

.button,
button.primary,
button.secondary,
button.danger,
button.outline,
a.button {
  min-height: 40px;
  border-radius: 12px;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.005em;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.button:hover,
button.primary:hover,
button.secondary:hover,
a.button:hover {
  transform: translateY(-1px);
}

.button.primary,
button.primary,
a.primary {
  border-color: var(--ui-brand-700);
  color: #fff;
  background: linear-gradient(135deg, var(--ui-brand-600), var(--ui-brand-800));
  box-shadow: 0 9px 18px rgba(31, 101, 158, 0.18);
}

.button.primary:hover,
button.primary:hover,
a.primary:hover {
  box-shadow: 0 12px 24px rgba(31, 101, 158, 0.26);
}

.button.secondary,
button.secondary,
a.secondary {
  border-color: var(--ui-border-strong);
  color: var(--ui-text-strong);
  background: var(--ui-surface-soft);
}

.button.danger,
button.danger {
  color: #fff;
  background: linear-gradient(135deg, #d85d5d, #b63737);
}

/* Notices and flashes */
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.flash-mark {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 8px;
  background: var(--ui-surface-soft);
  font-weight: 900;
}

.flash.success { color: var(--ui-success); border-color: color-mix(in srgb, var(--ui-success) 22%, var(--ui-border)); background: var(--ui-success-soft); }
.flash.error { color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 22%, var(--ui-border)); background: var(--ui-danger-soft); }
.flash.warning { color: var(--ui-warning); border-color: color-mix(in srgb, var(--ui-warning) 22%, var(--ui-border)); background: var(--ui-warning-soft); }

.note-box,
.notice,
.rules-notice,
.finance-note,
.detail-callout,
.assignment-info,
.linked-assignment-panel {
  border-color: var(--ui-border-strong);
  color: var(--ui-text);
  background: var(--ui-surface-soft);
}

/* Finance and DTR visual cleanup */
.finance-filter-panel,
.finance-summary-panel,
.payroll-summary-card,
.dtr-header-panel {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.payroll-formula-banner,
.summary-payroll-formula,
.glance-equation,
.conversion-equation,
.compact-assignment,
.assignment-meta > div,
.member-credit-strip > div {
  border-color: var(--ui-border);
  color: var(--ui-text);
  background: var(--ui-surface-soft);
}

.finance-factor-table-wrap,
.finance-factor-table,
.finance-whole-day-table {
  border-color: var(--ui-border);
}

.finance-number.payable,
.member-summary-card.payable,
.clear-dtr-card.calendar,
.payable-card.scheduled {
  border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border));
  color: var(--ui-info);
  background: var(--ui-info-soft);
}

.member-summary-card.worked,
.clear-dtr-card.worked,
.payable-card.payable {
  border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border));
  color: var(--ui-success);
  background: var(--ui-success-soft);
}

.member-summary-card.leave,
.clear-dtr-card.leave,
.payable-card.non-payable,
.finance-number.nonpayable {
  border-color: color-mix(in srgb, var(--ui-danger) 25%, var(--ui-border));
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}

.member-summary-card.comp,
.clear-dtr-card.comp {
  border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border));
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

/* Attendance and freelancer workspace */
.member-page-heading,
.member-identity-card {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.attendance-card {
  position: relative;
  overflow: hidden;
}

.attendance-card::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -120px;
  width: 240px;
  height: 240px;
  border: 42px solid rgba(59, 149, 212, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.official-time {
  color: var(--ui-brand-700);
  letter-spacing: -0.04em;
}

.punch-grid > div,
.calculation-grid > div,
.today-record {
  border-color: var(--ui-border);
  background: var(--ui-surface-soft);
}

/* Progress */
.progress-track {
  height: 9px;
  background: var(--ui-border);
}

.progress-fill {
  background: linear-gradient(90deg, var(--ui-brand-600), #58b0df);
}

/* Dark theme targeted corrections */
html[data-theme="dark"] .modern-topbar {
  background: rgba(20, 33, 48, 0.88);
}

html[data-theme="dark"] .side-nav {
  background:
    radial-gradient(circle at 0 0, rgba(59, 149, 212, 0.16), transparent 18rem),
    linear-gradient(180deg, #0a2035 0%, #071824 100%);
}

html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .attendance-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .member-identity-card,
html[data-theme="dark"] .finance-filter-panel,
html[data-theme="dark"] .finance-summary-panel,
html[data-theme="dark"] .payroll-summary-card,
html[data-theme="dark"] .dtr-header-panel {
  color: var(--ui-text);
  background: var(--ui-surface);
}

html[data-theme="dark"] .dashboard-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(92, 174, 232, 0.16), transparent 20rem),
    linear-gradient(125deg, #0d3152 0%, #134b74 56%, #1c658f 100%);
}

html[data-theme="dark"] .modern-table th,
html[data-theme="dark"] table th {
  background: rgba(16, 28, 41, 0.94);
}

html[data-theme="dark"] .modern-table tbody tr:hover,
html[data-theme="dark"] table tbody tr:hover {
  background: rgba(59, 149, 212, 0.08);
}

html[data-theme="dark"] .mapping-form select,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: var(--ui-text);
  background: var(--ui-surface-raised);
}

html[data-theme="dark"] .mapping-table .unmapped-row {
  background: linear-gradient(90deg, rgba(169, 107, 0, 0.15), transparent 46%);
}

/* Mobile and medium screens */
.nav-scrim {
  display: none;
}

@media (max-width: 1180px) {
  .topbar-date { display: none; }
  .user-menu > div { display: none; }
}

@media (max-width: 1000px) {
  .side-nav {
    width: min(88vw, 306px);
    transform: translateX(-104%);
    transition: transform 200ms ease;
  }

  .nav-open .side-nav { transform: translateX(0); }
  .nav-open { overflow: hidden; }
  .nav-open .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(4, 16, 27, 0.56);
    backdrop-filter: blur(3px);
  }

  .nav-close { display: grid; place-items: center; }
  .app-main { margin-left: 0; }
  .nav-toggle { display: inline-block; }
  .modern-topbar { padding: 10px 16px; }
  .staff-layout .page-shell,
  .member-layout .page-shell { width: min(100% - 28px, 1460px); }
}

@media (max-width: 760px) {
  :root { --ui-topbar-height: 68px; }
  .modern-topbar { gap: 8px; }
  .topbar-title > span:last-child,
  .topbar-kicker,
  .topbar-shortcut em,
  .user-menu form,
  .version { display: none; }
  .topbar-title strong { font-size: 0.82rem; }
  .topbar-shortcut { min-width: 40px; padding: 0; }
  .user-menu { display: none; }
  .language-switcher button { min-width: 33px; padding-inline: 5px; }
  .dashboard-hero { grid-template-columns: 1fr; min-height: 0; padding: 28px 24px; }
  .dashboard-hero h1 { font-size: 2rem; }
  .hero-status-card { min-width: 0; }
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid:has(.stat-card:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-toolbar { align-items: stretch; }
  .table-search { max-width: none; }
  .table-filter-toggle { justify-content: center; }
  .public-topbar { padding: 13px 16px; }
  .public-brand .subtitle { display: none; }
  .public-page-shell { align-items: start; }
  .auth-card { margin: 28px auto; }
}

@media (max-width: 520px) {
  .staff-layout .page-shell,
  .member-layout .page-shell { width: min(100% - 20px, 1460px); margin-top: 16px; }
  .modern-topbar { padding-inline: 10px; }
  .theme-toggle { display: none; }
  .dashboard-kpi-grid,
  .stats-grid:has(.stat-card:nth-child(5)),
  .stats-grid { grid-template-columns: 1fr; }
  .dashboard-panel,
  .panel,
  .table-panel,
  .content-card { padding: 17px; border-radius: 17px; }
  .panel-heading-modern { flex-direction: column; align-items: stretch; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; text-align: center; }
  .mapping-form { min-width: 220px; }
  .auth-card { padding: 28px 22px; border-radius: 22px; }
  .public-tools { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* BIMFM Portal Release 20.10 — connected navigation, task editor, and table system */
.side-nav {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-nav-links {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.side-nav-links::-webkit-scrollbar { width: 5px; }
.side-nav-links::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
}

.side-nav-foot {
  flex: 0 0 auto;
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(8, 27, 45, 0), rgba(8, 27, 45, 0.72) 28%);
}

.side-nav nav a {
  cursor: pointer;
  user-select: none;
}

.side-nav nav a.nav-create-task {
  margin: 5px 0 8px;
  color: #102a43;
  border-color: rgba(255, 255, 255, 0.20);
  background: linear-gradient(135deg, #ffd76b, #f4b827);
  box-shadow: 0 10px 24px rgba(247, 189, 56, 0.16);
}

.side-nav nav a.nav-create-task .nav-icon {
  color: #102a43;
  background: rgba(255, 255, 255, 0.45);
}

.side-nav nav a.nav-create-task:hover,
.side-nav nav a.nav-create-task.active {
  color: #081b2d;
  border-color: rgba(255, 255, 255, 0.32);
  background: linear-gradient(135deg, #ffe38e, #ffc63f);
}

.side-nav nav a.nav-create-task.active::after {
  background: #123d66;
  box-shadow: 0 0 0 4px rgba(18, 61, 102, 0.12);
}

/* Project task editor */
.task-form-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.task-editor {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.task-form-section {
  padding: clamp(22px, 3vw, 34px);
}

.form-section-heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}

.form-section-heading h2 {
  margin: 2px 0 5px;
  font-size: 1.28rem;
  letter-spacing: -0.025em;
}

.form-section-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--ui-muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.form-step {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-600) 24%, var(--ui-border));
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--ui-brand-600), var(--ui-brand-800));
  box-shadow: 0 10px 20px rgba(31, 101, 158, 0.18);
  font-size: 0.86rem;
  font-weight: 900;
}

.task-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px 20px;
}

.task-form-grid > div {
  min-width: 0;
}

.task-form-grid label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 8px;
  color: var(--ui-text-strong);
  font-size: 0.72rem;
  font-weight: 800;
}

.task-form-grid input,
.task-form-grid select,
.task-form-grid textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 13px;
  color: var(--ui-text);
  background: var(--ui-surface-raised);
  box-shadow: inset 0 1px 2px rgba(10, 39, 66, 0.025);
  transition: border-color 130ms ease, box-shadow 130ms ease, background 130ms ease;
}

.task-form-grid textarea {
  min-height: 150px;
  padding: 14px 15px;
  line-height: 1.55;
  resize: vertical;
}

.task-form-grid input:hover,
.task-form-grid select:hover,
.task-form-grid textarea:hover {
  border-color: color-mix(in srgb, var(--ui-brand-600) 38%, var(--ui-border));
}

.task-form-grid input:focus,
.task-form-grid select:focus,
.task-form-grid textarea:focus {
  border-color: var(--ui-brand-600);
  box-shadow: 0 0 0 4px rgba(59, 149, 212, 0.11);
  outline: 0;
}

.task-form-grid input[readonly] {
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
}

.field-disabled {
  opacity: 0.76;
}

.field-hint {
  display: block;
  margin-top: 7px;
  color: var(--ui-muted);
  font-size: 0.66rem;
  line-height: 1.45;
}

.required-mark {
  color: var(--ui-danger);
}

.field-required-state label {
  color: var(--ui-danger);
}

.progress-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 10px;
}

.progress-input-row output {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-600) 22%, var(--ui-border));
  border-radius: 13px;
  color: var(--ui-brand-800);
  background: var(--ui-brand-100);
  font-size: 0.82rem;
  font-weight: 900;
}

.task-form-actions {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  border: 1px solid color-mix(in srgb, var(--ui-border-strong) 86%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  box-shadow: var(--ui-shadow-md);
  backdrop-filter: blur(18px);
}

.task-form-actions > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.task-form-actions strong {
  font-size: 0.82rem;
}

.task-form-actions span {
  color: var(--ui-muted);
  font-size: 0.69rem;
}

.task-save-button {
  min-width: 150px;
}

/* Consistent data presentation */
.data-register-card {
  overflow: hidden;
}

.smart-table-wrap {
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.smart-table {
  width: 100%;
  min-width: 760px;
}

.smart-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--ui-surface-soft) 58%, transparent);
}

.smart-table tbody tr:hover {
  background: color-mix(in srgb, var(--ui-brand-100) 56%, transparent);
}

.smart-table td {
  vertical-align: middle;
}

.table-identity-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 160px;
}

.table-identity-cell > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.table-identity-cell strong {
  color: var(--ui-text-strong);
  font-size: 0.78rem;
}

.table-identity-cell small {
  color: var(--ui-muted);
  font-size: 0.66rem;
}

.table-number {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.date-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.priority-chip,
.metric-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 5px 9px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 850;
  white-space: nowrap;
}

.priority-low { color: var(--ui-success); background: var(--ui-success-soft); }
.priority-normal { color: var(--ui-info); background: var(--ui-info-soft); }
.priority-high { color: var(--ui-warning); background: var(--ui-warning-soft); }
.priority-urgent,
.priority-critical { color: var(--ui-danger); background: var(--ui-danger-soft); }

.status-not-started,
.status-no-project-assignment,
.status-unassigned {
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
}

.status-in-progress,
.status-active,
.status-assigned {
  color: var(--ui-info);
  background: var(--ui-info-soft);
}

.status-for-review,
.status-project-member--no-active-task,
.status-on-hold {
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

.status-completed,
.status-finalized,
.status-reviewed,
.status-mapped {
  color: var(--ui-success);
  background: var(--ui-success-soft);
}

.status-cancelled,
.status-rejected,
.status-overdue {
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}

.table-progress-cell {
  display: grid;
  grid-template-columns: 42px minmax(74px, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 130px;
}

.table-progress-cell strong {
  font-size: 0.70rem;
  font-variant-numeric: tabular-nums;
}

.mini-progress {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ui-border) 74%, var(--ui-surface));
}

.mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ui-brand-600), #62b3e5);
}

.metric-pill {
  min-width: 34px;
  font-variant-numeric: tabular-nums;
}

.metric-good { color: var(--ui-success); background: var(--ui-success-soft); }
.metric-warning { color: var(--ui-danger); background: var(--ui-danger-soft); }

.table-panel > table,
.panel.table-panel > table,
.content-card > table {
  width: 100%;
}

.table-panel:has(> table) {
  overflow-x: auto;
}

.dense-table {
  min-width: 860px;
}

.dense-table td strong,
.dense-table td small {
  display: block;
}

.dense-table td small {
  margin-top: 3px;
  color: var(--ui-muted);
}

/* Freelancer pages now share the same data-register appearance. */
.member-layout .toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.member-layout .toolbar h1 {
  margin: 3px 0 7px;
  color: var(--ui-text-strong);
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  letter-spacing: -0.04em;
}

.member-layout .panel.table-panel {
  overflow: hidden;
}

.member-layout .panel.table-panel > table {
  min-width: 720px;
}

@media (max-width: 900px) {
  .task-form-grid { grid-template-columns: 1fr; }
  .task-form-hero { flex-direction: column; }
  .task-form-actions { align-items: flex-start; flex-direction: column; }
  .task-form-actions .action-row { width: 100%; }
  .task-form-actions .button { flex: 1; text-align: center; }
}

@media (max-width: 760px) {
  table[data-card-table] {
    min-width: 0;
    border-collapse: separate;
  }

  table[data-card-table] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table[data-card-table] tbody {
    display: grid;
    gap: 12px;
    padding: 10px;
  }

  table[data-card-table] tbody tr {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 15px;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-xs);
  }

  table[data-card-table] tbody td {
    display: grid;
    grid-template-columns: minmax(96px, 35%) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 11px 13px;
    border-bottom: 1px solid var(--ui-border);
    text-align: left !important;
  }

  table[data-card-table] tbody td:last-child {
    border-bottom: 0;
  }

  table[data-card-table] tbody td::before {
    content: attr(data-label);
    color: var(--ui-muted);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  table[data-card-table] .table-progress-cell {
    min-width: 0;
  }

  .member-layout .toolbar {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .form-section-heading { grid-template-columns: 38px minmax(0, 1fr); }
  .form-step { width: 36px; height: 36px; border-radius: 12px; }
  .task-form-actions { bottom: 7px; padding: 15px; }
  .progress-input-row { grid-template-columns: minmax(0, 1fr) 58px; }
}

/* Release 20.12 task-register presentation additions */
.task-register-toolbar {
  justify-content: flex-start;
}

.table-filter-select {
  flex: 0 1 185px;
  min-width: 150px;
}

.table-filter-select select {
  width: 100%;
  min-height: 42px;
  border-radius: 13px;
  background: var(--ui-surface-soft);
  font-size: 0.72rem;
  font-weight: 700;
}

.table-filter-reset {
  min-height: 42px;
  padding-inline: 14px;
  white-space: nowrap;
}

.table-action-button {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
  font-size: 0.7rem;
}

.muted-cell {
  color: var(--ui-muted);
  white-space: nowrap;
  font-size: 0.7rem;
}

.danger-zone-card {
  margin-top: 18px;
  border-color: color-mix(in srgb, #c43f3f 38%, var(--ui-border));
}

@media (max-width: 1050px) {
  .table-filter-select {
    flex: 1 1 180px;
  }
}

/* Release 20.14 — operational focus, read-only supervisor, member tools */
.role-pill.supervisor {
  background: color-mix(in srgb, #edf0ff 82%, var(--ui-surface));
  color: #4c4aa2;
  border: 1px solid color-mix(in srgb, #716fd0 38%, var(--ui-border));
}

.readonly-role-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, #716fd0 32%, var(--ui-border));
  border-radius: 15px;
  color: var(--ui-text-strong);
  background: color-mix(in srgb, #edf0ff 74%, var(--ui-surface));
  box-shadow: var(--ui-shadow-sm);
}

.readonly-role-banner > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #fff;
  background: #605eb8;
}

.readonly-role-banner > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.readonly-role-banner small { color: var(--ui-muted); }

/* Defense-in-depth presentation: Supervisor pages never display write forms. */
.readonly-supervisor-layout main form[method="post"]:not([data-readonly-allowed]) {
  display: none !important;
}

.dashboard-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0;
}

.dashboard-focus-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 23px;
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  color: var(--ui-text);
  text-decoration: none;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.dashboard-focus-card:hover {
  transform: translateY(-3px);
  border-color: var(--ui-border-strong);
  box-shadow: var(--ui-shadow-md);
}

.dashboard-focus-card::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -64px;
  width: 160px;
  height: 160px;
  border: 28px solid currentColor;
  border-radius: 50%;
  opacity: 0.035;
}

.dashboard-focus-card.availability {
  background: linear-gradient(145deg, color-mix(in srgb, #e8f7ee 72%, var(--ui-surface)), var(--ui-surface));
  border-color: color-mix(in srgb, #55a873 34%, var(--ui-border));
}

.dashboard-focus-card.tasks {
  background: linear-gradient(145deg, color-mix(in srgb, #e9f3ff 72%, var(--ui-surface)), var(--ui-surface));
  border-color: color-mix(in srgb, #4f8fda 34%, var(--ui-border));
}

.dashboard-focus-card.attendance {
  background: linear-gradient(145deg, color-mix(in srgb, #fff4dc 72%, var(--ui-surface)), var(--ui-surface));
  border-color: color-mix(in srgb, #d49a2b 34%, var(--ui-border));
}

.focus-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.focus-card-head > span:first-child {
  color: var(--ui-muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.focus-card-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 14px;
  color: var(--ui-brand-800);
  background: color-mix(in srgb, var(--ui-brand-100) 76%, var(--ui-surface));
}

.dashboard-focus-card > strong {
  color: var(--ui-text-strong);
  font-size: clamp(2.25rem, 4vw, 3.3rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.dashboard-focus-card > p {
  margin: 8px 0 18px;
  color: var(--ui-muted);
  font-size: 0.78rem;
}

.focus-card-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.focus-card-breakdown span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--ui-surface) 82%, transparent);
}

.focus-card-breakdown b {
  color: var(--ui-text-strong);
  font-size: 1rem;
}

.focus-card-breakdown small {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.danger-button {
  color: #fff !important;
  border-color: #b83a3a !important;
  background: #b83a3a !important;
}

.danger-button:hover { background: #962d2d !important; }

.protected-record-note {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
  font-size: 0.68rem;
  font-weight: 700;
}

.compact-form-panel {
  max-width: 680px;
  padding: clamp(22px, 4vw, 32px);
}

.account-recovery-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.account-recovery-summary > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-recovery-summary small { color: var(--ui-muted); }
.person-avatar.large { width: 52px; height: 52px; font-size: 1.1rem; }
.form-actions { margin-top: 22px; }
.danger-notice { border-color: color-mix(in srgb, #c43f3f 34%, var(--ui-border)); }

.dependency-list {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.dependency-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 13px;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background: var(--ui-surface-soft);
}

@media (max-width: 1050px) {
  .dashboard-focus-grid { grid-template-columns: 1fr; }
  .dashboard-focus-card { min-height: 170px; }
}

@media (max-width: 650px) {
  .focus-card-breakdown { grid-template-columns: 1fr; }
  .focus-card-breakdown small { white-space: normal; }
  .table-action-group { align-items: stretch; }
  .table-action-group > * { flex: 1 1 100%; }
}

/* Release 20.16: selective quick editing on the Tasks sidebar page */
.task-quick-edit-note {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
  font-size: 0.72rem;
}

.task-quick-control {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 9px;
  font: inherit;
  font-size: 0.72rem;
}

.task-quick-control:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.task-quick-status-editor {
  display: grid;
  gap: 4px;
  min-width: 145px;
}

.task-quick-status-control {
  min-width: 145px;
}

.task-quick-save-state {
  min-height: 14px;
  color: var(--ui-muted);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.2;
}

.task-quick-save-state[data-state="saving"] { color: var(--ui-brand-700); }
.task-quick-save-state[data-state="saved"] { color: var(--ui-success); }
.task-quick-save-state[data-state="error"] { color: var(--ui-danger); }

.task-percentage-editor {
  display: grid;
  gap: 6px;
  min-width: 145px;
}

.task-percentage-editor-row {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) 44px;
  gap: 7px;
  align-items: center;
}

.task-percentage-editor-row strong {
  text-align: right;
  font-size: 0.70rem;
  font-variant-numeric: tabular-nums;
}

.task-percentage-select {
  min-width: 82px;
}

.task-quick-date-control {
  min-width: 132px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .task-quick-status-editor,
  .task-quick-status-control,
  .task-percentage-editor,
  .task-percentage-select,
  .task-quick-date-control {
    min-width: 0;
  }
}

/* Release 21.04 Revision 2: stable task columns and separated Progress / Quality controls. */
.task-register-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}

.task-register-table {
  width: 100%;
  min-width: 1420px;
  table-layout: fixed;
}

.task-register-table th,
.task-register-table td {
  box-sizing: border-box;
}

/* Semantic widths stay correct whether the optional Action column is present or not. */
.task-register-table .task-col-project { width: 150px; }
.task-register-table .task-col-title { width: 175px; }
.task-register-table .task-col-assignees { width: 128px; }
.task-register-table .task-col-status { width: 145px; }
.task-register-table .task-col-priority { width: 82px; }
.task-register-table .task-col-discipline { width: 78px; }
.task-register-table .task-col-progress { width: 138px; }
.task-register-table .task-col-quality { width: 108px; }
.task-register-table .task-col-start-date { width: 98px; }
.task-register-table .task-col-due-date { width: 98px; }
.task-register-table .task-col-completion-date { width: 128px; }
.task-register-table .task-col-action { width: 92px; }

.task-register-table .task-quick-status-editor,
.task-register-table .task-quick-status-control,
.task-register-table .task-percentage-editor,
.task-register-table .task-percentage-select,
.task-register-table .task-quick-date-control,
.task-register-table .table-identity-cell {
  min-width: 0;
}

.task-register-table .task-col-progress,
.task-register-table .task-col-quality {
  overflow: hidden;
}

.task-register-table th:first-child,
.task-register-table td:first-child {
  position: sticky;
  left: 0;
}

.task-register-table th:first-child {
  z-index: 5;
  background: color-mix(in srgb, var(--ui-surface-soft) 97%, transparent);
  box-shadow: 8px 0 12px -12px color-mix(in srgb, var(--ui-text-strong) 45%, transparent);
}

.task-register-table td:first-child {
  z-index: 3;
  background: var(--ui-surface);
  box-shadow: 8px 0 12px -12px color-mix(in srgb, var(--ui-text-strong) 38%, transparent);
}

.task-register-table tbody tr:nth-child(even) td:first-child {
  background: color-mix(in srgb, var(--ui-surface-soft) 58%, var(--ui-surface));
}

.task-register-table tbody tr:hover td:first-child {
  background: color-mix(in srgb, var(--ui-brand-100) 56%, var(--ui-surface));
}

.task-register-table th:last-child,
.task-register-table td:last-child {
  position: sticky;
  right: 0;
}

.task-register-table th:last-child {
  z-index: 5;
  background: color-mix(in srgb, var(--ui-surface-soft) 97%, transparent);
  box-shadow: -8px 0 12px -12px color-mix(in srgb, var(--ui-text-strong) 45%, transparent);
}

.task-register-table td:last-child {
  z-index: 3;
  background: var(--ui-surface);
  box-shadow: -8px 0 12px -12px color-mix(in srgb, var(--ui-text-strong) 38%, transparent);
}

.task-register-table tbody tr:nth-child(even) td:last-child {
  background: color-mix(in srgb, var(--ui-surface-soft) 58%, var(--ui-surface));
}

.task-register-table tbody tr:hover td:last-child {
  background: color-mix(in srgb, var(--ui-brand-100) 56%, var(--ui-surface));
}

.task-register-table .table-action-button {
  width: 100%;
  padding-inline: 8px;
  text-align: center;
}

/* Progress is stacked vertically so its percentage and bar never enter Quality. */
.task-register-table .task-progress-editor,
.task-register-table .table-progress-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: 6px;
  align-items: stretch;
}

.task-register-table .task-progress-editor .task-percentage-select,
.task-register-table .task-quality-editor .task-percentage-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.task-register-table .task-progress-editor .mini-progress,
.task-register-table .table-progress-cell .mini-progress {
  width: 100%;
  max-width: 100%;
  height: 6px;
  margin: 0;
}

.task-register-table .table-progress-cell strong {
  display: block;
  width: 100%;
  text-align: left;
  line-height: 1.1;
}

.task-register-table .task-quality-editor {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.task-register-table .task-col-quality .metric-pill,
.task-register-table .task-col-quality .muted-cell {
  display: inline-flex;
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .task-register-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .task-register-table th:first-child,
  .task-register-table td:first-child,
  .task-register-table th:last-child,
  .task-register-table td:last-child {
    position: static;
    width: auto;
    box-shadow: none;
  }

  .task-register-table tbody tr:nth-child(even) td:first-child,
  .task-register-table tbody tr:nth-child(even) td:last-child,
  .task-register-table tbody tr:hover td:first-child,
  .task-register-table tbody tr:hover td:last-child {
    background: transparent;
  }
}

.dashboard-command-hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(390px, 0.65fr);
  min-height: 250px;
}

.command-snapshot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.command-snapshot-item {
  min-width: 0;
  padding: 18px 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(5px);
}

.command-snapshot-item span,
.command-snapshot-item small {
  display: block;
}

.command-snapshot-item span {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.command-snapshot-item strong {
  display: block;
  margin: 7px 0 4px;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.command-snapshot-item small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
  line-height: 1.35;
}

.command-snapshot-item.available { box-shadow: inset 0 3px 0 rgba(124, 226, 166, 0.9); }
.command-snapshot-item.busy { box-shadow: inset 0 3px 0 rgba(115, 192, 245, 0.95); }
.command-snapshot-item.risk { box-shadow: inset 0 3px 0 rgba(255, 196, 103, 0.95); }

.team-command-panel {
  margin-bottom: 20px;
  padding: 24px;
}

.team-command-heading {
  align-items: center;
}

.team-command-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.availability-legend,
.availability-badge,
.attendance-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 850;
}

.availability-legend {
  padding: 6px 9px;
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
}

.availability-legend i,
.availability-badge i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.availability-legend.available i,
.availability-badge.available i { background: var(--ui-success); }
.availability-legend.busy i,
.availability-badge.busy i { background: var(--ui-brand-600); }
.availability-legend.overdue i { background: var(--ui-danger); }

.team-command-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.team-command-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  color: inherit;
  text-decoration: none;
  background: var(--ui-surface-soft);
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.team-command-stat:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ui-brand-600) 36%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-brand-100) 42%, var(--ui-surface));
}

.team-command-stat span {
  color: var(--ui-muted);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.team-command-stat strong {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--ui-text-strong);
}

.team-command-stat small {
  color: var(--ui-muted);
  font-size: 0.68rem;
}

.team-command-stat.available { box-shadow: inset 3px 0 0 var(--ui-success); }
.team-command-stat.busy,
.team-command-stat.tasks { box-shadow: inset 3px 0 0 var(--ui-brand-600); }
.team-command-stat.risk { box-shadow: inset 3px 0 0 var(--ui-danger); }

.availability-board {
  display: grid;
  grid-template-columns: minmax(270px, 0.72fr) minmax(560px, 1.55fr);
  gap: 22px;
  align-items: start;
}

.availability-group {
  min-width: 0;
}

.availability-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-border);
}

.availability-group-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.availability-group-heading h3 {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: 0.9rem;
}

.availability-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ui-surface-soft);
}

.availability-dot.available { background: var(--ui-success); }
.availability-dot.busy { background: var(--ui-brand-600); }

.availability-count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding-inline: 8px;
  border-radius: 10px;
  color: var(--ui-text-strong);
  background: var(--ui-surface-soft);
  font-size: 0.76rem;
  font-weight: 900;
}

.available-member-grid,
.busy-member-grid {
  display: grid;
  gap: 12px;
}

.busy-member-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.member-availability-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
}

.member-availability-card.available {
  border-color: color-mix(in srgb, var(--ui-success) 28%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-success-soft) 34%, var(--ui-surface));
}

.member-availability-card.busy {
  border-color: color-mix(in srgb, var(--ui-brand-600) 20%, var(--ui-border));
}

.member-availability-card.has-overdue {
  border-color: color-mix(in srgb, var(--ui-danger) 38%, var(--ui-border));
}

.member-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.member-command-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
}

.member-card-identity {
  min-width: 0;
  flex: 1;
}

.member-card-identity strong,
.member-card-identity small {
  display: block;
}

.member-card-identity strong {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-card-identity small {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 0.66rem;
}

.availability-badge {
  flex: 0 0 auto;
  padding: 6px 8px;
}

.availability-badge.available {
  color: var(--ui-success);
  background: var(--ui-success-soft);
}

.availability-badge.busy {
  color: var(--ui-brand-700);
  background: var(--ui-brand-100);
}

.availability-badge.overdue {
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}

.member-ready-state {
  display: grid;
  gap: 3px;
  margin: 14px 0;
  padding: 13px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-success-soft) 66%, var(--ui-surface));
}

.member-ready-state strong {
  color: var(--ui-success);
  font-size: 0.78rem;
}

.member-ready-state span {
  color: var(--ui-muted);
  font-size: 0.68rem;
}

.member-current-tasks {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.member-current-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 78%, transparent);
  border-radius: 11px;
  background: var(--ui-surface-soft);
}

.member-current-task.overdue {
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger-soft) 32%, var(--ui-surface));
}

.member-task-copy {
  min-width: 0;
}

.member-task-copy strong,
.member-task-copy small {
  display: block;
}

.member-task-copy strong {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-task-copy small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-task-meta {
  text-align: right;
}

.member-task-meta span,
.member-task-meta small {
  display: block;
}

.member-task-progress {
  color: var(--ui-brand-700);
  font-size: 0.68rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.member-task-meta small {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 0.58rem;
  white-space: nowrap;
}

.member-task-meta .overdue-text {
  color: var(--ui-danger);
  font-weight: 800;
}

.member-task-bar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-border) 72%, var(--ui-surface));
}

.member-task-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ui-brand-600), #62b3e5);
}

.member-current-task.overdue .member-task-bar i {
  background: var(--ui-danger);
}

.member-more-tasks {
  justify-self: start;
  color: var(--ui-brand-700);
  font-size: 0.66rem;
  font-weight: 850;
  text-decoration: none;
}

.member-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-border);
  color: var(--ui-muted);
  font-size: 0.62rem;
}

.attendance-mini {
  padding: 4px 7px;
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
}

.attendance-mini.status-currently-working,
.attendance-mini.status-complete {
  color: var(--ui-success);
  background: var(--ui-success-soft);
}

.attendance-mini.status-no-record {
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

.dashboard-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
  gap: 20px;
  margin-bottom: 20px;
}

.dashboard-empty.compact {
  padding: 18px;
}

@media (max-width: 1250px) {
  .dashboard-command-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.7fr);
  }

  .availability-board {
    grid-template-columns: 1fr;
  }

  .available-member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .dashboard-command-hero,
  .dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }

  .team-command-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .command-snapshot,
  .team-command-stats,
  .available-member-grid,
  .busy-member-grid {
    grid-template-columns: 1fr;
  }

  .team-command-panel {
    padding: 18px;
  }

  .team-command-heading {
    align-items: flex-start;
  }

  .team-command-legend {
    justify-content: flex-start;
  }

  .member-current-task {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ==========================================================
   Release 20.20 · sortable task tables and performance reports
   ========================================================== */
.table-sort-button {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: pointer;
}
.table-sort-button span { min-width: 0; }
.table-sort-button em {
  flex: 0 0 auto;
  color: #7890a8;
  font-size: .68rem;
  font-style: normal;
  letter-spacing: 0;
}
th[aria-sort="ascending"] .table-sort-button em,
th[aria-sort="descending"] .table-sort-button em { color: #1675bb; }
.table-sort-button:hover span { color: #1675bb; }
.table-sort-button:focus-visible { outline: 2px solid #2a8ac8; outline-offset: 4px; border-radius: 4px; }

.performance-hero,
.reporting-hero { margin-bottom: 18px; }
.leaderboard-control-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .32fr);
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}
.leaderboard-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.leaderboard-mode {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 78px;
  padding: 14px 15px;
  border: 1px solid #d8e4ef;
  border-radius: 14px;
  background: #f8fbfe;
  color: #21384f;
  text-align: left;
  cursor: pointer;
}
.leaderboard-mode > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e7f2fb;
  color: #126ca9;
  font-size: .75rem;
  font-weight: 900;
}
.leaderboard-mode strong { font-size: .95rem; }
.leaderboard-mode small { color: #6c7e91; font-size: .72rem; }
.leaderboard-mode.active {
  border-color: #3289bf;
  background: linear-gradient(180deg, #f3faff, #eaf5fd);
  box-shadow: inset 0 0 0 1px rgba(50,137,191,.12);
}
.leaderboard-mode.active > span { background: #176fa9; color: #fff; }
.leaderboard-search { display: grid; gap: 7px; color: #53687d; font-size: .76rem; font-weight: 800; }
.leaderboard-search input { width: 100%; }
.leaderboard-panel[hidden] { display: none !important; }
.performance-summary-grid { margin-bottom: 18px; }
.leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.podium-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dce6ef;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.podium-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #86a8c2;
}
.podium-rank-1::after { background: #e1ad22; }
.podium-rank-2::after { background: #91a4b7; }
.podium-rank-3::after { background: #ba784a; }
.podium-medal { font-size: 1.7rem; }
.podium-card h2 { margin: 2px 0; font-size: 1rem; }
.podium-card p,
.podium-card small,
.podium-card > span:last-child { margin: 0; color: #728398; font-size: .72rem; }
.podium-card > strong { color: #143b5d; font-size: 1.18rem; text-align: right; }
.leaderboard-table-card { margin-bottom: 20px; }
.leaderboard-table { min-width: 1080px; }
.leaderboard-rank { display: inline-flex; min-width: 30px; justify-content: center; font-weight: 900; }
.leaderboard-score { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 7px 10px; border-radius: 999px; font-weight: 900; }
.quality-score { background: #e8f6ef; color: #176d43; }
.performance-recommendation { display: inline-block; max-width: 260px; color: #4e6276; line-height: 1.35; }

.report-period-card {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
}
.report-period-card h2 { margin: 4px 0; }
.report-period-card p { margin: 0; color: #6a7d91; }
.report-period-form { display: flex; align-items: end; gap: 14px; }
.report-period-buttons { display: inline-flex; padding: 4px; border: 1px solid #d9e4ee; border-radius: 12px; background: #f4f8fb; }
.report-period-buttons button { padding: 9px 14px; border: 0; border-radius: 9px; background: transparent; color: #53687c; font-weight: 800; cursor: pointer; }
.report-period-buttons button.active { background: #176fa9; color: #fff; box-shadow: 0 4px 12px rgba(23,111,169,.18); }
.report-month-control { display: grid; gap: 5px; color: #5b6f82; font-size: .72rem; font-weight: 800; }
.report-month-control input { min-width: 155px; }
.reporting-summary-grid { grid-template-columns: repeat(6, minmax(140px, 1fr)); margin-bottom: 18px; }
.report-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.report-chart-card { min-width: 0; padding-bottom: 12px; }
.report-chart-heading { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 5px; }
.report-chart-heading h2 { margin: 3px 0 0; font-size: 1.05rem; }
.report-chart-heading > strong { color: #153f62; font-size: 1.25rem; }
.report-chart { min-height: 250px; }
.report-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid-line { stroke: #dfe8f0; stroke-width: 1; }
.chart-axis-label { fill: #74869a; font-size: 11px; }
.chart-bar { fill: #2d8bc5; }
.chart-line { stroke: #2d8bc5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: #fff; stroke: #2d8bc5; stroke-width: 3; }
.report-chart-empty { min-height: 220px; display: grid; place-items: center; color: #7a8b9b; text-align: center; }
.report-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.report-ranking-card { min-width: 0; }
.report-bar-ranking { display: grid; gap: 11px; }
.report-bar-row { display: grid; grid-template-columns: 28px minmax(125px, .8fr) minmax(120px, 1.4fr) 38px; gap: 10px; align-items: center; }
.report-bar-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #edf4f9; color: #38647f; font-size: .72rem; font-weight: 900; }
.report-bar-row > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.report-bar-row > b { text-align: right; color: #193f5f; }
.report-bar-track { height: 10px; border-radius: 999px; background: #e8eff5; overflow: hidden; }
.report-bar-track i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #1d77b1, #51aee2); }
.report-table-card { margin-bottom: 18px; }
.report-data-table { min-width: 1100px; }
.report-method-note { margin: 2px 0 18px; padding: 14px 16px; border: 1px solid #d6e6f2; border-radius: 12px; background: #f4f9fd; color: #567083; font-size: .8rem; }
.report-method-note strong { color: #204e6d; }

html[data-theme="dark"] .leaderboard-mode,
html[data-theme="dark"] .podium-card,
html[data-theme="dark"] .report-period-buttons { background: #172536; border-color: #33475b; color: #e7eef6; }
html[data-theme="dark"] .leaderboard-mode small,
html[data-theme="dark"] .podium-card p,
html[data-theme="dark"] .podium-card small,
html[data-theme="dark"] .podium-card > span:last-child { color: #9eb0c1; }
html[data-theme="dark"] .leaderboard-mode.active { background: #18334a; border-color: #4c96c7; }
html[data-theme="dark"] .podium-card > strong,
html[data-theme="dark"] .report-chart-heading > strong,
html[data-theme="dark"] .report-bar-row > b { color: #e7f1f9; }
html[data-theme="dark"] .chart-grid-line { stroke: #344657; }
html[data-theme="dark"] .chart-axis-label { fill: #9dafbf; }
html[data-theme="dark"] .chart-point { fill: #142231; }
html[data-theme="dark"] .report-bar-track { background: #2b3b4b; }
html[data-theme="dark"] .report-method-note { background: #172838; border-color: #34536b; color: #a8b8c6; }
html[data-theme="dark"] .report-method-note strong { color: #d5e8f6; }

@media (max-width: 1250px) {
  .reporting-summary-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .leaderboard-control-card { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .leaderboard-mode-switch,
  .leaderboard-podium,
  .report-chart-grid,
  .report-comparison-grid { grid-template-columns: 1fr; }
  .report-period-card { align-items: stretch; flex-direction: column; }
  .report-period-form { align-items: stretch; flex-direction: column; }
  .report-period-buttons { width: 100%; }
  .report-period-buttons button { flex: 1; }
  .reporting-summary-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}
@media (max-width: 620px) {
  .leaderboard-mode { min-height: 68px; }
  .podium-card { grid-template-columns: auto minmax(0, 1fr); }
  .podium-card > strong,
  .podium-card > span:last-child { grid-column: 2; text-align: left; }
  .reporting-summary-grid { grid-template-columns: 1fr 1fr; }
  .report-bar-row { grid-template-columns: 28px minmax(0, 1fr) 34px; }
  .report-bar-track { grid-column: 2 / 4; }
}

/* Release 20.21: freelancer project ordering and policy visibility controls */
.assignment-sort-panel {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.assignment-sort-form {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}
.assignment-sort-form > div {
  min-width: 150px;
}
.assignment-sort-form label {
  display: block;
  margin-bottom: 5px;
}
.assignment-sort-form select {
  min-width: 150px;
}
.current-assignment-card {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: inset 3px 0 0 var(--accent);
}
.assignment-kicker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.policy-section-heading {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 4px;
}
.policy-section-heading h2 {
  margin: 4px 0 5px;
}
.policy-visibility-toggle {
  flex-basis: 100%;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
@media (max-width: 760px) {
  .assignment-sort-form,
  .assignment-sort-form > div,
  .assignment-sort-form select,
  .assignment-sort-form button {
    width: 100%;
  }
}


/* Release 20.22: task-state row cues and target-versus-actual time reporting. */
.task-register-table tbody tr.task-row-attention > td {
  background: color-mix(in srgb, #f8cf58 18%, var(--ui-surface));
}
.task-register-table tbody tr.task-row-delayed > td,
.time-utilization-table tbody tr.task-row-delayed > td {
  background: color-mix(in srgb, #e85c63 14%, var(--ui-surface));
}
.task-register-table tbody tr.task-row-attention:hover > td {
  background: color-mix(in srgb, #f8cf58 25%, var(--ui-surface));
}
.task-register-table tbody tr.task-row-delayed:hover > td,
.time-utilization-table tbody tr.task-row-delayed:hover > td {
  background: color-mix(in srgb, #e85c63 20%, var(--ui-surface));
}
.task-register-table tbody tr.task-row-attention td:first-child,
.task-register-table tbody tr.task-row-attention td:last-child {
  background: color-mix(in srgb, #f8cf58 18%, var(--ui-surface));
}
.task-register-table tbody tr.task-row-delayed td:first-child,
.task-register-table tbody tr.task-row-delayed td:last-child {
  background: color-mix(in srgb, #e85c63 14%, var(--ui-surface));
}
html[data-theme="dark"] .task-register-table tbody tr.task-row-attention > td {
  background: color-mix(in srgb, #f8cf58 12%, var(--ui-surface));
}
html[data-theme="dark"] .task-register-table tbody tr.task-row-delayed > td,
html[data-theme="dark"] .time-utilization-table tbody tr.task-row-delayed > td {
  background: color-mix(in srgb, #e85c63 13%, var(--ui-surface));
}

.time-utilization-hero {
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.17), transparent 19rem),
    linear-gradient(125deg, #123a61 0%, #17638b 58%, #2185aa 100%);
}
.time-utilization-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.time-method-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: 28px;
  align-items: end;
}
.time-method-card h2 { margin: 5px 0 8px; }
.time-method-card p { margin: 5px 0; color: var(--ui-muted); line-height: 1.6; }
.time-project-filter {
  display: flex;
  align-items: end;
  gap: 10px;
}
.time-project-filter label { flex: 1; }
.time-project-filter label span {
  display: block;
  margin-bottom: 7px;
  color: var(--ui-muted);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.time-project-filter select { width: 100%; min-height: 43px; }
.time-project-card { padding: 0; overflow: hidden; }
.time-project-heading {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(510px, 1.25fr);
  gap: 24px;
  align-items: center;
  padding: 24px 26px 18px;
}
.time-project-heading h2 { margin: 4px 0 6px; }
.time-project-heading p { margin: 0; color: var(--ui-muted); }
.time-project-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.time-project-metrics > div {
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface-soft);
}
.time-project-metrics span,
.time-project-metrics strong { display: block; }
.time-project-metrics span { color: var(--ui-muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.time-project-metrics strong { margin-top: 4px; font-size: .9rem; }
.time-utilization-track {
  height: 7px;
  margin: 0 26px 18px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-border);
}
.time-utilization-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ui-brand-600), #57b8dd); }
.time-utilization-track i.over-target { background: linear-gradient(90deg, #d89a23, #d9535b); }
.time-project-card .table-toolbar { margin: 0 26px 12px; }
.time-project-card .modern-table-wrap { border-top: 1px solid var(--ui-border); }
.time-utilization-table { min-width: 1120px; }
.time-utilization-table td > strong,
.time-utilization-table td > small { display: block; }
.time-utilization-table td > small,
.time-contributors { margin-top: 4px; color: var(--ui-muted); font-size: .67rem; line-height: 1.35; }
.time-over { color: #b63b43; font-weight: 800; }
.time-under { color: #1f7b55; font-weight: 800; }
html[data-theme="dark"] .time-over { color: #ff9ca2; }
html[data-theme="dark"] .time-under { color: #7fd7ad; }

@media (max-width: 1180px) {
  .time-utilization-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .time-project-heading { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .time-utilization-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-method-card { grid-template-columns: 1fr; }
  .time-project-filter { align-items: stretch; flex-direction: column; }
  .time-project-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-project-heading { padding: 20px; }
  .time-project-card .table-toolbar { margin-inline: 20px; }
}
@media (max-width: 520px) {
  .time-utilization-summary { grid-template-columns: 1fr; }
}

/* ========================================================================== 
   Release 21.00 — work-order operations, compact registers, and stronger state
   ========================================================================== */
.operations-page-header,
.compact-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: 22px 26px;
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.operations-page-header.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 20px 24px 14px;
}

.operations-header-copy h1,
.compact-page-header h1 {
  margin: 4px 0 5px;
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  letter-spacing: -0.045em;
}

.operations-header-copy p,
.compact-page-header p {
  max-width: 850px;
  margin: 0;
  color: var(--ui-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.operations-header-actions,
.compact-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.operations-stat-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 5px;
}

.operations-stat-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  min-height: 68px;
  padding: 11px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface-soft);
}

.operations-stat-chip span {
  color: var(--ui-muted);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.operations-stat-chip strong {
  grid-row: 1 / 3;
  grid-column: 1;
  min-width: 44px;
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
}

.operations-stat-chip span,
.operations-stat-chip small {
  grid-column: 2;
}

.operations-stat-chip small {
  font-size: 0.64rem;
}

.operations-page-header + .data-register-card .section-heading {
  padding-top: 20px;
  padding-bottom: 14px;
}

/* Strong, immediately recognizable dashboard state colors. */
.member-availability-card.available,
.team-command-stat.available {
  border-color: color-mix(in srgb, var(--ui-success) 72%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-success-soft) 78%, var(--ui-success) 10%);
  box-shadow: inset 5px 0 0 var(--ui-success), 0 8px 22px color-mix(in srgb, var(--ui-success) 14%, transparent);
}

.member-availability-card.state-working,
.team-command-stat.busy,
.team-command-stat.tasks {
  border-color: color-mix(in srgb, var(--ui-info) 72%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-info-soft) 78%, var(--ui-info) 11%);
  box-shadow: inset 5px 0 0 var(--ui-info), 0 8px 22px color-mix(in srgb, var(--ui-info) 14%, transparent);
}

.member-availability-card.state-assigned {
  border-color: color-mix(in srgb, var(--ui-warning) 72%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-warning-soft) 80%, var(--ui-warning) 10%);
  box-shadow: inset 5px 0 0 var(--ui-warning), 0 8px 22px color-mix(in srgb, var(--ui-warning) 14%, transparent);
}

.member-availability-card.has-overdue,
.member-availability-card.state-overdue,
.team-command-stat.risk {
  border-color: color-mix(in srgb, var(--ui-danger) 78%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger-soft) 76%, var(--ui-danger) 12%);
  box-shadow: inset 5px 0 0 var(--ui-danger), 0 8px 22px color-mix(in srgb, var(--ui-danger) 16%, transparent);
}

.availability-badge.working {
  color: var(--ui-info);
  border-color: color-mix(in srgb, var(--ui-info) 35%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-info-soft) 72%, var(--ui-info) 12%);
}
.availability-badge.working i { background: var(--ui-info); }
.availability-badge.assigned {
  color: var(--ui-warning);
  border-color: color-mix(in srgb, var(--ui-warning) 35%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-warning-soft) 72%, var(--ui-warning) 12%);
}
.availability-badge.assigned i { background: var(--ui-warning); }

/* Live work-order management board. */
.live-work-panel { margin-bottom: 18px; }
.live-work-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.live-pulse,
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-danger);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.live-pulse i,
.live-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-danger);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-danger) 17%, transparent);
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 20%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.live-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; max-height: none; overflow: visible; align-items: stretch; }
.live-work-card {
  min-width: 0;
  height: 100%;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ui-info) 42%, var(--ui-border));
  border-radius: 17px;
  background: color-mix(in srgb, var(--ui-info-soft) 84%, var(--ui-surface));
  box-shadow: inset 4px 0 0 var(--ui-info);
}
.live-work-member { display: flex; align-items: center; gap: 9px; }
.live-work-member > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.live-work-member small { font-size: 0.62rem; }
.live-badge { color: var(--ui-danger); font-size: 0.6rem; }
.live-work-card h3 { margin: 15px 0 4px; font-size: 0.94rem; }
.live-work-card > p { margin: 0; color: var(--ui-muted); font-size: 0.69rem; }
.live-work-meta { display: grid; grid-template-columns: 1.2fr 0.8fr 0.55fr; gap: 8px; margin-top: 14px; }
.live-work-meta span { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--ui-surface) 68%, transparent); }
.live-work-meta small { font-size: 0.57rem; text-transform: uppercase; letter-spacing: 0.05em; }
.live-work-meta strong { font-size: 0.71rem; font-variant-numeric: tabular-nums; }
.live-work-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

/* Freelancer work-order timer. */
.work-order-header { margin-bottom: 14px; }
.button-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 99px;
  color: #fff;
  background: var(--ui-danger);
  font-size: 0.62rem;
}
.active-work-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(260px, 0.7fr);
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--ui-info) 58%, var(--ui-border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--ui-info-soft) 82%, var(--ui-surface));
  box-shadow: inset 6px 0 0 var(--ui-info), var(--ui-shadow-sm);
}
.active-work-order-main h2 { margin: 8px 0 4px; font-size: 1.25rem; }
.active-work-order-main p { margin: 0; color: var(--ui-muted); }
.active-work-order-clock { display: flex; min-width: 150px; flex-direction: column; align-items: center; padding: 12px 16px; border-radius: 15px; background: var(--ui-surface); }
.active-work-order-clock span,
.active-work-order-clock small { color: var(--ui-muted); font-size: 0.61rem; }
.active-work-order-clock strong { margin: 4px 0; font-size: 1.75rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.stop-work-order-form { display: grid; gap: 9px; }
.stop-work-order-form label { display: grid; gap: 5px; }
.stop-work-order-form label span { font-size: 0.64rem; font-weight: 800; }
.stop-work-order-form textarea {
  min-width: 280px;
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font: inherit;
  line-height: 1.45;
}
.stop-work-order-form small { max-width: 420px; color: var(--ui-muted); font-size: 0.62rem; line-height: 1.4; }
.work-order-stop-button { width: 100%; }
.work-order-ready-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--ui-success) 50%, var(--ui-border));
  border-radius: 17px;
  background: color-mix(in srgb, var(--ui-success-soft) 84%, var(--ui-surface));
  box-shadow: inset 5px 0 0 var(--ui-success);
}
.work-order-ready-banner > div { display: flex; align-items: center; gap: 12px; }
.work-order-ready-banner > div > div { display: flex; flex-direction: column; }
.ready-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: var(--ui-success); }
.status-available { color: var(--ui-success); background: var(--ui-success-soft); }
.work-order-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.work-order-task-card {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 17px;
  background: var(--ui-surface-soft);
}
.work-order-task-card.priority-urgent { border-color: color-mix(in srgb, var(--ui-danger) 55%, var(--ui-border)); box-shadow: inset 4px 0 0 var(--ui-danger); }
.work-order-task-card.priority-high { border-color: color-mix(in srgb, var(--ui-warning) 55%, var(--ui-border)); box-shadow: inset 4px 0 0 var(--ui-warning); }
.work-order-task-card.priority-normal { border-color: color-mix(in srgb, var(--ui-info) 48%, var(--ui-border)); box-shadow: inset 4px 0 0 var(--ui-info); }
.work-order-task-card.priority-low { border-color: color-mix(in srgb, var(--ui-success) 48%, var(--ui-border)); box-shadow: inset 4px 0 0 var(--ui-success); }
.work-order-task-card.is-running { background: color-mix(in srgb, var(--ui-info-soft) 78%, var(--ui-info) 8%); }
.work-order-task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.work-order-task-card h3 { margin: 14px 0 5px; font-size: 0.92rem; }
.work-order-task-card > p { margin: 0; color: var(--ui-muted); font-size: 0.68rem; }
.work-order-task-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 15px 0 10px; }
.work-order-task-meta div { display: flex; flex-direction: column; gap: 2px; padding: 7px; border-radius: 10px; background: var(--ui-surface); }
.work-order-task-meta dt { color: var(--ui-muted); font-size: 0.55rem; text-transform: uppercase; }
.work-order-task-meta dd { margin: 0; font-size: 0.68rem; font-weight: 850; }
.work-order-task-card form { margin-top: auto; padding-top: 13px; }
.work-order-start-button { width: 100%; }
.inline-month-control { display: flex; align-items: flex-end; gap: 8px; }
.inline-month-control label { display: grid; gap: 4px; }
.inline-month-control span { font-size: 0.61rem; font-weight: 800; }

/* Email-style reminders. */
.reminder-shortcut { position: relative; }
.reminder-shortcut b { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; color: #fff; background: var(--ui-danger); font-size: 0.56rem; }
.reminder-inbox { display: grid; gap: 12px; }
.email-reminder-card { overflow: hidden; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-surface); box-shadow: var(--ui-shadow-xs); }
.email-reminder-card.unread { border-color: color-mix(in srgb, var(--ui-info) 50%, var(--ui-border)); box-shadow: inset 5px 0 0 var(--ui-info), var(--ui-shadow-sm); }
.email-reminder-meta { display: flex; align-items: center; gap: 10px; padding: 13px 17px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-soft); }
.email-reminder-meta > div { display: flex; flex: 1; flex-direction: column; }
.email-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--ui-brand-700); font-weight: 900; }
.email-reminder-content { padding: 18px 20px; }
.email-reminder-content h2 { margin: 5px 0 10px; font-size: 1.05rem; }
.email-reminder-content p { margin: 0; white-space: pre-wrap; line-height: 1.65; }
.email-reminder-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 17px; border-top: 1px solid var(--ui-border); color: var(--ui-muted); background: var(--ui-surface-soft); font-size: 0.65rem; }
.reminder-compose-layout { display: grid; grid-template-columns: minmax(240px, 0.4fr) minmax(0, 1fr); gap: 16px; }
.reminder-task-summary dl { display: grid; gap: 8px; margin-top: 18px; }
.reminder-task-summary dl div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid var(--ui-border); }
.reminder-task-summary dt { color: var(--ui-muted); }
.email-compose-chrome { display: flex; align-items: center; gap: 9px; margin: -20px -20px 18px; padding: 13px 18px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-soft); }
.email-compose-chrome small { margin-left: auto; }
.email-compose-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* Two-step protected-account deletion. */
.danger-header { border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--ui-border)); }
.deletion-step-indicator { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 20px; }
.deletion-step-indicator span { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 0.7rem; font-weight: 800; }
.deletion-step-indicator span b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ui-border); border-radius: 50%; background: var(--ui-surface-soft); }
.deletion-step-indicator span.active { color: var(--ui-danger); }
.deletion-step-indicator span.active b { color: #fff; border-color: var(--ui-danger); background: var(--ui-danger); }
.deletion-step-indicator span.complete { color: var(--ui-success); }
.deletion-step-indicator span.complete b { color: #fff; border-color: var(--ui-success); background: var(--ui-success); }
.deletion-step-indicator i { height: 2px; background: var(--ui-border); }
.dependency-list-danger { border: 1px solid color-mix(in srgb, var(--ui-danger) 24%, var(--ui-border)); border-radius: 14px; overflow: hidden; }
.dependency-total { color: var(--ui-danger); background: var(--ui-danger-soft); }
.deletion-confirm-form { display: grid; gap: 14px; margin-top: 18px; }
.deletion-confirm-form > label:not(.form-check) { display: grid; gap: 6px; }
.deletion-confirm-form label > span { font-size: 0.68rem; font-weight: 850; }
.deletion-confirm-form code { width: fit-content; padding: 5px 8px; border-radius: 7px; color: var(--ui-danger); background: var(--ui-danger-soft); }
.destructive-check { padding: 12px; border: 1px solid color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)); border-radius: 12px; background: var(--ui-danger-soft); }
.dependency-summary-inline { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ui-danger-soft); }
.dependency-summary-inline strong { color: var(--ui-danger); font-size: 1.3rem; }

@media (max-width: 1100px) {
  .operations-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-work-grid,
  .work-order-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .active-work-order-card { grid-template-columns: minmax(0, 1fr) auto; }
  .stop-work-order-form { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .operations-page-header,
  .compact-page-header,
  .operations-page-header.compact { grid-template-columns: 1fr; padding: 17px; }
  .operations-header-actions,
  .compact-header-actions { justify-content: flex-start; }
  .operations-stat-strip,
  .live-work-grid,
  .work-order-task-grid,
  .reminder-compose-layout { grid-template-columns: 1fr; }
  .active-work-order-card { grid-template-columns: 1fr; }
  .active-work-order-clock { align-items: flex-start; }
  .live-work-meta,
  .work-order-task-meta { grid-template-columns: 1fr 1fr; }
  .email-compose-actions,
  .email-reminder-footer { align-items: flex-start; flex-direction: column; }
  .inline-month-control { align-items: stretch; flex-direction: column; }
}


/* Release 21.01 — selected work-order deep link */
.work-order-task-card.is-selected {
  outline: 3px solid color-mix(in srgb, var(--accent, #2f80ed) 72%, transparent);
  outline-offset: 2px;
}

/* =========================================================
   Release 21.02 — official branding and compact sidebar context
   ========================================================= */
.side-context-strip {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 10px;
  margin: 6px 7px 14px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.context-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #9ed8f0;
  background: linear-gradient(145deg, rgba(38, 174, 196, 0.24), rgba(76, 128, 158, 0.25));
  font-size: 0.69rem;
  box-shadow: inset 0 0 0 1px rgba(158, 216, 240, 0.12);
}

.side-context-strip > div {
  min-width: 0;
}

.side-context-strip .workspace-kicker,
.side-context-strip strong {
  display: block;
}

.side-context-strip .workspace-kicker {
  color: #78b9d8;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
}

.side-context-strip strong {
  margin-top: 3px;
  overflow: hidden;
  color: #f3f8fc;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ed394;
  box-shadow: 0 0 0 4px rgba(78, 211, 148, 0.10);
}

.brand-logo {
  object-fit: contain;
  padding: 2px;
  background: rgba(255, 255, 255, 0.96);
}

.public-brand.company-lockup {
  display: inline-flex;
  width: min(360px, 48vw);
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.public-brand.company-lockup img {
  width: 100%;
  height: 48px;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
}

.auth-company-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: min(330px, 100%);
  min-height: 70px;
  margin-bottom: 22px;
  padding: 10px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ui-shadow-xs);
}

.auth-company-lockup img {
  display: block;
  width: 100%;
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}

.account-password-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  text-decoration: none;
}

.password-card {
  width: min(570px, 100%);
}

.account-reset-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-soft);
}

.narrow-panel {
  width: min(650px, 100%);
}

@media (max-width: 760px) {
  .public-brand.company-lockup {
    width: min(260px, 62vw);
    padding: 6px 9px;
  }

  .public-brand.company-lockup img {
    height: 38px;
  }

  .account-password-shortcut {
    display: none;
  }
}

/* Release 21.03 · role-aware My Work and shared table-state language. */
.role-work-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 26px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
}
.role-work-header h1 { margin: 5px 0 7px; }
.role-work-header p { margin: 0; color: var(--muted); max-width: 820px; }
.role-work-badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--ui-accent-strong);
  background: color-mix(in srgb, var(--ui-accent) 13%, var(--ui-surface));
  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, var(--line));
}
.role-work-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 16px;
}
.role-work-stats .operations-stat-chip.danger { border-color: color-mix(in srgb, #dc4650 38%, var(--line)); }
.role-work-stats .operations-stat-chip.success { border-color: color-mix(in srgb, #20a36d 38%, var(--line)); }
.role-work-stats .operations-stat-chip.info { border-color: color-mix(in srgb, #2584d8 38%, var(--line)); }
.role-work-stats .operations-stat-chip.warning { border-color: color-mix(in srgb, #e6ad24 42%, var(--line)); }
.role-work-panel { margin-bottom: 16px; }

.table-status-legend,
.availability-table-legend,
.attendance-table-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-surface-2) 74%, transparent);
  color: var(--muted);
  font-size: .78rem;
}
.table-status-legend span,
.availability-table-legend span,
.attendance-table-legend span { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.table-status-legend small { margin-left: auto; }
.legend-swatch { width: 13px; height: 13px; border-radius: 4px; border: 1px solid color-mix(in srgb, currentColor 18%, var(--line)); }
.legend-swatch.task-attention { background: color-mix(in srgb, #f8cf58 34%, var(--ui-surface)); }
.legend-swatch.task-delayed { background: color-mix(in srgb, #e85c63 30%, var(--ui-surface)); }
.legend-swatch.task-completed { background: color-mix(in srgb, #35b779 30%, var(--ui-surface)); }
.legend-swatch.availability-available { background: #51c891; }
.legend-swatch.availability-working { background: #4da9ee; }
.legend-swatch.availability-assigned { background: #f3c74f; }
.legend-swatch.availability-overdue { background: #eb626b; }
.legend-swatch.attendance-complete { background: #51c891; }
.legend-swatch.attendance-working { background: #4da9ee; }
.legend-swatch.attendance-missing { background: #f3c74f; }
.legend-swatch.attendance-issue { background: #eb626b; }

/* Shared task rows: same meaning on every task register. */
.modern-table tbody tr.task-row-attention > td {
  background: color-mix(in srgb, #f8cf58 18%, var(--ui-surface));
}
.modern-table tbody tr.task-row-delayed > td {
  background: color-mix(in srgb, #e85c63 15%, var(--ui-surface));
}
.modern-table tbody tr.task-row-completed > td {
  background: color-mix(in srgb, #35b779 15%, var(--ui-surface));
}
.modern-table tbody tr.task-row-attention:hover > td {
  background: color-mix(in srgb, #f8cf58 25%, var(--ui-surface));
}
.modern-table tbody tr.task-row-delayed:hover > td {
  background: color-mix(in srgb, #e85c63 22%, var(--ui-surface));
}
.modern-table tbody tr.task-row-completed:hover > td {
  background: color-mix(in srgb, #35b779 22%, var(--ui-surface));
}
html[data-theme="dark"] .modern-table tbody tr.task-row-attention > td { background: color-mix(in srgb, #f8cf58 12%, var(--ui-surface)); }
html[data-theme="dark"] .modern-table tbody tr.task-row-delayed > td { background: color-mix(in srgb, #e85c63 13%, var(--ui-surface)); }
html[data-theme="dark"] .modern-table tbody tr.task-row-completed > td { background: color-mix(in srgb, #35b779 12%, var(--ui-surface)); }

.availability-overview-table tbody tr.availability-row-available > td { background: color-mix(in srgb, #35b779 12%, var(--ui-surface)); }
.availability-overview-table tbody tr.availability-row-working > td { background: color-mix(in srgb, #2f91df 13%, var(--ui-surface)); }
.availability-overview-table tbody tr.availability-row-assigned > td { background: color-mix(in srgb, #f0c245 15%, var(--ui-surface)); }
.availability-overview-table tbody tr.availability-row-overdue > td { background: color-mix(in srgb, #e75a63 14%, var(--ui-surface)); }
.availability-status-available { background: color-mix(in srgb, #35b779 18%, var(--ui-surface)); color: #14724a; }
.availability-status-working { background: color-mix(in srgb, #2f91df 18%, var(--ui-surface)); color: #156196; }
.availability-status-assigned { background: color-mix(in srgb, #f0c245 22%, var(--ui-surface)); color: #805d00; }
.availability-status-overdue { background: color-mix(in srgb, #e75a63 18%, var(--ui-surface)); color: #9c2830; }

.request-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.request-summary-card {
  display: grid;
  gap: 4px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ui-surface-2);
  color: inherit;
  text-decoration: none;
}
.request-summary-card strong { font-size: 1.65rem; }
.request-summary-card small { color: var(--muted); }
.request-summary-card.leave { border-left: 5px solid #2f91df; }
.request-summary-card.overtime { border-left: 5px solid #e6ad24; }
.request-summary-card.attendance { border-left: 5px solid #e75a63; }
.request-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.request-list-grid > section { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--ui-surface-2); }
.mini-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mini-section-heading h3 { margin: 0; }
.mini-section-heading a { font-size: .8rem; font-weight: 800; }
.compact-request-list { display: grid; gap: 8px; }
.compact-request-list a { display: grid; gap: 2px; padding: 10px; border-radius: 11px; background: var(--ui-surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); color: inherit; text-decoration: none; }
.compact-request-list a:hover { border-color: var(--ui-accent); }
.compact-request-list span, .compact-request-list small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.finance-work-launches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.finance-work-launches a { display: grid; gap: 5px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--ui-surface); color: inherit; text-decoration: none; box-shadow: var(--ui-shadow-soft); }
.finance-work-launches a > span { color: var(--ui-accent-strong); font-size: .75rem; font-weight: 900; }
.finance-work-launches a small { color: var(--muted); }
.finance-work-launches a.primary-launch { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--line)); background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); }
.attendance-row-complete > td { background: color-mix(in srgb, #35b779 12%, var(--ui-surface)); }
.attendance-row-working > td { background: color-mix(in srgb, #2f91df 13%, var(--ui-surface)); }
.attendance-row-missing > td { background: color-mix(in srgb, #f0c245 14%, var(--ui-surface)); }
.attendance-row-issue > td { background: color-mix(in srgb, #e75a63 14%, var(--ui-surface)); }
.finance-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.finance-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.finance-metric-grid > div { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--ui-surface-2); }
.finance-metric-grid span { color: var(--muted); font-size: .75rem; }
.finance-metric-grid strong { font-size: 1.15rem; }
.finance-inline-dtr-form { margin-top: 14px; }

@media (max-width: 1180px) {
  .role-work-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .request-list-grid, .request-summary-grid { grid-template-columns: 1fr; }
  .finance-work-launches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .role-work-header { flex-direction: column; }
  .role-work-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-work-grid { grid-template-columns: 1fr; }
  .finance-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-status-legend small { width: 100%; margin-left: 0; }
}
@media (max-width: 600px) {
  .role-work-stats, .finance-work-launches, .finance-metric-grid { grid-template-columns: 1fr; }
}
.modern-table tbody tr.availability-row-available > td { background: color-mix(in srgb, #35b779 12%, var(--ui-surface)); }
.modern-table tbody tr.availability-row-working > td { background: color-mix(in srgb, #2f91df 13%, var(--ui-surface)); }
.modern-table tbody tr.availability-row-assigned > td { background: color-mix(in srgb, #f0c245 15%, var(--ui-surface)); }
.modern-table tbody tr.availability-row-overdue > td { background: color-mix(in srgb, #e75a63 14%, var(--ui-surface)); }

/* Release 21.05 · dashboard order, project-time overview, and reminder calendars. */
.time-utilization-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.time-top-project strong {
  font-size: 1.08rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-time-overview {
  margin-bottom: 16px;
}
.project-time-overview .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.project-time-total {
  font-size: 1.65rem;
  color: var(--ui-accent-strong);
  white-space: nowrap;
}
.project-time-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 16px;
}
.project-time-summary-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface)), var(--ui-surface));
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.project-time-summary-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ui-accent) 52%, var(--line));
  box-shadow: var(--ui-shadow-soft);
}
.project-time-card-head,
.project-time-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}
.project-time-rank {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--ui-accent-strong);
  background: color-mix(in srgb, var(--ui-accent) 13%, var(--ui-surface));
}
.project-time-summary-card h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .98rem;
}
.project-time-summary-card > strong {
  font-size: 1.65rem;
  line-height: 1.05;
}
.project-time-summary-card > small {
  color: var(--muted);
}
.project-utilization-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
  font-size: .72rem;
}
.project-utilization-bar-label span {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.project-utilization-bar-label strong {
  color: var(--ui-accent-strong);
  font-size: .8rem;
}
.project-utilization-bar {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, transparent);
}
.project-utilization-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ui-brand-600), #57b8dd);
}
.project-utilization-bar i.over-target {
  background: linear-gradient(90deg, #d89a23, #d9535b);
}
.project-utilization-bar.is-unavailable {
  background: color-mix(in srgb, var(--line) 55%, transparent);
}
.time-project-card {
  scroll-margin-top: 20px;
}

.calendar-page-header {
  margin-bottom: 15px;
}
.reminder-calendar-shell {
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
}
.reminder-calendar-toolbar,
.calendar-month-navigation,
.calendar-day-head,
.calendar-agenda-item,
.calendar-color-legend,
.calendar-summary-grid article {
  display: flex;
  align-items: center;
}
.reminder-calendar-toolbar {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.calendar-month-navigation {
  gap: 12px;
}
.calendar-month-navigation h2 {
  margin: 2px 0 0;
}
.calendar-nav-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ui-surface-2);
  color: inherit;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 900;
}
.calendar-nav-button:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent-strong);
}
.calendar-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.calendar-summary-grid article {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ui-surface-2);
}
.calendar-summary-grid article strong {
  font-size: 1.45rem;
}
.calendar-summary-grid article span,
.calendar-summary-grid article small {
  color: var(--muted);
}
.calendar-summary-grid article.danger {
  border-color: color-mix(in srgb, #e75a63 42%, var(--line));
}
.calendar-color-legend {
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-surface-2) 78%, transparent);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}
.calendar-color-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.calendar-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #3b91db;
}
.calendar-dot.deadline { background: #3b91db; }
.calendar-dot.review { background: #e9b631; }
.calendar-dot.urgent { background: #e98331; }
.calendar-dot.overdue { background: #e65b65; }
.calendar-dot.completed { background: #35b779; }
.calendar-dot.holiday { background: #8b65d6; }
.reminder-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 15px;
  align-items: start;
}
.calendar-board-wrap {
  min-width: 0;
}
.calendar-weekday-row,
.calendar-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-weekday-row {
  padding: 0 3px 7px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: .03em;
}
.calendar-board {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--line);
  gap: 1px;
}
.calendar-day-cell {
  position: relative;
  min-height: 132px;
  min-width: 0;
  padding: 9px;
  background: var(--ui-surface);
}
.calendar-day-cell.weekend {
  background: color-mix(in srgb, var(--ui-surface-2) 72%, var(--ui-surface));
}
.calendar-day-cell.outside-month {
  opacity: .48;
}
.calendar-day-cell.today {
  box-shadow: inset 0 0 0 2px var(--ui-accent);
  z-index: 1;
}
.calendar-day-head {
  justify-content: space-between;
  min-height: 24px;
}
.calendar-day-head time {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  font-weight: 900;
}
.calendar-day-cell.today .calendar-day-head time {
  color: var(--ui-accent-text);
  background: var(--ui-accent);
}
.calendar-day-head span {
  color: var(--ui-accent-strong);
  font-size: .64rem;
  font-weight: 900;
}
.calendar-day-dots {
  display: flex;
  gap: 4px;
  min-height: 12px;
  margin: 4px 0;
}
.calendar-day-events {
  display: grid;
  gap: 4px;
}
.calendar-event {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 5px 7px;
  border-left: 3px solid #3b91db;
  border-radius: 7px;
  background: color-mix(in srgb, #3b91db 10%, var(--ui-surface));
  color: inherit;
  text-decoration: none;
}
.calendar-event span,
.calendar-event small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-event span { font-size: .7rem; font-weight: 850; }
.calendar-event small { color: var(--muted); font-size: .62rem; }
.calendar-event.event-review { border-left-color: #e9b631; background: color-mix(in srgb, #e9b631 12%, var(--ui-surface)); }
.calendar-event.event-urgent { border-left-color: #e98331; background: color-mix(in srgb, #e98331 12%, var(--ui-surface)); }
.calendar-event.event-overdue { border-left-color: #e65b65; background: color-mix(in srgb, #e65b65 12%, var(--ui-surface)); }
.calendar-event.event-completed { border-left-color: #35b779; background: color-mix(in srgb, #35b779 12%, var(--ui-surface)); }
.calendar-event.event-holiday { border-left-color: #8b65d6; background: color-mix(in srgb, #8b65d6 12%, var(--ui-surface)); }
.calendar-more-events {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 800;
}
.calendar-agenda-panel {
  position: sticky;
  top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--ui-surface-2);
}
.calendar-agenda-heading {
  padding: 15px 15px 10px;
}
.calendar-agenda-heading h3 { margin: 3px 0; }
.calendar-agenda-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.calendar-agenda-list {
  display: grid;
  max-height: 590px;
  overflow: auto;
  padding: 0 8px 9px;
}
.calendar-agenda-item {
  position: relative;
  gap: 10px;
  min-width: 0;
  padding: 9px 7px;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  color: inherit;
  text-decoration: none;
}
.calendar-agenda-item time {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 45px;
  border-radius: 11px;
  background: var(--ui-surface);
}
.calendar-agenda-item time strong { font-size: 1rem; line-height: 1; }
.calendar-agenda-item time span { color: var(--muted); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.calendar-agenda-item > div { min-width: 0; display: grid; gap: 2px; flex: 1; }
.calendar-agenda-item > div strong,
.calendar-agenda-item > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-agenda-item > div strong { font-size: .78rem; }
.calendar-agenda-item > div small { color: var(--muted); font-size: .68rem; }
.calendar-overdue-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, #e65b65 9%, var(--ui-surface));
  font-size: .72rem;
}
.calendar-overdue-summary a { font-weight: 900; color: var(--ui-accent-strong); }
.calendar-filter-card { margin-bottom: 15px; }
.calendar-admin-forms { margin-top: 16px; }

@media (max-width: 1250px) {
  .time-utilization-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-time-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reminder-calendar-layout { grid-template-columns: 1fr; }
  .calendar-agenda-panel { position: static; }
  .calendar-agenda-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
}
@media (max-width: 900px) {
  .calendar-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-board-wrap { overflow-x: auto; }
  .calendar-weekday-row, .calendar-board { min-width: 760px; }
}
@media (max-width: 680px) {
  .time-utilization-summary,
  .project-time-card-grid,
  .calendar-summary-grid,
  .calendar-agenda-list { grid-template-columns: 1fr; }
  .project-time-overview .section-heading,
  .reminder-calendar-toolbar { align-items: stretch; flex-direction: column; }
  .calendar-today-button { align-self: flex-start; }
}

/* Release 21.07 — corrected availability states, exports, join dates, and unassigned work */
.command-snapshot-five {
  grid-template-columns: repeat(5, minmax(112px, 1fr));
}
.command-snapshot-item.working { box-shadow: inset 0 3px 0 #2684ff; }
.command-snapshot-item.assigned { box-shadow: inset 0 3px 0 #e3a008; }
.command-snapshot-item.unassigned { box-shadow: inset 0 3px 0 #8b5cf6; }
.command-snapshot-item.working strong { color: #d7ebff; }
.command-snapshot-item.assigned strong { color: #fff1b8; }
.command-snapshot-item.unassigned strong { color: #eadfff; }

.team-command-stats-five { grid-template-columns: repeat(5, minmax(135px, 1fr)); }
.team-command-stat.working { box-shadow: inset 3px 0 0 #2684ff; }
.team-command-stat.assigned { box-shadow: inset 3px 0 0 #e3a008; }
.team-command-stat.unassigned { box-shadow: inset 3px 0 0 #8b5cf6; }
.availability-legend.working i,
.availability-dot.working { background: #2684ff; }
.availability-legend.assigned i,
.availability-dot.assigned { background: #e3a008; }
.availability-legend.overdue i,
.availability-dot.overdue { background: #dc3545; }

.availability-board-four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.availability-board-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.availability-board-three .availability-group {
  min-width: 0;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.82);
}
.availability-board-three .available-group { background: linear-gradient(145deg, rgba(224,248,232,.96), rgba(255,255,255,.94)); border-color: rgba(25,135,84,.25); }
.availability-board-three .assigned-group { background: linear-gradient(145deg, rgba(255,244,204,.97), rgba(255,255,255,.94)); border-color: rgba(227,160,8,.3); }
.availability-board-three .overdue-group { background: linear-gradient(145deg, rgba(255,225,228,.97), rgba(255,255,255,.94)); border-color: rgba(220,53,69,.28); }
.availability-board-four .availability-group {
  min-width: 0;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.82);
}
.availability-board-four .available-group { background: linear-gradient(145deg, rgba(224,248,232,.96), rgba(255,255,255,.94)); border-color: rgba(25,135,84,.25); }
.availability-board-four .working-group { background: linear-gradient(145deg, rgba(220,237,255,.96), rgba(255,255,255,.94)); border-color: rgba(38,132,255,.26); }
.availability-board-four .assigned-group { background: linear-gradient(145deg, rgba(255,244,204,.97), rgba(255,255,255,.94)); border-color: rgba(227,160,8,.3); }
.availability-board-four .overdue-group { background: linear-gradient(145deg, rgba(255,225,228,.97), rgba(255,255,255,.94)); border-color: rgba(220,53,69,.28); }
.availability-state-grid { display: grid; gap: 12px; }
.member-availability-card.state-available { border-color: rgba(25,135,84,.35); background: #f4fff7; }
.member-availability-card.state-working { border-color: rgba(38,132,255,.38); background: #f3f8ff; }
.member-availability-card.state-assigned { border-color: rgba(227,160,8,.4); background: #fffaf0; }
.member-availability-card.state-overdue { border-color: rgba(220,53,69,.4); background: #fff5f5; }
.availability-badge.working { background: #dbeafe; color: #0755a5; }
.availability-badge.assigned { background: #fff0bd; color: #775000; }
.availability-badge.overdue { background: #ffe0e3; color: #a21c2b; }

.unassigned-task-panel {
  border-top: 4px solid #8b5cf6;
}
.unassigned-task-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f2ebff;
  color: #5b21b6;
}
.unassigned-task-summary strong { font-size: 1.55rem; }
.unassigned-task-table td small { display: block; color: var(--ui-muted); margin-top: 3px; }
.unassigned-clear { margin-top: 8px; }
.operations-stat-chip.unassigned { box-shadow: inset 0 3px 0 #8b5cf6; }

.join-date-inline-form {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 190px;
}
.join-date-inline-form input[type="date"] {
  width: 132px;
  min-width: 0;
  padding: 7px 8px;
  font-size: .82rem;
}

.export-center-header {
  align-items: end;
}
.export-month-control {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
}
.export-month-control label { display: grid; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--ui-muted); }
.export-month-control input { min-width: 165px; }
.export-package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.export-package-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon copy" "icon action";
  gap: 10px 16px;
  padding: 22px;
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,247,255,.92));
  box-shadow: var(--ui-shadow-sm);
}
.export-package-card.featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #123a63, #1f6196);
  color: white;
  border: none;
}
.export-package-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #e2effc;
  color: #124f83;
  font-weight: 900;
  font-size: 1.05rem;
}
.export-package-card.featured .export-package-icon { background: rgba(255,255,255,.16); color: white; }
.export-package-card > div { grid-area: copy; }
.export-package-card h2 { margin: 2px 0 6px; font-size: 1.12rem; }
.export-package-card p { margin: 0; color: var(--ui-muted); line-height: 1.55; }
.export-package-card.featured p { color: rgba(255,255,255,.82); }
.export-package-card > a { grid-area: action; justify-self: start; }
.export-guidance-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.export-guidance-card h2 { margin: 3px 0 5px; }
.export-guidance-card p { margin: 0; color: var(--ui-muted); }

@media (max-width: 1180px) {
  .availability-board-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-snapshot-five, .team-command-stats-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .availability-board-four, .availability-board-three, .export-package-grid { grid-template-columns: 1fr; }
  .export-package-card.featured { grid-column: auto; }
  .command-snapshot-five, .team-command-stats-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .export-center-header, .export-guidance-card { align-items: stretch; flex-direction: column; }
  .export-month-control { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .command-snapshot-five, .team-command-stats-five { grid-template-columns: 1fr; }
  .export-package-card { grid-template-columns: 1fr; grid-template-areas: "icon" "copy" "action"; }
}

/* Release 21.08 — freelancer dashboard identity card */
.freelancer-dashboard-heading {
  align-items: stretch;
  gap: 24px;
}

.freelancer-profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: min(100%, 430px);
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-500) 20%, var(--ui-border));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ui-brand-100) 62%, var(--ui-surface)), var(--ui-surface));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ui-brand-900) 9%, transparent);
}

.freelancer-profile-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, var(--ui-brand-500), var(--ui-brand-800));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-brand-700) 28%, transparent);
  font-size: 1rem;
  font-weight: 900;
}

.freelancer-profile-copy {
  min-width: 0;
}

.freelancer-profile-copy > span,
.freelancer-profile-copy > strong,
.freelancer-profile-copy > small {
  display: block;
}

.freelancer-profile-copy > span {
  color: var(--ui-brand-700);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.freelancer-profile-copy > strong {
  overflow: hidden;
  margin-top: 3px;
  color: var(--ui-text-strong);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.freelancer-profile-copy > small,
.freelancer-profile-status > small {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 0.69rem;
}

.freelancer-profile-status {
  text-align: right;
}

.freelancer-profile-status > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--ui-success);
  background: var(--ui-success-soft);
  font-size: 0.68rem;
  font-weight: 900;
}

.freelancer-profile-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

@media (max-width: 760px) {
  .freelancer-profile-card {
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .freelancer-profile-status {
    grid-column: 2;
    text-align: left;
  }
}

/* Release 21.13 — dashboard member visibility and consistent freelancer attendance cards */
.member-layout .freelancer-attendance-card {
  border-radius: 24px;
  border: 1px solid var(--ui-border);
  overflow: hidden;
}
.member-layout .freelancer-attendance-card .official-time > div,
.member-layout .freelancer-attendance-card .today-record > div,
.member-layout .freelancer-attendance-card .calculation-grid > div {
  border-radius: 16px;
  overflow: hidden;
}
.member-layout .freelancer-attendance-card .today-record {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.member-layout .freelancer-attendance-card .punch-grid .punch {
  border-radius: 16px;
}
.member-layout .freelancer-attendance-card .completion-note {
  border-radius: 16px;
}
.member-availability-card.state-working {
  position: relative;
}
.member-availability-card.state-working::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-info);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-info) 16%, transparent);
}

/* Release 21.14 · overall performance, text-only portal identity, and login reminders. */
.text-only-brand {
  min-height: 58px;
  padding: 10px 12px;
}
.text-only-brand .brand-copy {
  display: grid;
  gap: 3px;
}
.text-only-brand .brand-copy strong {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}
.text-only-brand .brand-copy small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.text-public-brand {
  display: grid;
  gap: 2px;
  color: var(--ui-text);
  text-decoration: none;
}
.text-public-brand strong {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.text-public-brand span {
  color: var(--ui-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.auth-text-lockup {
  display: inline-grid;
  gap: 3px;
  margin-bottom: 22px;
  padding: 14px 18px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface-soft);
}
.auth-text-lockup strong {
  color: var(--ui-heading);
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}
.auth-text-lockup span {
  color: var(--ui-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.leaderboard-mode-switch {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}
.overall-formula-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--ui-info) 42%, var(--ui-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-info) 8%, var(--ui-surface));
}
.overall-formula-banner span {
  color: var(--ui-muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.overall-formula-banner strong {
  color: var(--ui-heading);
  font-size: 1.15rem;
}
.overall-score {
  color: #0f5f46;
  background: #dff6eb;
}
html[data-theme="dark"] .overall-score {
  color: #b9f3dc;
  background: #174636;
}
.overall-performance-table {
  min-width: 1000px;
}

.reminder-page-header {
  margin-bottom: 18px;
}
.login-reminder-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  padding: 24px 26px;
  border: 2px solid color-mix(in srgb, var(--ui-info) 58%, var(--ui-border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--ui-info) 10%, var(--ui-surface));
  box-shadow: var(--ui-shadow-md);
}
.login-reminder-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  color: #fff;
  background: var(--ui-info);
  font-size: 1.7rem;
}
.login-reminder-notice h2 {
  margin: 3px 0 6px;
  color: var(--ui-heading);
  font-size: 1.35rem;
}
.login-reminder-notice p {
  margin: 0;
  color: var(--ui-muted);
}
.reminder-inbox-prominent {
  gap: 18px;
}
.reminder-card-large {
  border-radius: 22px;
}
.reminder-card-large.unread {
  border-width: 2px;
  box-shadow: inset 7px 0 0 var(--ui-info), var(--ui-shadow-md);
}
.reminder-card-large .email-reminder-meta {
  padding: 18px 22px;
}
.reminder-card-large .email-reminder-content {
  padding: 24px 26px;
}
.reminder-card-large .email-reminder-content h2 {
  margin: 7px 0 13px;
  font-size: 1.28rem;
}
.reminder-card-large .email-reminder-content p {
  font-size: 1rem;
  line-height: 1.75;
}
.reminder-card-large .email-reminder-footer {
  padding: 15px 22px;
}
.reminder-new-badge {
  font-size: 0.7rem;
}

@media (max-width: 980px) {
  .leaderboard-mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .leaderboard-mode-switch { grid-template-columns: 1fr; }
  .overall-formula-banner { align-items: flex-start; flex-direction: column; }
  .login-reminder-notice { grid-template-columns: auto minmax(0, 1fr); }
  .login-reminder-notice .button { grid-column: 1 / -1; width: 100%; }
}

/* Release 21.16 — hourly Finance, specialty recommendations, and assignment suggestions */
.hourly-payroll-rule,
.hourly-summary-formula {
  border-color: color-mix(in srgb, var(--ui-info) 38%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-info) 7%, var(--ui-surface));
}
.hourly-payroll-formula {
  min-width: min(100%, 620px);
}
.finance-hourly-table {
  min-width: 1120px;
}
.finance-hourly-table .number-cell {
  white-space: nowrap;
}

.specialty-recommendation-section {
  margin-bottom: 20px;
}
.specialty-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.specialty-recommendation-card {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface);
}
.specialty-recommendation-card.reliable {
  border-color: color-mix(in srgb, var(--ui-success) 44%, var(--ui-border));
  box-shadow: inset 0 4px 0 color-mix(in srgb, var(--ui-success) 75%, transparent);
}
.specialty-recommendation-card.limited {
  border-color: color-mix(in srgb, var(--ui-warning) 42%, var(--ui-border));
}
.specialty-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.specialty-card-heading strong {
  color: var(--ui-heading);
  font-size: 1.05rem;
}
.specialty-type {
  color: var(--ui-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.specialty-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.specialty-person h3,
.specialty-person small {
  margin: 0;
}
.specialty-person h3 {
  overflow: hidden;
  color: var(--ui-heading);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.specialty-person small {
  color: var(--ui-muted);
}
.specialty-score-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.specialty-score-row > span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border-radius: 12px;
  background: var(--ui-surface-soft);
  text-align: center;
}
.specialty-score-row small {
  color: var(--ui-muted);
  font-size: 0.67rem;
  font-weight: 700;
}
.specialty-score-row strong {
  color: var(--ui-heading);
}
.specialty-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.specialty-evidence span,
.specialty-confidence {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--ui-surface-soft);
  color: var(--ui-muted);
  font-size: 0.7rem;
  font-weight: 800;
}
.specialty-confidence {
  justify-self: start;
}
.specialty-confidence.good {
  color: var(--ui-success-text, #17653a);
  background: color-mix(in srgb, var(--ui-success) 14%, var(--ui-surface));
}
.specialty-confidence.warning {
  color: var(--ui-warning-text, #795300);
  background: color-mix(in srgb, var(--ui-warning) 16%, var(--ui-surface));
}
.specialty-empty {
  display: grid;
  gap: 6px;
  min-height: 94px;
  align-content: center;
  text-align: center;
}
.specialty-empty strong { color: var(--ui-heading); }
.specialty-empty small { color: var(--ui-muted); }

.assignment-suggestion-section {
  margin-top: 18px;
}
.assignment-suggestion-heading {
  align-items: flex-start;
}
.suggestion-refresh-status {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}
.assignment-suggestion-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.suggestion-state,
.suggestion-availability {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
}
.suggestion-state.state-available,
.assignment-suggestion-card.state-available .suggestion-availability { color: #17653a; background: #dcf5e7; }
.suggestion-state.state-assigned,
.assignment-suggestion-card.state-assigned .suggestion-availability { color: #795300; background: #fff0bd; }
.suggestion-state.state-working,
.assignment-suggestion-card.state-working .suggestion-availability { color: #15599a; background: #dceeff; }
.suggestion-state.state-overdue,
.assignment-suggestion-card.state-overdue .suggestion-availability { color: #a52b31; background: #fde2e3; }
html[data-theme="dark"] .suggestion-state.state-available,
html[data-theme="dark"] .assignment-suggestion-card.state-available .suggestion-availability { color: #b9f3d1; background: #174632; }
html[data-theme="dark"] .suggestion-state.state-assigned,
html[data-theme="dark"] .assignment-suggestion-card.state-assigned .suggestion-availability { color: #ffe7a0; background: #4d3b12; }
html[data-theme="dark"] .suggestion-state.state-working,
html[data-theme="dark"] .assignment-suggestion-card.state-working .suggestion-availability { color: #b9ddff; background: #173e62; }
html[data-theme="dark"] .suggestion-state.state-overdue,
html[data-theme="dark"] .assignment-suggestion-card.state-overdue .suggestion-availability { color: #ffc8cb; background: #5a2327; }
.assignment-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 12px;
}
.assignment-suggestion-card {
  position: relative;
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 17px;
  color: var(--ui-text);
  background: var(--ui-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.assignment-suggestion-card:hover {
  transform: translateY(-1px);
  border-color: var(--ui-info);
}
.assignment-suggestion-card.selected {
  border: 2px solid var(--ui-info);
  background: color-mix(in srgb, var(--ui-info) 7%, var(--ui-surface));
}
.assignment-suggestion-card.state-overdue {
  box-shadow: inset 4px 0 0 var(--ui-danger);
}
.assignment-suggestion-card.state-working {
  box-shadow: inset 4px 0 0 var(--ui-info);
}
.assignment-suggestion-card.state-assigned {
  box-shadow: inset 4px 0 0 var(--ui-warning);
}
.assignment-suggestion-card.state-available {
  box-shadow: inset 4px 0 0 var(--ui-success);
}
.suggestion-rank {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--ui-muted);
  font-size: .72rem;
  font-weight: 900;
}
.suggestion-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 36px;
  min-width: 0;
}
.suggestion-person > div {
  display: grid;
  min-width: 0;
}
.suggestion-person strong,
.suggestion-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestion-person strong { color: var(--ui-heading); }
.suggestion-person small { color: var(--ui-muted); }
.suggestion-availability { justify-self: start; }
.suggestion-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.suggestion-metrics span {
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--ui-surface-soft);
  color: var(--ui-muted);
  font-size: .68rem;
  font-weight: 800;
}
.suggestion-work {
  min-height: 34px;
  color: var(--ui-muted);
  line-height: 1.45;
}
.suggestion-select-label {
  color: var(--ui-info);
  font-size: .72rem;
  font-weight: 900;
}
.assignment-suggestion-card.selected .suggestion-select-label::before {
  content: "✓ ";
}

@media (max-width: 720px) {
  .specialty-score-row { grid-template-columns: 1fr; }
  .assignment-suggestion-grid { grid-template-columns: 1fr; }
  .assignment-suggestion-heading { display: grid; }
}


/* ========================================================================== 
   Release 21.17 — clear time-budget utilization and completed-task periods
   ========================================================================== */
.metric-neutral {
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
}
.utilization-formula-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 28px;
  align-items: end;
}
.utilization-formula-card h2 { margin: 5px 0 12px; }
.utilization-formula {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0 14px;
}
.utilization-formula span,
.utilization-formula b {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface-soft);
  text-align: center;
}
.utilization-formula b {
  min-width: 48px;
  color: var(--ui-accent-strong);
  font-size: 1rem;
}
.utilization-meaning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.utilization-meaning-grid > div {
  padding: 11px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface-soft);
}
.utilization-meaning-grid strong,
.utilization-meaning-grid span { display: block; }
.utilization-meaning-grid span { margin-top: 3px; color: var(--ui-muted); font-size: .72rem; line-height: 1.4; }
.utilization-caution { margin: 13px 0 0; line-height: 1.5; }
.utilization-exclusion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.utilization-exclusion-card h3 { margin: 5px 0 7px; font-size: 1.5rem; }
.utilization-exclusion-card p { margin: 0; color: var(--ui-muted); line-height: 1.55; }
.time-project-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.project-utilization-exclusion {
  margin: -5px 26px 18px;
  padding: 10px 12px;
  border: 1px dashed var(--ui-border);
  border-radius: 12px;
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
  font-size: .75rem;
}
.time-utilization-table { min-width: 1420px; }
.time-formula-cell { white-space: nowrap; font-size: .75rem; }
.completed-period-card {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 16px;
}
.completed-period-form {
  display: flex;
  align-items: end;
  gap: 10px;
  min-width: min(100%, 440px);
}
.completed-period-form label { flex: 1; }
.completed-period-form label span {
  display: block;
  margin-bottom: 7px;
  color: var(--ui-muted);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.completed-period-form select { width: 100%; min-height: 43px; }
.completed-period-summary {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 10px;
  text-align: right;
}
.completed-period-summary span { color: var(--ui-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.completed-period-summary strong { grid-row: span 2; font-size: 2rem; color: var(--ui-accent-strong); }
.completed-period-summary small { color: var(--ui-muted); }

@media (max-width: 1180px) {
  .time-project-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .utilization-formula-card { grid-template-columns: 1fr; }
  .utilization-formula { grid-template-columns: 1fr; }
  .utilization-formula b { min-height: 34px; }
  .utilization-meaning-grid { grid-template-columns: 1fr; }
  .utilization-exclusion-grid { grid-template-columns: 1fr; }
  .completed-period-card { align-items: stretch; flex-direction: column; }
  .completed-period-summary { align-self: stretch; text-align: left; }
}
@media (max-width: 620px) {
  .completed-period-form { flex-direction: column; align-items: stretch; min-width: 0; }
  .time-project-metrics { grid-template-columns: 1fr 1fr; }
}


/* Release 21.20: OT comparison and freelancer welcome experience */
.freelancer-welcome-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:34px;border-radius:26px;background:linear-gradient(135deg,#0d3358 0%,#145b8d 54%,#2b86bd 100%);color:#fff;box-shadow:0 20px 50px rgba(10,45,78,.22);margin-bottom:22px}.freelancer-welcome-hero:after{content:"";position:absolute;right:-80px;top:-100px;width:320px;height:320px;border-radius:50%;border:55px solid rgba(255,255,255,.08)}.welcome-copy,.welcome-profile{position:relative;z-index:1}.welcome-copy h1{margin:6px 0 8px;font-size:clamp(1.8rem,3vw,3rem);color:#fff}.welcome-copy p{max-width:680px;margin:0;color:rgba(255,255,255,.82)}.welcome-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.welcome-meta span{padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.09);font-size:.78rem;font-weight:700}.welcome-profile{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;min-width:310px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px)}.welcome-avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:#fff;color:#145b8d;font-size:1.35rem;font-weight:900}.welcome-profile small,.welcome-profile span{display:block;color:rgba(255,255,255,.72)}.welcome-profile strong{display:block;margin:2px 0;color:#fff}.welcome-profile i{width:11px;height:11px;border-radius:50%;background:#38e49d;box-shadow:0 0 0 6px rgba(56,228,157,.15)}
.attendance-command-card{padding:28px;border-radius:26px;background:#fff;border:1px solid #dce8f2;box-shadow:0 18px 42px rgba(22,53,83,.09);margin-bottom:22px}.attendance-command-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.attendance-command-head h2{margin:5px 0 7px;font-size:1.65rem}.attendance-command-head p{margin:0;max-width:720px;color:var(--ui-muted)}.attendance-state-orb{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:999px;background:#eef7ff;color:#145b8d}.attendance-state-orb span{width:10px;height:10px;border-radius:50%;background:#2a85bd;box-shadow:0 0 0 5px rgba(42,133,189,.13)}.attendance-time-display{display:grid;grid-template-columns:1fr minmax(60px,140px) 1fr;align-items:center;margin:28px 0}.attendance-time-display article{padding:22px;border-radius:20px;background:#f6f9fc;border:1px solid #e3ebf2;text-align:center}.attendance-time-display span,.attendance-time-display small{display:block;color:var(--ui-muted)}.attendance-time-display strong{display:block;margin:7px 0;font-size:clamp(1.7rem,3vw,2.45rem);color:#143a5d}.attendance-time-line{height:2px;background:#d7e4ef;position:relative}.attendance-time-line i{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:#2a85bd;transform:translate(-50%,-50%)}.attendance-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}.attendance-primary-actions form{margin:0}.attendance-action{width:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:1px 12px;text-align:left;padding:18px 20px;border:0;border-radius:18px;color:#fff;cursor:pointer}.attendance-action>span{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.16);font-size:1.25rem}.attendance-action strong{align-self:end}.attendance-action small{color:rgba(255,255,255,.76)}.attendance-action.time-in{background:linear-gradient(135deg,#1776aa,#27a6c8)}.attendance-action.time-out{background:linear-gradient(135deg,#173d66,#245d91)}.attendance-action:disabled{opacity:.4;cursor:not-allowed}.attendance-result-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:18px}.attendance-result-grid article{padding:15px;border-radius:16px;background:#f5f8fb;border:1px solid #e5edf4}.attendance-result-grid span{display:block;color:var(--ui-muted);font-size:.71rem;font-weight:800;text-transform:uppercase}.attendance-result-grid strong{display:block;margin-top:5px;color:#173d66}.attendance-result-grid .featured{background:#e9f7ff;border-color:#b8dff2}.attendance-complete-banner{margin-top:14px;padding:12px 15px;border-radius:14px;background:#eaf9f2;color:#11714b;font-weight:800}
.ot-approval-list{display:grid;gap:16px}.ot-approval-card{border:1px solid #dce7f0;border-radius:22px;padding:20px;background:#fff;box-shadow:0 10px 28px rgba(17,48,78,.07)}.ot-approval-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.ot-approval-card-head h3{margin:3px 0}.ot-comparison-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ot-time-block{padding:16px;border-radius:17px;background:#f6f9fc;border:1px solid #e2eaf1}.ot-time-block span,.ot-time-block small{display:block;color:var(--ui-muted)}.ot-time-block strong{display:block;margin:7px 0;color:#153d61}.ot-time-block b{color:#2673a5}.ot-time-block.actual{background:#edf8ff;border-color:#bfdef0}.ot-time-block.variance .positive{color:#c45b24}.ot-work-evidence{margin:14px 0;padding:14px 16px;border-left:4px solid #2a85bd;background:#f7fafc;border-radius:0 14px 14px 0}.ot-work-evidence p{margin:5px 0}.ot-final-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:end;padding:16px;border-radius:18px;background:#f4f8fb}.ot-final-form label{font-size:.76rem;font-weight:800;color:#314f69}.ot-final-form input{width:100%;margin-top:6px}.ot-final-form .wide{grid-column:1/-1}.ot-live-summary{padding:12px 14px;border-radius:14px;background:#e9f7ff}.ot-live-summary span,.ot-live-summary small{display:block;color:var(--ui-muted)}.ot-live-summary strong{display:block;margin:3px 0;color:#145b8d}.ot-final-form .action-row{grid-column:1/-1}.historical-ot-form{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px}.historical-ot-form .wide{grid-column:span 2}.historical-ot-form label{display:block;font-weight:800;font-size:.76rem}.historical-ot-form input,.historical-ot-form select,.historical-ot-form textarea{width:100%;margin-top:6px}.historical-ot-form .form-action{display:flex;align-items:end}
@media(max-width:980px){.freelancer-welcome-hero{grid-template-columns:1fr}.welcome-profile{min-width:0}.attendance-result-grid{grid-template-columns:repeat(3,1fr)}.ot-comparison-grid,.ot-final-form{grid-template-columns:1fr}.historical-ot-form{grid-template-columns:1fr 1fr}.ot-final-form .wide,.ot-final-form .action-row{grid-column:auto}.historical-ot-form .wide{grid-column:span 2}}@media(max-width:650px){.freelancer-welcome-hero,.attendance-command-card{padding:20px;border-radius:20px}.attendance-command-head{flex-direction:column}.attendance-time-display{grid-template-columns:1fr;gap:10px}.attendance-time-line{height:36px;width:2px;justify-self:center}.attendance-primary-actions,.attendance-result-grid,.historical-ot-form{grid-template-columns:1fr}.historical-ot-form .wide{grid-column:auto}}

/* Release 21.20.1 — overtime page repair */
.ot-filter-bar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.4fr) auto;gap:14px;align-items:end;margin:18px 0 22px;padding:16px;border:1px solid var(--border-color,#d8e4ef);border-radius:16px;background:rgba(247,250,253,.9)}
.ot-filter-bar label{display:grid;gap:7px;font-weight:700}
.ot-filter-bar .button{min-height:44px}
@media(max-width:760px){.ot-filter-bar{grid-template-columns:1fr}.ot-filter-bar .button{width:100%}}

/* Release 21.20.2 — overtime credit correction and balances */
.ot-adjustment-panel{margin-top:14px;border-top:1px solid var(--border,#d8e4ef);padding-top:12px}.ot-adjustment-panel summary{cursor:pointer;font-weight:800;color:#155a8a}.ot-adjustment-panel[open] summary{margin-bottom:12px}.ot-approved-result{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 14px;border-radius:14px;background:#f5f9fc}.ot-approved-result small{flex-basis:100%;color:#62748a}.credit-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}.credit-member-card{background:#fff;border:1px solid #d9e5ef;border-radius:20px;padding:20px;box-shadow:0 12px 30px rgba(28,62,91,.08)}.credit-member-card header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.credit-member-card h3{margin:3px 0 0}.credit-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.credit-metrics div{padding:12px;border-radius:14px;background:#f2f7fb}.credit-metrics span{display:block;font-size:.75rem;color:#64788c;text-transform:uppercase;letter-spacing:.05em}.credit-metrics strong{display:block;margin-top:5px;color:#123b5b}.credit-day-line{padding:11px 13px;border-radius:12px;background:#eaf5ff;color:#174f76;margin-bottom:10px}@media(max-width:720px){.credit-metrics{grid-template-columns:1fr}.ot-approved-result{align-items:flex-start;flex-direction:column}}


/* Release 21.21 — application identity and signed-in profile refresh */
.side-nav-head {
  padding: 4px 8px 12px;
}

.side-brand.text-only-brand {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: 12px 14px 12px 17px;
  border: 1px solid rgba(129, 195, 241, 0.14);
  background:
    radial-gradient(circle at 92% 18%, rgba(67, 171, 230, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  box-shadow: inset 3px 0 0 rgba(91, 184, 238, 0.86), 0 12px 28px rgba(0,0,0,0.12);
}

.side-brand.text-only-brand::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #55d89a;
  box-shadow: 0 0 0 5px rgba(85,216,154,0.10);
}

.side-brand.text-only-brand .brand-copy strong {
  font-size: 1.06rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.side-brand.text-only-brand .brand-copy small {
  margin-top: 5px;
  color: #9fc3df;
  font-size: 0.66rem;
  font-weight: 720;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.modern-topbar {
  padding-block: 9px;
}

.user-profile-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 292px;
  padding: 7px 8px 7px 9px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-500) 18%, var(--ui-border));
  border-radius: 17px;
  background:
    radial-gradient(circle at 6% 12%, color-mix(in srgb, var(--ui-brand-100) 70%, transparent), transparent 37%),
    linear-gradient(135deg, var(--ui-surface), var(--ui-surface-soft));
  box-shadow: 0 9px 24px rgba(10,39,66,0.07);
}

.user-avatar-enhanced {
  position: relative;
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff !important;
  background: linear-gradient(145deg, #338fd1, #255dc2 58%, #6547d7);
  box-shadow: 0 8px 20px rgba(42,103,190,0.25), inset 0 0 0 1px rgba(255,255,255,0.30);
  font-size: 0.86rem !important;
  letter-spacing: 0.02em;
}

.user-avatar-enhanced i {
  position: absolute;
  right: -1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ui-surface);
  border-radius: 50%;
  background: #42ce88;
  box-shadow: 0 0 0 2px rgba(66,206,136,0.12);
}

.user-profile-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 108px;
  line-height: 1.1;
}

.user-profile-copy .user-profile-eyebrow {
  margin: 0 0 3px;
  color: var(--ui-muted);
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.user-profile-copy strong {
  max-width: 160px;
  overflow: hidden;
  color: var(--ui-text-strong);
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-copy .user-role-chip {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-500) 17%, var(--ui-border));
  border-radius: 999px;
  color: var(--ui-brand-800);
  background: color-mix(in srgb, var(--ui-brand-100) 58%, var(--ui-surface));
  font-size: 0.54rem;
  font-weight: 760;
  white-space: nowrap;
}

.user-profile-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 7px;
  border-left: 1px solid var(--ui-border);
}

.user-profile-actions form {
  margin: 0;
}

.profile-action-button {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  min-height: 33px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  color: var(--ui-text);
  background: var(--ui-surface);
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.profile-action-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ui-brand-600) 44%, var(--ui-border));
  color: var(--ui-brand-700);
  background: var(--ui-brand-100);
}

.profile-logout-button:hover {
  border-color: color-mix(in srgb, #dc5964 40%, var(--ui-border));
  color: #bb3543;
  background: color-mix(in srgb, #fdebed 78%, var(--ui-surface));
}

html[data-theme="dark"] .user-profile-panel {
  background: linear-gradient(135deg, #112d46, #0d2338);
}

html[data-theme="dark"] .user-profile-copy .user-role-chip {
  color: #a8d4f2;
  background: rgba(57,142,203,0.14);
}

@media (max-width: 1180px) {
  .user-profile-panel { min-width: 0; }
  .user-profile-copy .user-profile-eyebrow,
  .user-profile-copy .user-role-chip,
  .user-profile-actions { display: none; }
  .user-profile-copy { min-width: 74px; }
}

@media (max-width: 860px) {
  .user-profile-copy { display: none; }
  .user-profile-panel { padding: 4px; border-radius: 14px; }
  .user-avatar-enhanced { width: 40px; height: 40px; flex-basis: 40px; }
}

/* Release 21.21.1 — premium workspace header refinement */
.side-nav-head{padding:6px 12px 17px}.side-brand.text-only-brand{min-height:auto;padding:9px 4px 15px;border:0;border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid rgba(157,200,230,.17)}.side-brand.text-only-brand::before{content:"";width:9px;height:38px;border-radius:999px;background:linear-gradient(180deg,#57b9f1,#407ee8);box-shadow:0 0 20px rgba(74,160,229,.38)}.side-brand.text-only-brand::after{display:none}.side-brand.text-only-brand .brand-copy strong{font-size:1.28rem;letter-spacing:-.04em}.side-brand.text-only-brand .brand-copy small{margin-top:3px;font-size:.7rem;text-transform:none;letter-spacing:.02em;color:#a9c7dc}
.premium-topbar{min-height:74px;padding:10px 22px;gap:10px;background:color-mix(in srgb,var(--ui-surface) 94%,transparent);box-shadow:0 1px 0 var(--ui-border),0 8px 30px rgba(13,43,70,.035)}.topbar-welcome{display:flex;flex-direction:column;min-width:210px;line-height:1.08}.topbar-welcome>span{color:var(--ui-muted);font-size:.68rem;font-weight:700}.topbar-welcome strong{margin-top:3px;color:var(--ui-text-strong);font-size:1.06rem;font-weight:900;letter-spacing:-.025em}.topbar-welcome strong b{font-size:.95rem}.topbar-welcome small{margin-top:4px;color:var(--ui-brand-700);font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.topbar-info-card{display:flex;align-items:center;gap:9px;min-height:48px;padding:7px 11px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface);box-shadow:0 6px 18px rgba(13,43,70,.045);text-decoration:none}.topbar-info-card .topbar-info-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:#1768ad;background:#edf6ff;font-weight:900}.topbar-info-card>div{display:flex;flex-direction:column;line-height:1.1}.topbar-info-card small{color:var(--ui-muted);font-size:.55rem;font-weight:750;text-transform:uppercase;letter-spacing:.04em}.topbar-info-card strong{margin-top:4px;color:var(--ui-text-strong);font-size:.67rem;white-space:nowrap}.topbar-requests-card .topbar-info-icon{color:#b74050;background:#fff0f2}.topbar-requests-card:hover{transform:translateY(-1px);border-color:#a9cbe5}
.premium-theme-toggle{width:44px;min-width:44px;height:48px;border-radius:14px}.premium-language-switch{height:48px;padding:4px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface-soft);gap:3px}.premium-language-switch>span{display:none}.premium-language-switch .lang-button{height:38px;min-width:40px;padding:0 10px;border-radius:10px}.premium-language-switch .lang-button.active{color:#fff;background:linear-gradient(135deg,#2379bd,#175d9d);box-shadow:0 6px 14px rgba(31,108,168,.22)}
.premium-user-menu{position:relative;margin:0}.premium-user-menu summary{display:flex;align-items:center;gap:10px;min-width:202px;min-height:48px;padding:5px 9px 5px 6px;border:1px solid var(--ui-border);border-radius:15px;background:var(--ui-surface);box-shadow:0 6px 18px rgba(13,43,70,.05);cursor:pointer;list-style:none}.premium-user-menu summary::-webkit-details-marker{display:none}.premium-user-avatar{position:relative;display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#447ee4,#6649db);box-shadow:0 7px 17px rgba(69,82,205,.24);font-size:.72rem;font-weight:900}.premium-user-avatar i{position:absolute;right:-1px;bottom:0;width:10px;height:10px;border:2px solid var(--ui-surface);border-radius:50%;background:#36c67f}.premium-user-avatar.large{width:46px;height:46px;flex-basis:46px}.premium-user-copy{display:flex;flex:1;min-width:0;flex-direction:column;line-height:1.12}.premium-user-copy strong{overflow:hidden;color:var(--ui-text-strong);font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}.premium-user-copy small{margin-top:4px;color:var(--ui-muted);font-size:.57rem;white-space:nowrap}.premium-user-chevron{color:var(--ui-muted);font-size:.8rem;transition:transform .16s ease}.premium-user-menu[open] .premium-user-chevron{transform:rotate(180deg)}.premium-user-dropdown{position:absolute;top:calc(100% + 9px);right:0;z-index:100;width:250px;padding:10px;border:1px solid var(--ui-border);border-radius:17px;background:var(--ui-surface);box-shadow:0 18px 45px rgba(12,41,69,.18)}.premium-user-dropdown-head{display:flex;align-items:center;gap:11px;padding:8px 8px 13px;border-bottom:1px solid var(--ui-border)}.premium-user-dropdown-head>div{display:flex;min-width:0;flex-direction:column}.premium-user-dropdown-head strong{color:var(--ui-text-strong);font-size:.8rem}.premium-user-dropdown-head small{margin-top:4px;color:var(--ui-muted);font-size:.62rem}.premium-user-dropdown>a,.premium-user-dropdown button{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;padding:10px 11px;border:0;border-radius:11px;color:var(--ui-text);background:transparent;text-decoration:none;font-size:.72rem;font-weight:750;cursor:pointer}.premium-user-dropdown>a:hover,.premium-user-dropdown button:hover{color:var(--ui-brand-700);background:var(--ui-brand-100)}.premium-user-dropdown form{margin:0}
html[data-theme="dark"] .topbar-info-card,html[data-theme="dark"] .premium-user-menu summary,html[data-theme="dark"] .premium-user-dropdown{background:#102a41}.premium-topbar .nav-toggle{margin-right:2px}
@media(max-width:1380px){.topbar-clock-card{display:none}.topbar-info-card{padding-inline:9px}.premium-user-menu summary{min-width:176px}.topbar-welcome{min-width:170px}}
@media(max-width:1120px){.topbar-calendar-card,.topbar-requests-card{display:none}.topbar-welcome small{display:none}}
@media(max-width:820px){.premium-topbar{padding-inline:12px}.topbar-welcome{min-width:0}.topbar-welcome>span,.topbar-welcome small{display:none}.topbar-welcome strong{font-size:.82rem}.premium-user-copy,.premium-user-chevron{display:none}.premium-user-menu summary{min-width:auto;padding:4px}.premium-language-switch{height:42px}.premium-language-switch .lang-button{height:32px;min-width:34px;padding:0 7px}.premium-theme-toggle{height:42px;width:40px;min-width:40px}}


/* Release 21.21.2 — balanced dark dashboard and action-first header */
.topbar-logout-form{display:flex;align-items:center;margin:0 0 0 2px}.topbar-logout-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 15px;border:1px solid color-mix(in srgb,var(--ui-danger) 35%,var(--ui-border));border-radius:13px;background:color-mix(in srgb,var(--ui-danger-soft) 58%,var(--ui-surface));color:var(--ui-danger);font:inherit;cursor:pointer;box-shadow:0 6px 16px rgba(13,43,70,.05);transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.topbar-logout-button strong{color:inherit;font-size:.72rem;white-space:nowrap}.topbar-logout-button:hover{transform:translateY(-1px);border-color:var(--ui-danger);background:color-mix(in srgb,var(--ui-danger-soft) 82%,var(--ui-surface));box-shadow:0 9px 20px rgba(198,69,69,.12)}
.premium-topbar{border-bottom:1px solid var(--ui-border);background:color-mix(in srgb,var(--ui-surface) 97%,var(--ui-brand-100));box-shadow:0 1px 0 rgba(10,39,66,.03),0 12px 30px rgba(10,39,66,.045)}.premium-topbar .topbar-welcome{padding-right:14px;border-right:1px solid var(--ui-border)}.premium-user-menu summary{min-height:48px}.premium-user-avatar{background:linear-gradient(145deg,#387fd0,#654bc6);box-shadow:0 8px 18px rgba(45,93,165,.2)}

html[data-theme="dark"]{--ui-canvas:#101820;--ui-surface:#18232e;--ui-surface-raised:#1d2a36;--ui-surface-soft:#141f29;--ui-border:#344452;--ui-border-strong:#475966;--ui-text:#d7e1e8;--ui-text-strong:#f4f7f9;--ui-muted:#aab8c2;--ui-success-soft:#183a2b;--ui-warning-soft:#3b321b;--ui-danger-soft:#402428;--ui-info-soft:#18354b;--ui-brand-100:#18364e}
html[data-theme="dark"] body{background:radial-gradient(circle at 78% -8%,rgba(67,139,195,.12),transparent 34rem),linear-gradient(180deg,#101820 0%,#111b24 100%)}
html[data-theme="dark"] .premium-topbar{background:linear-gradient(180deg,#182b3c 0%,#162838 100%);border-color:#365064;box-shadow:0 1px 0 rgba(255,255,255,.025),0 14px 35px rgba(0,0,0,.18)}
html[data-theme="dark"] .premium-topbar .topbar-welcome{border-color:#385065}html[data-theme="dark"] .topbar-welcome>span{color:#a9bdcc}html[data-theme="dark"] .topbar-welcome small{color:#78bce9}
html[data-theme="dark"] .topbar-info-card{background:#203445;border-color:#3a5265;box-shadow:none}html[data-theme="dark"] .topbar-info-card .topbar-info-icon{background:#27475f;color:#9ed2f4}html[data-theme="dark"] .topbar-requests-card .topbar-info-icon{background:#4a2e36;color:#ffb4bd}
html[data-theme="dark"] .premium-theme-toggle,html[data-theme="dark"] .premium-language-switch,html[data-theme="dark"] .premium-user-menu summary{background:#203445;border-color:#3a5265;box-shadow:none}html[data-theme="dark"] .premium-user-dropdown{background:#203445;border-color:#40596d}html[data-theme="dark"] .topbar-logout-button{background:#472831;border-color:#70404a;color:#ffc4ca;box-shadow:none}html[data-theme="dark"] .topbar-logout-button:hover{background:#59303a;border-color:#a45a66}

/* Remove the harsh black-on-pastel dashboard effect in dark mode. */
html[data-theme="dark"] .dashboard-panel,html[data-theme="dark"] .team-command-panel,html[data-theme="dark"] .unassigned-task-panel,html[data-theme="dark"] .live-work-panel,html[data-theme="dark"] .workforce-panel,html[data-theme="dark"] .approval-panel,html[data-theme="dark"] .sync-card{background:#182531;border-color:#334858;box-shadow:0 18px 44px rgba(0,0,0,.16)}
html[data-theme="dark"] .team-command-stat{background:#1d2b37;border-color:#3a4d5c;box-shadow:none}html[data-theme="dark"] .team-command-stat:hover{background:#233542;border-color:#52738a}
html[data-theme="dark"] .team-command-stat.available{background:linear-gradient(135deg,#19372c,#1c2c31);border-color:#2d7050}html[data-theme="dark"] .team-command-stat.busy{background:linear-gradient(135deg,#1b3347,#1c2b36);border-color:#3a7199}html[data-theme="dark"] .team-command-stat.assigned,html[data-theme="dark"] .team-command-stat.tasks{background:linear-gradient(135deg,#3a321d,#252b31);border-color:#816d2e}html[data-theme="dark"] .team-command-stat.risk{background:linear-gradient(135deg,#42262b,#272a30);border-color:#8a4650}
html[data-theme="dark"] .availability-board-three .availability-group{background:#1b2935;border-color:#3b4f5f;box-shadow:none}html[data-theme="dark"] .availability-board-three .available-group{background:linear-gradient(145deg,#183329,#1b2932);border-color:#347254}html[data-theme="dark"] .availability-board-three .assigned-group{background:linear-gradient(145deg,#393119,#1c2932);border-color:#856f2c}html[data-theme="dark"] .availability-board-three .overdue-group{background:linear-gradient(145deg,#3d2429,#1c2932);border-color:#84444e}
html[data-theme="dark"] .member-availability-card.state-available{background:#1d382e;border-color:#3d785a}html[data-theme="dark"] .member-availability-card.state-working{background:#1d3447;border-color:#3f769c}html[data-theme="dark"] .member-availability-card.state-assigned{background:#3b331e;border-color:#887439}html[data-theme="dark"] .member-availability-card.state-overdue,html[data-theme="dark"] .member-availability-card.has-overdue{background:#41272c;border-color:#92505a}
html[data-theme="dark"] .member-card-identity strong,html[data-theme="dark"] .availability-group-heading h3,html[data-theme="dark"] .current-task-item strong,html[data-theme="dark"] .member-ready-state strong{color:#f1f6f9}html[data-theme="dark"] .member-card-identity small,html[data-theme="dark"] .current-task-item small,html[data-theme="dark"] .member-ready-state small{color:#aec0cc}
html[data-theme="dark"] .availability-count{background:#263846;color:#eef5f8}html[data-theme="dark"] .dashboard-empty{background:#1d2c37;border-color:#3b4f5d;color:#b6c5cf}
html[data-theme="dark"] .member-task-list,html[data-theme="dark"] .current-task-item,html[data-theme="dark"] .member-ready-state{background:#17232d;border-color:#334958;color:#dce7ed}html[data-theme="dark"] .current-task-progress{background:#324653}
html[data-theme="dark"] .availability-badge.available{background:#204a37;color:#a8e6c2}html[data-theme="dark"] .availability-badge.working{background:#1e4665;color:#aedcff}html[data-theme="dark"] .availability-badge.assigned{background:#51451f;color:#ffe49a}html[data-theme="dark"] .availability-badge.overdue{background:#5a2e35;color:#ffc0c7}
html[data-theme="dark"] .availability-legend{background:#1e2d38;border-color:#3b4e5d;color:#c4d0d8}

@media(max-width:1000px){.topbar-logout-button{min-width:44px;padding:0 11px}.topbar-logout-button strong{display:none}}
@media(max-width:820px){.topbar-logout-form{margin-left:0}.topbar-logout-button{height:42px;min-height:42px}.premium-topbar .topbar-welcome{border-right:0;padding-right:0}}


/* Release 21.21.3 — dashboard member-name visibility control */
.team-command-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.member-visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-500) 32%, var(--ui-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-brand-500) 8%, var(--ui-surface));
  color: var(--ui-text);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(15, 38, 63, .08);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.member-visibility-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--ui-brand-500);
  box-shadow: 0 8px 18px rgba(15, 38, 63, .12);
}
.member-visibility-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ui-warning) 14%, var(--ui-surface));
  border-color: color-mix(in srgb, var(--ui-warning) 58%, var(--ui-border));
}
.member-visibility-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ui-brand-600);
  color: #fff;
  font-size: .72rem;
  line-height: 1;
}
.member-names-hidden .privacy-member-name {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.member-names-hidden .privacy-member-name::after {
  content: attr(data-hidden-label);
  font-size: .86rem;
  letter-spacing: normal;
  color: inherit;
  font-weight: 750;
}
.member-names-hidden .privacy-member-avatar {
  font-size: 0 !important;
  background: linear-gradient(145deg, #64748b, #334155) !important;
}
.member-names-hidden .privacy-member-avatar::after {
  content: "••";
  font-size: .7rem;
  letter-spacing: 1px;
  color: #fff;
}
html[data-theme="dark"] .member-visibility-toggle,
body.dark-mode .member-visibility-toggle {
  background: rgba(20, 47, 72, .78);
  border-color: rgba(105, 175, 231, .34);
  color: #eaf4ff;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .2);
}
html[data-theme="dark"] .member-visibility-toggle[aria-pressed="true"],
body.dark-mode .member-visibility-toggle[aria-pressed="true"] {
  background: rgba(145, 102, 12, .32);
  border-color: rgba(244, 193, 72, .58);
}
@media (max-width: 920px) {
  .team-command-heading-actions { width: 100%; justify-content: flex-start; }
}

/* Release 21.21.5 */
.staff-task-assignment-callout{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface));}
.staff-task-assignment-callout h2{margin:.25rem 0 .45rem;}
.utilization-scale-note{display:flex;gap:14px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,#ef4444 8%,var(--surface));border:1px solid color-mix(in srgb,#ef4444 24%,var(--border));}
.utilization-scale-note strong{color:#dc2626;white-space:nowrap;}
.project-utilization-bar,.time-utilization-track{position:relative;overflow:hidden;}
.project-utilization-bar::after,.time-utilization-track::after{content:"100% plan";position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed color-mix(in srgb,#ef4444 55%,transparent);font-size:10px;color:var(--muted);padding-left:5px;display:flex;align-items:center;pointer-events:none;}
.project-utilization-bar i.over-target,.time-utilization-track i.over-target{background:linear-gradient(90deg,#2563eb 0 50%,#f59e0b 50% 78%,#ef4444 78% 100%);}
@media(max-width:760px){.staff-task-assignment-callout{align-items:stretch;flex-direction:column;}.staff-task-assignment-callout form,.staff-task-assignment-callout .button{width:100%;}}

/* Release 21.22 — task-hourly member mode and attendance action colors. */
.attendance-action.time-in {
  background: linear-gradient(135deg, #15803d, #22a65a);
  box-shadow: 0 10px 24px rgba(21, 128, 61, .18);
}
.attendance-action.time-out {
  background: linear-gradient(135deg, #b42318, #dc3b30);
  box-shadow: 0 10px 24px rgba(180, 35, 24, .18);
}
.attendance-action.time-in:not(:disabled):hover { background: linear-gradient(135deg, #116b34, #1d914d); }
.attendance-action.time-out:not(:disabled):hover { background: linear-gradient(135deg, #982018, #c62f27); }
.attendance-action:disabled { filter: saturate(.65); opacity: .42; }

.task-hourly-command-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ui-surface) 94%, #e9f7ff), var(--ui-surface));
  border-color: color-mix(in srgb, var(--ui-info) 32%, var(--ui-border));
}
.attendance-state-orb.task-hourly { background: var(--ui-info-soft); color: var(--ui-info); }
.attendance-state-orb.task-hourly span { background: var(--ui-info); }
.task-hourly-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.task-hourly-summary-grid article {
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface-soft);
}
.task-hourly-summary-grid article span,
.task-hourly-summary-grid article small { display: block; color: var(--ui-muted); }
.task-hourly-summary-grid article span { font-size: .69rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.task-hourly-summary-grid article strong { display: block; margin-top: 7px; font-size: 1.55rem; color: var(--ui-text); }
.task-hourly-summary-grid article.featured { background: color-mix(in srgb, var(--ui-info-soft) 78%, var(--ui-surface)); border-color: color-mix(in srgb, var(--ui-info) 35%, var(--ui-border)); }
.task-hourly-note { background: var(--ui-info-soft); color: var(--ui-info); }
.task-hourly-ledger td small { display: block; margin-top: 3px; color: var(--ui-muted); }
.task-hourly-ledger th:nth-last-child(-n+4),
.task-hourly-ledger td:nth-last-child(-n+4) { text-align: right; white-space: nowrap; }
.task-hourly-ledger tfoot th { border-top: 2px solid var(--ui-border); background: var(--ui-surface-soft); }

@media (max-width: 760px) {
  .task-hourly-summary-grid { grid-template-columns: 1fr; }
}

/* Release 21.22.2 — recently completed task period selector */
.completed-task-period-filter {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 16px;
}
.completed-task-period-filter label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--text, #17324d);
}
.completed-task-period-filter select {
  min-width: 190px;
  border: 1px solid var(--border, #d7e3ee);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: inherit;
  padding: 10px 34px 10px 12px;
}
@media (max-width: 720px) {
  .completed-task-period-filter { justify-content: stretch; }
  .completed-task-period-filter label { width: 100%; align-items: stretch; flex-direction: column; }
  .completed-task-period-filter select { width: 100%; }
}
/* Release 21.22.5: compact review queue */
.review-queue-panel{padding-bottom:1rem}.review-queue-summary{display:flex;align-items:baseline;gap:.55rem;margin:.25rem 0 .8rem}.review-queue-summary>strong{font-size:2rem}.review-queue-summary small{margin-left:auto;opacity:.72}.review-queue-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.review-queue-compact>a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.7rem;align-items:center;padding:.72rem .85rem;border:1px solid var(--border-color,#dfe5ec);border-radius:12px;text-decoration:none;color:inherit}.review-queue-compact a div{min-width:0}.review-queue-compact a strong,.review-queue-compact a small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.review-queue-compact a>b{font-variant-numeric:tabular-nums}.review-live-strip{display:flex;gap:.75rem;align-items:center;padding:.7rem .85rem;margin-bottom:.7rem;border-radius:12px;background:rgba(37,99,235,.08);text-decoration:none;color:inherit}.review-live-strip small{margin-left:auto}.review-active-panel{display:grid;grid-template-columns:1fr minmax(300px,520px);gap:1rem;align-items:end}.review-active-panel form{display:grid;grid-template-columns:1fr auto;gap:.5rem}.review-active-panel label{grid-column:1/-1}@media(max-width:850px){.review-queue-compact{grid-template-columns:1fr}.review-active-panel{grid-template-columns:1fr}}


/* Release 21.22.8 — full-detail horizontal availability lanes.
   Existing card colors/shades remain unchanged; only layout is optimized. */
.availability-board-horizontal-details{display:grid;gap:16px;margin-top:18px}
.availability-board-horizontal-details .availability-lane{min-width:0;border-radius:18px;padding:16px;border:1px solid var(--ui-border)}
.availability-board-horizontal-details .available-group{background:linear-gradient(145deg,rgba(224,248,232,.96),rgba(255,255,255,.94));border-color:rgba(25,135,84,.25)}
.availability-board-horizontal-details .assigned-group{background:linear-gradient(145deg,rgba(255,244,204,.97),rgba(255,255,255,.94));border-color:rgba(227,160,8,.3)}
.availability-board-horizontal-details .overdue-group{background:linear-gradient(145deg,rgba(255,225,228,.97),rgba(255,255,255,.94));border-color:rgba(220,53,69,.28)}
.availability-board-horizontal-details .availability-state-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:visible;padding:2px;align-items:stretch}
.availability-board-horizontal-details .member-availability-card{min-width:0}
.availability-board-horizontal-details .member-availability-card{height:100%;scroll-snap-align:start}
.my-review-work-panel .review-queue-compact>a{grid-template-columns:minmax(0,1fr) auto auto auto}
.review-state-chip{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:999px;font-size:.68rem;font-weight:800;white-space:nowrap;background:var(--ui-surface-soft);border:1px solid var(--ui-border)}
.review-state-reviewing{background:#dbeafe;color:#0755a5;border-color:#93c5fd}.review-state-reviewed{background:#dcfce7;color:#166534;border-color:#86efac}.review-state-assigned{background:#fff0bd;color:#775000;border-color:#f5cf64}.review-state-unassigned{color:var(--ui-muted)}
html[data-theme="dark"] .availability-board-horizontal-details .availability-lane{box-shadow:none}
html[data-theme="dark"] .availability-board-horizontal-details .available-group{background:linear-gradient(145deg,#183329,#1b2932);border-color:#347254}
html[data-theme="dark"] .availability-board-horizontal-details .assigned-group{background:linear-gradient(145deg,#393119,#1c2932);border-color:#856f2c}
html[data-theme="dark"] .availability-board-horizontal-details .overdue-group{background:linear-gradient(145deg,#3d2429,#1c2932);border-color:#84444e}
html[data-theme="dark"] .review-state-chip{background:#253541;border-color:#42586a;color:#dce9f2}
@media(max-width:1240px){.availability-board-horizontal-details .availability-state-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.availability-board-horizontal-details .availability-state-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.availability-board-horizontal-details .availability-state-grid{grid-template-columns:1fr}.my-review-work-panel .review-queue-compact>a{grid-template-columns:minmax(0,1fr) auto}.my-review-work-panel .review-state-chip{grid-column:2}}

/* Release 21.22.9 — wrapped availability board + staff My Work timers. */
.my-assigned-task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.my-assigned-task-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface-soft)}
.my-assigned-task-copy{min-width:0}.my-assigned-task-copy h3{margin:4px 0 6px;color:var(--ui-text)}.my-assigned-task-copy p,.my-assigned-task-copy small{margin:0;color:var(--ui-muted)}
.my-assigned-task-actions{display:flex;align-items:center;justify-content:flex-end;min-width:150px}.inline-work-stop-form{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:8px;align-items:center}.inline-work-stop-form input{min-width:0}
.timer-conflict-note{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--ui-warning-soft);color:var(--ui-text);border:1px solid color-mix(in srgb,var(--ui-warning) 35%,var(--ui-border))}
.staff-work-live{margin-bottom:12px}
.review-queue-actions{grid-template-columns:1fr}.review-queue-actions .my-review-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto minmax(210px,auto);gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface)}
.review-queue-actions .my-review-row>div:first-child{min-width:0}.review-queue-actions .my-review-row strong,.review-queue-actions .my-review-row small{display:block}.review-queue-actions .my-review-row small{color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.my-review-row-action{display:flex;justify-content:flex-end}
html[data-theme="dark"] .my-assigned-task-card,html[data-theme="dark"] .review-queue-actions .my-review-row{background:var(--ui-surface)}
@media(max-width:1100px){.my-assigned-task-grid{grid-template-columns:1fr}.review-queue-actions .my-review-row{grid-template-columns:minmax(0,1fr) auto auto}.review-queue-actions .my-review-row>b{grid-column:2}.review-queue-actions .my-review-row-action{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:760px){.my-assigned-task-card{grid-template-columns:1fr}.my-assigned-task-actions{justify-content:flex-start}.inline-work-stop-form{grid-template-columns:1fr}.review-queue-actions .my-review-row{grid-template-columns:1fr}.review-queue-actions .my-review-row>b,.review-queue-actions .my-review-row-action{grid-column:auto}}

/* Release 21.22.10 — freelancer self-service attendance + DTR archive. */
.attendance-history-summary-grid,.personal-dtr-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.personal-dtr-summary-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.personal-history-stat{padding:16px 18px}.personal-history-stat span,.personal-history-stat small{display:block;color:var(--ui-muted)}.personal-history-stat span{font-size:.72rem;font-weight:850;letter-spacing:.045em;text-transform:uppercase}.personal-history-stat strong{display:block;margin:7px 0 2px;font-size:1.65rem;color:var(--ui-text)}.personal-history-stat .history-date-value{font-size:1.08rem}
.personal-history-controls{margin-bottom:16px}.history-range-actions{display:flex;flex-wrap:wrap;align-items:end;gap:10px}.history-month-form{display:flex;align-items:end;gap:8px;margin-left:auto}.history-month-form label{display:grid;gap:5px;font-size:.72rem;font-weight:800;color:var(--ui-muted);text-transform:uppercase;letter-spacing:.04em}.history-month-form input{min-width:165px}
.personal-dtr-archive{margin-top:16px}.personal-dtr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.personal-dtr-card{padding:16px;border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface-soft);display:grid;gap:14px}.personal-dtr-card-head,.personal-dtr-card-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.personal-dtr-card-head>div span{display:block;font-size:.7rem;font-weight:800;color:var(--ui-muted);text-transform:uppercase;letter-spacing:.045em}.personal-dtr-card-head>div strong{display:block;margin-top:3px;font-size:1.35rem;color:var(--ui-text)}.personal-dtr-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.personal-dtr-metrics span{padding:9px 10px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-surface)}.personal-dtr-metrics small,.personal-dtr-metrics strong{display:block}.personal-dtr-metrics small{font-size:.68rem;color:var(--ui-muted);font-weight:750}.personal-dtr-metrics strong{margin-top:3px;color:var(--ui-text)}.task-hourly-personal-dtr{grid-template-columns:repeat(2,minmax(0,1fr))}.personal-dtr-card-footer small{color:var(--ui-muted)}
.personal-dtr-support-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.personal-dtr-support-grid article{padding:14px;border:1px solid var(--ui-border);border-radius:13px;background:var(--ui-surface-soft)}.personal-dtr-support-grid span,.personal-dtr-support-grid small{display:block;color:var(--ui-muted)}.personal-dtr-support-grid strong{display:block;margin:5px 0 2px;font-size:1.35rem;color:var(--ui-text)}
.personal-dtr-note{margin-top:16px}.personal-task-hourly-summary{margin-bottom:16px}
html[data-theme="dark"] .personal-dtr-card,html[data-theme="dark"] .personal-dtr-support-grid article{background:var(--ui-surface)}
@media(max-width:1250px){.personal-dtr-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.personal-dtr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.attendance-history-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.personal-dtr-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.history-month-form{margin-left:0;width:100%;flex-wrap:wrap}}
@media(max-width:680px){.attendance-history-summary-grid,.personal-dtr-summary-grid,.personal-dtr-grid,.personal-dtr-support-grid{grid-template-columns:1fr}.personal-dtr-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.history-range-actions{align-items:stretch}.history-range-actions>.button{flex:1 1 auto}.history-month-form{display:grid;grid-template-columns:1fr}.history-month-form input{width:100%}.personal-dtr-card-head,.personal-dtr-card-footer{align-items:flex-start;flex-direction:column}}

/* Release 21.23.1 live screen sharing */
.screen-share-prototype-card{margin:18px 0;border:1px solid rgba(59,130,246,.22);background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(99,102,241,.04));overflow:hidden}
.screen-share-prototype-card .screen-share-prototype-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.screen-share-status-line{display:flex;align-items:center;gap:10px;margin-top:14px;font-weight:700}.screen-share-status-line i{width:10px;height:10px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 5px rgba(148,163,184,.14)}
.screen-share-prototype-card.is-live .screen-share-status-line i{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.15)}
.screen-share-prototype-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.screen-share-viewer-count{font-size:.83rem;color:var(--muted-color,#64748b);white-space:nowrap}
.screen-share-page-header{margin-bottom:18px}.screen-share-live-list{display:grid;gap:10px;margin-top:8px}.screen-share-live-card{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 17px;border:1px solid rgba(34,197,94,.25);border-radius:15px;background:rgba(34,197,94,.055)}
.screen-share-live-card>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.screen-share-live-card strong{font-size:1rem}.screen-share-live-card small{grid-column:2;color:var(--muted-color,#64748b);margin-top:2px}.screen-share-live-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.14);grid-row:1/3}
.screen-share-viewer{margin-top:20px;border:1px solid rgba(148,163,184,.2);border-radius:18px;overflow:hidden}.screen-share-viewer-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 16px;background:rgba(15,23,42,.04)}.screen-share-viewer-toolbar>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.screen-share-video-shell{background:#05080d;min-height:360px;display:grid;place-items:center;overflow:hidden}.screen-share-video-shell video{display:block;width:100%;max-height:74vh;object-fit:contain;background:#05080d}.screen-share-viewer>.muted{padding:0 16px 14px}
.screen-share-boundary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.screen-share-boundary-grid div{padding:14px;border:1px solid rgba(148,163,184,.16);border-radius:14px;background:rgba(148,163,184,.04)}.screen-share-boundary-grid strong,.screen-share-boundary-grid span{display:block}.screen-share-boundary-grid span{margin-top:4px;font-size:.82rem;color:var(--muted-color,#64748b)}
[data-theme="dark"] .screen-share-prototype-card{background:linear-gradient(135deg,rgba(59,130,246,.13),rgba(99,102,241,.06));border-color:rgba(96,165,250,.28)}[data-theme="dark"] .screen-share-live-card{background:rgba(34,197,94,.07)}[data-theme="dark"] .screen-share-viewer-toolbar{background:rgba(255,255,255,.035)}
@media(max-width:760px){.screen-share-prototype-card .screen-share-prototype-grid{grid-template-columns:1fr}.screen-share-prototype-actions{justify-content:flex-start}.screen-share-live-card{align-items:flex-start;flex-direction:column}.screen-share-boundary-grid{grid-template-columns:1fr 1fr}.screen-share-video-shell{min-height:220px}}
@media(max-width:480px){.screen-share-boundary-grid{grid-template-columns:1fr}}


/* Live Work Room and screen-share privacy */
.screen-share-privacy-note,
.screen-share-capture-tip {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #dce5ee);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
  display: grid;
  gap: 4px;
}
.screen-share-privacy-note strong { font-weight: 800; }
.screen-share-privacy-note span,
.screen-share-capture-tip { font-size: .86rem; line-height: 1.5; }
.screen-share-prototype-card.is-source-paused .screen-share-status-line i { animation: none; opacity: .45; }

.live-work-summary { display:flex; gap:10px; flex-wrap:wrap; }
.live-work-summary span {
  border:1px solid var(--border, #dce5ee);
  border-radius:999px;
  padding:8px 12px;
  font-size:.82rem;
  background:rgba(255,255,255,.55);
}
.live-work-order-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:16px;
}
.live-work-order-card {
  overflow:hidden;
  border:1px solid var(--border, #dce5ee);
  border-radius:16px;
  background:var(--surface, #fff);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.live-work-order-preview {
  min-height:142px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg, rgba(15,23,42,.94), rgba(30,64,175,.82));
}
.live-preview-placeholder { text-align:center; display:grid; gap:7px; color:#fff; }
.live-preview-placeholder span { font-size:.72rem; font-weight:800; letter-spacing:.08em; }
.live-preview-placeholder strong { font-size:1rem; }
.live-preview-placeholder small { opacity:.78; }
.live-preview-placeholder.is-offline { opacity:.68; }
.live-work-order-body { padding:16px; }
.live-work-order-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.live-work-order-head > div { min-width:0; }
.live-work-order-head strong { display:block; font-size:1rem; }
.live-work-order-body h3 { margin:14px 0 4px; font-size:1rem; }
.live-work-order-body > p { margin:0; opacity:.72; font-size:.86rem; }
.live-work-order-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.live-work-order-meta > div {
  border:1px solid var(--border, #dce5ee);
  border-radius:10px;
  padding:9px 10px;
  display:grid;
  gap:3px;
}
.live-work-order-meta span { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; opacity:.6; }
.live-work-order-meta strong { font-variant-numeric:tabular-nums; }
.live-work-order-actions { margin-top:14px; display:flex; justify-content:flex-end; align-items:center; min-height:36px; }
@media (max-width: 720px) {
  .live-work-order-grid { grid-template-columns:1fr; }
}


/* Release 21.23.0.5 — control-room live thumbnails */
.live-work-order-grid-control-room {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.live-work-order-card.has-live-screen {
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
}
.live-work-order-preview {
  position: relative;
  min-height: 180px;
  background: linear-gradient(145deg, rgba(15,23,42,.94), rgba(30,64,175,.82));
}
.live-work-thumb {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: block;
  object-fit: cover;
  background: #0f172a;
}
.live-thumb-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(to top, rgba(15,23,42,.85), rgba(15,23,42,.35));
  color: #fff;
}
.live-thumb-badge {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.live-thumb-note {
  opacity: .88;
  font-size: .76rem;
  line-height: 1.35;
}
.live-preview-placeholder.is-offline {
  opacity: .86;
}


/* Release 21.23.1 — dashboard-integrated Live Work Room */
.dashboard-live-control-room {
  position: relative;
  overflow: hidden;
}
.dashboard-control-room-summary {
  align-items: center;
  justify-content: flex-end;
}
.dashboard-control-room-grid {
  margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.dashboard-live-control-room .live-work-order-card {
  min-width: 0;
}
.dashboard-live-control-room .live-work-order-preview {
  min-height: 165px;
}
.dashboard-live-control-room .live-work-thumb {
  min-height: 165px;
  max-height: 230px;
}
.dashboard-expanded-live-view {
  margin-top: 18px;
}
.dashboard-control-room-privacy {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #dce5ee);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: .78rem;
  opacity: .72;
}
.live-work-visibility-card {
  border-left: 4px solid rgba(37, 99, 235, .55);
}
.live-work-sharing-standby {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.live-work-sharing-standby h3 {
  margin: 3px 0 5px;
}
@media (max-width: 760px) {
  .dashboard-control-room-summary { justify-content: flex-start; }
  .dashboard-control-room-grid { grid-template-columns: 1fr; }
  .live-work-sharing-standby { align-items: flex-start; flex-direction: column; }
}

/* Release 21.23.1.1 — screen-share usability and expanded-view hotfix */
.screen-share-work-order-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr) !important;
  align-items: stretch !important;
}
.screen-share-publisher-side {
  display: grid;
  gap: 14px;
  align-content: start;
}
.screen-share-work-order-actions {
  display: grid;
  justify-items: stretch;
  gap: 10px;
}
.screen-share-button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.screen-share-button-row .button { width: 100%; }
.screen-share-prototype-actions .button:disabled {
  opacity: .42;
  filter: grayscale(.42) saturate(.55);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.screen-share-event-notice {
  margin-top: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  border: 1px solid #d9e3ec;
  border-radius: 13px;
  background: #f7fafc;
}
.screen-share-event-notice .screen-share-event-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: #e5edf4;
  color: #526579;
}
.screen-share-event-notice strong,
.screen-share-event-notice span { display: block; }
.screen-share-event-notice strong { font-size: .88rem; }
.screen-share-event-notice div > span { margin-top: 2px; font-size: .8rem; line-height: 1.45; color: var(--ui-muted, #64748b); }
.screen-share-event-notice[data-state="preparing"] { border-color: #bfdbfe; background: #eff6ff; }
.screen-share-event-notice[data-state="preparing"] .screen-share-event-icon { background: #dbeafe; color: #1d4ed8; }
.screen-share-event-notice[data-state="live"] { border-color: #bbf7d0; background: #f0fdf4; }
.screen-share-event-notice[data-state="live"] .screen-share-event-icon { background: #dcfce7; color: #15803d; }
.screen-share-event-notice[data-state="paused"] { border-color: #fde68a; background: #fffbeb; }
.screen-share-event-notice[data-state="paused"] .screen-share-event-icon { background: #fef3c7; color: #a16207; }
.screen-share-event-notice[data-state="stopped"] { border-color: #d9e3ec; background: #f8fafc; }
.screen-share-event-notice[data-state="error"] { border-color: #fecaca; background: #fef2f2; }
.screen-share-event-notice[data-state="error"] .screen-share-event-icon { background: #fee2e2; color: #b91c1c; }
.screen-share-revit-tip { gap: 6px; }
.screen-share-revit-tip strong,
.screen-share-revit-tip span { display: block; }
.screen-share-local-preview-card {
  overflow: hidden;
  border: 1px solid var(--border, #dce5ee);
  border-radius: 15px;
  background: rgba(255,255,255,.68);
}
.screen-share-local-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border, #dce5ee);
}
.screen-share-local-preview-head > div { display: grid; gap: 2px; }
.screen-share-local-preview-head .eyebrow { font-size: .62rem; }
.screen-share-local-preview-shell {
  position: relative;
  min-height: 205px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #07111f;
}
.screen-share-local-preview-shell video {
  width: 100%;
  min-height: 205px;
  max-height: 300px;
  display: block;
  object-fit: contain;
  background: #07111f;
}
.screen-share-local-preview-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 20px;
  text-align: center;
  color: #dbeafe;
  background: linear-gradient(145deg, #0f172a, #172554);
}
.screen-share-local-preview-placeholder[hidden] { display: none; }
.screen-share-local-preview-placeholder > span { font-size: 1.45rem; opacity: .75; }
.screen-share-local-preview-placeholder strong { font-size: .92rem; }
.screen-share-local-preview-placeholder small { max-width: 270px; font-size: .75rem; line-height: 1.4; opacity: .72; }
.screen-share-local-preview-card > .muted { display: block; padding: 10px 12px 12px; font-size: .76rem; }
html[data-theme="dark"] .screen-share-event-notice { background: rgba(15,23,42,.48); border-color: #334155; }
html[data-theme="dark"] .screen-share-local-preview-card { background: rgba(15,23,42,.35); border-color: #334155; }
@media (max-width: 900px) {
  .screen-share-work-order-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .screen-share-button-row { grid-template-columns: 1fr; }
}

/* Release 21.24.0 finance/reporting additions */
.project-member-time-list{display:grid;gap:.38rem;min-width:260px}.project-member-time-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem .6rem;border-radius:10px;background:var(--surface-soft,#f6f8fb)}.project-member-time-row span{display:flex;flex-direction:column;min-width:0}.project-member-time-row small{color:var(--muted,#667085)}.project-member-time-row b,.project-time-total{white-space:nowrap}.bank-details-cell{min-width:270px}.bank-details-cell>strong,.bank-details-cell>small{display:block;margin-bottom:.2rem}.bank-details-cell .button{margin-top:.45rem}.bank-details-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem}.bank-details-summary>div{padding:.8rem 1rem;border:1px solid var(--border,#d8dee8);border-radius:12px;background:var(--surface-soft,#f7f9fc)}.bank-details-summary span{display:block;font-size:.78rem;color:var(--muted,#667085);text-transform:uppercase;letter-spacing:.04em}.bank-details-summary strong{display:block;margin-top:.25rem;word-break:break-word}.finance-history-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.finance-history-grid .panel{margin:0}@media(max-width:980px){.finance-history-grid{grid-template-columns:1fr}.bank-details-cell{min-width:220px}}


/* Release 21.24.0.2 — finance light-mode contrast and clearer payroll explanation */
html:not([data-theme="dark"]) .finance-page-header,
html:not([data-theme="dark"]) .finance-filter-panel,
html:not([data-theme="dark"]) .finance-summary-panel,
html:not([data-theme="dark"]) .finance-summary-panel td,
html:not([data-theme="dark"]) .finance-summary-panel .member-cell,
html:not([data-theme="dark"]) .dtr-header-panel,
html:not([data-theme="dark"]) .summary-section,
html:not([data-theme="dark"]) .glance-summary,
html:not([data-theme="dark"]) .bank-details-summary,
html:not([data-theme="dark"]) .finance-history-grid {
  color: var(--ui-text);
}

html:not([data-theme="dark"]) .finance-page-header h1,
html:not([data-theme="dark"]) .finance-summary-panel h1,
html:not([data-theme="dark"]) .finance-summary-panel h2,
html:not([data-theme="dark"]) .summary-section h2,
html:not([data-theme="dark"]) .summary-section h3,
html:not([data-theme="dark"]) .glance-summary h2,
html:not([data-theme="dark"]) .bank-details-summary strong,
html:not([data-theme="dark"]) .finance-history-grid strong,
html:not([data-theme="dark"]) .finance-factor-table td strong {
  color: var(--ui-text-strong);
}

html:not([data-theme="dark"]) .finance-page-header .muted,
html:not([data-theme="dark"]) .finance-summary-panel small,
html:not([data-theme="dark"]) .finance-summary-panel .muted,
html:not([data-theme="dark"]) .summary-section small,
html:not([data-theme="dark"]) .summary-section .muted,
html:not([data-theme="dark"]) .bank-details-summary span,
html:not([data-theme="dark"]) .bank-details-cell small,
html:not([data-theme="dark"]) .finance-history-grid small {
  color: #5d7185;
}

html:not([data-theme="dark"]) .payroll-formula-banner {
  color: var(--ui-text);
  background: linear-gradient(135deg, #f7fbff 0%, #edf6fd 100%);
  border: 1px solid #cbddeb;
  box-shadow: var(--ui-shadow-sm);
}

html:not([data-theme="dark"]) .payroll-formula-banner h2 {
  color: var(--ui-text-strong);
}

html:not([data-theme="dark"]) .payroll-formula-banner p {
  color: #4f6579;
  opacity: 1;
}

html:not([data-theme="dark"]) .payroll-formula-banner .eyebrow {
  color: var(--ui-brand-700);
}

.payroll-rule-note {
  margin-top: 10px !important;
  font-weight: 750;
}

.payroll-rule-steps {
  display: grid;
  gap: 10px;
}

.payroll-rule-step {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface);
  color: var(--ui-text);
}

.payroll-rule-step > b:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ui-brand-100);
  color: var(--ui-brand-800);
  font-size: .82rem;
}

.payroll-rule-step span {
  color: var(--ui-text);
  font-size: .82rem;
  font-weight: 750;
}

.payroll-rule-step strong {
  color: var(--ui-text-strong);
  font-size: .9rem;
  text-align: right;
}

.payroll-rule-step.result {
  border-color: color-mix(in srgb, var(--ui-success) 28%, var(--ui-border));
  background: var(--ui-success-soft);
}

.payroll-rule-step.result strong {
  color: var(--ui-success);
}

html[data-theme="dark"] .payroll-formula-banner h2 { color: var(--ui-text-strong); }
html[data-theme="dark"] .payroll-formula-banner p { color: var(--ui-muted); opacity: 1; }
html[data-theme="dark"] .payroll-formula-banner .eyebrow { color: #91c8ef; }
html[data-theme="dark"] .payroll-rule-step { background: var(--ui-surface-raised); }

@media (max-width: 800px) {
  .payroll-rule-step { grid-template-columns: 34px 1fr; }
  .payroll-rule-step strong { grid-column: 2; text-align: left; }
}

/* Release 21.24.2 — Finance Center grouped review + all-time member history */
.finance-grouped-table{min-width:1180px}.finance-grouped-table th{white-space:nowrap}.finance-grouped-table td{vertical-align:top}.finance-grouped-table .member-cell{min-width:150px}.finance-group-cell{min-width:150px}.finance-group-cell>span{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;padding:.32rem 0;border-bottom:1px solid color-mix(in srgb,var(--ui-border) 70%,transparent)}.finance-group-cell>span:last-of-type{border-bottom:0}.finance-group-cell small{display:block;line-height:1.3}.finance-group-cell strong{white-space:nowrap}.credit-balance-value strong{color:var(--ui-success)}.compact-bank-cell{min-width:210px;max-width:250px}.finance-quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(86px,1fr));gap:.36rem;min-width:210px}.finance-quick-actions .button{margin:0;justify-content:center;text-align:center;white-space:nowrap}.finance-quick-actions .button.primary{grid-column:1/-1}.finance-quick-view{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;margin-bottom:1rem;border-color:color-mix(in srgb,var(--ui-brand-600) 28%,var(--ui-border));background:linear-gradient(135deg,var(--ui-surface),var(--ui-brand-100))}.finance-quick-view-copy{min-width:0}.finance-quick-view-copy h2{margin:.15rem 0 .25rem}.finance-quick-view-actions{display:flex;align-items:stretch;justify-content:flex-end;gap:.55rem;flex-wrap:wrap}.finance-quick-view-actions .button{min-height:44px}.finance-quick-view-actions .credit-shortcut{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}.finance-quick-view-actions .credit-shortcut strong{font-size:.83rem;color:var(--ui-success)}.finance-credit-balance-panel,.finance-history-all-time article{scroll-margin-top:96px}.finance-credit-balance-panel{border-color:color-mix(in srgb,var(--ui-success) 24%,var(--ui-border));background:linear-gradient(145deg,var(--ui-surface),color-mix(in srgb,var(--ui-success-soft) 46%,var(--ui-surface)))}.finance-credit-hero{display:flex;flex-direction:column;align-items:flex-end;padding:.65rem .9rem;border:1px solid color-mix(in srgb,var(--ui-success) 26%,var(--ui-border));border-radius:var(--ui-radius-md);background:var(--ui-success-soft)}.finance-credit-hero span,.finance-credit-lifetime-grid span{font-size:.76rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted)}.finance-credit-hero strong{font-size:1.35rem;color:var(--ui-success)}.finance-credit-lifetime-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:.8rem}.finance-credit-lifetime-grid>div{padding:.85rem 1rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface)}.finance-credit-lifetime-grid strong{display:block;margin-top:.2rem;font-size:1.05rem}.finance-credit-lifetime-grid .available strong{color:var(--ui-success)}.finance-ledger-details{margin-top:.85rem;border-top:1px solid var(--ui-border);padding-top:.75rem}.finance-ledger-details summary{cursor:pointer;font-weight:800;color:var(--ui-brand-700)}.finance-ledger-details[open] summary{margin-bottom:.75rem}.finance-history-all-time{margin-top:1rem}.finance-history-all-time .section-heading{align-items:flex-start}.history-count{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 .55rem;border-radius:999px;background:var(--ui-brand-100);color:var(--ui-brand-800);font-weight:850}.finance-history-scroll{max-height:520px;overflow:auto}.finance-history-scroll thead th{position:sticky;top:0;z-index:1}.finance-overview-table-panel .section-heading{margin-bottom:.8rem}
html:not([data-theme="dark"]) .finance-quick-view,html:not([data-theme="dark"]) .finance-credit-balance-panel,html:not([data-theme="dark"]) .finance-history-all-time article{color:var(--ui-text)}html:not([data-theme="dark"]) .finance-quick-view h2,html:not([data-theme="dark"]) .finance-credit-balance-panel h2,html:not([data-theme="dark"]) .finance-history-all-time h2{color:var(--ui-text-strong)}
html[data-theme="dark"] .finance-quick-view{background:linear-gradient(135deg,var(--ui-surface),rgba(59,149,212,.08))}html[data-theme="dark"] .finance-credit-balance-panel{background:linear-gradient(145deg,var(--ui-surface),rgba(31,138,88,.08))}
@media(max-width:1100px){.finance-quick-view{align-items:flex-start;flex-direction:column}.finance-quick-view-actions{justify-content:flex-start}.finance-credit-lifetime-grid{grid-template-columns:1fr}.finance-grouped-table{min-width:1050px}}@media(max-width:640px){.finance-quick-view-actions{display:grid;grid-template-columns:1fr;width:100%}.finance-quick-view-actions .button{width:100%}.finance-quick-actions{grid-template-columns:1fr}.finance-quick-actions .button.primary{grid-column:auto}}


/* Release 21.24.3: operations overview panels, task register visual consistency, and overtime history navigation. */
.operations-overview-panel {
  margin: 0 0 18px;
  padding: 22px 24px 20px;
  border-color: color-mix(in srgb, var(--ui-brand-600) 20%, var(--ui-border));
  background: linear-gradient(145deg, var(--ui-surface), color-mix(in srgb, var(--ui-brand-100) 34%, var(--ui-surface)));
}
.operations-overview-heading { margin-bottom: 16px; }
.operations-overview-stats { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.overview-filter-card {
  appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.team-command-stat.review { box-shadow: inset 3px 0 0 #8b5cf6; }
.team-command-stat.neutral { box-shadow: inset 3px 0 0 #7a8b9a; }
.team-command-stat.is-active {
  border-color: color-mix(in srgb, var(--ui-brand-600) 58%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-brand-100) 72%, var(--ui-surface));
  box-shadow: inset 0 -3px 0 var(--ui-brand-600);
}

/* Completed tasks keep one continuous green row, including sticky cells and quick-edit controls. */
.task-register-table tbody tr.task-row-completed > td,
.task-register-table tbody tr.task-row-completed > td:first-child,
.task-register-table tbody tr.task-row-completed > td:last-child {
  background: color-mix(in srgb, #35b779 16%, var(--ui-surface));
}
.task-register-table tbody tr.task-row-completed:hover > td,
.task-register-table tbody tr.task-row-completed:hover > td:first-child,
.task-register-table tbody tr.task-row-completed:hover > td:last-child {
  background: color-mix(in srgb, #35b779 23%, var(--ui-surface));
}
.task-register-table tbody tr.task-row-completed > td:first-child {
  border-left: 3px solid #35b779;
}
.task-register-table tbody tr.task-row-completed .task-quick-control,
.task-register-table tbody tr.task-row-completed .task-percentage-select,
.task-register-table tbody tr.task-row-completed .task-quick-date-control {
  background: color-mix(in srgb, #35b779 9%, var(--ui-surface));
  border-color: color-mix(in srgb, #35b779 28%, var(--ui-border));
}
.task-register-table tbody tr > td {
  border-bottom-color: color-mix(in srgb, var(--ui-border) 82%, transparent);
}
.task-register-table tbody tr.task-row-attention > td:first-child { border-left: 3px solid #e3a008; }
.task-register-table tbody tr.task-row-delayed > td:first-child { border-left: 3px solid #e85c63; }

.overtime-register-heading { align-items: flex-start; }
.overtime-history-nav { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.overtime-period-banner {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin: .25rem 0 .9rem;
  padding: .65rem .85rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-soft);
}
.overtime-period-banner span,
.overtime-period-banner small { color: var(--ui-muted); }
.overtime-period-banner strong { color: var(--ui-text-strong); }
.ot-filter-bar label.is-disabled { opacity: .55; }
.credit-ledger-details {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--ui-border);
}
.credit-ledger-details summary { cursor: pointer; font-weight: 800; color: var(--ui-brand-700); }
.credit-ledger-details[open] summary { margin-bottom: .75rem; }
.credit-ledger-table-wrap { max-height: 360px; overflow: auto; }
.credit-ledger-table { min-width: 760px; }
.credit-ledger-table .positive { color: var(--ui-success); }
.credit-ledger-table .negative { color: var(--ui-danger); }
html[data-theme="dark"] .task-register-table tbody tr.task-row-completed > td,
html[data-theme="dark"] .task-register-table tbody tr.task-row-completed > td:first-child,
html[data-theme="dark"] .task-register-table tbody tr.task-row-completed > td:last-child {
  background: color-mix(in srgb, #35b779 12%, var(--ui-surface));
}
html[data-theme="dark"] .task-register-table tbody tr.task-row-completed .task-quick-control,
html[data-theme="dark"] .task-register-table tbody tr.task-row-completed .task-percentage-select,
html[data-theme="dark"] .task-register-table tbody tr.task-row-completed .task-quick-date-control {
  background: color-mix(in srgb, #35b779 7%, var(--ui-surface));
}
@media (max-width: 900px) {
  .overtime-history-nav { justify-content: flex-start; width: 100%; }
  .operations-overview-panel { padding: 18px; }
}

/* Release 21.24.3.1 — approved leave visibility in Team Command Center.
   Leave is informational, not an error state: use a calm violet treatment. */
.availability-legend.on-leave i,
.availability-dot.on-leave { background: #7c5ce6; }
.availability-badge.on_leave {
  background: #eee9ff;
  color: #5a3fc0;
}
.availability-badge.on_leave i { background: #7c5ce6; }
.member-availability-card.state-on_leave {
  border-color: rgba(124,92,230,.38);
  background: #faf8ff;
}
.availability-board-horizontal-details .leave-group {
  background: linear-gradient(145deg,rgba(239,234,255,.97),rgba(255,255,255,.94));
  border-color: rgba(124,92,230,.28);
}
.member-ready-state.leave-state {
  background: linear-gradient(135deg,#f1edff,#fbfaff);
  border: 1px solid rgba(124,92,230,.18);
}
.member-ready-state.leave-state strong { color: #5a3fc0; }
.attendance-mini.status-on-leave {
  background: #eee9ff;
  color: #5a3fc0;
  border: 1px solid rgba(124,92,230,.22);
  padding: 4px 7px;
}
html[data-theme="dark"] .availability-board-horizontal-details .leave-group {
  background: linear-gradient(145deg,#2d2742,#1c2932);
  border-color: #6957a8;
}
html[data-theme="dark"] .member-availability-card.state-on_leave {
  background: #27243a;
  border-color: #6957a8;
}
html[data-theme="dark"] .availability-badge.on_leave,
html[data-theme="dark"] .attendance-mini.status-on-leave {
  background: #40345f;
  color: #d9ceff;
  border-color: #6957a8;
}
html[data-theme="dark"] .member-ready-state.leave-state {
  background: #211f31;
  border-color: #51447d;
}
html[data-theme="dark"] .member-ready-state.leave-state strong { color: #d9ceff; }


/* Release 21.24.3.2 — responsibility lane and live-activity separation. */
.member-status-stack {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 4px;
}
.member-status-stack .availability-badge { margin: 0; }
.member-status-stack .activity-overlay {
  padding: 4px 7px;
  font-size: 0.61rem;
}
.member-availability-card.has-overdue .member-current-task.overdue {
  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border));
}
@media (max-width: 760px) {
  .member-status-stack { align-items: flex-start; }
}


/* Release 21.24.3.4 — Live Work dark-mode contrast repair.
   Scope is intentionally limited to Live Work / screen-sharing surfaces. */
html[data-theme="dark"] .screen-share-prototype-card,
html[data-theme="dark"] .screen-share-admin-panel,
html[data-theme="dark"] .screen-share-safety-card,
html[data-theme="dark"] .dashboard-live-control-room {
  color: var(--ui-text);
}
html[data-theme="dark"] .screen-share-prototype-card h2,
html[data-theme="dark"] .screen-share-prototype-card h3,
html[data-theme="dark"] .screen-share-admin-panel h2,
html[data-theme="dark"] .screen-share-admin-panel h3,
html[data-theme="dark"] .screen-share-safety-card h2,
html[data-theme="dark"] .screen-share-safety-card h3,
html[data-theme="dark"] .dashboard-live-control-room h2,
html[data-theme="dark"] .dashboard-live-control-room h3 {
  color: #f8fbff;
}
html[data-theme="dark"] .screen-share-prototype-card p,
html[data-theme="dark"] .screen-share-prototype-card .muted,
html[data-theme="dark"] .screen-share-viewer-count,
html[data-theme="dark"] .screen-share-admin-panel p,
html[data-theme="dark"] .screen-share-safety-card p,
html[data-theme="dark"] .dashboard-control-room-privacy,
html[data-theme="dark"] .dashboard-live-control-room .muted {
  color: #b9cad9;
  opacity: 1;
}
html[data-theme="dark"] .screen-share-prototype-card .eyebrow,
html[data-theme="dark"] .screen-share-admin-panel .eyebrow,
html[data-theme="dark"] .screen-share-safety-card .eyebrow,
html[data-theme="dark"] .dashboard-live-control-room .eyebrow {
  color: #83c7ff;
}
html[data-theme="dark"] .live-work-summary span {
  color: #e8f2fb;
  background: #1b2b3c;
  border-color: #40576c;
}
html[data-theme="dark"] .live-work-summary strong {
  color: #ffffff;
}
html[data-theme="dark"] .live-work-order-card {
  color: #dce8f3;
  background: #172637;
  border-color: #3a5167;
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
html[data-theme="dark"] .live-work-order-card.has-live-screen {
  border-color: #3978a8;
  box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(83,169,235,.12);
}
html[data-theme="dark"] .live-work-order-body {
  color: #dce8f3;
  background: #172637;
}
html[data-theme="dark"] .live-work-order-head strong,
html[data-theme="dark"] .live-work-order-body h3,
html[data-theme="dark"] .live-work-order-meta strong {
  color: #f8fbff;
}
html[data-theme="dark"] .live-work-order-body > p,
html[data-theme="dark"] .live-work-order-actions > small {
  color: #b4c7d8;
  opacity: 1;
}
html[data-theme="dark"] .live-work-order-meta > div {
  color: #dce8f3;
  background: #101d2b;
  border-color: #334b61;
}
html[data-theme="dark"] .live-work-order-meta span {
  color: #9fb8cc;
  opacity: 1;
}
html[data-theme="dark"] .live-work-order-preview {
  border-bottom: 1px solid #334b61;
  background: linear-gradient(145deg,#081321,#173c68);
}
html[data-theme="dark"] .live-preview-placeholder {
  color: #f1f7ff;
}
html[data-theme="dark"] .live-preview-placeholder small {
  color: #c2d4e6;
  opacity: 1;
}
html[data-theme="dark"] .live-thumb-overlay {
  color: #fff;
  background: linear-gradient(to top,rgba(3,10,20,.96),rgba(7,19,34,.62));
  border: 1px solid rgba(174,214,246,.16);
}
html[data-theme="dark"] .live-thumb-note {
  color: #d5e5f4;
  opacity: 1;
}
html[data-theme="dark"] .screen-share-viewer {
  color: #dce8f3;
  background: #101c29;
  border-color: #3a5167;
}
html[data-theme="dark"] .screen-share-viewer-toolbar {
  color: #f4f9fd;
  background: #1b2b3c;
  border-bottom: 1px solid #3a5167;
}
html[data-theme="dark"] .screen-share-viewer-toolbar strong,
html[data-theme="dark"] .screen-share-viewer-toolbar span {
  color: #f4f9fd;
}
html[data-theme="dark"] .screen-share-viewer > .muted {
  color: #afc2d3;
}
html[data-theme="dark"] .screen-share-boundary-grid div,
html[data-theme="dark"] .screen-share-privacy-note,
html[data-theme="dark"] .screen-share-capture-tip {
  color: #dce8f3;
  background: #132231;
  border-color: #3a5167;
}
html[data-theme="dark"] .screen-share-boundary-grid strong,
html[data-theme="dark"] .screen-share-privacy-note strong,
html[data-theme="dark"] .screen-share-capture-tip strong {
  color: #f8fbff;
}
html[data-theme="dark"] .screen-share-boundary-grid span,
html[data-theme="dark"] .screen-share-privacy-note span,
html[data-theme="dark"] .screen-share-capture-tip span {
  color: #b7c9d9;
}
html[data-theme="dark"] .screen-share-event-notice strong {
  color: #f4f9fd;
}
html[data-theme="dark"] .screen-share-event-notice div > span {
  color: #b8cad9;
}
html[data-theme="dark"] .screen-share-event-notice[data-state="live"] {
  background: #112f26;
  border-color: #2f6e56;
}
html[data-theme="dark"] .screen-share-event-notice[data-state="preparing"] {
  background: #132a42;
  border-color: #315d84;
}
html[data-theme="dark"] .screen-share-event-notice[data-state="paused"] {
  background: #332a14;
  border-color: #6e5b28;
}
html[data-theme="dark"] .screen-share-event-notice[data-state="error"] {
  background: #351d23;
  border-color: #73414b;
}
html[data-theme="dark"] .screen-share-local-preview-head {
  color: #eef6fd;
  background: #172637;
  border-color: #3a5167;
}
html[data-theme="dark"] .screen-share-local-preview-card > .muted {
  color: #afc2d3;
}

.role-work-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
@media(max-width:760px){.role-work-header-actions{justify-content:flex-start}}
html[data-theme="dark"] .live-work-order-card .status-chip.status-available {
  color: #8cf0bb;
  background: #143a2a;
  border-color: #2c6d50;
}
html[data-theme="dark"] .live-work-order-card .status-chip.status-neutral {
  color: #d3e0eb;
  background: #253649;
  border-color: #435b70;
}
html[data-theme="dark"] .live-work-order-actions .button.primary,
html[data-theme="dark"] .screen-share-prototype-actions .button.primary {
  color: #ffffff;
}


/* Release 21.24.3.5 — Freelancer/Finance dark-mode contrast + Finance My Work command overview */
.finance-my-work-command {
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-600) 26%, var(--ui-border));
  background: linear-gradient(145deg, var(--ui-surface), color-mix(in srgb, var(--ui-brand-100) 48%, var(--ui-surface)));
}
.finance-my-work-command-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px; }
.finance-my-work-command-head h2 { margin:.2rem 0 .35rem; }
.finance-my-work-command-head p { margin:0; max-width:780px; color:var(--ui-muted); }
.finance-my-work-overview-grid { display:grid; grid-template-columns:repeat(7,minmax(118px,1fr)); gap:10px; }
.finance-overview-tile { display:flex; min-height:118px; flex-direction:column; justify-content:space-between; gap:5px; padding:15px; border:1px solid var(--ui-border); border-radius:15px; background:var(--ui-surface-raised); color:var(--ui-text); text-decoration:none; box-shadow:var(--ui-shadow-xs); }
.finance-overview-tile:hover { transform:translateY(-1px); border-color:var(--ui-brand-500); }
.finance-overview-tile span { color:var(--ui-muted); font-size:.69rem; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.finance-overview-tile strong { color:var(--ui-text-strong); font-size:1.65rem; line-height:1; }
.finance-overview-tile small { color:var(--ui-muted); line-height:1.35; }
.finance-overview-tile.ready { border-color:color-mix(in srgb,var(--ui-success) 34%,var(--ui-border)); background:color-mix(in srgb,var(--ui-success-soft) 72%,var(--ui-surface)); }
.finance-overview-tile.review,.finance-overview-tile.leave { border-color:color-mix(in srgb,var(--ui-warning) 34%,var(--ui-border)); background:color-mix(in srgb,var(--ui-warning-soft) 72%,var(--ui-surface)); }
.finance-overview-tile.absent { border-color:color-mix(in srgb,var(--ui-danger) 34%,var(--ui-border)); background:color-mix(in srgb,var(--ui-danger-soft) 72%,var(--ui-surface)); }
.finance-overview-tile.worked { border-color:color-mix(in srgb,var(--ui-info) 34%,var(--ui-border)); background:color-mix(in srgb,var(--ui-info-soft) 72%,var(--ui-surface)); }
.finance-overview-tile.credit { border-color:color-mix(in srgb,#7c63d4 38%,var(--ui-border)); background:color-mix(in srgb,#4d3c7c 18%,var(--ui-surface)); }
.finance-my-work-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:12px; }
.finance-my-work-shortcuts a { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 13px; border:1px solid var(--ui-border); border-radius:12px; background:var(--ui-surface); color:var(--ui-text); text-decoration:none; }
.finance-my-work-shortcuts span { display:grid; place-items:center; min-width:27px; height:27px; border-radius:8px; background:var(--ui-brand-100); color:var(--ui-brand-700); font-size:.7rem; font-weight:900; }
.finance-my-work-shortcuts strong { color:var(--ui-text-strong); font-size:.82rem; }
.finance-my-work-shortcuts a.primary { border-color:color-mix(in srgb,var(--ui-brand-500) 60%,var(--ui-border)); background:color-mix(in srgb,var(--ui-brand-100) 68%,var(--ui-surface)); }

/* Freelancer dashboard: remove hard-coded light surfaces when dark mode is active. */
html[data-theme="dark"] .attendance-command-card {
  background:#182631;
  border-color:#3b5060;
  color:#dce7ee;
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}
html[data-theme="dark"] .attendance-command-head h2 { color:#f7fbff; }
html[data-theme="dark"] .attendance-command-head p { color:#b5c4ce; }
html[data-theme="dark"] .attendance-state-orb { background:#1d3a51; color:#b8e2ff; border:1px solid #3b6684; }
html[data-theme="dark"] .attendance-time-display article { background:#14212b; border-color:#354957; }
html[data-theme="dark"] .attendance-time-display span,
html[data-theme="dark"] .attendance-time-display small { color:#aebfca; }
html[data-theme="dark"] .attendance-time-display strong { color:#f4f9fc; }
html[data-theme="dark"] .attendance-time-line { background:#385164; }
html[data-theme="dark"] .attendance-time-line i { background:#62b8ea; box-shadow:0 0 0 5px rgba(98,184,234,.12); }
html[data-theme="dark"] .attendance-result-grid article { background:#15232d; border-color:#354957; }
html[data-theme="dark"] .attendance-result-grid span { color:#aebfca; }
html[data-theme="dark"] .attendance-result-grid strong { color:#f2f8fb; }
html[data-theme="dark"] .attendance-result-grid .featured { background:#173246; border-color:#3d7395; }
html[data-theme="dark"] .attendance-complete-banner { background:#193a2c; color:#b9efd0; border:1px solid #356b51; }
html[data-theme="dark"] .member-monthly-summary .section-heading h2,
html[data-theme="dark"] .member-monthly-summary .member-summary-card strong,
html[data-theme="dark"] .member-monthly-summary .member-credit-strip strong { color:#f4f8fb; }
html[data-theme="dark"] .member-monthly-summary .section-heading .muted,
html[data-theme="dark"] .member-monthly-summary .member-summary-card small,
html[data-theme="dark"] .member-monthly-summary .member-credit-strip span { color:#b0c0ca; }
html[data-theme="dark"] .member-credit-strip > div { background:#15232d; border-color:#344a59; }

/* Finance Center: style.css still defines white table cells; explicitly replace them in dark mode. */
html[data-theme="dark"] .finance-page-header { color:var(--ui-text); }
html[data-theme="dark"] .finance-page-header h1,
html[data-theme="dark"] .finance-summary-panel h2,
html[data-theme="dark"] .finance-factor-table td strong,
html[data-theme="dark"] .finance-factor-table .member-cell strong,
html[data-theme="dark"] .bank-details-cell strong { color:#f4f8fb; }
html[data-theme="dark"] .finance-page-header .muted,
html[data-theme="dark"] .finance-summary-panel .muted,
html[data-theme="dark"] .finance-factor-table td,
html[data-theme="dark"] .finance-factor-table td small,
html[data-theme="dark"] .bank-details-cell small { color:#b5c3cd; }
html[data-theme="dark"] .finance-factor-table th { background:#111f2a !important; color:#b9c8d2 !important; border-color:#3a4e5d !important; }
html[data-theme="dark"] .finance-factor-table td,
html[data-theme="dark"] .finance-factor-table .needs-review-row td { background:#182631 !important; border-color:#344958 !important; }
html[data-theme="dark"] .finance-factor-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .finance-factor-table .needs-review-row:nth-child(even) td { background:#1b2a36 !important; }
html[data-theme="dark"] .finance-factor-table tbody tr:hover td,
html[data-theme="dark"] .finance-factor-table .needs-review-row:hover td { background:#213646 !important; }
html[data-theme="dark"] .finance-factor-table .finance-group-cell > span { border-color:#344a59; }
html[data-theme="dark"] .finance-factor-table .credit-value strong { color:#d7c7ff; }
html[data-theme="dark"] .finance-factor-table .credit-balance-value strong { color:#9be4bb; }
html[data-theme="dark"] .finance-factor-table .deduction-value strong { color:#ffbec4; }
html[data-theme="dark"] .finance-factor-table .treatment-cell > small { color:#c0ced7; }
html[data-theme="dark"] .finance-factor-table .button.secondary { background:#20303c; border-color:#405667; color:#eaf2f7; }
html[data-theme="dark"] .finance-factor-table .button.secondary:hover { background:#294052; border-color:#5a7890; }
html[data-theme="dark"] .finance-factor-table .button.primary { color:#fff; }
html[data-theme="dark"] .finance-overview-cards .stat-card { color:var(--ui-text); background:var(--ui-surface-raised); border-color:var(--ui-border); }
html[data-theme="dark"] .finance-overview-cards .stat-card strong { color:#f6fbff; }
html[data-theme="dark"] .finance-overview-cards .stat-card span,
html[data-theme="dark"] .finance-overview-cards .stat-card small { color:#b4c3cd; }
html[data-theme="dark"] .finance-overview-cards .calendar-card { background:#18334a; border-color:#3b6d91; }
html[data-theme="dark"] .finance-overview-cards .credit-card { background:#292442; border-color:#625493; }
html[data-theme="dark"] .finance-overview-cards .warning-card { background:#3b321b; border-color:#76632e; }
html[data-theme="dark"] .finance-overview-cards .good-card { background:#19392c; border-color:#397055; }
html[data-theme="dark"] .finance-filter-panel label { color:#c8d4dc; }

html[data-theme="dark"] .finance-my-work-command { background:linear-gradient(145deg,#182631,#182f43); border-color:#3d5d73; }
html[data-theme="dark"] .finance-my-work-command-head h2 { color:#f8fbfd; }
html[data-theme="dark"] .finance-my-work-command-head p { color:#b6c6d0; }
html[data-theme="dark"] .finance-overview-tile { box-shadow:none; }
html[data-theme="dark"] .finance-overview-tile.members { background:#1b2a36; border-color:#405464; }
html[data-theme="dark"] .finance-overview-tile.ready { background:#19382c; border-color:#3b7256; }
html[data-theme="dark"] .finance-overview-tile.review,
html[data-theme="dark"] .finance-overview-tile.leave { background:#3b321d; border-color:#78662f; }
html[data-theme="dark"] .finance-overview-tile.absent { background:#41262b; border-color:#85505a; }
html[data-theme="dark"] .finance-overview-tile.worked { background:#18354b; border-color:#3f6f91; }
html[data-theme="dark"] .finance-overview-tile.credit { background:#2a2542; border-color:#635593; }
html[data-theme="dark"] .finance-my-work-shortcuts a { background:#172631; border-color:#3b5060; }
html[data-theme="dark"] .finance-my-work-shortcuts a.primary { background:#173b58; border-color:#4a83aa; }
html[data-theme="dark"] .finance-my-work-shortcuts span { color:#b8e1fa; background:#22435b; }

@media(max-width:1300px){.finance-my-work-overview-grid{grid-template-columns:repeat(4,minmax(130px,1fr))}}
@media(max-width:900px){.finance-my-work-command-head{flex-direction:column}.finance-my-work-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-my-work-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.finance-my-work-overview-grid,.finance-my-work-shortcuts{grid-template-columns:1fr}}

/* Release 21.24.3.6 — Finance member summary + freelancer assignment dark-mode contrast. */
/* Finance / DTR member summary: replace legacy light cards with readable dark surfaces. */
html[data-theme="dark"] .dtr-header-panel .dtr-status-row span { color:#aebdc7; }
html[data-theme="dark"] .dtr-header-panel .dtr-status-row strong { color:#f4f8fb; }

html[data-theme="dark"] .freelancer-bank-summary .section-heading h2 { color:#f5f9fc; }
html[data-theme="dark"] .freelancer-bank-summary .section-heading .muted { color:#adbdc8; }
html[data-theme="dark"] .bank-details-summary > div {
  background:#16242e;
  border-color:#3a4f5e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
html[data-theme="dark"] .bank-details-summary span { color:#9fb2be; }
html[data-theme="dark"] .bank-details-summary strong { color:#f2f7fa; }

html[data-theme="dark"] .clear-dtr-card { box-shadow:none; }
html[data-theme="dark"] .clear-dtr-card.calendar { background:#173147; border-color:#3e6d8e; color:#bfe2fb; }
html[data-theme="dark"] .clear-dtr-card.worked { background:#19372b; border-color:#3c7055; color:#bcebcf; }
html[data-theme="dark"] .clear-dtr-card.leave { background:#41272b; border-color:#7f4a54; color:#ffc3c8; }
html[data-theme="dark"] .clear-dtr-card.comp { background:#3c321d; border-color:#77632f; color:#ffe0a0; }
html[data-theme="dark"] .clear-dtr-card strong { color:#f7fafc; }
html[data-theme="dark"] .clear-dtr-card small { color:#b7c6cf; }
html[data-theme="dark"] .clear-dtr-card em { background:rgba(0,0,0,.10); color:inherit; }

html[data-theme="dark"] .summary-section h2,
html[data-theme="dark"] .summary-section h3,
html[data-theme="dark"] .glance-summary h2 { color:#f6f9fb; }
html[data-theme="dark"] .summary-section .muted { color:#adbdc7; }
html[data-theme="dark"] .summary-line { border-bottom-color:#354a59; color:#c8d4dc; }
html[data-theme="dark"] .summary-line strong { color:#f4f8fb; }
html[data-theme="dark"] .summary-line small { color:#a9bac5; }
html[data-theme="dark"] .summary-line.emphasis {
  background:#14232d;
  border:1px solid #344a59;
  color:#dce6ec;
}

html[data-theme="dark"] .conversion-equation {
  background:#14232d;
  border-color:#354a59;
  color:#d7e2e9;
}
html[data-theme="dark"] .conversion-equation span { color:#aabac5; }
html[data-theme="dark"] .conversion-equation strong { color:#f5f8fb; }
html[data-theme="dark"] .conversion-equation > b { color:#91a7b6; }
html[data-theme="dark"] .conversion-result.good { background:#19382c; color:#bcebd0; border:1px solid #3b7155; }
html[data-theme="dark"] .conversion-result.warning { background:#3b321d; color:#ffe1a2; border:1px solid #77642f; }
html[data-theme="dark"] .conversion-result.neutral { background:#18334a; color:#c4e4fb; border:1px solid #3f6f90; }

html[data-theme="dark"] .summary-payroll-multiplier.full {
  background:linear-gradient(145deg,#19382b,#153128);
  border-color:#3e7658;
  color:#c6efd7;
}
html[data-theme="dark"] .summary-payroll-multiplier.reduced {
  background:linear-gradient(145deg,#3d321c,#332a1b);
  border-color:#7c6731;
  color:#ffe1a0;
}
html[data-theme="dark"] .summary-payroll-multiplier span,
html[data-theme="dark"] .summary-payroll-multiplier small { color:inherit; opacity:.9; }
html[data-theme="dark"] .summary-payroll-multiplier strong,
html[data-theme="dark"] .summary-payroll-multiplier .treatment-title { color:#fff8e8; }
html[data-theme="dark"] .summary-payroll-multiplier.full strong,
html[data-theme="dark"] .summary-payroll-multiplier.full .treatment-title { color:#eafff2; }

html[data-theme="dark"] .summary-payroll-metric {
  background:#16242e;
  border-color:#394e5d;
  color:#d6e1e8;
}
html[data-theme="dark"] .summary-payroll-metric span,
html[data-theme="dark"] .summary-payroll-metric small { color:#aabac5; }
html[data-theme="dark"] .summary-payroll-metric strong { color:#f5f9fb; }
html[data-theme="dark"] .summary-payroll-metric.calendar { background:#173147; border-color:#3d6e91; }
html[data-theme="dark"] .summary-payroll-metric.credit { background:#292442; border-color:#655694; }
html[data-theme="dark"] .summary-payroll-metric.credit strong { color:#e0d6ff; }
html[data-theme="dark"] .summary-payroll-metric.deduction { background:#40272b; border-color:#80505a; }
html[data-theme="dark"] .summary-payroll-metric.deduction strong { color:#ffc6cb; }
html[data-theme="dark"] .summary-payroll-formula {
  background:#14232d;
  border:1px solid #344a59;
}
html[data-theme="dark"] .summary-payroll-formula span { color:#aabac5; }
html[data-theme="dark"] .summary-payroll-formula strong { color:#eef5f8; }
html[data-theme="dark"] .summary-payroll-formula b { color:#9be4bb; }
html[data-theme="dark"] .finance-note { background:#18334a; border:1px solid #3e6d8d; color:#c5e5fb; }

html[data-theme="dark"] .glance-equation {
  background:#14232d;
  border:1px solid #344a59;
  color:#dbe5eb;
}
html[data-theme="dark"] .glance-equation strong,
html[data-theme="dark"] .glance-equation b { color:#f3f8fa; }
html[data-theme="dark"] .glance-equation span { color:#8499a7; }
html[data-theme="dark"] .finance-sentence { background:#19382c; border:1px solid #3b7155; color:#c1edd3; }
html[data-theme="dark"] .finance-sentence strong { color:#edfff4; }

/* Freelancer dashboard — My Assigned Tasks. Keep the same task logic and actions,
   but make the card hierarchy intentional and readable in dark mode. */
html[data-theme="dark"] .assignment-section-heading h2 { color:#f6f9fb; }
html[data-theme="dark"] .assignment-section-heading .muted { color:#afbec8; }
html[data-theme="dark"] .compact-assignment-list { gap:10px; }
html[data-theme="dark"] .compact-assignment-list .compact-assignment {
  position:relative;
  overflow:hidden;
  background:linear-gradient(110deg,#172630 0%,#182a36 72%,#173349 100%);
  border:1px solid #3d5363;
  border-left:4px solid #3e9ad1;
  color:#dbe6ec;
  box-shadow:0 8px 18px rgba(0,0,0,.13);
}
html[data-theme="dark"] .compact-assignment-list .compact-assignment:hover {
  background:linear-gradient(110deg,#1a2c38 0%,#1c303d 72%,#1a3a52 100%);
  border-color:#4b687b;
  border-left-color:#64b9ea;
}
html[data-theme="dark"] .compact-assignment-list .compact-assignment > div { min-width:0; }
html[data-theme="dark"] .compact-assignment-list .compact-assignment strong {
  color:#f5f9fc;
  font-weight:850;
}
html[data-theme="dark"] .compact-assignment-list .compact-assignment p {
  color:#d1dde4;
  margin-top:.2rem;
}
html[data-theme="dark"] .compact-assignment-list .compact-assignment small {
  color:#a9bbc7;
  font-weight:650;
}
html[data-theme="dark"] .compact-assignment-list .compact-assignment .button.primary {
  color:#fff;
  border-color:#4a8fbc;
  box-shadow:0 5px 12px rgba(0,0,0,.14);
}