:root {
  color-scheme: light;
  --surface: #ffffff;
  --canvas: #f4f7f8;
  --ink: #19252b;
  --muted: #5b6b73;
  --line: #d7e1e5;
  --teal: #0b6f6b;
  --teal-strong: #075753;
  --rust: #b74e2e;
  --amber-soft: #fff4d7;
  --amber-line: #e8c36b;
  --danger: #a73737;
  --success: #207449;
  --shadow: 0 14px 34px rgba(25, 37, 43, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.auth-body {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px;
}

.auth-shell,
.mobile-auth-shell {
  display: grid;
  width: 100%;
  place-items: center;
}

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

.mobile-login-panel {
  width: min(100%, 380px);
  padding: 22px;
}

.login-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.product-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: var(--teal);
  color: white;
  font-weight: 700;
}

.login-heading h1,
.page-header h1,
.mobile-page-header h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.15;
}

.login-heading p,
.page-header p,
.mobile-page-header p {
  margin: 5px 0 0;
  color: var(--muted);
}

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

.login-form label {
  font-weight: 600;
}

.login-form input,
.login-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 8px 10px;
}

.login-form input:focus,
.login-form select:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(11, 111, 107, 0.18);
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.mobile-button-stack {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.primary-action,
.secondary-action,
.logout-form button {
  min-height: 40px;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 8px 14px;
  font-weight: 700;
}

.primary-action {
  background: var(--teal);
  color: white;
}

.primary-action:hover {
  background: var(--teal-strong);
}

.secondary-action {
  border-color: var(--line);
  background: #eef3f4;
  color: var(--ink);
}

.surface-link {
  display: inline-flex;
  margin-top: 18px;
  font-weight: 600;
}

.notice,
.validation-summary {
  border-radius: 6px;
  padding: 10px 12px;
  line-height: 1.35;
}

.notice-warning {
  border: 1px solid var(--amber-line);
  background: var(--amber-soft);
}

.notice-success {
  border: 1px solid #9ac7ad;
  background: #eaf7ef;
}

.validation-summary {
  color: var(--danger);
}

.validation-summary ul {
  margin: 0;
  padding-left: 20px;
}

.app-body {
  min-height: 100vh;
}

.pc-body-fixed {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.pc-body-fixed .pc-topbar {
  flex: 0 0 auto;
}

.pc-topbar,
.mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.pc-topbar {
  min-height: 64px;
  padding: 0 28px;
}

.mobile-topbar {
  min-height: 56px;
  padding: 0 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
}

.brand span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  background: var(--teal);
  color: white;
}

.pc-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pc-nav a,
.pc-nav span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 700;
  padding: 0 9px;
}

.mobile-tabs a {
  color: var(--ink);
  font-weight: 700;
}

.pc-nav a:hover {
  background: #eef3f4;
  text-decoration: none;
}

.pc-nav a:focus {
  outline: 3px solid rgba(11, 111, 107, 0.18);
  outline-offset: 1px;
}

.pc-nav a.is-active {
  background: var(--teal);
  color: white;
}

.pc-nav a.is-active:hover {
  background: var(--teal-strong);
}

.pc-nav .is-disabled {
  color: var(--muted);
  cursor: default;
}

.logout-form {
  margin: 0;
}

.logout-form button {
  border-color: var(--line);
  background: white;
  color: var(--ink);
}

.pc-main {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0;
}

.pc-main-wide {
  width: min(1880px, calc(100% - 32px));
}

.permit-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 0 10px;
}

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

.page-header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

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

.work-tile,
.admin-strip,
.health-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.work-tile {
  display: block;
  min-height: 132px;
  padding: 18px;
  color: var(--ink);
}

.work-tile:hover {
  border-color: var(--teal);
  text-decoration: none;
}

.work-tile h2,
.health-row h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.work-tile p,
.health-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 16px 18px;
}

.admin-strip a {
  border-radius: 6px;
  background: var(--teal);
  color: white;
  padding: 9px 12px;
  font-weight: 700;
}

.health-list {
  display: grid;
  gap: 12px;
}

.health-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  padding: 16px;
}

