:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  color: #18303f;
  background: #f3f6f8;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(720px, 100%);
  background: white;
  border: 1px solid #dbe4e9;
  border-radius: 18px;
  padding: 38px;
  box-shadow: 0 18px 50px #15324415;
}
.brand {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -1px;
}
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #647783;
}
.login h1 {
  font-size: 34px;
  margin: 30px 0 8px;
  letter-spacing: -1px;
}
.muted {
  color: #687984;
}
.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
.persona {
  background: #f8fafb;
  border: 1px solid #dbe4e9;
  border-radius: 12px;
  text-align: left;
  padding: 20px;
}
.persona:hover {
  border-color: #087b70;
}
.persona strong {
  display: block;
  margin-bottom: 6px;
}
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px 1fr;
}
.sidebar {
  background: #173747;
  color: white;
  padding: 24px 16px;
}
.sidebar .brand {
  padding: 0 10px;
}
.sidebar small {
  display: block;
  color: #b9cad3;
  font-size: 10px;
  letter-spacing: 1.2px;
}
.nav {
  margin-top: 35px;
  display: grid;
  gap: 6px;
}
.nav button {
  border: 0;
  background: transparent;
  color: #bed0d9;
  text-align: left;
  padding: 12px;
  border-radius: 8px;
}
.nav button.active {
  background: #305365;
  color: white;
}
.content {
  min-width: 0;
}
.topbar {
  height: 72px;
  background: white;
  border-bottom: 1px solid #dbe4e9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.top-actions select {
  padding: 8px 10px;
  border: 1px solid #dbe4e9;
  border-radius: 7px;
  background: white;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e5f3ef;
  color: #087b70;
  font-weight: 700;
}
.page {
  padding: 28px;
  max-width: 1240px;
  margin: 0 auto;
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.page h1 {
  font-size: 28px;
  letter-spacing: -0.8px;
  margin: 0 0 5px;
}
.badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 6px;
  background: #e5f3ef;
  color: #087b70;
  font-size: 12px;
  font-weight: 650;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.card {
  background: white;
  border: 1px solid #dbe4e9;
  border-radius: 12px;
  padding: 20px;
}
.metric strong {
  display: block;
  font-size: 30px;
  margin: 6px 0;
}
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
  gap: 16px;
}
.card h2 {
  font-size: 17px;
  margin: 0 0 18px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid #e4eaee;
}
.row:last-child {
  border-bottom: 0;
}
.entries {
  display: grid;
  gap: 12px;
}
.entry {
  display: grid;
  grid-template-columns: 1.15fr 90px 1.4fr 42px;
  gap: 12px;
  align-items: end;
  padding: 14px;
  background: #f8fafb;
  border-radius: 9px;
}
.field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #62737f;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid #d6e0e5;
  border-radius: 7px;
  padding: 10px;
  background: white;
  color: #18303f;
}
.field textarea {
  min-height: 42px;
  resize: vertical;
}
.btn {
  border: 1px solid #cad7de;
  border-radius: 7px;
  padding: 10px 14px;
  background: white;
  color: #18303f;
}
.btn.primary {
  background: #087b70;
  color: white;
  border-color: #087b70;
}
.btn.danger {
  color: #a33b32;
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.button-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.message {
  min-height: 22px;
  margin-top: 12px;
  color: #087b70;
}
.error {
  color: #aa332a;
}
.queue {
  display: grid;
  gap: 14px;
}
.queue-item {
  background: white;
  border: 1px solid #dbe4e9;
  border-radius: 12px;
  padding: 20px;
}
.queue-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}
.work-table {
  width: 100%;
  border-collapse: collapse;
}
.work-table th,
.work-table td {
  text-align: left;
  padding: 11px;
  border-bottom: 1px solid #e2e9ed;
  font-size: 13px;
}
.work-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #657782;
}
.work-table td:nth-child(2),
.work-table th:nth-child(2) {
  text-align: right;
}
.empty {
  padding: 40px;
  text-align: center;
  color: #687984;
}
.logout {
  border: 0;
  background: transparent;
  color: #49616f;
}
.loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.date-input {
  padding: 8px 10px;
  border: 1px solid #d6e0e5;
  border-radius: 7px;
  background: white;
}
.form-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.form-grid input {
  font-size: 16px;
}
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    padding: 12px;
  }
  .sidebar .brand {
    display: none;
  }
  .nav {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .grid,
  .cards {
    grid-template-columns: 1fr;
  }
  .entry {
    grid-template-columns: 1fr 90px;
  }
  .entry .field:nth-child(3) {
    grid-column: 1/-1;
  }
  .topbar {
    padding: 0 16px;
  }
  .page {
    padding: 18px;
  }
}
@media (max-width: 520px) {
  .persona-grid {
    grid-template-columns: 1fr;
  }
  .login-card {
    padding: 25px;
  }
  .entry {
    grid-template-columns: 1fr;
  }
  .entry .field:nth-child(3) {
    grid-column: auto;
  }
  .top-actions select {
    max-width: 155px;
  }
}
.attendance-grid {
  margin-top: 20px;
}
.attendance-table {
  overflow-x: auto;
}
.setup-key {
  overflow-wrap: anywhere;
  font-family: monospace;
}
.attendance-grid .row {
  flex-wrap: wrap;
}
.attendance-records-only {
  grid-template-columns: 1fr;
}
.attendance-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: 90dvh;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #dbe4e9;
  border-radius: 16px;
  color: #18303f;
  box-shadow: 0 24px 80px #102b3b40;
}
.attendance-modal::backdrop {
  background: #102b3b80;
}
.attendance-modal .modal-card {
  position: relative;
  border: 0;
  padding: 26px;
}
.attendance-modal h2 {
  padding-right: 40px;
  margin-bottom: 24px;
}
.modal-close {
  position: absolute;
  right: 18px;
  top: 16px;
  border: 0;
  background: transparent;
  font-size: 28px;
  color: #49616f;
  cursor: pointer;
}
.attendance-modal .form-grid {
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
.attendance-modal .form-grid label:has(textarea),
.attendance-modal .location-panel,
.attendance-modal .message,
.attendance-modal #attendance-help {
  grid-column: 1/-1;
}
.attendance-modal .location-panel h3 {
  font-size: 15px;
  margin: 6px 0;
}
.attendance-modal .location-panel p {
  font-size: 13px;
  line-height: 1.5;
}
.attendance-modal .message {
  min-height: 0;
  margin: 0;
}
.attendance-modal #attendance-help {
  font-size: 12px;
  margin: 0;
}
@media (max-width: 520px) {
  .attendance-modal .form-grid {
    grid-template-columns: 1fr;
  }
  .attendance-modal .modal-card {
    padding: 20px;
  }
}
.attendance-modal .modal-actions {
  grid-column: 1/-1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.attendance-modal .modal-actions .btn {
  width: auto;
}

#leave-fields {
  grid-column: 1/-1;
  display: grid;
  gap: 14px;
}
#leave-error {
  color: #aa332a;
}
.table-scroll {
  overflow-x: auto;
}

#workforce-fields {
  grid-column: 1/-1;
  display: grid;
  gap: 14px;
}
.weekdays {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid #dbe4e9;
  border-radius: 8px;
  padding: 12px;
}
.weekdays label {
  display: flex;
  gap: 5px;
  align-items: center;
}
.weekdays input {
  width: auto;
}
#individual-schedule {
  display: grid;
  gap: 14px;
}
#individual-schedule[hidden] {
  display: none;
}
.workforce-open,
.live-clock {
  margin-bottom: 20px;
  margin-top: 20px;
}
.clock-help {
  grid-column: 1/-1;
}
.clock-help,
#workforce-fields p {
  font-size: 13px;
  line-height: 1.5;
}
#workforce-fields textarea {
  min-height: 110px;
}
#workforce-fields textarea[name="csv"] {
  font-family: monospace;
  font-size: 12px;
}
#workforce-modal {
  width: min(760px, calc(100vw - 32px));
}

