/*
 * PTW Portal enterprise visual system
 * Presentation only: no workflow, permission, storage, or data behavior lives here.
 */

:root {
  color-scheme: light dark;
  --ui-font: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ui-canvas: #f4f7fb;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  --ui-surface-subtle: #f7f9fc;
  --ui-surface-muted: #eef3f7;
  --ui-text: #15212e;
  --ui-text-soft: #46576a;
  --ui-text-muted: #6d7b8b;
  --ui-line: #dce4ed;
  --ui-line-strong: #c9d4df;
  --ui-primary: var(--ui-accent);
  --ui-primary-hover: var(--ui-accent-hover);
  --ui-primary-soft: var(--ui-accent-soft);
  --ui-accent: #0f8a86;
  --ui-accent-hover: #0a706d;
  --ui-accent-soft: #e5f7f5;
  --ui-success: #278354;
  --ui-success-soft: #e8f6ee;
  --ui-warning: #a96f08;
  --ui-warning-soft: #fff5d9;
  --ui-danger: #c43f4a;
  --ui-danger-hover: #a92f39;
  --ui-danger-soft: #fdecef;
  --ui-info: #1677c8;
  --ui-info-soft: #e8f4ff;
  --ui-focus: var(--ui-accent);
  --ui-shadow-sm: 0 1px 2px rgb(15 31 46 / 5%), 0 3px 10px rgb(15 31 46 / 4%);
  --ui-shadow-md: 0 8px 24px rgb(15 31 46 / 8%), 0 2px 6px rgb(15 31 46 / 5%);
  --ui-shadow-lg: 0 24px 64px rgb(15 31 46 / 16%), 0 8px 20px rgb(15 31 46 / 8%);
  --ui-radius-lg: 20px;
  --ui-radius-xl: 28px;
  --ui-header-height: 72px;
  --ui-sidebar-width: 264px;
  --ui-transition: 180ms cubic-bezier(.2, .8, .2, 1);
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-control-height: 44px;
  --ui-card-padding: 16px;

  /* Bridge existing variables without touching application behavior. */
  --ink: var(--ui-text);
  --muted: var(--ui-text-muted);
  --line: var(--ui-line);
  --soft: var(--ui-canvas);
  --panel: var(--ui-surface);
  --primary: var(--ui-accent);
  --primary-strong: var(--ui-accent-hover);
  --warning: var(--ui-warning);
  --danger: var(--ui-danger);
  --approved: var(--ui-success);
  --shadow: var(--ui-shadow-sm);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ui-canvas);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ui-text);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 68%) 0, transparent 260px),
    var(--ui-canvas);
  font-family: var(--ui-font);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

:where(button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 28%, transparent);
  outline-offset: 2px;
}

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

/* Application shell */
.app-layout {
  min-height: 100vh;
  background: var(--ui-canvas);
}

.app-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(240px, auto) minmax(240px, 680px) minmax(0, auto);
  align-items: center;
  gap: var(--ui-space-5);
  width: 100%;
  min-height: var(--ui-header-height);
  padding: var(--ui-space-3) var(--ui-space-5);
  background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
  border-bottom: 1px solid var(--ui-line);
  box-shadow: 0 1px 0 rgb(255 255 255 / 60%);
  backdrop-filter: blur(18px) saturate(150%);
}

/* Admin shells reserve space with a left margin for the fixed sidebar. */
.admin-portal-shell .app-header {
  width: auto;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-width: 0;
}

.brand-lockup > div:last-child {
  min-width: 0;
}

.brand-lockup .eyebrow {
  margin: 0 0 1px;
  color: var(--ui-accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.brand-lockup h1 {
  margin: 0;
  color: var(--ui-text);
  font-size: 19px;
  font-weight: 750;
  line-height: 1.25;
}

.menu-button,
.icon-button,
.header-notification,
.global-search-toggle,
.global-search-clear,
.password-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  color: var(--ui-text-soft);
  background: transparent;
  border: 0;
  border-radius: 50%;
  transition: color var(--ui-transition), background var(--ui-transition), transform var(--ui-transition);
}

:where(.menu-button, .icon-button, .header-notification, .global-search-toggle, .global-search-clear, .password-toggle):hover {
  color: var(--ui-text);
  background: var(--ui-surface-muted);
}

:where(.menu-button, .icon-button, .header-notification, .global-search-toggle, .global-search-clear, .password-toggle):active {
  transform: scale(.94);
}

.ui-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.global-search-shell {
  position: relative;
  justify-self: center;
  width: min(100%, 680px);
}

.global-search-field {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-height: 46px;
  padding: 0 10px 0 16px;
  color: var(--ui-text-muted);
  background: var(--ui-surface-subtle);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  transition: background var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition);
}

.global-search-field:focus-within {
  background: var(--ui-surface);
  border-color: color-mix(in srgb, var(--ui-primary) 62%, var(--ui-line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 11%, transparent), var(--ui-shadow-sm);
}

.global-search-field input {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.global-search-field input:focus {
  outline: 0;
  box-shadow: none;
}

.global-search-results {
  position: absolute;
  inset: calc(100% + 10px) 0 auto;
  max-height: min(520px, 70vh);
  padding: var(--ui-space-2);
  overflow: auto;
  background: var(--ui-surface-raised);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  box-shadow: var(--ui-shadow-lg);
}

.global-search-result {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ui-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--ui-space-2) var(--ui-space-3);
  color: var(--ui-text);
  background: transparent;
  border: 0;
  border-radius: 12px;
  text-align: left;
}

.global-search-result:hover {
  background: var(--ui-primary-soft);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  min-width: 0;
}

.header-help,
.header-control {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: 44px;
  padding: var(--ui-space-2) var(--ui-space-3);
  color: var(--ui-text-soft);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(15 31 46 / 3%);
}

button.header-help,
button.header-control {
  cursor: pointer;
  transition: border-color var(--ui-transition), background var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}

button.header-help:hover,
button.header-control:hover {
  background: var(--ui-surface-subtle);
  border-color: var(--ui-line-strong);
  box-shadow: var(--ui-shadow-sm);
}

.company-logo-compact,
.avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: hidden;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border: 1px solid color-mix(in srgb, var(--ui-accent) 18%, var(--ui-line));
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
}

.company-logo-compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-identity {
  display: grid;
  min-width: 0;
  text-align: left;
}

