:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0f;
  --surface: #12121a;
  --surface-2: #1a1a25;
  --surface-3: #22222f;
  --text: #e8e8ed;
  --text-2: #a0a0b0;
  --muted: #8a8aa3;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.1);
  --primary: #6366f1;
  --primary-hover: #818cf8;
  /* Solid fills behind white text; --primary itself is too light for 4.5:1. */
  --primary-fill: #5558e8;
  --primary-fill-hover: #4f46e5;
  --primary-soft: rgba(99, 102, 241, 0.12);
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --field-bg: #16161f;
  --sidebar-bg: #0e0e16;
  --topbar-bg: rgba(10, 10, 15, 0.85);
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --sticky-header-bg: rgba(10, 10, 15, 0.92);
  --upload-scrim-bg: rgba(10, 10, 15, 0.75);
  --preview-surface: var(--surface-2);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --elevated-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --login-glow: rgba(99, 102, 241, 0.15);
  --radius: 10px;
  --radius-sm: 8px;
  --radius-pill: 20px;
  --sidebar-width: 240px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-3: #eef1f6;
  --text: #111827;
  --text-2: #4b5563;
  --muted: #646b78;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-fill: #5558e8;
  --primary-fill-hover: #4f46e5;
  --primary-soft: rgba(99, 102, 241, 0.1);
  --success: #059669;
  --danger: #dc2626;
  --warning: #d97706;
  --field-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --overlay-bg: rgba(15, 23, 42, 0.45);
  --sticky-header-bg: rgba(255, 255, 255, 0.94);
  --upload-scrim-bg: rgba(255, 255, 255, 0.88);
  --preview-surface: #eef1f6;
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
  --elevated-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --login-glow: rgba(99, 102, 241, 0.08);
}

* { box-sizing: border-box; }

/* Component display rules (e.g. .secondary-button { display: inline-flex }) must not un-hide permission-gated controls. */
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--text);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

button,
select,
summary,
[role="button"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="color"],
input[type="range"],
input[type="submit"],
input[type="button"],
input[type="reset"],
input::-webkit-calendar-picker-indicator,
input::file-selector-button { cursor: pointer; }

textarea,
input:not([type]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] { cursor: text; }

input[readonly],
textarea[readonly] { cursor: default; }

button:disabled,
select:disabled,
input:disabled,
textarea:disabled,
[aria-disabled="true"],
input:disabled::-webkit-calendar-picker-indicator { cursor: not-allowed; }

:root { --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent); }

input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Search fields drawn as a bordered wrapper around a borderless input carry the ring on the wrapper. */
:is(.leads-search, .projects-search, .to-files-search, .tasks-search, .customer-docs-search, .notifications-search, .notes-search) input:focus {
  border-color: transparent;
  box-shadow: none;
}

:is(.leads-search, .projects-search, .to-files-search, .tasks-search, .customer-docs-search, .notifications-search, .notes-search):focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Login ── */

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--login-glow), transparent),
    var(--bg);
}

.login-panel {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--elevated-shadow);
}

/* Centred status card (404 etc.): brand, code, message and action share one axis. */
.status-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.status-panel .brand-lockup { justify-content: center; margin-bottom: 8px; }
.login-panel.status-panel .status-panel-code {
  margin: 0;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}
.login-panel.status-panel h1 { margin: 0; font-size: 22px; }
.login-panel.status-panel .status-panel-text { margin: 0 0 8px; color: var(--text-2); line-height: 1.5; max-width: 32ch; }

.brand-lockup, .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.brand-lockup--sidebar {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.brand-lockup--login {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  text-align: center;
}

.brand-lockup--compact {
  gap: 8px;
}

.brand-lockup--breadcrumb {
  gap: 8px;
  min-width: 0;
}

.brand-slogan {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0;
  max-width: 188px;
}

.brand-lockup--login .brand-slogan {
  max-width: 300px;
  font-size: 13px;
  color: var(--muted);
}

.brand-lockup--compact .brand-slogan {
  display: none;
}

.brand-lockup--breadcrumb .brand-slogan {
  max-width: min(320px, 42vw);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1100px) {
  .brand-lockup--breadcrumb .brand-slogan {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

.crm-logo {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}

.crm-logo--sidebar {
  width: 156px;
  max-width: 100%;
  border-radius: 14px;
}

.crm-logo--login {
  width: min(260px, 100%);
  border-radius: 18px;
}

.crm-logo--compact {
  width: 120px;
  border-radius: 12px;
}

.crm-logo--breadcrumb {
  width: 40px;
  border-radius: 8px;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.breadcrumbs .brand-lockup {
  gap: 8px;
}

.breadcrumbs .brand-slogan {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.breadcrumb-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  transition: color 0.15s ease;
}

.breadcrumb-brand:hover {
  color: var(--text);
}

.sun-mark,
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  font-size: 11px;
  font-weight: 700;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.brand-word { color: var(--primary-hover); letter-spacing: -0.02em; }

.login-panel h1 {
  margin: 24px 0 8px;
  font-size: 28px;
  line-height: 1.15;
  color: var(--text);
}

.login-panel p { margin: 0 0 24px; color: var(--muted); }

.login-panel form { display: grid; gap: 16px; }

.login-panel label span, .report-toolbar span {
  display: block;
  margin-bottom: 7px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-panel input,
.report-toolbar input,
.report-toolbar select,
.company-select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--field-bg);
  color: var(--text);
  min-height: 40px;
  font-size: 13px;
  transition: border-color 0.15s ease;
}

.login-panel input:focus,
.report-toolbar input:focus,
.report-toolbar select:focus,
.company-select:focus {
  outline: none;
  border-color: var(--primary);
}

.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.password-toggle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.password-toggle-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Only one icon visible: eye when hidden, eye-off when revealed */
.password-toggle-icon[hidden],
.password-toggle[aria-pressed="false"] .password-toggle-hide,
.password-toggle[aria-pressed="true"] .password-toggle-show {
  display: none !important;
}

.password-toggle[aria-pressed="false"] .password-toggle-show,
.password-toggle[aria-pressed="true"] .password-toggle-hide {
  display: block !important;
}

.login-panel form > button,
.primary-button,
.apply-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--primary-fill);
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--primary-fill);
  font-weight: 600;
  min-height: 40px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.login-panel form > button:hover,
.primary-button:hover,
.apply-button:hover {
  background: var(--primary-fill-hover);
  border-color: var(--primary-fill-hover);
}

/* Toolbar buttons share one icon size so mixed primary/secondary rows line up. */
:where(.primary-button, .secondary-button, .apply-button) > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.login-panel form > button { width: 100%; margin-top: 8px; }

.alert-error {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  margin-bottom: 16px;
}

.setup-snippet {
  overflow: auto;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

/* ── App Shell ── */

.login-body { background: var(--bg); min-height: 100vh; margin: 0; }

.app-body { background: var(--bg); min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  z-index: 40;
  background: var(--sidebar-bg);
  color: var(--text-2);
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  transition: width 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body.sidebar-collapsed .sidebar {
  width: 0;
  border-right-color: transparent;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(15, 23, 42, 0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.sidebar-brand {
  justify-content: center;
  height: auto;
  min-height: 64px;
  padding: 12px 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.sidebar .sun-mark { width: 34px; min-width: 34px; }

.sidebar-label {
  opacity: 1;
  white-space: nowrap;
}

.sidebar nav { display: grid; gap: 2px; padding: 10px; }

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-weight: 500;
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
}

.side-link svg,
.topbar svg,
.page-icon svg,
.report-tile svg,
.empty-state svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.side-link:hover,
.side-link.active {
  background: rgba(99, 102, 241, 0.06);
  color: var(--text);
}

.side-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 20px;
  border-radius: 99px;
  background: var(--primary);
}

.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
}
.nav-badge.is-empty,
.nav-badge[hidden],
.with-badge span.is-empty,
.with-badge span[hidden] {
  display: none !important;
}

.app-frame {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left 0.2s ease;
}

body.sidebar-collapsed .app-frame {
  margin-left: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.page-title {
  font-weight: 600;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  letter-spacing: -0.02em;
  text-align: center;
  grid-column: 2;
  color: var(--text);
  font-size: 15px;
}

.page-title-brand .brand-lockup {
  justify-content: center;
  gap: 8px;
}

.page-title-brand .brand-slogan {
  display: none;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  grid-column: 1;
  justify-self: start;
}

.topbar-company-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  max-width: min(260px, 34vw);
  height: 40px;
  text-decoration: none;
  line-height: 0;
}

.topbar-company-logo[hidden] {
  display: none !important;
}

.topbar-company-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  grid-column: 3;
}

.icon-button,
.avatar,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  min-width: 40px;
  min-height: 40px;
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.icon-button:hover,
.secondary-button:hover {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(99, 102, 241, 0.06);
}

.avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
  background: var(--primary-fill);
  border-color: transparent;
  font-weight: 600;
}

.company-select { width: 140px; }

.company-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.company-select-super {
  width: min(220px, 34vw);
  cursor: pointer;
}

@media (max-width: 900px) {
  .company-select-super { width: 170px; }
}

.company-current {
  max-width: min(240px, 34vw);
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.company-current svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}

.company-current-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.with-badge { position: relative; }

.with-badge span {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: white;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}

/* ── Content ── */

.content { padding: 24px; }

.content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.content-header-copy {
  min-width: 0;
}

.content-header-compact {
  margin-bottom: 12px;
}

.content-header-compact h1 {
  display: none;
}

.content-header-compact .breadcrumbs {
  margin-bottom: 0;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}

.breadcrumbs a:not(.breadcrumb-brand) {
  color: var(--primary-hover);
  font-weight: 500;
}

.content h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Outfit, DM Sans, sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.content-header-blurb {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

.page-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  flex: 0 0 auto;
}

/* ── KPI & Dashboard ── */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.kpi-card,
.panel,
.table-panel,
.empty-state,
.report-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevated-shadow);
}

.kpi-card {
  padding: 18px 16px;
  border-left-width: 3px;
  min-height: 96px;
  transition: border-color 140ms ease, transform 140ms ease;
}

.kpi-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.kpi-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kpi-card strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  font-weight: 600;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
  min-height: 1.2em;
}

.kpi-card strong.is-loading {
  opacity: 0.45;
}

.primary-button.danger-button,
.danger-button {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.primary-button.danger-button:hover,
.danger-button:hover {
  background: #991b1b;
  border-color: #991b1b;
}

.modal-panel-sm {
  max-width: 440px;
}

.confirm-dialog .modal-note { margin: 0; color: var(--text-2); line-height: 1.5; }
.confirm-dialog .confirm-dialog-error { margin: 12px 0 0; }
.confirm-dialog .confirm-dialog-error[hidden] { display: none; }
.confirm-dialog [data-confirm-ok]:disabled { opacity: 0.75; }

.border-green { border-left-color: var(--success); }
.border-blue { border-left-color: #3b82f6; }
.border-purple { border-left-color: #a78bfa; }
.border-orange { border-left-color: #f97316; }
.border-yellow { border-left-color: var(--warning); }
.border-teal { border-left-color: #14b8a6; }

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
  align-self: start;
}

.panel { padding: 18px; min-height: 280px; }

.panel h2 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.chart-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 320px;
  min-height: 320px;
  overflow: hidden;
}

.chart-box {
  position: relative;
  min-height: 0;
  height: 260px;
  width: 100%;
  overflow: hidden;
}

.chart-box canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: 260px;
}

.right-rail { display: grid; gap: 16px; align-content: start; }

.activity-feed { display: grid; gap: 12px; }

.activity-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
}

.activity-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: 600;
  font-size: 12px;
}

.activity-avatar.is-muted { background: var(--surface-2); color: var(--muted); }

.activity-body { display: grid; gap: 2px; min-width: 0; }

.activity-actor {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-item p { margin: 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }

.activity-item time { color: var(--muted); font-size: 12px; }

.muted { color: var(--muted); }

.task-list {
  display: grid;
  gap: 12px;
  color: var(--text-2);
  font-size: 14px;
}

.dashboard-task-link {
  display: block;
  color: var(--text-2);
  text-decoration: none;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2, transparent);
}

.dashboard-task-link:hover {
  border-color: var(--primary, #d8bd7f);
  color: var(--text);
}

/* ── Reports ── */

.report-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(260px, 1.35fr) minmax(110px, .75fr) minmax(260px, 1.35fr);
  gap: 12px;
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--elevated-shadow);
}

.report-toolbar select[multiple] { min-height: 72px; padding: 7px 10px; }

.searchable-select { position: relative; }
.searchable-select-input {
  padding-right: 32px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.searchable-select-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevated-shadow);
}
.searchable-select-list[hidden] { display: none; }
.searchable-select-option,
.searchable-select-empty {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}
.searchable-select-option { cursor: pointer; }
.searchable-select-option.is-active { background: var(--primary-soft, rgba(99, 102, 241, 0.16)); }
.searchable-select-option[aria-selected="true"] { font-weight: 600; }
.searchable-select-empty { color: var(--muted); }

.date-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.date-pair input { min-width: 0; }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.pill-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: border-color 0.15s ease;
}

.pill-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.pill-metric strong { font-size: 15px; color: var(--text); }