.payroll-runs {
  margin-top: 20px;
}
#payroll-modal {
  width: min(1000px, calc(100vw - 32px));
}
#payroll-fields {
  grid-column: 1/-1;
  display: grid;
  gap: 14px;
}
#adjustments input {
  width: 100%;
  min-width: 80px;
  border: 1px solid #cad7de;
  border-radius: 6px;
  padding: 8px;
}
#adjustments input[name="reason"] {
  min-width: 170px;
}
#payroll-fields p {
  font-size: 13px;
  line-height: 1.5;
}
.role-modules {
  grid-column: 1 / -1;
  border: 1px solid var(--border, #dbe2ea);
  border-radius: 12px;
  padding: 16px;
}
#role-module-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#role-module-options label {
  display: flex;
  align-items: center;
  gap: 8px;
}
#role-module-options input {
  width: auto;
}
@media (max-width: 600px) {
  #role-module-options {
    grid-template-columns: 1fr;
  }
}
#policy-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  grid-column: 1/-1;
}
#policy-fields .weekdays,
#policy-fields label:last-child {
  grid-column: 1/-1;
}
@media (max-width: 600px) {
  #policy-fields {
    grid-template-columns: 1fr;
  }
}
@media print {
  body:has(.payslip-modal[open]) .sidebar,
  body:has(.payslip-modal[open]) .topbar,
  body:has(.payslip-modal[open]) #page > :not(.payslip-modal) {
    display: none !important;
  }
  body:has(.payslip-modal[open]) .content {
    margin: 0 !important;
    width: 100% !important;
  }
  .payslip-modal[open] {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    overflow: visible;
  }
  .payslip-modal .modal-close,
  .payslip-modal .modal-actions {
    display: none !important;
  }
  .payslip-modal::backdrop {
    background: transparent;
  }
}
.india-payroll {
  grid-column: 1/-1;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.india-payroll p {
  grid-column: 1/-1;
}
@media (max-width: 600px) {
  .india-payroll {
    grid-template-columns: 1fr;
  }
}
.payslip-modal {
  width: min(900px, calc(100vw - 32px));
}
.slip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.slip-grid h3 {
  margin: 12px 0 6px;
}
.slip-grid .row {
  padding: 7px 0;
  min-height: 0;
  gap: 10px;
  font-size: 14px;
  break-inside: avoid;
}
@media (max-width: 650px) {
  .slip-grid {
    grid-template-columns: 1fr;
  }
}
@media print {
  .slip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payslip-modal .modal-card {
    padding: 0;
  }
}
[hidden] {
  display: none !important;
}
.role-editor {
  width: min(900px, calc(100vw - 32px));
}
.permission-table {
  grid-column: 1/-1;
}
.permission-table input {
  width: auto;
}
.role-editor form > p {
  grid-column: 1/-1;
}
.org-tree {
  overflow: auto;
  padding: 20px 0;
}
.org-tree ul {
  list-style: none;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px 0 0;
}
.org-tree li {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 190px;
  position: relative;
}
.org-tree li > ul {
  border-top: 2px solid #cdd9de;
  margin-top: 16px;
}
.org-tree li > ul:before {
  content: "";
  position: absolute;
  top: 100px;
  height: 20px;
  border-left: 2px solid #cdd9de;
}
.org-person {
  background: #f6fafb;
  border: 1px solid #cdd9de;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
  max-width: 240px;
}
.org-person small {
  color: #627783;
}
.org-match {
  border-color: #087e79;
  background: #e2f3f0;
}
#report-content > .card {
  margin-bottom: 20px;
}

.attendance-correction-section { margin-top: 20px; }