.user-identity > span:first-child {
  overflow: hidden;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-level {
  color: var(--ui-text-muted);
  font-size: 11px;
}

.user-chevron {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: transform var(--ui-transition);
}

.user-control[aria-expanded="true"] .user-chevron {
  transform: rotate(-90deg);
}

.header-user-menu {
  position: fixed;
  inset: calc(var(--ui-header-height) - 2px) 20px auto auto;
  z-index: 100;
  width: min(310px, calc(100vw - 32px));
  padding: var(--ui-space-2);
  background: color-mix(in srgb, var(--ui-surface-raised) 96%, transparent);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  box-shadow: var(--ui-shadow-lg);
  backdrop-filter: blur(18px);
  transform-origin: top right;
  animation: ui-pop-in 160ms ease-out both;
}

.header-user-summary {
  display: grid;
  gap: var(--ui-space-1);
  padding: var(--ui-space-3);
}

.header-user-summary strong {
  font-size: 15px;
}

.header-user-summary span {
  color: var(--ui-text-muted);
  font-size: 12px;
}

.header-user-menu button {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--ui-space-2) var(--ui-space-3);
  color: var(--ui-text-soft);
  background: transparent;
  border: 0;
  border-radius: 11px;
  text-align: left;
}

.header-user-menu button:hover {
  color: var(--ui-text);
  background: var(--ui-surface-muted);
}

.header-menu-divider {
  height: 1px;
  margin: var(--ui-space-1) var(--ui-space-2);
  background: var(--ui-line);
}

.app-shell,
.admin-portal-shell .app-shell {
  display: grid;
  grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
  min-height: calc(100vh - var(--ui-header-height));
  margin: 0;
}

.sidebar,
.admin-portal-shell .sidebar {
  position: sticky;
  inset-block-start: var(--ui-header-height);
  align-self: start;
  width: auto;
  height: calc(100vh - var(--ui-header-height));
  padding: var(--ui-space-4) var(--ui-space-3) var(--ui-space-5);
  overflow-y: auto;
  color: var(--ui-text-soft);
  background: color-mix(in srgb, var(--ui-surface) 92%, var(--ui-canvas));
  border-right: 1px solid var(--ui-line);
  box-shadow: none;
  transform: none;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-line-strong) transparent;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-height: 42px;
  margin: 0 var(--ui-space-2) var(--ui-space-4);
  padding: var(--ui-space-2);
  color: var(--ui-text-muted);
  border-bottom: 1px solid var(--ui-line);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sidebar-logo {
  width: 20px;
  height: 20px;
  color: var(--ui-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.nav-button,
.admin-portal-shell .nav-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  width: 100%;
  min-height: 48px;
  margin: 0 0 var(--ui-space-1);
  padding: var(--ui-space-3);
  color: var(--ui-text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: color var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition), transform var(--ui-transition);
}

.nav-button:hover,
.admin-portal-shell .nav-button:hover {
  color: var(--ui-text);
  background: var(--ui-surface-muted);
}

.nav-button.active,
.admin-portal-shell .nav-button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 72%, var(--ui-primary)));
  border-color: transparent;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--ui-accent) 22%, transparent);
}

.nav-button:active {
  transform: scale(.985);
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: currentColor;
  font-size: 17px;
}

.content,
.admin-portal-shell .content {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: var(--ui-space-5) clamp(var(--ui-space-4), 3vw, var(--ui-space-6)) 48px;
  background: transparent;
}

.view.active {
  display: block;
  animation: ui-page-in 220ms ease-out both;
}

.section-head,
.admin-page-header,
.page-header-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-4);
  margin: 0 0 var(--ui-space-5);
}

.section-head h2,
.admin-page-header h2 {
  margin: 3px 0 0;
  color: var(--ui-text);
  font-size: clamp(25px, 2.3vw, 34px);
  font-weight: 760;
  line-height: 1.2;
}

.admin-page-header p:not(.eyebrow),
.section-subtitle {
  max-width: 760px;
  margin: var(--ui-space-2) 0 0;
  color: var(--ui-text-muted);
  font-size: 14px;
}

.eyebrow {
  margin: 0;
  color: var(--ui-accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Buttons */
button,
.button,
input[type="submit"] {
  min-height: var(--ui-control-height);
  padding: 10px var(--ui-space-4);
  color: #fff;
  background: var(--ui-accent);
  border: 1px solid var(--ui-accent);
  border-radius: 12px;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--ui-accent) 14%, transparent);
  font-weight: 700;
  cursor: pointer;
  transition: color var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition), opacity var(--ui-transition);
}

button:hover,
.button:hover,
input[type="submit"]:hover {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--ui-accent) 20%, transparent);
  transform: translateY(-1px);
}

button:active,
.button:active,
input[type="submit"]:active {
  box-shadow: none;
  transform: translateY(0) scale(.98);
}

button:disabled,
.button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: .56;
  box-shadow: none;
  transform: none;
}

.secondary-button,
.ghost-button,
.text-button,
.dashboard-link,
.table-action,
.compact-button {
  color: var(--ui-accent);
  background: var(--ui-surface);
  border-color: var(--ui-line-strong);
  box-shadow: none;
}

:where(.secondary-button, .ghost-button, .text-button, .dashboard-link, .table-action, .compact-button):hover {
  color: var(--ui-accent-hover);
  background: var(--ui-accent-soft);
  border-color: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-line));
  box-shadow: none;
}

.text-button,
.dashboard-link {
  min-height: 36px;
  padding: 7px 10px;
  border-color: transparent;
}

.danger-button,
button.danger,
.icon-action.danger {
  color: #fff;
  background: var(--ui-danger);
  border-color: var(--ui-danger);
}

:where(.danger-button, button.danger, .icon-action.danger):hover {
  background: var(--ui-danger-hover);
  border-color: var(--ui-danger-hover);
}

.icon-action {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  color: var(--ui-text-soft);
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-radius: 11px;
  box-shadow: none;
}

.icon-action:hover {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: color-mix(in srgb, var(--ui-accent) 32%, var(--ui-line));
  box-shadow: none;
}

/* Dashboard */
.dashboard-layout {
  display: grid;
  gap: var(--ui-space-5);
}

.dashboard-status-grid,
.dashboard-grid,
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--ui-space-4);
  width: 100%;
}

.kpi-group {
  display: grid;
  gap: var(--ui-space-3);
  margin: 0 0 var(--ui-space-5);
}

.kpi-group h3 {
  margin: 0;
  color: var(--ui-text-soft);
  font-size: 13px;
  font-weight: 750;
}

