:root {
  color-scheme: light dark;
  --ink: #192025;
  --muted: #66727d;
  --line: #dce3e8;
  --calendar-line: #c9d5dc;
  --surface: #ffffff;
  --bg: #eef4f6;
  --accent: #b71313;
  --accent-strong: #7d1016;
  --brand-blue: #1674bc;
  --brand-blue-dark: #084b83;
  --control-bg: #e6f0f6;
  --control-bg-strong: #d6e6f0;
  --button-metal: linear-gradient(180deg, #f8fbfc 0%, #d1dde4 100%);
  --button-metal-hover: linear-gradient(180deg, #ffffff 0%, #c7d6de 100%);
  --button-metal-border: #91a7b3;
  --button-metal-border-hover: #718c9a;
  --button-metal-text: #29424f;
  --button-frame: rgba(8, 75, 131, 0.14);
  --technical-soft: #eef5f8;
  --warm: #f0b14a;
  --danger: #b84444;
  --success: #2f8758;
  --shadow: 0 18px 48px rgba(16, 32, 38, 0.12);
  --recap-panel: #f8fbfc;
  --recap-head: #e4edf3;
  --recap-row: #ffffff;
  --recap-row-alt: #eef7fc;
  --recap-text: #192025;
  --recap-soft-text: #65727d;
  --recap-chip: #edf3f6;
  --annual-weekday: #f7f6f0;
  --annual-saturday: #dce8d5;
  --annual-sunday: #efd9d2;
  --annual-holiday: #d9e8f8;
  --annual-empty-a: #c8d0d8;
  --annual-empty-b: #b8c2cc;
  --annual-not-employed-a: #e1e4e7;
  --annual-not-employed-b: #d2d7dc;
}

/* P-905 Nginx management */
.nginx-page-header {
  align-items: flex-start;
}

.nginx-page-header p {
  max-width: 860px;
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.nginx-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 7px;
  overflow: hidden;
}

.nginx-status-cell {
  position: relative;
  min-height: 68px;
  padding: 12px 14px 11px 18px;
  border-right: 1px solid var(--line);
}

.nginx-status-cell:last-child {
  border-right: 0;
}

.nginx-status-cell::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #6f8792;
}

.nginx-status-cell.is-ok::before {
  background: var(--success);
}

.nginx-status-cell.is-warning::before {
  background: #d49722;
}

.nginx-status-cell.is-error::before {
  background: var(--danger);
}

.nginx-status-cell small,
.nginx-status-cell strong {
  display: block;
}

.nginx-status-cell small {
  margin-bottom: 5px;
  color: var(--muted);
}

.nginx-status-cell strong {
  font-size: 13px;
  font-weight: 650;
}

.nginx-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.nginx-operation-band,
.nginx-workspace-section,
.nginx-endpoint-form > section,
.nginx-code-panel {
  margin: 12px 0;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 7px;
}

.nginx-operation-band,
.nginx-workspace-section,
.nginx-endpoint-form > section {
  padding: 15px;
}

.nginx-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.nginx-section-heading h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 680;
}