.health-row span {
  grid-column: 1 / -1;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.health-ok strong {
  color: var(--success);
}

.health-fail strong {
  color: var(--danger);
}

.mobile-body {
  padding-bottom: 72px;
  background: #edf4f4;
}

.mobile-main {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.mobile-page-header {
  display: grid;
  gap: 3px;
  border: 1px solid #cfe0df;
  border-radius: 8px;
  background: #fff;
  padding: 13px 14px;
  box-shadow: 0 8px 20px rgba(32, 65, 74, 0.06);
}

.mobile-page-header p {
  margin: 0;
  color: var(--teal-strong);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-page-header h1 {
  overflow: hidden;
  color: var(--ink);
  font-size: 1.34rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-page-header span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-home-hero {
  display: grid;
  gap: 14px;
  border: 1px solid #cfe0df;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff 0%, #edf8f7 100%);
  padding: 18px;
  box-shadow: 0 10px 24px rgba(32, 65, 74, 0.08);
}

.mobile-home-hero span,
.mobile-home-status span,
.mobile-action small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.mobile-home-hero h1 {
  margin: 5px 0 4px;
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1.15;
}

.mobile-home-hero p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.mobile-home-hero time {
  justify-self: start;
  border: 1px solid #d6e5e7;
  border-radius: 999px;
  background: #fff;
  color: var(--teal-strong);
  padding: 6px 10px;
  font-size: 0.86rem;
  font-weight: 900;
}

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

.mobile-home-status article {
  display: grid;
  gap: 3px;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.mobile-home-status strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-actions {
  display: grid;
  gap: 12px;
}

.mobile-action {
  display: grid;
  gap: 3px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 13px 16px;
  font-weight: 800;
  text-align: left;
}

.mobile-action:hover {
  border-color: var(--teal);
  text-decoration: none;
}

.mobile-action span {
  font-size: 1.05rem;
  font-weight: 900;
}

.mobile-action-primary {
  border-color: rgba(11, 111, 107, 0.28);
  background: var(--teal);
  color: #fff;
}

.mobile-action-primary small {
  color: rgba(255, 255, 255, 0.82);
}

.mobile-action:disabled {
  cursor: default;
  opacity: 1;
}

.mobile-admin-welcome {
  display: grid;
  gap: 12px;
}

.mobile-admin-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 16px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(32, 65, 74, 0.07);
}

.mobile-admin-card:hover {
  border-color: var(--teal);
  text-decoration: none;
}

.mobile-admin-card span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-admin-card strong {
  color: var(--ink);
  font-size: 2.15rem;
  line-height: 1;
}

.mobile-admin-card small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 780;
}

.mobile-admin-card.is-primary {
  border-color: rgba(11, 111, 107, 0.28);
  background: linear-gradient(145deg, #ffffff 0%, #e5f4f2 100%);
}

.mobile-admin-card.is-muted {
  background: #f9fbfb;
}

.mobile-admin-card[aria-disabled="true"] {
  cursor: default;
}

.mobile-tabs {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: 58px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -8px 20px rgba(32, 65, 74, 0.08);
}

.mobile-tabs a,
.mobile-tabs span {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 58px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.1;
  padding: 0 2px;
  text-align: center;
  text-decoration: none;
}

.mobile-tabs span {
  color: var(--muted);
}

.mobile-tabs a.is-active {
  background: #edf8f7;
  color: var(--teal-strong);
  font-weight: 900;
}

.mobile-tabs a.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18%;
  left: 18%;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--teal);
}

.mobile-filter-card,
.mobile-card,
.mobile-request-row,
.mobile-admin-request-row,
.mobile-clock-state,
.mobile-geo-card,
.mobile-clock-row,
.mobile-annual-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.mobile-filter-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.mobile-filter-card label,
.mobile-request-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.mobile-filter-card select,
.mobile-request-form input,
.mobile-request-form select,
.mobile-request-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
}

.mobile-request-form textarea {
  min-height: 82px;
  resize: vertical;
}

.mobile-request-metrics,
.mobile-clock-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.mobile-request-metrics div,
.mobile-clock-metrics div {
  display: grid;
  gap: 2px;
  border: 1px solid #d9e7e8;
  border-radius: 7px;
  background: #f8fbfb;
  padding: 8px;
}

.mobile-request-metrics dt,
.mobile-clock-metrics dt {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-request-metrics dd,
.mobile-clock-metrics dd {
  margin: 0;
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 900;
}

.mobile-card {
  display: grid;
  gap: 8px;
  padding: 13px;
}

.mobile-card > strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.mobile-card > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.mobile-card-header,
.mobile-section-title,
.mobile-geo-card header,
.mobile-clock-row header,
.mobile-request-row header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-card-header div,
.mobile-section-title,
.mobile-geo-card header div,
.mobile-clock-row header div,
.mobile-request-row header div {
  display: grid;
  min-width: 0;
}

.mobile-card-header strong,
.mobile-section-title strong,
.mobile-geo-card strong,
.mobile-clock-row strong,
.mobile-request-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-card-header span,
.mobile-section-title span,
.mobile-geo-card span,
.mobile-clock-row span,
.mobile-request-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-request-form {
  display: grid;
  gap: 10px;
}

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

.mobile-request-row {
  display: grid;
  gap: 9px;
  border-color: var(--reason-border);
  padding: 12px;
}

.mobile-request-row.is-pending {
  background: linear-gradient(90deg, rgba(255, 244, 215, 0.58), #fff 45%);
}

.mobile-request-row.is-approved {
  background: linear-gradient(90deg, rgba(234, 247, 239, 0.65), #fff 45%);
}

.mobile-reason-swatch {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid var(--reason-border);
  border-radius: 5px;
  background: var(--reason-bg);
}

.mobile-request-row p {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
}

.mobile-request-row dl,
.mobile-clock-row dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.mobile-request-row dl div,
.mobile-clock-row dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-request-row dt,
.mobile-clock-row dt {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-request-row dd,
.mobile-clock-row dd {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-request-row > small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.mobile-request-row form {
  display: grid;
}

.mobile-document-toolbar {
  display: grid;
  gap: 10px;
}

.mobile-document-upload-card {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid rgba(11, 111, 107, 0.26);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff 0%, #e8f4f2 100%);
  color: var(--ink);
  padding: 13px 14px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(32, 65, 74, 0.06);
}

.mobile-document-upload-card span {
  color: var(--teal-strong);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-document-upload-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-document-upload-card small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
}

.mobile-document-row {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.mobile-document-row header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.mobile-document-row header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.mobile-document-row header strong,
.mobile-document-row header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-document-row header strong {
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 900;
}

.mobile-document-row header span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.mobile-document-row header small {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #edf8f7;
  color: var(--teal-strong);
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 900;
}

.mobile-document-row dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin: 0;
}

.mobile-document-row dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-document-row dt {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-document-row dd {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-document-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 740;
  line-height: 1.32;
}

.mobile-document-row nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-document-row nav a {
  display: grid;
  min-height: 38px;
  place-items: center;
  font-size: 0.82rem;
  text-align: center;
  text-decoration: none;
}

.mobile-document-dialog {
  width: min(430px, calc(100% - 24px));
  max-height: calc(100vh - 28px);
  border: 0;
  background: transparent;
  padding: 0;
}

.mobile-document-dialog::backdrop {
  background: rgba(18, 33, 38, 0.46);
  backdrop-filter: blur(6px) saturate(120%);
}

.mobile-document-dialog-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 28px);
  overflow: hidden;
  border: 1px solid #c9d7db;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 26px 76px rgba(5, 22, 26, 0.34);
}

.mobile-document-dialog-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 13px 14px;
}

.mobile-document-dialog-panel > header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.mobile-document-dialog-panel > header strong,
.mobile-document-dialog-panel > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-document-dialog-panel > header strong {
  color: var(--teal-strong);
  font-size: 1rem;
  font-weight: 900;
}

.mobile-document-dialog-panel > header span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
}

.mobile-document-upload {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  background: #f1f6f6;
  padding: 13px;
}

.mobile-document-upload label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-document-upload input,
.mobile-document-upload select,
.mobile-document-upload textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
}

.mobile-document-upload textarea {
  min-height: 76px;
  resize: vertical;
}

.mobile-document-file-zone {
  position: relative;
  align-content: center;
  min-height: 106px;
  border: 1px dashed #9bb9bc;
  border-radius: 8px;
  background: #fbfdfd;
  cursor: pointer;
  justify-items: center;
  padding: 14px;
  text-align: center;
  text-transform: none;
}

.mobile-document-file-zone.is-camera {
  border-color: rgba(11, 111, 107, 0.42);
  background: #edf8f7;
}

.mobile-document-file-zone.is-dragging {
  border-color: var(--teal);
  background: #e8f4f2;
  outline: 3px solid rgba(11, 111, 107, 0.14);
}

.mobile-document-file-zone span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-document-file-zone strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--teal-strong);
  font-size: 0.94rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-document-file-zone small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.mobile-document-file-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.mobile-document-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-admin-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mobile-admin-metrics article {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.mobile-admin-metrics span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mobile-admin-metrics strong {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 950;
}

.mobile-admin-request-row {
  display: grid;
  gap: 10px;
  border-color: var(--reason-border);
  padding: 12px;
}

.mobile-admin-request-row.is-pending {
  background: linear-gradient(90deg, rgba(255, 244, 215, 0.66), #fff 46%);
}

.mobile-admin-request-row.is-approved {
  background: linear-gradient(90deg, rgba(230, 247, 239, 0.76), #fff 46%);
}

.mobile-admin-request-row.is-rejected {
  background: linear-gradient(90deg, rgba(255, 232, 226, 0.75), #fff 46%);
}

.mobile-admin-request-row header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.mobile-admin-request-row header div {
  display: grid;
  min-width: 0;
}

.mobile-admin-request-row header strong,
.mobile-admin-request-row header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-admin-request-row header strong {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 900;
}

.mobile-admin-request-row header small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.mobile-admin-request-row header b {
  border: 1px solid var(--reason-border);
  border-radius: 999px;
  background: var(--reason-bg);
  color: var(--reason-fg);
  padding: 5px 8px;
  font-size: 0.72rem;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-admin-request-row p {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 850;
}

.mobile-admin-request-row dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.mobile-admin-request-row dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-admin-request-row dt {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-admin-request-row dd {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-admin-request-note {
  display: grid;
  gap: 3px;
  border-left: 3px solid #d9e7e8;
  color: var(--muted);
  padding-left: 9px;
}

.mobile-admin-request-note span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-admin-request-note p,
.mobile-admin-request-note {
  font-size: 0.78rem;
  font-weight: 720;
}

.mobile-admin-request-form {
  display: grid;
  gap: 9px;
}

.mobile-admin-request-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.mobile-admin-request-form textarea {
  width: 100%;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
  resize: vertical;
}

.mobile-admin-request-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mobile-admin-request-actions .primary-action,
.mobile-admin-request-actions .secondary-action {
  min-height: 42px;
  padding: 8px 10px;
  font-size: 0.82rem;
}

.secondary-action.is-danger {
  border-color: #f0c8bd;
  background: #fff6f3;
  color: #9c321e;
}

.mobile-admin-query-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.mobile-admin-query-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.mobile-admin-query-card input,
.mobile-admin-query-card select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
}

.mobile-admin-query-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-admin-selected {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid #d9e7e8;
  border-radius: 7px;
  background: #f8fbfb;
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

button.mobile-admin-selected:hover,
button.mobile-admin-selected:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(11, 111, 107, 0.14);
}

.mobile-admin-selected span {
  color: var(--teal-strong);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-admin-selected strong,
.mobile-admin-selected small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-admin-selected strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 900;
}

.mobile-admin-selected small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
}

.mobile-admin-consult-actions {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-admin-consult-action {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid #c9dcdd;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 12px;
  text-decoration: none;
}

.mobile-admin-consult-action:hover {
  border-color: var(--teal);
  text-decoration: none;
}

.mobile-admin-consult-action strong,
.mobile-admin-consult-action small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-admin-consult-action strong {
  color: var(--teal-strong);
  font-size: 0.96rem;
  font-weight: 900;
}

.mobile-admin-consult-action small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.mobile-admin-consult-action.is-disabled {
  background: #f8fbfb;
  color: var(--muted);
  cursor: default;
  opacity: 0.58;
  pointer-events: none;
}

.mobile-admin-consult-actions.is-pending::after {
  content: "Pulse Aplicar para actualizar estos accesos.";
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 820;
  text-align: center;
}

.mobile-admin-employee-list {
  display: grid;
  gap: 8px;
}

.mobile-admin-employee-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
  text-decoration: none;
}

.mobile-admin-employee-card.is-selected {
  border-color: var(--teal);
  background: #edf8f7;
}

.mobile-admin-employee-card strong,
.mobile-admin-employee-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-admin-employee-card strong {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 900;
}

.mobile-admin-employee-card span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.mobile-admin-inline-link {
  justify-self: start;
  color: var(--teal-strong);
  font-size: 0.8rem;
  font-weight: 850;
}

.mobile-admin-worktime-day {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.mobile-admin-worktime-day.is-open {
  border-color: #e3bd61;
  background: #fff8e8;
}

.mobile-admin-worktime-day > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-admin-worktime-day > header div {
  display: grid;
  min-width: 0;
}

.mobile-admin-worktime-day > header strong,
.mobile-admin-worktime-day > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-admin-worktime-day > header strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
}

.mobile-admin-worktime-day > header span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
}

.mobile-admin-worktime-day > header small {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #edf4f2;
  color: var(--teal-strong);
  padding: 4px 8px;
  font-size: 0.76rem;
  font-weight: 900;
}

.mobile-admin-context-tags,
.mobile-admin-worktime-entries {
  display: grid;
  gap: 8px;
}

.mobile-admin-context-tags section {
  display: grid;
  gap: 3px;
  border: 1px solid var(--context-border);
  border-radius: 7px;
  background: var(--context-bg);
  color: var(--context-fg);
  padding: 9px;
}

.mobile-admin-context-tags span {
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-admin-context-tags strong {
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.15;
}

.mobile-admin-context-tags small,
.mobile-admin-context-tags p {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.25;
}

.mobile-admin-worktime-entry {
  display: grid;
  gap: 8px;
  border-top: 1px solid #e3eeee;
  padding-top: 9px;
}

.mobile-admin-worktime-entry.is-open {
  color: #8b4b12;
}

.mobile-admin-worktime-entry header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
}

.mobile-admin-worktime-entry header span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-admin-worktime-entry header strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-admin-worktime-entry header small {
  color: var(--teal-strong);
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.mobile-admin-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-admin-location-grid section {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-admin-location-grid small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
  text-transform: uppercase;
}

.mobile-admin-location-grid a,
.mobile-admin-location-grid span {
  overflow-wrap: anywhere;
  color: var(--teal-strong);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.2;
}

.mobile-admin-location-grid span {
  color: var(--muted);
}

.mobile-admin-worktime-entry p,
.mobile-admin-worktime-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.3;
}

.mobile-employee-dialog {
  width: min(420px, calc(100% - 24px));
}

.mobile-employee-dialog::backdrop {
  background: rgba(25, 37, 43, 0.38);
  backdrop-filter: blur(4px);
}

.mobile-employee-dialog .employee-dialog-panel {
  max-height: min(78vh, 680px);
  overflow: hidden;
}

.mobile-employee-dialog .employee-dialog-panel header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-employee-dialog .employee-dialog-panel header span {
  color: var(--teal-strong);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-employee-dialog .employee-search-row {
  grid-template-columns: minmax(0, 1fr) 88px;
}

.mobile-employee-dialog .employee-search-row .primary-action {
  min-height: 40px;
  padding: 8px 10px;
}

.mobile-employee-dialog .employee-results {
  max-height: min(52vh, 460px);
}

.mobile-employee-dialog .employee-result {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 3px 8px;
}

.mobile-employee-dialog .employee-result small {
  grid-column: 2;
}

.mobile-employee-dialog .employee-result.is-selected {
  border-color: var(--teal);
  background: #edf8f7;
}

.mobile-clock-shell {
  display: grid;
  gap: 10px;
}

.mobile-clock-state {
  display: grid;
  gap: 4px;
  padding: 15px;
}

.mobile-clock-state span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-clock-state strong {
  color: var(--ink);
  font-size: 1.24rem;
  font-weight: 900;
}

.mobile-clock-state small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.mobile-clock-state.is-open {
  border-color: #e3bd61;
  background: #fff8e8;
}

.mobile-geo-card {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.mobile-geo-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.mobile-geo-card.is-ready {
  border-color: #9ac7ad;
  background: #edf8f1;
}

.mobile-geo-card.is-error {
  border-color: #e3bd61;
  background: #fff8e8;
}

.mobile-geo-card.is-working {
  border-color: #b6d6d1;
  background: #f2fbfa;
}

.mobile-clock-action {
  display: grid;
}

.mobile-clock-punch {
  min-height: 76px;
  border: 0;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 14px 26px rgba(11, 111, 107, 0.2);
}

.mobile-clock-punch.is-exit {
  background: var(--rust);
  box-shadow: 0 14px 26px rgba(183, 78, 46, 0.18);
}

.mobile-clock-punch:disabled {
  cursor: default;
  opacity: 0.46;
}

.mobile-clock-row {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.mobile-clock-row.is-open {
  border-color: #e3bd61;
  background: #fff8e8;
}

.mobile-clock-row header small {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #edf4f2;
  color: var(--teal-strong);
  padding: 4px 8px;
  font-size: 0.76rem;
  font-weight: 900;
}

.mobile-clock-row.is-open header small {
  background: #ffecc0;
  color: #8b4b12;
}

.mobile-clock-row a {
  font-weight: 850;
}

.mobile-clock-events {
  display: grid;
  gap: 0;
}

.mobile-clock-event {
  display: grid;
  gap: 5px;
  padding: 9px 0;
  border-top: 1px solid #e3eeee;
}

.mobile-clock-event:first-child {
  border-top: 0;
  padding-top: 2px;
}

.mobile-clock-event:last-child {
  padding-bottom: 0;
}

.mobile-clock-event-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mobile-clock-event-main span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-clock-event-main strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  white-space: nowrap;
}

.mobile-clock-location {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-clock-location small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
  text-transform: uppercase;
}

.mobile-clock-location a,
.mobile-clock-location span {
  color: var(--teal-strong);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.mobile-clock-location span {
  color: var(--muted);
}

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

.mobile-annual-section {
  display: grid;
  gap: 8px;
}

.mobile-section-card,
.mobile-section-bar {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.mobile-section-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(32, 65, 74, 0.06);
}

.mobile-section-card span,
.mobile-section-bar span {
  color: var(--teal-strong);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-section-card strong,
.mobile-section-bar strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-section-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-section-panel {
  display: grid;
  gap: 8px;
}

.mobile-section-card[hidden],
.mobile-section-panel[hidden] {
  display: none;
}

.mobile-section-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  border-color: #c9dcdd;
  background: #edf4f2;
  padding: 10px 12px;
}

.mobile-section-bar span {
  grid-column: 1;
}

.mobile-section-bar strong {
  grid-column: 1;
  font-size: 0.94rem;
}

.mobile-section-bar b {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--teal-strong);
  font-size: 0.95rem;
  line-height: 1;
}

.mobile-annual-board {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  gap: 10px;
  overflow: visible;
}

.mobile-annual-page .annual-month {
  min-height: 246px;
}

.mobile-annual-page .annual-day {
  min-height: 29px;
}

.mobile-annual-summary {
  overflow: visible;
}

.mobile-section-panel .mobile-annual-summary > header {
  display: none;
}

.mobile-annual-summary .annual-summary-list {
  max-height: none;
  overflow: visible;
}

.mobile-day-dialog {
  width: min(360px, calc(100% - 28px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 22px 54px rgba(25, 37, 43, 0.24);
}

.mobile-day-dialog::backdrop {
  background: rgba(25, 37, 43, 0.34);
  backdrop-filter: blur(3px);
}

.mobile-day-dialog-panel {
  display: grid;
  max-height: min(78vh, 620px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.mobile-day-dialog-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #edf4f2;
  padding: 11px 12px;
}

.mobile-day-dialog-panel header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-day-dialog-panel header span {
  color: var(--teal-strong);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-day-dialog-panel header strong {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 900;
}

.mobile-day-dialog-panel header button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #cddfe1;
  border-radius: 6px;
  background: white;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-day-dialog-body {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding: 12px;
}

.mobile-day-detail-row {
  display: grid;
  gap: 3px;
  border: 1px solid var(--detail-border);
  border-radius: 7px;
  background: var(--detail-bg);
  color: var(--detail-fg);
  padding: 10px;
}

.mobile-day-detail-row span {
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-day-detail-row strong {
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.15;
}

.mobile-day-detail-row small,
.mobile-day-detail-row p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.25;
}

.mobile-day-detail-row p {
  opacity: 0.9;
}

.permit-page-header {
  gap: 16px;
  flex: 0 0 auto;
  margin-bottom: 0;
}

.permit-page-header h1 {
  font-size: 1.28rem;
}

.permit-page-header p {
  margin-top: 2px;
  font-size: 0.9rem;
}

.permit-page-header .secondary-action {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
}

.page-header .help-launcher {
  border-color: #b6d6d1;
  background: #e6f4f2;
  color: var(--teal-strong);
}

.permit-toolbar {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
}

.permit-filter-company,
.permit-filter-calendar,
.permit-filter-department,
.permit-filter-group {
  grid-column: span 2;
}

.permit-filter-month,
.permit-filter-year,
.segmented-months,
.permit-check,
.permit-toolbar .primary-action {
  grid-column: span 1;
}

.permit-search {
  grid-column: span 4;
}

.permit-toolbar label,
.segmented-months {
  display: grid;
  gap: 3px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.permit-toolbar input,
.permit-toolbar select {
  min-height: 34px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 7px 9px;
}

.permit-toolbar input:focus,
.permit-toolbar select:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(11, 111, 107, 0.16);
}

.permit-search {
  min-width: 220px;
}

.permit-check {
  grid-auto-flow: column;
  grid-template-columns: auto auto;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  color: var(--ink);
}

.permit-check input {
  min-height: auto;
  width: 17px;
  height: 17px;
}

.segmented-months {
  grid-template-columns: repeat(3, 38px);
  border: 0;
  padding: 0;
}

.segmented-months legend {
  grid-column: 1 / -1;
  padding: 0;
}

.segmented-months input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-months label {
  display: grid;
  min-height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  background: #eef3f4;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.segmented-months label:first-of-type {
  border-radius: 6px 0 0 6px;
}

.segmented-months label:last-of-type {
  border-radius: 0 6px 6px 0;
}

.segmented-months input:checked + label {
  border-color: var(--teal);
  background: var(--teal);
  color: white;
}

.permit-legend {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.permit-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  border: 1px solid var(--legend-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  padding: 3px 7px;
  font-size: 0.78rem;
  font-weight: 800;
}

.permit-legend-item i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--legend-border);
  border-radius: 4px;
  background: var(--legend-bg);
}

.permit-legend-item small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.permit-calendar-page {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.permit-grid-shell {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.permit-grid {
  --employee-col: 284px;
  --day-width: 31px;
  display: grid;
  grid-template-columns: var(--employee-col) max-content;
  min-width: calc(var(--employee-col) + (var(--day-count) * var(--day-width)));
  align-items: stretch;
}

.permit-employee-header,
.permit-timeline-header {
  position: sticky;
  top: 0;
  z-index: 8;
  border-bottom: 1px solid var(--line);
  background: #edf4f2;
}

.permit-employee-header {
  left: 0;
  z-index: 10;
  display: flex;
  align-items: end;
  min-height: 58px;
  border-right: 1px solid var(--line);
  padding: 10px 12px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.permit-timeline-header {
  display: grid;
  grid-template-rows: 27px 31px;
}

.permit-month-row,
.permit-day-row,
.permit-row {
  display: grid;
  grid-template-columns: repeat(var(--day-count), var(--day-width));
}

.permit-month-label {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.permit-month-label:nth-child(odd) {
  background: #dfeeea;
}

.permit-month-label:nth-child(even) {
  background: #e8f0dc;
}

.permit-month-label + .permit-month-label {
  border-left: 2px solid #b7cdd0;
}

.permit-day-header {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  min-width: var(--day-width);
  border-right: 1px solid var(--line);
  background: #f8fbfb;
  color: var(--ink);
  line-height: 1;
}

.permit-day-header strong {
  font-size: 0.78rem;
}

.permit-day-header span {
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 800;
}

.permit-day-header.is-weekend {
  background: #fff4f1;
  color: var(--danger);
}

.permit-day-header.is-today {
  box-shadow: inset 0 -3px 0 var(--rust);
}

.permit-employee-cell {
  position: sticky;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  min-height: calc((var(--lanes, 1) * 24px) + 8px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 0;
}

.permit-employee-link {
  display: grid;
  align-content: center;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  padding: 5px 12px;
}

.permit-employee-link:hover {
  background: #edf4f2;
  text-decoration: none;
}

.permit-employee-link:focus {
  outline: 3px solid rgba(11, 111, 107, 0.18);
  outline-offset: -3px;
}

.permit-employee-link strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permit-employee-link span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permit-row {
  position: relative;
  grid-template-rows: repeat(var(--lanes), 24px);
  min-height: calc((var(--lanes) * 24px) + 8px);
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  background: #fbfdfd;
}

.permit-day-back {
  z-index: 1;
  min-width: var(--day-width);
  border-right: 1px solid #e6edef;
  background: transparent;
}

.permit-day-back.is-weekend {
  background: #fff7f5;
}

.permit-day-back.is-holiday {
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.18) 25%, transparent 25%, transparent 50%, rgba(220, 38, 38, 0.18) 50%, rgba(220, 38, 38, 0.18) 75%, transparent 75%),
    #fff7f5;
  background-size: 8px 8px;
}

.permit-bar {
  z-index: 3;
  align-self: center;
  min-width: 0;
  height: 19px;
  margin: 0 2px;
  overflow: hidden;
  border: 1px solid var(--bar-border);
  border-radius: 5px;
  background: var(--bar-bg);
  color: var(--bar-fg);
  box-shadow: 0 1px 4px rgba(25, 37, 43, 0.18);
}

.permit-bar span {
  display: block;
  overflow: hidden;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permit-bar.is-pending {
  opacity: 0.72;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.28) 6px,
    transparent 6px,
    transparent 12px
  );
}

.permit-empty {
  grid-column: 1 / -1;
  padding: 22px;
  color: var(--muted);
}

.annual-user-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 0;
}

.monthly-user-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 0;
}

.annual-user-header {
  gap: 16px;
  flex: 0 0 auto;
  margin-bottom: 0;
}

.monthly-user-header {
  gap: 16px;
  flex: 0 0 auto;
  margin-bottom: 0;
}

.annual-user-header h1 {
  font-size: 1.24rem;
}

.monthly-user-header h1 {
  font-size: 1.24rem;
}

.annual-user-header p {
  margin-top: 2px;
  font-size: 0.88rem;
}

.monthly-user-header p {
  margin-top: 2px;
  font-size: 0.88rem;
}

.annual-user-header .secondary-action {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
}

.monthly-user-header .secondary-action {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
}

.annual-user-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(110px, 130px) minmax(150px, 190px) auto;
  gap: 8px;
  align-items: end;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
}

.monthly-user-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(110px, 130px) minmax(130px, 160px) minmax(150px, 190px) auto;
  gap: 8px;
  align-items: end;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
}

.annual-user-toolbar label,
.monthly-user-toolbar label,
.annual-employee-picker {
  display: grid;
  gap: 3px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.annual-user-toolbar select {
  min-height: 34px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 7px 9px;
}

.monthly-user-toolbar select {
  min-height: 34px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 7px 9px;
}

.annual-user-toolbar select:focus,
.monthly-user-toolbar select:focus,
.employee-search-row input:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(11, 111, 107, 0.16);
}

.annual-employee-picker {
  grid-template-columns: minmax(0, 1fr) auto;
}

.annual-employee-picker > span {
  grid-column: 1 / -1;
}

.annual-employee-box {
  display: grid;
  align-content: center;
  min-height: 34px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbfb;
  padding: 4px 9px;
}

.annual-employee-box strong,
.annual-employee-box small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.annual-employee-box strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.08;
}

.annual-employee-box small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.12;
}

.annual-user-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.monthly-user-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.annual-calendar-board,
.annual-summary {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.annual-calendar-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 7px;
  overflow: hidden;
  padding: 8px;
}

.monthly-calendar-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.monthly-calendar-nav {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #edf4f2;
  padding: 7px 8px;
}

.monthly-calendar-nav strong {
  overflow: hidden;
  color: var(--teal-strong);
  font-size: 0.98rem;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.monthly-calendar-nav .secondary-action {
  display: grid;
  min-height: 30px;
  place-items: center;
  padding: 0;
}

.monthly-weekdays,
.monthly-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.monthly-weekdays span {
  display: grid;
  min-height: 26px;
  place-items: center;
  border-right: 1px solid #dfe8eb;
  border-bottom: 1px solid #dfe8eb;
  background: #f8fbfb;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.monthly-weekdays span:nth-child(6),
.monthly-weekdays span:nth-child(7) {
  color: var(--danger);
}

.monthly-days {
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}

.monthly-day {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #e5ecef;
  border-bottom: 1px solid #e5ecef;
  background: white;
  color: var(--ink);
  padding: 7px;
}

.monthly-day header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.monthly-day b {
  font-size: 1rem;
  line-height: 1;
}

.monthly-day header span {
  border-radius: 5px;
  background: #eef3f4;
  color: var(--ink);
  padding: 2px 5px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.monthly-day strong,
.monthly-day em,
.monthly-day small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monthly-day strong {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 5px;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.monthly-day em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.monthly-day small {
  color: inherit;
  font-size: 0.68rem;
  line-height: 1.18;
}

.monthly-day.is-outside {
  background: #f1f5f6;
  color: #92a1a8;
}

.monthly-day.is-weekend:not(.has-absence) {
  background: #fff7f5;
  color: var(--danger);
}

.monthly-day.is-holiday:not(.has-absence) {
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.16) 25%, transparent 25%, transparent 50%, rgba(220, 38, 38, 0.16) 50%, rgba(220, 38, 38, 0.16) 75%, transparent 75%),
    #fff7f5;
  background-size: 8px 8px;
  color: var(--danger);
}

.monthly-day.has-absence {
  border: 1px solid var(--month-day-border);
  background: var(--month-day-bg);
  color: var(--month-day-fg);
}

.monthly-day.has-absence strong {
  border-color: var(--month-day-border);
  background: rgba(255, 255, 255, 0.24);
  color: var(--month-day-fg);
}

.monthly-day.has-multiple::after {
  content: "";
  justify-self: end;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.monthly-day.is-today {
  outline: 2px solid var(--rust);
  outline-offset: -2px;
}

.monthly-summary-metrics {
  grid-template-columns: 1fr 1fr;
}

.monthly-summary-subtitle {
  flex: 0 0 auto;
  padding: 0 10px 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.monthly-worktime-link {
  display: inline-grid;
  min-width: 34px;
  min-height: 22px;
  place-items: center;
  border: 1px solid #c8d8dc;
  border-radius: 5px;
  background: #eef3f4;
  color: var(--ink);
  padding: 1px 5px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.monthly-worktime-link:hover,
.monthly-worktime-link:focus {
  border-color: var(--teal);
  background: #dff0ed;
  text-decoration: none;
}

.filter-pending-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: block;
  background: rgba(18, 33, 38, 0.34);
  backdrop-filter: blur(6px) saturate(118%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.filter-pending-sheet.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.filter-pending-sheet-message {
  position: absolute;
  top: 16px;
  left: 50%;
  display: grid;
  min-width: min(420px, calc(100vw - 40px));
  transform: translateX(-50%);
  gap: 2px;
  border: 1px solid rgba(177, 208, 211, 0.86);
  border-radius: 8px;
  background: rgba(248, 252, 252, 0.88);
  box-shadow: 0 16px 44px rgba(9, 24, 28, 0.22);
  color: var(--ink);
  padding: 11px 16px;
  text-align: center;
}

.filter-pending-sheet-message strong {
  color: var(--teal-strong);
  font-size: 0.88rem;
  font-weight: 900;
}

.filter-pending-sheet-message span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.worktime-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: block;
  background: rgba(18, 33, 38, 0.46);
  backdrop-filter: blur(6px) saturate(120%);
}

.worktime-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 81;
  display: grid;
  place-items: center;
  padding: 28px;
  pointer-events: none;
}

.worktime-editor-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  min-height: min(520px, calc(100vh - 56px));
  overflow: hidden;
  border: 1px solid #c9d7db;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(5, 22, 26, 0.36);
  pointer-events: auto;
}

.worktime-editor-modal.is-loading .worktime-editor-panel::after {
  content: "Cargando...";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(247, 251, 251, 0.68);
  color: var(--teal-strong);
  font-size: 0.9rem;
  font-weight: 900;
  backdrop-filter: blur(3px);
}

.worktime-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 14px 16px;
}

.worktime-editor-header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.worktime-editor-header strong {
  overflow: hidden;
  color: var(--teal-strong);
  font-size: 1.08rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worktime-editor-header span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worktime-editor-close {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef3f4;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none;
}

.worktime-editor-close:hover,
.worktime-editor-close:focus {
  border-color: var(--teal);
  background: #dff0ed;
  text-decoration: none;
}

.worktime-editor-body {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 390px);
  gap: 14px;
  min-height: 0;
  overflow: auto;
  background: #f1f6f6;
  padding: 14px;
}

.worktime-editor-body.is-list-only {
  grid-template-columns: minmax(0, 1fr);
}

.worktime-editor-list-panel,
.worktime-editor-form {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.worktime-editor-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.worktime-editor-list-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #fbfdfd;
  padding: 10px 12px;
}

.worktime-editor-list-panel > header strong,
.worktime-editor-form-title strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.worktime-editor-list-panel > header .secondary-action {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.74rem;
}

.worktime-editor-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  padding: 18px;
}

.worktime-editor-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.worktime-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  border: 1px solid #dce8ea;
  border-radius: 7px;
  background: #fbfdfd;
  padding: 9px 10px;
}

.worktime-editor-row.is-open {
  border-color: #e3bd61;
  background: #fff8e8;
}

.worktime-editor-row strong,
.worktime-editor-row small,
.worktime-editor-row p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.worktime-editor-row strong {
  display: block;
  font-size: 0.88rem;
  line-height: 1.2;
  white-space: nowrap;
}

.worktime-editor-row small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.worktime-editor-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.worktime-editor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.worktime-editor-actions form {
  margin: 0;
}

.worktime-editor-actions .secondary-action,
.worktime-editor-actions .danger-action {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px;
  font-size: 0.72rem;
}

.worktime-editor-muted {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.worktime-editor-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.worktime-editor-form-title,
.worktime-editor-notes,
.worktime-editor-form-actions {
  grid-column: 1 / -1;
}

.worktime-editor-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.worktime-editor-form-title a {
  font-size: 0.78rem;
  font-weight: 800;
}

.worktime-editor-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.worktime-editor-form input,
.worktime-editor-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 8px 9px;
  font: inherit;
}

.worktime-editor-form textarea {
  min-height: 126px;
  resize: vertical;
}

.worktime-editor-form input:focus,
.worktime-editor-form textarea:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(11, 111, 107, 0.16);
}

.worktime-editor-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.worktime-editor-form-actions .secondary-action {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.monthly-worktime-panel {
  display: grid;
  gap: 8px;
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding: 10px;
}

.monthly-worktime-panel > header {
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
}

.monthly-worktime-panel > header strong {
  font-size: 0.92rem;
  font-weight: 900;
}

.monthly-worktime-panel > header span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.monthly-worktime-empty {
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  padding: 10px;
  font-size: 0.78rem;
  font-weight: 800;
}

.monthly-worktime-list {
  display: grid;
  gap: 6px;
  max-height: 190px;
  overflow: auto;
}

.monthly-worktime-row {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfdfd;
  padding: 7px;
}

.monthly-worktime-row.is-open {
  border-color: #e8c36b;
  background: #fff8e8;
}

.monthly-worktime-row strong,
.monthly-worktime-row small,
.monthly-worktime-row p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.monthly-worktime-row strong {
  display: block;
  font-size: 0.78rem;
  line-height: 1.15;
  white-space: nowrap;
}

.monthly-worktime-row small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.monthly-worktime-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.monthly-worktime-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.monthly-worktime-actions form {
  margin: 0;
}

.monthly-worktime-actions .secondary-action,
.monthly-worktime-actions .danger-action {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px;
  font-size: 0.72rem;
}

.danger-action {
  border-color: #e4b4b4;
  background: #fff0f0;
  color: #8d2424;
}

.monthly-worktime-muted {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.monthly-worktime-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fbfb;
  padding: 8px;
}

.monthly-worktime-form-title,
.monthly-worktime-notes,
.monthly-worktime-form-actions {
  grid-column: 1 / -1;
}

.monthly-worktime-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
}

.monthly-worktime-form-title a {
  font-weight: 800;
}

.monthly-worktime-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.monthly-worktime-form-actions .secondary-action {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.monthly-worktime-add {
  display: grid;
  place-items: center;
  min-height: 34px;
  text-decoration: none;
}

.monthly-worktime-form label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.monthly-worktime-form input,
.monthly-worktime-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 6px 8px;
  font: inherit;
}

.monthly-worktime-form textarea {
  resize: vertical;
}

.monthly-worktime-form input:focus,
.monthly-worktime-form textarea:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(11, 111, 107, 0.16);
}

.annual-month {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 1px solid #dfe8eb;
  border-radius: 7px;
  background: #fbfdfd;
  overflow: hidden;
}

.annual-month header {
  border-bottom: 1px solid var(--line);
  background: #edf4f2;
  color: var(--teal-strong);
  padding: 3px 6px;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.annual-weekdays,
.annual-month-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.annual-weekdays span {
  display: grid;
  min-height: 18px;
  place-items: center;
  border-bottom: 1px solid #edf1f3;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
}

.annual-month-days {
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}

.annual-day {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  min-width: 0;
  min-height: 18px;
  border-right: 1px solid #edf1f3;
  border-bottom: 1px solid #edf1f3;
  background: white;
  color: var(--ink);
  line-height: 1;
  overflow: hidden;
}

button.annual-day {
  width: 100%;
  border: 0;
  border-right: 1px solid #edf1f3;
  border-bottom: 1px solid #edf1f3;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: center;
}

button.annual-day:focus-visible {
  z-index: 2;
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.annual-day-empty {
  background: #f3f7f8;
}

.annual-day b {
  justify-self: center;
  font-size: 0.68rem;
  line-height: 1;
}

.annual-day small {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 0 1px 1px;
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.annual-day.is-weekend {
  background: #fff7f5;
  color: var(--danger);
}

.annual-day.is-holiday {
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.16) 25%, transparent 25%, transparent 50%, rgba(220, 38, 38, 0.16) 50%, rgba(220, 38, 38, 0.16) 75%, transparent 75%),
    #fff7f5;
  background-size: 8px 8px;
  color: var(--danger);
}

.annual-day.has-absence {
  border: 1px solid var(--day-border);
  background: var(--day-bg);
  color: var(--day-fg);
  box-shadow: inset 0 -2px 0 var(--day-border);
}

.annual-day.has-multiple::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.annual-day.is-today {
  outline: 2px solid var(--rust);
  outline-offset: -2px;
}

.annual-summary {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.annual-summary header {
  display: grid;
  gap: 2px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: #edf4f2;
  padding: 9px 10px;
}

.annual-summary header strong {
  font-size: 0.92rem;
}

.annual-summary header span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.annual-summary-empty {
  padding: 14px 10px;
  color: var(--muted);
}

.annual-summary-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 10px;
}

.annual-summary-metrics div {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fbfb;
  padding: 7px;
}

.annual-summary-metrics dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.annual-summary-metrics dd {
  margin: 1px 0 0;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 900;
}

.annual-summary-list {
  display: grid;
  gap: 5px;
  min-height: 0;
  overflow: auto;
  padding: 0 10px 8px;
}

.annual-summary-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 33px;
  border: 1px solid var(--reason-border);
  border-radius: 7px;
  background: #ffffff;
  padding: 4px 7px;
}

.annual-reason-swatch {
  width: 15px;
  height: 15px;
  border: 1px solid var(--reason-border);
  border-radius: 4px;
  background: var(--reason-bg);
}

.annual-reason-text {
  display: grid;
  min-width: 0;
}

.annual-reason-text strong,
.annual-reason-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.annual-reason-text strong {
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.05;
}

.annual-reason-text small {
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.05;
}

.annual-reason-days {
  display: grid;
  min-width: 32px;
  min-height: 24px;
  place-items: center;
  border-radius: 5px;
  background: var(--reason-bg);
  color: var(--reason-fg);
  font-size: 0.8rem;
  font-weight: 900;
}

.annual-permission-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: #f8fbfb;
  padding: 10px;
  font-weight: 900;
}

.annual-permission-total.is-over {
  color: var(--danger);
}

.employee-dialog {
  width: min(720px, calc(100% - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

.employee-dialog::backdrop {
  background: rgba(25, 37, 43, 0.35);
}

.employee-dialog-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.employee-dialog-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.employee-dialog-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef3f4;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
}

.employee-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.employee-search-row input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}

.employee-results {
  display: grid;
  gap: 6px;
  max-height: min(460px, 65vh);
  overflow: auto;
}

.employee-result {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 120px;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfdfd;
  color: var(--ink);
  padding: 6px 9px;
  text-align: left;
}

.employee-result:hover,
.employee-result:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(11, 111, 107, 0.14);
}

.employee-result strong,
.employee-result span,
.employee-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-result span {
  font-weight: 700;
}

.employee-result small,
.employee-result-empty {
  color: var(--muted);
  font-size: 0.78rem;
}

.employee-result-empty {
  padding: 12px 4px;
}

.summaries-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  height: calc(100vh - 64px);
  overflow: hidden;
  padding: 10px 0;
}

.summaries-header {
  align-items: center;
  margin: 0;
  padding: 0 4px;
}

.summaries-header h1 {
  font-size: 1.28rem;
}

.summaries-header p {
  margin-top: 2px;
}

.summaries-toolbar {
  display: grid;
  grid-template-columns: 110px minmax(170px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 8px 10px;
}

.summaries-toolbar label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.summaries-toolbar select {
  min-height: 36px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  padding: 6px 8px;
  font: inherit;
}

.summaries-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  color: var(--muted);
  font-weight: 800;
}

.summaries-grid-shell {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.summaries-grid {
  display: grid;
  min-width: max-content;
}

.summaries-cell {
  display: grid;
  align-items: center;
  min-height: 34px;
  border-right: 1px solid #d9e2e5;
  border-bottom: 1px solid #d9e2e5;
  padding: 4px 8px;
  font-weight: 500;
}

.summaries-heading {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 42px;
  font-size: 0.76rem;
  font-weight: 700;
}

.summaries-employee-heading {
  left: 0;
  z-index: 7;
  background: #53636b;
  color: #ffffff;
}

.summaries-reason-heading {
  justify-items: center;
  border-color: var(--summary-reason-border);
  background: var(--summary-reason-bg);
  color: var(--summary-reason-fg);
  text-align: center;
}

.summaries-reason-heading strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.summaries-reason-heading small {
  font-size: 0.58rem;
  font-weight: 600;
  opacity: 0.82;
}

.summaries-total-heading {
  justify-items: center;
  background: #1f2933;
  color: #ffffff;
  text-align: center;
}

.summaries-employee-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #ffffff;
}

.summaries-employee-cell.is-alt,
.summaries-value-cell.is-alt {
  background: #f3f7f7;
}

.summaries-employee-cell a {
  display: grid;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.summaries-employee-cell a:hover strong {
  color: var(--teal);
}

.summaries-employee-cell span {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.summaries-employee-cell strong,
.summaries-employee-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summaries-employee-cell strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.1;
}

.summaries-employee-cell small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 500;
}

.summaries-employee-cell em {
  flex: 0 0 auto;
  border: 1px solid #e9a6a6;
  border-radius: 5px;
  background: #fff1f1;
  color: #9b1c1c;
  padding: 1px 5px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.summaries-value-cell {
  justify-items: center;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
}

.summaries-value-cell.is-over {
  color: var(--danger);
}

.summaries-total-cell {
  background: #f8fbfb;
}

.fichajes-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  height: calc(100vh - 64px);
  overflow: hidden;
  padding: 10px 0;
}

.fichajes-header {
  align-items: center;
  margin: 0;
  padding: 0 4px;
}

.fichajes-header h1 {
  font-size: 1.28rem;
}

.fichajes-header p {
  margin-top: 2px;
  font-size: 0.86rem;
}

.fichajes-header .primary-action,
.fichajes-header .secondary-action {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
}

.fichajes-toolbar {
  display: grid;
  grid-template-columns: minmax(340px, 1.4fr) 100px 130px minmax(145px, 1fr) minmax(145px, 1fr) minmax(145px, 1fr) auto;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 8px 10px;
}

.fichajes-toolbar label,
.fichajes-employee-picker {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.fichajes-toolbar select {
  min-height: 36px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  padding: 6px 8px;
}

.fichajes-toolbar select:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(11, 111, 107, 0.16);
}

.fichajes-employee-picker {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.fichajes-employee-picker > span {
  grid-column: 1 / -1;
}

.fichajes-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.fichajes-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.fichajes-month-nav {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #edf4f2;
  padding: 7px 8px;
}

.fichajes-month-nav strong {
  overflow: hidden;
  color: var(--teal-strong);
  font-size: 0.98rem;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.fichajes-month-nav .secondary-action {
  display: grid;
  min-height: 30px;
  place-items: center;
  padding: 0;
}

.fichajes-empty {
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 220px;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.fichajes-empty strong {
  color: var(--muted);
}

.fichajes-empty small {
  max-width: 360px;
  font-size: 0.78rem;
}

.fichajes-empty .primary-action {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
}

.fichajes-table-shell {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.fichajes-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  table-layout: fixed;
}

.fichajes-table th:nth-child(1) {
  width: 8%;
}

.fichajes-table th:nth-child(2) {
  width: 22%;
}

.fichajes-table th:nth-child(3) {
  width: 7%;
}

.fichajes-table th:nth-child(4) {
  width: 7%;
}

.fichajes-table th:nth-child(5) {
  width: 7%;
}

.fichajes-table th:nth-child(6) {
  width: 7%;
}

.fichajes-table th:nth-child(7),
.fichajes-table th:nth-child(8) {
  width: 11%;
}

.fichajes-table th:nth-child(9) {
  width: 9%;
}

.fichajes-table th:nth-child(10) {
  width: 7%;
}

.fichajes-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  overflow: hidden;
  border-right: 1px solid #d9e2e5;
  border-bottom: 1px solid #cbd8dc;
  background: #53636b;
  color: #ffffff;
  padding: 8px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fichajes-table td {
  max-width: 260px;
  overflow: hidden;
  border-right: 1px solid #e2eaed;
  border-bottom: 1px solid #e2eaed;
  background: #ffffff;
  padding: 6px 8px;
  vertical-align: middle;
}

.fichajes-table tr.is-open td {
  background: #fff6e5;
}

.fichajes-day-separator th {
  position: sticky;
  top: 34px;
  z-index: 3;
  border-bottom: 1px solid #d7e1e5;
  background: #eef5f4;
  color: var(--ink);
  padding: 7px 8px;
  text-align: left;
}

.fichajes-day-separator span {
  font-weight: 900;
}

.fichajes-day-separator small {
  margin-left: 12px;
  color: var(--muted);
  font-weight: 700;
}

.fichajes-date-cell {
  color: var(--muted);
  white-space: nowrap;
}

.fichajes-employee-cell {
  min-width: 0;
}

.fichajes-employee-cell strong,
.fichajes-employee-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fichajes-employee-cell strong {
  color: var(--ink);
  font-weight: 700;
}

.fichajes-employee-cell small {
  color: var(--muted);
  font-size: 0.68rem;
}

.fichajes-duration {
  color: var(--teal-strong);
  font-weight: 900;
  white-space: nowrap;
}

.fichajes-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 900;
}

.fichajes-status.is-closed {
  background: #e8f4ee;
  color: #14613b;
}

.fichajes-status.is-open {
  background: #ffe0a6;
  color: #7a3e00;
}

.fichajes-map-chip {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #b7d8d4;
  border-radius: 5px;
  background: #eef8f7;
  color: var(--teal-strong);
  padding: 2px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fichajes-map-chip:hover {
  background: #dff0ed;
  text-decoration: none;
}

.fichajes-map-chip.is-muted {
  border-color: var(--line);
  background: #f4f7f8;
  color: var(--muted);
}

.fichajes-empty-cell {
  color: #9aa8ad;
}

.fichajes-notes {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fichajes-actions-cell .secondary-action {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.72rem;
}

.fichajes-summary {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.fichajes-summary header {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  background: #f8fbfb;
  padding: 10px;
}

.fichajes-summary header strong {
  font-size: 1rem;
  font-weight: 900;
}

.fichajes-summary header span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.fichajes-summary-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 10px;
}

.fichajes-summary-metrics div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfdfd;
  padding: 8px;
}

.fichajes-summary-metrics dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.fichajes-summary-metrics dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 900;
}

.fichajes-summary-title {
  border-top: 1px solid var(--line);
  padding: 8px 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.fichajes-day-totals {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding: 0 10px 10px;
}

.fichajes-day-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-top: 1px solid #e5ecef;
  padding: 8px 0;
}

.fichajes-day-total span {
  display: grid;
  min-width: 0;
}

.fichajes-day-total strong,
.fichajes-day-total small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fichajes-day-total strong {
  font-size: 0.82rem;
}

.fichajes-day-total small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.fichajes-day-total b {
  color: var(--teal-strong);
  font-size: 0.86rem;
}

.fichajes-summary-empty {
  padding: 10px 0;
  color: var(--muted);
  font-weight: 800;
}

.personal-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  width: min(1880px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 0;
}

.personal-header {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.personal-header h1 {
  font-size: 1.28rem;
}

.personal-header p {
  font-size: 0.9rem;
}

.personal-floating-notices {
  position: fixed;
  top: 78px;
  right: 22px;
  z-index: 120;
  display: grid;
  gap: 8px;
  width: min(440px, calc(100vw - 28px));
  pointer-events: none;
}

.personal-floating-notice {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 48px rgba(12, 31, 38, 0.18);
  color: var(--ink);
  padding: 10px 10px 10px 12px;
  pointer-events: auto;
  backdrop-filter: blur(8px) saturate(120%);
}

.personal-floating-notice.is-warning {
  border-color: #e3bd61;
  background: rgba(255, 248, 232, 0.92);
}

.personal-floating-notice.is-success {
  border-color: #9ac7ad;
  background: rgba(234, 247, 239, 0.92);
}

.personal-floating-notice strong {
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.personal-floating-notice span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-floating-notice button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #d6e2e5;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 900;
  line-height: 1;
}

.personal-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(104px, 0.6fr)) auto;
  gap: 8px;
  align-items: end;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef4f3;
  padding: 9px;
}

.personal-toolbar label,
.personal-search-form label,
.personal-details-modal-form label,
.personal-document-filter label,
.personal-photo-upload label,
.personal-document-upload label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.personal-toolbar select,
.personal-search-form input,
.personal-details-modal-form input,
.personal-details-modal-form textarea,
.personal-document-filter select,
.personal-photo-upload input,
.personal-document-upload input,
.personal-document-upload select,
.personal-document-upload textarea {
  min-width: 0;
  border: 1px solid #cbd8dd;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  padding: 8px 9px;
}

.personal-employee-picker {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
}

.personal-employee-picker > span {
  grid-column: 1 / -1;
}

.personal-search-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.personal-search-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.personal-employee-list {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow: auto;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.personal-employee-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(150px, auto);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #e8eef1;
  color: var(--ink);
  padding: 9px 6px;
  text-decoration: none;
}

.personal-employee-row:hover {
  background: #f5faf9;
}

.personal-employee-row span,
.personal-employee-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-employee-row strong {
  color: var(--teal-strong);
  font-size: 0.86rem;
}

.personal-employee-row small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.personal-shell {
  display: grid;
  flex: 1 1 auto;
  grid-template-areas: "profile main documents";
  grid-template-columns: minmax(220px, 250px) minmax(0, 0.8fr) minmax(340px, 0.45fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.personal-side,
.personal-main-panel,
.personal-documents-panel {
  min-height: 0;
}

.personal-side {
  grid-area: profile;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

.personal-main-panel {
  grid-area: main;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

.personal-main-panel.is-worktime-expanded {
  grid-template-rows: minmax(0, 1fr);
}

.personal-main-panel.is-worktime-expanded .personal-main-top {
  display: none;
}

.personal-main-panel.is-worktime-collapsed {
  grid-template-rows: minmax(0, 1fr) auto;
}

.personal-main-panel.is-worktime-collapsed .personal-worktime-panel {
  grid-template-rows: auto;
}

.personal-main-panel.is-worktime-collapsed .personal-worktime-table-shell,
.personal-main-panel.is-worktime-collapsed .personal-worktime-panel > .personal-empty {
  display: none;
}

.personal-main-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.personal-photo-panel,
.personal-meta-panel,
.personal-summary-panel,
.personal-details-panel,
.personal-reasons-panel,
.personal-worktime-panel,
.personal-documents-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(32, 65, 74, 0.06);
  overflow: hidden;
}

.personal-photo-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.personal-photo {
  display: grid;
  place-items: end start;
  min-height: 210px;
  border-radius: 7px;
  background-color: #dae7e5;
  background-image: var(--photo-url);
  background-position: center;
  background-size: cover;
  color: #fff;
  font-weight: 900;
  padding: 10px;
  position: relative;
}

.personal-photo::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.38));
  content: "";
}

.personal-photo span {
  position: relative;
}

.personal-photo-change {
  width: 100%;
  min-height: 34px;
}

.personal-meta-panel header,
.personal-summary-panel header,
.personal-details-panel header,
.personal-reasons-panel header,
.personal-worktime-panel header,
.personal-documents-panel header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
}

.personal-meta-panel header strong,
.personal-summary-panel header strong,
.personal-details-panel header strong,
.personal-reasons-panel header strong,
.personal-worktime-panel header strong,
.personal-documents-panel header strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.personal-meta-panel header span,
.personal-summary-panel header span,
.personal-details-panel header span,
.personal-reasons-panel header span,
.personal-worktime-panel header span,
.personal-documents-panel header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.personal-meta-panel dl,
.personal-summary-metrics {
  display: grid;
  gap: 0;
  margin: 0;
}

.personal-meta-panel dl {
  padding: 4px 10px 10px;
}

.personal-meta-panel div,
.personal-summary-metrics div {
  display: grid;
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
  gap: 8px;
  border-bottom: 1px solid #edf2f4;
  padding: 6px 0;
}

.personal-meta-panel dt,
.personal-summary-metrics dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.personal-meta-panel dd,
.personal-summary-metrics dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-summary-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
  padding: 4px 10px 10px;
}

.personal-summary-metrics div {
  grid-template-columns: 1fr;
}

.personal-summary-metrics dd {
  color: var(--teal-strong);
  font-size: 1.05rem;
  font-weight: 900;
}

.personal-details-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.personal-details-panel header .secondary-action,
.personal-worktime-panel header .secondary-action,
.personal-documents-panel header .secondary-action {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.74rem;
}

.personal-worktime-panel header div,
.personal-documents-panel header div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.personal-worktime-tools {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.personal-worktime-tools .secondary-action {
  margin: 0;
  white-space: nowrap;
}

.personal-worktime-tools button.secondary-action {
  justify-content: center;
  min-width: 34px;
  font-size: 0.9rem;
  line-height: 1;
  padding: 5px 8px;
}

.personal-worktime-tools button[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal);
  color: white;
}

.personal-details-readonly {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0 12px;
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 8px 10px 10px;
}

.personal-details-readonly div {
  display: grid;
  min-width: 0;
  border-bottom: 1px solid #edf2f4;
  padding: 5px 0;
}

.personal-details-readonly .is-wide {
  grid-column: 1 / -1;
}

.personal-details-readonly dt {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.personal-details-readonly dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-details-readonly .is-wide dd {
  white-space: normal;
}

.personal-details-dialog,
.personal-photo-dialog,
.personal-document-dialog {
  width: min(820px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  border: 0;
  background: transparent;
  padding: 0;
}

.personal-details-dialog::backdrop,
.personal-photo-dialog::backdrop,
.personal-document-dialog::backdrop {
  background: rgba(18, 33, 38, 0.46);
  backdrop-filter: blur(6px) saturate(120%);
}

.personal-details-dialog-panel,
.personal-photo-dialog-panel,
.personal-document-dialog-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid #c9d7db;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(5, 22, 26, 0.36);
}

.personal-details-dialog-panel > header,
.personal-photo-dialog-panel > header,
.personal-document-dialog-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 14px 16px;
}

.personal-details-dialog-panel > header div,
.personal-photo-dialog-panel > header div,
.personal-document-dialog-panel > header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.personal-details-dialog-panel > header strong,
.personal-photo-dialog-panel > header strong,
.personal-document-dialog-panel > header strong {
  color: var(--teal-strong);
  font-size: 1.04rem;
  font-weight: 900;
}

.personal-details-dialog-panel > header span,
.personal-photo-dialog-panel > header span,
.personal-document-dialog-panel > header span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-details-modal-form,
.personal-photo-upload,
.personal-document-upload {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow: auto;
  background: #f1f6f6;
  padding: 14px;
}

.personal-details-modal-form .personal-details-notes,
.personal-details-modal-actions,
.personal-photo-actions,
.personal-document-notes,
.personal-document-actions {
  grid-column: 1 / -1;
}

.personal-details-modal-form textarea,
.personal-document-upload textarea {
  min-height: 64px;
  resize: vertical;
}

.personal-details-modal-form textarea {
  min-height: 126px;
}

.personal-details-modal-actions,
.personal-photo-actions,
.personal-document-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.personal-reasons-panel,
.personal-worktime-panel,
.personal-documents-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.personal-documents-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.personal-reason-list,
.personal-document-list {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding: 8px 10px;
}

.personal-reason-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #edf2f4;
  padding: 6px 0;
}