.dashboard-card,
.admin-portal-shell .dashboard-card,
#adminView .dashboard-card,
#clientadminView .dashboard-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  width: 100%;
  min-width: 0;
  min-height: 104px;
  padding: var(--ui-card-padding);
  overflow: hidden;
  color: var(--ui-text);
  background: linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface-subtle));
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  box-shadow: var(--ui-shadow-sm);
  text-align: left;
  isolation: isolate;
}

button.dashboard-card:hover,
.admin-portal-shell button.dashboard-card:hover {
  background: var(--ui-surface-raised);
  border-color: color-mix(in srgb, var(--card-tone, var(--ui-accent)) 34%, var(--ui-line));
  box-shadow: var(--ui-shadow-md);
  transform: translateY(-2px);
}

.dashboard-card::after {
  position: absolute;
  inset: auto -26px -36px auto;
  z-index: -1;
  width: 96px;
  height: 96px;
  background: color-mix(in srgb, var(--card-tone, var(--ui-accent)) 7%, transparent);
  border-radius: 50%;
  content: "";
}

.dashboard-card .kpi-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  color: var(--card-tone, var(--ui-accent));
  background: color-mix(in srgb, var(--card-tone, var(--ui-accent)) 10%, var(--ui-surface));
  border: 1px solid color-mix(in srgb, var(--card-tone, var(--ui-accent)) 24%, var(--ui-line));
  border-radius: 14px;
}

.dashboard-card .kpi-icon .ui-icon {
  width: 23px;
  height: 23px;
}

.dashboard-card .kpi-content {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dashboard-card .kpi-content > span,
.dashboard-card > span:not(.kpi-icon, .kpi-content) {
  overflow-wrap: anywhere;
  color: var(--ui-text-soft);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.dashboard-card strong {
  color: var(--ui-text);
  font-size: 30px;
  font-weight: 780;
  line-height: 1;
}

.dashboard-card.status-manager_review,
.dashboard-card.status-submitted,
.dashboard-card.status-expiring { --card-tone: var(--ui-warning); }
.dashboard-card.status-client_review { --card-tone: var(--ui-info); }
.dashboard-card.status-approved,
.dashboard-card.status-active { --card-tone: var(--ui-success); }
.dashboard-card.status-rejected,
.dashboard-card.status-cancelled,
.dashboard-card.status-expired { --card-tone: var(--ui-danger); }
.dashboard-card.status-subscription { --card-tone: var(--ui-accent); }

.dashboard-panel,
.permit-board-list,
.settings-card,
.company-settings-card,
.subscription-activation-card,
.license-card,
.quick-actions {
  min-width: 0;
  overflow: hidden;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  box-shadow: var(--ui-shadow-sm);
}

.dashboard-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  min-height: 56px;
  padding: var(--ui-space-3) var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
}

.dashboard-panel-head h3,
.quick-actions h3 {
  margin: 0;
  color: var(--ui-text);
  font-size: 16px;
  font-weight: 740;
}

.dashboard-main-column,
.dashboard-side-column {
  display: grid;
  align-content: start;
  gap: var(--ui-space-4);
  min-width: 0;
}

.holder-dashboard-grid,
.client-admin-dashboard-columns,
.platform-admin-dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, .8fr);
  gap: var(--ui-space-4);
  align-items: start;
}

.platform-admin-dashboard-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-actions {
  padding: var(--ui-card-padding);
  margin-bottom: var(--ui-space-5);
}

.quick-actions .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
}

.dashboard-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  width: 100%;
  min-height: 56px;
  padding: var(--ui-space-3) var(--ui-space-4);
  color: var(--ui-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

button.dashboard-list-row:hover {
  background: var(--ui-surface-subtle);
  box-shadow: none;
  transform: none;
}

.dashboard-list-row small {
  display: block;
  margin-top: 3px;
  color: var(--ui-text-muted);
}

.dashboard-error,
.dashboard-empty,
.empty,
.detail-empty,
.loading-state,
.view-state,
.archive-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 120px;
  padding: var(--ui-space-5);
  color: var(--ui-text-muted);
  background: var(--ui-surface-subtle);
  border: 1px dashed var(--ui-line-strong);
  border-radius: 16px;
  text-align: center;
}

.dashboard-skeleton,
.dashboard-loading-panel {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  background: var(--ui-surface-muted);
  border-radius: 18px;
}

.dashboard-skeleton::after,
.dashboard-loading-panel::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 55%), transparent);
  content: "";
  transform: translateX(-100%);
  animation: ui-shimmer 1.45s infinite;
}

/* Tables, filters, and lists */
.responsive-table,
.dashboard-table-wrap,
.admin-data-table {
  width: 100%;
  min-width: 0;
  overflow: auto;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  scrollbar-width: thin;
}

.dashboard-panel > .responsive-table,
.dashboard-panel > .dashboard-table-wrap {
  border: 0;
  border-radius: 0;
}

table,
.dashboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ui-text-soft);
  font-size: 13px;
}

thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  padding: var(--ui-space-3) var(--ui-space-4);
  color: var(--ui-text-muted);
  background: var(--ui-surface-subtle);
  border-bottom: 1px solid var(--ui-line);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}

tbody td {
  padding: var(--ui-space-3) var(--ui-space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--ui-line);
}

tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ui-surface-subtle) 60%, transparent);
}

tbody tr:hover td {
  background: var(--ui-primary-soft);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.filter-bar,
.admin-filter-bar,
.page-filter-bar,
.permit-filter-bar,
.audit-filter-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(auto-fit, minmax(150px, max-content));
  gap: var(--ui-space-3);
  align-items: end;
  padding: var(--ui-space-4);
  margin-bottom: var(--ui-space-5);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: var(--ui-shadow-sm);
}

.pagination,
.audit-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  min-height: 56px;
  padding: var(--ui-space-2) var(--ui-space-4);
  border-top: 1px solid var(--ui-line);
}

/* Forms and wizard */
.permit-form,
.permit-wizard {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.form-grid,
.auth-form-grid,
.settings-form-grid,
.control-action-summary-grid,
.detail-info-grid,
.user-information-grid,
.account-facts,
.session-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-4);
}

label {
  display: grid;
  gap: var(--ui-space-2);
  color: var(--ui-text-soft);
  font-size: 13px;
  font-weight: 650;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px var(--ui-space-3);
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line-strong);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(15 31 46 / 2%);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition);
}

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

:where(input, select, textarea):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ui-text-muted) 45%, var(--ui-line));
}

:where(input, select, textarea):focus {
  outline: 0;
  background: var(--ui-surface);
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 11%, transparent);
}