.nginx-section-heading p {
  max-width: 880px;
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.nginx-heading-actions {
  align-items: center;
}

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

.nginx-action-row form {
  margin: 0;
}

.nginx-action-row button,
.nginx-heading-actions .primary-button {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.nginx-apply-button {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid #23704a;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(180deg, #3a9668 0%, #287950 100%);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.nginx-apply-button:hover {
  background: linear-gradient(180deg, #45a976 0%, #2d8559 100%);
}

.nginx-inline-output {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.nginx-inline-output summary,
.nginx-code-panel summary {
  cursor: pointer;
}

.nginx-inline-output pre {
  max-height: 140px;
  margin: 8px 0 0;
  overflow: auto;
  color: var(--muted);
  white-space: pre-wrap;
}

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

.nginx-global-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.nginx-global-form fieldset:nth-of-type(3) {
  grid-column: 1 / -1;
}

.nginx-global-form legend {
  padding: 0 6px;
  color: var(--ink);
  font-weight: 650;
}

.nginx-global-form label,
.nginx-endpoint-form label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 600;
}

.nginx-global-form label small,
.nginx-endpoint-form label small {
  color: var(--muted);
  font-weight: 400;
  line-height: 1.35;
}

.nginx-global-form input:not([type="checkbox"]),
.nginx-global-form textarea,
.nginx-endpoint-form input:not([type="checkbox"]),
.nginx-endpoint-form textarea,
.nginx-endpoint-form select {
  width: 100%;
  min-height: 34px;
}

.nginx-global-form textarea,
.nginx-endpoint-form textarea {
  resize: vertical;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

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

.nginx-check-row {
  min-height: 38px;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  margin: 0 !important;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--technical-soft);
}

.nginx-check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.nginx-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.nginx-endpoint-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.nginx-endpoint-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  background: var(--surface);
}

.nginx-endpoint-table th,
.nginx-endpoint-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.nginx-endpoint-table th {
  color: var(--muted);
  background: var(--technical-soft);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.nginx-endpoint-table tr:last-child td {
  border-bottom: 0;
}

.nginx-endpoint-table tr.is-disabled {
  opacity: 0.56;
}

.nginx-endpoint-table strong,
.nginx-endpoint-table small {
  display: block;
}

.nginx-endpoint-table small {
  margin-top: 3px;
  color: var(--muted);
}

.nginx-endpoint-table code {
  color: var(--ink);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.nginx-endpoint-state {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #83949d;
}

.nginx-endpoint-state.is-enabled {
  background: var(--success);
}

.nginx-auth-badge,
.nginx-neutral-badge,
.nginx-revision-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 650;
}

.nginx-auth-badge {
  border-color: rgba(183, 19, 19, 0.34);
  color: #9c1717;
  background: rgba(183, 19, 19, 0.08);
}

.nginx-neutral-badge {
  color: var(--muted);
  background: var(--technical-soft);
}

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

.nginx-code-panel {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.nginx-code-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--technical-soft);
}

.nginx-code-panel summary span,
.nginx-code-panel > p {
  color: var(--muted);
}

.nginx-code-panel > p {
  margin: 10px 14px;
}

.nginx-code-panel pre {
  max-height: 520px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border-top: 1px solid var(--line);
  background: #0f1b22;
  color: #dcebf0;
  font: 11px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: pre;
}

.nginx-diff-output {
  color: #e8eef1 !important;
}

.nginx-revision-status.status-baseline,
.nginx-revision-status.status-applied {
  border-color: rgba(47, 135, 88, 0.4);
  color: var(--success);
}

.nginx-revision-status.status-draft_valid {
  border-color: rgba(22, 116, 188, 0.42);
  color: var(--brand-blue);
}

.nginx-revision-status.status-draft_invalid {
  border-color: rgba(184, 68, 68, 0.42);
  color: var(--danger);
}

.nginx-endpoint-form {
  max-width: 1120px;
}

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

.nginx-form-grid .span-two {
  grid-column: 1 / -1;
}

.field-tooltip {
  display: inline-grid;
  width: 17px;
  height: 17px;
  margin-left: 4px;
  place-items: center;
  border: 1px solid var(--button-metal-border);
  border-radius: 50%;
  color: var(--button-metal-text);
  background: var(--button-metal);
  font: 700 10px/1 sans-serif;
  cursor: help;
}

.nginx-endpoint-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

@media (prefers-color-scheme: dark) {
  .nginx-operation-band,
  .nginx-workspace-section,
  .nginx-endpoint-form > section,
  .nginx-code-panel,
  .nginx-status-strip,
  .nginx-endpoint-table {
    border-color: #3a505b;
    background: #17252c;
    color: #edf4f5;
  }

  .nginx-global-form fieldset,
  .nginx-endpoint-table-wrap,
  .nginx-check-row {
    border-color: #334852;
  }

  .nginx-auth-badge {
    border-color: rgba(255, 112, 112, 0.45);
    color: #ffb0b0;
    background: rgba(183, 19, 19, 0.16);
  }

  .nginx-revision-status.status-draft_valid {
    color: #8fccef;
  }

  .nginx-revision-status.status-baseline,
  .nginx-revision-status.status-applied {
    color: #7dd6a6;
  }
}

@media (max-width: 900px) {
  .nginx-status-strip,
  .nginx-global-form,
  .nginx-inspection-grid,
  .nginx-form-grid {
    grid-template-columns: 1fr;
  }

  .nginx-status-cell {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nginx-status-cell:last-child {
    border-bottom: 0;
  }

  .nginx-global-form fieldset:nth-of-type(3),
  .nginx-form-grid .span-two {
    grid-column: auto;
  }

  .nginx-heading-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #edf4f5;
    --muted: #a6b4bc;
    --line: #2f424b;
    --calendar-line: #405760;
    --surface: #18242a;
    --bg: #0e171b;
    --control-bg: #21343d;
    --control-bg-strong: #2a404a;
    --button-metal: linear-gradient(180deg, #3b515b 0%, #293d46 100%);
    --button-metal-hover: linear-gradient(180deg, #48616c 0%, #304852 100%);
    --button-metal-border: #718995;
    --button-metal-border-hover: #94aab4;
    --button-metal-text: #e6f0f3;
    --button-frame: rgba(190, 222, 235, 0.22);
    --technical-soft: #1d2e35;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
    --recap-panel: #17252b;
    --recap-head: #22343d;
    --recap-row: #1b2a31;
    --recap-row-alt: #203641;
    --recap-text: #edf4f5;
    --recap-soft-text: #a8bac3;
    --recap-chip: #263c46;
    --annual-weekday: #252824;
    --annual-saturday: #263525;
    --annual-sunday: #3a2a27;
    --annual-holiday: #1f3448;
    --annual-empty-a: #485058;
    --annual-empty-b: #343c43;
    --annual-not-employed-a: #30383e;
    --annual-not-employed-b: #273036;
  }

  .settings-form,
  .settings-note,
  .settings-hub-card,
  .settings-language-panel,
  .identity-card-section,
  .identity-card-panel,
  .modbus-table-panel,
  .system-dashboard-card,
  .internal-url-list div,
  .danger-panel,
  .portal-style-preview,
  .checkbox-group,
  .toggle-row,
  .certificate-panel,
  .form-card {
    border-color: #3a505b;
    background: #17252c;
    color: #edf4f5;
  }

  .settings-section,
  .certificate-form {
    border-color: #334852;
  }

  input,
  select,
  textarea {
    border-color: #526b78;
    background: #0f1b22;
    color: #f4fbff;
  }

  input::placeholder,
  textarea::placeholder {
    color: rgba(218, 232, 238, 0.38);
  }

  label,
  .field-help,
  .micro-note,
  .settings-hub-card small,
  .modbus-table span,
  .modbus-table small,
  .empty-table,
  .certificate-list dt,
  .danger-panel p {
    color: #b8c9d2;
  }

  h1,
  h2,
  h3,
  .settings-section-head h2,
  .settings-hub-card strong,
  .system-dashboard-card strong,
  .internal-url-list strong,
  .certificate-list dd,
  .checkbox-group label,
  .modbus-table strong {
    color: #f4fbff;
  }

  .settings-hub-card span,
  .system-dashboard-card span,
  .function-code,
  .modbus-table th,
  .internal-url-list span {
    color: #9ed7e6;
  }

  .modbus-table th {
    background: #21343d;
  }

  .modbus-table th,
  .modbus-table td {
    border-color: #334852;
  }

  .portal-style-preview strong {
    color: #f4fbff;
  }

  .portal-style-preview small {
    color: #b8c9d2;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 400;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 218px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100vh;
  padding: 12px;
  overflow: auto;
  background:
    radial-gradient(circle at 18% 0%, rgba(64, 151, 208, 0.22), transparent 30%),
    linear-gradient(180deg, #082b4a 0%, #173149 45%, #3f2239 100%);
  color: #f4f8fa;
}

.brand {
  display: block;
  border: 1px solid rgba(182, 220, 236, 0.42);
  border-radius: 8px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 30px rgba(2, 20, 34, 0.16);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.brand:hover {
  transform: translateY(-1px);
  border-color: rgba(158, 218, 240, 0.72);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 36px rgba(2, 20, 34, 0.24);
}

.brand-logo-surface {
  display: grid;
  min-height: 54px;
  place-items: center;
  border-radius: 6px;
  background: transparent;
}

.brand-logo-surface img {
  display: block;
  width: 100%;
  max-height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
}

.brand-home-label {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 5px;
  border-top: 1px solid rgba(182, 220, 236, 0.18);
  padding-top: 5px;
  color: rgba(232, 247, 252, 0.9);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.brand-home-label svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 2;
}

.brand small,
.muted {
  color: var(--muted);
}

.brand small {
  display: block;
  color: #a7bdc1;
}

nav {
  display: grid;
  gap: 8px;
}

.nav-link,
.ghost-button {
  width: 100%;
  border: 1px solid rgba(221, 235, 242, 0.16);
  border-radius: 8px;
  padding: 7px 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.055));
  color: #f4f8fa;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-link:hover,
.ghost-button:hover {
  border-color: rgba(106, 185, 232, 0.38);
  background: linear-gradient(180deg, rgba(106, 185, 232, 0.16), rgba(255, 255, 255, 0.075));
}

.sidebar-foot {
  display: grid;
  gap: 9px;
  margin-top: auto;
}

.sidebar-settings-link {
  margin-top: 8px;
}

.sidebar-session-actions {
  display: grid;
  gap: 7px;
}

.sidebar-session-button {
  display: grid;
  gap: 4px;
  min-height: 48px;
  border-left-width: 3px;
  padding: 7px 9px;
}

a.sidebar-session-button {
  text-decoration: none;
}

.sidebar-session-status,
.sidebar-session-identity {
  display: flex;
  min-width: 0;
  align-items: center;
}

.sidebar-session-status {
  gap: 6px;
  color: rgba(244, 248, 250, 0.76);
  font-size: 10px;
}

.sidebar-session-status strong {
  color: #ffffff;
  font-size: 12px;
}

.sidebar-session-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #55b879;
  box-shadow: 0 0 0 2px rgba(85, 184, 121, 0.16);
}

.sidebar-session-button.session-closed {
  border-left-color: rgba(210, 223, 230, 0.48);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
}

.sidebar-session-button.session-closed .sidebar-session-dot {
  background: #9aabb4;
  box-shadow: 0 0 0 2px rgba(154, 171, 180, 0.14);
}

.sidebar-session-button.session-closed .sidebar-session-identity > span {
  color: rgba(244, 248, 250, 0.66);
  font-weight: 600;
}

.sidebar-session-button.session-closed .sidebar-session-identity small {
  color: #d9edf7;
}

.sidebar-session-identity {
  justify-content: space-between;
  gap: 8px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.sidebar-session-identity > span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-session-identity small {
  flex: 0 0 auto;
  color: rgba(244, 248, 250, 0.62);
  font-size: 9px;
  font-weight: 600;
}

.core-session-button {
  border-left-color: #4ba7dc;
}

.tim-session-button {
  border-left-color: #e3a62c;
}

.sidebar-credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 28px;
  color: rgba(244, 248, 250, 0.46);
  font-size: 10px;
  text-align: left;
}

.language-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
}

.language-switch a {
  min-width: 40px;
  border-radius: 6px;
  padding: 7px 10px;
  color: #d6e5e5;
  text-align: center;
  font-weight: 700;
}

.language-switch a.active {
  background: #ffffff;
  color: #221316;
}

.content {
  position: relative;
  min-width: 0;
  padding: 10px;
}

.page-code {
  position: fixed;
  bottom: 14px;
  right: 18px;
  z-index: 10;
  border: 1px solid rgba(8, 75, 131, 0.16);
  border-radius: 6px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.44);
  color: rgba(8, 75, 131, 0.58);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}

.top-language-switch {
  position: absolute;
  top: 10px;
  right: 28px;
  z-index: 11;
  display: inline-flex;
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(198, 214, 223, 0.82);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
}

.global-session-indicator {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.global-session-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #89969d;
  box-shadow: 0 0 0 2px color-mix(in srgb, #89969d 18%, transparent);
}

.global-session-indicator.state-core .global-session-dot {
  background: #1678b8;
  box-shadow: 0 0 0 2px color-mix(in srgb, #1678b8 20%, transparent);
}

.global-session-indicator.state-tim .global-session-dot {
  background: #d18b00;
  box-shadow: 0 0 0 2px color-mix(in srgb, #d18b00 20%, transparent);
}

.global-session-indicator.state-both {
  border-color: color-mix(in srgb, #1d8b5b 48%, var(--line));
}

.global-session-indicator.state-both .global-session-dot {
  background: #1d9a62;
  box-shadow: 0 0 0 2px color-mix(in srgb, #1d9a62 20%, transparent);
}

.flag-button {
  display: inline-grid;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 5px;
  min-width: 48px;
  border-radius: 6px;
  padding: 4px 6px;
  color: var(--brand-blue-dark);
  font-size: 11px;
  font-weight: 900;
}

.flag-button::before {
  display: block;
  width: 18px;
  height: 12px;
  border: 1px solid rgba(25, 32, 37, 0.16);
  border-radius: 2px;
  content: "";
}

.flag-en::before {
  background: linear-gradient(90deg, #123f7a 0 34%, #ffffff 34% 40%, #c8102e 40% 60%, #ffffff 60% 66%, #123f7a 66% 100%);
}

.flag-fr::before {
  background: linear-gradient(90deg, #1f4f9a 0 33%, #ffffff 33% 66%, #d72829 66% 100%);
}

.flag-de::before {
  background: linear-gradient(#111111 0 33%, #d72829 33% 66%, #f4c430 66% 100%);
}

.flag-button.active {
  background: var(--control-bg);
  box-shadow: inset 0 0 0 1px rgba(8, 75, 131, 0.18);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dashboard-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 226px);
  align-items: stretch;
  gap: 6px;
  width: calc(100% - 132px);
  margin-bottom: 7px;
  padding-right: 0;
}

.dashboard-page-header h1 {
  margin: 0;
  font-size: 17px;
  line-height: 1.05;
}

.dashboard-page-header .eyebrow {
  margin: 0;
  font-size: 10px;
}

.dashboard-page-header .primary-button {
  padding: 9px 12px;
}

.calendar-header-main,
.dashboard-header-metrics article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(16, 32, 38, 0.03);
}

.dashboard-header-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.calendar-header-main {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 8px;
}

.calendar-title-line {
  display: flex;
  align-items: center;
  min-width: 0;
}

.calendar-group-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  max-width: none;
}

.calendar-group-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 106px;
  height: 25px;
  gap: 6px;
  cursor: pointer;
  border: 1px solid var(--button-metal-border);
  border-radius: 6px;
  padding: 3px 8px;
  background: var(--button-metal);
  color: var(--button-metal-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 1px 2px rgba(16, 32, 38, 0.07);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.calendar-group-actions button:hover,
.calendar-group-actions button.active {
  border-color: rgba(22, 116, 188, 0.32);
  background: var(--button-metal-hover);
}

.calendar-group-actions button.complete {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.calendar-group-actions small {
  min-width: 20px;
  margin-left: auto;
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(22, 116, 188, 0.12);
  color: var(--brand-blue-dark);
  text-align: center;
  font-size: 10px;
}

.dashboard-header-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.dashboard-header-metrics article {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 6px 8px;
}

.dashboard-header-metrics strong {
  display: block;
  margin-top: 3px;
  color: var(--brand-blue-dark);
  font-size: 13px;
  line-height: 1.05;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 28px;
}

h2 {
  font-size: 16px;
}

h3 {
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: 13px;
}

.eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.primary-button,
.soft-button,
.icon-button {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
}

.primary-button {
  padding: 12px 16px;
  background: var(--accent);
  color: #fff;
}

.reserved-action {
  background: var(--reserved-action-color, var(--accent));
}

.soft-button {
  padding: 10px 14px;
  border: 1px solid var(--button-metal-border);
  background: var(--button-metal);
  color: var(--button-metal-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 2px rgba(16, 32, 38, 0.08);
}

.soft-button:hover {
  background: var(--button-metal-hover);
  border-color: var(--button-metal-border-hover);
}

.inline-action {
  display: inline-flex;
  justify-self: start;
  align-items: center;
}

.icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--button-metal-border);
  background: var(--button-metal);
  color: var(--button-metal-text);
  font-size: 24px;
}

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

.dashboard-stats {
  gap: 10px;
  margin-bottom: 12px;
}

.resource-switcher {
  max-width: 560px;
  margin: -10px 0 20px;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 30px;
  align-items: center;
  min-height: 330px;
  margin: -32px -32px 0;
  padding: 42px 48px 44px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(11, 44, 74, 0.96) 0%, rgba(117, 26, 41, 0.96) 58%, rgba(159, 31, 40, 0.96) 100%);
  color: #ffffff;
}

.home-copy {
  position: relative;
  z-index: 1;
}

.home-logo {
  width: min(820px, 82vw);
  max-height: 160px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 24px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

.home-hero .eyebrow {
  color: #d8ecff;
}

.home-hero h1 {
  max-width: 980px;
  margin: 0 0 12px;
  font-size: 50px;
  line-height: 1.04;
  white-space: nowrap;
}

.home-hero p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 19px;
  margin: 0;
}

.home-odoo-link {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  backdrop-filter: blur(10px);
}

.home-odoo-link:hover {
  background: rgba(255, 255, 255, 0.24);
}

.home-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 16px;
  background: rgba(8, 75, 131, 0.3);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
}

.home-panel span,
.home-panel small {
  color: rgba(255, 255, 255, 0.72);
}

.home-panel strong {
  font-size: 48px;
  line-height: 0.95;
}

.portal-hub {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.portal-group {
  display: grid;
  gap: 12px;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.portal-card {
  position: relative;
  display: grid;
  min-height: 132px;
  align-content: start;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(8, 75, 131, 0.14);
  border-radius: 8px;
  padding: 18px;
  background: var(--portal-bg, linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 244, 248, 0.88)));
  box-shadow: 0 12px 28px rgba(16, 32, 38, 0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.portal-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--portal-color, var(--brand-blue));
  content: "";
}

.portal-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--portal-color, var(--brand-blue)) 42%, #ffffff);
  box-shadow: 0 16px 36px rgba(16, 32, 38, 0.14);
}

.portal-card-icon {
  display: inline-flex;
  width: 158px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--portal-color, var(--brand-blue)) 30%, #ffffff);
  border-radius: 7px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--portal-color, var(--brand-blue)) 12%, #ffffff);
  color: var(--portal-color, var(--brand-blue));
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.portal-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.color-swatch {
  display: inline-block;
  width: 22px;
  height: 14px;
  border: 1px solid rgba(8, 75, 131, 0.18);
  border-radius: 4px;
  background: var(--swatch-color, var(--brand-blue));
  vertical-align: -2px;
}

.portal-card.palette-steel {
  --portal-bg: linear-gradient(180deg, #ffffff, #edf2f5);
}

.portal-card.palette-electro {
  --portal-bg: linear-gradient(135deg, rgba(12, 58, 98, 0.08), rgba(200, 16, 46, 0.1));
}

.portal-card.palette-blue {
  --portal-bg: linear-gradient(180deg, #f8fbff, #e8f3fb);
}

.portal-card.palette-red {
  --portal-bg: linear-gradient(180deg, #fffafa, #faecef);
}

.portal-card.palette-green {
  --portal-bg: linear-gradient(180deg, #fbfffc, #e8f6ee);
}

.portal-card.palette-violet {
  --portal-bg: linear-gradient(180deg, #fdfbff, #f0ebfa);
}

.portal-card.palette-amber {
  --portal-bg: linear-gradient(180deg, #fffdf8, #f8f0de);
}

.portal-card strong {
  color: var(--brand-blue-dark);
  font-size: 20px;
  line-height: 1.05;
}

.portal-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.current-logo-row,
.portal-link-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.current-logo-row {
  color: var(--muted);
  font-size: 13px;
}

.current-logo-row img,
.portal-link-preview img {
  max-width: 86px;
  max-height: 34px;
  object-fit: contain;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.home-resource {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 32, 38, 0.08);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.home-resource:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(16, 32, 38, 0.12);
}

.home-resource span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-resource strong {
  display: block;
  margin: 12px 0;
  font-size: 30px;
  line-height: 1.05;
}

.home-resource.free strong {
  color: var(--success);
}

.home-resource.occupied strong {
  color: var(--danger);
}

.home-resource.free {
  border-top: 4px solid var(--success);
}

.home-resource.occupied {
  border-top: 4px solid var(--danger);
}

.resource-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.resource-dashboard-grid {
  margin-top: 0;
}

.resource-dashboard-link-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-left: 5px solid var(--brand-blue);
  margin-bottom: 16px;
}

.resource-dashboard-link-note h2 {
  margin: 0 0 4px;
}

.resource-dashboard-link-note p {
  margin: 0;
}

.stat,
.calendar-card,
.upcoming-panel,
.settings-form,
.settings-note,
.form-card,
.danger-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(16, 32, 38, 0.03);
}

.danger-button {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 8px 11px;
  background: var(--danger);
  color: #fff;
  font-weight: 800;
}

.compact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1;
}

.stat {
  padding: 9px;
}

.dashboard-stats .stat {
  padding: 8px 9px;
}

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

.stat strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
}

.dashboard-stats .stat strong {
  margin-top: 4px;
  font-size: 22px;
}

.stat.free strong,
.stat.busy strong {
  font-size: 30px;
  line-height: 1.05;
}

.dashboard-stats .stat.free strong,
.dashboard-stats .stat.busy strong {
  font-size: 22px;
}

.stat.free strong {
  color: var(--success);
}

.stat.busy strong {
  color: var(--danger);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 9px;
}

.calendar-card,
.upcoming-panel {
  padding: 9px;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}

.calendar-toolbar h2 {
  margin: 0 0 0 auto;
}

.view-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--button-metal-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.38);
}

.view-switch button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--button-metal);
  color: var(--button-metal-text);
  font-weight: 800;
}

.view-switch button.active {
  border-color: var(--button-metal-border-hover);
  background: var(--button-metal-hover);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(16, 32, 38, 0.12);
}

.calendar-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.week-calendar {
  max-height: clamp(430px, calc(100vh - 166px), 900px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.calendar-side-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  max-height: clamp(430px, calc(100vh - 166px), 900px);
}

.calendar-resource-picker {
  display: grid;
  min-height: 0;
  gap: 8px;
}

.calendar-resource-picker h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.calendar-resource-list {
  display: grid;
  gap: 3px;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.calendar-resource-list label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 6px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
}

.calendar-resource-list label:has(input:checked) {
  border-color: var(--resource-color, var(--brand-blue));
  border-left: 5px solid var(--resource-color, var(--brand-blue));
  background: var(--resource-soft, #fff);
}

.calendar-resource-list input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.calendar-resource-list strong,
.calendar-resource-list small {
  display: inline;
  min-width: 0;
}

.calendar-resource-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-resource-list small {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.calendar-resource-list small::before {
  content: " - ";
}

@media (prefers-color-scheme: dark) {
  .calendar-resource-list label {
    border-color: rgba(128, 172, 195, 0.24);
    background: #172830;
    color: #edf4f5;
  }

  .calendar-resource-list label:has(input:checked) {
    border-color: color-mix(in srgb, var(--resource-color, var(--brand-blue)) 74%, #ffffff);
    border-left-color: var(--resource-color, var(--brand-blue));
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--resource-color, var(--brand-blue)) 22%, transparent), transparent 68%),
      #1c3038;
  }

  .calendar-resource-list strong {
    color: #f6fbff;
  }

  .calendar-resource-list small {
    color: #b8c9d2;
  }
}

.date-jump {
  display: grid;
  gap: 8px;
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.date-jump h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.mini-months {
  display: grid;
  gap: 8px;
}

.mini-month {
  border: 1px solid rgba(22, 116, 188, 0.18);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.mini-month h4 {
  margin: 0 0 6px;
  color: var(--brand-blue-dark);
  font-size: 12px;
  text-transform: capitalize;
}

.mini-month-grid {
  display: grid;
  grid-template-columns: 26px repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.mini-week-heading,
.mini-week-number {
  position: relative;
  margin-right: 3px;
  color: var(--muted);
  text-align: center;
  font-size: 9px;
  font-weight: 900;
}

.mini-week-heading::after,
.mini-week-number::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -3px;
  bottom: 3px;
  width: 1px;
  background: rgba(8, 75, 131, 0.16);
}

.mini-day-name {
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  font-weight: 900;
}

.mini-day,
.mini-week-number {
  cursor: pointer;
  min-width: 0;
  min-height: 24px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.mini-week-number {
  border: 1px solid rgba(22, 116, 188, 0.12);
  background: var(--technical-soft);
  color: var(--brand-blue-dark);
}

.mini-day:hover,
.mini-week-number:hover {
  background: var(--control-bg);
}

.mini-day.outside {
  color: rgba(102, 114, 125, 0.35);
}

.mini-day.today {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.mini-day.active {
  background: var(--brand-blue);
  color: #fff;
}

.mini-week-number.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .mini-month {
    border-color: rgba(128, 172, 195, 0.34);
    background: #15252c;
  }

  .mini-month h4 {
    color: #e4f3f8;
  }

  .mini-week-heading,
  .mini-day-name {
    color: #eef7fa;
  }

  .mini-day-name {
    display: inline-flex;
    min-height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(128, 172, 195, 0.14);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
  }

  .mini-week-heading::after,
  .mini-week-number::after {
    background: rgba(158, 191, 207, 0.24);
  }

  .mini-day,
  .mini-week-number {
    background: #1b2c33;
    color: #edf4f5;
  }

  .mini-week-number {
    border-color: rgba(128, 172, 195, 0.24);
    background: #20343d;
    color: #dbeaf0;
  }

  .mini-day:hover,
  .mini-week-number:hover {
    background: #2b424c;
  }

  .mini-day.outside {
    color: rgba(237, 244, 245, 0.34);
  }
}

.date-jump label {
  gap: 6px;
  border: 1px solid rgba(22, 116, 188, 0.28);
  border-radius: 8px;
  padding: 8px;
  background: #f7fbfd;
}

.date-jump label span {
  color: var(--brand-blue-dark);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.date-jump input {
  width: 100%;
  min-height: 40px;
  border: 2px solid var(--brand-blue);
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(22, 116, 188, 0.14);
  padding: 10px 11px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.date-jump input:focus {
  outline: 3px solid rgba(22, 116, 188, 0.22);
  outline-offset: 2px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: 52px repeat(var(--calendar-days, 7), minmax(126px, 1fr));
  min-width: max-content;
}

.time-column {
  display: grid;
  grid-template-rows: 50px repeat(var(--slot-count, 52), var(--slot-height, 28px));
  color: var(--muted);
  font-size: 12px;
}

.time-column span {
  padding-top: 5px;
}

.day-column {
  min-width: 108px;
  border-left: 2px solid var(--resource-color, var(--calendar-line));
  background: var(--resource-column-bg, transparent);
}

.day-head {
  position: sticky;
  top: 0;
  z-index: 4;
  width: 100%;
  height: 50px;
  border: 0;
  border-bottom: 1px solid var(--calendar-line);
  background: var(--resource-header-bg, var(--technical-soft));
  color: var(--ink);
  cursor: pointer;
}

.day-head strong,
.day-head span {
  display: block;
}

.day-head strong {
  font-size: 12px;
  line-height: 1.1;
}

.day-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.1;
}

.day-body {
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--slot-count, 52), var(--slot-height, 28px));
  min-height: calc(var(--slot-count, 52) * var(--slot-height, 28px));
}

.slot-button {
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid var(--calendar-line);
  background: #fff;
}

.slot-button:hover {
  filter: brightness(0.96);
}

.slot-button.occupied:hover {
  filter: brightness(0.96);
}

.day-body > div {
  border-bottom: 1px solid var(--calendar-line);
}

.event-block {
  position: absolute;
  right: 6px;
  left: 6px;
  overflow: hidden;
  border-left: 12px solid var(--resource-color, var(--organizer-color, var(--accent)));
  border-radius: 8px;
  padding: 8px;
  background: var(--reservation-bg, #eef5f8);
  font-size: 12px;
  cursor: grab;
  touch-action: none;
  z-index: 2;
}

.event-block.dragging {
  cursor: grabbing;
  opacity: 0.92;
  z-index: 5;
}

.event-block strong,
.event-block span,
.event-block small {
  display: block;
}

.event-block span,
.event-block small {
  color: #1d485f;
}

.event-origin-placeholder {
  position: absolute;
  right: 6px;
  left: 6px;
  border-radius: 8px;
  background: var(--reservation-origin-bg, rgba(11, 44, 74, 0.18));
  outline: 1px dashed rgba(11, 44, 74, 0.38);
  pointer-events: none;
  z-index: 1;
}

.event-note {
  margin-top: 3px;
  border-radius: 5px;
  padding: 2px 4px;
  background: rgba(255, 255, 255, 0.72);
}

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

.booking-list article {
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--technical-soft);
}

.booking-list strong,
.booking-list span,
.booking-list small {
  display: block;
}

.booking-list span,
.booking-list small {
  color: var(--muted);
}

.month-grid {
  display: grid;
  grid-template-columns: 54px repeat(7, minmax(110px, 1fr));
  min-width: 824px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.month-corner,
.month-day-name,
.month-week-number,
.month-cell {
  border-right: 1px solid var(--calendar-line);
  border-bottom: 1px solid var(--calendar-line);
}

.month-day-name {
  padding: 10px;
  background: var(--technical-soft);
  color: var(--brand-blue-dark);
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
}

.month-week-number {
  cursor: pointer;
  border-top: 0;
  border-left: 0;
  background: var(--technical-soft);
  color: var(--brand-blue-dark);
  font-weight: 800;
}

.month-cell {
  display: grid;
  align-content: start;
  min-height: 118px;
  gap: 4px;
  cursor: pointer;
  border-top: 0;
  border-left: 0;
  padding: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.month-cell:hover,
.month-week-number:hover {
  background: var(--control-bg);
}

.month-cell.outside {
  background: #f7f8f8;
  color: var(--muted);
}

.month-cell.today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.month-cell span {
  font-weight: 800;
}

.month-cell em {
  justify-self: start;
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.month-cell small {
  overflow: hidden;
  border-radius: 5px;
  padding: 3px 5px;
  background: var(--control-bg);
  color: var(--brand-blue-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal {
  width: min(680px, calc(100vw - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

.modal::backdrop {
  background: rgba(16, 32, 38, 0.52);
}

.booking-form,
.settings-form,
.form-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-head h2 {
  margin: 0;
}

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

label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
}

input::placeholder,
textarea::placeholder {
  color: rgba(102, 114, 125, 0.32);
  font-weight: 400;
  opacity: 1;
}

.field-help {
  color: rgba(102, 114, 125, 0.72);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.portal-style-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--portal-preview-color, var(--brand-blue)) 28%, #ffffff);
  border-left: 6px solid var(--portal-preview-color, var(--brand-blue));
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--portal-preview-bg, linear-gradient(180deg, #ffffff, #edf2f5));
  box-shadow: 0 10px 24px rgba(16, 32, 38, 0.07);
}

.portal-style-preview strong {
  display: block;
  color: var(--brand-blue-dark);
}

.portal-style-preview small {
  color: var(--muted);
}

.portal-style-swatch {
  width: 36px;
  height: 26px;
  border: 1px solid rgba(8, 75, 131, 0.18);
  border-radius: 6px;
}

.portal-palette-field select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.portal-palette-chooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-palette-option {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(8, 75, 131, 0.16);
  border-left: 5px solid var(--palette-option-accent, var(--brand-blue));
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--palette-option-bg, #fff);
  color: var(--brand-blue-dark);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}

.portal-palette-option:hover,
.portal-palette-option.active {
  border-color: color-mix(in srgb, var(--palette-option-accent, var(--brand-blue)) 46%, #ffffff);
  box-shadow: 0 8px 18px rgba(16, 32, 38, 0.12);
}

.portal-palette-option.active {
  outline: 2px solid color-mix(in srgb, var(--palette-option-accent, var(--brand-blue)) 36%, #ffffff);
}

.portal-palette-option span {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: var(--palette-option-accent, var(--brand-blue));
}

.portal-palette-option strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.system-dashboard-card {
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand-blue);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(16, 32, 38, 0.06);
}

.system-dashboard-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.system-dashboard-card strong {
  display: block;
  margin-top: 8px;
  color: var(--brand-blue-dark);
  font-size: 28px;
  line-height: 1;
}

.system-dashboard-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
}

.internal-url-list {
  display: grid;
  gap: 8px;
}

.internal-url-list div {
  display: grid;
  grid-template-columns: 72px minmax(180px, 0.8fr) minmax(220px, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.internal-url-list span {
  color: var(--brand-red);
  font-size: 12px;
  font-weight: 900;
}

.internal-url-list strong {
  color: var(--brand-blue-dark);
}

code {
  border: 1px solid rgba(8, 75, 131, 0.12);
  border-radius: 6px;
  padding: 2px 6px;
  background: rgba(8, 75, 131, 0.05);
  color: var(--brand-blue-dark);
}

input[type="color"] {
  width: 100%;
  height: 54px;
  padding: 4px;
  cursor: pointer;
}

.login-view {
  display: grid;
  min-height: calc(100vh - 20px);
  place-items: center;
}

.content:has(.core-login-view) {
  overflow: hidden;
  padding: 0;
}

.core-login-view {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding: clamp(22px, 3vh, 38px) clamp(28px, 4vw, 56px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 48%, rgba(25, 158, 178, 0.13), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(22, 116, 188, 0.12), transparent 28%),
    linear-gradient(135deg, #06121d 0%, #0a1724 52%, #08111b 100%);
}

.core-login-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(78px, 16vh, 170px);
  padding-left: clamp(28px, 5vw, 88px);
  pointer-events: none;
}

.core-login-bg img {
  width: min(52vw, 860px);
  max-height: 34vh;
  object-fit: contain;
  object-position: left center;
  opacity: 0.42;
  filter: saturate(0.95);
}

.core-login-view .login-panel {
  width: min(1040px, 100%);
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 420px);
  justify-self: center;
}

.core-login-view .login-copy {
  display: flex;
  min-height: min(420px, calc(100vh - 150px));
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 16px;
}

.core-login-view .login-copy .eyebrow {
  color: rgba(214, 231, 239, 0.68);
}

.core-login-view .login-copy h1 {
  color: #f6fbff;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.36);
}

.core-login-view .login-copy p {
  color: rgba(224, 236, 242, 0.76);
}

.core-login-view .form-card {
  color-scheme: dark;
  border: 1px solid rgba(153, 176, 190, 0.44);
  border-radius: 8px;
  background: rgba(12, 22, 36, 0.82);
  color: #f4f8fb;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
}

.core-login-view .form-card label {
  color: #dce8ee;
}

.core-login-view .form-card input,
.core-login-view .form-card select,
.core-login-view .form-card textarea {
  border-color: #607384;
  background: rgba(6, 16, 29, 0.82);
  color: #f4f8fb;
}

.core-login-view .form-card input::placeholder,
.core-login-view .form-card textarea::placeholder {
  color: rgba(220, 232, 238, 0.42);
}

.core-login-view .form-card .errorlist {
  color: #ffb3bd;
}

.core-login-view .primary-button {
  width: fit-content;
  box-shadow: 0 10px 24px rgba(22, 116, 188, 0.28);
}

.employee-login-view {
  position: relative;
  min-height: calc(100vh - 48px);
  margin: -24px;
  place-items: start center;
  padding: 6px 34px 52px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(64, 151, 208, 0.22), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(200, 16, 46, 0.12), transparent 28%),
    linear-gradient(180deg, #082b4a 0%, #173149 48%, #3f2239 100%);
}

.employee-login-view::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 42%, rgba(0, 0, 0, 0.14));
  content: "";
}

.login-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(920px, 100%);
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
}

.mfa-panel {
  width: min(820px, 100%);
}

.mfa-service-identity {
  display: grid;
  gap: 3px;
  margin-top: 18px;
  padding: 10px 0 10px 14px;
  border-left: 4px solid #22a7c7;
}

.mfa-service-identity small,
.mfa-service-identity span {
  color: rgba(224, 236, 242, 0.78);
}

.mfa-service-identity strong {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.mfa-service-tim {
  border-left-color: #e8a900;
}

.mfa-service-odoo {
  border-left-color: #a66a94;
}

.mfa-device-name-card {
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(109, 190, 220, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 48, 65, 0.96), rgba(13, 27, 42, 0.94));
}

.mfa-device-name-card strong {
  color: #f4f8fb;
  font-size: 16px;
}

.mfa-device-name-card small {
  color: rgba(224, 236, 242, 0.74);
  line-height: 1.35;
}

.mfa-device-name-field input {
  font-weight: 800;
}

.mfa-qr-box {
  display: flex;
  justify-content: center;
  padding: 14px;
  border: 1px solid rgba(8, 52, 85, 0.14);
  border-radius: 8px;
  background: #fff;
}

.mfa-qr-box img {
  display: block;
  width: min(240px, 100%);
  height: auto;
}

.employee-login-view .login-panel {
  width: min(1320px, 100%);
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

.login-brand-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 72px;
}

.employee-login-content {
  display: grid;
  width: min(980px, 100%);
  justify-self: center;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: center;
  margin-top: clamp(180px, 20vh, 280px);
}

.employee-login-view .form-card {
  border: 5px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(234, 239, 241, 0.86)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), #9ba7ad 52%, #3d464b) border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 24px 54px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}

.login-logo {
  width: min(1180px, 92vw);
  max-height: 160px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.24));
}

.login-copy h1 {
  font-size: 52px;
}

.employee-login-view .login-copy .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.employee-login-view .login-copy h1 {
  color: #ffffff;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.login-copy p {
  max-width: 520px;
  color: var(--muted);
  font-size: 18px;
}

.employee-login-view .login-copy p {
  color: rgba(255, 255, 255, 0.76);
}

.login-dsk-link-status {
  margin-top: 10px;
}

.login-local-messages {
  display: grid;
  gap: 8px;
}

.login-local-message {
  border: 1px solid rgba(22, 116, 188, 0.16);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(22, 116, 188, 0.06);
  color: var(--brand-blue-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.login-local-message.success {
  border-color: rgba(47, 135, 88, 0.22);
  background: rgba(47, 135, 88, 0.08);
  color: #246542;
}

.login-local-message.error {
  border-color: rgba(184, 68, 68, 0.24);
  background: rgba(184, 68, 68, 0.08);
  color: #8f1f31;
}

.login-language {
  background: var(--control-bg-strong);
}

.login-language a {
  color: var(--accent-strong);
}

.employee-header-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 18px;
  transform: translateY(6px);
}

.employee-name {
  color: var(--brand-blue-dark);
  font-size: 16px;
  line-height: 1.1;
}

.dsk-link-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid rgba(25, 32, 37, 0.12);
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.dsk-link-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d6a414;
  box-shadow: 0 0 0 3px rgba(214, 164, 20, 0.12);
}

.dsk-link-status.ok .dsk-link-dot {
  background: #2f8758;
  box-shadow: 0 0 0 3px rgba(47, 135, 88, 0.12);
}

.dsk-link-status.error .dsk-link-dot {
  background: #b84444;
  box-shadow: 0 0 0 3px rgba(184, 68, 68, 0.13);
}

.dsk-link-state {
  color: var(--ink);
}

.employee-dashboard {
  display: grid;
  gap: 14px;
}

.employee-hero-row {
  display: grid;
  grid-template-columns: minmax(300px, 1.4fr) minmax(170px, 0.8fr) minmax(170px, 0.8fr) 104px;
  gap: 14px;
  align-items: stretch;
}

.employee-tim-logo-tile {
  display: grid;
  width: 104px;
  height: 104px;
  align-self: start;
  justify-self: end;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--brand-blue) 32%, var(--line));
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--brand-blue) 6%, var(--surface));
  color: var(--brand-blue-dark);
}

.employee-tim-logo-tile img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.employee-tim-logo-tile strong {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.employee-summary-grid,
.employee-work-grid {
  display: grid;
  gap: 14px;
}

.employee-summary-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.tim-dashboard-notifications {
  display: grid;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.tim-dashboard-notifications-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tim-dashboard-notifications-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 750;
}

.tim-dashboard-notifications-head small {
  color: var(--muted);
  font-size: 11px;
}

.tim-notification-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 9px;
}

.tim-notification-widget {
  min-width: 0;
  border: 1px solid var(--line);
  border-top: 3px solid #6c8290;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand-blue) 6%);
  overflow: hidden;
}

.tim-notification-widget.tone-warning {
  border-top-color: #c78920;
}

.tim-notification-widget.tone-personal {
  border-top-color: #1788a0;
}

.tim-notification-widget.tone-absence {
  border-top-color: #3a79a8;
}

.tim-notification-widget.tone-clocking {
  border-top-color: #557a44;
}

.tim-notification-widget.tone-birthday {
  border-top-color: #9b557c;
}

.tim-notification-widget.tone-directory {
  border-top-color: #667985;
}

.tim-notification-widget > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
}

.tim-notification-widget h3 {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.tim-notification-widget > header > span {
  min-width: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
  text-align: center;
}

.tim-directory-search {
  display: grid;
  gap: 3px;
  padding: 8px 10px 0;
}

.tim-directory-search > span {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tim-directory-search input {
  width: 100%;
  min-height: 31px;
  border-color: color-mix(in srgb, #667985 52%, var(--line));
  background: var(--control-bg);
  color: var(--ink);
  font-size: 11px;
}

.tim-notification-item.state-directory > i {
  background: #667985;
}

.tim-directory-result[hidden] {
  display: none;
}

.tim-notification-list {
  max-height: 150px;
  overflow: auto;
  padding: 2px 9px;
}

.tim-notification-item {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.tim-notification-item:first-child {
  border-top: 0;
}

.tim-notification-item > i {
  width: 6px;
  min-height: 30px;
  border-radius: 2px;
  background: #6c8290;
}

.tim-notification-item.state-entry > i { background: #4f8324; }
.tim-notification-item.state-exit > i { background: #c9371e; }
.tim-notification-item.state-mission > i { background: #d99c00; }
.tim-notification-item.state-pending > i { background: #c78920; }
.tim-notification-item.state-absence > i { background: #3a79a8; }
.tim-notification-item.state-birthday > i { background: #9b557c; }

.tim-notification-item p {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin: 0;
}

.tim-notification-item p.has-account-dot {
  position: relative;
  padding-left: 12px;
}

.tim-notification-item p.has-account-dot::before {
  position: absolute;
  top: 3px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid color-mix(in srgb, var(--tim-account-color) 78%, #26343b);
  border-radius: 50%;
  background: var(--tim-account-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 72%, transparent);
  content: "";
}

.tim-notification-item strong,
.tim-notification-item span,
.tim-notification-item small {
  overflow-wrap: anywhere;
}

.tim-notification-item strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.tim-notification-item span,
.tim-notification-item small,
.tim-notification-empty {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.tim-notification-empty {
  margin: 0;
  padding: 12px 0;
}

.tim-approval-actions {
  display: flex;
  align-self: center;
  gap: 5px;
}

.tim-approval-button {
  display: grid;
  width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0;
  color: #fff;
  cursor: pointer;
}

.tim-approval-button.approve {
  border-color: #39751d;
  background: #4f8f2b;
}

.tim-approval-button.reject {
  border-color: #a82920;
  background: #d13b2d;
}

.tim-approval-button.approve::before {
  content: "\2713";
  font-size: 18px;
  font-weight: 800;
}

.tim-approval-button.reject::before {
  content: "\00d7";
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.tim-approval-button:hover,
.tim-approval-button:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid color-mix(in srgb, currentColor 72%, transparent);
  outline-offset: 2px;
}

.tim-approval-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.tim-decision-feedback {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 650;
}

.tim-decision-feedback.success {
  border-color: #5a8a43;
  background: color-mix(in srgb, #5a8a43 12%, var(--surface));
  color: color-mix(in srgb, #2f6c21 78%, var(--ink));
}

.tim-decision-feedback.error {
  border-color: #c74a3c;
  background: color-mix(in srgb, #c74a3c 12%, var(--surface));
  color: color-mix(in srgb, #a62820 78%, var(--ink));
}

.employee-work-grid {
  grid-template-columns: minmax(290px, 0.9fr) minmax(320px, 1.1fr);
  align-items: start;
}

.employee-status-card,
.employee-balance-card,
.employee-summary-card,
.dashboard-clock-panel,
.employee-vacation-panel,
.pointage-panel,
.employee-messages {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(16, 32, 38, 0.06);
}

.employee-status-card {
  border-left: 5px solid var(--success);
}

.employee-status-card span,
.employee-balance-card span,
.employee-summary-card span,
.message-feed span,
.pointage-panel small,
.employee-vacation-panel small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.employee-status-card h2,
.employee-balance-card strong,
.employee-summary-card strong,
.pointage-panel h2,
.employee-messages h2,
.employee-vacation-panel h2 {
  margin: 6px 0 0;
  font-size: 22px;
}

.employee-balance-card,
.employee-summary-card {
  display: grid;
  gap: 4px;
  align-content: center;
}

.employee-balance-card strong {
  color: var(--brand-blue-dark);
  font-size: 28px;
}

.employee-balance-card small {
  color: var(--muted);
  font-weight: 700;
}

.employee-summary-card strong {
  font-size: 24px;
}

.employee-status-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.employee-status-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, max-content));
  gap: 8px;
  margin-top: 12px;
}

.employee-status-actions .employee-action-button,
.employee-vacation-panel .settings-section-head .employee-action-button {
  width: 142px;
  min-width: 142px;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
}

.employee-status-actions .checklist-action {
  position: relative;
  gap: 6px;
}

.employee-status-actions .checklist-action span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  line-height: 1;
}

.employee-status-actions .checklist-action.has-errors {
  border-color: rgba(143, 31, 49, 0.72);
  background: #b84444;
  color: #fff;
  box-shadow: 0 10px 22px rgba(184, 68, 68, 0.24);
}

.employee-status-actions .checklist-action.has-errors span {
  background: rgba(255, 255, 255, 0.9);
  color: #8f1f31;
}

.employee-status-actions .checklist-action.is-clean {
  border-color: rgba(47, 135, 88, 0.34);
  background: rgba(47, 135, 88, 0.1);
  color: #246542;
}

.header-dsk-signout-form {
  display: flex;
  align-items: center;
}

.header-dsk-signout {
  width: auto;
  min-width: 92px;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11px;
  border-color: rgba(25, 32, 37, 0.22);
  background: rgba(25, 32, 37, 0.08);
  color: var(--ink);
}

.header-dsk-signout:hover {
  border-color: rgba(183, 19, 19, 0.35);
  background: rgba(183, 19, 19, 0.09);
  color: var(--accent-strong);
}

.employee-session-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.employee-session-settings label {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.employee-session-settings .session-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  font-size: 11px;
  text-transform: none;
}

.employee-session-settings input[type="number"] {
  width: 58px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 850;
}

.employee-session-settings .compact-session-save {
  width: auto;
  min-width: 58px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

.recap-cta {
  box-shadow: 0 10px 22px rgba(183, 19, 19, 0.2);
}

.pointage-panel {
  display: grid;
  gap: 12px;
}

.dashboard-clock-panel {
  display: grid;
  gap: 14px;
}

.absence-request-page {
  display: grid;
  gap: 12px;
}

.absence-return-row {
  display: grid;
  justify-items: end;
}

.absence-request-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(16, 32, 38, 0.06);
}

.absence-request-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

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

.absence-request-form label,
.absence-account-row,
.absence-duration-row,
.absence-note-field {
  display: grid;
  gap: 6px;
}

.absence-request-form label span,
.absence-account-row > span,
.absence-duration-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.absence-request-form input,
.absence-request-form select,
.absence-request-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--control-bg);
  color: var(--ink);
  font: inherit;
}

.absence-duration-row ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.absence-account-row {
  grid-column: 1 / -1;
}

.absence-account-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
}

.absence-account-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 2px solid var(--account-color, var(--line));
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
  font-weight: 850;
}

.absence-account-option input {
  width: auto;
}

.account-option-1 { --account-color: #16f42e; }
.account-option-2 { --account-color: #c8d86a; }
.account-option-3 { --account-color: #099657; }
.account-option-4 { --account-color: #16d9e6; }
.account-option-5 { --account-color: #a95855; }
.account-option-6 { --account-color: #8a18f5; }

.absence-duration-row label {
  display: inline-flex;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
}

.absence-actions,
.absence-request-lists {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.absence-request-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.pointage-actions {
  display: flex;
  gap: 8px;
}

.pointage-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.employee-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.employee-list h3 {
  margin: 4px 0;
  color: var(--brand-blue-dark);
  font-size: 13px;
  text-transform: uppercase;
}

.employee-list div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.employee-list strong {
  color: var(--ink);
}

.employee-list span {
  color: var(--muted);
}

.time-clock-stage {
  display: grid;
  grid-template-columns: minmax(360px, 540px) minmax(280px, 360px);
  gap: 18px;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 180px);
  margin: -32px;
  padding: 42px;
  background: #242424;
}

.time-clock-card {
  position: relative;
  display: grid;
  gap: 22px;
  width: min(440px, 100%);
  margin: 0 auto;
  border: 6px solid transparent;
  border-radius: 24px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04)) padding-box,
    linear-gradient(135deg, #ffffff, #9ba7ad 48%, #3d464b) border-box;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 22px 44px rgba(0, 0, 0, 0.28);
}

.time-clock-card > * {
  min-width: 0;
  max-width: 100%;
}

.time-clock-card.clock-feedback-pending {
  outline: 4px solid rgba(244, 176, 0, 0.78);
  outline-offset: 3px;
}

.time-clock-card.clock-feedback-ok {
  outline: 5px solid rgba(47, 135, 88, 0.92);
  outline-offset: 3px;
}

.time-clock-card.clock-feedback-error {
  outline: 5px solid rgba(215, 55, 36, 0.96);
  outline-offset: 3px;
}

.dashboard-time-clock-card {
  width: 100%;
  max-width: 430px;
  gap: 18px;
  padding: 20px;
  margin: 8px auto;
  transform: scale(1.05);
  transform-origin: center;
  outline: 2px solid rgba(35, 55, 63, 0.52);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 18px 34px rgba(16, 32, 38, 0.2);
}

.dashboard-time-clock-card .clock-last-icon {
  width: 54px;
  height: 54px;
}

.dashboard-time-clock-card .clock-last-booking strong {
  font-size: 22px;
}

.dashboard-time-clock-card .clock-time {
  font-size: 48px;
}

.dashboard-time-clock-card .clock-button {
  min-height: 64px;
  padding: 8px;
}

.dashboard-time-clock-card .clock-button-icon {
  width: 44px;
  height: 44px;
}

.dashboard-time-clock-card .clock-button.mission .clock-button-icon {
  width: 47px;
  height: 47px;
}

.clock-last-booking {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  padding: 0 8px;
  text-align: left;
}

.clock-last-icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
}

.clock-action-symbol,
.clock-button-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
}

.clock-action-symbol::before,
.clock-button-icon::before {
  content: "";
  width: 24px;
  height: 30px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.clock-action-symbol::after,
.clock-button-icon::after {
  position: absolute;
  content: "→";
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.clock-last-icon.exit .clock-action-symbol::after,
.clock-button.exit .clock-button-icon::after {
  content: "←";
}

.clock-last-icon.mission .clock-action-symbol::before,
.clock-button.mission .clock-button-icon::before {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.clock-last-icon.mission .clock-action-symbol::after,
.clock-button.mission .clock-button-icon::after {
  content: "↗";
  font-size: 20px;
}

.clock-button.info .clock-button-icon::before {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.clock-button.info .clock-button-icon::after {
  content: "i";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-style: italic;
}

.clock-last-icon.entry,
.clock-button.entry {
  background: #558c1f;
}

.clock-last-icon.exit,
.clock-button.exit {
  background: #d73724;
}

.clock-last-icon.mission,
.clock-button.mission {
  background: #f4b000;
}

.clock-last-booking > div:not(.clock-last-icon) span,
.clock-last-booking > div:not(.clock-last-icon) small {
  display: block;
  color: rgba(255, 255, 255, 0.84);
}

.clock-last-booking > div:not(.clock-last-icon) strong {
  display: block;
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
}

.clock-face {
  position: relative;
  display: grid;
  gap: 4px;
  border: 2px solid rgba(110, 178, 58, 0.62);
  border-radius: 7px;
  padding: 10px 14px;
  background: #d8d8d8;
  color: #111;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.clock-feedback-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border-radius: 6px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.82);
  color: #111;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  pointer-events: none;
}

.clock-feedback-ok .clock-feedback-badge {
  background: rgba(47, 135, 88, 0.94);
  color: #fff;
}

.clock-feedback-error .clock-feedback-badge {
  background: rgba(215, 55, 36, 0.96);
  color: #fff;
}

.clock-feedback-pending .clock-feedback-badge {
  background: rgba(244, 176, 0, 0.94);
  color: #111;
}

.clock-face.clock-state-entry {
  border-color: rgba(85, 140, 31, 0.66);
}

.clock-face.clock-state-exit {
  border-color: rgba(215, 55, 36, 0.62);
}

.clock-face.clock-state-mission {
  border-color: rgba(244, 176, 0, 0.68);
}

.clock-face.clock-state-info {
  border-color: rgba(47, 111, 237, 0.58);
}

.clock-date {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}

.clock-time {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 58px;
  line-height: 1.05;
  text-align: center;
}

.clock-balance {
  justify-self: center;
  border-radius: 6px;
  padding: 5px 10px;
  background: #fff3cd;
  color: #856404;
  font-weight: 800;
}

.clock-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.clock-network-warning {
  display: grid;
  gap: 3px;
  border: 2px solid rgba(215, 55, 36, 0.82);
  border-radius: 7px;
  padding: 9px 11px;
  background: rgba(255, 239, 236, 0.96);
  color: #7d2018;
  text-align: left;
}

.clock-network-warning strong {
  color: #a32319;
  font-size: 13px;
}

.clock-network-warning span {
  color: #7d2018;
  font-size: 11.5px;
  font-weight: 700;
}

.clock-network-warning small {
  color: #6e3a35;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.clock-button {
  display: grid;
  place-items: center;
  min-height: 78px;
  border: 0;
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  text-align: center;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.clock-button:active,
.clock-button.is-sending {
  transform: translateY(2px) scale(0.97);
  filter: brightness(0.88) saturate(1.12);
  box-shadow: inset 0 5px 12px rgba(0, 0, 0, 0.28);
}

.clock-actions.is-sending .clock-button:not(.is-sending) {
  opacity: 0.55;
}

.clock-actions.is-blocked .clock-button,
.clock-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.38) saturate(0.7);
  opacity: 0.42;
  box-shadow: none;
}

.clock-actions.is-blocked .clock-button:active,
.clock-button:disabled:active {
  transform: none;
}

.clock-button.info {
  background: #b85f00;
}

.clock-action-symbol::after,
.clock-button-icon::after {
  content: "\2192";
  font-size: 31px;
}

.clock-last-icon.exit .clock-action-symbol::after,
.clock-button.exit .clock-button-icon::after {
  content: "\2190";
}

.clock-last-icon.mission .clock-action-symbol::before,
.clock-button.mission .clock-button-icon::before,
.clock-button.info .clock-button-icon::before {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.clock-last-icon.mission .clock-action-symbol::after,
.clock-button.mission .clock-button-icon::after {
  content: "\2197";
  font-size: 30px;
}

.clock-button.info .clock-button-icon::after {
  content: "i";
  font-size: 29px;
}

.clock-action-symbol,
.clock-button-icon {
  width: 50px;
  height: 50px;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.clock-action-symbol::before,
.clock-action-symbol::after,
.clock-button-icon::before,
.clock-button-icon::after {
  content: none;
}

.clock-last-icon.entry .clock-action-symbol,
.clock-button.entry .clock-button-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M36 14h14v36H36M12 32h25M27 21l12 11-12 11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M36 14h14v36H36M12 32h25M27 21l12 11-12 11'/%3E%3C/svg%3E");
}

.clock-last-icon.exit .clock-action-symbol,
.clock-button.exit .clock-button-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M28 14h14v36H28M52 32H27M37 21 25 32l12 11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M28 14h14v36H28M52 32H27M37 21 25 32l12 11'/%3E%3C/svg%3E");
}

.clock-last-icon.mission .clock-action-symbol,
.clock-button.mission .clock-button-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M18 46 42 22M28 20h16v16M14 18h10M14 32h10M14 46h10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M18 46 42 22M28 20h16v16M14 18h10M14 32h10M14 46h10'/%3E%3C/svg%3E");
}

.clock-button.info .clock-button-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M32 28v18M32 18h.01'/%3E%3Ccircle cx='32' cy='32' r='24' fill='none' stroke='black' stroke-width='6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M32 28v18M32 18h.01'/%3E%3Ccircle cx='32' cy='32' r='24' fill='none' stroke='black' stroke-width='6'/%3E%3C/svg%3E");
}

.clock-last-booking > div:not(.clock-last-icon) span {
  font-size: 14px;
}

.clock-last-booking > div:not(.clock-last-icon) strong {
  font-size: 30px;
  font-weight: 800;
}

.clock-last-booking > div:not(.clock-last-icon) small {
  font-size: 14px;
}

.dashboard-time-clock-card .clock-last-booking > div:not(.clock-last-icon) strong {
  font-size: 27px;
}

.clock-last-icon.exit .clock-action-symbol,
.clock-button.exit .clock-button-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M12 12h22v40H12zM34 32h18M43 22l10 10-10 10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M12 12h22v40H12zM34 32h18M43 22l10 10-10 10'/%3E%3C/svg%3E");
}

.clock-last-icon.mission .clock-action-symbol,
.clock-button.mission .clock-button-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M10 22h44v30H10zM22 22v-8h20v8M20 38h24M44 38l-9-8M44 38l-9 8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M10 22h44v30H10zM22 22v-8h20v8M20 38h24M44 38l-9-8M44 38l-9 8'/%3E%3C/svg%3E");
}

.clock-button.mission .clock-button-icon {
  width: 52px;
  height: 52px;
}

.clock-last-icon.mission,
.clock-button.mission {
  background: #d99a00;
}

.clock-side-panel {
  display: grid;
  gap: 14px;
  align-self: stretch;
}

.clock-side-panel section {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.clock-side-panel h2 {
  margin-top: 0;
  font-size: 18px;
}

.clock-side-panel .employee-list div {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.clock-side-panel .employee-list span,
.clock-side-panel .muted {
  color: rgba(255, 255, 255, 0.7);
}

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

.recap-toolbar {
  margin-bottom: 2px;
}

.recap-month-control {
  display: grid;
  grid-template-columns: minmax(132px, auto) minmax(220px, auto) minmax(132px, auto);
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.recap-month-control > div {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 220px;
  border-radius: 8px;
  padding: 4px 12px;
  background: var(--technical-soft);
}

.recap-toolbar span,
.recap-totals article > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.recap-toolbar strong {
  color: var(--brand-blue-dark);
  font-size: 24px;
}

.recap-table-panel {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--recap-panel);
  box-shadow: 0 12px 28px rgba(16, 32, 38, 0.1);
}

.recap-mobile-list {
  display: none;
}

.recap-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--recap-text);
  font-size: 13px;
}

.recap-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 12px;
  background: var(--recap-head);
  color: var(--brand-blue-dark);
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
}

.recap-table td {
  border-top: 1px solid var(--line);
  padding: 9px 12px;
  background: var(--recap-row);
  vertical-align: top;
}

.recap-table tr.weekend td {
  background: var(--recap-row-alt);
}

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

.checklist-summary article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
}

.checklist-summary article span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.checklist-summary article strong {
  display: block;
  margin-top: 4px;
  font-size: 32px;
}

.checklist-summary article.danger {
  border-color: rgba(184, 68, 68, 0.36);
  background: rgba(184, 68, 68, 0.08);
}

.checklist-summary article.warning {
  border-color: rgba(217, 154, 0, 0.38);
  background: rgba(217, 154, 0, 0.1);
}

.checklist-panel {
  display: grid;
  gap: 10px;
}

.checklist-item,
.checklist-empty {
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
}

.checklist-item {
  display: grid;
  grid-template-columns: 140px 90px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.checklist-item.error {
  border-left-color: var(--danger);
}

.checklist-item.warning {
  border-left-color: #d99a00;
}

.checklist-item time,
.checklist-item strong {
  font-size: 13px;
}

.checklist-item p,
.checklist-empty p {
  margin: 0;
}

.checklist-empty {
  border-left-color: var(--success);
}

.recap-table td:first-child strong,
.recap-table td:first-child span {
  display: block;
}

.recap-table td:first-child span {
  color: var(--recap-soft-text);
}

.recap-bookings,
.recap-accounts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.recap-bookings-cell {
  min-width: 250px;
}

.recap-bookings-cell,
.booking-request-actions {
  align-items: center;
}

.recap-bookings-cell {
  display: flex;
  gap: 8px;
}

.recap-bookings-cell .recap-bookings {
  flex: 1;
}

.booking-request-add {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #0878b9;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(8, 120, 185, 0.22);
}

.booking-request-add-mobile {
  display: none;
}

.booking-request-add:hover {
  background: #075f93;
}

.booking-request-add:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

.recap-bookings span,
.recap-accounts span {
  border-radius: 5px;
  padding: 3px 6px;
  background: var(--recap-chip);
  color: var(--recap-text);
  font-weight: 800;
}

.recap-bookings small {
  color: currentColor;
  font-weight: 700;
  opacity: 0.68;
}

.recap-bookings .booking-entry {
  background: #dff4e8;
  color: #165b35;
}

.recap-bookings .booking-mission {
  background: #fff0bd;
  color: #7a5100;
}

.recap-bookings .booking-exit {
  background: #ffe0dc;
  color: #98281d;
}

.recap-bookings .booking-pause {
  background: #dfeafb;
  color: #285d9a;
}

.recap-bookings .booking-special {
  background: #f6e2c4;
  color: #7b430d;
}

.recap-bookings .booking-booking {
  background: #e3edf7;
  color: #174e7e;
}

.booking-request-feedback {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  max-width: min(460px, calc(100vw - 44px));
  border: 1px solid rgba(31, 122, 77, 0.42);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 12px 15px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 700;
}

.booking-request-feedback.error {
  border-color: rgba(184, 68, 68, 0.5);
}

.booking-request-dialog {
  width: min(570px, calc(100vw - 32px));
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.booking-request-form {
  display: grid;
  gap: 15px;
  padding: 22px;
}

.booking-request-kicker {
  color: #0878b9;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.booking-request-dialog .modal-head h2 {
  margin-top: 3px;
  color: var(--ink);
  font-size: 20px;
  letter-spacing: 0;
}

.booking-request-identity {
  display: grid;
  gap: 4px;
  border-left: 3px solid #0878b9;
  padding-left: 11px;
  color: var(--ink);
  font-size: 13px;
}

.booking-request-hint {
  margin: 0;
  border-radius: 6px;
  padding: 9px 11px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.booking-request-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.booking-request-types legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.request-type {
  display: block;
  cursor: pointer;
}

.request-type input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.request-type span {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.request-type.entry span {
  background: #dff4e8;
  color: #165b35;
}

.request-type.exit span {
  background: #ffe0dc;
  color: #98281d;
}

.request-type.mission span {
  background: #fff0bd;
  color: #7a5100;
}

.request-type.pause span {
  background: #dfeafb;
  color: #285d9a;
}

.request-type input:checked + span {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 2px 8px rgba(16, 32, 38, 0.12);
}

.request-type input:focus-visible + span {
  outline: 2px solid #0878b9;
  outline-offset: 2px;
}

.booking-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 3px;
}

@media (max-width: 620px) {
  .booking-request-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-request-form {
    padding: 16px;
  }
}

.recap-table .negative {
  color: var(--danger);
}

.recap-table .positive {
  color: var(--success);
}

.recap-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.recap-totals article {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(16, 32, 38, 0.06);
}

.recap-total-line,
.recap-account-total-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.recap-total-line b,
.recap-account-total-list b {
  color: var(--brand-blue-dark);
}

.final-balance-line {
  border-top-color: rgba(47, 135, 88, 0.32);
  color: var(--success);
}

.final-balance-line b {
  color: var(--success);
}

.recap-account-total-list {
  display: grid;
  gap: 8px;
}

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

.annual-toolbar {
  margin-bottom: 2px;
}

.period-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: 100%;
}

.period-page-header .period-toolbar {
  grid-column: 1;
  grid-template-columns: minmax(108px, max-content) minmax(228px, max-content) minmax(108px, max-content);
  justify-self: center;
  width: auto;
}

.period-page-header .period-toolbar > a:first-child {
  grid-column: 1;
}

.period-page-header .period-toolbar .period-current {
  grid-column: 2;
}

.period-page-header .period-toolbar > a:nth-of-type(2) {
  grid-column: 3;
}

.period-page-header .period-header-actions {
  grid-column: 1;
  justify-self: end;
  margin: 0;
}

.period-header-actions .period-return {
  margin-left: 8px;
}

@media (min-width: 1201px) {
  .period-page-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(360px, 1fr);
    gap: 6px;
  }

  .period-page-header .period-toolbar {
    grid-column: 2;
  }

  .period-page-header .period-header-actions {
    grid-column: 3;
  }
}

.annual-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: -6px;
}

.annual-report-actions .employee-action-button {
  width: auto;
  min-width: 112px;
  min-height: 34px;
  padding: 7px 12px;
}

.annual-email-button {
  border-color: color-mix(in srgb, var(--brand-blue) 36%, var(--line));
  background: color-mix(in srgb, var(--brand-blue) 10%, var(--control-bg));
}

.annual-email-dialog {
  width: min(1060px, calc(100vw - 32px));
  max-width: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.annual-email-preview {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.annual-email-preview .modal-head h2 {
  color: var(--ink);
}

.annual-email-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(270px, 0.65fr);
  gap: 14px;
  min-height: min(68vh, 650px);
}

.annual-email-preview iframe {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.annual-email-form {
  display: grid;
  align-content: start;
  gap: 18px;
  border-left: 1px solid var(--line);
  padding: 10px 0 10px 16px;
}

.annual-email-form small,
.email-settings-layout label small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35;
}

.annual-email-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.annual-email-form-actions .soft-button,
.annual-email-form-actions .primary-button {
  width: auto;
}

.annual-toolbar > div {
  display: grid;
  min-width: 160px;
  justify-items: center;
  border-radius: 8px;
  padding: 5px 14px;
  background: var(--technical-soft);
}

.annual-toolbar span,
.annual-person-strip span,
.annual-overview-strip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.annual-toolbar strong {
  color: var(--brand-blue-dark);
  font-size: 28px;
}

.period-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(108px, max-content) minmax(228px, max-content) minmax(108px, max-content) minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.period-toolbar > a:first-child {
  grid-column: 2;
}

.period-toolbar .period-current {
  grid-column: 3;
}

.period-toolbar > a:nth-of-type(2):not(.period-return) {
  grid-column: 4;
}

.period-toolbar .period-current {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 38px;
  min-width: 228px;
  border-radius: 8px;
  padding: 6px 16px;
  background: var(--technical-soft);
  box-sizing: border-box;
}

.period-toolbar > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 108px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.period-toolbar .period-current span {
  font-size: 13px;
  line-height: 1;
}

.period-toolbar .period-current strong {
  font-size: 27px;
  line-height: 1.1;
}

.period-toolbar .period-return {
  grid-column: 5;
  justify-self: end;
  min-width: 82px;
}

.annual-person-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.annual-person-strip > div {
  display: grid;
  gap: 3px;
  min-height: 72px;
  align-content: center;
  border-left: 1px solid var(--line);
  padding: 12px 14px;
}

.annual-person-strip > div:first-child {
  border-left: 0;
}

.annual-person-strip strong {
  color: var(--ink);
}

.annual-person-strip small {
  color: var(--muted);
}

.annual-overview-strip {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 0.8fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.annual-counter-list {
  display: grid;
  align-content: center;
  min-width: 0;
}

.annual-counter-row {
  display: grid;
  grid-template-columns: minmax(145px, 1.25fr) repeat(6, minmax(76px, 0.75fr));
  align-items: center;
  width: 100%;
  min-height: 84px;
  border: 0;
  padding: 10px 14px;
  gap: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.annual-counter-row + .annual-counter-row {
  border-top: 1px solid var(--line);
}

.annual-counter-row:hover,
.annual-counter-row:focus-visible {
  background: var(--technical-soft);
}

.annual-counter-row:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: -2px;
}

.annual-counter-row > div:not(.annual-counter-name) {
  display: grid;
  gap: 5px;
}

.annual-counter-row > div:not(.annual-counter-name) > span {
  font-size: 10px;
  white-space: nowrap;
}

.annual-counter-row strong {
  color: var(--ink);
  font-size: 16px;
}

.annual-counter-name {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.annual-counter-name > span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  font-size: 11px;
  text-transform: none;
}

.annual-person-summary {
  display: grid;
  align-content: center;
  gap: 5px;
  border-left: 1px solid var(--line);
  padding: 12px 16px;
}

.annual-person-summary > div {
  display: grid;
  grid-template-columns: minmax(88px, 0.55fr) minmax(0, 1fr);
  gap: 12px;
}

.annual-person-summary strong {
  color: var(--ink);
  text-align: right;
}

.annual-counter-dialog {
  width: min(450px, calc(100vw - 32px));
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.annual-counter-detail {
  display: grid;
  gap: 18px;
  padding: 22px 24px;
}

.annual-counter-detail .modal-head h2 {
  color: var(--ink);
  font-size: 21px;
  text-transform: uppercase;
}

.annual-counter-detail dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.annual-counter-detail dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  padding: 7px 8px;
}

.annual-counter-detail dt,
.annual-counter-detail dd {
  margin: 0;
}

.annual-counter-detail dd {
  text-align: right;
}

.annual-counter-detail-total {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-weight: 800;
}

.annual-grid-panel,
.annual-accounts-panel {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.annual-grid,
.annual-accounts {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.annual-grid {
  min-width: 1180px;
  table-layout: fixed;
}

.annual-grid th,
.annual-grid td,
.annual-accounts th,
.annual-accounts td {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding: 6px 7px;
  text-align: center;
  white-space: nowrap;
}

.annual-grid thead th,
.annual-accounts thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--technical-soft);
  color: var(--brand-blue-dark);
  font-size: 11px;
}

.annual-grid th:first-child,
.annual-accounts th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 72px;
  background: var(--surface);
  text-align: left;
}

.annual-grid th:first-child {
  width: 78px;
  min-width: 78px;
  max-width: 78px;
}

.annual-grid thead th:first-child {
  z-index: 3;
  background: var(--surface);
}

.annual-accounts thead th:first-child {
  z-index: 3;
  background: var(--technical-soft);
}

.annual-grid thead th:not(:first-child):not(:last-child),
.annual-grid tbody td:not(:last-child) {
  height: 30px;
  min-height: 30px;
  padding: 0 2px;
  box-sizing: border-box;
  line-height: 30px;
  vertical-align: middle;
  overflow: hidden;
}

.annual-grid tbody td.weekday {
  background: var(--annual-weekday);
}

.annual-grid .annual-total,
.annual-grid thead th:last-child {
  width: 72px;
  min-width: 72px;
}

.annual-grid tbody td.saturday {
  background: var(--annual-saturday);
}

.annual-grid tbody td.sunday {
  background: var(--annual-sunday);
}

.annual-grid tbody td.holiday {
  background: var(--annual-holiday);
  color: #0f3c73;
  font-weight: 900;
  position: relative;
}

.annual-grid tbody td.official-holiday {
  background: var(--annual-holiday);
  color: #0f3c73;
  font-weight: 900;
  position: relative;
}

.annual-grid tbody td.absence {
  color: #7a1d2b;
  font-weight: 900;
  position: relative;
}

.annual-grid tbody td.annual-leave {
  color: #0b4c27;
  font-weight: 900;
  position: relative;
}

.annual-grid tbody td.pending {
  color: #7a5100;
  font-weight: 900;
  position: relative;
}

.annual-grid tbody td.account-unpaid,
.annual-grid tbody td.account-exceptional,
.annual-grid tbody td.account-recovery,
.annual-grid tbody td.account-medical,
.annual-grid tbody td.account-home-office {
  color: var(--annual-account-text, var(--ink));
  font-weight: 900;
  position: relative;
}

.annual-grid tbody td.account-unpaid {
  --annual-account-color: #c8d86a;
  --annual-account-text: #647020;
}

.annual-grid tbody td.account-exceptional {
  --annual-account-color: #099657;
  --annual-account-text: #07643b;
}

.annual-grid tbody td.account-recovery {
  --annual-account-color: #16d9e6;
  --annual-account-text: #087780;
}

.annual-grid tbody td.account-medical {
  --annual-account-color: #a95855;
  --annual-account-text: #773c3a;
}

.annual-grid tbody td.account-home-office {
  --annual-account-color: #8a18f5;
  --annual-account-text: #5b10a3;
}

.annual-grid tbody td.holiday::after,
.annual-grid tbody td.absence::after,
.annual-grid tbody td.annual-leave::after,
.annual-grid tbody td.pending::after,
.annual-grid tbody td.account-unpaid::after,
.annual-grid tbody td.account-exceptional::after,
.annual-grid tbody td.account-recovery::after,
.annual-grid tbody td.account-medical::after,
.annual-grid tbody td.account-home-office::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 2px;
  pointer-events: none;
}

.annual-grid tbody td.holiday::after {
  border: 2px solid #2d7ecb;
}

.annual-grid tbody td.absence::after {
  border: 2px solid #ca5366;
}

.annual-grid tbody td.annual-leave::after {
  border: 2px solid #16f42e;
}

.annual-grid tbody td.pending::after {
  border: 2px solid #d59b12;
}

.annual-grid tbody td.account-unpaid::after,
.annual-grid tbody td.account-exceptional::after,
.annual-grid tbody td.account-recovery::after,
.annual-grid tbody td.account-medical::after,
.annual-grid tbody td.account-home-office::after {
  border: 2px solid var(--annual-account-color);
}

.annual-grid tbody td.empty {
  background: repeating-linear-gradient(
    45deg,
    var(--annual-not-employed-a) 0,
    var(--annual-not-employed-a) 6px,
    var(--annual-not-employed-b) 6px,
    var(--annual-not-employed-b) 12px
  );
  color: transparent;
}

.annual-grid tbody td.not-employed {
  background: repeating-linear-gradient(
    45deg,
    var(--annual-not-employed-a) 0,
    var(--annual-not-employed-a) 6px,
    var(--annual-not-employed-b) 6px,
    var(--annual-not-employed-b) 12px
  );
  color: transparent;
}

.annual-grid .annual-total,
.annual-year-total td,
.annual-accounts td:last-child {
  color: var(--brand-blue-dark);
  font-weight: 900;
}

.annual-year-total th,
.annual-year-total td {
  background: var(--surface);
}

.annual-grid thead th {
  background: var(--surface);
}

.annual-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 14px;
  align-items: start;
}

.annual-lower-grid article {
  display: grid;
  gap: 10px;
}

.annual-accounts {
  min-width: 920px;
}

.annual-accounts th span {
  display: block;
  color: var(--muted);
  font-weight: 700;
}

.annual-accounts tr.account-annual-leave th strong {
  color: #16f42e;
}

.annual-accounts tr.account-annual-leave th {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #16f42e;
}

.annual-accounts tr.account-holiday th strong {
  color: #2d7ecb;
}

.annual-accounts tr.account-holiday th {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #2d7ecb;
}

.annual-accounts tr.account-absence th strong {
  color: #ca5366;
}

.annual-accounts tr.account-absence th {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #ca5366;
}

.annual-accounts tr.account-unpaid th strong {
  color: #c8d86a;
}

.annual-accounts tr.account-unpaid th {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #c8d86a;
}

.annual-accounts tr.account-exceptional th strong {
  color: #099657;
}

.annual-accounts tr.account-exceptional th {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #099657;
}

.annual-accounts tr.account-recovery th strong {
  color: #16d9e6;
}

.annual-accounts tr.account-recovery th {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #16d9e6;
}

.annual-accounts tr.account-medical th strong {
  color: #a95855;
}

.annual-accounts tr.account-medical th {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #a95855;
}

.annual-accounts tr.account-home-office th strong {
  color: #8a18f5;
}

.annual-accounts tr.account-home-office th {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px #8a18f5;
}

.holiday-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.holiday-list div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 8px 10px;
}

.holiday-list div:first-child {
  border-top: 0;
}

.holiday-list span {
  color: var(--muted);
}

.message-feed {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}

.message-feed article {
  border-left: 4px solid var(--brand-blue);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--technical-soft);
}

.message-feed article.important {
  border-left-color: var(--accent);
  background: #fff7f7;
}

.message-feed h3 {
  margin: 4px 0;
  font-size: 16px;
}

.message-feed p {
  margin: 0;
  color: var(--ink);
}

.employee-dashboard {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(16, 32, 38, 0.06);
}

.employee-dashboard .employee-hero-row {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.employee-dashboard .employee-status-card,
.employee-dashboard .employee-balance-card,
.employee-dashboard .employee-summary-card,
.employee-dashboard .dashboard-clock-panel,
.employee-dashboard .employee-vacation-panel,
.employee-dashboard .employee-messages {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.employee-dashboard .employee-status-card {
  border-left: 0;
}

.employee-dashboard .employee-summary-grid {
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.employee-dashboard .employee-summary-card {
  min-height: 68px;
  padding: 0 16px;
  border-left: 1px solid var(--line);
}

.employee-dashboard .employee-summary-card:first-child {
  border-left: 0;
  padding-left: 0;
}

.employee-dashboard .employee-work-grid {
  grid-template-columns: minmax(380px, 1.08fr) minmax(320px, 0.92fr);
  gap: 42px;
}

.employee-dashboard .employee-vacation-panel,
.employee-dashboard .employee-messages {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.employee-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--button-metal-border);
  border-radius: 8px;
  padding: 9px 13px;
  background: var(--button-metal);
  color: var(--button-metal-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 2px rgba(16, 32, 38, 0.08);
  cursor: pointer;
  font-weight: 850;
}

.employee-action-button:hover {
  background: var(--button-metal-hover);
  border-color: var(--button-metal-border-hover);
}

.employee-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

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

.presence-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.presence-search {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.presence-search input {
  width: 100%;
  min-height: 36px;
}

.presence-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
}

.presence-filter {
  --presence-color: #7a7d80;
  display: inline-grid;
  grid-template-columns: 22px auto;
  grid-template-areas: "icon count" "label label";
  align-items: center;
  justify-items: center;
  flex: 0 0 auto;
  min-width: 58px;
  min-height: 48px;
  border: 1px solid var(--presence-color);
  border-radius: 6px;
  padding: 4px 7px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.presence-filter.is-active {
  border-color: var(--presence-color);
  background: var(--presence-color);
  color: #fff;
}

.presence-filter.is-active .presence-filter-icon {
  background: rgba(255, 255, 255, 0.18);
}

.presence-filter:not(.is-active) {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  opacity: 0.48;
}

.presence-filter-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--presence-color);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}

.presence-filter strong {
  grid-area: count;
  color: currentColor;
  font-size: 16px;
  font-weight: 800;
}

.presence-filter-label {
  grid-area: label;
  max-width: 74px;
  overflow: hidden;
  color: currentColor;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-filter-all .presence-filter-icon::before {
  content: "SUM";
  font-size: 7px;
}

.presence-filter-all {
  --presence-color: var(--brand-blue);
}

.presence-filter.state-entry,
.presence-person.state-entry { --presence-color: #558c1f; }
.presence-filter.state-exit,
.presence-person.state-exit { --presence-color: #d73724; }
.presence-filter.state-mission,
.presence-person.state-mission { --presence-color: #d99a00; }
.presence-filter.state-pause,
.presence-person.state-pause { --presence-color: #5d9ce8; }
.presence-filter.state-home,
.presence-person.state-home { --presence-color: #b85f00; }
.presence-filter.state-unplanned,
.presence-person.state-unplanned { --presence-color: #0876b8; }
.presence-filter.state-absent,
.presence-person.state-absent { --presence-color: #7a7d80; }

.state-entry .presence-filter-icon::before,
.state-entry .presence-state-icon::before { content: "IN"; }
.state-exit .presence-filter-icon::before,
.state-exit .presence-state-icon::before { content: "OUT"; }
.state-mission .presence-filter-icon::before,
.state-mission .presence-state-icon::before { content: "M"; }
.state-pause .presence-filter-icon::before,
.state-pause .presence-state-icon::before { content: "II"; }
.state-home .presence-filter-icon::before,
.state-home .presence-state-icon::before { content: "H"; }
.state-unplanned .presence-filter-icon::before,
.state-unplanned .presence-state-icon::before { content: "X"; }
.state-absent .presence-filter-icon::before,
.state-absent .presence-state-icon::before { content: "--"; }

.presence-return {
  min-width: 86px;
}

.presence-error {
  margin: 0;
}

.presence-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(170px, 1fr));
  gap: 4px 8px;
}

.presence-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(74px, auto);
  align-items: stretch;
  min-height: 30px;
  overflow: hidden;
  border: 1px solid var(--presence-color, #7a7d80);
  border-radius: 5px;
  background: var(--surface);
}

.presence-person[hidden] {
  display: none;
}

.presence-person-name {
  align-self: center;
  min-width: 0;
  overflow: hidden;
  padding: 3px 7px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-person-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 70px;
  padding: 3px 6px;
  background: var(--presence-color);
  color: #fff;
}

.presence-state-icon {
  display: grid;
  place-items: center;
  min-width: 22px;
  font-size: 10px;
  font-weight: 850;
}

.presence-state-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.presence-person time {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.presence-empty,
.presence-empty-static {
  grid-column: 1 / -1;
  margin: 28px 0;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1500px) {
  .presence-grid { grid-template-columns: repeat(5, minmax(170px, 1fr)); }
}

@media (max-width: 1250px) {
  .presence-toolbar { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); }
  .presence-return { grid-column: 2; justify-self: end; }
  .presence-grid { grid-template-columns: repeat(4, minmax(165px, 1fr)); }
}

@media (max-width: 900px) {
  .presence-toolbar { grid-template-columns: 1fr auto; }
  .presence-filters { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .presence-return { grid-column: 2; grid-row: 1; }
  .presence-grid { grid-template-columns: repeat(2, minmax(155px, 1fr)); }
}

@media (max-width: 560px) {
  .presence-grid { grid-template-columns: 1fr; }
}

.recap-cta {
  box-shadow: none;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 380px;
  gap: 18px;
}

.single-settings-layout {
  grid-template-columns: minmax(0, 980px);
}

.settings-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.settings-hub-card {
  display: grid;
  gap: 8px;
  min-height: 136px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(16, 32, 38, 0.06);
}

.settings-hub-card span {
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 900;
}

.settings-hub-card strong {
  color: var(--ink);
  font-size: 18px;
}

.settings-hub-card small {
  color: var(--muted);
  line-height: 1.4;
}

.settings-admin-note {
  margin-top: 18px;
  max-width: 760px;
}

.settings-reset-compact {
  max-width: 520px;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 4px solid rgba(184, 68, 68, 0.58);
}

.settings-reset-compact .settings-section-head h2 {
  font-size: 14px;
}

.settings-reset-compact p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

.settings-reset-compact form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) max-content;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.settings-reset-compact label {
  margin: 0;
}

.settings-reset-compact input {
  min-height: 30px;
  padding: 6px 8px;
}

.settings-reset-compact .danger-button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 11px;
}

.modbus-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.resource-admin-layout {
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.identity-card-section {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(22, 116, 188, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfc;
}

.identity-card-section h3 {
  color: var(--brand-blue-dark);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.identity-card-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.maintenance-form {
  display: grid;
  gap: 10px;
}

.maintenance-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.maintenance-list article {
  border-left: 4px solid var(--brand-blue);
  border-radius: 7px;
  padding: 9px 10px;
  background: var(--technical-soft);
}

.maintenance-list strong,
.maintenance-list span,
.maintenance-list small {
  display: block;
}

.maintenance-list span,
.maintenance-list small {
  color: var(--muted);
}

.modbus-table-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.modbus-table-wrap {
  overflow: auto;
}

.modbus-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.resource-table {
  min-width: 840px;
}

.modbus-table th,
.modbus-table td {
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}

.modbus-table th {
  background: var(--technical-soft);
  color: var(--brand-blue-dark);
  font-size: 12px;
  text-transform: uppercase;
}

.modbus-table strong,
.modbus-table span,
.modbus-table small {
  display: block;
}

.modbus-table span,
.modbus-table small,
.empty-table {
  color: var(--muted);
}

.modbus-table small {
  margin-top: 4px;
}

.table-actions {
  width: 150px;
}

.table-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.inline-form {
  margin: 0;
}

.empty-table {
  text-align: center;
}

.settings-side {
  display: grid;
  align-content: start;
  gap: 18px;
}

.settings-section {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.settings-section:first-child {
  padding-top: 0;
  border-top: 0;
}

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

.settings-language-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfc;
}

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

.settings-section-head h2 {
  margin: 0;
}

.settings-section-head.compact-head {
  margin-top: 10px;
}

.function-code {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(8, 75, 131, 0.16);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--technical-soft);
  color: var(--brand-blue-dark);
  font-size: 11px;
  font-weight: 900;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.toggle-row input {
  width: 22px;
  height: 22px;
}

.security-setting-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.security-setting-copy > span {
  color: var(--ink);
  font-weight: 700;
}

.security-setting-copy > small,
.settings-form label > small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
}

.clocking-networks-editor {
  border-color: color-mix(in srgb, var(--brand-blue) 34%, var(--line));
  background: color-mix(in srgb, var(--technical-soft) 62%, var(--surface));
}

.email-settings-layout .settings-form {
  gap: 14px;
}

.email-server-row {
  grid-template-columns: minmax(220px, 1.6fr) minmax(100px, 0.45fr) minmax(160px, 0.7fr);
}

.settings-inline-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: var(--ink);
}

.settings-inline-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.settings-clear-secret {
  color: var(--muted);
  font-size: 11px;
}

.smtp-test-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) max-content;
  align-items: end;
  gap: 10px;
}

.smtp-test-row .soft-button {
  min-height: 34px;
}

.trusted-networks-editor {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--technical-soft);
}

.trusted-networks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trusted-networks-head > div {
  display: grid;
  gap: 2px;
}

.trusted-networks-head span {
  color: var(--muted);
  font-size: 11px;
}

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

.trusted-network-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 6px;
}

.trusted-network-row input {
  width: 100%;
  min-width: 0;
}

.trusted-network-remove {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border: 1px solid rgba(184, 68, 68, 0.36);
  border-radius: 6px;
  background: transparent;
  color: var(--danger);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.trusted-network-remove:hover {
  background: rgba(184, 68, 68, 0.1);
}

.field-errors {
  color: var(--danger);
  font-size: 12px;
}

@media (max-width: 760px) {
  .trusted-network-list {
    grid-template-columns: 1fr;
  }

  .trusted-networks-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.checkbox-group {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0;
  padding: 12px;
}

.checkbox-group legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.checkbox-group div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.checkbox-group input {
  width: 18px;
  height: 18px;
}

.settings-note {
  align-self: start;
  padding: 18px;
}

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

.certificate-list {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
  font-size: 13px;
}

.certificate-list dt {
  color: var(--muted);
  font-weight: 800;
}

.certificate-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.certificate-form {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.certificate-restart-form {
  display: flex;
  justify-content: flex-start;
  padding-top: 8px;
}

.micro-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.readonly-booking dl {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
}

.readonly-booking dt {
  color: var(--muted);
  font-weight: 800;
}

.readonly-booking dd {
  margin: 0;
}

.danger-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: end;
  margin-top: 18px;
  padding: 18px;
  border-color: #f0c6cd;
  background: #f7f9fb;
}

.danger-panel p {
  margin-bottom: 0;
  color: var(--muted);
}

.danger-panel form {
  display: grid;
  gap: 12px;
}

.messages {
  margin-bottom: 18px;
}

.message {
  border: 1px solid rgba(22, 116, 188, 0.28);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--technical-soft);
  color: var(--brand-blue-dark);
  font-weight: 800;
}

.message.success {
  border-color: #bee2ce;
  background: #eef9f2;
  color: #205b39;
}

.message.error {
  border-color: #f1b7c0;
  background: #fff0f2;
  color: #8f1f31;
}

.message.warning {
  border-color: #efd189;
  background: #fff8df;
  color: #73510b;
}

.message.info {
  border-color: rgba(22, 116, 188, 0.28);
  background: var(--technical-soft);
  color: var(--brand-blue-dark);
}

/* Visual density pass: keep the UI desktop-oriented on lower resolutions and reduce heavy text. */
h1,
h2,
h3,
strong,
th,
.eyebrow,
.nav-link,
.ghost-button,
.primary-button,
.soft-button,
.danger-button,
.compact-button,
.view-switch button,
.calendar-group-actions button,
.dashboard-header-metrics strong,
.brand-home-label {
  font-weight: 650;
}

h1,
.login-copy h1,
.home-hero h1 {
  letter-spacing: 0;
}

.page-header h1 {
  font-size: 28px;
}

.settings-form,
.calendar-card,
.upcoming-panel,
.form-card,
.danger-panel {
  border-radius: 7px;
}

@media (max-width: 1366px), (max-height: 820px) {
  .app-shell {
    grid-template-columns: 220px 1fr;
  }

  .sidebar {
    gap: 12px;
    padding: 12px;
  }

  .content {
    padding: 10px;
  }

  .brand {
    padding: 7px;
  }

  .brand-logo-surface {
    min-height: 54px;
  }

  .brand-logo-surface img {
    max-height: 54px;
  }

  .brand-home-label {
    min-height: 22px;
    gap: 6px;
    margin-top: 5px;
    padding-top: 5px;
    font-size: 10px;
  }

  .brand-home-label svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .nav-link,
  .ghost-button {
    padding: 7px 9px;
    font-size: 13px;
  }

  .sidebar-foot {
    gap: 9px;
  }

  .sidebar-credit {
    font-size: 10px;
  }

  .top-language-switch {
    transform: scale(0.9);
    transform-origin: top right;
  }

  .page-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  .page-header h1 {
    font-size: 23px;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 16px;
  }

  h3 {
    font-size: 13px;
  }

  .home-hero {
    width: calc(100% + 20px);
    min-height: 300px;
    margin: -10px -10px 0;
    padding: 20px 24px;
  }

  .home-hero h1 {
    font-size: 38px;
  }

  .home-panel strong {
    font-size: 36px;
  }

  .portal-hub {
    gap: 14px;
    margin-top: 16px;
  }

  .portal-card {
    min-height: 112px;
    padding: 14px;
  }

  .portal-card-icon {
    width: 138px;
    height: 48px;
  }

  .stat,
  .calendar-card,
  .upcoming-panel,
  .settings-form,
  .form-card,
  .danger-panel {
    padding: 9px;
  }

  .stat strong {
    font-size: 22px;
  }

  .stat.free strong,
  .stat.busy strong {
    font-size: 30px;
  }

  .workspace-grid {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 9px;
  }

  .dashboard-page-header {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 226px);
    gap: 6px;
    width: calc(100% - 132px);
    margin-bottom: 7px;
  }

  .dashboard-header-metrics article {
    min-height: 48px;
    padding: 6px 8px;
  }

  .dashboard-header-metrics strong {
    font-size: 13px;
  }

  .calendar-header-main {
    gap: 5px;
    padding: 6px 8px;
  }

  .dashboard-page-header h1 {
    font-size: 17px;
  }

  .calendar-group-actions {
    gap: 4px;
  }

  .calendar-group-actions button {
    min-width: 106px;
    height: 25px;
    padding: 3px 8px;
    font-size: 10px;
  }

  .calendar-toolbar {
    gap: 5px;
    margin-bottom: 7px;
  }

  .view-switch {
    gap: 3px;
    padding: 3px;
  }

  .view-switch button,
  .soft-button,
  .primary-button,
  .icon-button {
    padding: 6px 8px;
    font-size: 12px;
  }

  .calendar-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 7px;
  }

  .calendar-side-panel {
    gap: 7px;
  }

  .mini-month {
    padding: 6px;
  }

  .mini-month-grid {
    grid-template-columns: 22px repeat(7, minmax(0, 1fr));
  }

  .mini-day,
  .mini-week-number {
    min-height: 21px;
    font-size: 10px;
  }

  .calendar-resource-list label {
    min-height: 24px;
    padding: 3px 6px;
    font-size: 11px;
  }

  .week-calendar,
  .calendar-side-panel {
    max-height: clamp(430px, calc(100vh - 166px), 900px);
  }
}

@media (max-width: 1280px) {
  .home-hero h1 {
    white-space: normal;
  }

  .dashboard-page-header {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 226px);
    width: calc(100% - 132px);
  }

  .dashboard-header-metrics strong {
    font-size: 13px;
  }
}

@media (max-width: 1180px), (max-height: 740px) {
  .app-shell {
    grid-template-columns: 204px 1fr;
  }

  .sidebar {
    padding: 10px;
  }

  .content {
    padding: 8px;
  }

  .brand-logo-surface {
    min-height: 48px;
  }

  .brand-logo-surface img {
    max-height: 48px;
  }

  .workspace-grid {
    grid-template-columns: minmax(0, 1fr) 170px;
  }

  .calendar-layout {
    grid-template-columns: 204px minmax(0, 1fr);
  }

  .dashboard-page-header {
    width: calc(100% - 118px);
  }
}

@media (max-width: 760px) {
  .app-shell,
  .workspace-grid,
  .calendar-layout,
  .settings-layout,
  .modbus-layout,
  .resource-admin-layout,
  .employee-hero-row,
  .employee-summary-grid,
  .employee-work-grid,
  .recap-toolbar,
  .recap-month-control,
  .recap-totals,
  .absence-form-grid,
  .absence-request-lists,
  .time-clock-stage,
  .danger-panel,
  .employee-login-content,
  .login-panel,
  .home-hero,
  .settings-language-grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    width: calc(100% + 64px);
    min-height: auto;
    margin: -32px -32px 0;
    padding: 32px;
    background-image: linear-gradient(120deg, rgba(11, 44, 74, 0.96), rgba(183, 19, 19, 0.9));
  }

  .home-hero h1 {
    font-size: 38px;
    white-space: normal;
  }

  .sidebar {
    position: static;
    height: auto;
    min-height: auto;
  }

  .stats-grid,
  .checkbox-group div,
  .form-row {
    grid-template-columns: 1fr;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .employee-dashboard .employee-summary-card {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 12px 0 0;
  }

  .employee-tim-logo-tile {
    display: none;
  }

  .employee-dashboard .employee-summary-card:first-child {
    border-top: 0;
  }

  .recap-month-control > div {
    min-width: 0;
  }

  .absence-account-options {
    grid-template-columns: 1fr;
  }

  .dashboard-page-header {
    display: flex;
    width: 100%;
  }

  .annual-person-strip,
  .annual-overview-strip,
  .annual-lower-grid {
    grid-template-columns: 1fr;
  }

  .annual-email-preview-grid,
  .email-server-row,
  .smtp-test-row {
    grid-template-columns: 1fr;
  }

  .annual-email-form {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding: 14px 0 0;
  }

  .annual-email-preview iframe {
    min-height: 360px;
  }

  .annual-report-actions {
    justify-content: stretch;
  }

  .annual-report-actions .employee-action-button {
    flex: 1 1 0;
  }

  .annual-counter-row {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }

  .annual-counter-name {
    grid-column: 1 / -1;
  }

  .annual-person-summary {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .annual-person-strip > div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .annual-person-strip > div:first-child {
    border-top: 0;
  }

  .annual-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .period-toolbar {
    grid-template-columns: 1fr;
  }

  .period-toolbar > a:first-child,
  .period-toolbar .period-current,
  .period-toolbar > a:nth-of-type(2):not(.period-return),
  .period-toolbar .period-return {
    grid-column: 1;
  }

  .period-toolbar .period-return {
    justify-self: stretch;
  }

  .employee-header-tools,
  .employee-session-settings {
    justify-content: flex-start;
  }

  .calendar-group-actions {
    justify-content: flex-start;
    max-width: none;
  }

  .dashboard-header-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .week-calendar,
  .calendar-side-panel {
    max-height: none;
  }

  .core-login-view {
    margin: -18px;
    padding: 36px 22px;
    place-items: start center;
  }

  .core-login-bg {
    align-items: flex-start;
    justify-content: center;
    padding: 30px 18px 0;
  }

  .core-login-bg img {
    width: min(82vw, 540px);
    max-height: 220px;
    opacity: 0.24;
  }

  .core-login-view .login-panel {
    width: min(540px, 100%);
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .core-login-view .login-copy {
    min-height: 150px;
  }

  .core-login-view .login-copy h1 {
    font-size: 36px;
  }

  .core-login-view .login-copy p {
    font-size: 16px;
  }
}

@media (max-width: 620px) {
  .core-login-view {
    margin: -16px;
    padding: 28px 16px;
  }

  .core-login-bg img {
    opacity: 0.16;
  }

  .core-login-view .login-copy {
    min-height: 120px;
  }

  .core-login-view .login-copy h1 {
    font-size: 30px;
  }
}

/* Hard desktop density fix: prevent large panels from escaping the shell on lower-resolution PCs. */
html {
  font-size: 14px;
}

body {
  font-size: 11.5px;
}

.app-shell {
  width: 100%;
  max-width: 100vw;
  grid-template-columns: 198px minmax(0, 1fr);
}

.sidebar {
  width: 198px;
  min-width: 0;
  gap: 9px;
  padding: 10px;
}

.brand {
  padding: 6px;
}

.brand-logo-surface {
  min-height: 48px;
}

.brand-logo-surface img {
  max-height: 48px;
}

.brand-home-label {
  min-height: 20px;
  gap: 5px;
  margin-top: 4px;
  padding-top: 4px;
  font-size: 9.5px;
}

.brand-home-label svg {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
}

.nav-link,
.ghost-button {
  min-height: 32px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.2;
}

nav {
  gap: 6px;
}

.sidebar-foot {
  gap: 7px;
}

.content {
  min-width: 0;
  max-width: calc(100vw - 198px);
  padding: 8px;
  overflow-x: clip;
}

.home-hero {
  width: 100%;
  max-width: 100%;
  min-height: 260px;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 18px;
  padding: 24px 28px;
  border-radius: 0;
}

.home-logo {
  width: min(680px, 100%);
  max-height: 116px;
  margin-bottom: 14px;
}

.home-hero h1 {
  max-width: 100%;
  font-size: 34px;
  line-height: 1.05;
  white-space: normal;
}

.home-hero p {
  font-size: 15px;
}

.home-panel {
  padding: 14px;
}

.home-panel strong {
  font-size: 30px;
}

.portal-hub {
  gap: 12px;
  margin-top: 4px;
}

.portal-grid {
  gap: 9px;
}

.portal-card {
  min-height: 96px;
  grid-template-columns: 126px minmax(0, 1fr);
  padding: 11px 12px;
}

.portal-card-icon {
  width: 116px;
  height: 40px;
}

.page-header {
  margin-bottom: 10px;
}

.page-header h1 {
  font-size: 22px;
}

.settings-hub-card {
  min-height: 112px;
  padding: 12px;
}

.settings-hub-card strong {
  font-size: 15px;
}

.settings-form,
.settings-note,
.calendar-card,
.upcoming-panel,
.form-card,
.danger-panel {
  padding: 10px;
}

.stat {
  padding: 8px;
}

@media (max-width: 1366px), (max-height: 820px) {
  .app-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .sidebar {
    width: 190px;
    padding: 8px;
  }

  .content {
    max-width: calc(100vw - 190px);
    padding: 7px;
  }

  .home-hero {
    width: 100%;
    min-height: 230px;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) 150px;
    padding: 18px 22px;
  }

  .home-logo {
    max-height: 96px;
    margin-bottom: 10px;
  }

  .home-hero h1 {
    font-size: 29px;
  }

  .home-hero p {
    font-size: 13px;
  }

  .home-panel strong {
    font-size: 26px;
  }

  .portal-card {
    min-height: 88px;
    grid-template-columns: 112px minmax(0, 1fr);
    padding: 9px 10px;
  }

  .portal-card-icon {
    width: 102px;
    height: 36px;
  }
}

@media (max-width: 1180px), (max-height: 740px) {
  .app-shell {
    grid-template-columns: 178px minmax(0, 1fr);
  }

  .sidebar {
    width: 178px;
  }

  .content {
    max-width: calc(100vw - 178px);
  }

  .brand-logo-surface {
    min-height: 42px;
  }

  .brand-logo-surface img {
    max-height: 42px;
  }

  .nav-link,
  .ghost-button {
    min-height: 29px;
    padding: 5px 7px;
    font-size: 11px;
  }

  .home-hero {
    min-height: 210px;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 12px;
    padding: 15px 18px;
  }

  .home-logo {
    max-height: 82px;
  }

  .home-hero h1 {
    font-size: 25px;
  }

  .home-panel {
    padding: 10px;
  }

  .home-panel strong {
    font-size: 22px;
  }
}

/* Final dark-mode readability pass for all configuration pages. */
@media (prefers-color-scheme: dark) {
  .settings-form,
  .settings-note,
  .settings-hub-card,
  .settings-language-panel,
  .identity-card-section,
  .identity-card-panel,
  .modbus-table-panel,
  .system-dashboard-card,
  .internal-url-list div,
  .danger-panel,
  .portal-style-preview,
  .portal-palette-option,
  .checkbox-group,
  .toggle-row,
  .certificate-panel,
  .form-card,
  .modal,
  .maintenance-list article {
    border-color: #4b6470;
    background: #16262e;
    color: #f3f9fb;
  }

  .settings-section,
  .certificate-form {
    border-color: #3c535e;
  }

  .settings-section-head h2,
  .settings-hub-card strong,
  .system-dashboard-card strong,
  .internal-url-list strong,
  .identity-card-section h3,
  .certificate-list dd,
  .checkbox-group label,
  .modbus-table strong,
  .portal-style-preview strong,
  .portal-palette-option strong,
  .maintenance-list strong,
  code {
    color: #f6fbff;
  }

  label,
  .field-help,
  .micro-note,
  .muted,
  .settings-hub-card small,
  .modbus-table span,
  .modbus-table small,
  .empty-table,
  .certificate-list dt,
  .danger-panel p,
  .portal-style-preview small,
  .maintenance-list span,
  .maintenance-list small {
    color: #c4d3da;
  }

  input,
  select,
  textarea,
  .date-jump input,
  .employee-session-settings input[type="number"],
  .absence-request-form input,
  .absence-request-form select,
  .absence-request-form textarea {
    border-color: #66808d;
    background: #091823;
    color: #f8fcff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: #8fd4ec;
    outline: 2px solid rgba(72, 172, 214, 0.28);
    outline-offset: 1px;
  }

  input::placeholder,
  textarea::placeholder {
    color: rgba(219, 234, 240, 0.34);
  }

  select option {
    background: #091823;
    color: #f8fcff;
  }

  input[type="color"] {
    background: #091823;
  }

  .modbus-table th {
    border-color: #3c535e;
    background: #213842;
    color: #bceeff;
  }

  .modbus-table td {
    border-color: #3c535e;
    background: #16262e;
    color: #f3f9fb;
  }

  .settings-hub-card span,
  .system-dashboard-card span,
  .function-code,
  .internal-url-list span {
    color: #9edff2;
  }

  .function-code,
  code {
    border-color: #46616d;
    background: #203741;
  }

  .portal-style-swatch {
    border-color: #66808d;
  }
}

/* Smartphone shell. Activated by base.html only for compact touch screens or
   extremely narrow windows, so low-resolution desktop layouts stay unchanged. */
.mobile-nav-toggle,
.mobile-nav-backdrop,
.mobile-calendar-panel-toggle {
  display: none;
}

html.mobile-ui,
html.mobile-ui body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

html.mobile-ui body {
  font-size: 12.5px;
  line-height: 1.35;
}

html.mobile-ui body.mobile-nav-open {
  overflow: hidden;
}

html.mobile-ui .app-shell {
  display: block;
  width: 100%;
  min-height: 100dvh;
}

html.mobile-ui .mobile-nav-toggle {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  z-index: 1003;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(116, 153, 175, 0.62);
  border-radius: 7px;
  padding: 0;
  background: rgba(8, 43, 74, 0.94);
  color: #f5fbff;
  box-shadow: 0 5px 16px rgba(3, 22, 36, 0.24);
  cursor: pointer;
  transition: left 180ms ease, background 180ms ease, border-color 180ms ease;
}

html.mobile-ui .mobile-nav-toggle > span,
html.mobile-ui .mobile-nav-toggle > span::before,
html.mobile-ui .mobile-nav-toggle > span::after {
  position: absolute;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transition: top 160ms ease, transform 160ms ease, opacity 160ms ease;
}

html.mobile-ui .mobile-nav-toggle > span::before {
  top: -6px;
}

html.mobile-ui .mobile-nav-toggle > span::after {
  top: 6px;
}

html.mobile-ui body.mobile-nav-open .mobile-nav-toggle {
  left: calc(min(84vw, 286px) - 44px);
  border-color: rgba(226, 240, 247, 0.38);
  background: rgba(18, 52, 76, 0.98);
}

html.mobile-ui body.mobile-nav-open .mobile-nav-toggle > span {
  background: transparent;
}

html.mobile-ui body.mobile-nav-open .mobile-nav-toggle > span::before {
  top: 0;
  transform: rotate(45deg);
}

html.mobile-ui body.mobile-nav-open .mobile-nav-toggle > span::after {
  top: 0;
  transform: rotate(-45deg);
}

html.mobile-ui .sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1001;
  width: min(84vw, 286px);
  height: 100dvh;
  min-height: 0;
  gap: 8px;
  padding: max(9px, env(safe-area-inset-top)) 9px max(10px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-105%);
  transition: transform 190ms ease;
  box-shadow: 18px 0 42px rgba(3, 18, 31, 0.34);
}

html.mobile-ui body.mobile-nav-open .sidebar {
  transform: translateX(0);
}

html.mobile-ui .mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  border: 0;
  padding: 0;
  background: rgba(3, 14, 24, 0.56);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

html.mobile-ui body.mobile-nav-open .mobile-nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.mobile-ui .brand {
  margin-right: 38px;
  padding: 5px;
  border-radius: 7px;
}

html.mobile-ui .brand-logo-surface {
  min-height: 42px;
}

html.mobile-ui .brand-logo-surface img {
  max-height: 42px;
}

html.mobile-ui .brand-home-label {
  min-height: 18px;
  margin-top: 3px;
  padding-top: 3px;
  font-size: 9px;
}

html.mobile-ui .sidebar nav {
  gap: 5px;
}

html.mobile-ui .sidebar .nav-link,
html.mobile-ui .sidebar .ghost-button {
  min-height: 38px;
  padding: 8px 9px;
  font-size: 13px;
}

html.mobile-ui .sidebar .sidebar-session-button {
  min-height: 48px;
  padding: 7px 9px;
}

html.mobile-ui .sidebar-foot {
  gap: 5px;
}

html.mobile-ui .sidebar-credit {
  gap: 6px 18px;
  font-size: 9px;
}

html.mobile-ui .content {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: calc(52px + env(safe-area-inset-top)) 7px calc(28px + env(safe-area-inset-bottom));
  overflow-x: clip;
}

html.mobile-ui .top-language-switch {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 20;
  gap: 3px;
  padding: 2px;
  border-radius: 7px;
}

html.mobile-ui .flag-button {
  display: grid;
  min-width: 31px;
  min-height: 32px;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 4px;
}

html.mobile-ui .flag-button span {
  display: none;
}

html.mobile-ui .flag-button::before {
  width: 20px;
  height: 13px;
}

html.mobile-ui .page-code {
  right: max(7px, env(safe-area-inset-right));
  bottom: max(7px, env(safe-area-inset-bottom));
  padding: 2px 5px;
  font-size: 9px;
}

html.mobile-ui .messages {
  margin: 0 0 7px;
}

html.mobile-ui .message {
  padding: 7px 9px;
  font-size: 11.5px;
}

html.mobile-ui .page-header,
html.mobile-ui .employee-header,
html.mobile-ui .dashboard-page-header {
  display: grid;
  width: 100%;
  gap: 7px;
  margin: 0 0 8px;
}

html.mobile-ui .page-header h1,
html.mobile-ui .employee-header h1,
html.mobile-ui .dashboard-page-header h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.12;
}

html.mobile-ui .page-header p {
  margin: 3px 0 0;
  font-size: 11.5px;
}

html.mobile-ui .home-hero {
  display: grid;
  width: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 10px;
  margin: 0;
  border-radius: 0;
  padding: 13px;
}

html.mobile-ui .home-logo {
  width: min(100%, 430px);
  max-height: 64px;
  margin-bottom: 8px;
}

html.mobile-ui .home-hero .eyebrow {
  font-size: 9px;
}

html.mobile-ui .home-hero h1 {
  margin: 5px 0;
  font-size: 23px;
  line-height: 1.05;
}

html.mobile-ui .home-hero p {
  margin: 0;
  font-size: 12.5px;
}

html.mobile-ui .home-panel {
  align-self: end;
  min-width: 0;
  padding: 8px 5px;
}

html.mobile-ui .home-panel span,
html.mobile-ui .home-panel small {
  font-size: 8.5px;
}

html.mobile-ui .home-panel strong {
  font-size: 21px;
}

html.mobile-ui .portal-hub {
  gap: 9px;
  margin-top: 4px;
}

html.mobile-ui .portal-group .settings-section-head {
  margin-bottom: 5px;
}

html.mobile-ui .portal-group .settings-section-head h2 {
  font-size: 14px;
}

html.mobile-ui .portal-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

html.mobile-ui .portal-card {
  min-height: 66px;
  grid-template-columns: 82px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 8px;
  padding: 7px 8px;
}

html.mobile-ui .portal-card-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 74px;
  height: 34px;
  align-self: center;
}

html.mobile-ui .portal-card strong {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 14px;
}

html.mobile-ui .portal-card small {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 10.5px;
  line-height: 1.25;
}

html.mobile-ui .dashboard-header-metrics {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.mobile-ui .dashboard-header-metrics article {
  min-width: 0;
  padding: 5px 6px;
}

html.mobile-ui .dashboard-header-metrics span {
  font-size: 8.5px;
}

html.mobile-ui .dashboard-header-metrics strong {
  font-size: 12px;
}

html.mobile-ui .calendar-group-actions {
  max-width: 100%;
  justify-content: flex-start;
  gap: 4px;
}

html.mobile-ui .calendar-group-actions button {
  min-height: 30px;
  padding: 4px 7px;
  font-size: 10.5px;
}

html.mobile-ui .workspace-grid,
html.mobile-ui .calendar-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

html.mobile-ui .calendar-card,
html.mobile-ui .upcoming-panel {
  min-width: 0;
  padding: 6px;
}

html.mobile-ui .calendar-toolbar {
  display: grid;
  grid-template-columns: 36px auto 36px minmax(0, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

html.mobile-ui .calendar-toolbar h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
}

html.mobile-ui .calendar-toolbar [data-calendar-prev] {
  grid-column: 1;
  grid-row: 2;
}

html.mobile-ui .calendar-toolbar [data-calendar-today] {
  grid-column: 2;
  grid-row: 2;
}

html.mobile-ui .calendar-toolbar [data-calendar-next] {
  grid-column: 3;
  grid-row: 2;
}

html.mobile-ui .calendar-toolbar .view-switch {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
}

html.mobile-ui .calendar-toolbar .icon-button,
html.mobile-ui .calendar-toolbar .soft-button,
html.mobile-ui .view-switch button {
  min-height: 34px;
  padding: 5px 7px;
  font-size: 11px;
}

html.mobile-ui .mobile-calendar-panel-toggle {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  grid-column: 1;
  border: 1px solid var(--button-metal-border);
  border-radius: 7px;
  padding: 6px 9px;
  background: var(--button-metal);
  color: var(--button-metal-text);
  font-weight: 750;
}

html.mobile-ui .mobile-calendar-toggle-icon {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

html.mobile-ui .mobile-calendar-panel-toggle.is-open .mobile-calendar-toggle-icon {
  transform: rotate(225deg) translate(-2px, -2px);
}

html.mobile-ui .calendar-side-panel {
  display: none;
  max-height: min(58dvh, 520px);
  grid-template-rows: auto minmax(160px, 1fr);
  gap: 6px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px;
  background: var(--surface);
}

html.mobile-ui .calendar-side-panel.is-mobile-open {
  display: grid;
}

html.mobile-ui .date-jump,
html.mobile-ui .mini-month {
  padding: 5px;
}

html.mobile-ui .mini-day,
html.mobile-ui .mini-week-number {
  min-height: 25px;
  font-size: 10.5px;
}

html.mobile-ui .calendar-resource-list label {
  min-height: 34px;
  padding: 5px 7px;
  font-size: 11.5px;
}

html.mobile-ui .week-calendar {
  width: 100%;
  max-width: 100%;
  min-height: 360px;
  max-height: calc(100dvh - 235px);
  overflow: auto;
  scrollbar-gutter: auto;
}

html.mobile-ui .upcoming-panel {
  margin-top: 2px;
}

html.mobile-ui .upcoming-panel h2 {
  margin: 0 0 6px;
  font-size: 14px;
}

html.mobile-ui .booking-list article {
  padding: 7px;
  font-size: 11px;
}

html.mobile-ui .employee-header-tools {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  justify-content: stretch;
  margin: 0;
  transform: none;
}

html.mobile-ui .employee-name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mobile-ui .dsk-link-status {
  min-height: 25px;
  padding: 3px 7px;
  font-size: 8.5px;
}

html.mobile-ui .employee-session-settings {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px;
  justify-content: stretch;
}

html.mobile-ui .employee-session-settings label {
  min-width: 0;
  font-size: 9px;
}

html.mobile-ui .employee-session-settings input[type="number"] {
  width: 52px;
  min-height: 34px;
  font-size: 16px;
}

html.mobile-ui .employee-session-settings .compact-session-save,
html.mobile-ui .header-dsk-signout {
  min-width: 0;
  min-height: 34px;
  padding: 5px 8px;
  font-size: 10.5px;
}

html.mobile-ui .employee-dashboard {
  gap: 9px;
  border-radius: 7px;
  padding: 9px;
}

html.mobile-ui .employee-hero-row,
html.mobile-ui .employee-summary-grid,
html.mobile-ui .employee-work-grid,
html.mobile-ui .time-clock-stage,
html.mobile-ui .recap-totals,
html.mobile-ui .annual-person-strip,
html.mobile-ui .annual-overview-strip,
html.mobile-ui .annual-lower-grid,
html.mobile-ui .settings-layout,
html.mobile-ui .modbus-layout,
html.mobile-ui .resource-admin-layout,
html.mobile-ui .nginx-global-form,
html.mobile-ui .absence-form-grid,
html.mobile-ui .absence-request-lists,
html.mobile-ui .login-panel,
html.mobile-ui .employee-login-content {
  grid-template-columns: minmax(0, 1fr);
}

html.mobile-ui .employee-dashboard .employee-hero-row,
html.mobile-ui .employee-dashboard .employee-summary-grid {
  gap: 0;
  padding-bottom: 8px;
}

html.mobile-ui .employee-dashboard .employee-summary-card {
  min-height: 50px;
  border-top: 1px solid var(--line);
  border-left: 0;
  padding: 7px 0;
}

html.mobile-ui .employee-dashboard .employee-summary-card:first-child {
  border-top: 0;
  padding-left: 0;
}

html.mobile-ui .employee-dashboard .employee-work-grid {
  gap: 14px;
}

html.mobile-ui .tim-dashboard-notifications {
  gap: 7px;
  padding-bottom: 9px;
}

html.mobile-ui .tim-dashboard-notifications-head {
  display: grid;
  gap: 1px;
}

html.mobile-ui .tim-dashboard-notifications-head h2 {
  font-size: 15px;
}

html.mobile-ui .tim-notification-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

html.mobile-ui .tim-notification-list {
  max-height: 135px;
}

html.mobile-ui .employee-status-card h2,
html.mobile-ui .employee-balance-card strong,
html.mobile-ui .employee-summary-card strong,
html.mobile-ui .pointage-panel h2,
html.mobile-ui .employee-messages h2,
html.mobile-ui .employee-vacation-panel h2 {
  font-size: 18px;
}

html.mobile-ui .employee-status-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

html.mobile-ui .employee-action-button {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 11px;
}

html.mobile-ui .dashboard-clock-panel {
  padding-top: 8px;
}

html.mobile-ui .time-clock-stage {
  min-height: 0;
  gap: 10px;
  margin: 0;
  padding: 8px;
}

html.mobile-ui .time-clock-card,
html.mobile-ui .dashboard-time-clock-card {
  width: 100%;
  max-width: 410px;
  gap: 10px;
  margin: 0 auto;
  border-width: 4px;
  border-radius: 16px;
  padding: 13px;
  transform: none;
}

html.mobile-ui .clock-last-booking {
  gap: 8px;
}

html.mobile-ui .clock-last-icon,
html.mobile-ui .dashboard-time-clock-card .clock-last-icon {
  width: 42px;
  height: 42px;
}

html.mobile-ui .clock-last-booking > div:not(.clock-last-icon) span {
  font-size: 10.5px;
}

html.mobile-ui .clock-last-booking > div:not(.clock-last-icon) strong,
html.mobile-ui .dashboard-time-clock-card .clock-last-booking strong {
  font-size: 18px;
}

html.mobile-ui .clock-face {
  padding: 8px 10px;
}

html.mobile-ui .clock-date {
  font-size: 11px;
}

html.mobile-ui .clock-time,
html.mobile-ui .dashboard-time-clock-card .clock-time {
  font-size: 38px;
}

html.mobile-ui .clock-actions {
  gap: 6px;
}

html.mobile-ui .clock-button,
html.mobile-ui .dashboard-time-clock-card .clock-button {
  min-height: 56px;
  padding: 6px;
}

html.mobile-ui .clock-button-icon,
html.mobile-ui .dashboard-time-clock-card .clock-button-icon,
html.mobile-ui .dashboard-time-clock-card .clock-button.mission .clock-button-icon {
  width: 38px;
  height: 38px;
}

html.mobile-ui .clock-network-warning {
  padding: 7px 8px;
}

html.mobile-ui .clock-network-warning strong {
  font-size: 11.5px;
}

html.mobile-ui .clock-network-warning span {
  font-size: 10.5px;
}

html.mobile-ui .clock-network-warning small {
  font-size: 9px;
}

html.mobile-ui .settings-form,
html.mobile-ui .settings-note,
html.mobile-ui .settings-hub-card,
html.mobile-ui .settings-language-panel,
html.mobile-ui .identity-card-section,
html.mobile-ui .identity-card-panel,
html.mobile-ui .system-dashboard-card,
html.mobile-ui .danger-panel,
html.mobile-ui .form-card,
html.mobile-ui .absence-request-card,
html.mobile-ui .nginx-operation-band,
html.mobile-ui .nginx-workspace-section,
html.mobile-ui .nginx-endpoint-form > section {
  border-radius: 7px;
  padding: 9px;
}

html.mobile-ui .settings-hub-card {
  min-height: 78px;
}

html.mobile-ui .settings-hub-card strong,
html.mobile-ui .settings-section-head h2,
html.mobile-ui .nginx-section-heading h2 {
  font-size: 13px;
}

html.mobile-ui .settings-hub-card small,
html.mobile-ui .field-help,
html.mobile-ui .micro-note,
html.mobile-ui .nginx-section-heading p {
  font-size: 10.5px;
}

html.mobile-ui .settings-language-grid,
html.mobile-ui .stats-grid,
html.mobile-ui .form-row,
html.mobile-ui .checkbox-group div,
html.mobile-ui .nginx-status-strip,
html.mobile-ui .nginx-toggle-grid,
html.mobile-ui .absence-account-options,
html.mobile-ui .annual-email-preview-grid,
html.mobile-ui .email-server-row,
html.mobile-ui .smtp-test-row {
  grid-template-columns: minmax(0, 1fr);
}

html.mobile-ui input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html.mobile-ui select,
html.mobile-ui textarea {
  max-width: 100%;
  min-height: 40px;
  font-size: 16px;
}

html.mobile-ui textarea {
  min-height: 84px;
}

html.mobile-ui .primary-button,
html.mobile-ui .soft-button,
html.mobile-ui .compact-button {
  min-height: 36px;
  padding: 6px 9px;
  font-size: 11px;
}

html.mobile-ui .modal,
html.mobile-ui .booking-request-dialog {
  width: calc(100vw - 14px);
  max-width: calc(100vw - 14px);
  max-height: calc(100dvh - 20px);
  margin: auto;
}

html.mobile-ui .booking-form,
html.mobile-ui .booking-request-form {
  gap: 9px;
  padding: 11px;
}

html.mobile-ui .booking-request-add-desktop {
  display: none;
}

html.mobile-ui .recap-table-panel {
  display: none;
}

html.mobile-ui .recap-mobile-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
}

html.mobile-ui .recap-mobile-day-card {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 6px 7px;
  background: var(--recap-row);
}

html.mobile-ui .recap-mobile-day-card:last-child {
  border-bottom: 0;
}

html.mobile-ui .recap-mobile-day-card.weekend {
  background: var(--recap-row-alt);
}

html.mobile-ui .recap-mobile-primary,
html.mobile-ui .recap-mobile-account-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

html.mobile-ui .recap-mobile-date {
  flex: 0 0 76px;
}

html.mobile-ui .recap-mobile-primary .recap-bookings {
  flex: 1;
  gap: 3px;
}

html.mobile-ui .recap-mobile-date strong,
html.mobile-ui .recap-mobile-date span {
  display: block;
}

html.mobile-ui .recap-mobile-date strong {
  color: var(--recap-text);
  font-size: 12px;
}

html.mobile-ui .recap-mobile-date span,
html.mobile-ui .recap-mobile-label {
  color: var(--recap-soft-text);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

html.mobile-ui .recap-mobile-list .booking-request-add-mobile {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  font-size: 18px;
  line-height: 28px;
}

html.mobile-ui .recap-mobile-list .recap-bookings span,
html.mobile-ui .recap-mobile-list .recap-accounts span {
  padding: 2px 5px;
  font-size: 10px;
}

html.mobile-ui .recap-mobile-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}

html.mobile-ui .recap-mobile-metrics > div {
  min-width: 0;
  border-left: 1px solid var(--line);
  padding: 4px 3px 2px;
  text-align: center;
}

html.mobile-ui .recap-mobile-metrics > div:first-child {
  border-left: 0;
}

html.mobile-ui .recap-mobile-metrics dt {
  color: var(--recap-soft-text);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

html.mobile-ui .recap-mobile-metrics dd {
  margin: 1px 0 0;
  color: var(--recap-text);
  font-size: 10px;
  font-weight: 800;
}

html.mobile-ui .recap-mobile-metrics dd.negative {
  color: var(--danger);
}

html.mobile-ui .recap-mobile-metrics dd.positive {
  color: var(--success);
}

html.mobile-ui .recap-mobile-account-line .recap-accounts {
  flex: 1;
  justify-content: flex-end;
}

html.mobile-ui .recap-table-wrap,
html.mobile-ui .annual-calendar-wrap,
html.mobile-ui .modbus-table-panel,
html.mobile-ui .nginx-endpoint-table-wrap,
html.mobile-ui .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

html.mobile-ui .period-toolbar,
html.mobile-ui .recap-toolbar,
html.mobile-ui .annual-toolbar {
  gap: 5px;
}

html.mobile-ui .period-page-header {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

html.mobile-ui .period-page-header .period-toolbar {
  grid-column: 1;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 6px;
  width: 100%;
}

html.mobile-ui .period-page-header .period-toolbar .period-previous {
  grid-column: 1;
  grid-row: 1;
}

html.mobile-ui .period-page-header .period-toolbar .period-current {
  grid-column: 2;
  grid-row: 1;
}

html.mobile-ui .period-page-header .period-toolbar .period-next {
  grid-column: 3;
  grid-row: 1;
}

html.mobile-ui .period-page-header .period-toolbar > a {
  min-width: 36px;
  width: 36px;
  min-height: 34px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  white-space: nowrap;
}

html.mobile-ui .period-page-header .period-previous::before,
html.mobile-ui .period-page-header .period-next::before {
  color: var(--button-metal-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

html.mobile-ui .period-page-header .period-previous::before {
  content: "\2039";
}

html.mobile-ui .period-page-header .period-next::before {
  content: "\203A";
}

html.mobile-ui .period-page-header .period-current {
  min-width: 0;
  min-height: 44px;
  padding: 4px 8px;
}

html.mobile-ui .period-page-header .period-current span {
  font-size: 9px;
}

html.mobile-ui .period-page-header .period-current strong {
  font-size: 17px;
}

html.mobile-ui .period-page-header .period-header-actions {
  grid-column: 1;
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  width: auto;
  margin: 0;
}

html.mobile-ui .period-page-header .period-header-actions .employee-action-button,
html.mobile-ui .period-page-header .period-header-actions .period-return {
  flex: 0 0 auto;
  width: auto;
  min-width: 72px;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 10px;
}

html.mobile-ui .period-page-header .period-header-actions .period-return {
  margin-left: 8px;
}

@media (orientation: landscape) {
  html.mobile-ui .content {
    padding-top: calc(48px + env(safe-area-inset-top));
  }

  html.mobile-ui .home-hero {
    grid-template-columns: minmax(0, 1fr) 74px;
  }

  html.mobile-ui .portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.mobile-ui .week-calendar {
    max-height: calc(100dvh - 215px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.mobile-ui .sidebar,
  html.mobile-ui .mobile-nav-backdrop,
  html.mobile-ui .mobile-nav-toggle,
  html.mobile-ui .mobile-nav-toggle > span,
  html.mobile-ui .mobile-nav-toggle > span::before,
  html.mobile-ui .mobile-nav-toggle > span::after {
    transition: none;
  }
}

/* Header utility lane: language controls and navigation actions never overlap. */
:root {
  --header-language-reserve: 270px;
}

.page-header:not(.dashboard-page-header) {
  min-height: 42px;
  padding-right: var(--header-language-reserve);
}

.page-header > div:first-child {
  min-width: 0;
}

.page-header .header-actions {
  min-width: 0;
}

.dashboard-page-header {
  width: calc(100% - var(--header-language-reserve));
}

.messages {
  margin-right: var(--header-language-reserve);
}

.back-button {
  display: inline-flex;
  min-width: 68px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-color: var(--button-metal-border-hover);
  padding: 5px 8px;
  background: var(--button-metal-hover);
  color: var(--button-metal-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 2px 5px rgba(16, 32, 38, 0.12);
  font-weight: 800;
  white-space: nowrap;
}

.back-button::before {
  content: "\2190";
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.back-button:hover,
.back-button:focus-visible {
  border-color: var(--brand-blue);
  color: var(--brand-blue-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 3px 8px rgba(8, 75, 131, 0.16);
}

@media (prefers-color-scheme: dark) {
  .back-button:hover,
  .back-button:focus-visible {
    color: #f4fbff;
  }
}

@media (max-width: 1180px), (max-height: 740px) {
  :root {
    --header-language-reserve: 230px;
  }

  .top-language-switch {
    transform: scale(0.82);
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .employee-header {
    position: relative;
    display: block;
    min-height: 96px;
  }

  .employee-header > div:first-child {
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media (max-width: 760px) {
  .page-header:not(.dashboard-page-header) {
    padding: 40px 0 0;
  }

  .dashboard-page-header {
    width: 100%;
    margin-top: 40px;
  }

  .page-header .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .messages {
    margin-right: 0;
  }
}

html.mobile-ui .page-header:not(.dashboard-page-header) {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  padding: 0;
}

html.mobile-ui .top-language-switch {
  transform: scale(0.9);
}

html.mobile-ui .global-session-indicator {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.mobile-ui .dashboard-page-header {
  width: 100%;
  margin-top: 0;
}

html.mobile-ui .page-header .header-actions {
  width: 100%;
  justify-content: flex-end;
}

html.mobile-ui .back-button {
  width: auto;
  min-width: 72px;
  min-height: 34px;
  justify-self: end;
  padding: 6px 10px;
}

/* V7.03: clearer controls without increasing their dimensions. */
.soft-button,
.employee-action-button,
.icon-button,
.calendar-group-actions button,
.view-switch button,
.header-dsk-signout {
  border-color: var(--button-metal-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 1px var(--button-frame),
    0 2px 4px rgba(16, 32, 38, 0.12);
}

.header-dsk-signout {
  background: var(--button-metal);
}

.soft-button:hover,
.soft-button:focus-visible,
.employee-action-button:hover,
.employee-action-button:focus-visible,
.icon-button:hover,
.icon-button:focus-visible,
.calendar-group-actions button:hover,
.calendar-group-actions button:focus-visible,
.view-switch button:hover,
.view-switch button:focus-visible,
.header-dsk-signout:hover,
.header-dsk-signout:focus-visible {
  border-color: var(--button-metal-border-hover);
  background: var(--button-metal-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 1px var(--button-frame),
    0 3px 6px rgba(8, 75, 131, 0.16);
}

.employee-status-actions .checklist-action.is-clean {
  border-color: rgba(47, 135, 88, 0.62);
  background: rgba(47, 135, 88, 0.16);
}

@media (prefers-color-scheme: dark) {
  .employee-status-actions .checklist-action.is-clean {
    border-color: #63ad82;
    background: rgba(47, 135, 88, 0.24);
    color: #a3e5bd;
  }
}

/* P-083 top and bottom axes use one readable color in both themes. */
.annual-grid thead th,
.annual-grid thead th:first-child,
.annual-year-total th,
.annual-year-total td {
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
}

html.mobile-ui .employee-header-tools {
  grid-template-areas:
    "employee-name dsk-status"
    "session-settings session-settings";
  grid-template-columns: minmax(0, 1fr) auto;
}

html.mobile-ui .employee-name {
  grid-area: employee-name;
}

html.mobile-ui .employee-header-tools > .dsk-link-status {
  grid-area: dsk-status;
}

html.mobile-ui .employee-tim-logo-tile {
  display: none;
}

html.mobile-ui .employee-session-settings {
  grid-area: session-settings;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
}

html.mobile-ui .employee-session-settings .session-toggle {
  min-width: max-content;
  gap: 5px;
  line-height: 1.1;
  white-space: nowrap;
}

html.mobile-ui .employee-session-settings .session-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
}

html.mobile-ui .employee-session-settings label:not(.session-toggle) {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 5px;
  align-items: center;
}

html.mobile-ui .employee-session-settings label:not(.session-toggle) > span {
  min-width: 0;
  line-height: 1.08;
  text-align: right;
  white-space: normal;
}

html.mobile-ui .employee-session-settings input[type="number"] {
  width: 48px;
  min-height: 32px;
}

html.mobile-ui .employee-session-settings .compact-session-save {
  min-height: 32px;
}

html.mobile-ui .presence-return.back-button {
  width: auto;
  min-width: 72px;
  min-height: 34px;
  padding: 6px 10px;
}

/* V9.01: compact portal desktop and per-user shortcut management. */
.portal-hub-toolbar {
  display: flex;
  justify-content: flex-end;
}

.portal-customize-button {
  width: auto;
  min-width: 148px;
}

.portal-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
  justify-content: start;
  gap: 10px;
}

.portal-card {
  min-height: 88px;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 5px 11px;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(16, 32, 38, 0.09);
}

.portal-card-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  align-self: center;
  border-radius: 5px;
}

.portal-card-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
}

.portal-card-copy strong {
  overflow: hidden;
  color: var(--brand-blue-dark);
  font-size: 16px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-card-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.portal-card-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.portal-card-favorite::before {
  color: #b77900;
  content: "\2605";
  font-size: 13px;
}

.portal-desktop-settings {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.portal-official-settings {
  grid-row: span 2;
}

.portal-preference-list,
.personal-link-list {
  display: grid;
  gap: 6px;
}

.portal-preference-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(140px, 1fr) auto auto 76px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
}

.portal-preference-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--portal-color) 42%, var(--line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--portal-color) 12%, var(--surface));
  color: var(--portal-color);
  font-size: 9px;
  font-weight: 900;
}

.portal-preference-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.portal-preference-copy strong,
.portal-preference-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-preference-copy small,
.personal-link-row small {
  color: var(--muted);
  font-size: 10px;
}

.portal-check {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  font-size: 10px;
}

.portal-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.portal-order {
  display: grid;
  gap: 2px;
  font-size: 9px;
}

.portal-order input {
  width: 72px;
  min-height: 28px;
}

.portal-settings-actions {
  margin-top: 12px;
}

.portal-reset-form {
  margin-top: 8px;
}

.portal-personal-style-row {
  grid-template-columns: minmax(90px, 1fr) 74px 88px;
}

.portal-personal-editor .checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.portal-personal-editor .checkbox-grid label {
  display: flex;
  min-height: 32px;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 8px;
  background: var(--control-bg);
  font-size: 10px;
}

.portal-personal-editor .checkbox-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.personal-link-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
}

.personal-link-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.personal-link-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .portal-desktop-settings {
    grid-template-columns: 1fr;
  }

  .portal-official-settings {
    grid-row: auto;
  }
}

html.mobile-ui .portal-grid {
  grid-template-columns: 1fr;
}

html.mobile-ui .portal-card {
  min-height: 72px;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 8px 9px;
}

html.mobile-ui .portal-card-icon {
  width: 44px;
  height: 44px;
}

html.mobile-ui .portal-desktop-settings {
  grid-template-columns: 1fr;
  gap: 9px;
}

html.mobile-ui .portal-preference-row {
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 6px;
}

html.mobile-ui .portal-preference-icon {
  width: 32px;
  height: 32px;
}

html.mobile-ui .portal-order {
  grid-column: 2 / 5;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: center;
}

html.mobile-ui .portal-order input {
  width: 62px;
}

html.mobile-ui .personal-link-row {
  grid-template-columns: 36px minmax(0, 1fr);
}

html.mobile-ui .personal-link-row .table-actions {
  grid-column: 2;
  justify-content: flex-start;
}

/* V13.01: administrator defaults and per-user sizing for P-000 links. */
.portal-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.portal-card {
  flex: 0 1 280px;
  max-width: 100%;
}

.portal-card.portal-size-compact {
  min-height: 70px;
  flex-basis: 196px;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 8px 10px;
}

.portal-card.portal-size-compact .portal-card-icon {
  width: 38px;
  height: 38px;
  padding: 4px 6px;
}

.portal-card.portal-size-compact .portal-card-copy strong {
  font-size: 13px;
}

.portal-card.portal-size-compact .portal-card-copy small {
  font-size: 9px;
  -webkit-line-clamp: 1;
}

.portal-card.portal-size-large {
  min-height: 108px;
  flex-basis: 410px;
  grid-template-columns: 78px minmax(0, 1fr);
  padding: 13px 15px;
}

.portal-card.portal-size-large .portal-card-icon {
  width: 72px;
  height: 72px;
}

.portal-card.portal-size-large .portal-card-copy strong {
  font-size: 18px;
}

.portal-card.portal-size-large .portal-card-copy small {
  font-size: 11.5px;
}

.portal-card-icon img[src*="minusines.png"],
.portal-card-icon img[src*="fire-security.png"] {
  filter: invert(1);
}

.portal-preference-row {
  grid-template-columns: 42px minmax(140px, 1fr) auto auto 126px 76px;
}

.portal-size-choice {
  display: grid;
  gap: 2px;
  font-size: 9px;
}

.portal-size-choice select {
  min-width: 120px;
  min-height: 28px;
  padding: 3px 24px 3px 6px;
  font-size: 10px;
}

html.mobile-ui .portal-card,
html.mobile-ui .portal-card.portal-size-compact,
html.mobile-ui .portal-card.portal-size-large {
  width: 100%;
  max-width: none;
  flex-basis: 100%;
}

html.mobile-ui .portal-card.portal-size-compact {
  min-height: 58px;
  grid-template-columns: 38px minmax(0, 1fr);
}

html.mobile-ui .portal-card.portal-size-standard {
  min-height: 72px;
}

html.mobile-ui .portal-card.portal-size-large {
  min-height: 92px;
  grid-template-columns: 62px minmax(0, 1fr);
}

html.mobile-ui .portal-card.portal-size-large .portal-card-icon {
  width: 56px;
  height: 56px;
}

html.mobile-ui .portal-preference-row {
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
}

html.mobile-ui .portal-size-choice {
  grid-column: 2 / 4;
}

html.mobile-ui .portal-order {
  grid-column: 4;
  grid-row: 2;
}

/* V14.01: EC-Power engineering workspace and guided cable tool. */
.power-header {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
  padding: 3px 0 14px;
}

.power-header.compact {
  align-items: center;
}

.power-header h1,
.power-header p {
  margin: 0;
}

.power-header h1 {
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 680;
}

.power-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.power-header-actions,
.power-form-actions,
.power-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.power-header-actions form {
  margin: 0;
}

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

.power-mode {
  display: grid;
  min-width: 0;
  min-height: 102px;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--button-metal-border);
  border-left: 5px solid #0c6f88;
  border-radius: 7px;
  padding: 14px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(16, 45, 58, 0.07);
}

.power-mode-wizard {
  border-left-color: #b71313;
}

.power-mode:hover {
  border-color: #56899d;
  transform: translateY(-1px);
}

.power-mode-symbol {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid rgba(12, 111, 136, 0.32);
  border-radius: 6px;
  background: #e3f2f5;
  color: #07596c;
  font-size: 15px;
  font-weight: 800;
}

.power-mode-wizard .power-mode-symbol {
  border-color: rgba(183, 19, 19, 0.28);
  background: #f7e7e7;
  color: #8c1118;
}

.power-mode strong,
.power-mode small {
  display: block;
}

.power-mode strong {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 680;
}

.power-mode small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.power-metrics,
.power-project-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  overflow: hidden;
}

.power-project-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.power-metrics > div,
.power-project-summary > div {
  display: grid;
  min-height: 66px;
  align-content: center;
  gap: 3px;
  border-right: 1px solid var(--line);
  padding: 10px 14px;
}

.power-metrics > div:last-child,
.power-project-summary > div:last-child {
  border-right: 0;
}

.power-metrics span,
.power-project-summary span,
.power-metrics small {
  color: var(--muted);
  font-size: 10px;
}

.power-metrics strong,
.power-project-summary strong {
  font-size: 17px;
  font-weight: 680;
}

.power-section,
.power-form,
.power-wizard {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 14px;
  background: var(--surface);
}

.power-section-head {
  justify-content: space-between;
  margin-bottom: 11px;
}

.power-section-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 680;
}

.power-project-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.power-project-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 110px minmax(180px, 1fr) auto auto 18px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 9px 5px;
  color: var(--ink);
  text-decoration: none;
}

.power-project-row:hover {
  background: var(--technical-soft);
}

.power-project-row strong,
.power-project-row small {
  display: block;
}

.power-project-row strong {
  font-size: 12px;
  font-weight: 680;
}

.power-project-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.power-project-code {
  color: #07596c;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
}

.power-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid #8ba6b2;
  border-radius: 5px;
  padding: 4px 8px;
  background: var(--control-bg);
  color: var(--button-metal-text);
  font-size: 9px;
  font-weight: 700;
}

.power-status.status-approved {
  border-color: rgba(47, 135, 88, 0.45);
  background: rgba(47, 135, 88, 0.1);
  color: var(--success);
}

.power-status.status-review {
  border-color: rgba(212, 151, 34, 0.45);
  background: rgba(212, 151, 34, 0.12);
  color: #79510a;
}

.power-row-arrow {
  font-size: 20px;
}

.power-empty {
  padding: 24px;
  text-align: center;
}

.power-empty p {
  margin: 5px 0 0;
  color: var(--muted);
}

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

.power-field {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.power-field.span-2 {
  grid-column: 1 / -1;
}

.power-field input,
.power-field select,
.power-field textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--button-metal-border);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 450;
}

.power-field[hidden] {
  display: none;
}

.power-form-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
}

.field-error,
.errorlist {
  margin: 0;
  color: var(--danger);
  font-size: 10px;
}

.power-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.power-stepper button {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 9px;
  background: var(--technical-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}

.power-stepper button:last-child {
  border-right: 0;
}

.power-stepper button span {
  display: grid;
  flex: 0 0 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #8ca4b0;
  border-radius: 50%;
  font-size: 9px;
}

.power-stepper button.active {
  background: #dfeff4;
  color: #07596c;
}

.power-stepper button.active span,
.power-stepper button.complete span {
  border-color: #0c6f88;
  background: #0c6f88;
  color: white;
}

.power-wizard-step {
  display: none;
  min-height: 270px;
  padding: 18px 2px 8px;
}

.power-wizard-step.active {
  display: block;
}

.wizard-question {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 16px;
}

.wizard-question > span {
  color: #0c6f88;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
}

.wizard-question h2,
.wizard-question p {
  margin: 0;
}

.wizard-question h2 {
  font-size: 17px;
  font-weight: 680;
}

.wizard-question p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.power-choice-grid ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.power-choice-grid label {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--button-metal-border);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--control-bg);
  font-size: 11px;
  font-weight: 650;
}

.power-review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.power-review-grid > div {
  display: grid;
  min-height: 67px;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-left: 3px solid #0c6f88;
  border-radius: 5px;
  padding: 8px 10px;
  background: var(--technical-soft);
}

.power-review-grid span,
.power-review-grid small {
  color: var(--muted);
  font-size: 9px;
}

.power-review-grid strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.power-alert {
  display: grid;
  gap: 3px;
  margin: 12px 0;
  border: 1px solid rgba(212, 151, 34, 0.55);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 9px 11px;
  background: rgba(212, 151, 34, 0.1);
  color: var(--ink);
  font-size: 10px;
}

.power-alert.error {
  border-color: rgba(184, 68, 68, 0.55);
  background: rgba(184, 68, 68, 0.09);
}

.power-wizard-actions {
  display: grid;
  grid-template-columns: 120px 1fr 160px;
  gap: 9px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.power-wizard-actions > span {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  text-align: center;
}

.power-wizard-actions > :last-child {
  grid-column: 3;
}

.power-calculation-table-wrap {
  overflow-x: auto;
}

.power-calculation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.power-calculation-table th,
.power-calculation-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  vertical-align: middle;
}

.power-calculation-table th {
  background: var(--technical-soft);
  color: #07596c;
  font-size: 9px;
  text-transform: uppercase;
}

.power-calculation-table td:first-child span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .power-metrics,
  .power-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .power-project-row {
    grid-template-columns: 90px minmax(160px, 1fr) auto 18px;
  }

  .power-project-row > :nth-child(3) {
    display: none;
  }
}

html.mobile-ui .power-header {
  align-items: flex-start;
  padding-top: 44px;
}

html.mobile-ui .power-header h1 {
  font-size: 22px;
}

html.mobile-ui .power-header-actions {
  justify-content: flex-end;
}

html.mobile-ui .power-mode-grid,
html.mobile-ui .power-form-grid,
html.mobile-ui .power-project-summary {
  grid-template-columns: 1fr;
}

html.mobile-ui .power-mode {
  min-height: 78px;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 9px;
}

html.mobile-ui .power-mode-symbol {
  width: 46px;
  height: 46px;
  font-size: 12px;
}

html.mobile-ui .power-mode strong {
  font-size: 15px;
}

html.mobile-ui .power-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.mobile-ui .power-metrics > div:nth-child(2),
html.mobile-ui .power-project-summary > div {
  border-right: 0;
}

html.mobile-ui .power-project-row {
  grid-template-columns: 70px minmax(0, 1fr) 18px;
  gap: 7px;
}

html.mobile-ui .power-project-row > :nth-child(3),
html.mobile-ui .power-project-row > :nth-child(4) {
  display: none;
}

html.mobile-ui .power-stepper {
  grid-template-columns: repeat(5, 1fr);
}

html.mobile-ui .power-stepper button {
  min-height: 34px;
  justify-content: center;
  padding: 5px;
  font-size: 0;
}

html.mobile-ui .power-stepper button span {
  flex-basis: 20px;
  height: 20px;
}

html.mobile-ui .power-wizard-step {
  min-height: 0;
  padding-top: 14px;
}

html.mobile-ui .power-choice-grid ul,
html.mobile-ui .power-review-grid {
  grid-template-columns: 1fr;
}

html.mobile-ui .power-wizard-actions {
  grid-template-columns: 90px 1fr 122px;
}

.power-result-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 12px;
}

.power-result-hero > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}

.power-result-hero > div:last-child {
  border-right: 0;
}

.power-result-hero span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.power-result-hero strong {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 650;
}

.power-selected-candidate {
  background: color-mix(in srgb, #0c8f78 12%, var(--surface));
}

@media (max-width: 760px) {
  .power-result-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .power-result-hero > div:nth-child(2) {
    border-right: 0;
  }

  .power-result-hero > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (prefers-color-scheme: dark) {
  .power-mode-symbol {
    background: #143b47;
    color: #72c8dd;
  }

  .power-mode-wizard .power-mode-symbol {
    background: #411d23;
    color: #ff9a9f;
  }

  .power-stepper button.active {
    background: #173b48;
    color: #86d6e8;
  }

  .power-status.status-review {
    color: #f2c15f;
  }
}