.personal-reason-row .annual-reason-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--reason-border);
  border-radius: 4px;
  background: var(--reason-bg);
}

.personal-reason-row span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.personal-reason-row strong,
.personal-reason-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-reason-row strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.personal-reason-row small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.personal-reason-row b {
  color: var(--teal-strong);
  font-size: 0.86rem;
}

.personal-reasons-panel .is-over {
  color: #a13333;
}

.personal-worktime-table-shell {
  min-height: 0;
  overflow: auto;
}

.personal-worktime-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.personal-worktime-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f6f6;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 8px 9px;
  text-align: left;
  text-transform: uppercase;
}

.personal-worktime-table td {
  border-top: 1px solid #edf2f4;
  color: var(--ink);
  padding: 7px 9px;
  vertical-align: top;
}

.personal-worktime-table tr.is-open td {
  background: #fff8e8;
}

.personal-worktime-table td strong,
.personal-worktime-table td small {
  display: block;
}

.personal-worktime-table td small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.personal-worktime-table a {
  display: inline-block;
  color: var(--teal-strong);
  font-weight: 900;
  margin-right: 8px;
}

.personal-worktime-table .secondary-action {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 0.72rem;
  padding: 4px 9px;
  text-decoration: none;
  white-space: nowrap;
}

.personal-documents-panel {
  grid-area: documents;
  overflow: hidden;
}