input[readonly],
textarea[readonly] {
  color: var(--ui-text-soft);
  background: var(--ui-surface-muted);
}

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  accent-color: var(--ui-accent);
  box-shadow: none;
}

input[type="file"] {
  min-height: 52px;
  padding: var(--ui-space-2);
  background: var(--ui-surface-subtle);
}

input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: var(--ui-space-3);
  padding: var(--ui-space-2) var(--ui-space-3);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border: 0;
  border-radius: 9px;
  font-weight: 700;
}

.field-help,
.auth-help,
.filter-help,
.permit-meta {
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.5;
}

.auth-error,
.auth-message,
.settings-message,
.wizard-missing,
.detail-alert,
.overdue-closure-warning,
.correction-required {
  padding: var(--ui-space-3);
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
  border: 1px solid color-mix(in srgb, var(--ui-danger) 20%, var(--ui-line));
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.45;
}

/* Keep validation styling visible only when there is an actual message. */
:is(.auth-error, .auth-message, .settings-message, .wizard-missing, .detail-alert, .overdue-closure-warning, .correction-required):empty {
  display: none !important;
}

.permit-wizard-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
  margin-bottom: var(--ui-space-5);
  overflow-x: auto;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  box-shadow: var(--ui-shadow-sm);
}

.wizard-step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ui-space-2);
  min-width: 150px;
  min-height: 52px;
  padding: var(--ui-space-2) var(--ui-space-3);
  color: var(--ui-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  font-size: 12px;
  text-align: left;
}

.wizard-step:hover {
  color: var(--ui-text);
  background: var(--ui-surface-muted);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.wizard-step > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--ui-text-muted);
  background: var(--ui-surface-muted);
  border-radius: 50%;
  font-weight: 800;
}

.wizard-step.is-current {
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
  border-color: color-mix(in srgb, var(--ui-primary) 18%, var(--ui-line));
}

.wizard-step.is-current > span {
  color: #fff;
  background: var(--ui-primary);
}

.wizard-panel {
  padding: clamp(var(--ui-space-4), 3vw, var(--ui-space-5));
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  box-shadow: var(--ui-shadow-sm);
  animation: ui-page-in 180ms ease-out both;
}

.wizard-panel-head {
  margin-bottom: var(--ui-space-5);
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
}

.wizard-panel-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.25;
}

.wizard-actions {
  position: sticky;
  inset-block-end: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-3);
  margin-top: var(--ui-space-4);
  background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: var(--ui-shadow-md);
  backdrop-filter: blur(14px);
}

.checklist-block,
.requirements,
.permit-review-summary,
.routing-summary,
.selected-attachment-list,
.declaration-check,
.closure-declarations {
  padding: var(--ui-space-4);
  background: var(--ui-surface-subtle);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
}

.check-item,
.check-line,
.declaration-check,
.closure-declaration-row,
.precaution-choice {
  min-height: 44px;
}

.actions,
.card-actions,
.row-actions,
.settings-card-actions,
.session-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
}

/* Permit cards and details */
.permit-list {
  display: grid;
  gap: var(--ui-space-4);
}

.permit-card,
#adminView .permit-card,
#clientadminView .permit-card {
  position: relative;
  overflow: hidden;
  color: var(--ui-text-soft);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  box-shadow: var(--ui-shadow-sm);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}

.permit-card:hover {
  border-color: var(--ui-line-strong);
  box-shadow: var(--ui-shadow-md);
}

.permit-card-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ui-space-4);
  align-items: center;
  min-height: 96px;
  padding: var(--ui-card-padding);
  background: linear-gradient(145deg, var(--ui-surface), var(--ui-surface-subtle));
}

.permit-card-summary-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.permit-card-summary-main strong,
.permit-detail-title h2 {
  color: var(--ui-text);
  font-size: 20px;
  font-weight: 780;
  line-height: 1.25;
}

.permit-card-summary-meta,
.permit-header-badges,
.permit-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-2);
}

.permit-detail-layout {
  display: grid;
  gap: var(--ui-space-4);
  padding: 0 var(--ui-space-4) var(--ui-space-4);
}

.permit-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ui-space-4);
  align-items: start;
  padding: var(--ui-card-padding);
  background: var(--ui-surface-subtle);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
}

.detail-section,
.safety-summary,
.detail-timeline,
.comment-list,
.attachment-list,
.handover-list,
.legal-evidence-list {
  min-width: 0;
  overflow: hidden;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 15px;
}

.detail-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  min-height: 56px;
  padding: var(--ui-space-3) var(--ui-space-4);
  color: var(--ui-text);
  background: var(--ui-surface-subtle);
  border-bottom: 1px solid var(--ui-line);
  font-size: 14px;
  font-weight: 750;
}

.detail-section-content {
  padding: var(--ui-card-padding);
}

.detail-info-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.permit-detail-row,
.safety-row,
.attachment-record,
.handover-record {
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-line);
}

.permit-action-bar {
  position: sticky;
  inset-block-end: 10px;
  z-index: 16;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  background: color-mix(in srgb, var(--ui-surface-raised) 92%, transparent);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: var(--ui-shadow-md);
  backdrop-filter: blur(14px);
}

/* Status system */
.status-badge,
.soft-status,
.tag,
.detail-chip,
.one-time-job-tag,
.audit-result-badge,
.notification-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 9px;
  color: var(--ui-text-soft);
  background: var(--ui-surface-muted);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