.home-widgets { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:24px; }
.home-widget { text-align:left; cursor:pointer; color:inherit; display:flex; flex-direction:column; gap:12px; font:inherit; }
.home-widget:hover { border-color:#087f79; }
.home-calendar { width:100%; min-width:700px; table-layout:fixed; border-collapse:collapse; }
.home-calendar th { text-align:center; padding:12px; }
.home-calendar td { border:1px solid #dae2e6; vertical-align:top; padding:0; }
.calendar-date { width:100%; min-height:115px; border:0; background:white; padding:8px; text-align:left; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:5px; }
.calendar-date:hover { background:#f0f8f7; }
.calendar-empty { background:#f4f7f9; }
.calendar-event { display:block; padding:4px; border-radius:4px; font-size:12px; background:#e0f3e9; overflow:hidden; }
.calendar-event small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pending-leave { background:#fff2d4; color:#764e00; }
.timesheet-event { background:#e8efff; color:#263f81; }
.calendar-legend { display:flex; gap:10px; margin:14px 0; flex-wrap:wrap; }

.profile-menu { position:relative; }
.profile-menu summary { display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none; border-radius:8px; }
.profile-menu summary::-webkit-details-marker { display:none; }
.profile-menu summary:focus-visible { outline:2px solid #087f79; outline-offset:3px; }
.profile-dropdown { position:absolute; top:calc(100% + 10px); right:0; min-width:210px; padding:16px; background:white; border:1px solid #dae2e6; border-radius:10px; box-shadow:0 6px 20px #173c4926; z-index:20; display:grid; gap:12px; }
.profile-dropdown .btn { text-align:left; }

.home-welcome { position:relative; display:flex; align-items:center; justify-content:space-between; padding:28px 34px; border-radius:18px; background:linear-gradient(115deg,#163d47,#146e69); color:white; overflow:hidden; }
.home-welcome h1 { color:white; font-size:34px; margin:14px 0 8px; }
.home-welcome p { color:#daeeea; margin:0; }
.home-eyebrow { text-transform:uppercase; letter-spacing:1.4px; font-size:11px; color:#c2ddd7; }
.home-art { flex-shrink:0; width:240px; height:150px; color:#d1ede7; }
.home-pulse { display:flex; align-items:center; gap:28px; padding:20px 0; border-bottom:1px solid #d6e2e6; flex-wrap:wrap; }
.home-pulse>div { display:flex; align-items:center; gap:8px; }
.home-pulse strong { font-size:24px; }
.home-pulse span { font-size:12px; color:#556b74; }
.pulse-dot { width:8px; height:8px; border-radius:50%; }
.approved-dot { background:#248869; }.pending-dot { background:#d49d36; }.work-dot { background:#658cd4; }
.home-pulse-month { margin-left:auto; }
.home-module-heading { margin:24px 0 12px; }
.home-module-heading h2 { font-size:18px; margin:0; }
.home-widgets { display:flex; flex-wrap:wrap; gap:12px 24px; margin-bottom:26px; }
.home-shortcut { display:flex; align-items:center; gap:10px; padding:8px 2px; border:0; background:transparent; font:inherit; text-align:left; color:#244650; cursor:pointer; }
.home-shortcut:hover { color:#087f79; }.home-shortcut:focus-visible { outline:2px solid #087f79; outline-offset:4px; border-radius:8px; }
.home-shortcut small { display:block; font-size:11px; color:#637a82; margin-top:3px; }
.shortcut-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#d9eee7; color:#24775f; }
.shortcut-icon svg { width:22px; height:22px; }
.shortcut-tone-1 { background:#e0e9f7; color:#426995; }.shortcut-tone-2 { background:#f6ebce; color:#987c30; }.shortcut-tone-3 { background:#e9e2f1; color:#74568c; }
@media(max-width:700px) { .home-welcome { padding:24px; }.home-art { width:130px; height:110px; }.home-welcome h1 { font-size:26px; }.home-pulse { gap:14px; }.home-pulse-month { margin-left:0; } }
@media(max-width:440px) { .home-art { display:none; } }

#timesheet-modal { width: min(900px, calc(100vw - 32px)); }
#timesheet-modal .entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#timesheet-modal .entry .field:has(textarea) { grid-column: 1 / -1; }
#timesheet-modal .entry textarea { min-height: 80px; }
#timesheet-modal .entry [data-remove] { justify-self: end; }
@media (max-width: 600px) {
  #timesheet-modal .entry { grid-template-columns: minmax(0, 1fr); }
}

.nav-group-label { margin: 20px 12px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.workspace-heading { grid-column: 1 / -1; margin: 16px 0 0; }

.dashboard-create { position: relative; }
.dashboard-create summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.dashboard-create summary::-webkit-details-marker { display: none; }
.create-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 210px; padding: 6px; border: 1px solid #dbe3ed; border-radius: 12px; background: white; box-shadow: 0 12px 32px #172b4d26; }
.create-dropdown button { display: block; width: 100%; border: 0; border-radius: 7px; padding: 11px 12px; background: transparent; text-align: left; color: #172b4d; cursor: pointer; font: inherit; }
.create-dropdown button:hover, .create-dropdown button:focus-visible { background: #edf3ff; }
.create-status:empty { display: none; }
.create-status { padding: 12px 28px; color: #a32929; background: #fff1f0; }
@media (max-width: 600px) { .top-actions { flex-wrap: wrap; } }

/* Material-inspired surface, color, shape, and interaction tokens. */
:root { --md-primary: #006b60; --md-on-primary: #fff; --md-primary-container: #9ef2df; --md-on-container: #00201b; --md-surface: #f5faf7; --md-surface-container: #e9efeb; --md-outline: #bfc9c2; --md-text: #192c26; color: var(--md-text); background: var(--md-surface); }
[hidden] { display: none !important; }
.sidebar { background: var(--md-surface-container); color: var(--md-text); border-right: 1px solid #dbe5de; }
.sidebar small { color: #52645c; }
.nav button { color: #43594f; border-radius: 28px; min-height: 48px; padding-inline: 20px; }
.nav button:hover { background: #dce9e2; }
.nav button.active { background: #bcebdd; color: #00382e; font-weight: 650; }
.topbar { background: var(--md-surface); border-bottom: 1px solid #dbe5de; }
.card, .login-card { border: 1px solid #e1e9e3; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px #12271b12; }
.btn { border-radius: 24px; min-height: 40px; padding: 10px 20px; border-color: var(--md-outline); color: var(--md-primary); font-weight: 600; transition: background .15s, box-shadow .15s; }
.btn:hover:not(:disabled) { background: #e5f0e9; }
.btn.primary { background: var(--md-primary); color: var(--md-on-primary); border-color: transparent; box-shadow: 0 1px 3px #002c2326; }
.btn.primary:hover:not(:disabled) { background: #00554c; box-shadow: 0 3px 7px #002c2330; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #008f80; outline-offset: 3px; }
.field input, .field select, .field textarea, .top-actions select { border-radius: 8px; border-color: #87988e; min-height: 44px; background: #fbfdfb; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--md-primary); outline-offset: -2px; }
.badge { border-radius: 8px; background: #d5eee3; color: #164d3c; }
.attendance-modal { border: 0; border-radius: 28px; box-shadow: 0 16px 48px #102d2940; }
.attendance-modal::backdrop { background: #17292380; }
.modal-card { background: #f8fcf9; border-radius: 28px; }
.profile-dropdown, .create-dropdown { border-radius: 16px; background: #f3f8f4; box-shadow: 0 4px 16px #17332830; }
.work-table { width: 100%; border-collapse: collapse; }
.work-table th { background: #edf4ef; color: #43594f; font-size: 12px; font-weight: 650; padding: 16px 12px; }
.work-table td { padding: 16px 12px; border-bottom: 1px solid #e0e8e2; }
.work-table tbody tr:hover { background: #f4f9f5; }
.pagination { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 16px; padding: 14px 4px 4px; font-size: 13px; color: #52645c; }
.pagination label { display: flex; align-items: center; gap: 8px; }
.pagination select { min-height: 36px; border: 1px solid var(--md-outline); border-radius: 8px; padding: 6px; background: #fff; color: var(--md-text); }
.pagination-buttons { display: flex; gap: 4px; }
.pagination-buttons .btn { width: 40px; padding: 5px; font-size: 22px; border: 0; }
@media (max-width: 600px) { .pagination { justify-content: flex-start; gap: 10px; } .page { padding: 18px; } }
@media print { .pagination { display: none; } .work-table tr[hidden] { display: table-row !important; } }

/* Shared action-button sizing across pages, tables, and dialogs. */
:root { --button-height: 40px; --button-font-size: 14px; --button-padding-inline: 20px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--button-height);
  min-height: var(--button-height);
  min-width: 96px;
  width: fit-content;
  padding: 0 var(--button-padding-inline);
  font-size: var(--button-font-size);
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  align-self: center;
  flex-shrink: 0;
}
.pagination-buttons .btn, .modal-close, #calendar-prev, #calendar-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-height);
  min-width: var(--button-height);
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.modal-close { border-radius: 50%; }
.modal-close:hover { background: #e5f0e9; }
.action-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.btn.icon-action { width: 40px; min-width: 40px; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.create-dropdown button { display: flex; align-items: center; gap: 12px; }
.button-label { pointer-events: none; }
.nav button { display: flex; align-items: center; gap: 12px; }
.create-dropdown button { min-height: var(--button-height); font-size: var(--button-font-size); line-height: 20px; }

/* Compact page rhythm: reduce empty space without shrinking action targets. */
.sidebar { padding: 18px 12px; }
.nav { margin-top: 20px; gap: 2px; }
.nav button { min-height: 40px; padding: 8px 12px; font-size: 14px; line-height: 20px; gap: 10px; }
.nav-group-label { margin: 12px 12px 4px; }
.topbar { height: 64px; padding-inline: 20px; }
.page { width: 100%; padding: 20px; }
.page-header { margin-bottom: 16px; gap: 12px; align-items: center; }
.page-header p { margin: 6px 0 0; }
.page h1 { font-size: 26px; }
.card, .queue-item { padding: 16px; }
.card h2 { margin-bottom: 12px; }
.card p { margin-block: 8px; }
.cards { gap: 12px; margin-bottom: 12px; }
.grid, .queue { gap: 12px; }
.row { padding: 8px 0; gap: 12px; }
.row .button-row, .page-header .button-row { margin-top: 0; }
.button-row { margin-top: 12px; gap: 8px; }
.work-table th, .work-table td { padding: 10px 12px; }
.pagination { padding-top: 8px; gap: 12px; }
.message:empty { display: none; }
.message { margin-top: 8px; }
.queue-head { margin-bottom: 10px; }
.form-grid { gap: 12px; }
.attendance-modal .modal-card { padding: 20px; }
.attendance-modal h2 { margin-bottom: 16px; }
.entry { padding: 10px; gap: 10px; }
.home-welcome { padding: 20px 24px; }
.home-welcome h1 { font-size: 30px; margin: 8px 0 6px; }
.home-art { width: 180px; height: 110px; }
.home-pulse { padding: 12px 0; gap: 20px; }
.home-module-heading { margin: 16px 0 8px; }
.home-widgets { gap: 6px 18px; margin-bottom: 16px; }
.home-shortcut { padding: 5px 2px; }
.workspace-heading { margin-top: 8px; }
.calendar-date { min-height: 76px; padding: 6px; gap: 3px; }
.calendar-event { padding: 2px 4px; }
.home-calendar th { padding: 8px; }
.calendar-legend { margin: 8px 0; }
.org-tree { padding-block: 12px; }
@media (max-width: 700px) {
  .page { padding: 14px; }
  .topbar { padding-inline: 14px; }
  .home-welcome { padding: 18px; }
  .home-art { width: 110px; height: 90px; }
  .home-welcome h1 { font-size: 26px; }
}
.profile-dropdown .btn { width: 100%; justify-content: flex-start; }

.engagements-section { margin-top: 16px; }
.engagement-filters { margin-bottom: 12px; align-items: center; }
#engagement-fields { grid-column: 1 / -1; }
#engagement-fields > p { grid-column: 1 / -1; }

.cards.admin-home-metrics { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }

.cards.employee-day-panels { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.employee-leave-summary { display:flex; flex-wrap:wrap; gap:24px; }
.employee-leave-summary > div { display:grid; gap:4px; }
.employee-leave-summary strong { font-size:24px; color:var(--primary); }
.employee-leave-summary small { color:var(--muted); }

.home-welcome { padding:16px 20px; background:#e6f2ee; color:#173f3b; border-radius:12px; margin-bottom:18px; }
.home-welcome h1 { color:#173f3b; font-size:24px; margin:4px 0; }
.home-welcome p,.home-eyebrow { color:#526c66; }
.home-today { font-size:14px; color:#526c66; white-space:nowrap; margin-left:16px; }
.home-workspace-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); gap:18px; align-items:start; }
.home-workspace-main,.home-workspace-side { min-width:0; display:grid; gap:18px; align-content:start; }
.home-workspace-layout .card { min-width:0; overflow-wrap:anywhere; }
.home-workspace-side .page-header { flex-wrap:wrap; gap:8px; }
.home-workspace-side .employee-leave-summary { gap:16px; }
.home-workspace-layout .cards { grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); }
.home-workspace-layout .metric strong { font-size:28px; }
.task-group-heading { font-size:12px; text-transform:uppercase; letter-spacing:.7px; margin:16px 0 6px; }
@media(max-width:1200px){ .home-workspace-layout { grid-template-columns:1fr; } }

.home-workspace-layout .cards.admin-home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media(max-width:480px){.home-workspace-layout .cards.admin-home-metrics {grid-template-columns:1fr;} .home-today {white-space:normal;} }

.home-workspace-side .employee-leave-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.home-workspace-side .employee-leave-summary span { font-size:12px; }
.home-workspace-side .employee-leave-summary small { font-size:11px; }

.home-live-clock .row {flex-wrap:wrap;gap:10px;}
.engagement-progress {margin-bottom:16px; padding-bottom:12px;border-bottom:1px solid #d6e2e6;}

.table-tools {display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:10px 0;}
.table-tools label {display:grid;gap:4px;font-size:12px;color:#526c66;}
.table-tools input,.table-tools select {height:40px;padding:8px 10px;border:1px solid #c8d8d3;border-radius:8px;max-width:100%;}
.table-sort {border:0;background:transparent;color:inherit;font:inherit;text-transform:inherit;cursor:pointer;padding:4px 0;text-align:left;}
th[aria-sort="none"] .table-sort::after {content:" \2195";opacity:.5;}
th[aria-sort="ascending"] .table-sort::after {content:" \2191";}
th[aria-sort="descending"] .table-sort::after {content:" \2193";}
.table-sort:focus-visible {outline:2px solid #14786f;outline-offset:3px;}

.template-checklist {grid-column:1/-1;}
.template-task {padding:12px 0;border-bottom:1px solid #d6e2e6;margin-bottom:12px;}

.task-discussion { border-top: 1px solid var(--border, #dde3eb); margin-top: 16px; padding-top: 12px; }
#task-timeline { max-height: 280px; overflow-y: auto; margin-bottom: 12px; }
.task-activity { border-left: 2px solid #b5c6dd; padding: 6px 12px; margin: 8px 0; }
.task-activity p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 5px 0; }
.task-comment { border-left-color: #4267c9; background: #f4f7fc; border-radius: 4px; }
.workload-summary { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:14px 0; }
.workload-metric { padding:14px;border-radius:12px;background:var(--surface,#fff);border:1px solid var(--border,#dce4e5);display:flex;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;gap:8px;align-items:baseline; }
.workload-metric strong { font-size:1.7rem;color:#087f75; }
.workload-metric span { font-size:.85rem; }
.workload-bar { height:5px;min-width:60px;margin-top:5px;background:#e1eae8;border-radius:4px; }
.workload-bar span { height:100%;display:block;background:#087f75;border-radius:4px; }
#workload-filter { display:flex;flex-wrap:wrap;gap:12px;align-items:end; }
#workload-filter .field { flex:1 1 180px;max-width:260px; }
#workload-filter .modal-actions { margin:0; }
.portal-page { max-width:900px;margin:32px auto;padding:24px; }
.portal-page .brand { margin-bottom:24px;color:#087f75; }
.portal-page form { margin-top:20px; }
.portal-access { border-top:1px solid #dce4e5;padding-top:12px;margin-top:12px; }
.portal-access input { width:100%; }
.employee-profile-photo { width:112px;height:112px;object-fit:cover;border-radius:50%;margin-bottom:16px; }
.private-profile-details { display:grid;grid-template-columns:minmax(100px,180px) 1fr;gap:10px; }
.private-profile-details dd { margin:0;overflow-wrap:anywhere; }
#private-profile-form .form-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px; }
.people-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:16px; }
.person-card { text-align:center; }
.person-card h2 { font-size:1.1rem; }
.person-initials { display:inline-flex;width:112px;height:112px;border-radius:50%;align-items:center;justify-content:center;background:#dcefe9;color:#087f75;font-size:2rem; }
.profile-section { border:1px solid #dce4e5;border-radius:12px;padding:16px;margin:0 0 16px; }
.profile-section legend { padding:0 6px;font-weight:600; }
.profile-section .muted { margin:0 0 12px; }

/* Shared photo and receipt picker */
.upload-field{min-width:0;grid-column:1/-1}.upload-zone{position:relative;display:flex!important;align-items:center;justify-content:center;gap:6px;padding:20px!important;border:1.5px dashed #a5b4cf;border-radius:12px;background:#f6f8fd;cursor:pointer;text-align:center;overflow:hidden;color:#34486a;font-size:0!important}.upload-zone strong{font-size:14px}.upload-zone>span:not(.upload-symbol){font-size:12px;color:#69768c}.upload-symbol{display:flex;color:#536dc0;margin-bottom:4px}.upload-zone:hover,.upload-zone:focus-within{background:#eef2ff;border-color:#536dc0;box-shadow:0 0 0 3px #536dc01a}.upload-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload-zone small{display:none}.upload-preview-list{display:grid;gap:8px;margin-top:10px}.upload-preview{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e0e5ed;border-radius:10px;background:#fff;min-width:0}.upload-preview img,.upload-file-badge{width:48px;height:48px;object-fit:cover;border-radius:8px;flex-shrink:0}.upload-file-badge{display:grid;place-items:center;background:#eef2ff;color:#536dc0;font-size:12px;font-weight:700}.upload-preview>div{min-width:0;flex:1}.upload-preview strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.upload-preview small{display:block;color:#738097;margin-top:4px}.upload-remove{min-width:36px!important;width:36px;height:36px!important;padding:0!important;font-size:22px!important}.upload-field .message:empty{display:none}

.invoice-print-table {width:100%;border-collapse:collapse;margin:24px 0;}
.invoice-print-table th,.invoice-print-table td {padding:12px;text-align:left;border-bottom:1px solid #ccc;vertical-align:top;}
.invoice-print-table th:last-child,.invoice-print-table td:last-child {text-align:right;white-space:nowrap;}
#invoice-preview .slip-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media print {body:has(#invoice-preview[open]) #create-status {display:none;} #invoice-preview tr {break-inside:avoid;}}

#tenant-fields, #tenant-form > .message { grid-column: 1 / -1; }
/* Keep navigation stationary; the workspace owns the page scroll. */
@media screen {
  body:has(.shell) { height: 100dvh; overflow: hidden; }
  .shell { height: 100dvh; min-height: 0; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .sidebar { min-height: 0; display: flex; flex-direction: column; }
  .sidebar .brand { flex: 0 0 auto; }
  .sidebar .nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .content { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
  .topbar { position: relative; z-index: 30; flex-shrink: 0; height: auto; min-height: 64px; margin: 16px 20px 0; padding: 12px 20px; gap: 12px; border: 1px solid #dbe5de; border-radius: 16px; box-shadow: 0 6px 22px #17374712; }
  #create-status { grid-row: 2; }
  #create-status:empty { display: none; }
  .content > .page { grid-row: 3; width: 100%; max-width: none; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: clamp(16px, 2vw, 32px); }
  @media (max-width: 900px) {
    .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .sidebar { padding: 8px 12px; }
    .sidebar .nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 4px; }
    .sidebar .nav > * { flex-shrink: 0; }
    .sidebar .nav-group-label { align-self: center; margin: 0 8px; }
    .topbar { margin: 8px 12px 0; padding: 12px; flex-wrap: wrap; }
    .top-actions { flex-wrap: wrap; min-width: 0; gap: 8px; }
    .top-actions select { max-width: min(100%, 240px); }
  }
}
@media screen and (min-width: 901px) {
  .sidebar .nav { scrollbar-width: none; }
  .sidebar .nav::-webkit-scrollbar { display: none; }
}

/* Personal color themes; semantic warning/error colors remain unchanged. */
:root { --theme-hover:#00554c; --theme-soft:#e6f2ee; --theme-active:#bcebdd; --theme-ink:#173f3b; --theme-muted:#526c66; --theme-border:#dbe5de; }
:root[data-theme="ocean"] { --md-primary:#235fa4; --md-primary-container:#d3e6ff; --md-on-container:#122f51; --md-surface:#f5f8fd; --md-surface-container:#e9eef6; --md-outline:#bac7d9; --md-text:#203047; --theme-hover:#194b84; --theme-soft:#e7effb; --theme-active:#d0e3fb; --theme-ink:#163a63; --theme-muted:#526783; --theme-border:#dbe3ef; }
:root[data-theme="violet"] { --md-primary:#6b49a5; --md-primary-container:#eadcff; --md-on-container:#32204f; --md-surface:#faf7fd; --md-surface-container:#efebf5; --md-outline:#c9bedb; --md-text:#32283f; --theme-hover:#553586; --theme-soft:#f0e9f8; --theme-active:#e4d6f6; --theme-ink:#4c3173; --theme-muted:#6e5e82; --theme-border:#e6deee; }
:root[data-theme="sand"] { --md-primary:#835a23; --md-primary-container:#f5dfbd; --md-on-container:#3f290d; --md-surface:#fcf9f4; --md-surface-container:#f2ede4; --md-outline:#d1c3ab; --md-text:#3b3022; --theme-hover:#68461a; --theme-soft:#f5ecdd; --theme-active:#eddbbb; --theme-ink:#61421c; --theme-muted:#79664d; --theme-border:#e8dfd1; }
@media screen {
  .sidebar, .topbar, .card, .login-card, .profile-dropdown, .create-dropdown { border-color:var(--theme-border); }
  .sidebar small, .nav button, .muted, .home-eyebrow { color:var(--theme-muted); }
  .nav button:hover, .btn:hover:not(:disabled), .create-dropdown button:hover, .create-dropdown button:focus-visible { background:var(--theme-soft); }
  .nav button.active { background:var(--theme-active); color:var(--theme-ink); }
  .btn.primary:hover:not(:disabled) { background:var(--theme-hover); }
  button:focus-visible, summary:focus-visible, a:focus-visible { outline-color:var(--md-primary); }
  .field input, .field select, .field textarea, .top-actions select { background:var(--md-surface); border-color:var(--md-outline); color:var(--md-text); }
  .avatar, .person-initials { background:var(--theme-active); color:var(--theme-ink); }
  .home-welcome { background:var(--theme-soft); color:var(--theme-ink); }
  .home-welcome h1 { color:var(--theme-ink); }
  .home-welcome p { color:var(--theme-muted); }
  .modal-card, .profile-dropdown, .create-dropdown { background:var(--md-surface); }
  .create-dropdown button { color:var(--md-text); }
  .work-table th { background:var(--theme-soft); color:var(--theme-muted); }
  .work-table td { border-color:var(--theme-border); }
  .work-table tbody tr:hover { background:var(--md-surface); }
}
.theme-picker { min-width:0; margin:0; padding:12px 0 0; border:0; border-top:1px solid var(--theme-border); }
.theme-picker legend { font-size:13px; font-weight:650; padding:0 0 6px; }
.theme-options { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.theme-option { display:flex; align-items:center; gap:6px; min-height:40px; padding:6px 8px; border:1px solid var(--theme-border); border-radius:10px; cursor:pointer; font-size:13px; }
.theme-option:has(input:checked) { background:var(--theme-soft); border-color:var(--md-primary); }
.theme-option:focus-within { outline:2px solid var(--md-primary); outline-offset:2px; }
.theme-option input { margin:0; accent-color:var(--md-primary); }
.theme-swatch { width:12px; height:12px; flex:0 0 12px; border-radius:50%; background:var(--swatch); }
.theme-hint { font-size:11px; margin:8px 0 0; }
.profile-dropdown:has(.theme-picker) { width:280px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 100px); overflow-y:auto; }

/* Screen appearance is independent of the selected accent palette. */
@media screen {
  :root { color-scheme:light; --surface:var(--md-surface); --border:var(--theme-border); --primary:var(--md-primary); --muted:var(--theme-muted); }
  :root[data-mode="dark"] { color-scheme:dark; --md-surface:#141a20; --md-surface-container:#1c242d; --md-outline:#566574; --md-text:#e4ebf2; --md-primary:#7edecb; --md-on-primary:#10251f; --md-primary-container:#23453d; --md-on-container:#d7fff3; --theme-soft:#22332f; --theme-active:#2b4942; --theme-ink:#dcf8f0; --theme-muted:#b4c0cb; --theme-border:#35414d; --theme-hover:#a0efdf; }
  :root[data-mode="dark"][data-theme="ocean"] { --md-primary:#96c5ff; --md-on-primary:#14283d; --theme-soft:#233246; --theme-active:#2d4664; --theme-ink:#e2efff; --theme-hover:#bddaff; --md-primary-container:#2d4664; }
  :root[data-mode="dark"][data-theme="violet"] { --md-primary:#d1b4ff; --md-on-primary:#2e2044; --theme-soft:#30283e; --theme-active:#46345d; --theme-ink:#f1e6ff; --theme-hover:#e2ceff; --md-primary-container:#46345d; }
  :root[data-mode="dark"][data-theme="sand"] { --md-primary:#efc88c; --md-on-primary:#332612; --theme-soft:#352e24; --theme-active:#4a3c28; --theme-ink:#fff0d8; --theme-hover:#f7deb8; --md-primary-container:#4a3c28; }
  :root[data-mode="dark"] :is(.card,.login-card,.queue-item,.entry,.org-person,.person-card,.profile-section,.upload-preview,.workload-metric,.persona,.attendance-modal) { background:var(--md-surface-container); color:var(--md-text); border-color:var(--theme-border); }
  :root[data-mode="dark"] :is(h1,h2,h3,h4,.metric strong,.empty,.field,.home-today,.pagination,.table-tools label,.org-person small,.upload-preview small,.task-group-heading) { color:var(--md-text); }
  :root[data-mode="dark"] :is(input,select,textarea) { background:var(--md-surface); color:var(--md-text); border-color:var(--md-outline); }
  :root[data-mode="dark"] input::placeholder, :root[data-mode="dark"] textarea::placeholder { color:#9aaaba; }
  :root[data-mode="dark"] .btn:not(.primary) { background:var(--md-surface-container); color:var(--md-primary); border-color:var(--md-outline); }
  :root[data-mode="dark"] .btn:not(.primary):hover:not(:disabled) { background:var(--theme-soft); }
  :root[data-mode="dark"] .btn.danger, :root[data-mode="dark"] .error { color:#ffb4ac; }
  :root[data-mode="dark"] .message { color:var(--md-primary); }
  :root[data-mode="dark"] .message.error { color:#ffb4ac; }
  :root[data-mode="dark"] :is(.badge,.calendar-event,.upload-file-badge,.task-comment,.org-match) { background:var(--theme-active); color:var(--theme-ink); }
  :root[data-mode="dark"] :is(.calendar-date,.calendar-empty,.upload-zone) { background:var(--md-surface-container); color:var(--md-text); border-color:var(--md-outline); }
  :root[data-mode="dark"] .calendar-date:hover { background:var(--theme-soft); }
  :root[data-mode="dark"] .pending-leave { background:#47391e; color:#ffdc98; }
  :root[data-mode="dark"] .timesheet-event { background:#263956; color:#c0d6ff; }
  :root[data-mode="dark"] :is(.row,.home-calendar td,.profile-section,.engagement-progress,.template-task,.task-discussion,.theme-picker) { border-color:var(--theme-border); }
  :root[data-mode="dark"] :is(.workload-metric strong,.upload-zone strong,.upload-zone>span:not(.upload-symbol)) { color:var(--md-primary); }
  :root[data-mode="dark"] .workload-bar { background:var(--theme-border); }
  :root[data-mode="dark"] .workload-bar span { background:var(--md-primary); }
  .profile-dropdown:has(.theme-picker) { max-height:min(540px,calc(100dvh - 110px)); }
  @media(max-width:600px) { .profile-dropdown:has(.theme-picker) { max-height:calc(100dvh - 310px); } }
}
.date-entry{display:flex;position:relative;align-items:stretch;gap:.25rem;min-width:0;width:100%}.date-entry>input[data-date-display]{min-width:0;flex:1;width:8.5rem}.date-picker-button{flex:none;border:1px solid var(--border,#bfcfc8);border-radius:.6rem;background:var(--surface,#fff);color:inherit;cursor:pointer;padding:.35rem .6rem}.date-entry>.date-entry-native{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;padding:0!important;pointer-events:none}.date-entry:focus-within{outline-offset:2px}

.navigation-toggle,.navigation-close { display:none; }
.navigation-drawer { padding:0; border:0; }
@media screen and (max-width:900px) {
  .shell { grid-template-rows:minmax(0,1fr); }
  .navigation-toggle,.navigation-close { display:inline-flex; align-items:center; gap:8px; }
  .navigation-toggle { flex:0 0 auto; }
  .navigation-drawer { position:fixed; inset:0 auto 0 0; margin:0; width:min(300px,calc(100vw - 48px)); max-width:none; height:100dvh; max-height:none; background:var(--md-surface-container); color:var(--md-text); box-shadow:8px 0 32px #0003; }
  .navigation-drawer::backdrop { background:#10251f80; }
  .navigation-drawer .sidebar { height:100%; padding:20px 14px; gap:18px; }
  .navigation-drawer .sidebar .brand { display:block; padding:0 10px; }
  .navigation-close { align-self:flex-end; }
  .navigation-drawer .sidebar .nav { display:flex; flex-direction:column; flex-wrap:nowrap; overflow-x:hidden; overflow-y:auto; margin:0; gap:6px; }
  .navigation-drawer .nav button { width:100%; min-height:44px; white-space:normal; }
  .navigation-drawer .nav-group-label { align-self:stretch; margin:12px 10px 4px; }
}
@media print { .navigation-toggle,.navigation-close,.navigation-drawer { display:none!important; } }

/* Only the selected section contributes to page height. */
.section-pages { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.section-pages .btn { white-space:normal; text-align:left; }
@media (max-width:600px) {
  .section-pages { gap:6px; }
  .section-pages .btn { flex:1 1 auto; justify-content:center; font-size:13px; padding:9px 12px; }
}

/* Compact actions retain a generous keyboard and touch target. */
.btn.icon-action { width:44px; min-width:44px; min-height:44px; height:44px; flex:0 0 44px; justify-content:center; }
.btn.icon-action:focus-visible { outline:2px solid currentColor; outline-offset:3px; }

.topbar-icon { position:relative; }
#notification-count { position:absolute; top:-5px; right:-6px; min-width:19px; height:19px; padding:0 4px; border-radius:10px; background:var(--md-primary,#006b60); color:var(--md-on-primary,#fff); border:2px solid var(--md-surface,#fff); font-size:10px; line-height:15px; text-align:center; font-weight:700; pointer-events:none; }

@media (max-width:600px) {
  .dashboard-create .create-dropdown { left:0; right:auto; min-width:min(210px,calc(100vw - 96px)); max-width:calc(100vw - 96px); }
}

/* Visual home: real work, balances and status at a glance. */
.visual-home .home-welcome { padding:24px; border:1px solid var(--theme-border,#d6e5df); background:var(--theme-soft,#e6f2ee); }
.welcome-date { display:flex; align-items:center; gap:12px; }
.welcome-calendar,.dashboard-symbol { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:14px; background:var(--theme-soft,#e6f2ee); color:var(--md-primary,#006b60); }
.welcome-calendar { background:var(--md-surface,#fff); }
.dashboard-symbol svg,.welcome-calendar svg,.dashboard-empty svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.visual-home .home-workspace-layout { grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:20px; }
.visual-home .home-workspace-main,.visual-home .home-workspace-side { display:flex; flex-direction:column; gap:20px; }
.visual-home .card { margin:0; padding:20px; border-radius:20px; }
.visual-home .employee-day-panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.day-stat { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.day-stat > strong { font-size:32px; line-height:1.1; letter-spacing:-1px; }
.day-stat > .btn { position:absolute; top:18px; right:12px; }
.day-stat > .dashboard-symbol { margin-bottom:4px; }
.day-stat > .badge { font-size:11px; max-width:100%; }
.visual-home h2 { font-size:17px; margin:0 0 14px; }
.visual-home .page-header h2 { margin:0; }
.leave-visual-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:16px 8px; }
.leave-visual { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; font-size:12px; }
.leave-ring { width:88px; height:88px; border-radius:50%; padding:6px; background:conic-gradient(var(--theme-border,#cbded7) var(--leave-used),var(--md-primary,#006b60) 0); }
.leave-ring > span { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; background:var(--md-surface,#fff); border-radius:50%; font-size:26px; font-weight:700; }
.leave-ring small { font-size:10px; font-weight:400; color:var(--theme-muted,#526c66); }
.leave-pending { display:flex; gap:8px; align-items:center; margin:18px 0 0; font-size:12px; }
.status-dot,.task-marker { width:8px; height:8px; border-radius:50%; background:var(--md-primary,#006b60); flex:none; }
.task-preview { gap:12px; }
.task-preview > div:first-of-type { flex:1; min-width:0; }
.task-preview .muted { font-size:12px; }
.task-due { text-align:right; font-size:12px; }
.task-due small { display:block; color:var(--theme-muted,#526c66); font-size:10px; }
.dashboard-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px; font-size:13px; }
.dashboard-empty svg { width:38px; height:38px; color:var(--md-primary,#006b60); }
.dashboard-card-heading { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.dashboard-card-heading h2 { margin:0 0 3px; }
.dashboard-card-heading .muted,.home-clock-schedule { font-size:12px; }
.home-clock-schedule summary { cursor:pointer; color:var(--theme-muted,#526c66); margin:8px 0; }
.visual-metric { position:relative; }
.visual-metric > .dashboard-symbol { margin-bottom:10px; }
@media(max-width:1100px){.visual-home .home-workspace-layout { grid-template-columns:minmax(0,1fr); }.visual-home .home-workspace-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }}
@media(max-width:600px){.visual-home .home-workspace-side { display:flex; }.visual-home .card { padding:16px; }.visual-home .employee-day-panels { gap:8px; }.visual-home .day-stat { padding:14px 10px; }.day-stat > strong{font-size:25px;}.day-stat > .btn{position:static;align-self:flex-end;margin-top:auto;}.day-stat > .muted{font-size:12px;}.welcome-date{gap:6px;}.welcome-calendar{display:none;}.visual-home .home-welcome{padding:18px;}.home-today{font-size:12px;}}

.leave-ring { position:relative; padding:0; background:none; }
.leave-ring > span { position:absolute; inset:9px; width:auto; height:auto; }
.leave-gauge { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke-width:6px; }
.leave-track { stroke:var(--theme-border,#d6e5df); }
.leave-available { stroke:var(--md-primary,#006b60); }
.birthday-setup-action { margin-top:12px; }

/* A shared grid avoids unused space beside a long dashboard sidebar. */
.visual-home .dashboard-balanced { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
.dashboard-balanced > .dashboard-metric-strip { grid-column:1 / -1; }
.visual-home .home-welcome { padding:16px 20px; margin-bottom:16px; }
.visual-home .dashboard-balanced .card { padding:16px; }
.dashboard-balanced .day-stat { display:grid; grid-template-columns:40px minmax(0,1fr) 44px; gap:5px 10px; align-items:center; }
.dashboard-balanced .day-stat > .dashboard-symbol { grid-column:1; grid-row:1 / 3; margin:0; width:40px; height:40px; }
.dashboard-balanced .day-stat > .muted { grid-column:2; grid-row:1; font-size:12px; }
.dashboard-balanced .day-stat > strong { grid-column:2; grid-row:2; font-size:27px; }
.dashboard-balanced .day-stat > .btn { position:static; grid-column:3; grid-row:1 / 3; }
.dashboard-balanced .day-stat > .badge { grid-column:2 / 4; justify-self:start; margin-top:3px; }
.dashboard-balanced .dashboard-empty { padding:10px; gap:7px; }
.dashboard-balanced .dashboard-empty svg { width:28px; height:28px; }
.dashboard-balanced .home-live-clock .row { flex-wrap:wrap; gap:10px; }
.dashboard-balanced .home-live-clock p { margin:8px 0; font-size:13px; }
.dashboard-balanced .home-live-clock .dashboard-symbol { float:left; margin:0 10px 8px 0; }
.dashboard-balanced .home-live-clock h2 { margin:0 0 8px; }
.dashboard-balanced > #partner-leave-agenda { grid-column:span 2; }
.dashboard-balanced .dashboard-card-heading { margin-bottom:8px; }
.dashboard-balanced .leave-ring { width:72px; height:72px; }
.dashboard-balanced .leave-ring > span { font-size:23px; }
.dashboard-balanced .leave-visual-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.dashboard-balanced .visual-metric { display:grid; grid-template-columns:44px 1fr; gap:4px 12px; }
.dashboard-balanced .visual-metric > .dashboard-symbol { grid-row:1 / 4; margin:0; }
.dashboard-balanced .visual-metric > strong { font-size:27px; }
@media(max-width:1200px){
 .visual-home .dashboard-balanced { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .dashboard-balanced > #partner-leave-agenda { grid-column:auto; }
}
@media(max-width:700px){
 .visual-home .dashboard-balanced { grid-template-columns:minmax(0,1fr); gap:12px; }
 .dashboard-balanced .employee-day-panels { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .dashboard-balanced .day-stat { display:flex; align-items:flex-start; gap:6px; padding:12px 8px; }
 .dashboard-balanced .day-stat > .dashboard-symbol { width:32px; height:32px; }
 .dashboard-balanced .day-stat > .btn { align-self:flex-end; }
 .dashboard-balanced .day-stat > .badge { font-size:10px; }
 .dashboard-balanced .day-stat > strong { font-size:24px; }
}

@media (min-width:1000px) and (max-height:850px){
 .visual-home .home-welcome { padding:12px 16px; margin-bottom:12px; }
 .visual-home .home-welcome p { display:none; }
 .visual-home .dashboard-balanced { gap:12px; }
 .visual-home .dashboard-balanced .card { padding:12px; }
 .dashboard-balanced .leave-ring { width:64px; height:64px; }
 .dashboard-balanced .day-stat { gap:3px 8px; }
 .dashboard-balanced .page-header { margin-bottom:10px; }
}

.platform-search { max-width:420px; margin-bottom:16px; }
.platform-modal { width:min(920px,calc(100vw - 32px)); max-width:calc(100vw - 32px); }
.platform-modal > .modal-card { width:100%; max-width:none; padding:24px; }
.platform-modal #tenant-fields,.platform-modal #setup-support-form { min-width:0; }
.platform-modal #tenant-fields > .section-pages { margin-bottom:16px; }
.platform-modal #tenant-fields > section > h3,.platform-modal #tenant-fields > section > .form-grid { grid-column:1 / -1; }
.platform-modal #tenant-fields > section > .form-grid { width:100%; }
.platform-modal #setup-support-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.platform-modal #setup-support-fields,.platform-modal #setup-support-form > .message,.platform-modal #setup-support-form > label:has(textarea) { grid-column:1 / -1; }
.platform-modal #setup-support-form textarea { min-height:60px; }
.platform-modal #tenant-form > button { justify-self:start; }
.platform-modal .section-pages { gap:8px; }
.platform-modal [data-step] > label.field { margin-bottom:10px; }
@media(max-width:600px){.platform-modal > .modal-card{padding:18px;}.platform-modal #setup-support-form{grid-template-columns:1fr;}.platform-modal .form-grid{grid-template-columns:1fr;}}

@media(min-width:900px){.platform-modal #setup-support-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }}

.payslip-preview-notice { border:1px dashed var(--md-outline,#87988e); padding:12px; border-radius:8px; background:var(--theme-soft,#e6f2ee); }
@media print { .payslip-preview-notice { border:2px solid #555; color:#111; background:white; } }

.attendance-map-card{width:min(900px,100%)}
.attendance-checkin-map{display:block;width:100%;height:clamp(240px,45vh,440px);border:1px solid var(--border);border-radius:12px;background:var(--surface)}

#password-login > button[type="submit"], #password-login > button.primary { justify-self:end; }

.login-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; grid-column:1 / -1; }
.login-actions .btn { white-space:nowrap; }
@media(max-width:380px){ .login-actions {gap:8px;} .login-actions .btn {padding-inline:10px;} }
/* Focused sign-in form with a lightweight, decorative desktop brand panel. */
.login-refresh{grid-template-columns:minmax(0,1.08fr) minmax(360px,1fr);gap:64px;max-width:1280px;margin:auto;padding:48px 64px;min-height:100svh;align-items:center}
.login-refresh .login-card{width:100%;max-width:440px;padding:36px;border-radius:24px;box-shadow:0 18px 60px #123d3010;justify-self:center}
.login-refresh .login-card > .brand,.login-refresh .login-card > .eyebrow{display:none}
.login-refresh h1{margin:0 0 10px;font-size:30px;letter-spacing:-.8px}
.login-refresh .login-card > .muted{margin:0 0 30px;line-height:1.6}
.login-refresh #password-login{gap:20px}
.login-refresh .field{gap:8px}
.login-refresh .field > input,.login-password-field input{min-height:48px;width:100%;background:var(--md-surface,#fff)}
.login-intro{width:100%;position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:560px;padding:16px 0;color:var(--md-text,#18303f)}
.login-wordmark{font-size:28px;font-weight:800;letter-spacing:-1px;position:absolute;top:16px;left:0}
.login-wordmark span{display:block;font-size:9px;letter-spacing:2px;font-weight:600;margin-top:4px}
.login-intro-copy{margin-top:64px;position:relative;z-index:1}
.login-kicker{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--theme-primary,#00796b)}
.login-intro h2{font-size:clamp(40px,4.5vw,62px);line-height:1.06;letter-spacing:-2.7px;margin:20px 0}
.login-intro-copy > p:last-child{font-size:16px;line-height:1.6;color:var(--md-text-secondary,#567068);max-width:320px}
.login-illustration{position:relative;height:230px;max-width:420px;margin-top:24px}
.login-orbit{position:absolute;width:240px;height:190px;left:70px;top:0;border:1px dashed #72b5a3;border-radius:50%;transform:rotate(-18deg)}
.login-visual-card{position:absolute;border:1px solid var(--theme-border,#d7e5df);background:var(--md-surface,#fff);box-shadow:0 14px 38px #123d3010;border-radius:18px;padding:18px;width:190px}
.login-visual-card strong{display:block;font-size:13px;margin:10px 0}
.login-visual-people{left:0;top:20px;transform:rotate(-5deg)}
.login-visual-work{right:12px;top:70px;transform:rotate(5deg)}
.login-visual-symbol{display:inline-grid;place-items:center;width:30px;height:30px;background:#d5eee4;color:#006b58;border-radius:10px;font-size:22px}
.login-avatar-stack{display:flex;padding-left:4px}.login-avatar-stack i{display:grid;place-items:center;width:27px;height:27px;border:2px solid var(--md-surface,#fff);border-radius:50%;background:#d8ebe5;color:#71a191;margin-left:-4px;font-size:12px;font-style:normal}.login-avatar-stack i:nth-child(2n){background:#e5e4f2;color:#9c94bd}
.login-visual-line{height:7px;border-radius:10px;background:#d6e8e1;margin:9px 0;width:100%}.login-visual-line.short{width:65%;background:#ede9de}
.login-visual-note{position:absolute;bottom:0;left:70px;font-size:10px;letter-spacing:1.4px;color:var(--md-text-secondary,#567068)}
.login-password-field{display:flex;align-items:center;border:1px solid var(--theme-border,#c7d5cf);border-radius:12px;overflow:hidden;background:var(--md-surface,#fff)}
.login-password-field:focus-within{outline:2px solid var(--theme-primary,#00796b);outline-offset:2px}
.login-password-field input{border:0;border-radius:0;min-width:0;flex:1;outline:none}
.login-password-toggle.btn{border:0;background:transparent;box-shadow:none;padding:8px 12px;min-height:44px;font-size:11px;white-space:nowrap;flex:0 0 auto}.login-password-toggle .action-icon{display:none}
.login-refresh .login-actions{margin-top:4px;gap:12px}.login-refresh #forgot-password{background:transparent;border-color:transparent;box-shadow:none;padding-inline:0;font-size:12px}.login-refresh .login-actions button[type=submit]{padding:12px 24px;min-height:46px}
.login-support{font-size:11px;color:var(--md-text-secondary,#687984);line-height:1.6;border-top:1px solid var(--theme-border,#dbe4e9);padding-top:22px;margin:24px 0 0}
.login-environment{font-size:10px;color:var(--md-text-secondary,#687984);letter-spacing:.7px;margin-bottom:0}
@media(max-width:850px){.login-refresh{grid-template-columns:1fr;padding:28px 24px;gap:28px;align-content:center}.login-intro{min-height:0;align-self:auto;padding:0;max-width:440px;justify-self:center}.login-wordmark{position:static;font-size:25px}.login-intro-copy,.login-illustration{display:none}.login-refresh .login-card{padding:30px}.login-refresh .persona-grid{grid-template-columns:1fr}}
@media(max-width:400px){.login-refresh{padding:20px 14px}.login-refresh .login-card{padding:24px 20px}.login-refresh .login-actions{gap:8px}.login-refresh .login-actions button[type=submit]{padding-inline:16px}.login-refresh #forgot-password{font-size:11px}}
.login-refresh{height:100dvh;min-height:0;overflow-y:auto;align-content:safe center}
.login-refresh{grid-auto-rows:max-content}

.current-firm{font-size:13px;font-weight:600;color:var(--md-text);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 4px;}
@media(max-width:600px){.current-firm{max-width:130px;}}
/* Date filter rows align actions with the input baseline, below their labels. */
.button-row:has(> .field){align-items:flex-end;}
.button-row:has(> .field) > :is(.btn,button,a){align-self:flex-end;}
.date-entry{align-items:center;}
.date-entry > input[data-date-display]{height:44px;min-height:44px;}
.date-picker-button{display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:44px;min-height:44px;padding:0;align-self:center;}
.date-entry > .date-entry-native{min-height:1px!important;min-width:1px!important;max-height:1px!important;}
/* Table filters have labels too; align Reset with the controls, not the label row. */
.table-tools{align-items:flex-end;}
.table-tools > .btn{align-self:flex-end;}
.table-tools input,.table-tools select{height:44px;min-height:44px;}
/* Native month/year filters use the same 44px baseline as date and icon controls. */
#calendar-month,#leave-year,#approved-year{height:44px;min-height:44px;}
.button-row:has(#calendar-month) > .btn{align-self:flex-end;}
#calendar-prev,#calendar-next{width:44px;min-width:44px;height:44px;min-height:44px;}

@media screen {
 .checkin-report-dialog{width:min(1200px,calc(100vw - 24px));max-width:calc(100vw - 24px);}
 .checkin-report-dialog .modal-card{width:100%;box-sizing:border-box;overflow-x:hidden;}
 .checkin-report-dialog [hidden]{display:none!important;}
 .checkin-map-surface{position:relative;height:380px;overflow:hidden;background:#e4ebe8;border:1px solid var(--border);border-radius:12px;touch-action:none;cursor:grab;}
 .checkin-map-surface img{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none;}
 .checkin-map-pin{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;padding:6px;border:2px solid white;border-radius:24px;background:#006b62;color:white;font-weight:bold;cursor:pointer;box-shadow:0 2px 6px #0005;}
 .checkin-map-pin:focus-visible{outline:3px solid #db6800;outline-offset:2px;}
 .checkin-attribution{display:block;text-align:right;font-size:12px;margin-top:4px;}
 .checkin-map-controls{margin:12px 0 8px;}
 #checkin-map-selection{overflow-wrap:anywhere;}
 @media(max-width:600px){.checkin-map-surface{height:300px;}.checkin-report-dialog .modal-card{padding:18px;}.checkin-report-dialog .field{min-width:0;max-width:100%;}}
}

.leave-approval-detail { display:block; margin-top:4px; font-size:0.75rem; font-weight:400; line-height:1.4; overflow-wrap:anywhere; }

/* Each reporting subtree owns its full width; never shrink siblings into each other. */
.org-tree { max-width:100%; min-width:0; }
.org-tree ul { width:max-content; margin:0; }
.org-tree li { flex:0 0 auto; width:max-content; }
.org-tree li > ul { position:relative; margin-top:20px; }
.org-tree li > ul::before { top:-20px; left:50%; height:18px; }
.org-person { box-sizing:border-box; width:190px; min-width:190px; max-width:190px; overflow-wrap:anywhere; }
.org-tree .org-unassigned { width:100%; flex-wrap:wrap; }
#org-search { width: min(100%, 320px); }
.org-tree > h2:not(:first-child) { margin-top:24px; }
@media(max-width:700px) {
 .org-tree ul, .org-tree .org-unassigned { width:auto; flex-direction:column; gap:16px; }
 .org-tree li { width:100%; min-width:0; align-items:flex-start; }
 .org-tree li > ul { box-sizing:border-box; width:100%; border-top:0; border-left:2px solid #cdd9de; padding:0 0 0 12px; margin-top:16px; }
 .org-tree li > ul::before { display:none; }
 .org-person { width:100%; min-width:0; max-width:260px; }
}
.person-profile-link { display:inline; padding:0; margin:0; border:0; background:transparent; color:inherit; font:inherit; text-align:inherit; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; border-radius:2px; }
.person-profile-link:hover { color:var(--primary,#006b62); text-decoration-style:solid; }
.person-profile-link:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.people-profile-dialog { position:fixed; margin:auto; box-sizing:border-box; width:min(380px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #cdd9de; border-radius:20px; padding:28px; background:var(--surface,#fff); color:var(--text,#183b38); }
.people-profile-dialog::backdrop { background:#102c3655; }
.people-profile-dialog h2 { padding-right:20px; margin-bottom:4px; }
.people-profile-dialog dl { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; margin-bottom:0; }
.people-profile-dialog dd { margin:0; overflow-wrap:anywhere; }
.people-profile-dialog dt { opacity:.7; }
.people-profile-body > .btn { display:block; margin-top:10px; white-space:normal; }
.recruit-job-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin-top:16px; }
#recruit-content { margin-top:16px; }
#recruit-detail details { margin-top:16px; border-top:1px solid #cdd9de; padding-top:12px; }
#recruit-detail summary { cursor:pointer; font-weight:600; }
#recruit-detail article { padding:12px 0; border-bottom:1px solid #cdd9de; }
.recruit-prose { white-space:pre-wrap; overflow-wrap:anywhere; }

/* Lifecycle plans stay compact on desktop and readable in narrow dialogs. */
.lifecycle-tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0;}
.lifecycle-tasks .card{min-width:0;padding:16px;overflow-wrap:anywhere;}
.lifecycle-tasks h3{margin-top:0;}
@media(max-width:700px){.lifecycle-tasks{grid-template-columns:minmax(0,1fr);}}
#life-detail>h2{padding-right:40px;overflow-wrap:anywhere;}
.lifecycle-tasks .card{margin:0;}

/* Help is available by keyboard and touch, without hover-only instructions. */
.help-icon { position: relative; display: inline-grid; place-items: center; flex: none; margin-inline-start: .25rem; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--theme-muted, #526c66); width: 28px; height: 28px; font: 500 11px/1 system-ui, sans-serif; cursor: pointer; vertical-align: middle; box-shadow: none; }
.help-icon::before { content: ""; position: absolute; width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; opacity: .65; pointer-events: none; }
.help-icon:hover, .help-icon[aria-expanded="true"] { color: var(--primary, #00796b); background: var(--theme-soft, #e6f2ee); }
.help-topic { padding: .8rem 0; border-bottom: 1px solid var(--border, #ccd9d6); }
.help-topic summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.help-topic p { line-height: 1.65; }
.help-dialog .modal-card { width: min(640px, 100%); }
.help-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.field-with-help { position: relative; min-width: 0; }
.field-with-help > label { margin: 0; }
.field-with-help:has(> label[hidden]) { display: none; }
.asset-subtitle { display: block; margin-top: .25rem; opacity: .8; }
.field-with-help .field-help-caption { padding-inline-end: 36px; min-height: 28px; }

/* Contextual help overlays do not reserve space or move form controls. */
.field-with-help .field-help-caption { min-height: 0; }
.field-help-trigger { position: absolute; top: 0; right: 0; width: 28px; height: 28px; margin: 0; }
.help-popover { position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; padding: 14px 16px; border: 1px solid var(--border, #ccd9d6); border-radius: 12px; background: var(--surface, #fff); color: var(--md-text, #12343b); box-shadow: 0 8px 28px #0003; font-size: 14px; font-weight: 400; line-height: 1.55; text-align: start; }
.help-popover p { margin: 0; }
.help-guide-link { display: block; margin-top: 10px; padding: 4px 0; border: 0; background: transparent; color: var(--primary, #00796b); text-decoration: underline; cursor: pointer; font: inherit; }
.help-guide-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 600px) {
 table[data-mobile-cards] { display:block; width:100%; min-width:0 !important; }
 table[data-mobile-cards] thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 table[data-mobile-cards] tbody { display:grid; gap:12px; }
 table[data-mobile-cards] tr:not([hidden]) { display:block; padding:12px; border:1px solid var(--border,#dce4e5); border-radius:14px; background:var(--surface,#fff); }
 table[data-mobile-cards] td { display:block; width:auto; min-width:0; padding:8px 0; border:0; white-space:normal; overflow-wrap:anywhere; text-align:left !important; }
 table[data-mobile-cards] td::before { content:attr(data-cell-label); display:block; font-size:.75rem; font-weight:600; opacity:.75; margin-bottom:4px; }
 table[data-mobile-cards] td .btn { margin:3px; }
}

.sidebar .brand{font-size:20px;letter-spacing:-.6px;white-space:nowrap}