.personal-document-filter {
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 4px 8px;
}

.personal-document-filter label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.personal-document-filter select {
  min-height: 30px;
  padding: 5px 8px;
}

.personal-document-upload textarea {
  min-height: 112px;
}

.personal-photo-modal-preview {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.personal-photo-modal-preview > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.personal-photo-modal-preview .personal-photo {
  min-height: 210px;
}

.personal-photo-upload .personal-photo-dropzone {
  min-height: 238px;
}

.personal-photo-dropzone,
.personal-document-dropzone {
  position: relative;
  grid-column: 1 / -1;
  align-content: center;
  min-height: 116px;
  border: 1px dashed #9bb9bc;
  border-radius: 8px;
  background: #fbfdfd;
  color: var(--muted);
  cursor: pointer;
  justify-items: center;
  padding: 16px;
  text-align: center;
  text-transform: none;
}

.personal-photo-dropzone {
  grid-column: auto;
}

.personal-photo-dropzone.is-dragging,
.personal-document-dropzone.is-dragging {
  border-color: var(--teal);
  background: #e8f4f2;
  outline: 3px solid rgba(11, 111, 107, 0.14);
}

.personal-photo-dropzone span,
.personal-document-dropzone span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.personal-photo-dropzone strong,
.personal-document-dropzone strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--teal-strong);
  font-size: 0.96rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-photo-dropzone small,