:where(.status-badge, .soft-status).status-draft { color: #52616f; background: #edf1f4; }
:where(.status-badge, .soft-status).status-submitted,
:where(.status-badge, .soft-status).status-manager_review,
:where(.status-badge, .soft-status).status-under_review { color: #825805; background: var(--ui-warning-soft); }
:where(.status-badge, .soft-status).status-client_review,
:where(.status-badge, .soft-status).status-waiting_client,
:where(.status-badge, .soft-status).status-client_approved { color: #0b66a6; background: var(--ui-info-soft); }
:where(.status-badge, .soft-status).status-approved,
:where(.status-badge, .soft-status).status-active,
:where(.status-badge, .soft-status).status-closed { color: #17653f; background: var(--ui-success-soft); }
:where(.status-badge, .soft-status).status-suspended,
:where(.status-badge, .soft-status).status-sent_back,
:where(.status-badge, .soft-status).status-changes_requested { color: #8a5900; background: var(--ui-warning-soft); }
:where(.status-badge, .soft-status).status-rejected,
:where(.status-badge, .soft-status).status-cancelled,
:where(.status-badge, .soft-status).status-expired { color: #a5303c; background: var(--ui-danger-soft); }
:where(.status-badge, .soft-status).status-superseded { color: #65567b; background: #f0ecf7; }

/* Timeline and history */
.timeline-permit-group {
  overflow: hidden;
  border-bottom: 1px solid var(--ui-line);
}

.timeline-permit-toggle,
.timeline-permit-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ui-space-3);
  width: 100%;
  min-height: 64px;
  padding: var(--ui-space-3) var(--ui-space-4);
  color: var(--ui-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.timeline-permit-toggle:hover {
  background: var(--ui-surface-subtle);
  box-shadow: none;
  transform: none;
}

.dashboard-timeline-events,
.permit-history-list {
  display: grid;
  gap: 0;
  padding: var(--ui-space-1) var(--ui-space-4) var(--ui-space-4);
}

.dashboard-timeline-event,
.audit-event-card {
  position: relative;
  display: grid;
  gap: var(--ui-space-1);
  padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) 40px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
}

.dashboard-timeline-event::before,
.audit-event-card::before {
  position: absolute;
  inset: 18px auto auto 16px;
  width: 11px;
  height: 11px;
  background: var(--ui-accent);
  border: 3px solid var(--ui-accent-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ui-accent);
  content: "";
}

.dashboard-timeline-event:not(:last-child)::after,
.audit-event-card:not(:last-child)::after {
  position: absolute;
  inset: 32px auto -8px 21px;
  width: 1px;
  background: var(--ui-line-strong);
  content: "";
}

.dashboard-timeline-event-head,
.audit-event-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-4);
}

.dashboard-timeline-event-head time,
.audit-event-heading time {
  color: var(--ui-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

/* Dialogs and notices */
dialog,
.help-center-dialog,
.help-welcome-dialog {
  max-width: min(760px, calc(100vw - 32px));
  max-height: min(90vh, 920px);
  padding: 0;
  overflow: visible;
  color: var(--ui-text);
  background: transparent;
  border: 0;
}

dialog::backdrop,
.help-center-dialog::backdrop,
.help-welcome-dialog::backdrop {
  background: rgb(10 18 28 / 50%);
  backdrop-filter: blur(7px);
  animation: ui-fade-in 160ms ease-out both;
}

dialog[open] .dialog-card {
  animation: ui-dialog-in 200ms cubic-bezier(.2, .85, .25, 1) both;
}

.dialog-card,
.compact-dialog,
.create-user-dialog,
.company-delete-dialog,
.permit-history-dialog,
.control-action-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: clamp(var(--ui-space-4), 3vw, var(--ui-space-5));
  overflow: auto;
  color: var(--ui-text);
  background: var(--ui-surface-raised);
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  box-shadow: var(--ui-shadow-lg);
}

.compact-dialog {
  width: min(520px, calc(100vw - 32px));
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding-bottom: var(--ui-space-4);
  margin-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
}

.dialog-head h2 {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 1.2;
}

.app-notice {
  position: fixed;
  inset: auto 24px 24px auto;
  z-index: 180;
  max-width: min(440px, calc(100vw - 32px));
  padding: var(--ui-space-3) var(--ui-space-4);
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-surface-raised) 94%, transparent);
  border: 1px solid var(--ui-line);
  border-left: 4px solid var(--ui-accent);
  border-radius: 14px;
  box-shadow: var(--ui-shadow-lg);
  backdrop-filter: blur(14px);
  animation: ui-toast-in 220ms ease-out both;
}

.app-notice.error,
.app-notice.is-error {
  border-left-color: var(--ui-danger);
}

/* Settings and company surfaces */
.account-settings-grid,
.settings-grid,
.company-settings-stack,
.license-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--ui-space-4);
}

.settings-card,
.company-settings-card,
.subscription-activation-card,
.license-card {
  padding: var(--ui-card-padding);
}

.settings-card-head,
.subscription-activation-head,
.license-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-4);
}

.settings-card-icon,
.settings-option-icon,
.notification-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 13px;
}

.license-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--ui-space-2);
  margin: var(--ui-space-4) 0;
}

.license-metrics > span,
.account-facts > div,
.session-facts > div,
.control-action-summary-grid > div,
.detail-info-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  background: var(--ui-surface-subtle);
  border: 1px solid var(--ui-line);
  border-radius: 12px;
}

.license-metrics small,
.account-facts small,
.session-facts small {
  color: var(--ui-text-muted);
}

/* Authentication */
.auth-screen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--ui-space-6) var(--ui-space-4);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--ui-primary) 10%, transparent), transparent 30%),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--ui-accent) 11%, transparent), transparent 34%),
    var(--ui-canvas);
}

.auth-screen::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgb(45 72 92 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(45 72 92 / 3%) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
  content: "";
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(500px, 100%);
  padding: clamp(var(--ui-space-5), 5vw, var(--ui-space-6));
  background: color-mix(in srgb, var(--ui-surface-raised) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-line) 80%, transparent);
  border-radius: 28px;
  box-shadow: 0 26px 80px rgb(32 58 77 / 14%), 0 2px 8px rgb(32 58 77 / 6%);
  backdrop-filter: blur(20px);
}

.auth-brand {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-3);
  text-align: center;
}

.auth-brand-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #fff;
  background: linear-gradient(145deg, var(--ui-primary), var(--ui-accent));
  border-radius: 16px;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--ui-primary) 24%, transparent);
}

.auth-brand-mark .ui-icon {
  width: 26px;
  height: 26px;
}

.auth-brand h1 {
  margin: 3px 0 0;
  font-size: 24px;
}

.auth-brand p:last-child {
  margin: 2px 0 0;
  color: var(--ui-text-muted);
}

.auth-intro {
  margin: var(--ui-space-5) 0 var(--ui-space-4);
  text-align: center;
}

.auth-intro h2,
.auth-form h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 760;
}

.auth-form,
.auth-method-form {
  display: grid;
  gap: var(--ui-space-4);
}

.auth-input-icon,
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon > .ui-icon,
.password-field > .field-icon {
  position: absolute;
  inset-inline-start: 14px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: var(--ui-text-muted);
}

.auth-input-icon input,
.password-field input {
  padding-inline: 44px;
}

.password-field input {
  padding-inline-end: 52px;
}

.password-field .password-toggle {
  position: absolute;
  inset-inline-end: 4px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  color: var(--ui-text-muted);
  border: 0;
}