.pill-metric.cyan { border-color: rgba(34, 211, 238, 0.3); }
.pill-metric.cyan strong { color: #22d3ee; }
.pill-metric.rose { border-color: rgba(244, 114, 182, 0.3); }
.pill-metric.rose strong { color: #f472b6; }
.pill-metric.green { border-color: rgba(16, 185, 129, 0.3); }
.pill-metric.green strong { color: var(--success); }
.pill-metric.amber { border-color: rgba(245, 158, 11, 0.3); }
.pill-metric.amber strong { color: var(--warning); }
.pill-metric.purple { border-color: rgba(167, 139, 250, 0.3); }
.pill-metric.purple strong { color: #a78bfa; }
.pill-metric.danger { border-color: rgba(239, 68, 68, 0.3); }
.pill-metric.danger strong { color: #f87171; }
.pill-metric.warning { border-color: rgba(245, 158, 11, 0.3); }
.pill-metric.warning strong { color: var(--warning); }

/* Utility */
.hidden { display: none !important; }

/* ── Tables ── */

.table-panel { padding: 12px; overflow: auto; }

table.dataTable thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 2;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line) !important;
  font-weight: 500;
}

table.dataTable tbody td {
  border-bottom: 1px solid var(--line) !important;
  color: var(--text-2);
}

/* Shared CRM table typography: 11px uppercase headers, 13px cells and table controls. */
table.dataTable tbody td,
table.dataTable tbody th,
.email-history-table td,
.supplier-table td {
  font-family: inherit;
  font-size: 13px;
}

.email-history-table th,
.supplier-table th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

table.dataTable tbody td .secondary-button,
table.dataTable tbody td .primary-button,
table.dataTable tbody td .projects-view-btn {
  font-size: 13px;
}

.dt-container .dt-info,
.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-paging,
.dt-container .dt-paging .dt-paging-button,
div.dt-container .dt-length select,
.dt-container .dt-search input {
  font-family: inherit;
  font-size: 13px;
}

.dt-container .dt-info { color: var(--muted); }

/* Table controls: entries-per-page + count share the footer row; search sits top-right. */
.dt-container .dt-layout-row:not(.dt-layout-table) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.dt-container .dt-layout-cell.dt-start,
.dt-container .dt-layout-cell.dt-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.dt-container .dt-layout-cell.dt-end { margin-left: auto; }
.dt-container .dt-length,
.dt-container .dt-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.dt-container .dt-length label,
.dt-container .dt-search label { margin: 0; white-space: nowrap; }
div.dt-container .dt-length select,
select.page-size-select,
.dt-container .dt-search input {
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--field-bg);
  color: var(--text);
}
.dt-container .dt-search input { width: 240px; max-width: 100%; }
.dt-container .dt-paging .dt-paging-button {
  min-width: 32px;
  border-radius: var(--radius-sm) !important;
  color: var(--text-2) !important;
}
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) {
  background: var(--surface-2) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--primary-soft) !important;
  border-color: var(--primary) !important;
  color: var(--text) !important;
}
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active { color: var(--muted) !important; opacity: 0.6; }

@media (max-width: 640px) {
  .dt-container .dt-layout-cell.dt-end { margin-left: 0; }
  .dt-container .dt-search input { width: 100%; }
}

.report-table th.col-money,
.report-table td.col-money,
.report-table-salary th:not(:first-child),
.report-table-salary td:not(:first-child),
.report-table-commission th:not(:first-child),
.report-table-commission td:not(:first-child) {
  text-align: right;
}

.report-table-projects th:nth-child(n+7):nth-child(-n+8),
.report-table-projects td:nth-child(n+7):nth-child(-n+8),
.report-table-projects th:last-child,
.report-table-projects td:last-child {
  text-align: right;
}

.report-page-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.report-page-nav > :first-child { margin-right: auto; }

/* Report pages: one vertical rhythm between nav, note, filters, metrics and table. */
.report-filters-bar,
.content > .report-toolbar { margin-bottom: 16px; }

.report-toolbar-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: flex-end;
}

.report-preset-row { display: flex; gap: 6px; }

.report-note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Report tables share the list-table conventions: middle-aligned cells, unbroken money/dates/actions. */
.report-table tbody td { vertical-align: middle; }
.report-table :is(th, td):is(.col-money, .col-date, .col-actions) { white-space: nowrap; }
.report-table :is(th, td).col-actions { text-align: right; }
table.dataTable.report-table :is(th, td).col-date { text-align: left; }

.report-table tbody tr:hover,
table.dataTable tbody tr:hover {
  background: rgba(99, 102, 241, 0.04) !important;
}

.money-cell {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.status-pending { background: var(--surface-3); color: var(--text-2); }
.status-planned { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; }
.status-approved { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; }
.status-in_progress,
.status-install_booked { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }
.status-install_completed { background: rgba(20, 184, 166, 0.12); color: #5eead4; }
.status-activated { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; }
.status-on_hold { background: rgba(245, 158, 11, 0.12); color: #fcd34d; }
.status-cancelled { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }

/* Invoice/Payment statuses used by Customers view */
.status-paid { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; }
.status-unpaid { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.status-partially_paid { background: rgba(245, 158, 11, 0.12); color: #fcd34d; }
.status-draft { background: var(--surface-3); color: var(--text-2); }
.status-sent { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }
.status-overdue { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }

.action-bar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.leads-action-bar {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.leads-page {
  display: grid;
  gap: 16px;
}

.leads-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevated-shadow);
}

.leads-toolbar-main {
  flex: 1 1 420px;
  min-width: 280px;
}

.leads-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field-bg);
  transition: border-color 0.15s ease;
}

.leads-search:focus-within {
  border-color: var(--primary);
}

.leads-search svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}

.leads-search input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  min-height: 44px;
  font-size: 14px;
  color: var(--text);
}

.leads-meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.leads-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 0 !important;
  flex-shrink: 0;
  max-width: 100%;
}

/* Narrow screens: the action row takes the full toolbar width and its buttons wrap instead of overflowing. */
@media (max-width: 760px) {
  .leads-toolbar-main { min-width: 0; }
  .leads-action-buttons { flex: 1 1 100%; justify-content: flex-start; }
  .leads-action-buttons > button { flex: 1 1 auto; }
}

.leads-scope-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

table.dataTable :is(th, td).leads-select-col {
  width: 44px !important;
  padding-inline: 10px !important;
  text-align: center;
  vertical-align: middle;
}
.leads-select-col input[type="checkbox"] {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  accent-color: var(--primary);
}