.personal-document-dropzone small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.personal-photo-dropzone input,
.personal-document-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.personal-document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  border-bottom: 1px solid #edf2f4;
  padding: 9px 0;
}

.personal-document-row strong,
.personal-document-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-document-row strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.personal-document-row small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.personal-document-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.personal-document-row nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.personal-document-row nav form {
  margin: 0;
}

.personal-document-row nav .secondary-action {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 0.68rem;
}

.personal-empty {
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: center;
  min-height: 120px;
  color: var(--muted);
  text-align: center;
}

.personal-empty strong {
  color: var(--ink);
}

.requests-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  width: min(1560px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 0;
}

.requests-header {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.requests-header h1 {
  font-size: 1.28rem;
}

.requests-header p {
  font-size: 0.9rem;
}

.requests-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(120px, 170px);
  gap: 8px;
  align-items: end;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef4f3;
  padding: 9px;
}

.locked-select select:disabled {
  border-color: #d8e4e7;
  background: #f3f8f8;
  color: var(--ink);
  cursor: not-allowed;
  opacity: 1;
}

.requests-toolbar label,
.requests-new-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.requests-toolbar select,
.requests-new-form input,
.requests-new-form select,
.requests-new-form textarea {
  min-width: 0;
  border: 1px solid #cbd8dd;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  padding: 8px 9px;
}