.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.auth-text-button,
.auth-mode-link {
  min-height: 32px;
  padding: 6px 4px;
  color: var(--ui-primary);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 13px;
}

:where(.auth-text-button, .auth-mode-link):hover {
  color: var(--ui-primary-hover);
  background: transparent;
  box-shadow: none;
  transform: none;
  text-decoration: underline;
}

.auth-primary-button,
.auth-secondary-button {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
}

.auth-primary-button {
  background: linear-gradient(135deg, var(--ui-primary), color-mix(in srgb, var(--ui-primary) 48%, var(--ui-accent)));
  border-color: transparent;
}

.auth-secondary-button {
  color: var(--ui-text-soft);
  background: var(--ui-surface);
  border-color: var(--ui-line-strong);
  box-shadow: none;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ui-space-3);
  margin: var(--ui-space-4) 0;
  color: var(--ui-text-muted);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  background: var(--ui-line);
  content: "";
}

.auth-account-switch,
.auth-form-note,
.auth-security-note {
  color: var(--ui-text-muted);
  font-size: 12px;
  text-align: center;
}

.auth-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding-top: var(--ui-space-4);
  margin-top: var(--ui-space-4);
  border-top: 1px solid var(--ui-line);
}

.auth-field-group {
  display: grid;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  margin: 0;
  background: var(--ui-surface-subtle);
  border: 1px solid var(--ui-line);
  border-radius: 15px;
}

.auth-field-group legend {
  padding: 0 7px;
  color: var(--ui-text-soft);
  font-size: 12px;
  font-weight: 750;
}

/* Help center */
.help-center-dialog {
  width: min(1100px, calc(100vw - 32px));
}

.help-center-shell {
  overflow: hidden;
  background: var(--ui-surface-raised);
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  box-shadow: var(--ui-shadow-lg);
}

.help-center-head {
  padding: var(--ui-space-4) var(--ui-space-5);
  border-bottom: 1px solid var(--ui-line);
}

.help-center-body {
  min-height: 520px;
  background: var(--ui-surface-subtle);
}

/* Responsive behavior */
@media (max-width: 1180px) {
  .app-header {
    grid-template-columns: auto minmax(220px, 1fr) auto;
    gap: var(--ui-space-3);
    padding-inline: var(--ui-space-4);
  }

  .header-help span,
  #companyDisplay > #currentCompanyName {
    display: none;
  }

  .holder-dashboard-grid,
  .client-admin-dashboard-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-side-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --ui-header-height: 68px;
  }

  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-portal-shell .global-search-shell {
    position: relative;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    flex: 0 0 44px;
    margin-right: auto;
  }

  .admin-portal-shell .global-search-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-surface);
  }

  .admin-portal-shell .global-search-field {
    display: none;
  }

  .admin-portal-shell .global-search-shell.is-open {
    position: absolute;
    inset: var(--ui-space-3) var(--ui-space-3) auto 62px;
    z-index: 90;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .admin-portal-shell .global-search-shell.is-open .global-search-toggle {
    display: none;
  }

  .admin-portal-shell .global-search-shell.is-open .global-search-field {
    display: flex;
  }

  .admin-portal-shell .header-actions {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .admin-portal-shell .header-help span,
  .admin-portal-shell #companyDisplay > #currentCompanyName,
  .admin-portal-shell .user-identity {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .admin-portal-shell .user-control {
    grid-template-columns: 34px 14px;
    min-width: 56px;
  }

  .global-search-shell {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
  }

  .global-search-shell:not(.is-hidden) {
    display: block;
  }

  .app-shell,
  .admin-portal-shell .app-shell,
  .sidebar-collapsed .app-shell,
  .admin-portal-shell.sidebar-collapsed .app-shell {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
  }

  .sidebar,
  .admin-portal-shell .sidebar,
  .admin-portal-shell.sidebar-collapsed .sidebar {
    position: fixed;
    inset: var(--ui-header-height) auto 0 0;
    z-index: 70;
    width: min(310px, calc(100vw - 48px));
    height: calc(100dvh - var(--ui-header-height));
    padding: var(--ui-space-4);
    box-shadow: var(--ui-shadow-lg);
    transform: translateX(-105%);
    transition: transform var(--ui-transition);
  }

  .app-layout:not(.sidebar-collapsed) .sidebar,
  .admin-portal-shell:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0);
  }

  .content,
  .admin-portal-shell .content {
    padding: var(--ui-space-5) 20px 48px;
  }

  .dashboard-status-grid,
  .dashboard-grid,
  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-admin-dashboard-columns,
  .dashboard-side-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-bar,
  .admin-filter-bar,
  .page-filter-bar,
  .permit-filter-bar,
  .audit-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permit-wizard-steps {
    grid-template-columns: repeat(5, 170px);
  }
}

@media (max-width: 680px) {
  .app-header {
    padding-inline: var(--ui-space-2);
  }

  .brand-lockup h1 {
    font-size: 16px;
  }

  .brand-lockup .eyebrow,
  .header-help,
  #companyDisplay,
  .user-identity {
    display: none;
  }

  .header-control.user-control {
    min-width: 44px;
    padding: 5px;
    border-radius: 50%;
  }

  .user-chevron {
    display: none;
  }

  .content,
  .admin-portal-shell .content {
    padding: var(--ui-space-4) var(--ui-space-3) var(--ui-space-6);
  }

  .section-head,
  .admin-page-header,
  .page-header-actions {
    align-items: stretch;
    flex-direction: column;
    gap: var(--ui-space-3);
  }

  .section-head h2,
  .admin-page-header h2 {
    font-size: 27px;
  }

  .dashboard-status-grid,
  .dashboard-grid,
  .admin-kpi-grid,
  .form-grid,
  .auth-form-grid,
  .settings-form-grid,
  .control-action-summary-grid,
  .account-facts,
  .session-facts,
  .filter-bar,
  .admin-filter-bar,
  .page-filter-bar,
  .permit-filter-bar,
  .audit-filter-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-card,
  .admin-portal-shell .dashboard-card {
    min-height: 96px;
    padding: var(--ui-card-padding);
    border-radius: 16px;
  }

  .dashboard-card strong {
    font-size: 27px;
  }

  .permit-card-summary,
  .permit-detail-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .permit-card-summary-meta,
  .permit-header-badges,
  .permit-header-meta {
    justify-content: flex-start;
  }

  .wizard-panel {
    padding: var(--ui-space-4);
    border-radius: 16px;
  }

  .wizard-actions {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .wizard-actions > * {
    width: 100%;
  }

  .actions > button,
  .card-actions > button {
    flex: 1 1 calc(50% - 5px);
  }

  .dialog-card,
  .compact-dialog,
  .create-user-dialog,
  .company-delete-dialog,
  .permit-history-dialog,
  .control-action-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: var(--ui-space-4);
    border-radius: 20px;
  }

  .app-notice {
    inset: auto 12px 12px;
  }

  .auth-screen {
    align-items: start;
    padding: var(--ui-space-3);
  }

  .auth-card {
    padding: var(--ui-space-5) var(--ui-space-4);
    border-radius: 22px;
  }
}