/* Dates stay on one line and keep digits aligned. */
table.dataTable td.col-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lead-detail-section {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.lead-detail-section > .form-section-title { margin: 0; }
.lead-detail-section :is(.lead-linked-projects, .lead-email-history) > :is(p, .lead-projects-list) { margin: 0; }

.lead-detail-status-form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lead-detail-actions {
  flex-wrap: wrap;
}

.lead-not-projectable {
  color: #b45309;
}

[data-theme="dark"] .lead-not-projectable {
  color: #fcd34d;
}

.status-new { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }
.status-contacted { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; }
.status-qualified { background: rgba(20, 184, 166, 0.12); color: #5eead4; }
.status-proposal_sent { background: rgba(245, 158, 11, 0.12); color: #fcd34d; }
.status-won { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; }
.status-lost { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.status-fake { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.status-discarded { background: rgba(100, 116, 139, 0.18); color: #cbd5e1; }
.status-duplicate { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }

[data-theme="light"] .status-new { color: #1d4ed8; }
[data-theme="light"] .status-contacted { color: #4338ca; }
[data-theme="light"] .status-qualified { color: #0f766e; }
[data-theme="light"] .status-proposal_sent { color: #b45309; }
[data-theme="light"] .status-won { color: #047857; }
[data-theme="light"] .status-lost { color: #475569; }
[data-theme="light"] .status-fake { color: #b91c1c; }
[data-theme="light"] .status-discarded { color: #475569; }
[data-theme="light"] .status-duplicate { color: #b45309; }

.table-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.row-actions-menu {
  position: relative;
  display: inline-block;
}

.row-actions-toggle {
  white-space: nowrap;
}

.row-actions-toggle.icon-button {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
}
.row-actions-toggle svg { width: 16px; height: 16px; }
.row-actions-toggle[aria-expanded="true"] {
  border-color: var(--primary);
  color: var(--text);
}

.row-action-single { white-space: nowrap; }

.row-actions-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 140px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row-actions-dropdown.is-open-fixed {
  position: fixed;
  z-index: 10050;
}

.row-actions-dropdown[hidden] {
  display: none;
}

.row-menu-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  cursor: pointer;
}

a.row-menu-item { display: block; text-decoration: none; }
.row-menu-item:hover,
.row-menu-item:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.row-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.row-menu-item.is-danger { color: var(--danger, #dc2626); }
.row-actions-none { color: var(--muted); font-size: 13px; }
.note-detail-content { margin: 16px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.dt-container.dt-is-empty .dt-paging,
.dt-container.dt-is-empty .dt-info,
.dt-container.dt-is-empty .dt-length { display: none; }

.modal-panel--wide {
  width: min(920px, calc(100vw - 32px));
}

.import-errors-wrap {
  max-height: 280px;
  overflow: auto;
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.import-errors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.import-errors-table th,
.import-errors-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.import-errors-table th {
  position: sticky;
  top: 0;
  background: var(--surface-2, var(--surface));
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.import-errors-table td:first-child { font-variant-numeric: tabular-nums; width: 56px; }
.import-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.import-result {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.15);
  color: var(--muted);
}
.import-result-imported { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.import-result-failed { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.import-result-duplicate { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.import-leads-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lead-projects-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lead-projects-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 13px;
}

.lead-projects-list a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.lead-projects-list a:hover {
  text-decoration: underline;
}

.lead-assign-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.lead-assign-badge.is-assigned {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.lead-assign-badge.is-unassigned {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.lead-detail-assign {
  margin-bottom: 14px;
}

[data-theme="dark"] .lead-assign-badge.is-assigned {
  color: #6ee7b7;
}

[data-theme="dark"] .lead-assign-badge.is-unassigned {
  color: #fcd34d;
}

.reports-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reports-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 0;
  padding: 18px;
}

.reports-intro-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  color: var(--primary-hover);
  flex: 0 0 auto;
}

.reports-intro-icon svg { width: 18px; height: 18px; }

.reports-intro h2 {
  margin: 0 0 4px;
  font-family: Outfit, DM Sans, sans-serif;
  font-size: 1.15rem;
}

.reports-intro p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 62ch;
}

.report-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.report-tile {
  min-height: 168px;
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  align-content: start;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.report-tile:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.report-tile-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  color: var(--primary-hover);
}

.report-tile-icon svg,
.report-tile > svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

.report-tile strong {
  font-family: Outfit, DM Sans, sans-serif;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.report-tile span { color: var(--muted); line-height: 1.45; }

.empty-state {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  color: var(--muted);
}

.empty-state h2 { margin: 0; color: var(--text); }

/* ── Modals ── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--overlay-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-panel {
  width: min(820px, 100%);
  max-height: min(860px, 92vh);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--elevated-shadow);
}

.modal-panel.modal-panel-wide {
  width: min(960px, 100%);
}

.email-composer-template-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.email-composer-template-row select { flex: 1; }
.email-unavailable-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--warning);
  border-left-width: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--text);
  font-size: 13px;
}
.email-composer { display: grid; gap: 16px; }
.email-composer-message,
.email-composer-attach { display: grid; gap: 8px; }
.email-composer-caption {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.email-attachments:empty { display: none; }
.email-composer > .field-help.email-composer-help { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.email-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.email-editor-toolbar button {
  border: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text);
}
.email-editor-body {
  min-height: 160px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg);
}
.email-attachment-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.email-attachment-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.email-attach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.email-file-label { cursor: pointer; display: inline-flex; align-items: center; }
.email-doc-picker { display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.email-history-table { width: 100%; }
.email-view-body {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.status-badge.status-draft { background: rgba(100,116,139,.15); color: #cbd5e1; }
.status-badge.status-sending { background: rgba(59,130,246,.15); color: #93c5fd; }
.status-badge.status-sent { background: rgba(16,185,129,.15); color: #6ee7b7; }
.status-badge.status-failed { background: rgba(239,68,68,.15); color: #fca5a5; }
[data-theme="light"] .status-badge.status-draft { color: #475569; }
[data-theme="light"] .status-badge.status-sending { color: #1d4ed8; }
[data-theme="light"] .status-badge.status-sent { color: #047857; }
[data-theme="light"] .status-badge.status-failed { color: #b91c1c; }
.project-email-history { margin-top: 16px; }

.modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 0;
  font-size: 17px;
  color: var(--text);
}

.modal-body { padding: 18px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

/* ── Forms ── */

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

/* align-content: start keeps inputs in one row level when a neighbour grows (e.g. a validation message). */
.form-grid label,
.modal-body label { display: grid; gap: 8px; align-content: start; }

.form-grid label span,
.modal-body label span,
.detail-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Standard editable control. Optional fields use this too — only [disabled] fields look muted. */
.form-grid input,
.form-grid select,
.form-grid textarea,
.modal-body select,
:where(.modal-body, .installer-cert-grid) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"], [type="submit"], [type="button"]), textarea, select) {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  background: var(--field-bg);
  color: var(--text);
  min-height: 40px;
  transition: border-color 0.15s ease;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.modal-body select:focus,
:where(.modal-body, .installer-cert-grid) :where(input, textarea, select):focus {
  outline: none;
  border-color: var(--primary);
}

:where(.form-grid, .modal-body, .installer-cert-grid) :where(input, textarea, select)::placeholder { color: var(--muted); opacity: 1; }

:is(.form-grid, .modal-body, .installer-cert-grid) :is(input, textarea, select)[disabled] {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

.form-grid textarea,
:where(.modal-body) textarea { min-height: 82px; resize: vertical; }

.settings-rule-period {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.15);
  color: var(--muted);
}
.settings-rule-period-active { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.settings-rule-period-scheduled { background: rgba(99, 102, 241, 0.15); color: #818cf8; }

.email-template-form { row-gap: 18px; }
.email-template-form textarea[name="body_html"] {
  min-height: 200px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.email-placeholder-help {
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.email-placeholder-head h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text); }
.email-placeholder-head p { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.email-placeholder-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px 20px;
}
.email-placeholder-group h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.email-placeholder-group dl { display: grid; gap: 10px; margin: 0; }
.email-placeholder-row dt { margin: 0; }
.email-placeholder-row dd { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.email-placeholder-row code,
#emailBodyHelp code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.installer-state-license-remove[hidden],
.req-mark[hidden] { display: none !important; }

.req-mark {
  color: #f87171;
  font-style: normal;
  font-weight: 700;
}

.field-optional {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.modal-body .field-help,
.form-grid label .field-help,
.modal-body label .field-help {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.field-error {
  display: block;
  margin-top: 4px;
  color: #f87171;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
[data-theme="light"] .field-error { color: #b91c1c; }
:is(.form-grid, .modal-body) label > .field-error { margin-top: -2px; }
.modal-body label .field-help.quote-email-hint { margin: 0 0 4px; }

.form-grid .wide { grid-column: 1 / -1; }

.form-grid .modal-note.wide {
  margin: -4px 0 0;
  font-size: 13px;
}

/* Section rhythm: generous space above a new section, a clear gap between heading and divider,
   and the grid gap (12px) below the divider before the first field. */
.form-section-title {
  grid-column: 1 / -1;
  margin: 16px 0 4px;
  padding-bottom: 8px;
  line-height: 1.3;
  border-bottom: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
}

.form-section-title:first-of-type { margin-top: 0; }

.address-autocomplete { position: relative; }
.address-autocomplete input { width: 100%; }

.address-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: var(--elevated-shadow);
}

.address-suggestion {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  color: var(--text-2);
  transition: background 0.15s ease;
}

.address-suggestion:last-child { border-bottom: 0; }

.address-suggestion:hover,
.address-suggestion.is-active {
  background: rgba(99, 102, 241, 0.08);
  color: var(--text);
}

.address-suggestion-main {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: inherit;
}

/* ── Projects ── */

.projects-page { display: grid; gap: 14px; }

.customers-page { display: grid; gap: 16px; }

.customers-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevated-shadow);
}

.customers-toolbar-main { flex: 1 1 420px; min-width: 280px; }
.customers-toolbar-actions { margin-bottom: 0 !important; flex-shrink: 0; }

.customers-filters-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.customers-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.customers-filter-select {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  min-height: 38px;
  min-width: 130px;
}

.customers-clear-filters {
  margin-bottom: 0;
  align-self: flex-end;
}

.customers-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.customers-stat-card {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--elevated-shadow);
}

.customers-stat-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.customers-stat-card strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.1;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.customers-stat-card.accent-green { border-left: 3px solid #10b981; }
.customers-stat-card.accent-green strong { color: #6ee7b7; }
.customers-stat-card.accent-orange { border-left: 3px solid #f59e0b; }
.customers-stat-card.accent-orange strong { color: #fcd34d; }
.customers-stat-card.accent-red { border-left: 3px solid #ef4444; }
.customers-stat-card.accent-red strong { color: #fca5a5; }
.customers-stat-card.accent-blue { border-left: 3px solid #6366f1; }
.customers-stat-card.accent-blue strong { color: #a5b4fc; }
.customers-stat-card.accent-teal { border-left: 3px solid #14b8a6; }
.customers-stat-card.accent-teal strong { color: #5eead4; }

.customers-table-panel { padding: 0; overflow: hidden; }
.customers-table-panel .dt-layout-row { padding: 10px 14px; }
.customers-table-panel table.dataTable { margin: 0 !important; }

.customers-table thead th {
  padding: 12px 14px !important;
  font-size: 11px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
}

.customers-table tbody td {
  padding: 14px !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--line) !important;
  font-size: 13px;
  color: var(--text-2);
}

.customers-table tbody tr { cursor: pointer; transition: background 0.15s ease; }
.customers-table tbody tr:hover { background: rgba(99, 102, 241, 0.04) !important; }

.customer-name-cell { display: grid; gap: 2px; }
.customer-name-primary { font-weight: 600; color: var(--text); font-size: 13px; }
.customer-name-projects { font-size: 11px; color: var(--muted); }

.customer-contact-cell { display: grid; gap: 3px; font-size: 12px; }
.customer-contact-cell .customer-email { color: var(--text-2); }
.customer-contact-cell .customer-phone { color: var(--muted); }

.customer-location-cell {
  display: grid; gap: 2px; font-size: 12px; min-width: 0;
}
.customer-location-cell .customer-street {
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-location-cell .customer-suburb { color: var(--text-2); font-weight: 500; }
.customer-location-cell .customer-state { color: var(--muted); font-size: 11px; }

.customer-outstanding { color: #fca5a5; }
[data-theme="light"] .customer-outstanding { color: #b91c1c; }

.customer-detail-financial-gap { margin-top: 10px; }

.customer-projects-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.customer-projects-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.customer-projects-list a {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.customer-projects-list a:hover { text-decoration: underline; }

.customer-detail-section { margin-bottom: 18px; }
.customer-detail-section:last-child { margin-bottom: 0; }
.customer-detail-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.customer-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.customer-detail-field {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-width: 0;
}

.customer-detail-field span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.customer-detail-field strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  color: var(--text);
}

.customer-detail-field.wide {
  grid-column: 1 / -1;
}

.customer-detail-financial {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.customer-detail-money {
  text-align: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.customer-detail-money span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.customer-detail-money strong {
  display: block;
  font-size: 20px;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.customer-detail-money.is-green strong { color: #6ee7b7; }
.customer-detail-money.is-red strong { color: #fca5a5; }
.customer-detail-money.is-blue strong { color: #a5b4fc; }

@media (max-width: 1100px) {
  .customers-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-detail-financial { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 768px) {
  .customers-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customers-toolbar { padding: 12px; }
  .customers-toolbar-actions { width: 100%; justify-content: stretch; }
  .customers-filters-bar { padding: 10px 12px; }
  .customer-detail-grid { grid-template-columns: 1fr; }
  .customer-detail-financial { grid-template-columns: 1fr; }
}

/* ── Installers ── */

.installers-page {
  display: grid;
  gap: 18px;
}

#installersListView {
  display: grid;
  gap: 18px;
}

.installers-toolbar,
.installers-form-header,
.installer-section,
.installer-form-actions {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevated-shadow);
}

.installers-toolbar {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
}

.installers-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: 720px;
}

.installers-toolbar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.installers-toolbar-main {
  flex: 1 1 420px;
  min-width: 280px;
  display: grid;
  gap: 8px;
}

.installers-filters-bar { margin-top: 0; }
.installers-filters-bar label { flex: 1 1 150px; min-width: 0; }
.installers-filters-bar .customers-filter-select { width: 100%; min-width: 0; }
.installers-filters-bar .customers-clear-filters { flex: 0 0 auto; }

/* Desktop: all five filters and Clear share one row; narrower screens wrap. */
@media (min-width: 1101px) {
  .installers-filters-bar { flex-wrap: nowrap; }
  .installers-filters-bar label { flex: 1 1 0; }
}
.installers-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.installer-licence-chip,
.installer-docs-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line);
}
.installer-licence-chip.is-expired,
.installer-docs-chip.is-incomplete {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}
.installer-licence-chip.is-valid,
.installer-docs-chip.is-complete {
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}
[data-theme="light"] .installer-licence-chip.is-expired,
[data-theme="light"] .installer-docs-chip.is-incomplete { color: #b91c1c; }
[data-theme="light"] .installer-licence-chip.is-valid,
[data-theme="light"] .installer-docs-chip.is-complete,
[data-theme="light"] .installer-status-toggle.is-active .installer-status-toggle-label { color: #047857; }
[data-theme="light"] .installer-status-toggle.is-inactive .installer-status-toggle-label { color: #b45309; }

.installers-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin: 0;
}

.installers-table-panel {
  padding: 0;
  overflow: hidden;
  min-width: 0;
}

.installers-table-panel .dt-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin: 0;
}

.installers-table-panel .dt-layout-row.dt-layout-table {
  display: block;
  padding: 0;
  overflow-x: auto;
}

.installers-table {
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: 100% !important;
  min-width: 1100px;
}

.installers-table thead th {
  padding: 12px 16px !important;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  vertical-align: middle;
}

.installers-table thead th + th,
.installers-table tbody td + td {
  border-left: 1px solid transparent;
  padding-left: 16px !important;
}

.installers-table tbody td {
  padding: 14px 16px !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--line) !important;
  font-size: 13px;
  color: var(--text-2);
}

.installers-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.04) !important;
}

.installers-table td.col-email { overflow-wrap: anywhere; }
.installers-table td.col-nowrap { white-space: nowrap; }

.installers-table .col-actions {
  white-space: nowrap;
  text-align: right;
  padding-right: 18px !important;
}

.installers-table .col-actions .secondary-button + .secondary-button {
  margin-left: 10px;
}

.installers-table .installer-roles-cell {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.installer-name-cell {
  display: grid;
  gap: 4px;
}

.installer-company-name {
  font-weight: 600;
  color: var(--text);
}

.installers-form-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
}

.installers-form-title-wrap {
  flex: 1;
  min-width: 0;
}

.installers-form-title-wrap h2 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.2;
}

.installers-form-title-wrap p {
  margin: 0;
}

.installers-form-status {
  margin-left: auto;
  flex-shrink: 0;
}

.installer-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.installer-status-toggle:disabled,
.installer-status-toggle.is-locked {
  opacity: 0.72;
  cursor: not-allowed;
}

.installer-status-toggle.is-locked .installer-status-toggle-track {
  opacity: 0.85;
}

.installer-status-toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  transition: background 0.2s ease;
}

.installer-status-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.installer-status-toggle.is-active .installer-status-toggle-track {
  background: rgba(16, 185, 129, 0.85);
}

.installer-status-toggle.is-active .installer-status-toggle-thumb {
  transform: translateX(18px);
}

.installer-status-toggle-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 54px;
  text-align: left;
}

.installer-status-toggle.is-active .installer-status-toggle-label {
  color: #6ee7b7;
}

.installer-status-toggle.is-inactive .installer-status-toggle-label {
  color: #fcd34d;
}

.installer-form {
  display: grid;
  gap: 16px;
}

.installer-form.is-view-only input:not([type="hidden"]),
.installer-form.is-view-only select,
.installer-form.is-view-only textarea {
  opacity: 0.92;
  cursor: default;
}

.installer-form.is-view-only .installer-state-license-actions {
  display: none;
}

.installer-form.is-view-only #installerStateLicenseTable thead th:last-child {
  display: none;
}

.installer-form.is-view-only .installer-form-actions {
  display: none;
}

.installer-section {
  padding: 20px;
  display: grid;
  gap: 18px;
}

.installer-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.installer-section-head h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.3;
}

.installer-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: 720px;
}

.installer-subsection + .installer-subsection {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.installer-subsection h4 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.installer-form .form-grid {
  gap: 14px;
}

.installer-same-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.installer-radio-group {
  display: grid;
  gap: 8px;
  align-content: start;
}

.installer-field-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.installer-radio-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 40px;
}

.installer-inline-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.installer-role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.installer-check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.installer-check-card input {
  margin: 0;
  flex-shrink: 0;
}

.installer-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.installer-cert-grid label,
.installer-form .form-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.installer-cert-grid label span,
.installer-form .form-grid label span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.installer-form .form-grid input,
.installer-form .form-grid select,
.installer-form .form-grid textarea,
.installer-cert-grid input,
.installer-cert-grid select {
  background: var(--field-bg);
}

.installer-doc-required {
  margin-bottom: 14px;
}

.installer-required-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.installer-required-item {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.installer-required-item span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.4;
}

.installer-required-item strong {
  font-size: 12px;
}

.installer-required-item.is-done {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}

.installer-required-item.is-done strong { color: #6ee7b7; }
.installer-required-item.is-missing strong { color: #fcd34d; }

.installer-doc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.installer-doc-table {
  width: 100%;
  border-collapse: collapse;
}

.installer-doc-table th,
.installer-doc-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}

.installer-doc-table tr:last-child td {
  border-bottom: 0;
}

.installer-doc-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface);
}

.installer-license-note {
  margin: 0 0 12px;
}

.installer-license-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.installer-license-table {
  width: 100%;
  border-collapse: collapse;
}

.installer-license-table th,
.installer-license-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}

.installer-license-table tr:last-child td {
  border-bottom: 0;
}

.installer-license-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface);
}

.installer-state-license-state,
.installer-state-license-number,
.installer-state-license-expiry {
  width: 100%;
  min-width: 140px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  background: var(--field-bg);
  color: var(--text);
  font-size: 13px;
  min-height: 40px;
}

.installer-license-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.installer-license-status.is-valid {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.12);
}

.installer-license-status.is-expired {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
}

.installer-doc-type,
.installer-doc-file {
  width: 100%;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  background: var(--field-bg);
  color: var(--text);
  font-size: 13px;
  min-height: 40px;
}

.installer-doc-type:focus {
  outline: none;
  border-color: var(--primary);
}

.installer-doc-status-ok {
  color: #6ee7b7;
  font-weight: 600;
}

.installer-doc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.installer-uploaded-docs h4 {
  margin: 18px 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.installer-uploaded-list {
  display: grid;
  gap: 10px;
}

.installer-uploaded-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.installer-uploaded-item strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.installer-uploaded-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.installer-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  position: sticky;
  bottom: 16px;
  z-index: 2;
}

[data-installer-personal].is-readonly-copy {
  opacity: 0.9;
  background: var(--surface);
}

@media (max-width: 1100px) {
  .installer-role-grid,
  .installer-required-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .installers-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .installers-toolbar-main {
    flex: 0 0 auto;
    min-width: 0;
  }

  .installers-toolbar-actions > button {
    flex: 1 1 0;
    justify-content: center;
  }

  .installers-toolbar-row,
  .installers-form-header,
  .installer-section-head,
  .installer-uploaded-item {
    flex-direction: column;
    align-items: stretch;
  }

  .installers-toolbar-actions,
  .installer-uploaded-actions,
  .installer-doc-actions,
  .installer-form-actions {
    width: 100%;
    justify-content: stretch;
  }

  .installers-toolbar-actions .primary-button,
  .installer-form-actions .primary-button,
  .installer-form-actions .secondary-button {
    width: 100%;
    justify-content: center;
  }

  .installer-cert-grid,
  .installer-role-grid,
  .installer-required-grid,
  .installer-form .form-grid {
    grid-template-columns: 1fr;
  }

  .installer-same-checkbox {
    width: 100%;
    justify-content: center;
  }
}

.projects-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevated-shadow);
}

.projects-toolbar-main { flex: 1 1 420px; min-width: 280px; }
.projects-toolbar-actions { margin-bottom: 0 !important; flex-shrink: 0; }

.projects-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field-bg);
  transition: border-color 0.15s ease;
}

.projects-search:focus-within {
  border-color: var(--primary);
  background: var(--field-bg);
}

.projects-search svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }

.projects-search input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  min-height: 44px;
  font-size: 14px;
  color: var(--text);
}

.projects-meta { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

.list-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 4px 4px;
}

.list-pagination-meta {
  color: var(--muted);
  font-size: 13px;
}
.list-pagination[hidden] { display: none; }
.list-pagination-length {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--muted);
  font-size: 13px;
}
.list-pagination-length select { width: auto; min-width: 72px; }
select.page-size-select { width: auto; min-width: 72px; font-family: inherit; font-size: 13px; }

.projects-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.projects-stat-card {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--elevated-shadow);
}

.projects-stat-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.projects-stat-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.1;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.projects-stat-card.accent {
  background: var(--surface);
  border-color: rgba(99, 102, 241, 0.25);
  border-left: 3px solid var(--primary);
}

.projects-stat-card.accent strong { color: var(--primary-hover); }

.projects-table-panel { padding: 0; overflow-x: auto; overflow-y: hidden; }
.projects-table-panel .dt-layout-row { padding: 10px 14px; }
.projects-table-panel table.dataTable { margin: 0 !important; }

.projects-table thead th {
  padding: 12px 14px !important;
  font-size: 11px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
}

.projects-table tbody td {
  padding: 14px !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--line) !important;
  font-size: 13px;
  color: var(--text-2);
}

.projects-table tbody tr { transition: background 0.15s ease; }

.projects-table tbody tr:hover { background: rgba(99, 102, 241, 0.04) !important; }

.project-number-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
a.project-number-chip { text-decoration: none; }
a.project-number-chip:hover { text-decoration: underline; }
a.project-number-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.project-customer-name { font-weight: 600; color: var(--text); }

.project-address {
  display: block;
  max-width: 320px;
  color: var(--muted);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-address.muted { color: var(--muted); font-style: italic; opacity: 0.7; }

.project-system { color: var(--text-2); font-weight: 500; white-space: nowrap; }

.project-value {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
}

.projects-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--primary-fill);
  color: #fff !important;
  font-weight: 600;
  font-size: 12px;
  transition: background 0.15s ease;
}

.projects-view-btn:hover { background: var(--primary-fill-hover); }

.projects-table .col-money,
.projects-table .col-actions { text-align: right !important; white-space: nowrap; }

.projects-table-panel .dt-search { display: none !important; }

@media (max-width: 1100px) {
  .projects-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .projects-toolbar { padding: 12px; }
  .projects-toolbar-actions { width: 100%; justify-content: stretch; }
  .projects-toolbar-actions .primary-button,
  .projects-toolbar-actions .secondary-button { flex: 1; }
  .projects-stats { grid-template-columns: 1fr 1fr; }
  .project-address { max-width: 200px; }
}

/* ── Integrations ── */

.integrations-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.integrations-intro.panel {
  min-height: auto;
}

.integrations-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-height: auto;
}

.integrations-intro-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
  flex: 1 1 320px;
}

.integrations-workspace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.integrations-workspace svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

.integrations-workspace-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}

.integrations-workspace strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.integrations-intro h2 { margin: 0; font-size: 18px; color: var(--text); }

.integrations-intro p {
  margin: 0;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.5;
  font-size: 14px;
}

.integrations-filter-bar {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.integration-filter {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.integration-filter.active {
  background: var(--surface-3);
  color: var(--primary-hover);
}

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.integrations-grid.is-filtered {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integration-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevated-shadow);
  align-content: start;
  transition: border-color 0.15s ease;
}

.integration-card:hover { border-color: var(--line-strong); }

.integration-card.is-connected {
  border-color: rgba(99, 102, 241, 0.25);
  background: var(--surface);
}

.integration-card-loading {
  min-height: 220px;
  place-items: center;
  color: var(--muted);
}

.integration-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.integration-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 8px;
  flex-shrink: 0;
  overflow: hidden;
}

.integration-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.integration-card-title { flex: 1; min-width: 0; }

.integration-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.integration-card h3 { margin: 0; font-size: 16px; color: var(--text); }

.integration-category {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.integration-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}

.integration-status svg { width: 14px; height: 14px; }
.integration-status-connected { color: var(--success); }
.integration-status-disconnected { color: var(--muted); }
.integration-status-error { color: #fca5a5; }

.integration-description {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.integration-features {
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 13px;
  display: grid;
  gap: 6px;
}

.integration-meta,
.integration-env-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.integration-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  font-size: 12px;
}

.integration-webhook {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, var(--line));
}

.integration-webhook-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.integration-webhook-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.integration-webhook-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.integration-webhook-field > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.integration-webhook-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.integration-webhook-row input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.integration-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

.integration-disconnect {
  border: 0;
  background: transparent;
  color: #fca5a5;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 10px;
  transition: color 0.15s ease;
}

.integration-disconnect:hover { color: var(--danger); }

.integration-checkbox {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-direction: row !important;
}

.integration-checkbox input { width: auto; min-height: auto; accent-color: var(--primary); }

.integration-checkbox span {
  margin: 0 !important;
  text-transform: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
}

/* ── Settings ── */

.settings-page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.settings-nav {
  padding: 18px;
  position: sticky;
  top: 88px;
}

.settings-nav h2 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--text);
}

.settings-nav-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.settings-nav-links { display: grid; gap: 4px; }

.settings-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-weight: 500;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-nav-link svg { width: 16px; height: 16px; color: var(--muted); }

.settings-nav-link:hover,
.settings-nav-link.active {
  background: rgba(99, 102, 241, 0.06);
  color: var(--primary-hover);
}

.settings-nav-link.active svg { color: var(--primary-hover); }

.settings-main { min-width: 0; }

.settings-panel-shell {
  padding: 20px;
  min-height: 520px;
}

.settings-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.settings-panel-head h2 { margin: 0 0 6px; font-size: 20px; color: var(--text); }

.settings-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.settings-save-indicator {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.settings-save-indicator.is-saving { color: var(--primary-hover); }
.settings-save-indicator.is-saved { color: var(--success); }
.settings-save-indicator.is-error { color: #fca5a5; }

.settings-form { display: grid; gap: 14px; }

.settings-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.settings-hint,
.settings-readonly-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.settings-logo-field {
  display: grid;
  gap: 8px;
}

.settings-logo-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.settings-logo-upload {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.settings-logo-preview {
  display: grid;
  place-items: center;
  width: 96px;
  height: 72px;
  flex: 0 0 96px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.settings-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.settings-logo-placeholder {
  padding: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.settings-logo-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1 1 180px;
}

.settings-logo-actions .settings-hint { margin: 0; }

.settings-logo-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  cursor: pointer;
}

.settings-brand-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.settings-brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.settings-brand-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-brand-head .settings-subheading { margin: 0 0 4px; }

.settings-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.settings-brand-color {
  display: grid;
  gap: 6px;
}

.settings-brand-color-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.settings-brand-color-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-brand-swatch {
  width: 42px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.settings-brand-hex {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.settings-brand-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  color: var(--bi, #0f172a);
}

.settings-brand-preview-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--bs, #0f172a), var(--bp, #1e3a5f));
}

.settings-brand-preview-body { padding: 14px 16px 12px; }

.settings-brand-preview-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp, #1e3a5f);
}

.settings-brand-preview-title {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--bi, #0f172a);
}

.settings-brand-preview-hero {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 4px;
  background: var(--bs, #0f172a);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.settings-brand-preview-hero span {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

.settings-brand-preview-hero strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.settings-brand-preview-table {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  padding: 10px 12px;
  background: var(--bt, #f1f5f9);
  border: 1px solid color-mix(in srgb, var(--bp, #1e3a5f) 18%, transparent);
  border-radius: 4px;
  font-size: 12px;
}

.settings-brand-preview-table .is-credit { color: var(--bp, #1e3a5f); font-weight: 700; }

.settings-brand-preview-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 2px solid var(--ba, #b45309);
  font-size: 11px;
  color: var(--muted);
}

#quoteBrandValidation:not([hidden]) {
  color: #fca5a5;
}

.account-mgmt {
  display: grid;
  gap: 18px;
}

.account-mgmt-picker {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.9fr);
  gap: 16px 20px;
  align-items: end;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 55%),
    var(--surface-2);
}

.account-mgmt-picker-copy h3 {
  margin: 4px 0 6px;
  font-size: 16px;
  color: var(--text);
}

.account-mgmt-picker-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.account-mgmt-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-hover);
}

.account-mgmt-company {
  display: grid;
  gap: 6px;
  margin: 0;
}

.account-mgmt-company span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.account-mgmt-company select { width: 100%; }

.account-mgmt-status { margin: 0; }
.account-mgmt-status.is-error { color: #fca5a5; }

.account-mgmt-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 40px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.account-mgmt-detail-placeholder {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 48px 24px;
  min-height: 280px;
  align-content: center;
}

.account-mgmt-empty h3,
.account-mgmt-detail-placeholder h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}

.account-mgmt-empty p,
.account-mgmt-detail-placeholder p {
  margin: 0;
  max-width: 360px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.account-mgmt-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.account-mgmt-empty-icon svg { width: 22px; height: 22px; }

.account-mgmt-workspace { display: grid; gap: 14px; }

.account-mgmt-company-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.account-mgmt-company-banner-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.account-mgmt-company-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.account-mgmt-company-title-row h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}

.account-mgmt-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-size: 11px;
  font-weight: 600;
}

.account-mgmt-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.account-mgmt-stat {
  min-width: 72px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: center;
}

.account-mgmt-stat strong {
  display: block;
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}

.account-mgmt-stat span {
  font-size: 11px;
  color: var(--muted);
}

.account-mgmt-layout {
  display: grid;
  gap: 14px;
  align-items: start;
}

.account-mgmt-layout.has-detail {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
}

.account-mgmt-list-pane,
.account-mgmt-detail-pane {
  min-width: 0;
}

.account-mgmt-detail-pane {
  position: sticky;
  top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.account-mgmt-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.account-mgmt-filters label {
  margin: 0;
  display: grid;
}

.account-mgmt-search {
  position: relative;
}

.account-mgmt-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.account-mgmt-search input {
  width: 100%;
  padding-left: 36px;
}

.account-mgmt-table-panel { min-height: 220px; }

.account-mgmt-table tbody tr.account-mgmt-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.account-mgmt-table tbody tr.account-mgmt-row:hover td {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.account-mgmt-table tbody tr.account-mgmt-row.is-selected td {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.account-mgmt-table tbody tr.account-mgmt-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.account-mgmt-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.account-mgmt-user-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-mgmt-user-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.account-mgmt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.account-mgmt-avatar--lg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 16px;
}

.account-mgmt-avatar--company {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.account-mgmt-role {
  color: var(--text-2);
  font-size: 13px;
}

.account-mgmt-muted { color: var(--muted); font-size: 12px; }

.account-mgmt-table-empty {
  display: grid;
  gap: 4px;
  padding: 18px 8px;
  text-align: center;
  color: var(--muted);
}

.account-mgmt-table-empty strong { color: var(--text-2); }

.account-mgmt-loading {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 16px;
  color: var(--muted);
}

.account-mgmt-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: account-mgmt-spin 0.7s linear infinite;
}

@keyframes account-mgmt-spin {
  to { transform: rotate(360deg); }
}

.account-mgmt-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.account-mgmt-pager .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.account-mgmt-pager .secondary-button svg {
  width: 15px;
  height: 15px;
}

.account-mgmt-detail {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.account-mgmt-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-mgmt-detail-head h3 {
  margin: 0 0 2px;
  font-size: 17px;
  color: var(--text);
}

.account-mgmt-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

.account-mgmt-meta > div {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.account-mgmt-meta dt {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.account-mgmt-meta dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}

.account-mgmt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-mgmt-actions .primary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.account-mgmt-actions .primary-button svg {
  width: 15px;
  height: 15px;
}

.account-mgmt-temp {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.account-mgmt-temp-head {
  display: grid;
  gap: 2px;
}

.account-mgmt-temp-head strong {
  color: var(--text);
  font-size: 13px;
}

.account-mgmt-temp-head span {
  color: var(--muted);
  font-size: 12px;
}

.account-mgmt-temp code {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 14px;
  letter-spacing: 0.02em;
  word-break: break-all;
  color: var(--text);
}

.account-mgmt-temp .secondary-button,
.account-mgmt-temp .primary-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
}

.account-mgmt-temp .secondary-button svg,
.account-mgmt-temp .primary-button svg {
  width: 14px;
  height: 14px;
}

.account-mgmt-temp--modal {
  margin-top: 4px;
}

.account-mgmt-temp--modal code {
  font-size: 16px;
  font-weight: 600;
  user-select: all;
}

.account-mgmt-modal-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.account-mgmt-modal-summary strong {
  display: block;
  color: var(--text);
}

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

@media (max-width: 960px) {
  .account-mgmt-picker,
  .account-mgmt-layout.has-detail {
    grid-template-columns: 1fr;
  }

  .account-mgmt-detail-pane { position: static; }

  .account-mgmt-filters {
    grid-template-columns: 1fr 1fr;
  }

  .account-mgmt-search { grid-column: 1 / -1; }
  .account-mgmt-filters .secondary-button { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .account-mgmt-filters { grid-template-columns: 1fr; }
  .account-mgmt-meta { grid-template-columns: 1fr; }
  .account-mgmt-stats { width: 100%; }
  .account-mgmt-stat { flex: 1; }
}

.settings-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.settings-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.settings-nav-external {
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 12px;
}

.settings-table-panel { padding: 0; overflow: auto; }

.settings-table { width: 100%; border-collapse: collapse; }

.settings-table th,
.settings-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
  color: var(--text-2);
}

.settings-table th {
  background: var(--surface-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 500;
}

.settings-table .col-actions { text-align: right; white-space: nowrap; }

.settings-subtext { color: var(--muted); font-size: 12px; margin-top: 2px; }

.settings-self-badge {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  font-size: 11px;
  font-weight: 600;
}

.settings-subsection-title {
  margin: 18px 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.settings-subsection-title:first-child {
  margin-top: 0;
}

.settings-optional-tag {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-field-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.settings-create-actions {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-create-success {
  display: grid;
  gap: 16px;
}

.settings-create-success-banner {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 185, 129, 0.08);
}

.settings-create-success-banner strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.settings-create-success-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.settings-create-success-grid {
  align-items: stretch;
}

.settings-create-success-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.settings-create-success-card.wide {
  grid-column: 1 / -1;
}

.settings-create-success-card h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.settings-create-success-card p {
  margin: 0 0 4px;
}

.settings-create-password {
  margin-top: 10px !important;
}

.settings-create-password code {
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13px;
  word-break: break-all;
}

.settings-create-company-form .password-field {
  width: 100%;
}

.settings-create-company-form .password-field input { padding-right: 44px; }

.settings-companies-toolbar {
  align-items: center;
  gap: 12px;
}

.settings-companies-search {
  flex: 1 1 220px;
  min-width: 180px;
  margin: 0;
}

.settings-companies-filter {
  margin: 0;
  white-space: nowrap;
}

.settings-company-name-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  max-width: 320px;
}

.settings-company-name-text { min-width: 0; }

.settings-company-name-text strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-company-name-text .settings-subtext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-company-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.settings-company-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.settings-company-avatar-initial {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
  font-family: "Outfit", "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.settings-current-badge {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}

.settings-company-row-current td {
  background: rgba(59, 130, 246, 0.06);
}

.settings-companies-table th,
.settings-companies-table td {
  vertical-align: top;
}

.modal-panel--company-edit {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}

.modal-panel--company-edit .modal-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

.modal-panel--company-edit .modal-body {
  overflow: auto;
  max-height: calc(100vh - 180px);
}

.settings-loading {
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.settings-error { color: #fca5a5; }

.settings-products-toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-product-search { margin-bottom: 0; }

.settings-product-filters {
  width: 100%;
  overflow-x: auto;
}

.settings-products-table td strong { color: var(--text); }

.settings-products-table tr.is-inactive { opacity: 0.5; }

.settings-product-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.settings-flag.active { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; }
.settings-flag.inactive { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }

/* ── To Files — company document drive ── */

.to-files-page { display: grid; gap: 16px; }
.to-files-toolbar { display: grid; gap: 14px; }

.to-files-toolbar-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.to-files-intro h2 { margin: 0 0 6px; font-size: 18px; color: var(--text); }

.to-files-intro p {
  margin: 0;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.5;
}

.to-files-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.to-files-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: min(320px, 100%);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--field-bg);
  min-height: 42px;
  transition: border-color 0.15s ease;
}

.to-files-search:focus-within { border-color: var(--primary); }

.to-files-search i { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }

.to-files-search input {
  border: 0;
  background: transparent;
  width: 100%;
  min-height: 40px;
  padding: 0;
  outline: none;
  color: var(--text);
}

.to-files-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.to-files-view-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.to-files-view-btn.active {
  background: var(--surface-3);
  color: var(--primary-hover);
}

.to-files-filter-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow-x: auto;
}

.to-files-filter {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.to-files-filter em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

.to-files-filter.active {
  background: var(--surface-3);
  color: var(--primary-hover);
}

.to-files-filter.active em {
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
}

[data-theme="light"] .to-files-filter.active em {
  color: var(--primary-hover);
}

.to-files-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.to-files-sidebar { padding: 14px; }

.to-files-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.to-files-sidebar-head h3 { margin: 0; font-size: 14px; color: var(--text); }

.to-files-total-count { font-size: 12px; color: var(--muted); font-weight: 500; }

.to-files-folder-list { display: grid; gap: 2px; }

.to-files-folder {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  color: var(--text-2);
  font-weight: 500;
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
}

.to-files-folder i { width: 18px; height: 18px; color: var(--muted); }

.to-files-folder.active {
  background: rgba(99, 102, 241, 0.06);
  color: var(--primary-hover);
}

.to-files-folder.active i { color: var(--primary-hover); }

.to-files-folder-count {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.to-files-folder.active .to-files-folder-count {
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.to-files-main { display: grid; gap: 12px; min-width: 0; }

.to-files-breadcrumb {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.to-files-upload-zone {
  border: 2px dashed rgba(99, 102, 241, 0.3);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 28px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.to-files-upload-zone.is-dragover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.06);
}

.to-files-upload-inner {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  color: var(--text-2);
}

.to-files-upload-inner i { width: 36px; height: 36px; color: var(--primary); }

.to-files-upload-inner p { margin: 0; }

.to-files-upload-hint { color: var(--muted); font-size: 12px; }

.to-files-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.to-files-grid.is-list { grid-template-columns: 1fr; }

.to-files-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elevated-shadow);
  align-content: start;
  transition: border-color 0.15s ease;
}

.to-files-card:hover { border-color: var(--line-strong); }

.to-files-grid.is-list .to-files-card {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
}

.to-files-card-loading,
.to-files-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  color: var(--muted);
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.to-files-empty i { width: 40px; height: 40px; color: var(--muted); }

.to-files-empty h3 { margin: 0; color: var(--text-2); }

.to-files-empty p { margin: 0; max-width: 420px; }

.to-files-card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.to-files-grid.is-list .to-files-card-icon { width: 56px; height: 56px; }

.to-files-card-icon i { width: 28px; height: 28px; color: var(--text-2); }

.to-files-card-icon-pdf { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); }
.to-files-card-icon-pdf i { color: #f87171; }
.to-files-card-icon-doc,
.to-files-card-icon-docx { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); }
.to-files-card-icon-doc i,
.to-files-card-icon-docx i { color: #93c5fd; }
.to-files-card-icon-xls,
.to-files-card-icon-xlsx,
.to-files-card-icon-csv { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); }
.to-files-card-icon-xls i,
.to-files-card-icon-xlsx i,
.to-files-card-icon-csv i { color: #6ee7b7; }
.to-files-card-icon-mp4,
.to-files-card-icon-mov { background: rgba(168, 85, 247, 0.08); border-color: rgba(168, 85, 247, 0.2); }
.to-files-card-icon-mp4 i,
.to-files-card-icon-mov i { color: #c4b5fd; }
.to-files-card-icon-jpg,
.to-files-card-icon-jpeg,
.to-files-card-icon-jfif,
.to-files-card-icon-png,
.to-files-card-icon-webp,
.to-files-card-icon-heic { background: rgba(14, 165, 233, 0.08); border-color: rgba(14, 165, 233, 0.2); }
.to-files-card-icon-jpg i,
.to-files-card-icon-jpeg i,
.to-files-card-icon-jfif i,
.to-files-card-icon-png i,
.to-files-card-icon-webp i,
.to-files-card-icon-heic i { color: #7dd3fc; }
.to-files-card-icon-zip { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); }
.to-files-card-icon-zip i { color: #fbbf24; }
.to-files-card-icon-eml,
.to-files-card-icon-msg { background: rgba(236, 72, 153, 0.08); border-color: rgba(236, 72, 153, 0.2); }
.to-files-card-icon-eml i,
.to-files-card-icon-msg i { color: #f9a8d4; }

.to-files-ext {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
}

.to-files-card-body { min-width: 0; }

.to-files-card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.to-files-card-topline h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.to-files-category {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--primary-hover);
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
}

.to-files-card-desc,
.to-files-card-product,
.to-files-card-meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.to-files-card-product { color: var(--text-2); font-weight: 500; }

.to-files-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.to-files-grid.is-list .to-files-card-actions { justify-content: flex-end; }

.to-files-card-actions .secondary-button,
.to-files-card-actions .primary-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
}

.to-files-card-actions .secondary-button i,
#toFilesUploadBtn i { width: 14px; height: 14px; }

#toFilesUploadBtn { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 1100px) {
  .to-files-layout { grid-template-columns: 1fr; }
  .to-files-sidebar { order: 2; }
  .to-files-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .to-files-toolbar-actions { width: 100%; margin-left: 0; }
  .to-files-search { min-width: 100%; }
  .to-files-grid,
  .to-files-grid.is-list .to-files-card { grid-template-columns: 1fr; }
  .to-files-grid.is-list .to-files-card-actions { justify-content: stretch; }
  .to-files-card-actions .secondary-button,
  .to-files-card-actions .integration-disconnect {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 1100px) {
  .settings-page { grid-template-columns: 1fr; }
  .settings-nav { position: static; }
  .settings-nav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .integrations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .integrations-intro { padding: 14px; }
  .integrations-filter-bar { width: 100%; overflow-x: auto; }
  .integrations-grid { grid-template-columns: 1fr; }
}

/* ── Detail & Toast ── */

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-list div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-width: 0;
}

.detail-list strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  color: var(--text);
}

.profile-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.profile-modal-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.profile-modal-intro h3 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--text);
}

.profile-modal-intro p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.profile-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-hover);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.profile-detail-list {
  margin-bottom: 16px;
}

.profile-theme-picker {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.profile-theme-picker-head {
  margin-bottom: 12px;
}

.profile-theme-picker-head span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.profile-theme-picker-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.theme-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.theme-toggle-btn svg {
  width: 16px;
  height: 16px;
}

.theme-toggle-btn:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.theme-toggle-btn.active {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background: var(--primary-soft);
  color: var(--primary-hover);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

[data-theme="light"] .alert-error,
[data-theme="light"] .settings-error,
[data-theme="light"] .integration-status-error,
[data-theme="light"] .settings-save-indicator.is-error,
[data-theme="light"] .integration-disconnect,
[data-theme="light"] .settings-flag.inactive {
  color: #b91c1c;
}

[data-theme="light"] .settings-flag.active,
[data-theme="light"] .settings-rule-period-active { color: #047857; }
[data-theme="light"] .settings-self-badge { color: #065f46; }
[data-theme="light"] .settings-rule-period-scheduled { color: #4338ca; }

[data-theme="light"] .alert-error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.18);
}

[data-theme="light"] .status-planned { color: #4338ca; }
[data-theme="light"] .status-approved,
[data-theme="light"] .status-activated,
[data-theme="light"] .status-paid { color: #047857; }
[data-theme="light"] .status-unpaid,
[data-theme="light"] .status-overdue { color: #b91c1c; }
[data-theme="light"] .status-partial,
[data-theme="light"] .status-partially_paid { color: #b45309; }
[data-theme="light"] .status-sent { color: #1d4ed8; }
[data-theme="light"] .status-in_progress { color: #1d4ed8; }
[data-theme="light"] .status-install_booked { color: #1d4ed8; }
[data-theme="light"] .status-install_completed { color: #0f766e; }
[data-theme="light"] .status-on_hold { color: #b45309; }
[data-theme="light"] .status-cancelled { color: #b91c1c; }

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.profile-actions-bar {
  justify-content: stretch;
}

.profile-actions .secondary-button,
.profile-actions .integration-disconnect {
  text-decoration: none;
}

.profile-actions .integration-disconnect {
  margin-left: auto;
}

.modal-note { margin: 0 0 14px; color: var(--muted); }

.confirm-dialog-subject {
  margin: -6px 0 14px;
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.confirm-dialog-subject strong { font-weight: 700; }

.toast-stack {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  animation: toast-in 0.18s ease-out;
  border-radius: var(--radius-sm);
  color: #fff;
  background: #15803d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* White text on each of these backgrounds meets WCAG AA (≥ 4.5:1) in both themes. */
.toast.success { background: #15803d; }
.toast.error { background: #b91c1c; }
.toast.warning { background: #b45309; }
.toast.info { background: #0369a1; }

.toast-icon { margin-top: 1px; flex: none; }
.toast-content { display: grid; gap: 2px; min-width: 0; }
.toast-title { font-size: 14px; font-weight: 700; }
.toast-message { font-weight: 500; }

.toast-close {
  width: 24px;
  height: 24px;
  margin: -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  opacity: 0.8;
  cursor: pointer;
}
.toast-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.toast-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

@media (max-width: 640px) {
  .toast-stack {
    top: 72px;
    right: 12px;
    left: 12px;
    width: auto;
    align-items: stretch;
  }
}

/* ── Tasks & Calendar ── */

.tasks-page { display: grid; gap: 16px; }
.tasks-toolbar { display: grid; gap: 14px; }
.tasks-toolbar-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.tasks-intro h2 { margin: 0 0 6px; font-size: 18px; }
.tasks-intro p { margin: 0; color: var(--muted); max-width: 560px; line-height: 1.5; }
.tasks-toolbar-actions { display: flex; align-items: center; gap: 10px; }

.tasks-kpi-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
}
.tasks-kpi {
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2);
}
.tasks-kpi span { display: block; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tasks-kpi strong { display: block; margin-top: 6px; font-size: 22px; color: var(--text); }
.tasks-kpi-danger strong { color: var(--danger); }

.tasks-filter-bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.tasks-filters-left { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.tasks-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.tasks-filter-select {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); padding: 8px 10px;
  font-size: 13px; min-height: 38px;
}
.tasks-clear-filters { align-self: flex-end; }
.tasks-search-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.tasks-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 280px; min-width: 200px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 0 12px; min-height: 40px;
}
.tasks-search svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.tasks-search input {
  border: 0; background: transparent; color: var(--text); width: 100%;
  font-size: 13px; outline: none; min-height: 38px;
}
.tasks-result-count { margin: 0; color: var(--muted); font-size: 13px; white-space: nowrap; }
.tasks-view-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2);
}
.tasks-view-btn {
  width: 36px; height: 36px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
}
.tasks-view-btn.active { background: var(--surface-3); color: var(--primary-hover); }
.tasks-view-btn svg { width: 16px; height: 16px; }

.tasks-loading, .tasks-empty {
  min-height: 300px; display: grid; place-items: center; align-content: center;
  gap: 10px; text-align: center; color: var(--muted); padding: 32px;
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface);
}
.tasks-empty i { width: 40px; height: 40px; }
.tasks-empty h3 { margin: 0; color: var(--text); }
.tasks-empty p { margin: 0; max-width: 400px; }

/* List */
.tasks-list { display: grid; gap: 8px; }

.task-card {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); transition: border-color .15s;
}
.task-card:hover { border-color: var(--line-strong); }
.task-card.is-overdue { border-left: 3px solid var(--danger); }
.task-card[data-status="completed"] { opacity: .65; }

.task-card-top { display: flex; align-items: flex-start; gap: 10px; }
.task-priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.task-card-title { flex: 1; font-weight: 600; font-size: 14px; line-height: 1.4; }
.task-card[data-status="completed"] .task-card-title { text-decoration: line-through; color: var(--muted); }

.task-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.task-action-btn {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--text-2); cursor: pointer;
  display: grid; place-items: center;
}
.task-action-btn svg { width: 14px; height: 14px; }
.task-action-btn:hover { border-color: var(--primary); color: var(--primary-hover); }
.task-action-danger:hover { border-color: var(--danger); color: var(--danger); }

.task-card-desc { margin: 8px 0 0 18px; font-size: 13px; color: var(--text-2); line-height: 1.5; }

.task-card-meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding-left: 18px;
  font-size: 12px; color: var(--muted);
}
.task-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.task-card-meta svg { width: 12px; height: 12px; }

.task-type-badge {
  background: var(--surface-3); color: var(--text-2); padding: 2px 8px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
}
.task-status-badge { font-weight: 600; }
.task-due.is-overdue { color: var(--danger); font-weight: 600; }
.task-assignee { color: var(--text-2); }
.task-project { color: var(--primary-hover); font-weight: 500; }

/* Board */
.tasks-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tasks-board-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tasks-board-col {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.tasks-board-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.tasks-board-status { font-weight: 600; font-size: 13px; }
.tasks-board-count {
  background: var(--surface-3); color: var(--text-2); padding: 2px 8px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
}
.tasks-board-cards { display: grid; gap: 8px; padding: 10px; }
.tasks-board-cards .task-card { border-left-width: 1px; }
.tasks-board-empty { margin: 0; padding: 12px 4px; font-size: 12px; }

/* Calendar */
.tasks-calendar { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.tasks-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); gap: 12px;
}
.tasks-cal-header h3 { margin: 0; font-size: 16px; }
.tasks-cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.tasks-cal-header-spacer { width: 120px; }
.tasks-cal-header .secondary-button { min-width: 36px; min-height: 36px; padding: 6px 10px; }
.tasks-cal-header .secondary-button svg { width: 16px; height: 16px; }

.tasks-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tasks-cal-day-name {
  padding: 10px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line);
}
.tasks-cal-cell {
  min-height: 100px; padding: 6px 8px; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); position: relative; cursor: pointer;
}
.tasks-cal-cell:nth-child(7n+7) { border-right: 0; }
.tasks-cal-cell.empty { background: var(--surface-2); cursor: default; }
.tasks-cal-cell.is-today { background: var(--primary-soft); }
.tasks-cal-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tasks-cal-date { font-size: 12px; font-weight: 600; color: var(--text-2); display: block; margin-bottom: 4px; }
.tasks-cal-cell.is-today .tasks-cal-date { color: var(--primary-hover); font-weight: 700; }

.tasks-cal-event {
  font-size: 11px; padding: 2px 6px; margin-bottom: 2px; border-radius: 4px;
  background: var(--surface-3); border-left: 3px solid var(--primary);
  color: var(--text-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-cal-event:hover { background: var(--primary-soft); color: var(--text); }
.tasks-cal-time { font-weight: 600; color: var(--muted); }
.tasks-cal-more {
  font-size: 10px; color: var(--primary-hover); font-weight: 600; padding: 2px 6px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
}
.tasks-cal-more:hover { text-decoration: underline; }
.tasks-cal-undated {
  border-top: 1px solid var(--line); padding: 14px 16px; background: var(--surface-2);
}
.tasks-cal-undated h4 { margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.task-customer { color: var(--text-2); }

@media (max-width: 1100px) {
  .tasks-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tasks-board, .tasks-board-4 { grid-template-columns: 1fr 1fr; }
  .tasks-cal-header-spacer { display: none; }
}
@media (max-width: 720px) {
  .tasks-kpi-strip { grid-template-columns: 1fr 1fr; }
  .tasks-filters-left { width: 100%; }
  .tasks-filter-select { flex: 1; min-width: 0; width: 100%; }
  .tasks-board, .tasks-board-4 { grid-template-columns: 1fr; }
  .tasks-cal-cell { min-height: 70px; }
}

/* ── Customer Documents ── */

.customer-docs-page { display: grid; gap: 16px; }
.customer-docs-toolbar { display: grid; gap: 14px; }
.customer-docs-toolbar-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.customer-docs-intro h2 { margin: 0 0 6px; font-size: 18px; }
.customer-docs-intro p { margin: 0; color: var(--muted); max-width: 620px; line-height: 1.5; }
.customer-docs-intro a { color: var(--primary-hover); font-weight: 600; }
.customer-docs-toolbar-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto;
}

.customer-docs-search {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: min(320px, 100%); padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-2); min-height: 42px;
}
.customer-docs-search i { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.customer-docs-search input {
  border: 0; background: transparent; width: 100%; min-height: 40px;
  padding: 0; outline: none; color: var(--text);
}

.customer-docs-view-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2);
}
.customer-docs-view-btn {
  width: 36px; height: 36px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.customer-docs-view-btn.active { background: var(--surface-3); color: var(--primary-hover); }
.customer-docs-view-btn svg { width: 16px; height: 16px; }

.customer-docs-filter-bar {
  display: flex; gap: 6px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line); overflow-x: auto;
  align-items: center; flex-wrap: wrap;
}
.customer-docs-filter {
  border: 0; background: transparent; color: var(--text-2); font-weight: 600;
  font-size: 13px; padding: 8px 14px; border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.customer-docs-filter em {
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--surface-3); border-radius: var(--radius-pill); padding: 1px 7px;
}
.customer-docs-filter.active {
  background: var(--surface-3); color: var(--primary-hover);
}
.customer-docs-filter.active em {
  background: rgba(99, 102, 241, 0.18); color: #c7d2fe;
}
[data-theme="light"] .customer-docs-filter.active em { color: var(--primary-hover); }
.customer-docs-clear-filters {
  margin-left: auto; flex-shrink: 0;
}

.customer-docs-layout {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.customer-docs-sidebar { padding: 14px; position: sticky; top: 88px; }
.customer-docs-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.customer-docs-sidebar-head h3 { margin: 0; font-size: 14px; }
.customer-docs-total-count { font-size: 12px; color: var(--muted); font-weight: 600; }

.customer-docs-project-list { display: grid; gap: 4px; max-height: 70vh; overflow: auto; }
.customer-docs-project {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: start; gap: 10px;
  width: 100%; border: 0; background: transparent; border-radius: var(--radius-sm);
  padding: 10px 12px; text-align: left; cursor: pointer; color: var(--text-2);
  font-size: 13px;
}
.customer-docs-project i { width: 18px; height: 18px; color: var(--muted); margin-top: 2px; }
.customer-docs-project span { display: grid; gap: 2px; min-width: 0; }
.customer-docs-project span strong { color: var(--text); font-size: 13px; }
.customer-docs-project span small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.customer-docs-project.active { background: var(--primary-soft); color: var(--primary-hover); }
.customer-docs-project.active i { color: var(--primary-hover); }
.customer-docs-project-count {
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--surface-3); border-radius: var(--radius-pill); padding: 2px 8px;
}
.customer-docs-project.active .customer-docs-project-count {
  background: rgba(99, 102, 241, 0.18); color: var(--primary-hover);
}

.customer-docs-main { display: grid; gap: 12px; min-width: 0; }
.customer-docs-breadcrumb { font-size: 13px; font-weight: 600; color: var(--muted); }

.customer-docs-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.customer-docs-grid.is-list { grid-template-columns: 1fr; }
.customer-docs-grid.is-list .customer-docs-card {
  grid-template-columns: 72px minmax(0, 1fr); align-items: center;
}
.customer-docs-grid.is-list .customer-docs-card-actions { justify-content: flex-end; }

.customer-docs-card,
.customer-docs-empty,
.customer-docs-card-loading {
  display: grid; gap: 12px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); align-content: start;
}
.customer-docs-empty,
.customer-docs-card-loading {
  grid-column: 1 / -1; min-height: 220px; place-items: center;
  text-align: center; color: var(--muted); border-style: dashed;
}
.customer-docs-empty i { width: 40px; height: 40px; color: var(--muted); }
.customer-docs-empty h3 { margin: 0; color: var(--text); }
.customer-docs-empty p { margin: 0; max-width: 460px; line-height: 1.5; }
.customer-docs-empty a { color: var(--primary-hover); font-weight: 600; }

.customer-docs-card { cursor: pointer; transition: border-color .15s; }
.customer-docs-card:hover { border-color: var(--line-strong); }
.customer-docs-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.customer-docs-card-icon {
  width: 64px; height: 64px; border-radius: var(--radius-sm);
  display: grid; place-items: center; position: relative;
  background: var(--surface-2); border: 1px solid var(--line);
}
.customer-docs-grid.is-list .customer-docs-card-icon { width: 56px; height: 56px; }
.customer-docs-card-icon i { width: 28px; height: 28px; color: var(--text-2); }
.customer-docs-card-icon-pdf { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); }
.customer-docs-card-icon-pdf i { color: #f87171; }
.customer-docs-card-icon-doc,
.customer-docs-card-icon-docx { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.2); }
.customer-docs-card-icon-doc i,
.customer-docs-card-icon-docx i { color: var(--primary-hover); }
.customer-docs-card-icon-jpg,
.customer-docs-card-icon-jpeg,
.customer-docs-card-icon-png,
.customer-docs-card-icon-webp { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); }
.customer-docs-card-icon-jpg i,
.customer-docs-card-icon-jpeg i,
.customer-docs-card-icon-png i,
.customer-docs-card-icon-webp i { color: #34d399; }

.customer-docs-ext {
  position: absolute; right: 6px; bottom: 6px; font-size: 9px;
  font-weight: 700; color: var(--muted);
}

.customer-docs-card-body { min-width: 0; }
.customer-docs-card-topline {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.customer-docs-card-topline h3 {
  margin: 0; font-size: 15px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.customer-docs-category {
  flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--primary-hover);
  background: var(--primary-soft); border-radius: var(--radius-pill); padding: 3px 8px;
}
.customer-docs-custom-label {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}
[data-theme="light"] .customer-docs-custom-label {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
}
.customer-docs-card-customer {
  margin: 6px 0 0; font-size: 12px; color: var(--text-2); line-height: 1.45;
}
.customer-docs-card-customer a { color: var(--primary-hover); font-weight: 600; }
.customer-docs-card-meta { margin: 0; font-size: 12px; color: var(--muted); }
.customer-docs-status { font-weight: 600; color: var(--text-2); text-transform: capitalize; }
.customer-docs-project-status { text-transform: capitalize; }
.customer-docs-card-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px;
}
.customer-docs-card-actions .secondary-button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; font-size: 12px;
}
.customer-docs-card-actions .secondary-button i { width: 14px; height: 14px; }
.customer-docs-delete {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: transparent;
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.customer-docs-delete:hover {
  background: rgba(239, 68, 68, 0.08);
}

@media (max-width: 1100px) {
  .customer-docs-layout { grid-template-columns: 1fr; }
  .customer-docs-sidebar { position: static; order: 2; }
  .customer-docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .customer-docs-toolbar-actions { width: 100%; margin-left: 0; }
  .customer-docs-search { min-width: 100%; }
  .customer-docs-grid,
  .customer-docs-grid.is-list .customer-docs-card { grid-template-columns: 1fr; }
  .customer-docs-card-actions { justify-content: stretch; }
  .customer-docs-card-actions .secondary-button { flex: 1; justify-content: center; }
}

/* ── Notifications ── */

.notifications-page { display: grid; gap: 16px; }
.notifications-toolbar { display: grid; gap: 14px; }
.notifications-toolbar-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.notifications-intro h2 { margin: 0 0 6px; font-size: 18px; }
.notifications-intro p { margin: 0; color: var(--muted); max-width: 620px; line-height: 1.5; }
.notifications-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.notifications-toolbar-actions .secondary-button:disabled,
.notifications-toolbar-actions .primary-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.notif-member-picker {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.notif-member-picker[hidden],
#notifCustomLinkWrap[hidden],
.compose-error[hidden],
.notif-member-option[hidden] {
  display: none !important;
}

.notif-member-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.notif-member-toolbar input[type="search"] {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font: inherit;
}

.notif-member-toolbar-actions {
  display: flex;
  gap: 8px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--primary-hover);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
}

.text-button:hover { text-decoration: underline; }

.notif-member-list {
  display: grid;
  gap: 4px;
  max-height: 200px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.notif-member-option {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 12px;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
}

.notif-member-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.notif-member-check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong, var(--line));
  border-radius: 4px;
  background: var(--surface);
  flex-shrink: 0;
  position: relative;
}

.notif-member-option:hover {
  background: var(--surface-3);
}

.notif-member-option:has(input:checked) {
  background: var(--primary-soft);
}

.notif-member-option:has(input:checked) .notif-member-check {
  border-color: var(--primary);
  background: var(--primary);
}

.notif-member-option:has(input:checked) .notif-member-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.notif-member-copy { display: grid; gap: 2px; min-width: 0; }
.notif-member-copy strong { font-size: 13px; color: var(--text); line-height: 1.3; }
.notif-member-copy small { font-size: 12px; color: var(--muted); line-height: 1.3; }

.modal-panel--compose {
  width: min(560px, 100%);
  max-height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-panel--compose .modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.modal-panel--compose .modal-body {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.modal-panel--compose .modal-actions {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
}

.compose-update { display: grid; gap: 18px; }
.compose-section { display: grid; gap: 10px; }
.compose-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.compose-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.compose-audience-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-hover);
}
.compose-audience-count.is-empty { color: #b45309; }

.compose-field { display: grid; gap: 6px; margin: 0; }
.compose-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.compose-field input,
.compose-field select,
.compose-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
}
.compose-field textarea { min-height: 96px; resize: vertical; }
.compose-hint { color: var(--muted); font-size: 12px; }

.compose-audience-list {
  display: grid;
  gap: 8px;
}

.compose-audience-option {
  display: block;
  margin: 0;
  cursor: pointer;
}

.compose-audience-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.compose-audience-face {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color .15s, background .15s;
}

.compose-audience-radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong, var(--line));
  border-radius: 50%;
  background: var(--surface);
  position: relative;
  flex-shrink: 0;
}

.compose-audience-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.compose-audience-copy strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
}

.compose-audience-copy small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.compose-audience-option:hover .compose-audience-face {
  border-color: var(--line-strong, var(--line));
}

.compose-audience-option input:checked + .compose-audience-face {
  border-color: rgba(99, 102, 241, 0.45);
  background: var(--primary-soft);
}

.compose-audience-option input:checked + .compose-audience-face .compose-audience-radio {
  border-color: var(--primary);
}

.compose-audience-option input:checked + .compose-audience-face .compose-audience-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
}

.compose-audience-option input:focus-visible + .compose-audience-face {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.compose-link-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.compose-preview-section .compose-preview {
  cursor: default;
  margin: 0;
}

.compose-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  font-size: 13px;
}

.form-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  font-size: 13px;
}
.form-error[hidden] { display: none; }

.compose-empty {
  margin: 0;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .compose-link-row { grid-template-columns: 1fr; }
}

.notifications-kpi-strip {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px;
}
.notifications-kpi {
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); text-align: left; cursor: pointer; color: inherit;
  font: inherit;
}
.notifications-kpi:hover { border-color: var(--line-strong); }
.notifications-kpi.active {
  border-color: rgba(99, 102, 241, 0.35);
  background: var(--primary-soft);
}
.notifications-kpi span {
  display: block; font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.notifications-kpi strong { display: block; margin-top: 6px; font-size: 22px; color: var(--text); }
.notifications-kpi[data-kpi-filter="unread"] strong { color: var(--primary-hover); }

.notifications-search-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.notifications-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 280px; min-width: 200px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 0 12px; min-height: 40px;
}
.notifications-search svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.notifications-search input {
  border: 0; background: transparent; color: var(--text); width: 100%;
  font-size: 13px; outline: none; min-height: 38px;
}
.notifications-result-count { margin: 0; color: var(--muted); font-size: 13px; white-space: nowrap; }

.notifications-filter-bar {
  display: flex; gap: 6px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line); overflow-x: auto;
  align-items: center; flex-wrap: wrap;
}
.notifications-filter {
  border: 0; background: transparent; color: var(--text-2); font-weight: 600;
  font-size: 13px; padding: 8px 14px; border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.notifications-filter em {
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--surface-3); border-radius: var(--radius-pill); padding: 1px 7px;
}
.notifications-filter.active { background: var(--surface-3); color: var(--primary-hover); }
.notifications-filter.active em {
  background: rgba(99, 102, 241, 0.18); color: var(--primary-hover);
}
.notifications-clear-filters { margin-left: auto; flex-shrink: 0; }

.notifications-list-wrap { min-height: 200px; }
.notifications-list { display: grid; gap: 8px; }

.notification-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); transition: border-color .15s, background .15s;
  position: relative;
}
.notification-item:hover { border-color: var(--line-strong); }
.notification-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.notification-item.is-unread {
  background: var(--primary-soft);
  border-color: rgba(99, 102, 241, 0.2);
}
.notification-item.is-read { opacity: .82; }

.notification-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: grid; place-items: center; background: var(--surface-2);
  border: 1px solid var(--line);
}
.notification-icon svg { width: 20px; height: 20px; color: var(--primary-hover); }
.notif-type-success .notification-icon { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); }
.notif-type-success .notification-icon svg { color: #34d399; }
.notif-type-warning .notification-icon { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); }
.notif-type-warning .notification-icon svg { color: #fbbf24; }
.notif-type-error .notification-icon { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); }
.notif-type-error .notification-icon svg { color: #f87171; }

.notification-body { min-width: 0; }
.notification-topline {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.notification-topline strong { font-size: 14px; color: var(--text); line-height: 1.35; }
.notification-time { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.notification-message { margin: 6px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.notification-meta {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px;
}
.notification-category {
  background: var(--surface-3); color: var(--text-2); padding: 2px 8px;
  border-radius: var(--radius-pill); font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em;
}
.notification-action-hint { color: var(--muted); }
.notification-unread-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  margin-top: 6px; flex-shrink: 0;
}

.notifications-loading,
.notifications-empty {
  min-height: 280px; display: grid; place-items: center; align-content: center;
  gap: 10px; text-align: center; color: var(--muted); padding: 32px;
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface);
}
.notifications-empty i { width: 40px; height: 40px; }
.notifications-empty h3 { margin: 0; color: var(--text); }
.notifications-empty p { margin: 0; max-width: 420px; line-height: 1.5; }

/* ── System Logs (super admin) ── */

.logs-page { display: grid; gap: 16px; }
.logs-toolbar { display: grid; gap: 14px; }
.logs-toolbar-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.logs-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.logs-intro h2 { margin: 0 0 6px; font-size: 18px; }
.logs-intro p { margin: 0; color: var(--muted); max-width: 640px; line-height: 1.5; }

.logs-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.logs-kpi {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.logs-kpi span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.logs-kpi strong { font-size: 18px; font-weight: 700; color: var(--text); }
.logs-kpi.active,
.logs-kpi[aria-pressed="true"] {
  border-color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.06);
}

.logs-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}
.logs-filters label { display: grid; gap: 6px; margin: 0; }
.logs-filters label span {
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.logs-filters input,
.logs-filters select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
}
.logs-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 42px;
}
.logs-filter-actions .secondary-button { white-space: nowrap; }
.logs-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.logs-count-badge strong { color: var(--text); font-size: 13px; }
.logs-count-badge.is-filtered { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.logs-count-tag {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
}

.logs-list-wrap { padding: 0; overflow: hidden; }
.logs-table-wrap { overflow: auto; }
.logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 760px;
}
.logs-table th,
.logs-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.logs-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.logs-when,
.logs-user,
.logs-company { min-width: 120px; }
.logs-when strong,
.logs-user strong { display: block; color: var(--text); font-weight: 600; }
.logs-when small,
.logs-user small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.logs-company { color: var(--text-2); font-weight: 500; white-space: nowrap; }
.logs-message { color: var(--text-2); line-height: 1.45; min-width: 220px; }
.logs-message-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.logs-message-text {
  flex: 1 1 180px;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
}
.logs-detail-lines {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.logs-detail-lines li {
  display: grid;
  grid-template-columns: minmax(72px, 96px) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 12px;
  line-height: 1.4;
}
.logs-detail-lines span {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 10px;
  padding-top: 1px;
}
.logs-detail-lines strong {
  color: var(--text-2);
  font-weight: 500;
  word-break: break-word;
}
.logs-meta-toggle {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.logs-meta-panel {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.logs-meta-panel pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.logs-event-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.logs-event-login { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }
.logs-event-logout { background: rgba(100, 116, 139, 0.16); color: #cbd5e1; }
.logs-event-login_failed { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.logs-event-lead { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }
.logs-event-project,
.logs-event-pipeline { background: rgba(168, 85, 247, 0.12); color: #d8b4fe; }
.logs-event-user { background: rgba(245, 158, 11, 0.14); color: #fcd34d; }
.logs-event-notification { background: rgba(14, 165, 233, 0.14); color: #7dd3fc; }
.logs-event-company_switch { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; }
.logs-event-integration { background: rgba(20, 184, 166, 0.14); color: #5eead4; }
.logs-event-task { background: rgba(234, 88, 12, 0.14); color: #fdba74; }
.logs-event-email { background: rgba(14, 165, 233, 0.14); color: #7dd3fc; }
.logs-event-support_ticket_created,
.logs-event-support_ticket_reply,
.logs-event-support_ticket_status { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; }
.logs-event-session_superseded { background: rgba(245, 158, 11, 0.14); color: #fcd34d; }
[data-theme="light"] .logs-event-login { color: #047857; }
[data-theme="light"] .logs-event-logout { color: #475569; }
[data-theme="light"] .logs-event-login_failed { color: #b91c1c; }
[data-theme="light"] .logs-event-lead { color: #1d4ed8; }
[data-theme="light"] .logs-event-project,
[data-theme="light"] .logs-event-pipeline { color: #7e22ce; }
[data-theme="light"] .logs-event-user { color: #92400e; }
[data-theme="light"] .logs-event-notification { color: #0369a1; }
[data-theme="light"] .logs-event-company_switch { color: #4338ca; }
[data-theme="light"] .logs-event-integration { color: #0f766e; }
[data-theme="light"] .logs-event-task { color: #9a3412; }
[data-theme="light"] .logs-event-email { color: #0369a1; }
[data-theme="light"] .logs-event-support_ticket_created,
[data-theme="light"] .logs-event-support_ticket_reply,
[data-theme="light"] .logs-event-support_ticket_status { color: #4338ca; }
[data-theme="light"] .logs-event-session_superseded { color: #92400e; }

.logs-load-more {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-top: 1px solid var(--line);
}

.logs-loading,
.logs-empty {
  min-height: 260px; display: grid; place-items: center; align-content: center;
  gap: 10px; text-align: center; color: var(--muted); padding: 32px;
}
.logs-empty i { width: 40px; height: 40px; }
.logs-empty h3 { margin: 0; color: var(--text); }
.logs-empty p { margin: 0; max-width: 420px; line-height: 1.5; }

#logsRefreshBtn.is-busy { opacity: .7; pointer-events: none; }

@media (max-width: 1100px) {
  .logs-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logs-filters { grid-template-columns: 1fr 1fr; }
  .logs-filter-actions { grid-column: 1 / -1; justify-content: space-between; }
}

@media (max-width: 720px) {
  .logs-kpi-strip { grid-template-columns: 1fr 1fr; }
  .logs-filters { grid-template-columns: 1fr; }
  .logs-table { min-width: 0; }
  .logs-table thead { display: none; }
  .logs-table,
  .logs-table tbody,
  .logs-table tr,
  .logs-table td {
    display: block;
    width: 100%;
  }
  .logs-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .logs-table td {
    padding: 4px 0;
    border: 0;
  }
  .logs-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .logs-when,
  .logs-user,
  .logs-company { min-width: 0; }
}

@media (max-width: 1100px) {
  .notifications-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .notifications-kpi-strip { grid-template-columns: 1fr 1fr; }
  .notification-item { grid-template-columns: 36px 1fr; }
  .notification-unread-dot { position: absolute; top: 14px; right: 14px; margin: 0; }
}

.notification-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.notification-actions .text-button,
.notification-actions .secondary-button {
  font-size: 12px; padding: 6px 10px; min-height: 32px;
}
.notifications-load-more {
  display: flex; justify-content: center; padding: 12px 0 4px;
}

/* ── Responsive ── */

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-layout { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .sidebar {
    width: var(--sidebar-width);
    border-right: 1px solid var(--line);
    transform: translateX(-100%);
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
  body.sidebar-collapsed .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
  }
  body.sidebar-open .sidebar-backdrop {
    display: block;
  }
  .app-frame,
  body.sidebar-collapsed .app-frame,
  body.sidebar-open .app-frame {
    margin-left: 0;
  }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 12px; }
  .company-select, .company-current { display: none; }
  .content { padding: 14px; }
  .content h1 { font-size: 20px; }
  .kpi-grid, .chart-grid, .metric-strip, .report-toolbar, .report-links { grid-template-columns: 1fr; }
  .date-pair { grid-template-columns: 1fr; }
  .pill-metric { border-radius: var(--radius-sm); }
  .form-grid, .detail-list { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions > :is(button, a) { width: 100%; justify-content: center; }
  .leads-toolbar,
  .projects-toolbar,
  .customers-toolbar { flex-direction: column; align-items: stretch; }
}

/* ── Native select: one themed chevron, value and arrow vertically centred ──
   Declared last (with !important on the chevron box) because many components set the
   `background` shorthand, which would otherwise wipe the arrow. */
:root,
[data-theme="dark"] {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="light"] {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  padding-right: 34px !important;
  line-height: 1.3;
  text-overflow: ellipsis;
}
select:not([multiple]):disabled { background-image: none !important; }

/* Open dropdown list: readable in both themes (Windows/Linux draw options with these colours). */
select option,
select optgroup {
  background-color: var(--surface);
  color: var(--text);
}
select option:disabled { color: var(--muted); }

/* ── One focus style for every text-like control, both themes ──
   Declared last so component rules that only change the border cannot drop the ring. */
:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select, textarea):focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
:is(.leads-search, .projects-search, .to-files-search, .tasks-search, .customer-docs-search, .notifications-search, .notes-search) input:focus {
  border-color: transparent;
  box-shadow: none;
}
:is(.leads-search, .projects-search, .to-files-search, .tasks-search, .customer-docs-search, .notifications-search, .notes-search):focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* ── Search fields: icon and placeholder share one size, gap and baseline everywhere ── */
:is(.leads-search, .projects-search, .to-files-search, .tasks-search, .customer-docs-search, .notifications-search, .notes-search) {
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
:is(.leads-search, .projects-search, .to-files-search, .tasks-search, .customer-docs-search, .notifications-search, .notes-search) :is(svg, i) {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--muted);
}
:is(.leads-search, .projects-search, .to-files-search, .tasks-search, .customer-docs-search, .notifications-search, .notes-search) input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.3;
}
:is(.leads-search, .projects-search, .to-files-search, .tasks-search, .customer-docs-search, .notifications-search, .notes-search) input::placeholder {
  color: var(--muted);
  opacity: 1;
}
div.dt-container .dt-length select:focus,
div.dt-container .dt-search input:focus,
select.page-size-select:focus { border-color: var(--primary); }

/* ── Handbook ── */
.handbook-page {
  --handbook-accent: var(--primary);
  --handbook-accent-soft: var(--primary-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.handbook-page .panel {
  min-height: 0;
}

.handbook-page.is-ready .handbook-hero,
.handbook-page.is-ready .handbook-toc,
.handbook-page.is-ready .handbook-section {
  animation: handbook-rise 420ms ease both;
}

.handbook-page.is-ready .handbook-toc { animation-delay: 60ms; }
.handbook-page.is-ready .handbook-section:nth-child(1) { animation-delay: 90ms; }
.handbook-page.is-ready .handbook-section:nth-child(2) { animation-delay: 130ms; }
.handbook-page.is-ready .handbook-section:nth-child(3) { animation-delay: 170ms; }
.handbook-page.is-ready .handbook-section:nth-child(4) { animation-delay: 210ms; }
.handbook-page.is-ready .handbook-section:nth-child(n + 5) { animation-delay: 240ms; }

@keyframes handbook-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .handbook-page.is-ready .handbook-hero,
  .handbook-page.is-ready .handbook-toc,
  .handbook-page.is-ready .handbook-section {
    animation: none;
  }
}

.handbook-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 3px;
  margin: -6px 0 2px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.handbook-progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--primary-fill), var(--primary-hover));
  transition: transform 80ms linear;
}

.handbook-hero {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(1200px 280px at -10% -40%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(700px 220px at 110% 0%, color-mix(in srgb, var(--success) 12%, transparent), transparent 55%),
    var(--surface);
}

.handbook-hero-intro {
  padding: 20px 20px 18px;
}

.handbook-hero-main {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

.handbook-hero-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--primary-hover);
  background: var(--handbook-accent-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  line-height: 0;
}

.handbook-hero-icon svg,
.handbook-hero-icon i {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

.handbook-hero-copy {
  min-width: 0;
  flex: 1;
}

.handbook-hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.handbook-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.handbook-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-hover);
  background: var(--handbook-accent-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
}

.handbook-hero-copy h2 {
  margin: 0 0 8px;
  font-family: Outfit, DM Sans, sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.handbook-hero-copy > p {
  margin: 0 0 16px;
  max-width: 52ch;
  color: var(--text-2);
  line-height: 1.55;
}

.handbook-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--field-bg);
  box-shadow: var(--elevated-shadow);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.handbook-search:focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.handbook-search svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--muted);
}

.handbook-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text);
  box-shadow: none !important;
}

.handbook-search input::placeholder { color: var(--muted); }

.handbook-search-hint {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.4;
}

.handbook-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.handbook-stat {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, var(--primary-soft));
  box-shadow: var(--elevated-shadow);
}

.handbook-stat .handbook-stat-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.handbook-stat .handbook-stat-icon svg,
.handbook-stat .handbook-stat-icon i {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

.handbook-stat-copy {
  min-width: 0;
}

.handbook-stat-copy span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.handbook-stat-copy strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handbook-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.handbook-toc {
  position: sticky;
  top: 18px;
  min-height: 0;
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 14px;
  scrollbar-width: thin;
}

.handbook-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 4px;
}

.handbook-toc-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.handbook-toc-count {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-hover);
  background: var(--handbook-accent-soft);
}

.handbook-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.handbook-toc-list a {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--text-2);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.handbook-toc-list a:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}

.handbook-toc-list a.is-active {
  color: var(--text);
  background: var(--handbook-accent-soft);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
  box-shadow: inset 3px 0 0 var(--primary-fill);
}

.handbook-toc-index {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 1.4em;
}

.handbook-toc-list a.is-active .handbook-toc-index {
  color: var(--primary-hover);
}

.handbook-toc-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  overflow: hidden;
  line-height: 0;
}

.handbook-toc-list a.is-active .handbook-toc-icon {
  color: var(--primary-hover);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--surface) 70%, var(--primary) 30%);
}

.handbook-toc-icon svg,
.handbook-toc-icon i {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

.handbook-toc-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.handbook-toc-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.handbook-toc-meta {
  font-size: 11px;
  color: var(--muted);
}

.handbook-toc-empty {
  margin: 10px 4px 0;
  font-size: 13px;
  color: var(--muted);
}

.handbook-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.handbook-section {
  min-height: 0;
  scroll-margin-top: 88px;
  padding: 0;
  overflow: hidden;
}

.handbook-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 7%, var(--surface)) 0%,
    var(--surface) 100%
  );
}

.handbook-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.handbook-section-badge {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--primary-hover);
  background: var(--handbook-accent-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 0;
}

.handbook-section-badge svg,
.handbook-section-badge i {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

.handbook-section-index {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.handbook-section-head h3 {
  margin: 0;
  font-family: Outfit, DM Sans, sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.handbook-open-page {
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 8px;
}

.handbook-open-page svg {
  width: 14px;
  height: 14px;
}

.handbook-blocks {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 18px 18px;
}

.handbook-block {
  padding: 16px 0;
}

.handbook-block + .handbook-block {
  border-top: 1px dashed var(--line-strong);
}

.handbook-block-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.handbook-block-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-hover);
  background: var(--handbook-accent-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
}

.handbook-block h4 {
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.handbook-intro {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}

.handbook-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  counter-reset: handbook-step;
}

.handbook-steps li {
  counter-increment: handbook-step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  line-height: 1.5;
}

.handbook-step-marker {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

.handbook-step-marker::before {
  content: counter(handbook-step);
}

.handbook-step-text {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
}

.handbook-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  font-size: 13px;
  line-height: 1.5;
}

.handbook-tip-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--line));
  overflow: hidden;
  line-height: 0;
}

.handbook-tip-icon svg,
.handbook-tip-icon i {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

.handbook-tip p { margin: 0; color: var(--text-2); }
.handbook-tip strong {
  display: inline-block;
  margin-right: 6px;
  color: var(--text);
}

.handbook-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  text-align: center;
  color: var(--text-2);
}

.handbook-empty:not([hidden]) { display: flex; }

.handbook-empty svg {
  width: 28px;
  height: 28px;
  color: var(--muted);
}

.handbook-empty strong {
  color: var(--text);
  font-size: 1rem;
}

.handbook-empty span {
  max-width: 36ch;
  font-size: 13px;
  line-height: 1.5;
}

.handbook-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.handbook-top:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: color-mix(in srgb, var(--surface) 80%, var(--primary) 20%);
}

.handbook-top svg { width: 18px; height: 18px; }

@media (max-width: 960px) {
  .handbook-layout {
    grid-template-columns: 1fr;
  }

  .handbook-toc {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .handbook-toc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
  }

  .handbook-toc-list a.is-active {
    box-shadow: none;
  }

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

@media (max-width: 720px) {
  .handbook-hero-main {
    flex-direction: column;
  }

  .handbook-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .handbook-open-page {
    width: 100%;
    justify-content: center;
  }

  .handbook-top {
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 480px) {
  .handbook-hero-intro {
    padding: 16px;
  }

  .handbook-hero-stats {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .handbook-stat strong {
    white-space: normal;
  }

  .handbook-search {
    max-width: none;
  }

  .handbook-blocks {
    padding-left: 14px;
    padding-right: 14px;
  }

  .handbook-section-head {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ── Shared professional page polish ── */
.workspace-page,
.dashboard-page,
.reports-page,
.handbook-page,
.leads-page,
.projects-page,
.customers-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.installers-page.list-page {
  gap: 14px;
}

.page-intro h2,
.tasks-intro h2,
.notifications-intro h2,
.customer-docs-intro h2,
.logs-intro h2,
.to-files-intro h2,
.integrations-intro-copy h2 {
  margin: 0 0 6px;
  font-family: Outfit, DM Sans, sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}

.page-intro p,
.tasks-intro p,
.notifications-intro p,
.customer-docs-intro p,
.logs-intro p,
.to-files-intro p,
.integrations-intro-copy p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 70ch;
}

.page-toolbar,
.leads-toolbar,
.projects-toolbar,
.customers-toolbar,
.installers-toolbar {
  border-radius: 12px;
}

.customers-filters-bar,
.leads-filters-bar,
.projects-filters-bar,
.installers-filters-bar {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--elevated-shadow);
}

.table-panel {
  overflow: hidden;
  border-radius: 12px;
}

.table-panel .dataTables_wrapper,
.table-panel .dt-container {
  padding: 4px 6px 8px;
}

.dashboard-page .dashboard-layout {
  align-items: start;
}

.dashboard-main,
.right-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.dashboard-section-head {
  display: grid;
  gap: 2px;
  padding: 0 2px;
}

.dashboard-section-head h2 {
  margin: 0;
  font-family: Outfit, DM Sans, sans-serif;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.dashboard-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-section-head-rail {
  padding-top: 2px;
}

.chart-panel {
  min-height: 0;
}

.chart-panel h2,
.dashboard-feed-panel h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-feed-panel {
  min-height: 0;
}

.workspace-page .page-surface {
  min-height: 0;
}

.tasks-kpi-strip,
.notifications-kpi-strip,
.logs-kpi-strip {
  gap: 10px;
}

.tasks-kpi,
.notifications-kpi,
.logs-kpi {
  border-radius: 12px;
}

.settings-nav h2 {
  font-family: Outfit, DM Sans, sans-serif;
  letter-spacing: -0.015em;
}

.integrations-grid {
  gap: 14px;
}

body[data-page="handbook"] .content-header-compact,
body[data-page="tasks"] .content-header-compact,
body[data-page="notifications"] .content-header-compact,
body[data-page="documents"] .content-header-compact,
body[data-page="logs"] .content-header-compact,
body[data-page="to-files"] .content-header-compact,
body[data-page="integrations"] .content-header-compact {
  opacity: 0.92;
}

@media (max-width: 1100px) {
  .report-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .content-header-blurb {
    font-size: 13px;
  }

  .reports-intro {
    flex-direction: column;
  }

  .report-links {
    grid-template-columns: 1fr;
  }

  .dashboard-section-head {
    margin-bottom: 2px;
  }
}

/* ── Support tickets ── */
.tickets-page { display: grid; gap: 14px; }

.tickets-toolbar { display: grid; gap: 14px; padding: 16px 18px; }

.tickets-toolbar-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.tickets-toolbar-actions { display: flex; gap: 8px; flex-shrink: 0; }

.tickets-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.tickets-kpi {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface-2, var(--field-bg));
}

.tickets-kpi span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.tickets-kpi strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.tickets-kpi-ok strong { color: #15803d; }

.tickets-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.tickets-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  background: var(--field-bg);
}

.tickets-search input {
  border: 0;
  background: transparent;
  width: 100%;
  min-height: 40px;
  color: var(--text);
}

.tickets-filter-field { display: grid; gap: 4px; }

.tickets-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.tickets-filter-select { min-width: 170px; }

.tickets-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: min(70vh, 720px);
}

.tickets-list-panel,
.tickets-detail {
  display: flex;
  flex-direction: column;
  min-height: min(70vh, 720px);
  overflow: hidden;
  padding: 0;
}

.tickets-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.tickets-list-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.tickets-list-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-2, var(--field-bg));
  color: var(--muted);
  border: 1px solid var(--line);
}

.tickets-list {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  overflow: auto;
  flex: 1;
}

.tickets-list-loading { margin: 12px; }

.ticket-row {
  display: grid;
  gap: 7px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  padding: 12px 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.ticket-row:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.ticket-row.is-active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  box-shadow: inset 3px 0 0 var(--primary-fill, var(--primary));
}

.ticket-row-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.ticket-row-id {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
}

.ticket-row-subject {
  font-weight: 650;
  color: var(--text);
  line-height: 1.35;
  font-size: 14px;
}

.ticket-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
}

.ticket-row-company {
  font-weight: 600;
  color: var(--text-2);
}

.ticket-status,
.ticket-priority {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--surface-2, #f1f5f9);
  color: var(--text-2);
}

.ticket-status--open { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ticket-status--in-progress { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.ticket-status--waiting-on-customer { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.ticket-status--resolved,
.ticket-status--closed { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

.ticket-priority--low { color: #64748b; }
.ticket-priority--medium { color: #4338ca; background: #eef2ff; border-color: #c7d2fe; }
.ticket-priority--high { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
.ticket-priority--urgent { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.tickets-detail-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  flex: 1;
  text-align: center;
  color: var(--muted);
  padding: 32px 24px;
}

.tickets-detail-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  margin-bottom: 4px;
}

.tickets-detail-empty h3 { margin: 0; color: var(--text); font-size: 16px; }
.tickets-detail-empty p { margin: 0; max-width: 300px; line-height: 1.45; }

.tickets-detail-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ticket-detail-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ticket-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.ticket-detail-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.ticket-detail-number {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ticket-detail-company {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.ticket-detail-head h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
}

.ticket-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.ticket-status-editor {
  display: grid;
  gap: 5px;
  min-width: 168px;
  flex: 0 0 auto;
}

.ticket-status-editor span,
.ticket-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ticket-status-editor select,
.ticket-field select,
.ticket-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  background: var(--field-bg);
  color: var(--text);
  min-height: 40px;
}

.ticket-status-editor select:focus,
.ticket-field select:focus,
.ticket-field textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.ticket-thread {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px 18px;
  overflow: auto;
  flex: 1;
  min-height: 180px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2, #f8fafc) 55%, transparent), transparent 28px),
    var(--surface);
}

.ticket-thread-empty { margin: 8px 0; }

.ticket-message {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.ticket-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--primary-fill, #4f46e5);
}

.ticket-message.is-staff .ticket-message-avatar {
  background: #0f172a;
}

.ticket-message-main {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.ticket-message.is-staff .ticket-message-main {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.ticket-message header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}

.ticket-message header strong { color: var(--text); font-size: 13px; }
.ticket-message header em {
  font-style: normal;
  font-weight: 700;
  color: var(--primary-hover, var(--primary));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ticket-message p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--text);
  font-size: 14px;
}

.ticket-reply-form {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2, #f8fafc) 70%, var(--surface));
}

.ticket-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ticket-field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.ticket-reply-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  justify-content: space-between;
}

.ticket-field--status {
  flex: 1 1 200px;
  max-width: 280px;
}

.tickets-empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--muted);
}

.tickets-empty h3 { margin: 0 0 6px; color: var(--text); }

.ticket-alert-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
}

.ticket-alert {
  width: min(480px, 100%);
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.ticket-alert-bar {
  height: 4px;
  background: var(--primary-fill, #4f46e5);
  transform-origin: left center;
  animation: ticket-alert-progress var(--ticket-alert-ms, 10s) linear forwards;
}

@keyframes ticket-alert-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.ticket-alert-body { padding: 18px 18px 16px; display: grid; gap: 10px; }
.ticket-alert-body h2 { margin: 0; font-size: 18px; }
.ticket-alert-body p { margin: 0; color: var(--text-2); line-height: 1.45; }

.ticket-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ticket-alert-list li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2, var(--field-bg));
}

.ticket-alert-list strong { font-size: 13px; color: var(--text); }
.ticket-alert-list span { font-size: 12px; color: var(--muted); }

.ticket-alert-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 18px 16px;
}

@media (max-width: 960px) {
  .tickets-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .tickets-list-panel,
  .tickets-detail {
    min-height: 0;
  }

  .tickets-list-panel { max-height: 360px; }
  .tickets-detail { min-height: 480px; }
  .tickets-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .tickets-toolbar-top { flex-direction: column; }
  .ticket-detail-head { flex-direction: column; }
  .ticket-reply-footer { flex-direction: column; align-items: stretch; }
  .ticket-field--status { max-width: none; }
  .ticket-reply-footer .primary-button { width: 100%; justify-content: center; }
}