:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #17202a;
  background: #f4f6f8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button,
input,
select {
  font: inherit;
}

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

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

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

p {
  color: #5c6975;
  margin-top: 6px;
}

.status-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin: 0 0 4px;
  padding: 2px 8px;
}
.status-strip[hidden] { display: none !important; }
body.achievements-active .status-strip { display: none !important; }
body.achievements-active #status { display: none !important; }

.status {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

.logout-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.logout-icon-button img { display: block; width: 24px; height: 24px; }
.logout-icon-button:focus-visible { outline: 2px solid #146c5f; outline-offset: 2px; }

.notification-switcher { position: relative; }
.notification-switcher .role-trigger { position: relative; }
.notification-count { position: absolute; top: -8px; right: -10px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e33b35; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 0 0 2px #f4f6f8; pointer-events: none; }
.notification-count[hidden], .notification-menu[hidden] { display: none; }
.notification-menu { position: absolute; top: 100%; right: 0; z-index: 30; width: min(370px, 90vw); background: white; border: 1px solid #d8dee5; box-shadow: 0 4px 12px #17202a1f; }
.notification-menu-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid #d8dee5; }
.notification-menu-header #notificationPageLink{font-weight:700;color:inherit;text-decoration:none;font-size:inherit}
.notification-menu-header #notificationPageLink:hover,.notification-menu-header #notificationPageLink:focus-visible{text-decoration:underline}
#notificationsPage #notificationsTableContent .table-wrap{overflow-x:auto}
#notificationsPage #notificationsTableContent td:last-child>div{display:flex;gap:12px;align-items:center;white-space:nowrap}
.notification-menu-header button, .notification-row button { border: 0; background: transparent; color: #146c5f; cursor: pointer; padding: 4px; font-size: 12px; }
.notification-menu-header button:disabled { color: #9ba5ae; cursor: default; }
.notification-items { max-height: 400px; overflow-y: auto; }
.notification-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid #e1e5e9; }
.notification-row.unread { background: #eef7f5; }
.notification-row div { min-width: 0; overflow-wrap: anywhere; }
.notification-row p { font-size: 13px; }
.notification-row small { display: block; margin-top: 5px; color: #687785; }
.notification-row .notification-age { margin-top: 2px; color: #8996a2; }
.notification-row button { flex-shrink: 0; align-self: flex-start; }
.notification-actions { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: 2px; }
.notification-actions .notification-age { margin-top: 0; white-space: nowrap; font-size: 11px; }
.notification-empty { padding: 12px; }
.role-switcher { position: relative; }
.role-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 6px; min-height: 38px; border: 0; background: transparent; cursor: pointer; }
.role-trigger > img { width: 24px; height: 24px; }
.role-trigger > .role-arrow { width: 11px; height: 11px; }
.role-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 200px; padding: 4px; border: 1px solid #d8dee5; background: #fff; box-shadow: 0 4px 12px #17202a1f; }
.role-menu[hidden], .role-options[hidden] { display: none; }
.role-menu-username { padding: 10px 12px; font-weight: 600; overflow-wrap: anywhere; }
.role-menu-divider { height: 1px; margin: 3px 8px; background: #d8dee5; }
.role-menu #changeRolesButton { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.role-menu #changeRolesButton[hidden] { display: none; }
.role-options { padding-left: 10px; border-left: 2px solid #d8dee5; margin-left: 9px; }
.role-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.role-menu button[hidden] { display: none; }
.role-menu button:hover, .role-menu button[aria-current="true"] { background: #eef7f5; }
.role-trigger:focus-visible, .role-menu button:focus-visible { outline: 2px solid #146c5f; outline-offset: 1px; }

.current-user {
  padding: 9px 12px;
  border: 1px solid #d8dee5;
  background: #eef7f5;
  color: #146c5f;
  max-width: 260px;
  overflow-wrap: anywhere;
}

.nav {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid #d8dee5;
}

.nav-button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 12px 14px;
}

.nav-button.active {
  border-bottom-color: #146c5f;
  color: #146c5f;
  font-weight: 700;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

.error-banner {
  position: fixed;
  z-index: 2000;
  top: 16px;
  right: 16px;
  width: min(680px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow: auto;
  border: 1px solid #d98c8c;
  border-left: 5px solid #b42318;
  background: #fff8f8;
  color: #4b1717;
  box-shadow: 0 8px 28px rgb(16 24 40 / 22%);
  padding: 14px 16px;
}

.error-banner[hidden] {
  display: none;
}

.error-banner-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

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

.error-banner-message {
  margin: 10px 0 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.error-banner details {
  margin-top: 8px;
}

.error-banner pre {
  max-height: 38vh;
  margin: 8px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #7a1f1f;
}

.panel {
  background: #fff;
  padding: 22px;
}
.panel:not(.timesheet-panel) { border: 1px solid #d8dee5; }

.secondary-panel {
  margin-top: 18px;
}

.table-wrap {
  margin-top: 22px;
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1120px;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid #d8dee5;
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: #f8fafb;
  font-weight: 700;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover,
.clickable-row:focus {
  background: #eef7f5;
  outline: none;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.detail-grid div {
  border: 1px solid #d8dee5;
  background: #f8fafb;
  padding: 12px;
  min-width: 0;
}

.detail-grid span {
  display: block;
  color: #5c6975;
  font-size: 13px;
  margin-bottom: 6px;
}

.detail-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.edit-grid label {
  display: grid;
  gap: 6px;
  color: #394653;
}

.edit-grid input {
  width: 100%;
}

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

.checkbox-field input {
  width: auto;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

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

.status-grid div {
  border: 1px solid #d8dee5;
  background: #f8fafb;
  padding: 12px;
  min-width: 0;
}

.status-grid span {
  display: block;
  color: #5c6975;
  font-size: 13px;
  margin-bottom: 6px;
}

.status-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.actions {
  display: flex;
  gap: 10px;
}

.restart-control { display: flex; align-items: flex-start; gap: 7px; }
.restart-button-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.restart-button-stack .auto-pull-setting { cursor: pointer; }
.restart-control[hidden] { display: none; }
.restart-control .auto-pull-tooltip { left: auto; right: 0; }
.repository-header { display: flex; flex-direction: column; gap: 18px; }
.repository-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.repository-actions .actions { flex-wrap: nowrap; align-items: flex-start; min-width: max-content; }
.repository-actions { overflow: visible; max-width: 100%; }
.pull-button-wrap { position: relative; display: inline-flex; }
.pull-updated-overlay { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 7px; background: #fff; color: #b42318; border: 1px solid #b42318; font-weight: 600; pointer-events: none; }
.pull-cancel-symbol { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border: 2px solid #b42318; border-radius: 50%; font-size: 17px; line-height: 1; }
.pull-button-wrap.is-up-to-date:hover .pull-updated-overlay { display: inline-flex; }
.pull-button-wrap.is-up-to-date { cursor: not-allowed; }
.pull-control { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.auto-pull-setting { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.auto-pull-setting label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.auto-pull-setting input { margin: 0; padding: 0; }
.auto-pull-info { z-index: 1; position: relative; display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; border: 1px solid #657582; border-radius: 50%; cursor: help; font-size: 11px; font-weight: 700; }
.auto-pull-tooltip { display: none; position: absolute; z-index: 10000; top: 22px; left: -125px; width: 280px; background: #17202a; color: #fff; padding: 10px; border-radius: 4px; font-size: 12px; font-weight: 400; line-height: 1.4; }
.auto-pull-info img, .timesheet-info img { display: block; width: 16px; height: 16px; }
.auto-pull-info:hover, .auto-pull-info:focus { z-index: 10001; }
.auto-pull-info:hover .auto-pull-tooltip, .auto-pull-info:focus .auto-pull-tooltip { display: block; }

button {
  border: 1px solid #b7c1cc;
  background: #fff;
  color: #17202a;
  padding: 10px 16px;
  cursor: pointer;
}

button.primary {
  background: #146c5f;
  border-color: #146c5f;
  color: #fff;
}

button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.field {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  max-width: 520px;
  color: #394653;
}

input,
select {
  border: 1px solid #b7c1cc;
  padding: 10px 12px;
}

.password-input {
  display: grid;
  grid-template-columns: 1fr auto;
}

.password-input input {
  min-width: 0;
}

.icon-button {
  border-left: 0;
  padding-inline: 12px;
}

.password-form,
.login-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.password-form {
  max-width: 520px;
}

.password-form label,
.login-form label {
  display: grid;
  gap: 8px;
  color: #394653;
}

.login-form .remember-login { display: flex; align-items: center; gap: 8px; }
.login-form .remember-login input { margin: 0; }

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.login-shell {
  width: min(460px, calc(100vw - 32px));
}

.login-panel {
  background: #fff;
  border: 1px solid #d8dee5;
  padding: 28px;
}

.output {
  margin: 24px 0 0;
  min-height: 420px;
  overflow: auto;
  padding: 16px;
  background: #101820;
  color: #f2f7fb;
  line-height: 1.45;
  white-space: pre-wrap;
}

.output.compact {
  min-height: 220px;
}

@media (max-width: 720px) {
  .topbar,
  .panel-heading,
  .topbar-side,
  .actions {
    flex-direction: column;
  }

  .actions,
  button {
    width: 100%;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .edit-grid {
    grid-template-columns: 1fr;
  }

  /* Keep the app header compact on phones; content actions may still span the viewport. */
  .topbar {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }
  .topbar-left {
    min-width: 0;
  }
  .topbar-side {
    width: auto;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    margin-left: auto;
  }
  .topbar button,
  .topbar .role-trigger {
    width: 44px;
  }
  .topbar-brand h1 {
    font-size: 20px;
    white-space: nowrap;
  }
}

/* Tasks: values and editors share the same location. */
.tasks-filters { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.tasks-filters label { display: flex; align-items: center; gap: 8px; }
.tasks-filters select { min-width: 130px; }
.tasks-list { display: grid; gap: 12px; }
.tasks-list.condensed-view { gap: 2px; }
.tasks-list.condensed-view .parent-task:not(:first-child) { margin-top: 12px; }
.tasks-list.condensed-view .subtask { padding: 4px 10px; }
.tasks-list.condensed-view .subtask .task-headline { min-height: 26px; gap: 6px; flex-wrap: nowrap; }
.tasks-list.condensed-view .subtask .task-headline > .task-field { font-size: 14px; }
.tasks-list.condensed-view .subtask .task-row-controls button { padding: 2px 6px; font-size: 12px; }
.tasks-list.condensed-view .subtask .task-row-controls .task-delete { width: 27px; height: 26px; padding: 3px; }
.tasks-list.condensed-view .subtask .task-delete-icon { width: 16px; height: 16px; }
.task-item { padding: 14px; border: 1px solid #d8dee5; background: #fff; min-width: 0; }
.task-item.subtask { margin-left: 32px; background: #f8fafb; }
.task-headline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 38px; }
.task-number { color: #5c6975; }
.task-collapse { border: 0; padding: 3px 6px; }
.task-headline > .task-field { font-size: 17px; font-weight: 600; flex: 1; }
.task-field { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.task-field-value { white-space: pre-wrap; overflow-wrap: anywhere; }
.task-edit { visibility: hidden; border: 0; background: transparent; padding: 2px 6px; color: #146c5f; cursor: pointer; }
.task-field:hover .task-edit, .task-field:focus-within .task-edit { visibility: visible; }
.task-edit-icon { display: block; width: 16px; height: 16px; }
.task-inline-input { min-width: 120px; width: min(280px, 45vw); }
textarea.task-inline-input { min-height: 75px; }
.task-save, .task-cancel { padding: 5px 9px; }
.task-save { color: #146c5f; }
.task-properties { display: flex; flex-wrap: wrap; gap: 12px 25px; margin: 12px 0 0 30px; }
.task-property { display: grid; align-content: start; gap: 4px; min-width: 125px; }
.task-property:first-child { flex-basis: 100%; }
.task-property label { font-size: 12px; color: #5c6975; }
.task-row-controls { display: flex; gap: 5px; margin-left: auto; }
.task-row-controls button { padding: 5px 9px; font-size: 12px; border: 0; background: transparent; cursor: pointer; }
.task-row-controls button:hover { background: transparent; }
.task-row-controls button:focus-visible { outline: 2px solid #146c5f; outline-offset: 2px; }
.task-row-controls .task-delete { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 31px; padding: 5px; }
.task-delete-icon { display: block; width: 19px; height: 19px; }
.task-notification { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #d8dee5; }
.task-notification.unread { font-weight: 600; }
.task-notification button { padding: 5px 9px; }
.task-empty { padding: 18px 0; }
@media (max-width: 700px) { .task-item.subtask { margin-left: 12px; } .task-properties { margin-left: 0; } }

/* Audit history */
.audit-entry { padding: 12px 0; border-bottom: 1px solid #d8dee5; }
.audit-entry summary { cursor: pointer; font-weight: 600; }
.audit-entry pre { background: #f8fafb; border: 1px solid #d8dee5; padding: 12px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
#auditPageLabel { align-self: center; font-size: 13px; color: #5c6975; }
#auditPage .tasks-filters input { max-width: 160px; }
#auditPage .actions { align-items: center; }

/* Database backups */
.backup-settings { display: grid; gap: 12px; max-width: 560px; padding: 16px 0; }
.backup-settings > label { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.backup-settings > label:first-child { display: flex; flex-direction: row; align-items: center; }
.backup-settings button { justify-self: start; }
#backupConfigStatus { margin-bottom: 20px; color: #526372; font-size: 13px; }
#backupMessage { margin: 10px 0; white-space: pre-wrap; }
#backupHistory .audit-entry p { font-size: 13px; overflow-wrap: anywhere; }

/* Timesheets: compact spreadsheet layout. */
#timesheetsPage > .timesheet-panel { width: 100%; max-width: 900px; margin: 0 auto; box-sizing: border-box; }
.timesheet-features-link { display: flex; justify-content: flex-start; padding: 12px 14px; }
.timesheet-features-link a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #c9ded9; border-radius: 8px; background: #f2f8f6; color: #176d60; font-size: 13px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.timesheet-features-link a:hover { background: #e3f2ed; border-color: #8ebfb3; box-shadow: 0 2px 6px #17202a12; }
.timesheet-features-link a:focus-visible { outline: 2px solid #176d60; outline-offset: 3px; }
.timesheet-panel { padding: 0; }
.timesheet-date { text-align: center; background: #e1eedb; padding: 8px; font-weight: 600; }
.timesheet-table-wrap { margin: 0; overflow-x: auto; }
.timesheet-table { min-width: 710px; width: 100%; border-collapse: collapse; table-layout: fixed; }
.timesheet-table th,.timesheet-table td { border: 1px solid #c9d0da; padding: 8px; text-align: left; vertical-align: middle; }
.timesheet-table th:first-child,.timesheet-table td:first-child { width: 45.4%; }
.timesheet-table th:not(:first-child),.timesheet-table td:not(:first-child) { width: 13.65%; }
.timesheet-table thead th { background: #424242; color: white; }
.timesheet-table tbody td { background: #e6effd; }
.timesheet-table tbody tr.timesheet-break-row td { background: #f1f1f1; }
.timesheet-table select { width: 100%; min-width: 0; padding: 7px 4px; }
.timesheet-table button { padding: 7px; cursor: pointer; }
.timesheet-table .timesheet-time-button { display:grid; grid-template-columns:30px; grid-template-rows:30px auto; justify-content:center; justify-items:center; align-content:center; gap:2px; width:100%; min-width:0; min-height:36px; padding:3px; background:transparent; border:0; box-shadow:none; }
.timesheet-table .timesheet-time-button:hover { background: transparent; }
.timesheet-time-button img { display: block; width: 30px; height: 30px; }
.timesheet-table tfoot th,.timesheet-table tfoot td { background: #eef3fc; }
.timesheet-table tfoot td { text-align: right; font-weight: 600; }
.timesheet-table tfoot tr:last-child th,.timesheet-table tfoot tr:last-child td { border-bottom: 0; }
.timesheet-info { display: inline-flex; vertical-align: middle; margin-left: 4px; cursor: help; }

.timesheet-calendar { padding: 18px 12px; }
.timesheet-calendar-header { display: flex; justify-content: center; align-items: center; gap: 22px; margin-bottom: 12px; }
.timesheet-calendar-header button { border: 0; background: transparent; font-size: 24px; cursor: pointer; }
.timesheet-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; }
.timesheet-calendar-weekday { text-align: center; font-size: 12px; font-weight: 700; padding: 5px 0; }
.timesheet-calendar-day { min-height: 76px; border: 1px solid #d8dee5; padding: 8px; display: flex; flex-direction: column; gap: 5px; background: #f8fafb; }
.timesheet-calendar-day strong { font-size: 13px; }
.timesheet-calendar-day span { font-weight: 600; font-size: 13px; }
.timesheet-calendar-day small { color: #5c6975; font-size: 11px; }
.timesheet-calendar-day.day-off { background: #ebeff2; }
.timesheet-calendar-day.on-leave { background: #e1eedb; }
@media(max-width:700px) { .timesheet-calendar { padding: 12px 5px; } .timesheet-calendar-grid { gap: 2px; } .timesheet-calendar-day { min-height: 64px; padding: 4px; } .timesheet-calendar-day span { font-size: 11px; } }

.leave-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.leave-form label { display: grid; gap: 6px; }
.leave-form input,.leave-form select,.leave-form textarea { width: 100%; }
.leave-form label:has(textarea) { grid-column: 1/-1; }
.leave-form button { justify-self: start; }
.leave-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #d8dee5; }
.leave-row span { flex: 1; min-width: 180px; }
.leave-row small { width: 100%; color: #5c6975; }
#leaveContent h3 { margin-top: 20px; }
@media(max-width:700px){ .leave-form { grid-template-columns: 1fr; } }

/* User profile: edit controls occupy the existing detail-card positions. */
.profile-fields > .detail-grid[hidden], .profile-fields > .edit-grid[hidden] { display: none; }
.profile-fields .edit-grid { gap: 12px; margin-top: 22px; }
.profile-fields .profile-edit-card { display: flex; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid #d8dee5; background: #f8fafb; padding: 12px; min-width: 0; }
.profile-fields .profile-edit-card > span { display: block; color: #5c6975; font-size: 13px; }
.profile-fields .profile-edit-card input,.profile-fields .profile-edit-card select { width: 100%; min-width: 0; }

/* Operational To-Dos: distinct from development task hierarchy. */
.todo-create-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.todo-create-form h3, .todo-create-form > label:has(textarea), .todo-create-form fieldset { grid-column: 1 / -1; }
.todo-create-form label { display: grid; gap: 5px; min-width:0; }
.todo-create-form input:not([type="checkbox"]),.todo-create-form textarea,.todo-create-form select { width: 100%; min-width:0; box-sizing:border-box; }
.todo-add-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.todo-add-fields>label:has(textarea),.todo-add-fields>.todo-notification-options,.todo-add-fields>#todoAssigneeGroup,.todo-add-fields>button { grid-column:1/-1; }
.todo-add-fields>label:has(textarea) textarea { min-height:110px; resize:vertical; }
.todo-add-fields .todo-due-fields { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.todo-add-fields .todo-due-fields label { min-width:0; }
.todo-add-fields .todo-due-fields .todo-timezone-label { color:#5c6975; font-size:.85em; }
.todo-add-fields>button[type="submit"] { width:auto; min-width:110px; min-height:42px; padding:8px 18px; }
.todo-create-form fieldset { border: 1px solid #d8dee5; padding: 10px; }
#todoAssignees { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 4px; }
#todoAssignees label { display: inline-flex; align-items: center; gap: 5px; }
#todoAssignees input { width: auto; }
.todo-create-form fieldset > label { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0 0 10px; }
.todo-create-form fieldset > label input[type="checkbox"] { width: auto; margin: 0; }
#todoAssigneeGroup { grid-column: 1 / -1; min-width: 0; }
#todoAddDetails { grid-column: 1 / -1; }
#todoAddDetails > summary { cursor: pointer; padding: 12px 16px; border: 1px solid #d8dee5; border-radius: 4px; font-weight: 600; background:#fff; }
#todoAddDetails[open] > summary { border-bottom: 0; }
#todoAddDetails[open] > .todo-add-fields { border: 1px solid #d8dee5; border-top: 0; border-radius:0 0 4px 4px; padding:16px; background:#fff; }
#todoAddDetails { margin-bottom: 14px; }
#todoAssigneeGroup .task-filter-group { width: 100%; box-sizing: border-box; }
#todoAssigneeGroup .task-filter-choices { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
#todoAssigneeGroup .task-filter-choices label { display: inline-flex; width: 100%; align-items: center; gap: 8px; }
#todoAssigneeGroup .task-filter-choices input[type="checkbox"] { width: auto; margin: 0; }
#todoAssignedTasks { grid-column: 1 / -1; min-width: 0; margin-top: 4px; }
#todoAssignedTasks h3 { margin: 0 0 8px; font-size: 16px; }
#todoAssignedTasks p { margin: 0; color: var(--muted,#64748b); font-size: 13px; }
#todoAssignedTasks .data-table { width: 100%; }
#todoAssignedTasks .todo-task-table { table-layout:fixed; min-width:0; max-width:100%; }
#todoAssignedTasks .todo-task-table th,
#todoAssignedTasks .todo-task-table td { white-space:normal; overflow-wrap:anywhere; }
#todoAssignedTasks .todo-task-table th:first-child,
#todoAssignedTasks .todo-task-table td:first-child { width:4%; }
#todoAssignedTasks .todo-task-table td:first-child { padding:0; vertical-align:middle; }
.todo-complete-toggle{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:74px;background:#f4f7f8;cursor:pointer;}
.todo-complete-toggle input{margin:0;cursor:pointer;}
#todoAssignedTasks .todo-task-table th:nth-child(2),
#todoAssignedTasks .todo-task-table td:nth-child(2) { width:78%; overflow-wrap:anywhere; }
#todoAssignedTasks .todo-task-table th:nth-child(3),
#todoAssignedTasks .todo-task-table td:nth-child(3) { width:18%; white-space:normal; text-align:right; vertical-align:top; }
.todo-task-description{display:block;}
.todo-description-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px;min-width:0;}
.todo-description-line>span{min-width:0;max-height:1.35em;overflow:hidden;overflow-wrap:anywhere;}
.todo-description-line>span.is-expanded{max-height:none;overflow:visible;}
.todo-description-view{border:0;background:transparent;color:#1769aa;cursor:pointer;padding:0 0 0 4px;font-size:12px;text-decoration:none;white-space:nowrap;}
.todo-task-meta{display:block;color:#7a8794;font-size:12px;font-weight:400;margin-top:3px;}
#todoAssignedTasks .todo-task-table td:nth-child(2) { overflow-wrap:anywhere; }
#todoAssignedTasks .todo-task-target { background:#d9f3df; outline:2px solid #228477; outline-offset:-2px; transition:background-color .2s ease,outline-color .2s ease; }
#todoAssignedTasks .todo-due-date { display:block; margin-top:3px; color:#718096; font-size:11px; font-weight:400; white-space:normal; }
#todoAssignedTasks .todo-due-overdue,
#todoAssignedTasks .todo-due-remaining { display:block; overflow-wrap:anywhere; }
#todoAssignedTasks .todo-due-overdue { color:#b42318; }
#todoCreatedTasksTable .todo-task-table th:nth-child(4),
#todoCreatedTasksTable .todo-task-table td:nth-child(4) { width:8%; white-space:nowrap; }
#todoCreatedTasksTable .todo-task-table { table-layout:fixed; min-width:0; max-width:100%; }
#todoCreatedTasksTable .todo-task-table th,
#todoCreatedTasksTable .todo-task-table td { white-space:normal; overflow-wrap:anywhere; }
#todoCreatedTasksTable .todo-task-table th:first-child,
#todoCreatedTasksTable .todo-task-table td:first-child { width:4%; }
#todoCreatedTasksTable .todo-task-table td:first-child { padding:0; vertical-align:middle; }
#todoCreatedTasksTable .todo-task-table th:nth-child(2),
#todoCreatedTasksTable .todo-task-table td:nth-child(2) { width:63%; }
#todoCreatedTasksTable .todo-task-table th:nth-child(3),
#todoCreatedTasksTable .todo-task-table td:nth-child(3) { width:25%; text-align:right; vertical-align:top; }
.management-team-selector { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-weight:600; }
.management-team-selector select { min-width:230px; }
.management-team-pending { color:#718096; font-weight:400; }
.national-holiday-policy { margin:0 0 18px; padding:14px 16px; border:1px solid var(--border,#d8dee5); border-radius:8px; }
.national-holiday-policy h2 { margin:0 0 10px; }
.national-holiday-policy .management-team-selector { margin-bottom:12px; }
.national-holiday-list { display:flex; flex-wrap:wrap; gap:10px 18px; color:#465568; }
.national-holiday-list label { display:flex; align-items:center; gap:6px; }
.leave-start-date { display:block; margin-top:3px; color:#718096; font-size:.78em; }
.leave-decision-button { width:38px; height:38px; padding:7px; display:inline-flex; align-items:center; justify-content:center; }
.leave-decision-button img { width:22px; height:22px; display:block; }
.leave-request-cards { display:grid; gap:12px; }
.leave-request-card { border:1px solid #d8dee5; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:6px; background:#fff; }
.leave-request-card-name { font-size:18px; color:#1f2937; }
.leave-request-card-type { color:#526579; }
.leave-request-card-date { color:#526579; font-size:14px; }
.leave-request-card-notice { color:#526579; font-size:14px; }
.leave-request-card-balance { color:#526579; font-size:14px; }
.leave-request-card-late { color:#b42318; font-size:14px; }
.leave-balance-summary { color:#718096; }
.leave-reward-vertical-track { position:relative; min-height:180px; margin:12px 0; padding-left:42px; display:flex; flex-direction:column; justify-content:space-between; }
.leave-reward-vertical-track::before { content:""; position:absolute; left:17px; top:14px; bottom:14px; width:3px; background:#d8dee5; }
.leave-reward-current-marker { position:absolute; left:8px; top:50%; width:36px; height:36px; transform:translateY(-50%); display:grid; place-items:center; border:0; border-radius:50%; background:radial-gradient(circle at 60% 30%,#acff85,#66d233); box-shadow:inset 0 0 10px #fff,inset 15px -20px 35px rgba(0,0,0,.25),-15px 15px 28px rgba(0,0,0,.25); color:#718096; font-size:12px; font-weight:600; transition:left .2s ease; }
.leave-reward-track-label { color:#526579; font-size:14px; }
.leave-reward-track-label.current { font-weight:600; color:#1f2937; }
.leave-reward-horizontal-track { position:relative; min-height:116px; margin:24px 18px 12px; padding:46px 0 0; display:flex; justify-content:space-between; }
.leave-reward-horizontal-track::before { content:""; position:absolute; left:0; right:0; top:29px; height:8px; border-radius:8px; background:#f2f2f2; box-shadow:inset 0 -2px 3px rgba(0,0,0,.13),inset 0 2px 3px rgba(255,255,255,1),0 5px 10px rgba(0,0,0,.12); }
.leave-reward-completed-track { position:absolute; z-index:1; left:0; top:29px; height:8px; border-radius:8px 0 0 8px; background:linear-gradient(90deg,#8bd968,#66d233); box-shadow:0 0 12px rgba(102,210,51,.45),inset 0 1px 2px rgba(255,255,255,.8); transition:width .2s ease; }
.leave-reward-horizontal-track .leave-reward-current-marker { z-index:3; left:50%; top:33px; transform:translate(-50%,-50%); }
.leave-reward-horizontal-track .leave-reward-track-label { position:relative; z-index:1; }
.leave-reward-horizontal-track .leave-reward-track-label.start { position:absolute; left:0; top:25px; transform:translateY(-100%); color:#aab7c5; opacity:.38; }
.leave-reward-horizontal-track .leave-reward-track-label.next { text-align:right; }
@media(max-width:560px){.leave-reward-horizontal-track{margin-inline:8px}.leave-reward-horizontal-track .leave-reward-track-label{font-size:12px}}
.leave-request-card-actions { display:flex; gap:8px; margin-top:8px; }
.todo-task-edit { border:1px solid #cbd5e1; background:#fff; color:#1769aa; cursor:pointer; padding:4px 8px; border-radius:4px; }
.todo-task-edit:hover { background:#eef6fb; }
.todo-create-form button { justify-self: start; }
.todo-card { border: 1px solid #d8dee5; border-radius: 4px; padding: 14px; margin: 12px 0; }
.todo-card h3 { margin: 0 0 6px; }
.todo-card p { white-space: pre-wrap; margin-bottom: 8px; }
.todo-card small { color: #647280; }
.todo-assignment { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
@media(max-width:700px){.todo-create-form { grid-template-columns: 1fr; }}

.timesheet-table thead .timesheet-info img { filter: brightness(0) invert(1); }

.timesheet-calendar-day { text-align: left; cursor: pointer; color: inherit; font-family: inherit; }
.timesheet-calendar-day.selected { outline: 2px solid #267fba; outline-offset: -2px; }
.timesheet-calendar-day:focus-visible { outline: 2px solid #267fba; }


.account-password-controls { display: flex; align-items: center; gap: 6px; }
.account-password-controls input { min-width: 120px; width: 180px; flex: 1; }
.account-password-controls button { white-space: nowrap; }
.account-password-controls .password-copy-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px; }

.todo-create-form .todo-urgent { display: flex; align-items: center; gap: 8px; align-self: center; }
.todo-create-form .todo-urgent input { width: auto; }
#todoAssigneeGroup .task-filter-group { margin:0; }
#todoAssigneeGroup .task-filter-choices { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
#todoAssigneeGroup .task-filter-choices label { display:inline-flex; width:100%; align-items:center; gap:8px; min-width:0; margin:0; cursor:pointer; }
#todoAssigneeGroup .task-filter-choices input[type="checkbox"] { flex:0 0 auto; width:auto; margin:0; }
#todoAssigneeGroup .task-filter-select-all { width:100%; }
#todoAssigneeGroup .task-filter-selection-actions { display:flex; align-items:center; gap:12px; }
#todoAssigneeGroup .task-filter-clear { margin-left:auto; }
.todo-due-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; min-width: 0; }
.todo-due-fields input { min-width: 0; }
@media(max-width:700px){.todo-due-fields { grid-template-columns: 1fr 1fr; }}


.admin-nav { position: relative; margin-left: auto; z-index: 40; }
.admin-nav[hidden], .admin-nav-menu[hidden] { display: none; }
.admin-nav-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.admin-nav-toggle img { width: 12px; height: 12px; transition: transform .15s ease; }
.admin-nav-toggle[aria-expanded="true"] img { transform: rotate(180deg); }
.admin-nav-menu { position: absolute; top: 100%; right: 0; z-index: 50; min-width: 185px; padding: 6px; background: #fff; border: 1px solid #d8dee5; box-shadow: 0 4px 12px #17202a1f; }
.admin-nav-menu .nav-button { display: block; width: 100%; padding: 10px 12px; border: 0; text-align: left; cursor: pointer; }
.admin-nav-menu .nav-button:hover, .admin-nav-menu .nav-button.active { background: #eef7f5; color: #146c5f; }
.admin-nav-menu .nav-button:disabled { opacity: .6; cursor: default; }


.db-viewer-layout { display:grid; grid-template-columns:210px minmax(0,1fr); min-height:450px; border:1px solid #d8dee5; }
.db-viewer-sidebar { border-right:1px solid #d8dee5; padding:12px 0; background:#f7f9fb; }
.db-viewer-sidebar h3 { margin:0 12px 10px; font-size:15px; }
#dbViewerTables { display:flex; flex-direction:column; max-height:65vh; overflow:auto; }
#dbViewerTables button { border:0; background:transparent; text-align:left; padding:7px 12px; cursor:pointer; overflow-wrap:anywhere; }
#dbViewerTables button.active,#dbViewerTables button:hover { background:#e5f0fd; color:#155c95; }
.db-viewer-main { min-width:0; padding:16px; }
.db-viewer-main .table-wrap { max-width:100%; overflow:auto; margin-top:12px; }
#dbViewerTable { white-space:nowrap; }
#dbViewerTable td { max-width:260px; overflow:hidden; text-overflow:ellipsis; }
#dbViewerMeta { margin-top:8px; color:#5c6975; }
@media(max-width:650px) { .db-viewer-layout { grid-template-columns:120px minmax(0,1fr); } }

.db-query-stats { padding:12px 0; font-weight:600; }
.db-query-table { width:100%; }
.db-query-table td { vertical-align:top; }
.db-query-table td:nth-child(3) { max-width:460px; overflow-wrap:anywhere; font-family:monospace; font-size:12px; }
.db-query-table td:nth-child(4) { max-width:160px; overflow-wrap:anywhere; font-size:12px; }


/* DB Query Report */
.db-query-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0; padding:0; font-weight:normal; }
.db-query-stat-card { display:flex; flex-direction:column; gap:10px; padding:18px; background:#f6f8fa; border:1px solid #dce3e9; border-radius:8px; }
.db-query-stat-card span { color:#5c6975; font-size:13px; }
.db-query-stat-card strong { font-size:25px; font-variant-numeric:tabular-nums; }
.db-query-chart-section { margin:12px 0 24px; padding:20px; border:1px solid #dce3e9; border-radius:8px; }
.db-query-chart-section h3, .db-query-results-heading h3 { margin:0 0 12px; font-size:17px; }
.db-query-chart { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; align-items:end; height:210px; }
.db-query-chart-column { height:100%; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; }
.db-query-chart-count { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.db-query-chart-track { flex:1; width:min(100%,80px); display:flex; align-items:flex-end; }
.db-query-chart-bar { width:100%; min-height:0; background:#287c73; border-radius:5px 5px 0 0; }
.db-query-chart-label { min-height:32px; font-size:12px; text-align:center; color:#5c6975; }
.db-query-chart-caption { font-size:12px; margin-top:12px; }
.db-query-results-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:22px 0 10px; }
.db-query-results-heading h3 { margin:0; }
.db-query-slow-toggle { display:inline-flex; align-items:center; gap:7px; font-size:13px; }
@media(max-width:750px) { .db-query-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .db-query-chart { gap:5px; } .db-query-stat-card { padding:12px; } }


/* Timesheet calendar: compact square day tiles with quiet totals. */
.timesheet-calendar { padding: 22px 16px; }
.timesheet-calendar-header { gap: 18px; margin-bottom: 20px; }
.timesheet-calendar-header strong { font-size: 17px; }
.timesheet-calendar-header button { width: 34px; height: 34px; border-radius: 7px; }
.timesheet-calendar-header button:hover { background: #edf3f5; }
.timesheet-calendar-grid { gap: 7px; }
.timesheet-calendar-weekday { padding: 7px 0; color: #697885; letter-spacing: .02em; }
.timesheet-calendar-day {
  aspect-ratio: 1 / 1; min-height: 0; padding: 10px;
  position: relative; align-items: center; justify-content: center;
  gap: 7px; border-radius: 8px; border: 1px solid #e0e6eb;
  background: #fafbfc; text-align: center; transition: background-color .15s,border-color .15s;
}
.timesheet-calendar-day:hover { background: #edf6f4; border-color: #9bc9c0; }
.timesheet-calendar-day strong {
  position: absolute; top: 9px; left: 11px; font-size: 13px;
  color: #344454; font-weight: 600;
}
.timesheet-calendar-day span { font-size: 16px; font-weight: 400; color: #84929e; font-variant-numeric: tabular-nums; }
.timesheet-calendar-day small { font-size: 10px; line-height: 1.2; color: #687985; }
.timesheet-calendar-day.day-off { background: #f3f5f7; }
.timesheet-calendar-day.on-leave { background: #ecf5ed; }
.timesheet-calendar-day.selected { outline: none; border: 2px solid #247e73; background: #eef8f5; }
.timesheet-calendar-day.selected strong { color: #16665e; }
.timesheet-calendar-day:focus-visible { outline: 2px solid #247e73; outline-offset: 2px; }
@media(max-width:700px) {
  .timesheet-calendar { padding: 14px 5px; }
  .timesheet-calendar-grid { gap: 3px; }
  .timesheet-calendar-day { min-height: 0; padding: 3px; border-radius: 5px; gap: 3px; }
  .timesheet-calendar-day strong { position: static; font-size: 11px; }
  .timesheet-calendar-day span { font-size: 10px; }
  .timesheet-calendar-day small { font-size: 8px; }
}

/* Keep account and notification popovers above the primary navigation. */
.topbar { position: sticky; top: 0; z-index: 100; background: #f4f6f8; }
.role-menu { z-index: 110; }
.notification-menu { z-index: 110; }


/* Read-only personal profile */
.role-menu #roleMenuUsername { display:block; width:100%; text-align:left; font-size:inherit; color:inherit; cursor:pointer; }
.role-menu #roleMenuUsername:hover { color:#146c5f; background:#eef7f5; }
.my-profile-section { padding:22px 0; border-bottom:1px solid #d8dee5; }
.my-profile-section:last-child { border-bottom:0; }
.my-profile-section h3 { margin:0 0 16px; font-size:17px; }
.my-profile-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 28px; margin:0; }
.my-profile-field { min-width:0; }
.my-profile-field dt { font-size:12px; color:#6b7884; margin-bottom:5px; }
.my-profile-field dd { margin:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
@media(max-width:650px){.my-profile-fields { grid-template-columns:1fr; }}


/* Work dropdown shares the Admin popup style and stays above page content. */
.work-nav { position: relative; z-index: 40; }
.work-nav-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.work-nav-toggle img { width: 12px; height: 12px; transition: transform .15s ease; }
.work-nav-toggle[aria-expanded="true"] img { transform: rotate(180deg); }
.work-nav-menu { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 170px; padding: 6px; background: #fff; border: 1px solid #d8dee5; box-shadow: 0 4px 12px #17202a1f; }
.work-nav-menu[hidden] { display: none; }
.work-nav-menu .nav-button { display: block; width: 100%; padding: 10px 12px; border: 0; text-align: left; cursor: pointer; }
.work-nav-menu .nav-button:hover, .work-nav-menu .nav-button.active { background: #eef7f5; color: #146c5f; }


/* The calendar fills the available width of its container. */
.timesheet-panel .timesheet-calendar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .timesheet-panel .timesheet-calendar { width: 100%; }
}

.todo-create-form [hidden] { display: none !important; }
.todo-bug-recipient { grid-column: 1 / -1; padding: 10px 12px; background: #eef7f5; color: #16665e; font-size: 14px; }


/* Weekly management timesheets */
#managementNav { z-index:40; }
#managementNav[hidden], #managementNavMenu[hidden] { display:none; }
.management-week-header { display:flex; gap:14px; align-items:center; justify-content:center; margin:0 0 22px; flex-wrap:wrap; }
.management-week-header button { border:1px solid #d8dee5; background:#fff; padding:7px 11px; cursor:pointer; }
.management-week-header strong { min-width:175px; text-align:center; }
.management-day { border:1px solid #d8dee5; border-radius:7px; margin:0 0 10px; padding:0 12px 3px; min-width:0; }
.management-day legend { font-weight:400; padding:0 8px; color:#a4b1bc; font-size:12px; }
.management-person { border-bottom:0; }
.management-person:last-child { border-bottom:0; }
.management-person summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 4px; list-style:none; }
.management-person summary::-webkit-details-marker { display:none; }
.management-person summary::before { content:"▸"; color:#768691; }
.management-person[open] summary::before { content:"▾"; }
.management-person summary>span:first-child { flex:1; }
.management-summary-right { display:flex; align-items:center; gap:14px; }
.management-summary-right strong { font-weight:500; font-variant-numeric:tabular-nums; }
.management-status { font-size:12px; color:#647684; }
.management-details { padding:8px 12px 18px 24px; overflow-x:auto; }
.management-entry-table { width:100%; border-collapse:collapse; }
.management-entry-table th,.management-entry-table td { text-align:left; border-bottom:1px solid #e1e7ec; padding:9px; }
.management-entry-table th { color:#5c6975; font-size:12px; }
@media(max-width:700px){ .management-day { padding:0 6px 6px; }.management-person summary { font-size:13px; }.management-summary-right{ gap:6px; }.management-details{padding:7px;} }

/* Size dropdowns to their longest menu item without wrapping labels. */
.work-nav-menu, .admin-nav-menu { width: max-content; max-width: calc(100vw - 32px); }
.work-nav-menu .nav-button, .admin-nav-menu .nav-button { white-space: nowrap; }

/* Center the weekday legend along the top border of each management day. */
.management-day legend { margin-inline: auto; text-align: center; }


.management-controls { border:1px solid #d8dee5; border-radius:7px; padding:15px 18px; margin-bottom:22px; }
.management-controls h2 { font-size:16px; margin-bottom:12px; }
.management-team-filter{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.management-team-filter label{font-weight:600}
.management-team-filter select{min-width:220px}
.management-team-pending{color:#718096;font-size:13px}
.management-team-members{border:1px solid #d8dee5;padding:10px 12px;margin:0 0 14px}
.management-team-members legend{padding:0 6px;font-weight:600}
.management-team-member-options{display:flex;gap:10px 20px;flex-wrap:wrap}
.management-team-member-options label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.management-team-member-options input{margin:0}
.management-rule-row { display:flex; align-items:center; gap:10px; }
.management-rule-row label { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.management-rule-row input { margin:0; }
.management-rule-row .auto-pull-info { flex-shrink:0; }
#managementRuleMessage { font-size:12px; margin-top:8px; }
#managementRuleMessage:empty { display:none; }


/* Role permissions matrix (backend-enforced). */
.permissions-table-wrap { overflow-x:auto; margin-top:18px; }
#permissionsMatrix { border-collapse:collapse; width:100%; min-width:850px; }
#permissionsMatrix th,#permissionsMatrix td { border-bottom:1px solid #e0e6eb; padding:9px 12px; }
#permissionsMatrix thead th { font-size:13px; font-weight:600; text-align:center; vertical-align:bottom; }
#permissionsMatrix thead th:first-child,#permissionsMatrix tbody th { text-align:left; }
#permissionsMatrix tbody th { font-size:13px; font-weight:500; white-space:nowrap; }
.permissions-headers,.permissions-controls { display:flex; justify-content:center; align-items:center; text-align:center; }
.permissions-headers { margin-top:6px; font-size:11px; color:#71808b; }
.permissions-controls input { width:16px; height:16px; margin:auto; cursor:pointer; accent-color:#176d60; }
.permissions-controls input:disabled { cursor:not-allowed; opacity:.65; }
.permissions-hint,#permissionsStatus { font-size:12px; color:#667685; margin-top:12px; }


/* Keep the timesheet calendar as its own compact, square-ish card. */
#timesheetsPage > .timesheet-calendar {
  width: min(60%, 650px);
  max-width: calc(100% - 24px);
  margin: 18px auto 0;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #d8dee5;
  border-radius: 10px;
}
@media (max-width: 700px) {
  #timesheetsPage > .timesheet-calendar {
    width: 100%;
    max-width: 100%;
    padding: 12px;
  }
}


/* App sidebar navigation */
.shell { max-width:none; width:100%; padding:20px 24px; }
.topbar { align-items:center; margin-bottom:18px; }
.app-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; align-items:start; }
.app-content { min-width:0; }
.app-layout > .nav { display:flex; flex-direction:column; gap:3px; margin:0; padding:12px 9px; border:1px solid #d8dee5; border-radius:9px; background:#fff; position:sticky; top:16px; align-self:start; min-width:0; }
.app-layout .nav > .nav-button,
.app-layout .nav > .work-nav,
.app-layout .nav > .admin-nav { display:block; width:100%; margin:0; }
.app-layout .nav-button { border:0; border-radius:6px; width:100%; padding:10px 12px; text-align:left; cursor:pointer; }
.app-layout .nav a.nav-button { display:block; box-sizing:border-box; color:inherit; text-decoration:none; font:inherit; }
.app-layout .nav a.nav-button:hover { background:#eef7f5; color:#146c5f; }
.app-layout .nav a.nav-button.active { color:#146c5f; }
.app-layout .nav-button.active { background:#eef7f5; color:#146c5f; font-weight:700; }
.app-layout .work-nav-toggle,.app-layout .admin-nav-toggle { display:flex; justify-content:space-between; align-items:center; }
.app-layout .work-nav-menu,.app-layout .admin-nav-menu { position:static; width:100%; min-width:0; max-width:none; padding:2px 0 3px 12px; border:0; box-shadow:none; background:transparent; }
.app-layout .work-nav-menu .nav-button,.app-layout .admin-nav-menu .nav-button { white-space:normal; padding:8px 10px; font-size:13px; }
.app-layout .nav [hidden] { display:none !important; }
@media(max-width:850px){
 .shell { padding:14px 12px; }
 .app-layout { grid-template-columns:165px minmax(0,1fr); gap:12px; }
 .app-layout .nav-button { padding:9px 8px; }
 .app-layout .work-nav-menu,.app-layout .admin-nav-menu { padding-left:6px; }
}
@media(max-width:550px){
 .app-layout { display:block; }
 .app-layout > .nav { position:static; display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; margin-bottom:14px; }
 .app-layout .nav > .nav-button,.app-layout .nav > .work-nav,.app-layout .nav > .admin-nav { width:auto; }
 .app-layout .work-nav-menu,.app-layout .admin-nav-menu { position:absolute; width:max-content; max-width:calc(100vw - 32px); background:#fff; border:1px solid #d8dee5; border-radius:6px; box-shadow:0 4px 12px #17202a1f; padding:5px; z-index:60; }
 .app-layout .work-nav-menu .nav-button,.app-layout .admin-nav-menu .nav-button { white-space:nowrap; }
}

/* Page titles are already represented by sidebar navigation; hide the redundant title strip. */
.status-strip { display: none; }


/* Task filters use the same light, centered border legends as timesheet days. */
#featuresPage .tasks-filters { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:16px 0; }
#featuresPage .task-filter-group { min-width:0; border:1px solid #d8dee5; border-radius:7px; padding:5px 12px 9px; margin:0; }
#featuresPage .task-filter-group legend { margin-inline:auto; padding:0 8px; text-align:center; font-weight:400; font-size:12px; color:#a4b1bc; }
#featuresPage .task-filter-choices { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
#featuresPage .task-filter-choices label { display:inline-flex; align-items:center; gap:5px; margin:0; cursor:pointer; white-space:nowrap; }
#featuresPage .task-filter-choices input { margin:0; accent-color:#247e73; }

/* Modal overlay navigation. */
.topbar-brand { display:flex; align-items:center; gap:14px; }
.nav-hamburger { display:inline-flex; width:40px; height:40px; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px; border:1px solid #d8dee5; border-radius:7px; background:#fff; cursor:pointer; }
.nav-hamburger span { width:19px; height:2px; background:#273b49; border-radius:2px; }
.nav-hamburger:focus-visible { outline:2px solid #247e73; outline-offset:2px; }
.app-layout { display:block; }
.nav-backdrop { position:fixed; inset:0; z-index:180; background:rgba(17,27,37,.32); cursor:pointer; }
.nav-backdrop[hidden] { display:none; }
.app-layout > .nav { display:none; }
body.nav-open { overflow:hidden; }
body.nav-open .topbar { z-index:200; }
body.nav-open .topbar-side { pointer-events:none; }
body.nav-open .app-layout > .nav { display:flex; position:fixed; z-index:190; left:16px; top:76px; bottom:auto; width:min(260px,calc(100vw - 32px)); max-height:calc(100dvh - 92px); overflow-y:auto; flex-direction:column; flex-wrap:nowrap; margin:0; box-shadow:0 10px 32px #17202a32; }
body.nav-open .app-layout .nav > .nav-button,
body.nav-open .app-layout .nav > .work-nav,
body.nav-open .app-layout .nav > .admin-nav { width:100%; }
body.nav-open .app-layout .work-nav-menu,
body.nav-open .app-layout .admin-nav-menu { position:static; width:100%; max-width:none; box-shadow:none; border:0; padding:2px 0 3px 12px; background:transparent; }
body.nav-open .app-layout .work-nav-menu .nav-button,
body.nav-open .app-layout .admin-nav-menu .nav-button { white-space:normal; }
@media(max-width:550px) { body.nav-open .app-layout > .nav { display:flex; flex-direction:column; top:70px; } }

/* Override the legacy mobile horizontal menu while the drawer is closed. */
body:not(.nav-open) .app-layout > .nav { display:none !important; }

.nav-hamburger { gap:0; }
.nav-hamburger img { display:block; width:24px; height:24px; }

/* Tasks toolbar: status, assignee, view and creation action in one row. */
#featuresPage .tasks-filters { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.7fr) minmax(0,1fr) auto; align-items:center; gap:12px; }
#featuresPage .task-filter-group { height:100%; }
#featuresPage .task-filter-choices { column-gap:14px; }
#featuresPage .tasks-add-icon { width:44px; height:44px; padding:0; align-self:center; font-size:28px; line-height:1; font-weight:400; text-align:center; }
#featuresPage .tasks-add-icon[hidden] { display:none; }
@media(max-width:1100px) {
  #featuresPage .tasks-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #featuresPage .tasks-add-icon { justify-self:start; }
}
@media(max-width:600px) {
  #featuresPage .tasks-filters { grid-template-columns:minmax(0,1fr); }
}

/* Stack choices within each of the three Tasks filter groups. */
#featuresPage .task-filter-choices { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:9px; }
#featuresPage .task-filter-choices label { width:100%; }

/* Condensed tasks: muted status, assignee, and due date alongside title. */
#featuresPage .task-condensed-summary { display:inline-flex; align-items:center; flex-wrap:wrap; gap:14px; min-width:0; color:#8995a2; font-size:13px; font-weight:400; }
#featuresPage .task-condensed-detail { white-space:nowrap; }

/* Use the supplied add-square SVG as the entire task creation button. */
#featuresPage .tasks-add-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; background:transparent; cursor:pointer; }
#featuresPage .tasks-add-icon img { display:block; width:32px; height:32px; }
#featuresPage .tasks-add-icon:focus-visible { outline:2px solid #247e73; outline-offset:2px; }

/* Centralized task edit mode controls. */
#featuresPage .tasks-action-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
#featuresPage .tasks-action-stack > button[hidden] { display:none; }
#featuresPage #tasksEditMode[aria-pressed="true"] { background:#eef7f5; border-radius:6px; outline:2px solid #247e73; }
#featuresPage .task-field .task-inline-input { width:100%; max-width:100%; box-sizing:border-box; }
#featuresPage .task-field textarea.task-inline-input { min-height:64px; resize:vertical; }

/* Use the navigation arrow for task expansion. */
#featuresPage .task-collapse-arrow { display:block; width:12px; height:12px; }
#featuresPage .task-collapse[aria-expanded="false"] .task-collapse-arrow { transform:rotate(-90deg); }

/* Content-sized task filter groups with larger side-by-side actions. */
#featuresPage .tasks-filters {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
}
#featuresPage .task-filter-group {
  flex:0 0 auto;
  width:max-content;
  max-width:100%;
  height:auto;
  padding:8px 18px 12px;
}
#featuresPage .task-filter-choices label { width:auto; }
#featuresPage .tasks-action-stack {
  flex-direction:row;
  align-items:center;
  gap:16px;
  margin-left:4px;
}
#featuresPage .tasks-action-stack .tasks-add-icon {
  width:56px;
  height:56px;
}
#featuresPage .tasks-action-stack .tasks-add-icon img {
  width:42px;
  height:42px;
}
@media(max-width:600px) {
  #featuresPage .tasks-filters { justify-content:flex-start; }
}

/* Features control panel: two independent areas in one horizontal row. */
#featuresPage .control-panel {
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:24px;
  width:100%;
  margin:16px 0;
}
#featuresPage .control-panel-left.tasks-filters {
  display:flex;
  flex-direction:row;
  flex:0 1 auto;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:16px;
  min-width:0;
  margin:0;
  overflow-x:auto;
}
#featuresPage .control-panel-left .task-filter-group {
  flex:0 0 auto;
}
#featuresPage .control-panel-right.tasks-action-stack {
  display:flex;
  flex:0 0 auto;
  flex-direction:row;
  align-items:flex-end;
  justify-content:flex-end;
  gap:16px;
  margin:0 0 0 auto;
}
@media (max-width:650px) {
  #featuresPage .control-panel { flex-wrap:wrap; }
  #featuresPage .control-panel-right.tasks-action-stack { margin-left:auto; }
}

/* Feature page settings: visual configuration only until controller integration. */
#featuresPage .feature-settings-dialog { position:fixed; margin:auto; width:min(620px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:22px; border:1px solid #d8dee5; border-radius:10px; box-shadow:0 14px 50px #17202a40; color:inherit; }
#featuresPage .feature-settings-dialog::backdrop { background:#15222c88; }
#featuresettingsPage .feature-settings-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
#featuresettingsPage .feature-settings-heading h2 { margin:0; font-size:19px; }
#featuresPage #featureSettingsClose { border:0; background:transparent; font-size:26px; cursor:pointer; }
#featuresettingsPage .feature-settings-note { margin:14px 0; color:#647684; font-size:13px; }
#featuresettingsPage .feature-settings-table-wrap { max-height:50vh; overflow-y:auto; overflow-x:hidden; }
#featuresettingsPage .feature-settings-table { width:100%; table-layout:auto; border-collapse:collapse; }
#featuresettingsPage .feature-settings-table th,#featuresettingsPage .feature-settings-table td { padding:9px 12px; border-bottom:1px solid #e0e6eb; }
#featuresettingsPage .feature-settings-table th { text-align:left; }
#featuresettingsPage .feature-settings-table td,#featuresettingsPage .feature-settings-table thead th:not(:first-child) { text-align:center; }
#featuresettingsPage .feature-settings-table input { width:17px; height:17px; accent-color:#247e73; cursor:pointer; }
#featuresettingsPage .feature-settings-footer { display:flex; justify-content:flex-end; margin-top:14px; }

/* Keep all three permission columns visible within the settings popup. */
#featuresettingsPage .feature-settings-table th:first-child { width:auto; white-space:normal; }
#featuresettingsPage .feature-settings-table th:not(:first-child),
#featuresettingsPage .feature-settings-table td:not(:first-child) { width:1%; white-space:nowrap; }
#featuresettingsPage .feature-settings-table th,
#featuresettingsPage .feature-settings-table td { box-sizing:border-box; padding:8px 10px; }
#featuresPage .feature-settings-dialog { box-sizing:border-box; }

/* Shared Edit, Add and Settings icon-button appearance. */
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 56px;
  width:56px;
  height:56px;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
}
.icon-button img { display:block; width:42px; height:42px; object-fit:contain; }
.icon-button:hover { background:#eef7f5; }
.icon-button:focus-visible { outline:2px solid #247e73; outline-offset:2px; }
.icon-button[hidden] { display:none; }

/* Settings modal overrides the site-wide 1120px table minimum. */
#featuresPage .feature-settings-dialog {
  overflow-y:auto;
  overflow-x:hidden;
  max-height:calc(100dvh - 32px);
  overscroll-behavior:contain;
}
#featuresettingsPage .feature-settings-table-wrap {
  max-height:none;
  overflow:visible;
}
#featuresettingsPage .feature-settings-table {
  width:100%;
  min-width:0;
  max-width:100%;
  table-layout:auto;
}
#featuresettingsPage .feature-settings-table th:first-child,
#featuresettingsPage .feature-settings-table td:first-child { width:auto; }
#featuresettingsPage .feature-settings-footer {
  position:sticky;
  bottom:-22px;
  padding:12px 0 0;
  background:inherit;
}

/* Employee leave request and balance preview */
#leavePage .panel { max-width: 100%; }
#leavePage .ui-card-body { display:flex; flex-direction:column; min-height:calc(100vh - 120px); }
#leavePage .ui-card-title { margin:0 0 6px; line-height:1.2; }
#leavePage .leave-quick-actions-section { align-self:flex-start; width:fit-content; max-width:100%; box-sizing:border-box; min-width:0; border:1px solid #d8dee5; border-radius:7px; padding:0 12px 8px; margin:0 0 18px; }
#leavePage .leave-quick-actions-section legend { margin-inline:auto; padding:0 8px; text-align:center; font-weight:400; font-size:12px; color:#a4b1bc; }
#leavePage .leave-quick-actions { display:flex; justify-content:flex-start; align-items:center; gap:0; margin:0 0 18px; transform:translateY(10px); }
#leavePage .leave-quick-actions .auto-pull-info { margin-left:10px; }
/* Reusable spacing for button rows, including rows with info icons between buttons. */
.spaced-action-buttons > button:not(:first-child) { margin-left:36px; }
#leavePage .leave-quick-actions h2 { margin:0; }
#leavePage .leave-request-card { margin:0 0 10px; }
#leavePage details.leave-request-card { display:block; width:100%; max-width:630px; margin:0 auto 10px; padding:0; box-sizing:border-box; overflow:hidden; }
#leavePage details.leave-request-card > summary { display:flex; align-items:center; gap:10px; min-height:52px; padding:0 20px; cursor:pointer; font-weight:600; list-style:none; line-height:1.3; }
#leavePage details.leave-request-card > summary::-webkit-details-marker { display:none; }
#leavePage details.leave-request-card > summary::before { content:"▸"; color:#718096; font-size:16px; flex-shrink:0; }
#leavePage details.leave-request-card[open] > summary::before { content:"▾"; }
#leavePage details.leave-request-card[open] > summary { border-bottom:1px solid #e2e8f0; }
#leavePage details.leave-request-card > .leave-form { margin:0; padding:18px 20px 20px; }
#leavePage .leave-information-section { margin-top:auto; padding-top:clamp(90px,14vh,220px); border-top:0; }
#leavePage .leave-information-section h2 { display:flex; align-items:center; gap:14px; margin:0 0 12px; font-size:20px; color:#a0aec0; }
#leavePage .leave-information-section h2::before,#leavePage .leave-information-section h2::after { content:""; flex:1; border-top:3px solid #a0aec0; }
#leavePage .leave-information-section hr { display:none; }
#leavePage .leave-information-section details { margin:10px 0; }
#leavePage .leave-request-preview { padding:14px 16px; border:1px solid #d8dee5; border-radius:9px; background:#f8fafb; margin:12px 0 20px; }
#leavePage .leave-request-preview p { margin:6px 0; }
#leavePage .leave-balance-summary { color:#718096; font-weight:400; }
#leavePage .leave-policy-warning { padding:10px 12px; border-left:4px solid #b78112; background:#fff5dd; color:#6a4b12; line-height:1.5; }
#leavePage .leave-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:end; }
#leavePage .leave-form label { display:flex; flex-direction:column; gap:5px; min-width:0; }
#leavePage .leave-form > label:first-of-type { grid-column:1/-1; }
#leavePage .leave-late-notice-banner { grid-column:1/-1; border:1px solid #d9a441; background:#fff8e6; color:#6e4a12; border-radius:8px; padding:14px 16px; }
#leavePage .leave-late-notice-banner[hidden] { display:none; }
#leavePage .leave-late-notice-banner p { margin:8px 0 12px; }
#leavePage .leave-late-notice-banner label { display:flex; flex-direction:row; align-items:flex-start; gap:9px; margin:8px 0; }
#leavePage .leave-late-notice-banner input[type="checkbox"] { width:auto; flex:none; margin-top:3px; }
#leavePage .leave-form input,#leavePage .leave-form select,#leavePage .leave-form textarea { width:100%; box-sizing:border-box; }
#leavePage .leave-form label:has(textarea),#leavePage .leave-form h3 { grid-column:1/-1; }
#leavePage .leave-form button { justify-self:start; }
@media(max-width:640px){#leavePage .leave-form { grid-template-columns:minmax(0,1fr); }}

/* HR Star Chart */
#starchartPage .star-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:22px}
#starchartPage .star-stat{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--border,#d9dee3);border-radius:10px}
#starchartPage .star-stat span{opacity:.75;font-size:.85rem}
#starchartPage .star-stat strong{font-size:1.7rem}
#starchartPage .star-give-form,#starchartPage .star-redeem-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:20px}
#starchartPage .star-give-form h3,#starchartPage .star-give-form label:has(textarea),#starchartPage .star-guidance{grid-column:1/-1}
#starchartPage .star-give-form label,#starchartPage .star-redeem-form label{display:flex;flex-direction:column;gap:6px}
#starchartPage select,#starchartPage textarea,#starchartPage input{width:100%;box-sizing:border-box}
#starchartPage .star-give-form button,#starchartPage .star-redeem-form button{justify-self:start}
#starchartPage .star-rewards,#starchartPage .star-feed{border-top:1px solid var(--border,#d9dee3);padding-top:16px;margin-top:20px}
#starchartPage .star-award{padding:14px 0;border-bottom:1px solid var(--border,#d9dee3)}
#starchartPage .star-award p{margin:8px 0}
#starchartPage .star-award small{opacity:.7}
@media(max-width:640px){#starchartPage .star-give-form,#starchartPage .star-redeem-form{grid-template-columns:1fr}}

/* Service reward anniversary timeline */
.leave-service-rewards{margin:22px 0;padding:70px 0 0;border:0;border-radius:0}
.leave-service-rewards>p{margin:6px 0 14px;opacity:.8}
.leave-reward-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.leave-reward-summary strong{font-size:1.2rem}
.leave-reward-summary span{opacity:.75}
.leave-reward-timeline{display:grid;gap:0;margin-left:12px;border-left:2px solid var(--border,#d9dee3)}
.leave-reward-milestone{display:flex;gap:15px;margin-left:-12px;padding:0 0 23px;align-items:flex-start}
.leave-reward-milestone:last-child{padding-bottom:0}
.leave-reward-marker{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface-secondary,#edf0f3);border:1px solid var(--border,#d9dee3)}
.leave-reward-milestone.active .leave-reward-marker{background:#f9e4a0;color:#6a4c00}
.leave-reward-milestone.upcoming{opacity:.72}
.leave-reward-detail{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.leave-reward-detail p{margin:0;font-size:.85rem;opacity:.75}
.leave-reward-state{font-size:.8rem;font-weight:600}
.leave-reward-detail progress{width:100%;max-width:330px;height:10px;accent-color:#caa43a}
.leave-reward-detail small{opacity:.75}

.achievements-panel{min-height:350px}

/* Home: assignments for the signed-in employee */
.home-assignment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.home-assignment-section{min-width:0;border:1px solid var(--border,#343841);border-radius:10px;overflow:hidden}
.home-assignment-heading{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border,#343841)}
.home-assignment-heading h3{margin:0;font-size:1rem}
.home-assignment-count{padding:2px 8px;border-radius:999px;background:#353b47;color:#f2f2f2;font-size:.8rem;font-variant-numeric:tabular-nums}
.home-assignment-list{max-height:560px;overflow:auto}
.home-assignment-item{display:flex;flex-direction:column;gap:5px;padding:12px 16px;border-bottom:1px solid var(--border,#343841);color:inherit;text-decoration:none}
.home-assignment-item:last-child{border-bottom:none}
.home-assignment-item:hover,.home-assignment-item:focus-visible{background:rgba(130,150,180,.12)}
.home-assignment-title{font-weight:600;overflow-wrap:anywhere}
.home-assignment-meta,.home-assignment-empty{font-size:.84rem;color:var(--muted,#a9acb5)}
.home-assignment-empty{padding:14px 16px;margin:0}
@media(max-width:760px){.home-assignment-grid{grid-template-columns:minmax(0,1fr)}}

/* Reusable company position tablets and employee role assignments */
.position-note{color:var(--muted,#a9acb5);margin:4px 0 14px}
.position-catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:9px;margin-bottom:22px}
.position-tablet{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:6px 12px;border:1px solid #b7c7db;border-radius:8px;background:#edf3fa;color:#24354b;box-shadow:0 1px 3px #192c411c;box-sizing:border-box}
.position-tablet:before{display:none}
.position-tablet strong{font-size:12px;line-height:1.3;font-weight:600;overflow-wrap:anywhere;color:#203149}
.position-tablet small{color:#52657f;font-size:10px;white-space:nowrap;flex-shrink:0}
.position-create{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px}
.position-create input{flex:1;min-width:210px}
.position-assignments{display:flex;flex-wrap:wrap;gap:8px}
.position-assignment-choice{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #556073;border-radius:8px;font-size:.84rem;white-space:nowrap}
.position-assignment-choice:has(input:checked){border-color:#a0b5d9;background:rgba(125,154,205,.16)}
.position-assignment-choice input{margin:0}

.user-home-dashboard{margin-top:20px;color:#182230}
#userHomeDashboard[hidden]{display:none}
.user-home-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:4px 2px 14px;border-bottom:1px solid #d8dee5}
.user-home-heading h2{margin:0;font-size:1.35rem}
.user-home-eyebrow{margin:0 0 5px;color:#54706d;font-size:.76rem;font-weight:700}
.user-home-heading>a,.user-home-section-heading>a{color:#176b65;text-decoration:underline;text-underline-offset:3px}
.user-home-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:14px 0 22px;border-block:1px solid #d8dee5}
.user-home-metric{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-right:1px solid #d8dee5}
.user-home-metric:last-child{border-right:0}
.user-home-metric span{color:#53616f}
.user-home-metric strong{font-size:1.2rem;font-variant-numeric:tabular-nums}
.user-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.user-home-section{min-width:0;border:1px solid #d8dee5;border-radius:6px;background:#fff}
.user-home-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid #e1e6ea}
.user-home-section-heading h3{margin:0;font-size:1rem}
.user-home-section-heading>a{font-size:.88rem;white-space:nowrap}
.user-home-list{min-height:68px}
.user-home-item{display:flex;flex-direction:column;gap:4px;padding:10px 15px;border-bottom:1px solid #edf0f2;color:inherit;text-decoration:none}
.user-home-item:last-child{border-bottom:0}
.user-home-item:hover,.user-home-item:focus-visible{background:#f2f7f6}
.user-home-item strong{font-size:.94rem;overflow-wrap:anywhere}
.user-home-item span,.user-home-empty,.user-home-muted{color:#5a6875;font-size:.86rem}
.user-home-item .user-home-overdue{color:#a33b32;font-weight:700}
.user-home-empty{margin:0;padding:14px 15px}
.user-home-summary{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:15px}
.user-home-today-status,.user-home-balance{margin:0;color:#52606d;font-size:.9rem}
.user-home-hours{margin-top:4px;font-size:1.35rem;font-variant-numeric:tabular-nums}
.user-home-balance{padding:12px 15px;border-bottom:1px solid #edf0f2}
@media(max-width:760px){.user-home-grid{grid-template-columns:minmax(0,1fr)}.user-home-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.user-home-metric{align-items:flex-start;flex-direction:column;padding:10px}.user-home-metric:nth-child(2){border-right:0}.user-home-heading{align-items:flex-start;flex-direction:column}}

.topbar-brand h1 a{color:inherit;text-decoration:none}
.topbar-brand h1 a:hover,.topbar-brand h1 a:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* Collapsible Home assignment cards */
.home-assignment-heading{width:100%;text-align:left;background:transparent;color:inherit;cursor:pointer;border:0;font:inherit}
.home-assignment-heading-title{font-size:1rem;font-weight:700}
.home-assignment-arrow{width:13px;height:13px;margin-left:auto;transition:transform .15s ease}
.home-assignment-heading[aria-expanded="false"] .home-assignment-arrow{transform:rotate(-90deg)}
.home-assignment-heading[aria-expanded="true"] .home-assignment-arrow{transform:rotate(0deg)}
.home-assignment-heading:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
.home-assignment-body[hidden]{display:none}
.home-assignment-section{align-self:start}

/* Positions settings uses the same gear control and modal layout as Features. */
#positionsPage .positions-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}
#positionsPage .feature-settings-dialog{position:fixed;margin:auto;width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 32px);padding:22px;border:1px solid #d8dee5;border-radius:10px;box-shadow:0 14px 50px #17202a40;color:inherit;box-sizing:border-box}
#positionsPage .feature-settings-dialog::backdrop{background:#15222c88}
#positionsPage .feature-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
#positionsPage .feature-settings-heading h2{margin:0;font-size:19px}
#positionsSettingsClose{border:0;background:transparent;font-size:26px;cursor:pointer}
#positionsSettingsContent .table-wrap{max-width:100%;overflow:auto}
#positionsSettingsContent table{width:100%}

.position-assigned-chip { display:inline-flex; align-items:center; gap:8px; padding:5px 8px 5px 11px; border:1px solid #a0b5d9; border-radius:8px; background:rgba(125,154,205,.16); font-size:.84rem; }
.position-remove { display:inline-flex; justify-content:center; align-items:center; width:22px; height:22px; padding:0; border:0; border-radius:5px; background:transparent; color:inherit; cursor:pointer; font-size:19px; }
.position-remove:hover,.position-remove:focus-visible { background:#ddd; }
.position-add { width:auto; min-width:75px; max-width:220px; padding:6px 10px; border-radius:8px; font-size:.84rem; cursor:pointer; }
.position-empty { align-self:center; font-size:.84rem; opacity:.7; }

/* Positions: compact tablets containing their own remove controls. */
#positionsPage .position-assignments{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#positionsPage .position-assigned-chip{display:inline-flex;flex:0 0 auto;align-items:center;gap:5px;width:auto;max-width:100%;min-height:32px;padding:3px 5px 3px 10px;box-sizing:border-box;border:1px solid #a0b5d9;border-radius:8px;background:#eaf1fc;color:#24354b;font-size:12px;line-height:1.3;white-space:nowrap}
#positionsPage .position-assigned-chip .position-remove{display:inline-flex;flex:0 0 20px;align-items:center;justify-content:center;position:static;width:20px;min-width:20px;max-width:20px;height:20px;min-height:20px;margin:0;padding:0;border:0;border-radius:5px;background:transparent;box-shadow:none;color:#40516c;font:normal 17px/1 Arial,sans-serif;cursor:pointer}
#positionsPage .position-assigned-chip .position-remove:hover{background:#d2ddeb;color:#1b2a3e}
#positionsPage .position-add{display:inline-block;flex:0 0 auto;width:auto;min-width:80px;max-width:220px;min-height:32px;margin:0;padding:4px 9px;box-sizing:border-box;font-size:12px}


/* Shared DataTable sizing; individual reports may provide their own column rules. */
.data-table--compact{min-width:0}
.data-table--compact th,.data-table--compact td{padding:9px}

/* Project team editor */
.project-team-card{display:flex;flex-direction:column;align-items:stretch;gap:12px;max-width:780px;padding:18px;margin:14px 0;border:1px solid #d8dee5;border-radius:9px;background:#fbfcfe}
.project-team-card h3{margin:0;font-size:1.1rem}
.project-team-card>input,.project-team-card>select{max-width:520px;width:100%;box-sizing:border-box}
.project-team-card>strong{font-size:.88rem}
.project-team-members{display:flex;flex-wrap:wrap;gap:8px 15px}
.project-team-members label{display:inline-flex;gap:7px;align-items:center;padding:6px 10px;border:1px solid #d8dee5;border-radius:7px;cursor:pointer}
.project-team-members label:has(input:checked){background:#eaf1fc;border-color:#a0b5d9}
.project-team-card>button{align-self:flex-start}

.project-team-summary{display:flex;flex-wrap:wrap;gap:10px 24px;padding:10px 12px;border:1px solid #d8dee5;border-radius:7px;background:#f6f9fc;font-size:.9rem}
.project-team-member-info{display:flex;flex-direction:column;gap:2px}
.project-team-member-info strong{font-weight:600;font-size:.85rem}
.project-team-member-info small{font-size:.76rem;color:#52657f}
.project-team-members label{align-items:center;min-width:155px}

.todo-create-form .todo-notification-options{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:20px}
.todo-create-form .todo-notification-options label{display:inline-flex;align-items:center;gap:8px;width:auto;white-space:nowrap}
.todo-create-form .todo-notification-options input[type="checkbox"]{width:auto;margin:0}

.home-task-row{display:flex;align-items:center;gap:10px}
.home-task-row>.home-assignment-item{flex:1;min-width:0}
.home-task-delete{border:1px solid #cbd5e1;background:transparent;border-radius:5px;padding:6px 10px;cursor:pointer;color:#9b2731}
.home-task-delete:hover{background:#fff1f2}
.home-task-delete:disabled{opacity:.5;cursor:wait}


/* Level 1 feature board */
.feature-kanban{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px;align-items:start;overflow-x:auto;padding:12px 0}
.feature-board-column{background:var(--surface-secondary,#f3f4f6);border:1px solid var(--border-color,#dce1e8);border-radius:10px;min-height:280px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.feature-board-heading{font-size:14px;margin:0 0 4px;font-weight:700}
.feature-board-card{background:var(--surface,#fff);border:1px solid var(--border-color,#dce1e8);border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.feature-card-title{background:transparent;border:0;padding:0;text-align:left;font:inherit;font-weight:700;cursor:default;color:inherit;overflow-wrap:anywhere}
.feature-card-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;opacity:.8}
.feature-card-progress{height:6px;background:#d8dce5;border-radius:10px;overflow:hidden}
.feature-card-progress-fill{height:100%;background:#3b82f6;border-radius:10px}
.feature-card-due{font-size:12px;color:var(--muted-color,#64748b)}
.feature-card-due.overdue{color:#dc2626;font-weight:700}
.feature-card-controls{display:flex;flex-direction:column;gap:6px}
.feature-status-settings{margin-top:18px;padding-top:12px;border-top:1px solid #ddd}
#featureStatusSettingsFields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#featureStatusSettingsFields label{display:flex;flex-direction:column;gap:4px;text-transform:capitalize}
@media(max-width:900px){.feature-kanban{grid-template-columns:repeat(4,minmax(210px,1fr))}}


/* Shareable L1 feature details */
.feature-detail{padding:12px 8px 24px}
.feature-detail-breadcrumb{font-size:12px;color:var(--muted-color,#64748b);margin-bottom:16px}
.feature-detail-breadcrumb a{color:inherit;text-decoration:underline}
.feature-detail h1{font-size:24px;margin:0 0 18px}
.feature-detail-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(250px,3fr);gap:24px}
.feature-detail-main{min-width:0}
.feature-detail-main h3,.feature-detail-sidebar h3{font-size:15px;margin:20px 0 12px}
.feature-detail-actions{display:flex;gap:8px}
.feature-detail-description{white-space:pre-wrap;line-height:1.5;min-height:70px}
.feature-detail-subhead{display:flex;justify-content:space-between;align-items:center}
.feature-detail-subhead h3{margin-bottom:8px}
.feature-detail-subhead span{font-size:12px;opacity:.7}
.feature-detail-subtasks{margin-top:12px}
.feature-detail-subtask{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--border-color,#dce1e8);border-radius:5px;margin:6px 0;font-size:13px}
.feature-detail-subtask-status{font-size:11px;white-space:nowrap}
.feature-detail-sidebar{background:var(--surface-secondary,#f4f5f7);border:1px solid var(--border-color,#dce1e8);border-radius:8px;padding:16px;align-self:start}
.feature-detail-sidebar h3{margin-top:0}
.feature-detail-field{display:flex;flex-direction:column;gap:6px;margin:16px 0;font-size:13px}
.feature-detail-label{font-size:12px;opacity:.7}
.feature-detail-tabs{display:flex;gap:8px;margin-bottom:12px}
.feature-detail-tab-content{border:1px solid var(--border-color,#dce1e8);border-radius:6px;padding:16px;font-size:13px}
@media(max-width:750px){.feature-detail-layout{grid-template-columns:1fr}}

.feature-validation-settings{display:flex;flex-direction:column;gap:12px;margin:16px 0}.feature-validation-settings h3{margin:0}.feature-validation-settings label{display:flex;align-items:center;gap:8px}.feature-status-error{color:#dc2626;font-size:12px;margin-top:5px}.feature-status-error[role="alert"]{font-weight:600}select[aria-invalid="true"]{border-color:#dc2626}

.feature-detail-subtask{grid-template-columns:44px minmax(0,1fr) minmax(105px,135px) auto}.feature-l2-days-label{display:flex;flex-direction:column;gap:3px;font-size:11px}.feature-l2-days{width:100%;min-width:0}@media(max-width:600px){.feature-detail-subtask{grid-template-columns:36px minmax(0,1fr)}.feature-detail-subtask-status{grid-column:2}}

.feature-due-label{display:flex;align-items:center;gap:8px}.feature-due-info{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:0}.feature-due-explanation{font-size:12px;line-height:1.5;margin:2px 0 0;color:var(--muted-color,#64748b)}.feature-detail-field input[type="date"]:disabled{opacity:.55;cursor:not-allowed;background:var(--surface-secondary,#e5e7eb)}

.feature-l2-lane{margin:16px 0;padding:12px;border:1px solid var(--border-color,#dce1e8);border-radius:8px;background:var(--surface-secondary,#f5f6f8)}.feature-l2-lane h4{margin:0 0 12px;font-size:14px}.feature-l2-remove{font-size:12px;cursor:pointer}.feature-detail-subtask{background:var(--surface,#fff)}

.feature-board-card[draggable="true"]{cursor:grab}.feature-board-card.feature-card-dragging{opacity:.45;cursor:grabbing}.feature-board-column.feature-drop-target{outline:2px dashed var(--accent,#3879c9);outline-offset:-3px;background:var(--surface-secondary,#eef5ff)}

.feature-drop-banner:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;margin:0 0 14px;padding:12px 16px;background:#fff1f1;border:1px solid #cc4545;border-left:4px solid #cc4545;border-radius:6px;color:#9c2020;font-weight:600}.feature-drop-banner button{border:0;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}

.feature-approval-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;font-size:12px}.feature-approval-pending{color:var(--muted-color,#64748b)}.feature-approval-approved{color:#16803c;font-weight:600}.feature-approval-button{padding:5px 10px;border-radius:5px;border:1px solid #16803c;background:#16803c;color:#fff;cursor:pointer}.feature-approval-button:disabled{opacity:.5;cursor:wait}

.feature-card-due.due-soon{color:#a35a00;font-weight:700;background:#fff1d6;border-radius:5px;padding:4px 7px}.feature-card-due.overdue{color:#a11919;font-weight:700;background:#ffeded;border-radius:5px;padding:4px 7px}

.github-details-section{margin-top:22px;padding-top:16px;border-top:1px solid var(--border-color,#ddd)}
.github-details-section h3{margin:0 0 8px}
.github-details-section p{margin:6px 0 12px}
.github-report-toggle{display:flex;align-items:center;gap:9px;font-weight:600;padding:12px 0}
.github-report-toggle input{width:17px;height:17px}
.github-report-save-state{font-size:.9em;opacity:.8}

.github-import-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:12px 0}
.github-import-controls details{max-width:800px}
.github-import-controls summary{cursor:pointer}
.github-import-controls select{max-width:100%;padding:6px}
.github-import-log{box-sizing:border-box;width:100%;min-height:180px;max-height:430px;overflow:auto;padding:12px;border:1px solid var(--border-color,#888);border-radius:6px;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}

/* Management level-2 heading and level-3 navigation links. */
#managementNavMenu .management-nav-group-heading { padding: 10px 12px 5px; font-size: 12px; font-weight: 700; color: #566574; }
#managementNavMenu .management-nav-child { padding-left: 26px; }

/* Shared tooltip portal: never clipped by a panel or viewport edge. */
.auto-pull-info .auto-pull-tooltip,
.auto-pull-info:hover .auto-pull-tooltip,
.auto-pull-info:focus .auto-pull-tooltip { display:none; }
.site-tooltip { position:fixed; z-index:2147483640; box-sizing:border-box; width:max-content; max-width:min(320px,calc(100vw - 20px)); max-height:calc(100vh - 20px); overflow:auto; padding:10px 12px; background:#17202a; color:#fff; border-radius:5px; box-shadow:0 5px 16px #0004; font-size:12px; font-weight:400; line-height:1.5; white-space:normal; overflow-wrap:anywhere; pointer-events:none; }
.site-tooltip[hidden] { display:none; }

#managementNavMenu .management-nav-group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; cursor:pointer; list-style:none; user-select:none; }
#managementNavMenu .management-nav-group-heading::-webkit-details-marker { display:none; }
#managementNavMenu .management-nav-group-heading:hover { background:#eef7f5; color:#146c5f; }
#managementNavMenu .management-nav-group-heading:focus-visible { outline:2px solid #146c5f; outline-offset:-2px; }
#managementNavMenu .management-nav-group-heading img { width:12px; height:12px; transition:transform .15s ease; }
#managementNavMenu .management-nav-group[open] .management-nav-group-heading img { transform:rotate(180deg); }
#adminNavMenu .admin-nav-group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; cursor:pointer; list-style:none; user-select:none; }
#adminNavMenu .admin-nav-group-heading::-webkit-details-marker { display:none; }
#adminNavMenu .admin-nav-group-heading:hover { background:#eef7f5; color:#146c5f; }
#adminNavMenu .admin-nav-group-heading:focus-visible { outline:2px solid #146c5f; outline-offset:-2px; }
#adminNavMenu .admin-nav-group-heading img { width:12px; height:12px; transition:transform .15s ease; }
#adminNavMenu .admin-nav-group[open] .admin-nav-group-heading img { transform:rotate(180deg); }
#adminNavMenu .admin-nav-child { padding-left:26px; }

/* Features Settings: full-page layout with in-page table of contents. */
#featuresettingsPage .feature-settings-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:start}
#featuresettingsPage .feature-settings-toc{position:sticky;top:16px;display:flex;flex-direction:column;gap:6px;border-right:1px solid #d8dee5;padding:12px 18px 12px 0}
#featuresettingsPage .feature-settings-toc h3{margin:0 0 12px}
#featuresettingsPage .feature-settings-toc a{padding:9px 12px;border-radius:6px;color:#17202a;text-decoration:none}
#featuresettingsPage .feature-settings-toc a:hover,#featuresettingsPage .feature-settings-toc a:focus-visible{background:#eef7f5;color:#146c5f}
#featuresettingsPage .feature-settings-body{min-width:0;max-width:900px}
#featuresettingsPage .feature-settings-content>section{scroll-margin-top:24px;margin:30px 0}
#featuresettingsPage #feature-user-permissions{scroll-margin-top:24px}
#featuresettingsPage .feature-settings-table-wrap{overflow-x:auto}
#featuresettingsPage .feature-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media(max-width:720px){#featuresettingsPage .feature-settings-layout{grid-template-columns:1fr}#featuresettingsPage .feature-settings-toc{position:static;border-right:0;border-bottom:1px solid #d8dee5;padding:8px 0;flex-direction:row;flex-wrap:wrap}#featuresettingsPage .feature-settings-toc h3{width:100%}}

/* L2 estimated hours: shared column label and oversized overlapping steppers. */
.feature-l2-lane .feature-l2-columns{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(105px,135px) 42px;gap:10px;padding:0 12px;font-size:12px;font-weight:600;color:#566574;align-items:end}
.feature-l2-lane .feature-detail-subtask{grid-template-columns:44px minmax(0,1fr) minmax(105px,135px) 42px;overflow:visible}
.feature-l2-days-label{position:relative;display:block;min-width:0}
.feature-l2-days{box-sizing:border-box;width:100%;padding-right:30px;appearance:textfield;-moz-appearance:textfield}
.feature-l2-days::-webkit-inner-spin-button,.feature-l2-days::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.feature-hours-spinner{position:absolute;right:1px;top:1px;bottom:1px;width:27px;display:none;flex-direction:column;z-index:2}
.feature-l2-days-label:focus-within .feature-hours-spinner{display:flex}
.feature-hours-step{box-sizing:border-box;flex:1;min-height:0;width:100%;padding:0;line-height:1;font-size:12px;font-weight:700;border:0;border-left:1px solid #b7c1cc;background:#fff;cursor:pointer}
.feature-hours-step:first-child{border-radius:0 4px 0 0}
.feature-hours-step:last-child{border-top:1px solid #b7c1cc;border-radius:0 0 4px 0}
.feature-hours-step:hover:not(:disabled){background:#eef7f5}
.standard-delete-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:6px;border:1px solid #d8dee5;border-radius:6px;background:#fff;color:#b42318;cursor:pointer}
.standard-delete-button:hover{background:#fff1f0}
.notification-clickable{cursor:pointer}
.notification-clickable:hover{background:#eef7f5}
.notification-clickable:hover strong{text-decoration:underline}
.notification-clickable:focus-visible{outline:2px solid #228477;outline-offset:-2px}
@media(max-width:600px){.feature-l2-lane .feature-l2-columns{grid-template-columns:36px minmax(0,1fr) 110px 38px}.feature-l2-lane .feature-detail-subtask{grid-template-columns:36px minmax(0,1fr) 110px 38px;gap:6px}.feature-l2-lane .feature-l2-columns{gap:6px}}

/* Standalone feature ticket detail page. */
#featuredetailPage .feature-detail-page-panel{position:relative;min-height:calc(100vh - 160px);padding:28px}
#featuredetailPage .feature-detail-page-top{display:flex;justify-content:flex-end;min-height:38px}
#featuredetailPage .feature-detail-close{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:6px;background:transparent;font-size:32px;line-height:1;cursor:pointer}
#featuredetailPage .feature-detail-close:hover{background:#eef1f4}
#featuredetailPage .feature-detail{width:100%}

.task-filter-selection-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.task-filter-selection-actions .task-filter-select-all{flex:1;min-width:0}
.task-filter-clear{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;padding:4px;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}
.task-filter-clear:hover:not(:disabled){background:#e8edf0}
.task-filter-clear:focus-visible{outline:2px solid #228477;outline-offset:2px}
.task-filter-clear:disabled{opacity:.35;cursor:default}

/* Shared close control, used by page exits, dialogs and dismiss actions. */
button.site-close-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;min-width:38px;padding:7px;border:0;border-radius:6px;background:transparent;cursor:pointer;font-size:0;line-height:1}
button.site-close-button img{display:block;width:24px;height:24px;object-fit:contain}
button.site-close-button:hover{background:#f3f4f6}
button.site-close-button:focus-visible{outline:2px solid #228477;outline-offset:2px}

/* Standard settings action: top-right corner of its owning card. */
.site-settings-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-width:44px;padding:8px;border:1px solid #c9d5d8;border-radius:8px;background:#fff;color:inherit;cursor:pointer}
.site-settings-button img{display:block;width:26px;height:26px;object-fit:contain}
.site-settings-button:hover:not(:disabled){background:#eef7f5;border-color:#228477}
.site-settings-button:focus-visible{outline:2px solid #228477;outline-offset:2px}
.site-settings-button[hidden]{display:none!important}
#featuresPage .tasks-panel{position:relative}
#featuresPage .tasks-action-stack{position:absolute;top:16px;right:16px;z-index:1;display:flex;align-items:center;flex-direction:column;gap:8px}
#featuresPage .control-panel-right.tasks-action-stack{justify-content:flex-start}
#featuresPage .control-panel{padding-right:72px}
#positionsPage .panel{position:relative}
#positionsPage .positions-toolbar{position:absolute;top:16px;right:16px;z-index:1}

/* Universal Save icon button. Existing click/submit handlers are untouched. */
button.site-save-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;min-width:44px;height:44px;padding:8px;border:1px solid #c9d5d8;border-radius:8px;background:#fff;cursor:pointer;font-size:0;line-height:1;vertical-align:middle}
button.site-save-button img{display:block;width:28px;height:28px;object-fit:contain}
button.site-save-button:hover:not(:disabled){background:#eef7f5;border-color:#228477}
button.site-save-button:focus-visible{outline:2px solid #228477;outline-offset:2px}
button.site-save-button:disabled{opacity:.45;cursor:not-allowed}
button.site-save-button[hidden]{display:none!important}

/* Features Settings > Board team: separate description, field, and save action. */
#featuresettingsPage .feature-team-settings > p{margin:0 0 16px}
#featuresettingsPage .feature-team-settings > label{display:block;margin:0 0 6px}
#featuresettingsPage .feature-team-settings > select{display:block;width:min(100%,320px);margin:0 0 16px}
#featuresettingsPage .feature-team-settings > div{display:flex;align-items:center;gap:12px;min-height:44px}

/* Home: assigned and created tasks, always expanded. */
#homeAssignments.home-assignment-grid{display:flex;flex-direction:column;gap:28px}
#homeAssignments .home-task-section{display:block;width:100%;min-width:0}
#homeAssignments .home-task-heading{margin:0 0 12px;font-size:20px;font-weight:700}
#homeAssignments .home-task-divider{height:1px;border:0;background:#d8dee5;margin:0 0 14px}
#homeAssignments .home-assignment-list{display:flex;flex-direction:column;gap:10px}
#homeAssignments .home-assignment-empty{margin:0;padding:10px 0;color:#697887}

/* Features: three-zone header, independent of the legacy control-panel layout. */
#featuresPage .feature-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;column-gap:20px;width:100%;margin:0 0 22px;min-height:60px}
#featuresPage .feature-header-left{display:flex;align-items:stretch;justify-content:flex-start;min-width:0;height:100%}
#featuresPage .feature-header-left #tasksAssigneeFilter{display:flex;align-items:stretch;min-height:100%}
#featuresPage .feature-header-left .task-filter-group{height:100%;box-sizing:border-box}
#featuresPage .feature-header-center{display:flex;align-items:flex-start;justify-content:center}
#featuresPage .feature-header-right{display:flex;align-items:flex-start;justify-content:flex-end}
#featuresPage .feature-header-right .site-settings-button{position:static}
#featuresPage .feature-header button[hidden]{display:none!important}
@media(max-width:650px){#featuresPage .feature-header{grid-template-columns:minmax(0,1fr) auto auto;gap:12px}}

/* Each Kanban status card consists of two rows: header and card-list body. */
#featuresPage .feature-board-column{display:flex;flex-direction:column;min-width:0}
#featuresPage .feature-board-column-header{flex:0 0 auto}
#featuresPage .feature-board-column-body{display:flex;flex-direction:column;flex:1 1 auto;gap:10px;min-height:0}
#featuresPage .feature-board-column-body .feature-card{flex:0 0 auto}

/* Add action sits flush against the bottom edge of the Features header. */
#featuresPage .feature-header-center{align-self:stretch;align-items:flex-end;justify-content:center}
#featuresPage .feature-header-center .feature-header-add{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;box-sizing:border-box;width:56px;height:56px;min-width:56px;margin:0;padding:0;border:0;background:transparent;line-height:0}
#featuresPage .feature-header-center .feature-header-add img{display:block;width:56px;height:56px;object-fit:contain}

/* Shared page-card structure: existing panel keeps its identity and page styles. */
.page .panel.ui-card{display:flex;flex-direction:column;min-width:0}
.page .panel.ui-card > .ui-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0;margin-bottom:16px}
.page .panel.ui-card > .ui-card-header:has(.feature-header){display:block}
.page .panel.ui-card > .ui-card-header > .feature-header{margin-bottom:0}
.page .panel.ui-card > .ui-card-header > .panel-heading{flex:1;min-width:0}
.page .panel.ui-card > .ui-card-header > h2{margin:0;align-self:center}
.page .panel.ui-card > .ui-card-header > .ui-card-title{font-size:1.25rem;font-weight:700}
.page .panel.ui-card > .ui-card-body{flex:1;min-width:0}
.page .panel.ui-card > .ui-card-header > .ui-card-settings-placeholder{flex:0 0 auto;align-self:flex-start}
.page .panel.ui-card > .ui-card-header > .ui-card-settings-placeholder:disabled{opacity:.5;cursor:not-allowed}
.ui-card-header .ui-card-settings-action{margin-left:auto}
.feature-board-column.ui-card{display:flex;flex-direction:column}
.feature-board-column.ui-card > .ui-card-header{flex:0 0 auto}
.feature-board-column.ui-card > .ui-card-body{flex:1 1 auto;min-height:0}

/* Preserve hidden secondary panels after Card applies its flex layout. */
.page .panel.ui-card[hidden]{display:none!important}

/* Navigation icon only: no surrounding button border or fill. */
#navToggle.nav-hamburger,
#navToggle.nav-hamburger:hover,
#navToggle.nav-hamburger:active{
 border:0;
 background:transparent;
 box-shadow:none;
}

/* Feature ticket hover affordance: View overlay above the existing card. */
#featuresPage .feature-board-card{position:relative;isolation:isolate}
#featuresPage .feature-card-view-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:rgba(16,31,44,.78);color:#fff;font-size:32px;font-weight:700;letter-spacing:.02em;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s ease;pointer-events:none}
#featuresPage .feature-board-card:hover .feature-card-view-overlay,
#featuresPage .feature-board-card:focus-visible .feature-card-view-overlay{opacity:1;visibility:visible}
#featuresPage .feature-board-card{cursor:pointer}
#featuresPage .feature-board-card[draggable="true"]{cursor:grab}
@media(prefers-reduced-motion:reduce){#featuresPage .feature-card-view-overlay{transition:none}}

/* Shared autosave confirmation: existing green Save tick followed by Saved. */
.autosave-status-saved{display:inline-flex;align-items:center;gap:5px;color:#347e54;font-weight:600}
.autosave-status-saved img{display:block;width:20px;height:20px;object-fit:contain}

/* Delete actions remain discoverable on hover/focus, not permanently visible. */
.feature-detail-subtask .standard-delete-button,
.feature-board-card .standard-delete-button,
.feature-card-controls .standard-delete-button{opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease}
.feature-detail-subtask:hover .standard-delete-button,
.feature-detail-subtask:focus-within .standard-delete-button,
.feature-board-card:hover .standard-delete-button,
.feature-board-card:focus-within .standard-delete-button,
.feature-card-controls:hover .standard-delete-button,
.feature-card-controls:focus-within .standard-delete-button{opacity:1;visibility:visible}
@media(hover:none){.feature-detail-subtask .standard-delete-button,.feature-board-card .standard-delete-button,.feature-card-controls .standard-delete-button{opacity:1;visibility:visible}}

/* Page Close and Settings share the top-right Card header, Close on the left. */
.page .panel.ui-card > .ui-card-header > .ui-card-header-actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:12px;margin-left:auto;flex:0 0 auto}
.page .panel.ui-card > .ui-card-header > .ui-card-header-actions > .feature-detail-close{position:static;margin:0;align-self:flex-start}
#featuredetailPage .feature-detail-page-top:empty{display:none}

/* Center both View and Changing Status within the full ticket overlay. */
#featuresPage .feature-board-card .feature-card-view-overlay{
 box-sizing:border-box;
 width:100%;
 height:100%;
 text-align:center;
 justify-content:center;
 align-items:center;
 padding:12px;
 white-space:normal;
}

/* Feature permission groups and editable L2 rows. */
.feature-permission-group-row th{padding:16px 12px 10px;text-align:left;font-size:1.05rem;font-weight:700;background:var(--surface-muted,#eef2f5);border-top:2px solid var(--border-color,#dce2e7)}
.feature-detail-subtask .feature-l2-title{width:100%;min-width:0;box-sizing:border-box;border:1px solid transparent;background:transparent;font:inherit;color:inherit;padding:6px}
.feature-detail-subtask .feature-l2-title:not(:disabled):hover,
.feature-detail-subtask .feature-l2-title:not(:disabled):focus{border-color:var(--border-color,#b8c6d1);background:#fff}
.feature-detail-subtask .feature-l2-title:disabled{opacity:1;cursor:default}
.feature-detail-subtask .feature-l2-reorder{display:inline-flex;flex-direction:column;gap:2px;align-self:center}
.feature-detail-subtask .feature-l2-reorder-button{border:0;background:transparent;padding:1px 4px;cursor:pointer}

/* Pages with multiple data sections share one outer Card and header. */
.page .ui-card-merged-section{margin-top:24px;padding-top:20px;border-top:1px solid #d8dee5;background:transparent;box-shadow:none}
.page .ui-card-merged-section[hidden]{display:none!important}
.page .ui-card-merged-section > .panel-heading{margin-bottom:12px}
.page .ui-card-merged-section > .panel-heading .actions{margin-left:auto}

/* Compact Home brand: swap text for the supplied home icon on hover/focus. */
.topbar-brand h1{font-size:1.2rem;line-height:1.25;margin:0}
#homeBrandLink{display:inline-flex;align-items:center;justify-content:flex-start;min-height:30px;color:inherit;text-decoration:none!important}
#homeBrandLink:hover,#homeBrandLink:focus-visible{text-decoration:none!important}
#homeBrandLink .home-brand-icon{width:26px;height:26px;object-fit:contain;pointer-events:none}

/* Consistent circular hover/focus feedback for top navigation icons. */
.topbar #navToggle.nav-hamburger,
.topbar #homeBrandLink,
.topbar #notificationButton,
.topbar #currentUser{
 border:0;
 border-radius:50%;
 background:transparent;
 box-shadow:none;
 transition:background-color .15s ease;
}
.topbar #navToggle.nav-hamburger:hover,
.topbar #navToggle.nav-hamburger:focus-visible,
.topbar #homeBrandLink:hover,
.topbar #homeBrandLink:focus-visible,
.topbar #notificationButton:hover,
.topbar #notificationButton:focus-visible,
.topbar #currentUser:hover,
.topbar #currentUser:focus-visible{
 background-color:#e1e5e9;
}
.topbar #navToggle.nav-hamburger{width:44px;height:44px;padding:10px}
.topbar #homeBrandLink{width:44px;height:44px;min-height:44px;justify-content:center}
.topbar #notificationButton,.topbar #currentUser{min-height:44px;min-width:44px;align-items:center;justify-content:center}

/* Full brand label is the hover target; keep its width stable while swapping. */
.topbar .home-brand-hover{display:inline-flex;align-items:center}
.topbar .home-brand-hover #homeBrandLink{
 position:relative;
 width:auto;
 min-width:44px;
 height:44px;
 padding:0 12px;
 box-sizing:border-box;
 white-space:nowrap;
}
.topbar .home-brand-hover .home-brand-text{display:inline}
.topbar .home-brand-hover .home-brand-icon{
 display:block;
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
 visibility:hidden;
}
.topbar .home-brand-hover:hover .home-brand-text,
.topbar .home-brand-hover:focus-within .home-brand-text{visibility:hidden}
.topbar .home-brand-hover:hover .home-brand-icon,
.topbar .home-brand-hover:focus-within .home-brand-icon{visibility:visible}

/* Header layout: two independent groups with no overlapping hit areas. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.topbar .topbar-left,.topbar .topbar-right{display:flex;align-items:center;flex-wrap:nowrap;min-width:0}
.topbar .topbar-left{gap:14px;flex:0 1 auto}
.topbar .topbar-right{gap:10px;flex:0 0 auto;margin-left:auto}
.topbar .topbar-left #navToggle{position:relative;flex:0 0 44px;z-index:1}
.topbar .topbar-left .home-brand-hover{position:relative;flex:0 1 auto;min-width:0}
.topbar .topbar-left #homeBrandLink{position:relative;z-index:0}

/* Compact failure indicators, matching the numbered Feature Settings rules. */
.feature-card-validation-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;position:relative;z-index:3}
.feature-validation-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:5px;background:#fce8e8;border:1px solid #e9a6a6;color:#a71d2a;font-size:12px;font-weight:700;line-height:1.2;text-decoration:none}
.feature-validation-badge:hover,.feature-validation-badge:focus-visible{background:#f6cccc;color:#861521;text-decoration:none;outline-offset:2px}
.feature-validation-rule-id{font-weight:700}

/* Brand hover uses a rectangular fill; other nav icons remain circular. */
.topbar .topbar-left #homeBrandLink{
 border-radius:8px;
}
.topbar .topbar-left #homeBrandLink:hover,
.topbar .topbar-left #homeBrandLink:focus-visible{
 border-radius:8px;
 background-color:#e1e5e9;
}

/* Briefly identify the exact validation rule selected from a feature card. */
#feature-validation label.feature-validation-highlight{
 border-radius:5px;
 animation:feature-validation-flash 3s ease-out forwards;
}
@keyframes feature-validation-flash{
 0%{background-color:rgba(220,38,38,.17);box-shadow:inset 0 0 0 2px #dc2626}
 20%{background-color:rgba(220,38,38,.14);box-shadow:inset 0 0 0 2px rgba(220,38,38,.9)}
 100%{background-color:rgba(220,38,38,0);box-shadow:inset 0 0 0 2px rgba(220,38,38,0)}
}

/* Account icon uses the same 44px circular hit area as other header icons. */
.topbar #currentUser{width:44px;height:44px;min-width:44px;min-height:44px;padding:8px;display:inline-flex;align-items:center;justify-content:center;gap:0;border-radius:50%}

/* Feature validations are grouped by scope, with a page-level failure banner. */
.feature-validation-group{display:flex;flex-direction:column;gap:10px}
.feature-validation-group h4{margin:4px 0 2px;font-size:14px}
.feature-page-validation-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:12px 0;border:1px solid #e9a6a6;border-radius:6px;background:#fce8e8;color:#a71d2a;font-size:14px}
.feature-page-validation-banner[hidden]{display:none}
.feature-page-validation-banner a{font-weight:700;color:#a71d2a;border:1px solid currentColor;border-radius:4px;padding:3px 7px;text-decoration:none}
.feature-page-validation-banner a:hover,.feature-page-validation-banner a:focus-visible{background:#f6cccc}

/* Compact L2 rows: all actions stay in the fourth column, not a second grid row. */
.feature-l2-lane .feature-detail-subtask{min-height:0;padding:8px 12px;align-items:center}
.feature-l2-row-controls{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.feature-l2-row-controls .feature-l2-reorder{flex:0 0 auto}
.feature-l2-row-controls .standard-delete-button{flex:0 0 auto}

/* Shared L1 description / L2 title inline editor: focus never changes its footprint. */
.feature-detail-main .feature-inline-editor{box-sizing:border-box;border:1px solid transparent;background:transparent;color:inherit;font:inherit;outline:none;min-width:0;}
.feature-detail-main .feature-inline-editor:not(:disabled):hover,.feature-detail-main .feature-inline-editor:not(:disabled):focus{border-color:var(--border-color,#b8c6d1);background:#fff;}
.feature-detail-main .feature-inline-editor:disabled{opacity:1;cursor:default;}
.feature-detail-main textarea.feature-detail-description{display:block;width:100%;max-width:100%;height:96px;min-height:96px;resize:none;overflow-y:auto;padding:6px;white-space:pre-wrap;line-height:1.5;}

/* Denied routes display only this banner, never page content. */
.page-access-denied:not([hidden]) {
  display: block;
  margin: 16px 0;
  padding: 16px 20px;
  border: 1px solid #dc2626;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-weight: 600;
}

.page-load-slow{color:#b42318;font-weight:700}
.page-load-slow-row{background:#fff4f2}
.page-load-page-link{color:#146c94;text-decoration:underline;text-underline-offset:2px}
.page-load-page-link:hover{color:#0b4f6c}
.test-session-banner:not([hidden]){display:flex;align-items:center;justify-content:center;gap:18px;padding:9px 14px;background:#fff3cd;border-bottom:1px solid #ead38a;color:#594400}
.test-session-banner button{padding:5px 10px}

/* Work Summary has independent Fetch, Generate and Activity cards. */
#reportsPage .panel.ui-card > .ui-card-header{margin-bottom:8px;align-items:center}
#reportsPage .panel.ui-card > .ui-card-header > .panel-heading{align-items:center}
#reportsPage .panel.ui-card > .ui-card-body > p:first-child{margin-top:0}
#reportsPage .panel.ui-card + .panel.ui-card{margin-top:18px}

/* Card headers are reserved exclusively for the Settings control. */
.page .panel.ui-card > .ui-card-header{justify-content:flex-end}
.page .panel.ui-card > .ui-card-body > .panel-heading{margin-bottom:16px}

/* Report status and output occupy a single line; scroll horizontally for long text. */
#reportsPage #reportFetchOutput,
#reportsPage #output{min-height:0;height:auto;max-height:none;margin-top:12px;padding:10px 12px;white-space:pre;overflow-x:auto;overflow-y:hidden;overflow-wrap:normal;word-break:normal}

/* Shared table pagination */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 4px 4px;
  margin-top: 0;
  font-size: 13px;
  color: var(--muted-color, #64748b);
}
.table-pagination span {
  min-width: 80px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-pagination button {
  width: auto;
  min-width: 76px;
  padding: 7px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}
.table-pagination button:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.table-pagination button:focus-visible {
  outline: 2px solid #228477;
  outline-offset: 2px;
}
.table-pagination button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .table-pagination { justify-content: center; }
}

.github-automation-toggle{display:flex;align-items:center;gap:9px;margin:12px 0 16px;font-size:14px;line-height:1.5;cursor:pointer}
.github-automation-toggle input{width:17px;height:17px;flex:none;accent-color:#228477;cursor:pointer}
.github-automation-toggle input:disabled{cursor:wait}

.github-automation-toggle label{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.github-automation-toggle a{margin-left:auto;white-space:nowrap}
.scheduled-event-selected{background:#e0f2ee;outline:2px solid #228477;outline-offset:-2px}

.scheduled-event-link{display:inline-flex;align-items:center;white-space:nowrap;margin-left:12px;font-size:13px}
.scheduled-setting-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
[data-scheduled-event]>.scheduled-event-link{flex:none}

.report-layout-config{margin:16px 0}
.report-layout-config summary{cursor:pointer;font-weight:600}
.report-layout-config form{margin-top:12px}
.report-layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:12px}
.report-layout-grid fieldset{min-width:0}
.report-layout-grid fieldset label{display:block;margin:8px 0}
.report-layout-config .actions{margin-top:12px;align-items:center}


/* Work Quality: scoped layout, with comfortable spacing across screen sizes. */
.work-quality-panel{max-width:1200px}
.work-quality-header{margin-bottom:24px}
.work-quality-header h2{margin:0 0 8px}
.work-quality-header p{margin:0;color:var(--muted,#64748b);line-height:1.5}
.work-quality-filters{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:18px 20px;margin-bottom:22px;border:1px solid var(--border,#dce2e8);border-radius:10px;background:var(--surface,#f8fafc)}
.work-quality-date-fields{display:flex;gap:14px;flex-wrap:wrap}
.work-quality-date-fields label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14px}
.work-quality-date-fields input{min-height:42px;box-sizing:border-box}
.work-quality-filters button{min-height:42px;padding:0 20px}
#workQualityRefreshStatus:not(:empty){align-self:center;font-size:14px}
.work-quality-refresh-card{margin-bottom:22px;border:1px solid var(--border,#dce2e8);border-radius:10px;background:#fff;overflow:hidden}
.work-quality-refresh-card>summary{cursor:pointer;padding:14px 18px;font-weight:600}
.work-quality-refresh-card[open]>summary{border-bottom:1px solid var(--border,#dce2e8)}
.work-quality-refresh-card .work-quality-filters{margin:16px 16px 12px}
.work-quality-log-panel{margin:0 16px 16px;border:1px solid var(--border,#dce2e8);border-radius:8px;overflow:hidden}
.work-quality-log-heading{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#f8fafc;border-bottom:1px solid var(--border,#dce2e8)}
.work-quality-log-heading button{padding:4px 10px;font-size:12px}
.work-quality-log-entries{height:140px;overflow-y:auto;padding:10px 12px;font:12px/1.6 monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.work-quality-log-entry{display:flex;gap:12px}
.work-quality-log-entry time{flex-shrink:0;color:#64748b}
.work-quality-log-error{color:#b42318}
.work-quality-log-success{color:#146c5f}
.work-quality-info-card{border:1px solid var(--border,#dce2e8);border-radius:10px;background:#fff;overflow:hidden}
.work-quality-info-card>summary{cursor:pointer;padding:14px 18px;font-weight:600}
.work-quality-info-card[open]>summary{border-bottom:1px solid var(--border,#dce2e8)}
.work-quality-info-body{display:flex;flex-direction:column;gap:16px;padding:16px 18px}
.work-quality-content{display:flex;flex-direction:column;gap:20px}
.work-quality-meta{margin:0;color:var(--muted,#64748b);font-size:14px;line-height:1.5}
.work-quality-team-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:4px}
.work-quality-team-filter label{font-weight:600}
.work-quality-team-filter select{min-width:260px;max-width:100%;min-height:42px}
.work-quality-team-note{color:var(--muted,#64748b);font-size:13px}
.work-quality-metric-section{padding:20px;border:1px solid var(--border,#dce2e8);border-radius:10px;min-width:0;overflow-x:auto}
.work-quality-metric-section h3{margin:0 0 16px;font-size:18px}
.work-quality-section-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.work-quality-section-heading h3{margin-right:auto}
.work-quality-metric-section .data-table{min-width:0;width:auto;table-layout:auto}
.work-quality-metric-section .data-table th:not(:first-child),.work-quality-metric-section .data-table td:not(:first-child){width:1%;white-space:nowrap;text-align:center}
.work-quality-metric-section .data-table th:first-child,.work-quality-metric-section .data-table td:first-child{min-width:180px;width:100%;text-align:left}
@media(max-width:600px){.work-quality-filters{padding:14px}.work-quality-date-fields{width:100%}.work-quality-date-fields label{flex:1;min-width:125px}.work-quality-date-fields input{width:100%}.work-quality-team-filter{align-items:flex-start;flex-direction:column}.work-quality-team-filter select{width:100%;min-width:0}.work-quality-metric-section{padding:14px}}

/* Compact Work Quality table headers. */
.work-quality-metric-section .data-table th{font-size:12px;font-weight:600;padding:7px 8px}
.work-quality-metric-section .data-table td{font-size:13px;padding:7px 8px}

.work-quality-grouped-table thead tr:first-child th{font-size:12px;text-align:center;background:#edf2f6;border-bottom:1px solid #d8dee5}
.work-quality-grouped-table thead tr:first-child th:first-child{width:auto;min-width:180px;text-align:left}
.work-quality-grouped-table thead tr:nth-child(2) th:first-child{width:auto}

/* Separate Developer, Totals and Best in both Work Quality tables. */
.work-quality-grouped-table thead tr:first-child th:nth-child(2),
.work-quality-grouped-table thead tr:first-child th:nth-child(3),
.work-quality-grouped-table thead tr:nth-child(2) th:first-child,
.work-quality-grouped-table thead tr:nth-child(2) th:nth-child(4),
.work-quality-grouped-table tbody td:nth-child(2),
.work-quality-grouped-table tbody td:nth-child(5){border-left:1px solid #cbd5df}

.work-quality-diagnostics{margin:0 16px 16px;border:1px solid var(--border,#dce2e8);border-radius:8px;overflow:hidden}
.work-quality-diagnostics-result{padding:12px;overflow-x:auto;font-size:13px}
.work-quality-diagnostics-result .table-wrap{margin-top:10px}
.work-quality-diagnostics-result .data-table{min-width:650px;font-size:12px}
.work-quality-diagnostics-result .data-table th,.work-quality-diagnostics-result .data-table td{padding:7px 9px}

.work-quality-log-actions{display:flex;align-items:center;gap:8px}

.work-quality-info-card>summary{display:list-item}
.work-quality-info-card>summary span{float:right;font-size:12px;font-weight:400;color:#64748b;margin-left:16px}

/* Align numeric column headings with their right-aligned values. */
.work-quality-metric-section .work-quality-grouped-table thead tr:nth-child(2) th:not(:first-child){text-align:right}
.work-quality-metric-section .work-quality-grouped-table tbody td:not(:first-child){text-align:right}

/* Best week is secondary context, shown after the best metric. */
.work-quality-metric-section .work-quality-grouped-table thead tr:nth-child(2) th:last-child,
.work-quality-metric-section .work-quality-grouped-table tbody td:last-child,
.work-quality-metric-section .work-quality-grouped-table .work-quality-week{font-size:10px;color:#81909f;font-weight:400}

.work-quality-metric-section .work-quality-grouped-table thead tr:first-child th[rowspan]{vertical-align:middle}

/* The second header row starts with PRs/Hrs: Developer is row-spanned above it. */
.work-quality-metric-section .work-quality-grouped-table thead tr:nth-child(2) th:first-child{
 min-width:0;width:1%;text-align:right;white-space:nowrap;
}
.work-quality-metric-section .work-quality-grouped-table thead tr:nth-child(2) th{
 text-align:right;
}

.work-quality-section-heading{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.work-quality-section-heading h3{margin:0}
.work-quality-section-heading .auto-pull-tooltip{white-space:normal;max-width:360px}
.work-quality-leave-section .work-quality-section-heading h3{margin-right:auto}

.work-quality-low-hours{margin:18px 0 0 20px;border-left:2px solid var(--border,#dce2e8);padding:4px 0 4px 16px}
.work-quality-low-hours>summary{cursor:pointer;font-weight:600}
.work-quality-low-hours>p{font-size:12px;color:#64748b}
.work-quality-low-hours .table-wrap{overflow-x:auto;margin-top:10px}

.work-quality-refresh-card .work-quality-schedule-setting{
 display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
 margin:16px 16px 0;padding:12px 16px;
 border:1px solid var(--border,#dce2e8);border-radius:8px;
 background:var(--surface-muted,#f8fafc);font-size:13px;line-height:1.5;
}
.work-quality-refresh-card .work-quality-schedule-setting strong{font-size:13px;font-weight:600}
.work-quality-refresh-card .work-quality-schedule-setting>span{color:#64748b}
.work-quality-refresh-card .work-quality-schedule-setting .scheduled-event-link{margin-left:auto;font-size:13px}

.work-quality-engineering>h3{margin-bottom:14px}
.work-quality-engineering-definition{border:1px solid var(--border,#dce2e8);border-radius:8px;overflow:hidden}
.work-quality-engineering-definition>summary{cursor:pointer;padding:12px 14px;font-size:13px;font-weight:600;background:var(--surface-muted,#f8fafc)}
.work-quality-engineering-definition[open]>summary{border-bottom:1px solid var(--border,#dce2e8)}
.work-quality-engineering-definition-body{padding:16px;display:grid;gap:14px}
.work-quality-engineering-definition-item strong{font-size:13px}
.work-quality-engineering-definition-item p{margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--muted,#64748b)}

/* Developer assessments are independent, collapsible report cards. */
.work-quality-developer-details>summary{cursor:pointer;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;font-size:15px;line-height:1.5;list-style:none}
.work-quality-developer-details>summary::-webkit-details-marker{display:none}
.work-quality-developer-details>summary::before{content:"▸";color:var(--muted,#64748b);font-size:16px;flex-shrink:0}
.work-quality-developer-details[open]>summary::before{content:"▾"}
.work-quality-developer-summary strong{font-weight:650}
.work-quality-developer-summary span:last-child{flex-basis:100%;color:var(--muted,#64748b);font-size:13px;font-weight:400}
.work-quality-developer-content{display:grid;gap:14px;padding-top:18px}
.work-quality-developer-content .table-wrap{max-width:100%;overflow-x:auto}

/* Indented developer cards within the parent Engineering Points card. */
.work-quality-engineering>.work-quality-engineering{margin:16px 0 0 24px;padding:16px 18px;background:var(--surface,#fff)}
@media(max-width:600px){.work-quality-engineering>.work-quality-engineering{margin-left:12px;padding:12px}}

.work-quality-slack-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:12px 0}
.work-quality-slack-logs{margin:10px 0 16px}
.work-quality-slack-logs>summary{cursor:pointer;font-weight:600}
.work-quality-slack-log-lines{max-height:200px;overflow:auto;padding:10px 12px;margin-top:8px;border:1px solid var(--border,#d8dee8);border-radius:6px;font:12px/1.7 monospace;white-space:pre-wrap;overflow-wrap:anywhere}

/* Super Admin-only, collapsed achievement testing controls. */
#achievementsPage .achievements-debug-panel{margin-bottom:18px;padding:12px 16px;border:1px solid var(--border,#dce2e8);border-radius:8px}
#achievementsPage .achievements-debug-panel[hidden]{display:none}
#achievementsPage .achievements-debug-panel>summary{font-weight:600;cursor:pointer}
#achievementsPage .achievements-debug-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:14px}
#achievementsPage .achievements-debug-controls label{display:flex;align-items:center;gap:8px}
#achievementsPage .achievements-debug-controls select{max-width:250px}

/* Achievements page and badge layout. */
#achievementsPage .achievements-panel{padding:clamp(24px,6vw,96px);min-height:calc(100vh - 110px);box-sizing:border-box}
#achievementsPage .achievement-image-badge{width:100%;max-width:256px;justify-self:center}
@media(max-width:600px){#achievementsPage .achievements-panel{padding:16px;min-height:calc(100vh - 80px)}}

/* Shared JSON-driven badge and optional hover popup. */
#achievementsPage .achievement-image-badge{position:relative;display:block;outline-offset:4px;isolation:isolate;overflow:visible}
#achievementsPage .achievement-image-badge>img{display:block;max-width:100%;height:auto}
#achievementsPage .achievement-image-artwork{display:block;width:100%;height:100%;max-width:none;object-fit:contain;margin:0}
#achievementsPage .achievement-image-badge[data-state='on']>.achievement-image-artwork{transform:scale(.94)}
#achievementsPage .achievement-image-popup{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:min(280px,85vw);padding:12px 14px;border-radius:8px;background:#1e293b;color:#fff;font-size:13px;line-height:1.5;box-shadow:0 8px 24px #0003;z-index:5;pointer-events:none}
#achievementsPage .achievement-image-popup>div+div{margin-top:5px}
#achievementsPage .achievement-image-popup{max-height:calc(100vh - 16px);overflow-y:auto}
#achievementsPage .achievement-image-popup.achievement-image-popup-locked{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:inherit}
#achievementsPage .achievement-image-badge:hover .achievement-image-popup,#achievementsPage .achievement-image-badge:focus-visible .achievement-image-popup{display:block}

/* HR working schedules. */
#workschedulesPage .work-schedule-list{display:grid;gap:14px;margin-top:20px}
#workschedulesPage .work-schedule-row{display:grid;gap:12px;padding:18px;border:1px solid var(--border,#dce2e8);border-radius:10px}
#workschedulesPage .work-schedule-days,#workschedulesPage .work-schedule-times{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
#workschedulesPage .work-schedule-days label,#workschedulesPage .work-schedule-times label{display:inline-flex;align-items:center;gap:5px}
#workschedulesPage input[type=time]{max-width:145px}


/* Manual Work Quality calculation output. */
.work-quality-calculation-log{margin:8px 0 12px;padding:10px 12px;max-height:220px;overflow-y:auto;background:var(--surface-muted,#f8fafc);border:1px solid var(--border,#dce2e8);border-radius:6px;color:var(--muted,#64748b);font:12px/1.7 monospace;white-space:pre-wrap}
.work-quality-calculation-log[hidden]{display:none}

/* One continuous badge grid: four independent badges per row when space allows. */
#achievementsPage .achievement-user-icons{display:grid;width:100%;max-width:calc(4 * 256px + 3 * 96px);grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,5vw,96px);justify-content:center;justify-items:center;margin-inline:auto}
#achievementsPage .achievement-user-icons .achievement-image-badge{width:100%;max-width:256px;min-width:0}
#achievementsPage .achievement-user-icons .achievement-image-badge>.achievement-image-artwork{width:min(256px,100%);height:auto;max-width:100%;object-fit:contain;margin-left:auto;margin-right:auto}
@media(min-width:1201px){#achievementsPage .achievement-user-icons .achievement-image-badge{width:256px}#achievementsPage .achievement-user-icons .achievement-image-badge>.achievement-image-artwork{width:256px;height:256px;max-width:none}}
@media(max-width:1200px){#achievementsPage .achievement-user-icons{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){#achievementsPage .achievement-user-icons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#achievementsPage .achievement-user-icons{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#achievementsPage .achievement-user-icons .achievement-image-badge{width:100%;max-width:256px}}
@media(max-width:480px){#achievementsPage .achievement-user-icons{grid-template-columns:minmax(0,256px)}}
#achievementsPage .achievements-panel.ui-card .ui-card-body{display:flex;flex-direction:column;min-height:0}
#achievementsPage .achievements-panel.ui-card #achievementsContent{flex:1;display:flex;align-items:center;justify-content:center}

/* Continuously flip locked question marks around the vertical axis while hovered. */
@keyframes achievement-question-spin{from{transform:perspective(600px) rotateY(0deg)}to{transform:perspective(600px) rotateY(360deg)}}
#achievementsPage .achievement-image-badge[data-state='off']:hover>.achievement-image-artwork{animation:achievement-question-spin 1.4s linear infinite;backface-visibility:visible}
@media(prefers-reduced-motion:reduce){#achievementsPage .achievement-image-badge[data-state='off']:hover>.achievement-image-artwork{animation:none}}

/* Keep the hover target fixed while the child artwork rotates in 3D. */
#achievementsPage .achievement-image-badge[data-state='off']>.achievement-image-artwork{pointer-events:none}

.timesheet-table .timesheet-entry-status { display:inline-flex; align-items:center; flex:0 0 auto; padding:3px 7px; border:0; border-radius:6px; background:#eaf6f0; color:#176d60; font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer; }
.timesheet-entry-status.expired { background:#fff1f0; color:#c62828; }

/* Keep the countdown immediately to the left of the task on the same line. */
.timesheet-task-content { display:flex; align-items:center; gap:8px; min-width:0; }
.timesheet-task-content > select { flex:1 1 auto; width:0; min-width:0; }
.timesheet-task-content > .timesheet-entry-status { flex:0 0 auto; margin:0; }

.timesheet-table .timesheet-time-button .timesheet-time-label { display:block; font-size:10px; font-weight:600; line-height:1.2; color:#505c69; letter-spacing:0; text-align:center; }

.timesheet-toolbar { display:flex; align-items:flex-start; justify-content:flex-start; gap:8px; padding-right:14px; }
.timesheet-toolbar .timesheet-features-link { flex:0 0 auto; }
.timesheet-policies { position:relative; margin-top:12px; max-width:min(480px,65%); font-size:13px; }
.timesheet-policies summary { cursor:pointer; padding:7px 12px; border:1px solid #c9d0da; border-radius:8px; background:#f8fafc; font-weight:600; color:#405161; list-style-position:inside; }
.timesheet-policies[open] summary { border-radius:8px 8px 0 0; }
.timesheet-policies-content { padding:10px 14px; border:1px solid #c9d0da; border-top:0; border-radius:0 0 8px 8px; background:#fff; color:#394957; line-height:1.55; }

.timesheet-table .timesheet-entry-status:focus-visible { outline:2px solid #176d60; outline-offset:2px; }
.timesheet-policies-content ol { margin:0; padding-left:22px; }
.timesheet-policies-content li { padding:6px 8px; border-radius:5px; }
.timesheet-policies-content li+li { margin-top:6px; }
.timesheet-policies-content .timesheet-policy-highlight { background:#fff1bd; outline:2px solid #e1ae3d; }

/* Make the sequential Task → Estimate → Enter workflow visible. */
.timesheet-active-row select:disabled, .timesheet-active-row .timesheet-time-button:disabled { opacity:.42; cursor:not-allowed; filter:grayscale(1); }

/* Collapsible calendar card (closed by default). */
#timesheetsPage > .timesheet-calendar-card { overflow: hidden; padding: 0; border-top: 0; }
.timesheet-calendar-card > summary { cursor: pointer; padding: 16px 20px; font-weight: 650; color: #304858; }
.timesheet-calendar-card > summary:focus-visible { outline: 2px solid #247e73; outline-offset: -3px; }
.timesheet-calendar-card > .timesheet-calendar { width: 100%; }