/* Premium dark mode uses semantic surfaces rather than color inversion. */
@media (prefers-color-scheme: dark) {
  :root {
    --ui-canvas: #0c121a;
    --ui-surface: #151e29;
    --ui-surface-raised: #192430;
    --ui-surface-subtle: #111a24;
    --ui-surface-muted: #202c39;
    --ui-text: #edf4fb;
    --ui-text-soft: #c0cedc;
    --ui-text-muted: #8fa1b3;
    --ui-line: #293746;
    --ui-line-strong: #3a4a5b;
    --ui-primary: var(--ui-accent);
    --ui-primary-hover: var(--ui-accent-hover);
    --ui-primary-soft: var(--ui-accent-soft);
    --ui-accent: #4fc6c0;
    --ui-accent-hover: #71d5d0;
    --ui-accent-soft: #163b3d;
    --ui-success: #5bc58a;
    --ui-success-soft: #183a2a;
    --ui-warning: #e3ad46;
    --ui-warning-soft: #3e3018;
    --ui-danger: #ef7781;
    --ui-danger-hover: #ff929b;
    --ui-danger-soft: #441f27;
    --ui-info: #65b9f4;
    --ui-info-soft: #17334a;
    --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / 22%), 0 4px 12px rgb(0 0 0 / 12%);
    --ui-shadow-md: 0 10px 28px rgb(0 0 0 / 25%);
    --ui-shadow-lg: 0 28px 72px rgb(0 0 0 / 42%);
  }

  body {
    background: linear-gradient(180deg, rgb(44 65 85 / 22%) 0, transparent 280px), var(--ui-canvas);
  }

  .app-header {
    box-shadow: 0 1px 0 rgb(255 255 255 / 2%);
  }

  .dashboard-card,
  .permit-card,
  .permit-card-summary {
    background: linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface));
  }

  tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--ui-surface-subtle) 70%, transparent);
  }

  .dashboard-skeleton::after,
  .dashboard-loading-panel::after {
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 7%), transparent);
  }

  .auth-screen::before {
    opacity: .28;
  }

  :where(.status-badge, .soft-status).status-draft { color: #c0ccd8; background: #25313d; }
  :where(.status-badge, .soft-status).status-superseded { color: #c9bae2; background: #322a42; }
}

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

@keyframes ui-page-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-pop-in {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes ui-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-shimmer {
  to { transform: translateX(100%); }
}

/* Company Administrator PTW analytics */
.company-analytics {
  display: grid;
  gap: var(--ui-space-4);
  margin-block: var(--ui-space-5);
  padding: clamp(var(--ui-space-4), 2vw, var(--ui-space-5));
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-xl);
  background: color-mix(in srgb, var(--ui-surface) 94%, var(--ui-primary-soft));
  box-shadow: var(--ui-shadow-sm);
}

.analytics-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--ui-space-5);
}

.analytics-section-head h2,
.analytics-section-head p,
.analytics-card-head h3,
.analytics-card-head p {
  margin: 0;
}

.analytics-section-head > div:first-child > p:last-child,
.analytics-card-head p {
  margin-top: 5px;
  color: var(--ui-text-muted);
  font-size: .84rem;
}

.analytics-filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: var(--ui-space-2);
  width: min(100%, 610px);
}

.analytics-filter-bar label {
  display: grid;
  gap: var(--ui-space-2);
  color: var(--ui-text-soft);
  font-size: .72rem;
  font-weight: 700;
}

.analytics-filter-bar select {
  width: 100%;
  min-height: var(--ui-control-height);
  padding-inline: 12px 34px;
  border-color: var(--ui-line);
  border-radius: 11px;
  background-color: var(--ui-surface);
  font-size: .84rem;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ui-space-3);
}

.analytics-kpi {
  --analytics-tone: var(--ui-primary);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-3);
  min-height: 112px;
  padding: var(--ui-card-padding);
  overflow: hidden;
  color: var(--ui-text);
  text-align: left;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: none;
}

.analytics-kpi:hover {
  border-color: color-mix(in srgb, var(--analytics-tone) 48%, var(--ui-line));
  box-shadow: var(--ui-shadow-md);
  transform: translateY(-2px);
}

.analytics-tone-1 { --analytics-tone: #5f6fe5; }
.analytics-tone-2 { --analytics-tone: #168985; }
.analytics-tone-3 { --analytics-tone: #c17b00; }
.analytics-tone-4 { --analytics-tone: #c64b52; }
.analytics-tone-5 { --analytics-tone: #278354; }

.analytics-kpi-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--analytics-tone);
  border: 1px solid color-mix(in srgb, var(--analytics-tone) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--analytics-tone) 10%, var(--ui-surface));
}

.analytics-kpi-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.analytics-kpi > span:last-child {
  display: grid;
  min-width: 0;
}

.analytics-kpi small {
  color: var(--ui-text-soft);
  font-size: .74rem;
  font-weight: 750;
  line-height: 1.3;
}

.analytics-kpi strong {
  margin-block: 3px;
  color: var(--analytics-tone);
  font-size: 1.7rem;
  line-height: 1;
}

.analytics-kpi em {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: .68rem;
  font-style: normal;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

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

.analytics-card {
  min-width: 0;
  padding: var(--ui-card-padding);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: none;
}

.analytics-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--ui-space-4);
  min-height: 44px;
}

.analytics-card-head h3 {
  font-size: 1rem;
}

.analytics-period-label,
.analytics-percentage {
  flex: 0 0 auto;
  color: var(--ui-text-soft);
  font-size: .75rem;
  font-weight: 750;
}

.analytics-percentage {
  color: var(--ui-success);
  font-size: 1.4rem;
}

.analytics-legend {
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-4);
  margin-top: var(--ui-space-2);
  color: var(--ui-text-soft);
  font-size: .75rem;
}

.analytics-legend span::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  content: "";
}