.requests-employee-picker {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.requests-employee-picker > span {
  grid-column: 1 / -1;
}

.requests-shell {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(320px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.requests-new-panel,
.requests-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(32, 65, 74, 0.06);
}

.requests-new-panel > header,
.requests-list-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 10px 12px;
}

.requests-new-panel > header div,
.requests-list-panel > header div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.requests-new-panel > header strong,
.requests-list-panel > header strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.requests-new-panel > header span,
.requests-list-panel > header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.requests-new-form {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.requests-reason-field,
.requests-notes-field {
  grid-column: 1 / -1;
}

.requests-new-form textarea {
  min-height: 132px;
  resize: vertical;
}

.requests-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.requests-metrics div {
  min-width: 78px;
  border: 1px solid #dce8ea;
  border-radius: 7px;
  background: #fff;
  padding: 5px 8px;
}

.requests-metrics dt {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.requests-metrics dd {
  margin: 0;
  color: var(--teal-strong);
  font-size: 0.98rem;
  font-weight: 900;
}

.requests-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.requests-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid #e0e9ec;
  border-left: 4px solid var(--reason-border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.requests-row.is-pending {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), #fff 44%);
}

.requests-row.is-approved {
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.08), #fff 44%);
}

.requests-reason-swatch {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 1px solid var(--reason-border);
  border-radius: 4px;
  background: var(--reason-bg);
}

.requests-row-main {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.requests-row-main header {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.requests-row-main header strong {
  overflow: hidden;
  color: var(--teal-strong);
  font-size: 0.9rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requests-row-main header span {
  border: 1px solid var(--reason-border);
  border-radius: 999px;
  background: var(--reason-bg);
  color: var(--reason-fg);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 3px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.requests-row-main p {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.requests-row-main dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.requests-row-main dl div {
  min-width: 0;
  border-top: 1px solid #edf2f4;
  padding-top: 5px;
}

.requests-row-main dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.requests-row-main dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requests-row-main small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
}

.requests-row form {
  margin: 0;
}

.requests-delete-action {
  min-height: 30px;
  border-color: #efb4a9;
  color: #9a2f24;
  font-size: 0.72rem;
  padding: 5px 9px;
}

.admin-requests-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  width: min(1560px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 0;
}

.admin-requests-header {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.admin-requests-header h1 {
  font-size: 1.28rem;
}

.admin-requests-header p {
  font-size: 0.9rem;
}

.admin-requests-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  flex: 0 0 auto;
}

.admin-requests-metrics article {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 12px;
}

.admin-requests-metrics span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-requests-metrics strong {
  color: var(--teal-strong);
  font-size: 1.26rem;
  font-weight: 950;
}

.admin-requests-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(32, 65, 74, 0.06);
}

.admin-requests-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 10px 12px;
}

.admin-requests-panel > header div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.admin-requests-panel > header strong {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 900;
}

.admin-requests-panel > header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-requests-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.admin-request-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) minmax(300px, 390px);
  gap: 10px;
  align-items: stretch;
  border: 1px solid #e0e9ec;
  border-left: 4px solid var(--reason-border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.admin-request-row.is-pending {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), #fff 42%);
}

.admin-request-row.is-approved {
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.08), #fff 42%);
}

.admin-request-row.is-rejected {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.08), #fff 42%);
}

.admin-request-main {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.admin-request-main header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.admin-request-main header div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.admin-request-main header strong,
.admin-request-main header span,
.admin-request-main dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-request-main header strong {
  color: var(--teal-strong);
  font-size: 0.94rem;
  font-weight: 900;
}

.admin-request-main header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.admin-request-main header b {
  flex: 0 0 auto;
  border: 1px solid var(--reason-border);
  border-radius: 999px;
  background: var(--reason-bg);
  color: var(--reason-fg);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 3px 8px;
  text-transform: uppercase;
}

.admin-request-main p {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 820;
}

.admin-request-main p span {
  display: inline-flex;
  margin-right: 6px;
  border: 1px solid var(--reason-border);
  border-radius: 5px;
  background: var(--reason-bg);
  color: var(--reason-fg);
  padding: 2px 6px;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-request-main dl {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.admin-request-main dl div {
  min-width: 0;
  border-top: 1px solid #edf2f4;
  padding-top: 5px;
}

.admin-request-main dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-request-main dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 820;
}

.admin-request-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-request-notes section {
  display: grid;
  gap: 2px;
  min-width: 0;
  border-left: 3px solid #d9e7e8;
  padding-left: 8px;
}

.admin-request-notes span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-request-notes p {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.admin-request-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.admin-request-form label {
  display: grid;
  grid-template-rows: auto minmax(84px, 1fr);
  gap: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-request-form textarea {
  width: 100%;
  min-height: 84px;
  border: 1px solid #cbd8dd;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  padding: 8px 9px;
  resize: vertical;
}

.admin-request-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-request-actions .primary-action,
.admin-request-actions .secondary-action {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 0.76rem;
}

.user-clock-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  width: min(1320px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 0;
}

.user-clock-header {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.user-clock-header h1 {
  font-size: 1.28rem;
}

.user-clock-header p {
  font-size: 0.9rem;
}

.user-clock-shell {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.user-clock-panel,
.user-clock-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(32, 65, 74, 0.06);
}

.user-clock-panel {
  grid-template-rows: auto auto auto auto;
}

.user-clock-panel > header,
.user-clock-list-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 12px;
}

.user-clock-panel > header div,
.user-clock-list-panel > header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.user-clock-panel > header strong,
.user-clock-list-panel > header strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-clock-panel > header span,
.user-clock-list-panel > header span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.user-clock-state {
  display: grid;
  gap: 4px;
  margin: 14px 14px 0;
  border: 1px solid #d9e7e9;
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  background: #f5fbfa;
  padding: 14px;
}

.user-clock-state.is-open {
  border-left-color: #d58900;
  background: #fff8e8;
}

.user-clock-state > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.user-clock-state strong {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 900;
}

.user-clock-state small {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.user-clock-action {
  margin: 14px;
}

.user-clock-punch {
  width: 100%;
  min-height: 74px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  font-size: 1.45rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(11, 111, 107, 0.18);
}

.user-clock-punch:hover {
  background: var(--teal-strong);
}

.user-clock-punch.is-exit {
  background: var(--rust);
  box-shadow: 0 12px 24px rgba(183, 78, 46, 0.18);
}

.user-clock-punch.is-exit:hover {
  background: #963f25;
}

.user-clock-punch:disabled {
  background: #b8c5c9;
  box-shadow: none;
  cursor: not-allowed;
}

.user-clock-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 14px 14px;
}

.user-clock-metrics div {
  border: 1px solid #dce8ea;
  border-radius: 8px;
  background: #f7fbfb;
  padding: 8px 10px;
}

.user-clock-metrics dt {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.user-clock-metrics dd {
  margin: 0;
  color: var(--teal-strong);
  font-size: 1.08rem;
  font-weight: 900;
}

.user-clock-table-shell {
  min-height: 0;
  overflow: auto;
}

.user-clock-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
}

.user-clock-table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  border-bottom: 1px solid #cddce0;
  background: #eef5f5;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  padding: 8px 10px;
  text-align: left;
  text-transform: uppercase;
}

.user-clock-table td {
  border-bottom: 1px solid #edf3f4;
  color: var(--ink);
  font-weight: 700;
  padding: 8px 10px;
  vertical-align: middle;
}

.user-clock-table td:nth-child(4),
.user-clock-table td:nth-child(5) {
  text-align: right;
}

.user-clock-table tr.is-open td {
  background: #fff4d7;
}

.master-table-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.master-table-card {
  display: grid;
  gap: 7px;
  min-height: 138px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 18px;
  text-decoration: none;
}

.master-table-card:hover {
  border-color: var(--teal);
  text-decoration: none;
}

.master-table-card span {
  color: var(--teal-strong);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.master-table-card strong {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 900;
}

.master-table-card small {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 760;
}

.master-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  width: calc(100vw - 32px);
  max-width: calc(100vw - 32px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 0;
}

.master-header {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.master-header h1 {
  font-size: 1.28rem;
}

.master-header p {
  font-size: 0.9rem;
}

.master-shell {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(310px, 390px) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.master-editor-panel,
.master-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(32, 65, 74, 0.06);
}

.master-editor-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.master-editor-panel > header,
.master-list-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 12px;
}

.master-editor-panel > header div,
.master-list-panel > header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.master-editor-panel > header strong,
.master-list-panel > header strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-editor-panel > header span,
.master-list-panel > header span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.master-editor-form {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.master-editor-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.master-editor-form input,
.master-editor-form select,
.master-editor-form textarea {
  min-width: 0;
  border: 1px solid #cbd8dd;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  padding: 8px 9px;
}

.master-editor-form input[readonly] {
  border-color: #d8e4e7;
  background: #f3f8f8;
  cursor: not-allowed;
}

.master-lookup-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.master-lookup-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.master-lookup-control input {
  min-width: 0;
}

.master-lookup-control .secondary-action {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 0.74rem;
}

.master-editor-form textarea {
  min-height: 132px;
  resize: vertical;
}

.master-checkbox {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  text-transform: none;
}

.master-checkbox input {
  width: 18px;
  height: 18px;
}

.master-notes-field {
  min-height: 0;
}

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

.master-readonly-card {
  display: grid;
  gap: 9px;
  margin: 12px 12px 0;
  border: 1px solid var(--reason-border);
  border-left: 4px solid var(--reason-border);
  border-radius: 8px;
  background: #fffdf6;
  padding: 12px;
}

.master-readonly-card-plain {
  --reason-bg: #e3f4f1;
  --reason-fg: #0f3f3b;
  --reason-border: #0f766e;
}

.master-readonly-card header {
  display: flex;
  gap: 10px;
  align-items: start;
}

.master-readonly-card header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.master-readonly-card strong,
.master-readonly-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-readonly-card strong {
  color: var(--teal-strong);
  font-size: 0.96rem;
  font-weight: 900;
}

.master-readonly-card small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.master-readonly-card dl,
.master-row-main dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.master-readonly-card dl div,
.master-row-main dl div {
  min-width: 0;
  border-top: 1px solid #edf2f4;
  padding-top: 5px;
}

.master-readonly-card dt,
.master-row-main dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.master-readonly-card dd,
.master-row-main dd {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-readonly-card p,
.master-row-main p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.master-unlock-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.master-unlock-actions .secondary-action {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.76rem;
}

.master-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.master-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) minmax(150px, auto);
  gap: 10px;
  align-items: start;
  border: 1px solid #e0e9ec;
  border-left: 4px solid var(--reason-border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.master-row-plain {
  --reason-bg: #e3f4f1;
  --reason-fg: #0f3f3b;
  --reason-border: #0f766e;
}

.master-row.is-locked {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), #fff 42%);
}

.master-color-swatch {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 1px solid var(--reason-border);
  border-radius: 4px;
  background: var(--reason-bg);
}

.master-readonly-card .master-color-swatch {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.master-row-main {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.master-row-main header {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.master-row-main header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.master-row-main header strong,
.master-row-main header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-row-main header strong {
  color: var(--teal-strong);
  font-size: 0.92rem;
  font-weight: 900;
}

.master-row-main header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.master-row-main header b {
  flex: 0 0 auto;
  border: 1px solid var(--reason-border);
  border-radius: 999px;
  background: var(--reason-bg);
  color: var(--reason-fg);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 3px 8px;
  text-transform: uppercase;
}

.master-row-actions {
  display: grid;
  gap: 7px;
  margin: 0;
}

.master-row-actions .secondary-action {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.76rem;
}

.master-personal-shell {
  grid-template-columns: minmax(360px, 470px) minmax(0, 1fr);
}

.master-personal-form {
  gap: 12px;
}

.master-form-section {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid #e4edef;
  border-radius: 8px;
  background: #fbfdfd;
  padding: 10px;
}

.master-form-section > strong {
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.master-search-form {
  display: grid;
  grid-template-columns: minmax(180px, 280px) auto;
  gap: 7px;
  margin: 0;
}

.master-search-form input {
  min-width: 0;
  border: 1px solid #cbd8dd;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  padding: 8px 9px;
}

.master-lookup-dialog .employee-result {
  grid-template-columns: 110px minmax(0, 1fr) 170px;
}

.master-lookup-result strong,
.master-lookup-result small,
.master-lookup-result span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-hidden-form {
  display: none;
}

.master-grid-shell {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.master-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 10px 12px;
}

.master-grid-toolbar > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.master-grid-toolbar strong,
.master-grid-toolbar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-grid-toolbar strong {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 900;
}

.master-grid-toolbar span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
}

.master-grid-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.master-grid-actions .primary-action,
.master-grid-actions .secondary-action {
  min-height: 34px;
  padding: 7px 13px;
  font-size: 0.78rem;
}

.master-grid-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.master-grid-table-shell {
  min-height: 0;
  overflow: auto;
}

.master-grid-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.master-grid-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  border-bottom: 1px solid #dce8eb;
  background: #edf4f2;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  padding: 8px 9px;
  text-align: left;
  text-transform: uppercase;
  user-select: none;
}

.master-grid-table td {
  overflow: hidden;
  border-bottom: 1px solid #edf2f4;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 760;
  padding: 8px 9px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.master-grid-table th:nth-child(1),
.master-grid-table td:nth-child(1) {
  text-align: center;
}

.master-grid-table th:nth-child(2),
.master-grid-table td:nth-child(2) {
  text-align: center;
}

.master-grid-row {
  background: #fff;
  cursor: pointer;
}

.master-grid-header-content {
  display: block;
  overflow: hidden;
  padding-right: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-column-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 3;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

.master-column-resizer::after {
  position: absolute;
  top: 7px;
  right: 3px;
  bottom: 7px;
  width: 1px;
  background: rgba(80, 104, 112, 0.28);
  content: "";
}

.master-column-resizer:hover::after,
.master-grid-table.is-resizing .master-column-resizer::after {
  background: var(--teal);
}

.master-grid-table.is-resizing {
  cursor: col-resize;
}

.master-grid-row:hover td {
  background: #f6fbfb;
}

.master-grid-row.is-selected td {
  background: #e6f5f3;
  box-shadow: inset 0 1px 0 rgba(15, 118, 110, 0.18), inset 0 -1px 0 rgba(15, 118, 110, 0.18);
}

.master-grid-row.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--teal), inset 0 1px 0 rgba(15, 118, 110, 0.18), inset 0 -1px 0 rgba(15, 118, 110, 0.18);
}

.master-grid-row.is-locked td {
  background-image: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent 52%);
}

.master-grid-row:focus {
  outline: 2px solid rgba(15, 118, 110, 0.36);
  outline-offset: -2px;
}

.master-grid-select span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #b8c9cf;
  border-radius: 50%;
  background: #fff;
}

.master-grid-row.is-selected .master-grid-select span {
  border-color: var(--teal);
  background: radial-gradient(circle at center, var(--teal) 0 38%, #fff 42%);
}

.master-grid-table .master-color-swatch {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

.master-grid-table strong,
.master-grid-table span,
.master-grid-table small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-grid-table small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
}

.master-reason-kind,
.master-status-pill {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 8px;
  text-transform: uppercase;
}

.master-reason-kind {
  border: 1px solid var(--reason-border);
  background: var(--reason-bg);
  color: var(--reason-fg);
}

.master-status-pill.is-free {
  border: 1px solid #cbd8dd;
  background: #f3f7f8;
  color: #40515a;
}

.master-status-pill.is-locked {
  border: 1px solid #f0b450;
  background: #fff4da;
  color: #7c4a03;
}

.master-grid-notes span {
  display: block;
}

.master-edit-dialog {
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  border: 0;
  background: transparent;
  padding: 0;
}

.master-personal-dialog {
  width: min(1120px, calc(100vw - 48px));
}

.master-personal-dialog .master-personal-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.master-personal-dialog .master-editor-actions {
  grid-column: 1 / -1;
}

.master-edit-dialog::backdrop {
  background: rgba(18, 33, 38, 0.46);
  backdrop-filter: blur(6px) saturate(120%);
}

.master-edit-dialog-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid #c9d7db;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(5, 22, 26, 0.36);
}

.master-edit-dialog-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
  padding: 12px 14px;
}

.master-edit-dialog-panel > header div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.master-edit-dialog-panel > header strong,
.master-edit-dialog-panel > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-edit-dialog-panel > header strong {
  color: var(--teal-strong);
  font-size: 1rem;
  font-weight: 900;
}

.master-edit-dialog-panel > header span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
}

.master-dialog-form {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.master-locked-dialog .master-edit-dialog-panel {
  grid-template-rows: auto auto auto;
}

.master-locked-dialog .master-readonly-card {
  margin: 14px 14px 0;
}

.master-locked-dialog .master-unlock-actions {
  gap: 8px;
  padding: 12px 14px 14px;
}

.master-lock-choice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px 14px;
}

.master-lock-choice-actions form {
  margin: 0;
}

.master-lock-choice-actions .secondary-action {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.76rem;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .pc-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 18px;
  }

  .pc-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
  }

  .logout-form {
    margin-left: auto;
  }

  .personal-shell {
    grid-template-areas:
      "profile main"
      "documents documents";
    grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(180px, 0.55fr);
  }

  .personal-photo {
    min-height: 170px;
  }

  .personal-main-top {
    grid-template-columns: 1fr;
  }

  .personal-details-readonly {
    grid-template-columns: 1fr;
  }

  .requests-shell {
    grid-template-columns: minmax(300px, 0.46fr) minmax(0, 1fr);
  }

  .user-clock-shell {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }

  .requests-row-main dl,
  .master-row-main dl,
  .master-readonly-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .auth-body {
    padding: 18px;
  }

  .button-row,
  .work-grid {
    grid-template-columns: 1fr;
  }

  .pc-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px;
  }

  .pc-nav {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pc-main {
    width: min(100% - 28px, 720px);
    padding: 24px 0;
  }

  .pc-main-wide {
    width: min(100% - 18px, 720px);
  }

  .permit-toolbar {
    grid-template-columns: 1fr;
  }

  .permit-toolbar > * {
    grid-column: 1 / -1;
  }

  .permit-grid-shell {
    max-height: calc(100vh - 330px);
  }

  .permit-grid {
    --employee-col: 230px;
    --day-width: 30px;
  }

  .annual-user-toolbar,
  .monthly-user-toolbar,
  .summaries-toolbar,
    .fichajes-toolbar,
    .personal-toolbar,
    .requests-toolbar,
    .user-clock-shell,
    .personal-search-form,
    .master-shell,
    .annual-user-shell,
    .monthly-user-shell,
    .fichajes-shell,
    .personal-shell,
    .requests-shell,
    .personal-side,
    .personal-main-panel,
    .personal-main-top,
  .personal-details-readonly,
  .personal-details-modal-form,
  .personal-photo-upload,
  .personal-document-upload,
  .personal-summary-metrics,
  .annual-calendar-board,
  .employee-result {
    grid-template-columns: 1fr;
  }

  .personal-workspace {
    min-height: auto;
    overflow: visible;
  }

  .requests-workspace {
    min-height: auto;
    overflow: visible;
  }

  .user-clock-workspace {
    min-height: auto;
    overflow: visible;
  }

  .personal-header,
  .requests-header,
  .master-header,
  .user-clock-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .personal-shell,
  .personal-side,
  .personal-main-panel,
  .personal-main-top,
  .personal-documents-panel,
  .personal-reason-list,
  .personal-document-list,
    .requests-shell,
    .user-clock-shell,
    .user-clock-panel,
    .user-clock-list-panel,
    .user-clock-table-shell,
    .requests-new-panel,
    .requests-list-panel,
    .master-editor-panel,
    .master-list-panel,
    .master-list,
    .requests-list {
    overflow: visible;
  }

  .personal-shell {
    grid-template-areas:
      "profile"
      "main"
      "documents";
  }

  .personal-main-panel,
  .personal-main-top,
  .personal-side {
    grid-template-rows: none;
  }

  .personal-employee-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .requests-row {
    grid-template-columns: 14px minmax(0, 1fr);
  }

  .master-row {
    grid-template-columns: 14px minmax(0, 1fr);
  }

  .requests-row form {
    grid-column: 2;
  }

  .master-row-actions {
    grid-column: 2;
    grid-template-columns: 1fr 1fr;
  }

  .requests-row-main dl,
  .master-row-main dl,
  .master-readonly-card dl,
  .requests-metrics {
    grid-template-columns: 1fr;
  }

  .personal-details-readonly .is-wide,
  .personal-details-modal-form .personal-details-notes,
  .personal-details-modal-actions,
  .personal-photo-actions,
  .personal-document-notes,
  .personal-document-actions {
    grid-column: auto;
  }

  .personal-floating-notices {
    top: 12px;
    right: 14px;
  }

  .annual-calendar-board,
  .annual-summary-list {
    overflow: auto;
  }

  .annual-calendar-board {
    grid-template-rows: none;
  }

  .worktime-editor-modal {
    padding: 14px;
  }

  .worktime-editor-panel {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    min-height: 0;
  }

  .worktime-editor-header {
    padding: 12px;
  }

  .worktime-editor-body,
  .worktime-editor-body.is-list-only,
  .worktime-editor-form {
    grid-template-columns: 1fr;
  }

  .worktime-editor-row {
    grid-template-columns: 1fr;
  }

  .worktime-editor-actions {
    justify-content: flex-start;
  }

}