.analytics-legend .created::before { background: #5f6fe5; }
.analytics-legend .closed::before { background: #168985; }

.analytics-line-chart {
  display: block;
  width: 100%;
  height: auto;
  max-height: 310px;
  margin-top: 2px;
  overflow: visible;
}

.analytics-grid-line {
  stroke: var(--ui-line);
  stroke-width: 1;
}

.analytics-axis-label {
  fill: var(--ui-text-muted);
  font-family: var(--ui-font);
  font-size: 10px;
}

.analytics-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analytics-line.created { stroke: #5f6fe5; }
.analytics-line.closed { stroke: #168985; }
.analytics-point { stroke: var(--ui-surface); stroke-width: 2; }
.analytics-point.created { fill: #5f6fe5; }
.analytics-point.closed { fill: #168985; }
.analytics-point:focus { outline: none; stroke: var(--ui-focus); stroke-width: 4; }

.analytics-data-table {
  margin-top: 4px;
  color: var(--ui-text-muted);
  font-size: .75rem;
}

.analytics-data-table summary {
  width: max-content;
  cursor: pointer;
}

.analytics-donut-layout {
  display: grid;
  grid-template-columns: minmax(126px, 160px) minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-4);
  margin-top: var(--ui-space-3);
}

.analytics-donut {
  width: 100%;
  transform: rotate(-90deg);
}

.analytics-donut-track,
.analytics-donut-segment {
  fill: none;
  stroke-width: 17;
}

.analytics-donut-track { stroke: var(--ui-surface-muted); }
.analytics-donut-segment { transition: opacity var(--ui-transition); }
.analytics-donut-total,
.analytics-donut-label {
  fill: var(--ui-text);
  font-family: var(--ui-font);
  font-weight: 800;
  transform: rotate(90deg);
  transform-origin: 70px 70px;
}
.analytics-donut-total { font-size: 24px; }
.analytics-donut-label { fill: var(--ui-text-muted); font-size: 10px; font-weight: 650; }

.analytics-status-list {
  display: grid;
  gap: 3px;
}

.analytics-status-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 6px;
  color: var(--ui-text-soft);
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: .7rem;
}

.analytics-status-row:hover { background: var(--ui-surface-subtle); transform: none; }
.analytics-status-row strong { color: var(--ui-text); }
.analytics-status-row small { min-width: 37px; color: var(--ui-text-muted); text-align: right; }
.analytics-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--swatch); }

.analytics-bars {
  display: grid;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
}

.analytics-bar-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-2);
  min-height: 48px;
  padding: 6px;
  color: var(--ui-text);
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.analytics-bar-row:hover { background: var(--ui-surface-subtle); transform: none; }
.analytics-bar-rank { color: var(--ui-text-muted); font-size: .72rem; text-align: center; }
.analytics-bar-content { display: grid; gap: 6px; }
.analytics-bar-content > span { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; }
.analytics-bar-content b { color: var(--ui-text-soft); }
.analytics-bar-content i { display: block; width: var(--bar-width); height: 7px; border-radius: 999px; background: linear-gradient(90deg, #5f6fe5, #168985); transition: width 300ms ease; }

.closure-progress {
  height: 9px;
  margin-block: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-surface-muted);
}

.closure-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--ui-success);
}

.closure-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-2);
}

.closure-metrics span {
  display: grid;
  gap: 3px;
  min-height: 70px;
  padding: 12px;
  border-radius: 12px;
  background: var(--ui-surface-subtle);
}

.closure-metrics small { color: var(--ui-text-muted); font-size: .7rem; line-height: 1.3; }
.closure-metrics strong { color: var(--ui-text); font-size: 1.05rem; }
.closure-metrics em { color: var(--ui-danger); font-size: .7rem; font-style: normal; }
.closure-metrics .overdue { border: 1px solid color-mix(in srgb, var(--ui-danger) 25%, var(--ui-line)); }

.analytics-empty,
.analytics-error {
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: var(--ui-space-5);
  color: var(--ui-text-muted);
  text-align: center;
  border: 1px dashed var(--ui-line-strong);
  border-radius: 14px;
  background: var(--ui-surface-subtle);
}

.analytics-empty .ui-icon { width: 25px; height: 25px; margin-bottom: 8px; color: var(--ui-text-muted); }
.analytics-empty strong { color: var(--ui-text-soft); }
.analytics-empty span { margin-top: 4px; font-size: .78rem; }

.analytics-error {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 92px;
  text-align: left;
}

.analytics-error > div { display: flex; align-items: center; gap: 12px; }
.analytics-error > div > span { display: grid; gap: 3px; }
.analytics-error .ui-icon { width: 24px; height: 24px; color: var(--ui-danger); }
.analytics-error strong { color: var(--ui-text); }

.analytics-updating {
  width: max-content;
  padding: 5px 10px;
  color: var(--ui-info);
  border-radius: 999px;
  background: var(--ui-info-soft);
  font-size: .72rem;
  font-weight: 700;
}

.analytics-skeleton {
  display: grid;
  gap: var(--ui-space-4);
}

.analytics-skeleton-card,
.analytics-skeleton-chart {
  position: relative;
  display: block;
  min-height: 112px;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-muted);
}

.analytics-skeleton-chart { min-height: 290px; }
.analytics-skeleton-card::after,
.analytics-skeleton-chart::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-surface) 75%, transparent), transparent);
  transform: translateX(-100%);
  animation: ui-shimmer 1.3s infinite;
  content: "";
}

@media (max-width: 1280px) {
  .analytics-section-head { align-items: stretch; flex-direction: column; }
  .analytics-filter-bar { width: 100%; }
  .analytics-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .company-analytics { border-radius: var(--ui-radius-lg); }
  .analytics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid { grid-template-columns: 1fr; }
  .analytics-trend-card { grid-column: auto; }
}

@media (max-width: 680px) {
  .company-analytics { padding: var(--ui-space-4); }
  .analytics-filter-bar { grid-template-columns: 1fr; }
  .analytics-kpi-grid { grid-template-columns: 1fr; }
  .analytics-kpi { min-height: 104px; }
  .analytics-card { padding: var(--ui-space-4); }
  .analytics-donut-layout { grid-template-columns: 1fr; }
  .analytics-donut { width: min(180px, 62vw); margin-inline: auto; }
  .analytics-line-chart { min-width: 0; }
  .analytics-axis-label { font-size: 9px; }
  .closure-metrics { grid-template-columns: 1fr; }
  .analytics-error { grid-template-columns: 1fr; text-align: center; }
}