* { box-sizing: border-box; }
:root {
  --font-ui: "Anuphan", "Noto Sans Thai", sans-serif;
  --font-display: "Anuphan", "Noto Sans Thai", sans-serif;
  font-family: var(--font-ui);
  color: #172633;
  background: #edf4f5;
}
body { margin: 0; }
.app-feedback {
  --fb-accent: #0b6e6a;
  --fb-accent-soft: #d9efee;
  --fb-ink: #17343b;
  --fb-muted: #5f787a;
  --fb-border: rgba(155, 201, 198, .55);
  --fb-surface: rgba(255, 255, 255, .88);
  position: fixed;
  z-index: 1200;
  top: max(18px, env(safe-area-inset-top, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  left: auto;
  width: min(calc(100vw - 36px), 360px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 13px 12px 14px 13px;
  border: 1px solid var(--fb-border);
  border-radius: 18px;
  color: var(--fb-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), transparent 42%),
    var(--fb-surface);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .65) inset,
    0 14px 34px rgba(15, 42, 46, .14),
    0 2px 8px rgba(15, 42, 46, .06);
  transform: translate(18px, -8px) scale(.96);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font-ui);
  transition:
    opacity .22s cubic-bezier(.2, .8, .2, 1),
    transform .28s cubic-bezier(.2, .8, .2, 1);
}
.app-feedback.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
}
.app-feedback.is-hiding {
  opacity: 0;
  transform: translate(12px, -6px) scale(.98);
  pointer-events: none;
}
.app-feedback.is-error {
  --fb-accent: #9b3d3d;
  --fb-accent-soft: #f8e4e4;
  --fb-border: rgba(214, 170, 170, .7);
  --fb-muted: #8a5a5a;
}
.app-feedback.is-info {
  --fb-accent: #2f6f9a;
  --fb-accent-soft: #e7f1f8;
  --fb-border: rgba(155, 190, 214, .75);
  --fb-muted: #5a7388;
}
.app-feedback-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--fb-accent);
  background:
    radial-gradient(120% 100% at 30% 20%, #fff, transparent 55%),
    linear-gradient(160deg, #fff, var(--fb-accent-soft));
  border: 1px solid color-mix(in srgb, var(--fb-accent) 22%, white);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--fb-accent) 16%, transparent);
}
.app-feedback-mark .ui-icon { width: 20px; height: 20px; }
.app-feedback.is-visible .app-feedback-mark {
  animation: feedback-pop .42s cubic-bezier(.2, 1.2, .3, 1) both;
}
.app-feedback-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-right: 2px;
}
.app-feedback-copy strong {
  color: var(--fb-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.app-feedback-copy small {
  color: var(--fb-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.app-feedback-dismiss {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  border: 0;
  border-radius: 10px;
  color: #7a9093;
  background: transparent;
}
.app-feedback-dismiss:hover {
  color: var(--fb-ink);
  background: color-mix(in srgb, var(--fb-accent-soft) 70%, white);
}
.app-feedback-dismiss .ui-icon { width: 16px; height: 16px; }
.app-feedback-bar {
  grid-column: 1 / -1;
  height: 3px;
  margin: 6px 2px 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fb-accent) 18%, #e7efef);
  overflow: hidden;
  position: relative;
}
.app-feedback-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fb-accent) 70%, #2aa39c), var(--fb-accent));
  transform-origin: left center;
  transform: scaleX(0);
}
.app-feedback.is-visible .app-feedback-bar::after {
  animation: feedback-bar 3.2s linear forwards;
}
.app-feedback.is-error .app-feedback-bar::after {
  background: linear-gradient(90deg, #c86a6a, var(--fb-accent));
}
.app-feedback.is-info .app-feedback-bar::after {
  background: linear-gradient(90deg, #6a9fc4, var(--fb-accent));
}
@keyframes feedback-pop {
  0% { transform: scale(.72); opacity: .4; }
  70% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes feedback-bar {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@media (max-width: 480px) {
  .app-feedback {
    top: max(14px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: min(calc(100vw - 24px), 360px);
  }
}
#app { width: min(100%, 430px); min-height: 100vh; margin: auto; padding: 48px 24px 56px; background: #f5fbfc; }
section { width: 100%; }
h1, h2, p { margin: 0; }
h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.6px; }
h2 { margin-bottom: 10px; font-size: 17px; }
header p { margin-top: 6px; color: #738085; font-size: 13px; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.ui-icon { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.title-icon { display: flex; align-items: center; gap: 8px; }
.title-icon .ui-icon { color: #087d7a; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 30px; }
.steps div { position: relative; display: grid; justify-items: center; gap: 5px; color: #8a9599; font-size: 11px; }
.steps div:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: 67%; width: 66%; height: 2px; background: #ccd6d8; }
.steps b { z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; border: 2px solid #cad5d7; border-radius: 50%; background: #f5fbfc; }
.steps .active { color: #087d7a; font-weight: 700; }
.steps .active b { color: white; border-color: #087d7a; background: #087d7a; }
.steps .active::after { background: #087d7a !important; }
.section { margin-top: 24px; }
.date-card { width: 100%; min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1.5px solid #168c89; border-radius: 14px; color: #087d7a; background: white; text-align: left; }
.date-card span { display: grid; flex: 1; }
.date-card strong { color: #17343b; font-size: 15px; }
.date-card small { margin-top: 3px; color: #718083; }
.date-card > .ui-icon:first-child { width: 24px; height: 24px; }
.chevron { width: 18px; height: 18px; color: #718083; }
.date-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 12px; background: #e5f5f4; }
.date-panel label, .time-grid label { display: grid; gap: 5px; color: #547173; font-size: 11px; }
.date-range-cal {
  margin-top: 10px; padding: 12px; border-radius: 14px;
  background: #e5f5f4; border: 1px solid #c5e0de;
  overflow: visible;
}
.date-range-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.date-range-nav strong { color: #17343b; font-size: 14px; }
.date-range-nav button {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid #b7d4d2; border-radius: 10px; color: #087d7a; background: #fff;
}
.date-range-nav .ui-icon { width: 18px; height: 18px; }
.date-range-weekdays,
.date-range-cal { overflow: visible; }
.date-range-days {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
  overflow: visible;
}
.date-range-weekdays span {
  text-align: center; color: #7a9093; font-size: 11px; font-weight: 700; padding-bottom: 4px;
}
.date-range-day {
  position: relative;
  min-height: 40px; border: 0; border-radius: 10px;
  color: #17343b; background: #fff; font: inherit; cursor: pointer;
  display: grid; place-items: center;
}
.date-range-day b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.date-range-day.is-outside { color: #9aabae; background: #eef5f5; }
.date-range-day.is-muted { color: #9aabae; background: #f4f8f8; }
.date-range-day.is-outside.is-muted { background: #e8f0f0; }
.date-range-day.is-holiday {
  color: #4f3d7a;
  background:
    radial-gradient(120% 90% at 28% 18%, #f3eeff, transparent 55%),
    linear-gradient(165deg, #e8e0ff, #cfc2f2);
  box-shadow: inset 0 0 0 1px #b7a8e0;
  cursor: help;
}
.date-range-day.is-holiday b { color: #3f2f66; text-shadow: none; }
.date-range-day.is-holiday:hover,
.date-range-day.is-holiday:focus-visible {
  color: #3f2f66;
  background:
    radial-gradient(120% 90% at 28% 18%, #faf7ff, transparent 55%),
    linear-gradient(165deg, #efe9ff, #c4b5ef);
  filter: none;
  z-index: 3;
}
.date-range-day.is-outside.is-holiday {
  color: #6d5f8f;
  background: linear-gradient(165deg, #efeaf8, #d9d0ea);
  box-shadow: inset 0 0 0 1px #c5badc;
}
.date-range-day.is-holiday[data-holiday-name]:hover::after,
.date-range-day.is-holiday[data-holiday-name]:focus-visible::after {
  content: attr(data-holiday-name);
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(14rem, 70vw);
  padding: 8px 11px;
  border: 1px solid #d4c8ef;
  border-radius: 12px;
  background:
    radial-gradient(120% 100% at 50% 0%, #f4efff, transparent 58%),
    #2a2438;
  color: #f4efff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 10px 24px #17343b40;
  animation: date-holiday-tip .14s ease-out;
}
.date-range-day.is-holiday[data-holiday-name]:hover::before,
.date-range-day.is-holiday[data-holiday-name]:focus-visible::before {
  content: "";
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 10px; height: 10px;
  background: #2a2438;
  border-right: 1px solid #d4c8ef;
  border-bottom: 1px solid #d4c8ef;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
@keyframes date-holiday-tip {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.date-range-day.is-occupied {
  color: #a34444;
  background:
    linear-gradient(135deg, transparent 46%, #e7bcbc 46%, #e7bcbc 54%, transparent 54%),
    #fff1f1;
  cursor: not-allowed;
  opacity: .9;
}
.date-range-day.is-occupied:hover { color: #a34444; background:
    linear-gradient(135deg, transparent 46%, #e7bcbc 46%, #e7bcbc 54%, transparent 54%),
    #fff1f1; }
.date-range-day:hover { background: #d7efed; color: #087d7a; }
.date-range-hint.is-error { color: #a34444; }
.date-range-hint.is-error strong { color: #8a3030; }
.date-range-day.in-range,
.date-range-day.is-start,
.date-range-day.is-end {
  background: #087d7a;
  color: #fff;
  border-radius: 4px;
}
.date-range-day.in-range b,
.date-range-day.is-start b,
.date-range-day.is-end b { color: #fff; text-shadow: none; }
.date-range-day.is-outside.in-range,
.date-range-day.is-outside.is-start,
.date-range-day.is-outside.is-end { color: #fff; background: #087d7a; }
.date-range-day.in-range:hover,
.date-range-day.is-start:hover,
.date-range-day.is-end:hover {
  background: #0a6f6c;
  color: #fff;
}
.date-range-day.is-start { border-radius: 10px 4px 4px 10px; }
.date-range-day.is-end { border-radius: 4px 10px 10px 4px; }
.date-range-day.is-start.is-end { border-radius: 10px; }
.date-range-foot {
  display: grid; gap: 10px; margin-top: 12px;
}
.date-range-hint {
  margin: 0; color: #678082; font-size: 11px; text-align: center; line-height: 1.45;
}
.date-range-hint strong { color: #0b5f5c; font-size: 13px; }
.date-range-ok {
  width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; color: #fff; background: #087d7a; font-weight: 800;
}
.date-range-ok:disabled { opacity: .45; cursor: not-allowed; }
.date-range-ok .ui-icon { width: 18px; height: 18px; }
input, textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #bfd0d1; border-radius: 11px; color: #172633; background: white; }
input:focus, textarea:focus { outline: 3px solid #d9efee; border-color: #087d7a; }
.leave-list { overflow: hidden; border-radius: 13px; background: white; }
.leave-list button { width: 100%; min-height: 53px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-bottom: 1px solid #e1e9ea; color: #172633; background: white; }
.leave-list button:last-child { border-bottom: 0; }
.leave-list button:disabled { opacity: .48; cursor: not-allowed; }
.leave-list .type-icon { width: 22px; height: 22px; color: #718083; }
.leave-list .choice-icon { width: 19px; height: 19px; color: #a9b7b9; }
.leave-list span { flex: 1; text-align: left; font-weight: 600; }
.leave-list small { color: #778588; }
.leave-list button.selected { color: #087d7a; background: #eaf7f6; }
.leave-list button.selected .ui-icon { color: #087d7a; }
.leave-types-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; margin-top: 8px; border: 1px solid #c8d8d9; border-radius: 11px; color: #087d7a; background: #f7fbfb; font-weight: 700; }
.leave-types-toggle .ui-icon { width: 17px; height: 17px; }
.segments { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid #becacc; border-radius: 13px; background: white; }
.segments button { min-height: 58px; display: grid; place-content: center; justify-items: center; gap: 4px; border: 0; border-right: 1px solid #becacc; color: #3e4c50; background: transparent; font-size: 12px; font-weight: 600; }
.segments .ui-icon { width: 19px; height: 19px; }
.segments button:last-child { border-right: 0; }
.segments button.active { color: white; background: #087d7a; }
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.calculation { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 15px 18px; border-radius: 14px; color: #087d7a; background: #e5f5f4; }
.calculation > .ui-icon { width: 26px; height: 26px; }
.calculation > span { display: grid; gap: 2px; }
.calculation small { color: #748789; font-size: 11px; }
.calculation strong { font-size: 17px; }
.primary { width: 100%; min-height: 55px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; border: 0; border-radius: 13px; color: white; background: #087d7a; font-size: 17px; font-weight: 700; }
.primary b { font-size: 24px; font-weight: 400; }
.primary:disabled { opacity: .4; cursor: not-allowed; }
.privacy { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 13px; color: #819092; font-size: 10px; text-align: center; }
.privacy .ui-icon { width: 13px; height: 13px; }
.back { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; padding: 0; border: 0; color: #087d7a; background: transparent; font-weight: 600; }
.back .ui-icon { width: 19px; height: 19px; }
.request-summary { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 14px; border-radius: 13px; color: #087d7a; background: #e5f5f4; }
.request-summary > .ui-icon { width: 24px; height: 24px; }
.request-summary span { display: grid; gap: 3px; color: #607779; font-size: 11px; }
.request-summary strong { color: #087d7a; font-size: 13px; }
.field { display: grid; gap: 7px; margin-top: 18px; font-size: 14px; font-weight: 700; }
.field > b { color: #c74747; }
.field > small, .field > span small { color: #859395; font-size: 10px; font-weight: 400; text-align: right; }
.upload, .file-row { width: 100%; min-height: 66px; display: flex; align-items: center; padding: 12px 14px; border: 1px dashed #82b6b3; border-radius: 12px; color: #087d7a; background: #f8fcfc; text-align: left; }
.upload { gap: 11px; }
.upload > span { display: grid; gap: 3px; }
.upload > .ui-icon, .file-row > .ui-icon { width: 23px; height: 23px; }
.upload small, .file-row small { color: #7b8c8d; font-size: 10px; }
.file-row span { display: grid; flex: 1; }
.file-row button { display: inline-flex; align-items: center; gap: 4px; border: 0; color: #b74444; background: transparent; }
.file-row button .ui-icon { width: 16px; height: 16px; }
dl { overflow: hidden; margin: 20px 0 0; border-radius: 14px; background: white; }
dl div { display: flex; justify-content: space-between; gap: 14px; padding: 13px; border-bottom: 1px solid #e3eaeb; }
dl div:last-child { border-bottom: 0; }
dt { color: #778588; font-size: 12px; }
dd { max-width: 62%; margin: 0; text-align: right; font-size: 13px; font-weight: 600; }
.review-note { margin-top: 15px; padding: 14px; border-radius: 14px; background: white; }
.review-note small { color: #798789; }
.review-note p { margin: 2px 0 12px; }
.review-note p:last-child { margin-bottom: 0; }
.policy-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; padding: 14px; border-radius: 13px; color: #197544; background: #eaf8ef; font-size: 12px; }
.policy-note > .ui-icon { width: 23px; height: 23px; }
.policy-note > span { display: grid; gap: 3px; }
.success { padding-top: 70px; text-align: center; }
.success-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: auto auto 20px; color: #58a66f; }
.success-mark .ui-icon { width: 64px; height: 64px; }
.success > p { margin-top: 8px; color: #748487; }
.tracking { display: grid; gap: 5px; margin: 28px 0; padding: 20px; border: 1px dashed #80b5b2; border-radius: 13px; }
.tracking span { color: #7a898c; font-size: 12px; }
.tracking strong { color: #087d7a; font-size: 22px; }
.error { padding-top: 80px; text-align: center; }
.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 46px; color: #087d7a; }
.brand > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: white; background: #087d7a; font-weight: 800; }
.brand div { display: grid; }
.brand small { color: #728184; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }
.portal header { margin-bottom: 26px; }
.employee-list { max-height: 285px; overflow: auto; margin-top: 10px; border-radius: 14px; background: white; }
.employee-list button { width: 100%; min-height: 66px; display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 0; border-bottom: 1px solid #e2eaeb; color: #172633; background: white; text-align: left; }
.employee-list button:last-child { border-bottom: 0; }
.employee-list button.selected { background: #e5f5f4; }
.employee-list button > span:nth-child(2) { display: grid; flex: 1; gap: 2px; }
.employee-list button small { color: #758588; }
.employee-list button > b { color: #087d7a; font-size: 24px; font-weight: 400; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #087d7a; background: #d9efee; font-weight: 800; }
.avatar .ui-icon { width: 21px; height: 21px; }
.input-icon { position: relative; display: block; }
.input-icon > .ui-icon { position: absolute; top: 50%; left: 13px; z-index: 1; width: 19px; height: 19px; color: #779092; transform: translateY(-50%); pointer-events: none; }
.input-icon input { padding-left: 42px; }
.input-icon.has-pin-toggle input { padding-right: 44px; }
.pin-visibility {
  position: absolute; top: 50%; right: 8px; z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0; padding: 0;
  border: 0; border-radius: 9px;
  color: #607779; background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}
.pin-visibility:hover { color: #087d7a; background: #e5f5f4; }
.pin-visibility[aria-pressed="true"] { color: #087d7a; }
.pin-visibility .ui-icon { width: 18px; height: 18px; }
.empty { padding: 24px; color: #758588; text-align: center; }
#pin-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid #dfe8e9; }
.selected-person { display: flex; justify-content: space-between; align-items: baseline; color: #087d7a; }
.selected-person small { color: #758588; }
#pin-form input { font-size: 22px; letter-spacing: 9px; text-align: center; }
.form-error { margin-top: 10px; color: #b74444; font-size: 12px; }
.user-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: -18px 0 22px; color: #607779; font-size: 12px; }
.user-bar button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; color: #087d7a; background: transparent; font-weight: 700; }
.user-bar .ui-icon { width: 15px; height: 15px; }
.user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
.hr-menu header { margin-top: 34px; }
.hr-menu header > small { display: block; margin-bottom: 8px; color: #087d7a; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.hr-menu-grid { display: grid; gap: 12px; margin-top: 28px; }
.hr-menu-grid button { width: 100%; min-height: 92px; display: flex; align-items: center; gap: 14px; padding: 17px; border: 1px solid #d4e1e2; border-radius: 16px; color: #087d7a; background: white; text-align: left; box-shadow: 0 6px 18px #17343b0b; }
.hr-menu-grid button > .ui-icon:first-child { width: 29px; height: 29px; }
.hr-menu-grid button > span { display: grid; flex: 1; gap: 5px; }
.hr-menu-grid strong { color: #17343b; font-size: 16px; }
.hr-menu-grid small { color: #758588; font-size: 11px; }
.hr-menu-grid .menu-arrow { width: 18px; height: 18px; color: #8aa0a2; }
.hr-menu-grid button.featured { border-color: #087d7a; color: white; background: linear-gradient(135deg, #087d7a, #315f68); box-shadow: 0 10px 25px #17343b1f; }
.hr-menu-grid button.featured strong { color: white; }
.hr-menu-grid button.featured small, .hr-menu-grid button.featured .menu-arrow { color: #c9e8e6; }
.stats-panel { margin-top: 8px; padding: 11px 12px; border-radius: 14px; background: #e5f5f4; }
.stats-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stats-heading > span { display: grid; gap: 1px; }
.stats-heading small { color: #688082; font-size: 9px; }
.stats-heading h2 { margin: 0; color: #17343b; font-size: 14px; }
.stats-heading > .ui-icon { width: 20px; height: 20px; color: #087d7a; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.stats-panel .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.stat-grid div { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; border-radius: 11px; background: white; }
.stat-grid div > .ui-icon { width: 18px; height: 18px; margin-top: 1px; color: #46a29e; }
.stat-grid div > span { display: grid; gap: 2px; }
.stat-grid small { color: #78878a; font-size: 10px; }
.stat-grid strong { color: #087d7a; font-size: 20px; }
.stat-grid strong em { font-size: 11px; font-style: normal; font-weight: 700; }
.stat-grid .featured { grid-column: 1 / -1; align-items: center; color: white; background: #087d7a; }
.stat-grid .featured > .ui-icon { width: 22px; height: 22px; color: #c9e8e6; }
.stat-grid .featured small { color: #c9e8e6; font-size: 10px; }
.stat-grid .featured strong { color: white; font-size: 24px; line-height: 1; }
.pending-status { display: grid; grid-template-columns: auto auto; align-items: center; gap: 1px 4px; margin-left: auto; padding: 5px 8px; border: 1px solid #8fc7c4; border-radius: 8px; color: white; background: #ffffff14; }
.pending-status .ui-icon { grid-row: 1 / 3; width: 14px; height: 14px; color: #d8efed; }
.pending-status span { color: #d8efed; font-size: 8px; font-weight: 600; }
.pending-status strong { font-size: 11px !important; }
.section:has(.leave-gauges) > .title-icon,
.section:has(.calendar) .title-icon {
  gap: 6px; margin-bottom: 8px; font-size: 14px;
}
.section:has(.leave-gauges) > .title-icon .ui-icon,
.section:has(.calendar) .title-icon .ui-icon {
  width: 16px; height: 16px;
}
.leave-gauges { display: grid; gap: 7px; }
.leave-gauges article { --gauge: #087d7a; position: relative; overflow: hidden; padding: 9px 10px; border-radius: 11px; background: white; }
.leave-gauges article.vacation { --gauge: #d88b20; }
.leave-gauges article.personal { --gauge: #6f60ac; }
.leave-gauges article.over-limit > :not(.hr-kpi-watermark) { position: relative; z-index: 1; }
.gauge-title { display: flex; align-items: center; gap: 8px; }
.gauge-title > .ui-icon { width: 18px; height: 18px; color: var(--gauge); }
.gauge-title > span { display: grid; flex: 1; gap: 1px; }
.gauge-title > span strong { font-size: 12px; }
.gauge-title > span small { color: #758588; font-size: 9px; }
.gauge-title > b { display: grid; justify-items: end; color: var(--gauge); font-size: 16px; line-height: 1; }
.gauge-title > b small { margin-top: 2px; color: #758588; font-size: 8px; font-weight: 500; }
.gauge-title > b.complete { justify-items: center; }
.gauge-title > b.complete .ui-icon { width: 16px; height: 16px; }
.leave-gauges article.over-limit { --gauge: #b74444; border: 1px solid #e7bcbc; background: #fff8f8; }
.gauge-title > b.over small { color: #b74444; }
.leave-gauges meter { width: 100%; height: 7px; margin-top: 7px; border: 0; background: #e3ebec; }
.leave-gauges meter::-webkit-meter-bar { border: 0; border-radius: 6px; background: #e3ebec; }
.leave-gauges meter::-webkit-meter-optimum-value { border-radius: 6px; background: var(--gauge); }
.leave-gauges meter::-moz-meter-bar { border-radius: 6px; background: var(--gauge); }
.gauge-warning { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #a23f3f; font-size: 9px; }
.gauge-warning .ui-icon { width: 13px; height: 13px; }
.type-stats { display: grid; gap: 9px; padding: 14px; border-radius: 14px; background: white; }
.type-stats > div { position: relative; display: grid; gap: 8px; overflow: hidden; }
.type-stats span { z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.type-stats small { color: #758588; font-size: 10px; }
.type-stats i { height: 5px; border-radius: 4px; background: #6ab7b3; }
.hr-header small { display: block; margin-bottom: 7px; color: #087d7a; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.hr-spotlight { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 18px; border-radius: 16px; color: white; background: linear-gradient(135deg, #087d7a, #315f68); box-shadow: 0 10px 25px #17343b1f; }
.hr-spotlight > .ui-icon { width: 34px; height: 34px; color: #c9e8e6; }
.hr-spotlight span { display: grid; gap: 3px; }
.hr-spotlight small { color: #c9e8e6; font-size: 10px; }
.hr-spotlight strong { font-size: 18px; }
.hr-spotlight em { color: #d9eeec; font-size: 11px; font-style: normal; }
.approval-list { display: grid; gap: 12px; }
.approval-list article { padding: 15px; border-radius: 14px; background: white; }
.approval-list article > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.approval-list article small { color: #758588; font-size: 10px; }
.approval-list article > p { margin-top: 8px; color: #087d7a; font-size: 12px; font-weight: 700; }
.approval-list blockquote { margin: 10px 0; padding-left: 10px; border-left: 3px solid #d9e7e8; color: #4d5d60; font-size: 12px; }
.request-code { flex: none; color: #668083; font-size: 9px; }
.handover { display: flex; align-items: center; gap: 6px; margin: 10px 0; color: #607779; font-size: 10px; }
.handover .ui-icon { width: 15px; height: 15px; color: #087d7a; }
.hr-empty { display: grid; justify-items: center; gap: 5px; padding: 22px; border-radius: 14px; background: white; }
.hr-empty .ui-icon { width: 28px; height: 28px; color: #2a9360; }
.hr-history { overflow: hidden; border-radius: 14px; background: white; }
.hr-history article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid #e3eaeb; }
.hr-history article:last-child { border-bottom: 0; }
.hr-history article > span { display: grid; gap: 4px; }
.hr-history article > span:last-child { flex: none; justify-items: end; }
.hr-history small { color: #758588; font-size: 9px; }
.decision-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.decision-buttons:has(button:nth-child(3)) { grid-template-columns: 1fr 1fr 1fr; }
.decision-buttons button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #c8d5d6; border-radius: 10px; color: #a23f3f; background: white; font-weight: 700; }
.decision-buttons .ui-icon { width: 17px; height: 17px; }
.decision-buttons button:last-child { border-color: #087d7a; color: white; background: #087d7a; }
.year-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; color: #607779; font-size: 12px; font-weight: 700; }
.year-filter > span { display: inline-flex; align-items: center; gap: 6px; }
.year-filter .ui-icon { width: 17px; height: 17px; color: #087d7a; }
.year-filter select { min-height: 40px; padding: 7px 30px 7px 11px; border: 1px solid #bfd0d1; border-radius: 10px; color: #17343b; background: white; font: inherit; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.section-heading h2 { margin: 0; }
.section-heading select { min-height: 36px; padding: 6px 28px 6px 9px; border: 1px solid #bfd0d1; border-radius: 9px; color: #17343b; background: white; font: inherit; font-size: 11px; }
.calendar-heading { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 8px; }
.calendar-heading .title-icon { font-size: 14px; gap: 6px; }
.calendar-heading .title-icon .ui-icon { width: 16px; height: 16px; }
.month-nav { width: 100%; display: flex; align-items: center; gap: 4px; }
.month-nav select[name="dashboardMonth"] { flex: 1; min-height: 30px; padding: 4px 24px 4px 8px; font-size: 11px; border-radius: 8px; }
.month-nav select[name="calendarYear"] { width: 88px; min-height: 30px; padding: 4px 24px 4px 8px; font-size: 11px; border-radius: 8px; }
.month-nav button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #bfd0d1; border-radius: 8px; color: #087d7a; background: white; }
.month-nav button:hover { border-color: #087d7a; background: #e5f5f4; }
.month-nav button:focus-visible { outline: 3px solid #d9efee; outline-offset: 2px; }
.month-nav button .ui-icon { width: 15px; height: 15px; }
.calendar { padding: 8px; border-radius: 12px; background: white; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 8px; color: #66777a; font-size: 8px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 4px; }
.calendar-legend i { width: 7px; height: 7px; border-radius: 3px; background: #bd5b5b; }
.calendar-legend i.vacation { background: #d88b20; }
.calendar-legend i.personal { background: #6f60ac; }
.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-week b { padding-bottom: 5px; color: #819092; font-size: 8px; text-align: center; }
.calendar-day, .calendar-spacer { min-height: 40px; }
.calendar-day { display: grid; align-content: start; justify-items: center; gap: 2px; padding: 3px 1px; border: 1px solid transparent; border-top-color: #edf1f2; border-radius: 6px; color: #536467; background: white; font-size: 10px; }
.calendar-day:not(:disabled):hover { border-color: #91c4c1; color: #087d7a; background: #edf8f7; }
.calendar-day:focus-visible { z-index: 2; outline: 3px solid #9edbd8; outline-offset: 1px; }
.calendar-day.non-working:not(.has-leave) { color: #aab3b5; background: #fafcfc; cursor: not-allowed; }
.calendar-day.has-leave { position: relative; z-index: 1; border-color: var(--leave-border, #dcaaaa); color: var(--leave-color, #863838); background: var(--leave-bg, #fff0f0); box-shadow: 0 2px 7px #7f343417; }
.calendar-day.has-leave.vacation { border-color: #e8c07e; color: #8a5a12; background: #fff7e8; box-shadow: 0 2px 7px #8a5a1217; }
.calendar-day.has-leave.personal { border-color: #c4b9e8; color: #584791; background: #f4f1ff; box-shadow: 0 2px 7px #58479117; }
.calendar-day.has-leave b { font-size: 11px; }
.calendar-day.has-leave.is-pending {
  border-color: var(--leave-color, #ce8218);
  color: #fff;
  background: color-mix(in srgb, var(--leave-color, #ce8218) 78%, #fff);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--leave-color, #ce8218) 28%, transparent),
    0 4px 12px color-mix(in srgb, var(--leave-color, #ce8218) 28%, transparent);
  animation: hr-cal-day-pulse 1.15s ease-in-out infinite;
  z-index: 2;
}
.calendar-day.has-leave.is-pending.vacation,
.calendar-day.has-leave.is-pending.personal,
.calendar-day.has-leave.is-pending.sick {
  border-color: var(--leave-color);
  color: #fff;
  background: color-mix(in srgb, var(--leave-color) 78%, #fff);
}
.calendar-day.has-leave.is-pending b { color: #fff; text-shadow: 0 1px 1px #0003; }
.calendar-pending-ping {
  position: absolute; top: 3px; right: 3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--leave-color, #ce8218) 70%, #c45c26);
  animation: hr-cal-ping 1.15s ease-out infinite;
}
.calendar-days span { width: 100%; display: grid; gap: 1px; }
.calendar-days small { padding: 1px; border-radius: 3px; color: white; background: #b94f4f; font-size: 6px; font-weight: 800; line-height: 1; text-align: center; }
.calendar-days small.vacation { background: #ce8218; }
.calendar-days small.personal { background: #6f60ac; }
.calendar-modal { position: fixed; z-index: 20; inset: 0; display: grid; align-items: end; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #102e35a8; backdrop-filter: blur(3px); }
.calendar-detail { position: relative; overflow: hidden; width: min(100%, 430px); max-height: min(82vh, 620px); margin: auto; border: 1px solid #b8d5d3; border-radius: 22px; background: white; box-shadow: 0 22px 60px #102e3545; animation: modal-in .18s ease-out; }
.calendar-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px; color: #087d7a; background: linear-gradient(135deg, #e5f5f4, #f4fbfa); }
.calendar-detail-head > span { display: flex; align-items: center; gap: 9px; }
.calendar-detail-head > span > .ui-icon { width: 28px; height: 28px; }
.calendar-detail-head > span > span { display: grid; gap: 2px; }
.calendar-detail-head small { color: #678082; font-size: 10px; }
.calendar-detail-head strong { color: #17343b; font-size: 15px; }
.calendar-detail-head button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #d3e5e4; border-radius: 50%; color: #607779; background: white; box-shadow: 0 3px 10px #17343b12; }
.calendar-detail-head button .ui-icon { width: 17px; height: 17px; }
.calendar-detail-body { overflow-y: auto; max-height: 420px; padding: 6px 18px; }
.calendar-detail article { padding: 16px 0; }
.calendar-detail article + article { border-top: 1px solid #e3eaeb; }
.detail-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-type { display: flex; align-items: center; gap: 7px; color: #a34747; }
.detail-type.vacation { color: #986615; }
.detail-type.personal { color: #65559f; }
.detail-type .ui-icon { width: 20px; height: 20px; }
.calendar-detail dl { margin-top: 10px; }
.calendar-detail dl div { padding: 10px 0; border-bottom: 1px solid #edf1f2; }
.calendar-detail dl div:last-child { border-bottom: 0; }
.calendar-detail-footer { padding: 12px 18px 18px; }
.calendar-detail-footer .primary { min-height: 44px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@media (min-width: 700px) { .calendar-modal { align-items: center; } }
.month-summary { overflow: hidden; margin-top: 8px; border: 1px solid #c7e0df; border-radius: 12px; background: white; box-shadow: 0 4px 12px #17343b0a; }
.month-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: white; background: #087d7a; }
.month-summary-head > span { display: grid; gap: 1px; }
.month-summary-head small { color: #c9e8e6; font-size: 9px; }
.month-summary-head strong { font-size: 20px; line-height: 1; }
.month-summary-head strong em { font-size: 11px; font-style: normal; }
.month-summary-head > .ui-icon { width: 22px; height: 22px; color: #c9e8e6; }
.month-breakdown {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
}
.month-breakdown > span {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 7px 4px;
  border-radius: 8px;
  color: #9c4141;
  background: #fff0f0;
  text-align: center;
}
.month-breakdown > span.vacation { color: #8a5a12; background: #fff7e8; }
.month-breakdown > span.personal { color: #584791; background: #f4f1ff; }
.month-breakdown .ui-icon { width: 14px; height: 14px; }
.month-breakdown b {
  color: #273b3f;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.month-breakdown strong { font-size: 9px; }
.month-empty { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #087d7a; }
.month-empty > .ui-icon { width: 20px; height: 20px; }
.month-empty > span { display: grid; gap: 1px; }
.month-empty strong { color: #273b3f; font-size: 11px; }
.month-empty small { color: #758588; font-size: 8px; }
.history-head { align-items: flex-start; }
.history-swipe-hint {
  flex: none;
  max-width: 18ch;
  margin: 0;
  color: #8a9a9d;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
}
.history-list { overflow: hidden; border-radius: 14px; background: white; }
.history-list > .history-item,
.history-list > article,
.history-list > .history-swipe { border-bottom: 1px solid #e3eaeb; }
.history-list > .history-item:last-child,
.history-list > article:last-child,
.history-list > .history-swipe:last-of-type { border-bottom: 0; }
.history-list .history-item,
.history-list article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
}
.history-list .history-item {
  width: 100%;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.history-list .history-item > span,
.history-list article > span { display: grid; gap: 3px; }
.history-list .history-item > span:last-child,
.history-list article > span:last-child { justify-items: end; }
.history-list small { color: #78878a; font-size: 10px; }
.history-list > .history-item:hover,
.history-list.compact > .history-item:hover,
.history-list .history-swipe-front.history-item:hover {
  background: #f4fafa;
}
.history-list .history-item:focus-visible {
  outline: 2px solid #9edbd8;
  outline-offset: -2px;
}
/* Leave request detail sheet */
.leave-sheet-modal { z-index: 30; }
.leave-sheet {
  --leave-accent: #0b6e6a;
  --leave-soft: #e7f4f3;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 440px);
  max-height: min(86vh, 680px);
  margin: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid #c9dedc;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--leave-accent) 14%, transparent), transparent 55%),
    linear-gradient(180deg, #f7fbfb 0%, #ffffff 38%);
  box-shadow:
    0 1px 0 #ffffffcc inset,
    0 28px 70px #102e3540;
  animation: leave-sheet-in .22s cubic-bezier(.2, .8, .2, 1);
}
.leave-sheet-sick { --leave-accent: #b94f4f; --leave-soft: #fff0f0; }
.leave-sheet-personal { --leave-accent: #5f6f8f; --leave-soft: #eef2f7; }
.leave-sheet-vacation { --leave-accent: #b07a1d; --leave-soft: #fff6e8; }
.leave-sheet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--leave-accent), color-mix(in srgb, var(--leave-accent) 35%, #2bb5ad));
  pointer-events: none;
}
@keyframes leave-sheet-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .leave-sheet { animation: none; }
}
.leave-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
}
.leave-sheet-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.leave-sheet-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 14px;
  color: var(--leave-accent);
  background: var(--leave-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leave-accent) 18%, transparent);
}
.leave-sheet-mark .ui-icon { width: 22px; height: 22px; }
.leave-sheet-brand > div { min-width: 0; display: grid; gap: 2px; }
.leave-sheet-brand small {
  color: #7a9093;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.leave-sheet-brand strong {
  color: #17343b;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.leave-sheet-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid #d7e4e3;
  border-radius: 50%;
  color: #6d8083;
  background: #fff;
  box-shadow: 0 4px 12px #17343b0f;
}
.leave-sheet-close .ui-icon { width: 16px; height: 16px; }
.leave-sheet-close:hover { color: #0b6e6a; border-color: #a9cecb; }
.leave-sheet-body {
  position: relative;
  overflow: auto;
  min-height: 0;
  padding: 0 18px 8px;
  overscroll-behavior: contain;
}
.leave-sheet-watermark {
  position: absolute;
  inset: 8% -6% 14%;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(36px, 12vw, 56px);
  font-weight: 800;
  font-style: normal;
  letter-spacing: .08em;
  line-height: 1;
  opacity: .28;
  transform: rotate(-18deg);
  white-space: nowrap;
  user-select: none;
  mix-blend-mode: multiply;
}
.leave-sheet-watermark.is-ok { color: #1b5c3a; }
.leave-sheet-watermark.is-bad { color: #8a3030; }
.leave-sheet-watermark.is-warn { color: #c45c26; }
.leave-sheet-watermark.is-wait { color: #0b6e6a; }
.leave-sheet-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.leave-sheet-track {
  min-width: 0;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid #dce8e7;
  background: #f3f8f8;
  color: #3f5558;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leave-sheet-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.leave-sheet-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 12px 11px;
  border-radius: 14px;
  border: 1px solid #e2ecec;
  background: #fff;
}
.leave-sheet-metric.is-wide { grid-column: 1 / -1; }
.leave-sheet-metric.is-wide.has-attach {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.leave-sheet-metric-main {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.leave-sheet-metric > small,
.leave-sheet-metric-main > small {
  color: #8a9ea1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.leave-sheet-metric > b,
.leave-sheet-metric-main > b {
  color: #17343b;
  font-size: 22px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.leave-sheet-metric > b > i,
.leave-sheet-metric-main > b > i {
  margin-left: 4px;
  color: #7a9093;
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}
.leave-sheet-metric > b.is-text,
.leave-sheet-metric-main > b.is-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.leave-sheet-block,
.leave-sheet-note {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid #e5eeee;
  background: #fff;
}
.leave-sheet-block > header,
.leave-sheet-note > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.leave-sheet-block > header > span,
.leave-sheet-note > header {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5f7376;
  font-size: 11px;
  font-weight: 750;
}
.leave-sheet-block .ui-icon,
.leave-sheet-note .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--leave-accent);
}
.leave-sheet-block p,
.leave-sheet-note p {
  margin: 0;
  color: #243f45;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.leave-sheet-metric .leave-sheet-files {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 12px;
  max-width: min(100%, 240px);
  flex: none;
}
.leave-sheet-metric .mail-attach-link {
  max-width: 220px;
  font-size: 12px;
}
.leave-sheet-note.is-hr {
  border-color: #ecd2a8;
  background: linear-gradient(180deg, #fff9f0, #fff6e8);
}
.leave-sheet-note.is-hr > header { color: #8a4b12; }
.leave-sheet-note.is-hr .ui-icon { color: #c45c26; }
.leave-sheet-note.is-hr p { color: #6d3d16; }
.leave-sheet-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 8px;
  color: #8a9ea1;
}
.leave-sheet-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.leave-sheet-meta .ui-icon { width: 14px; height: 14px; }
.leave-sheet-meta small {
  font-size: 11px;
  font-weight: 600;
}
.leave-sheet-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 18px;
  border-top: 1px solid #e8f0f0;
  background: linear-gradient(180deg, #fbfdfe, #ffffff);
}
.leave-sheet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #d4e1e2;
  border-radius: 12px;
  background: #fff;
  color: #3f5558;
  font-size: 13px;
  font-weight: 700;
}
.leave-sheet-btn .ui-icon { width: 16px; height: 16px; }
.leave-sheet-btn:hover {
  border-color: #9fc9c5;
  color: #0b6e6a;
  background: #f3fbfa;
}
.leave-sheet-btn.ghost {
  color: #8a4b4b;
  border-color: #e0c4c4;
}
.leave-sheet-btn.ghost:hover {
  color: #9b2c2c;
  border-color: #d9a0a0;
  background: #fff7f7;
}
.leave-sheet-btn.primary {
  border-color: transparent;
  background: #087d7a;
  color: #fff;
  box-shadow: 0 8px 18px #087d7a33;
}
.leave-sheet-btn.primary:hover {
  background: #076966;
  color: #fff;
  border-color: transparent;
}
@media (max-width: 520px) {
  .leave-sheet {
    width: 100%;
    border-radius: 22px 22px 18px 18px;
  }
  .leave-sheet-metric > b { font-size: 20px; }
}
.history-swipe {
  position: relative;
  overflow: hidden;
  background: #fff;
  touch-action: pan-y;
}
.history-swipe-actions {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 2;
  width: 112px;
  display: grid;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.history-swipe.is-open .history-swipe-actions,
.history-swipe.is-dragging .history-swipe-actions { pointer-events: auto; }
.history-swipe.is-dragging .history-swipe-actions { transition: none; }
.history-swipe-cancel {
  display: grid;
  place-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #c45c26, #8a3030);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: -8px 0 18px #0f2a2e22;
}
.history-swipe-cancel .ui-icon { width: 18px; height: 18px; }
.history-swipe-front {
  position: relative;
  z-index: 1;
  background: #fff;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.history-swipe.is-dragging .history-swipe-front { cursor: grabbing; }
.history-toggle { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-top: 1px solid #e3eaeb; color: #087d7a; background: #f7fbfb; font-size: 11px; font-weight: 700; }
.history-toggle:hover { background: #e5f5f4; }
.history-toggle:focus-visible { outline: 3px solid #9edbd8; outline-offset: -3px; }
.history-toggle .ui-icon { width: 16px; height: 16px; }
.status { color: #a27619; font-size: 10px; }
.status.approved { color: #197544; }
.status.rejected { color: #a23f3f; }
.fab,
body > .fab[data-viewport-fab] {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  left: auto;
  top: auto;
  z-index: 80;
  display: flex; align-items: center; gap: 7px;
  min-height: 58px; padding: 0 20px 0 15px; border: 0; border-radius: 30px;
  color: white; background: #087d7a; box-shadow: 0 10px 28px #075b5960;
  font-size: 16px; font-weight: 800;
  margin: 0;
}
.fab .ui-icon { width: 23px; height: 23px; }
.fab:focus-visible { outline: 4px solid #9edbd8; outline-offset: 3px; }
section:has(.fab) { padding-bottom: 64px; }
@media (max-width: 360px) { #app { padding-inline: 16px; } .date-panel { grid-template-columns: 1fr; } .stats-panel .stat-grid { grid-template-columns: 1fr; } .stat-grid .featured { grid-column: auto; } }

.policy-note.warning { color: #8a4b12; background: #fff6e8; }
.policy-note.warning small { display: block; opacity: 0.85; }
.policy-note.quota-inline { margin-top: 10px; }
.leave-list + .policy-note.quota-inline { margin-top: 10px; }
.leave-list + .policy-note.quota-inline + .leave-types-toggle { margin-top: 10px; }
.leave-list button.over-quota.selected { background: #fff7ec; box-shadow: inset 0 0 0 1px #efd0a0; }
.ack-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 13px; background: #fffaf2; border: 1px solid #f0d7b0; font-size: 13px; color: #5c3d16; }
.ack-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: #2f8f88; }
.leave-list button.over-quota small { color: #a25a16; }
.quota-split, .self-approve-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 12px; }
.quota-split { color: #8a4b12; background: #fff6e8; }
.self-approve-note { color: #8a3030; background: #fff1f1; }
.quota-split .ui-icon, .self-approve-note .ui-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.paid-split { display: grid; gap: 8px; margin-top: 10px; }
.quota-split.muted { color: #3f6d69; background: #eef8f7; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.split-grid label { display: grid; gap: 4px; font-size: 11px; color: #5b6b6a; }
.split-grid input { width: 100%; border: 1px solid #c9d8d6; border-radius: 10px; padding: 10px 12px; font: inherit; color: #173331; background: #fff; }
.split-grid input[readonly] { background: #f3f7f7; color: #5b6b6a; }
.split-hint { font-size: 11px; color: #6a7c7a; }

.issued-link { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 14px; border-radius: 14px; background: #eaf8ef; color: #1b5c3a; }
.issued-link > span { display: grid; gap: 4px; flex: 1; min-width: 0; }
.issued-link strong { word-break: break-all; font-size: 12px; }
.issued-link button, .attachment-list .file-row { border: 0; background: #fff; }
.personal-link-list { display: grid; gap: 10px; }
.personal-link-list article { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #d7e4e2; }
.link-status { font-size: 12px; color: #8a4b12; }
.link-status.active { color: #1b5c3a; }
.attachment-list { display: grid; gap: 6px; margin-top: 8px; }
.attachment-list .file-row { width: 100%; text-align: left; cursor: pointer; }

.history-list .history-item > span:last-child,
.history-list article > span:last-child { display: grid; justify-items: end; gap: 6px; }
.history-list .history-item.is-action-needed,
.history-list article.is-action-needed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px;
  border: 1.5px solid #e8b06a;
  background: linear-gradient(180deg, #fff8ef, #fff3e4);
  box-shadow: inset 3px 0 0 #c45c26, 0 6px 16px #c45c2614;
}
.history-list .history-item.is-action-needed .history-action-banner,
.history-list article.is-action-needed .history-action-banner {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 5px 8px; border-radius: 8px;
  background: #c45c26; color: #fff;
  font-size: 11px; font-style: normal; font-weight: 800; line-height: 1.3;
}
.history-list .history-item.is-action-needed .history-action-banner .ui-icon,
.history-list article.is-action-needed .history-action-banner .ui-icon {
  width: 14px; height: 14px; flex: none;
}
.history-list .history-item.is-action-needed .history-hr-note,
.history-list article.is-action-needed .history-hr-note {
  color: #8a4b12; font-weight: 700;
}
.history-list .history-item.is-action-needed .status.action,
.history-list article.is-action-needed .status.action {
  color: #c45c26; font-size: 11px; font-weight: 800;
}
.history-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 30px; padding: 0 11px; border: 0; border-radius: 999px;
  background: #c45c26; color: #fff;
  font-size: 11px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 10px #c45c2633;
}
.history-action-btn:hover { filter: brightness(1.05); }
.history-action-btn .ui-icon { width: 14px; height: 14px; }
.history-action-count {
  flex: none; margin: 0; color: #c45c26; font-size: 11px; font-weight: 800;
}
.cancel-request { display: inline-flex; align-items: center; gap: 4px; border: 0; background: #fff1f1; color: #8a3030; border-radius: 999px; padding: 6px 10px; font-size: 11px; }
.cancel-request .ui-icon { width: 14px; height: 14px; }
.self-approve-note.compact { margin: 0; padding: 0; background: transparent; font-size: 10px; }
.hr-history .cancel-request { margin-top: 2px; }

.user-actions .badge { position: absolute; margin: -8px 0 0 12px; min-width: 16px; height: 16px; border-radius: 999px; background: #b74444; color: #fff; font-size: 10px; line-height: 16px; text-align: center; padding: 0 4px; }
.user-actions button { position: relative; }
.decision-buttons.wide { grid-template-columns: 1fr 1fr; }
.decision-buttons.wide button:last-child { grid-column: 1 / -1; }
.qr-wrap { display: grid; gap: 8px; justify-items: center; }
.qr-wrap img { width: 160px; height: 160px; border-radius: 12px; background: #fff; }
.export-card { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #d7e4e2; text-decoration: none; color: inherit; cursor: pointer; }
.personal-link-list article.unread { border-color: #087d7a; background: #f3fbfa; }
.master-form { display: grid; gap: 10px; }
.master-form h2 { margin: 0; font-size: 16px; }
.master-inline-form { display: grid; gap: 8px; width: 100%; }

/* Work schedule / system settings */
.settings-page { gap: 14px; }
.settings-shell {
  display: grid; gap: 16px;
  padding: 4px 2px 8px;
}
.settings-mast {
  display: grid; gap: 6px;
  padding: 4px 2px 2px;
}
.settings-mast small {
  color: #6d8083; font-size: 11px; font-weight: 700; letter-spacing: .05em;
}
.settings-mast h1 {
  margin: 0; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.04em; line-height: 1.1;
}
.settings-mast p {
  margin: 0; max-width: 46ch; color: #5f787a; font-size: 13.5px; line-height: 1.45;
}
.settings-form { display: grid; gap: 14px; }
.settings-block {
  display: grid; gap: 14px; padding: 18px;
  border: 1px solid #d5e4e2; border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,251,251,.96));
  box-shadow: 0 10px 28px rgba(15, 42, 46, .04);
}
.settings-block.is-break {
  border-color: #e7d4b0;
  background:
    radial-gradient(120% 80% at 100% 0%, #fff6e8, transparent 46%),
    linear-gradient(180deg, #fffdf9, #fff);
}
.settings-block.is-email {
  border-color: #c5d9ef;
  background:
    radial-gradient(120% 80% at 0% 0%, #eef5fc, transparent 48%),
    linear-gradient(180deg, #fbfcfe, #f5f9fc);
}
.settings-block-head h2 { margin: 0; font-size: 17px; color: #17343b; }
.settings-block-head p { margin: 4px 0 0; color: #708285; font-size: 12.5px; line-height: 1.4; }
.settings-text-field {
  display: grid; gap: 6px;
}
.settings-text-field > span {
  color: #5f787a; font-size: 12px; font-weight: 700;
}
.settings-text-field input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid #c9dddb; border-radius: 14px;
  background: #fff; color: #17343b; font-size: 15px;
}

.settings-day {
  display: grid; gap: 14px; padding: 16px;
  border-radius: 20px; border: 1px solid #d0e3e1;
  background:
    radial-gradient(140% 100% at 0% 0%, #dff5f2, transparent 42%),
    linear-gradient(160deg, #f4fbfa, #eaf4f3);
}
.settings-day-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.settings-day-top small {
  display: block; color: #5f787a; font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.settings-day-top strong {
  display: block; margin-top: 3px; color: #17343b; font-size: 18px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.settings-day-chip {
  flex: none; align-self: center;
  padding: 7px 10px; border-radius: 999px;
  color: #0b6e6a; background: #fff; border: 1px solid #b9d8d5;
  font-size: 11px; font-weight: 800;
}
.settings-day-chip.is-bad {
  color: #8a4b4b; border-color: #e0c4c4; background: #fff7f7;
}
.settings-day-track-wrap { display: grid; gap: 8px; }
.settings-day-track {
  position: relative; height: 34px; border-radius: 999px; overflow: visible;
  background:
    repeating-linear-gradient(90deg, rgba(155, 180, 178, .35) 0 1px, transparent 1px 12.5%),
    linear-gradient(180deg, #dceae8, #e8f1f0);
  box-shadow: inset 0 1px 2px rgba(15, 42, 46, .06);
}
.settings-day-work,
.settings-day-break {
  position: absolute; top: 7px; bottom: 7px; border-radius: 999px;
  transition: left .22s ease, width .22s ease;
}
.settings-day-work {
  background: linear-gradient(90deg, #2bb3ab, #0b6e6a);
  box-shadow: 0 8px 18px rgba(11, 110, 106, .22);
}
.settings-day-break {
  background: linear-gradient(90deg, #f2c57d, #d9983a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.settings-day-pin {
  position: absolute; top: -2px; width: 4px; height: 38px;
  margin-left: -2px; border-radius: 999px; background: #17343b;
  box-shadow: 0 0 0 3px rgba(255,255,255,.55);
  transition: left .22s ease;
}
.settings-day-ticks {
  position: relative; height: 16px; color: #7a9093; font-size: 10px; font-weight: 700;
}
.settings-day-ticks span {
  position: absolute; transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}
.settings-day-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.settings-day-stats article {
  display: grid; gap: 4px; padding: 10px 11px;
  border-radius: 14px; background: rgba(255,255,255,.78);
  border: 1px solid rgba(213, 228, 226, .9);
}
.settings-day-stats small {
  display: inline-flex; align-items: center; gap: 5px;
  color: #5f787a; font-size: 10.5px; font-weight: 700;
}
.settings-day-stats .ui-icon { width: 13px; height: 13px; }
.settings-day-stats strong {
  color: #17343b; font-size: 15px; font-variant-numeric: tabular-nums;
}
.settings-day-stats .is-net {
  border-color: #9ec9c6;
  background: linear-gradient(160deg, #eef8f7, #e4f3f1);
}
.settings-day-stats .is-net strong { color: #0b6e6a; }

.settings-clocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px; align-items: stretch;
}
.settings-clocks-bridge {
  display: grid; align-content: center; justify-items: center; gap: 8px;
  color: #9aabb0; width: 28px; padding-top: 28px;
}
.settings-clocks-bridge span {
  width: 2px; height: 18px; border-radius: 999px; background: #d5e0e0;
}
.settings-clocks-bridge .ui-icon { width: 16px; height: 16px; }
.settings-block.is-break .settings-clocks-bridge { color: #c4a06a; }
.settings-block.is-break .settings-clocks-bridge span { background: #e7d4b0; }

.settings-clock {
  display: grid; gap: 10px; min-width: 0; padding: 12px;
  border-radius: 18px; border: 1px solid #d2e3e1;
  background:
    linear-gradient(180deg, #fff, #f5fafa);
}
.settings-clock.is-break {
  border-color: #e5d2ab;
  background: linear-gradient(180deg, #fff, #fffaf1);
}
.settings-clock-head span {
  display: block; color: #547173; font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.settings-clock-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4px; align-items: center;
  padding: 4px; border-radius: 16px;
  background: #eef5f4;
}
.settings-clock.is-break .settings-clock-board { background: #f7efe2; }
.settings-clock-col {
  display: grid; justify-items: center; gap: 2px;
}
.settings-step {
  display: grid; place-items: center;
  width: 100%; min-height: 34px; border: 0; border-radius: 12px;
  color: #0b6e6a; background: transparent; cursor: pointer;
}
.settings-step:hover { background: rgba(255,255,255,.72); }
.settings-step:active { transform: translateY(1px); }
.settings-clock.is-break .settings-step { color: #b07a28; }
.settings-step .ui-icon { width: 18px; height: 18px; }
.settings-clock-num {
  display: grid; place-items: center;
  min-width: 2ch; min-height: 42px;
  color: #17343b; font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.settings-clock-colon {
  color: #8aa0a2; font-size: 28px; font-weight: 800; padding-bottom: 2px;
}
.settings-computed {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius: 20px; border: 1px solid #9ec9c6;
  background:
    radial-gradient(120% 90% at 100% 0%, #d9f3ef, transparent 42%),
    linear-gradient(145deg, #eef9f7, #e2f2f0);
}
.settings-computed-mark {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 13px;
  color: #0b6e6a; background: #fff;
  border: 1px solid #c5dfdc;
}
.settings-computed-mark .ui-icon { width: 20px; height: 20px; }
.settings-computed > div { display: grid; gap: 3px; min-width: 0; }
.settings-computed small {
  color: #4f7875; font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.settings-computed strong {
  color: #17343b; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.2;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-weight: 800;
}
.settings-computed strong i {
  font-style: normal; color: #8aa0a2; font-weight: 700; margin: 0 .15em;
}
.settings-computed.is-invalid {
  border-color: #e0c4c4;
  background: linear-gradient(145deg, #fff7f7, #fff1f1);
}
.settings-computed.is-invalid .settings-computed-mark {
  color: #8a4b4b; border-color: #e0c4c4;
}
.settings-computed.is-invalid small,
.settings-computed.is-invalid strong { color: #8a4b4b; }

.settings-session { display: grid; gap: 12px; }
.settings-session-pills {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.settings-session-pill {
  position: relative;
  display: grid; gap: 2px; align-content: center;
  min-height: 74px; padding: 10px 8px;
  border: 1px solid #d5e4e2; border-radius: 16px;
  background: #fff; cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.settings-session-pill:not(.is-custom) > input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.settings-session-pill strong { color: #17343b; font-size: 13px; }
.settings-session-pill small { color: #7a9093; font-size: 10px; line-height: 1.25; }
.settings-session-pill:hover { border-color: #9ec9c6; }
.settings-session-pill.is-on {
  border-color: #0b6e6a;
  background: linear-gradient(165deg, #eef8f7, #e3f3f1);
  box-shadow: 0 8px 18px rgba(11, 110, 106, .1);
  transform: translateY(-1px);
}
.settings-session-pill.is-on strong { color: #0b6e6a; }
.settings-session-pill.is-custom {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 72px; padding: 12px 14px; text-align: left; cursor: default;
}
.settings-session-custom-trigger {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1; cursor: pointer;
}
.settings-session-custom-trigger > input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.settings-session-custom-trigger span { display: grid; gap: 2px; min-width: 0; }
.settings-session-custom-trigger strong { font-size: 14px; }
.settings-session-custom-trigger small { font-size: 11px; }
.settings-session-pill.is-custom:not(.is-on):hover {
  border-color: #9ec9c6; background: #f8fcfc;
}
.settings-session-inline-days {
  display: grid;
  grid-template-columns: 44px minmax(96px, 140px) 44px;
  gap: 8px; align-items: center; flex: none;
  animation: settings-session-in .2s ease;
}
.settings-session-inline-days[hidden] { display: none !important; }
.settings-days-nudge {
  display: grid; place-items: center;
  width: 44px; height: 48px; border: 1px solid #c5dfdc; border-radius: 14px;
  color: #0b6e6a; background: #fff; cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.settings-days-nudge:hover {
  border-color: #0b6e6a; background: #e7f4f2;
}
.settings-days-nudge:active { transform: translateY(1px); }
.settings-days-nudge .ui-icon { width: 18px; height: 18px; }
.settings-days-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 6px;
  min-height: 48px; padding: 6px 12px;
  border: 1.5px solid #9ec9c6; border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(158, 201, 198, .2);
}
.settings-days-value input {
  width: 100%; min-width: 0; border: 0; outline: none; background: transparent;
  color: #17343b; font: inherit; font-size: 24px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1;
  text-align: center;
  -moz-appearance: textfield;
}
.settings-days-value input::-webkit-outer-spin-button,
.settings-days-value input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.settings-days-value span {
  color: #5f787a; font-size: 12px; font-weight: 800;
}
@keyframes settings-session-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.settings-actions {
  display: flex; justify-content: flex-end;
  position: sticky; bottom: 8px; z-index: 2;
}
.settings-actions .primary {
  min-height: 50px; padding-inline: 22px;
  box-shadow: 0 12px 28px rgba(8, 125, 122, .24);
}

@media (max-width: 820px) {
  .settings-session-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .settings-clocks { grid-template-columns: 1fr; }
  .settings-clocks-bridge {
    width: 100%; padding-top: 0;
    grid-template-columns: 1fr auto 1fr; align-items: center;
  }
  .settings-clocks-bridge span {
    width: 100%; height: 2px;
  }
  .settings-day-stats { grid-template-columns: 1fr; }
  .settings-session-pill.is-custom {
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .settings-session-inline-days {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    width: 100%;
  }
  .settings-clock-num { font-size: 38px; }
}

/* Departments master list */
.dept-page { gap: 14px; }
.dept-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.dept-page-head small {
  display: block; margin-bottom: 4px; color: #6d8083;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.dept-page-head h1 { margin: 0; font-size: clamp(26px, 3vw, 32px); }
.dept-page-head p { margin-top: 4px; color: #738085; font-size: 13px; }
.dept-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.dept-stats article {
  display: grid; gap: 4px; padding: 14px 16px;
  border: 1px solid #d7e4e2; border-radius: 16px;
  background:
    linear-gradient(165deg, #f7fbfb, #fff 55%),
    #fff;
}
.dept-stats small { color: #6d8083; font-size: 11px; font-weight: 700; }
.dept-stats strong {
  color: #17343b; font-size: 22px; font-variant-numeric: tabular-nums;
  font-family: var(--font-display); letter-spacing: -.02em;
}
.dept-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: end;
  padding: 14px 16px;
  border: 1px solid #d7e4e2; border-radius: 16px;
  background:
    linear-gradient(165deg, #f7fbfb, #fff 60%),
    #fff;
}
.dept-create .field { margin: 0; }
.dept-create .field span {
  display: block; margin-bottom: 6px;
  color: #6d8083; font-size: 11px; font-weight: 700;
}
.dept-create .form-error { grid-column: 1 / -1; margin: 0; }
.dept-create button.primary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 16px;
}
.lt-page .dept-list { --dept-cols: 32px 48px minmax(0, 1.5fr) 140px 100px 168px; }
.lt-create {
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, .9fr) auto;
}
.lt-rule {
  display: grid; place-items: center;
  color: #3f5558; font-size: 12px; font-weight: 700; text-align: center;
}
.lt-inline-form {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(150px, .85fr);
  gap: 8px; min-width: 0; flex: 1; width: 100%;
}
.lt-inline-form input {
  width: 100%; min-width: 0; min-height: 36px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid #b7d4d2; border-radius: 10px;
  background: #fff; color: #17343b; font-size: 13px; font-weight: 700;
}
.lt-select,
.lt-select::picker(select) {
  appearance: base-select;
}
.lt-select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #b7d4d2;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fbfffe, #f3faf9);
  color: #17343b;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lt-select:hover { border-color: #9ec9c6; }
.lt-select:focus-within,
.lt-select:open {
  border-color: #0b6e6a;
  box-shadow: 0 0 0 3px #0b6e6a22;
  outline: none;
}
.lt-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 40px; padding: 0 12px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left;
}
.lt-select::picker-icon {
  color: #0b6e6a;
  transition: transform .18s ease;
}
.lt-select:open::picker-icon { transform: rotate(180deg); }
.lt-select::picker(select) {
  margin-top: 6px;
  padding: 6px;
  border: 1px solid #c5d9d7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 36px #102e3520;
}
.lt-select option {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 12px;
  border-radius: 10px;
  color: #17343b;
  font-weight: 700;
  cursor: pointer;
}
.lt-select option:hover { background: #eef8f7; }
.lt-select option:checked { background: #e2f3f2; color: #0b6e6a; }
.lt-select option::checkmark { color: #0b6e6a; order: 1; margin-left: auto; }
.lt-option-label { display: block; }
.lt-inline-form .lt-select { min-height: 36px; border-radius: 10px; }
.lt-inline-form .lt-select-trigger { min-height: 34px; padding: 0 10px; font-size: 12px; }
@supports not (appearance: base-select) {
  .lt-select {
    appearance: none;
    padding: 0 36px 0 12px;
    background-color: #fbfffe;
    background-image:
      linear-gradient(180deg, #fbfffe, #f3faf9),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b6e6a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 12px center;
    background-size: auto, 16px;
  }
  .lt-select-trigger { display: none; }
}
.dept-list {
  --dept-cols: 28px 48px minmax(0, 1.6fr) 100px 100px 168px;
  display: grid; gap: 8px;
  padding: 12px;
  border: 1px solid #d7e4e2; border-radius: 20px;
  background:
    radial-gradient(120% 80% at 0% 0%, #eef8f7, transparent 45%),
    #fff;
  box-shadow: 0 10px 28px #102e3508;
}
.dept-list-body { display: grid; gap: 8px; }
.dept-list-head,
.dept-row {
  display: grid;
  grid-template-columns: var(--dept-cols);
  gap: 12px; align-items: center;
  padding: 12px;
  box-sizing: border-box;
}
.dept-list-head {
  padding-top: 4px; padding-bottom: 10px;
  border-bottom: 1px solid #e5eeee;
  color: #7a9093; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.dept-list-head > span:nth-child(2),
.dept-list-head > span:nth-child(4),
.dept-list-head > span:nth-child(5) { text-align: center; }
.dept-list-head > span:nth-child(6) { text-align: right; }
.dept-row {
  border-radius: 14px;
  background: #f7fbfb;
  border: 1px solid transparent;
  animation: deptRowIn .28s ease both;
  animation-delay: calc(var(--dept-i, 0) * 28ms);
}
.dept-list-body.is-settled .dept-row {
  animation: none;
}
.dept-row:hover {
  border-color: #c9dddb;
  background: #fff;
  box-shadow: 0 8px 18px #102e350c;
}
.dept-row.is-inactive { opacity: .72; }
.dept-row.is-dragging {
  position: relative;
  z-index: 6;
  border-color: #0b6e6a99;
  background: #fff;
  box-shadow: 0 16px 32px #102e3520;
  will-change: transform;
  transition: box-shadow .18s ease, border-color .18s ease;
}
body.is-dept-reordering { cursor: grabbing; user-select: none; }
body.is-dept-reordering * { cursor: grabbing !important; }
body.is-dept-reordering .dept-row:not(.is-dragging) {
  transition: none; /* FLIP via WAAPI handles motion */
}
.dept-row.is-editing { border-color: #9ec9c6; background: #fff; }
.dept-drag {
  display: grid; place-items: center;
  width: 32px; height: 40px; margin: 0; padding: 0;
  border: 0; border-radius: 8px; color: #7a9093; cursor: grab;
  background: transparent;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.dept-drag:hover { color: #0b6e6a; background: #e7f2f1; }
.dept-drag:active,
.dept-row.is-dragging .dept-drag { cursor: grabbing; color: #0b6e6a; background: #d9efee; }
.dept-drag .ui-icon { width: 18px; height: 18px; pointer-events: none; }
.dept-order {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-inline: auto; border-radius: 12px;
  background: #e7f2f1; color: #0b6e6a;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.dept-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dept-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  color: #0b6e6a;
  background: linear-gradient(145deg, #d9efee, #eef7f6);
}
.dept-mark .ui-icon { width: 18px; height: 18px; }
.dept-name { display: grid; gap: 2px; min-width: 0; text-align: left; }
.dept-name strong {
  color: #17343b; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dept-name small { color: #708285; font-size: 11px; }
.dept-inline-form { display: block; min-width: 0; flex: 1; }
.dept-inline-form input {
  width: 100%; min-width: 0; min-height: 36px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid #b7d4d2; border-radius: 10px;
  background: #fff; color: #17343b; font-size: 14px; font-weight: 700;
}
.dept-actions.is-editing { grid-template-columns: 1fr auto auto; }
.dept-actions .dept-edit-ok,
.dept-actions .dept-edit-cancel {
  width: 34px; min-width: 34px; padding: 0;
}
.dept-actions .dept-edit-ok { color: #0b6e6a; border-color: #9ec9c6; }
.dept-actions .dept-edit-cancel { color: #8a4b4b; border-color: #e0c4c4; }
.dept-actions .lt-delete-btn { color: #8a4b4b; border-color: #e0c4c4; }
.dept-actions .lt-delete-btn:hover { color: #9b2c2c; border-color: #d9a0a0; background: #fff7f7; }
.lt-delete-modal { z-index: 60; }
.lt-delete-card {
  width: min(100%, 420px);
  justify-items: stretch;
  text-align: left;
  padding: 24px 22px 18px;
  border-color: #e7c7c7;
  background:
    radial-gradient(120% 90% at 50% 0%, #fff5f5, transparent 55%),
    #fff;
}
.lt-delete-card > .confirm-visual,
.lt-delete-card > h2,
.lt-delete-card > p { justify-self: center; text-align: center; }
.lt-delete-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: #fff8f8; border: 1px solid #efd4d4;
}
.lt-delete-mark {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  color: #9b2c2c;
  background: linear-gradient(145deg, #ffe4e4, #fff1f1);
}
.lt-delete-mark .ui-icon { width: 20px; height: 20px; }
.lt-delete-summary strong { display: block; color: #17343b; font-size: 15px; }
.lt-delete-summary small { display: block; color: #7a6a6a; font-size: 12px; margin-top: 2px; }
.lt-delete-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  padding: 10px 12px; border-radius: 12px;
  background: #fff7ed; color: #8a5a2b; font-size: 12px; line-height: 1.45;
}
.lt-delete-note .ui-icon { width: 15px; height: 15px; margin-top: 1px; flex: none; color: #c47b2b; }
.dept-count {
  display: grid; gap: 1px; justify-items: center; text-align: center;
}
.dept-count b {
  color: #17343b; font-size: 16px; font-variant-numeric: tabular-nums;
}
.dept-count small { color: #708285; font-size: 11px; font-weight: 700; }
.dept-status { display: grid; place-items: center; }
.dept-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}
.dept-actions:has(.dept-lock-chip:only-child),
.dept-actions:has(button:only-child) { grid-template-columns: 1fr; }
.dept-lock-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 34px; padding: 0 10px;
  border-radius: 10px; background: #eef3f3; color: #6d8083;
  font-size: 11px; font-weight: 700;
}
.dept-lock-chip .ui-icon { width: 14px; height: 14px; }
.dept-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; min-height: 34px; padding: 0 8px;
  border: 1px solid #d4e1e2; border-radius: 10px;
  background: #fbfefe; color: #3f5558; font-size: 11px; font-weight: 700;
}
.dept-actions button:hover { background: #fff; border-color: #b7d4d2; color: #087d7a; }
.dept-actions .ui-icon { width: 14px; height: 14px; }
@keyframes deptRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .dept-page-head { align-items: stretch; }
  .dept-stats { grid-template-columns: 1fr; }
  .dept-create,
  .lt-create { grid-template-columns: 1fr; }
  .dept-list,
  .lt-page .dept-list { --dept-cols: 28px 40px minmax(0, 1fr); }
  .dept-list-head { display: none; }
  .dept-list-head,
  .dept-row { gap: 10px; }
  .dept-order { margin-inline: 0; width: 36px; height: 36px; }
  .dept-identity { grid-column: 1 / -1; }
  .dept-count,
  .lt-rule,
  .dept-status,
  .dept-actions { grid-column: 1 / -1; justify-items: start; text-align: left; place-items: start; }
  .lt-rule { justify-content: start; text-align: left; }
  .lt-inline-form { grid-template-columns: 1fr; }
  .dept-actions { grid-template-columns: 1fr 1fr; max-width: 280px; }
}

/* —— HR Ops Leave Center —— */
body.hr-ops-mode {
  --ops-ink: #0f2a2e;
  --ops-mist: #dce8ea;
  --ops-paper: #f4f8f8;
  --ops-panel: #ffffffd9;
  --ops-line: #c5d6d8;
  --ops-teal: #0b6e6a;
  --ops-signal: #c45c26;
  --ops-good: #1f7a4d;
  background:
    radial-gradient(1200px 500px at 10% -10%, #9fd4cf55, transparent 60%),
    radial-gradient(900px 420px at 100% 0%, #e8b48a33, transparent 55%),
    linear-gradient(180deg, #e7f1f2 0%, #f4f8f8 40%, #eef4f5 100%);
  font-family: var(--font-ui);
}
body.hr-ops-mode #app {
  width: min(100%, 1440px);
  padding: 0;
  background: transparent;
  container-type: inline-size;
  container-name: ops;
}
.ops-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  align-items: stretch;
}
.ops-scrim { display: none; }
.ops-nav {
  position: sticky; top: 0; align-self: start;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px; min-height: 100vh; max-height: 100vh;
  padding: 18px 14px; border-inline-end: 1px solid #c9dbdd;
  background: linear-gradient(180deg, #0f2a2e 0%, #14363b 55%, #0f2a2e 100%);
  color: #e7f3f3; overflow: hidden;
}
.ops-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.ops-brand > span {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: #1f9d96; color: #fff; font-family: var(--font-display); font-weight: 800;
}
.ops-brand strong { display: block; font-size: 14px; }
.ops-brand small { color: #9eb8ba; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.ops-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.ops-nav-personal {
  flex: none;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid #5a7e82;
}
.ops-nav-personal::before {
  content: "ส่วนตัว";
  display: block;
  margin: 0 10px 8px;
  color: #8aa3a5;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ops-nav-list > button,
.ops-nav-personal > button,
.ops-nav-parent,
.ops-nav-child {
  width: 100%; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 10px; border: 0; border-radius: 14px;
  color: #d5e6e7; background: transparent; text-align: left;
}
.ops-nav-list > button > .ui-icon,
.ops-nav-personal > button > .ui-icon,
.ops-nav-parent > .ui-icon,
.ops-nav-child > .ui-icon { width: 18px; height: 18px; color: #8fc4c0; flex: none; }
.ops-nav-list > button > span,
.ops-nav-personal > button > span,
.ops-nav-parent > span,
.ops-nav-child > span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ops-nav-list strong,
.ops-nav-personal strong { font-size: 12px; font-weight: 700; color: #f3fafa; }
.ops-nav-list small,
.ops-nav-personal small { font-size: 10px; color: #8aa3a5; }
.ops-nav-list > button.active,
.ops-nav-personal > button.active,
.ops-nav-parent.active,
.ops-nav-child.active {
  background: #1a9b9440; box-shadow: inset 0 0 0 1px #2bb5ad66;
}
.ops-nav-list > button.active > .ui-icon,
.ops-nav-personal > button.active > .ui-icon,
.ops-nav-parent.active > .ui-icon,
.ops-nav-child.active > .ui-icon { color: #7dfff4; }
.ops-nav-list > button:hover,
.ops-nav-personal > button:hover,
.ops-nav-parent:hover,
.ops-nav-child:hover,
.ops-nav-twist:hover { background: #ffffff12; }
.ops-nav-list .badge {
  min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px;
  background: #c45c26; color: #fff; font-size: 10px; line-height: 18px; text-align: center; font-style: normal;
}
.ops-nav-group { display: grid; gap: 2px; }
.ops-nav-row { display: grid; grid-template-columns: 1fr auto; gap: 2px; align-items: stretch; }
.ops-nav-parent { min-width: 0; }
.ops-nav-parent.branch-active {
  background: #ffffff0a;
}
.ops-nav-parent.branch-active > .ui-icon { color: #9fd9d4; }
.ops-nav-twist {
  width: 36px; min-height: 52px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 12px;
  color: #8aa3a5; background: transparent; cursor: pointer;
}
.ops-nav-twist .ui-icon { width: 16px; height: 16px; }
.ops-nav-children {
  display: grid; gap: 2px;
  margin: 0 0 4px 14px;
  padding: 2px 0 2px 10px;
  border-left: 1px solid #2f5559;
}
.ops-nav-child {
  min-height: 38px; padding: 6px 10px; border-radius: 11px; gap: 8px;
}
.ops-nav-child > .ui-icon { width: 15px; height: 15px; color: #7aa8a6; }
.ops-nav-child strong { font-size: 11px; font-weight: 650; color: #d7e8e8; }
.ops-nav-child.active strong { color: #f3fafa; }
.ops-nav-foot {
  display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid #2c4a4e;
}
.ops-nav-user strong { display: block; font-size: 12px; }
.ops-nav-user small { color: #8aa3a5; font-size: 10px; }
.ops-nav-actions { display: flex; gap: 8px; }
.ops-nav-foot button {
  display: grid; place-items: center;
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  border: 1px solid #3a585c; border-radius: 12px;
  color: #f0d2d2; background: transparent; cursor: pointer;
}
.ops-nav-foot button.ops-nav-pin {
  color: #d7ecea; border-color: #3f6a6e;
  background: linear-gradient(180deg, #24474b, #1c3c40);
}
.ops-nav-foot button.ops-nav-pin:hover { border-color: #5a8b8f; background: #275257; }
.ops-nav-foot button[data-action="logout"]:hover { border-color: #7a4a4a; background: #3a2828; }
.ops-nav-foot .ui-icon { width: 18px; height: 18px; }
.ops-main {
  min-width: 0; padding: 24px 28px 40px;
  container-type: inline-size; container-name: ops;
}
.ops-main.is-phone {
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 20px 20px 28px;
  overflow: auto;
}
.phone-stage {
  width: 100%;
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 48px);
}
.phone-device {
  position: relative;
  width: min(100%, 430px);
  max-height: calc(100dvh - 56px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 36px;
  border: 3px solid #17343b;
  background:
    linear-gradient(180deg, #f7fcfc 0%, #f5fbfc 100%);
  box-shadow:
    0 0 0 1px #2a4a50,
    0 18px 50px #0f2a2e35,
    0 4px 14px #0f2a2e18;
  padding: 22px 18px 28px;
}
.phone-device::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  width: 108px;
  height: 6px;
  margin: -6px auto 14px;
  border-radius: 999px;
  background: #1a3338;
  z-index: 2;
}
.phone-device .ops-page,
.phone-device .ops-page.leave-flow {
  width: 100%;
  max-width: none;
}
.phone-device section:has(.fab) { padding-bottom: 72px; }
.phone-device .calendar-modal {
  position: absolute;
  inset: 0;
  border-radius: 33px;
  z-index: 12;
}
.ops-layout:has(.mail-board) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.ops-main:has(.mail-board) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding-bottom: 16px;
}
.ops-main:has(.mail-board) > .ops-mobile-bar { flex: none; }
.ops-main:has(.mail-board.is-mobile-list),
.ops-main:has(.mail-board.is-mobile-reading) {
  padding-bottom: 10px;
}
.ops-main:has(.mail-board.is-mobile-reading) > .ops-mobile-bar {
  display: none;
}
.ops-mobile-bar { display: none; }
.ops-page { display: grid; gap: 16px; }
.ops-page.ops-enter,
.ops-board.ops-enter { animation: opsIn .35s ease both; }
.ops-page > header h1 { font-family: var(--font-display); letter-spacing: -.03em; }
.ops-page .user-bar { display: none; }
@media (max-width: 920px) {
  .ops-layout { grid-template-columns: 1fr; }
  .ops-nav {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(86vw, 280px);
    transform: translateX(-105%); transition: transform .22s ease;
  }
  .ops-layout.nav-open .ops-nav { transform: none; }
  .ops-scrim {
    display: block; position: fixed; inset: 0; z-index: 30; border: 0;
    background: #0f2a2e66; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .ops-layout.nav-open .ops-scrim { opacity: 1; pointer-events: auto; }
  .ops-mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 14px;
  }
  .ops-main.is-phone {
    display: block;
    padding: 16px 16px 36px;
  }
  .phone-stage {
    min-height: 0;
    place-items: stretch;
  }
  .phone-device {
    width: 100%;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
  .phone-device::before { display: none; }
  .ops-mobile-bar button {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 12px; border: 1px solid var(--ops-line); border-radius: 999px;
    background: #ffffffcc; color: var(--ops-ink); font-size: 12px; font-weight: 700;
  }
  .ops-mobile-bar .badge {
    position: absolute; top: -4px; right: -2px; min-width: 16px; height: 16px;
    border-radius: 999px; background: var(--ops-signal); color: #fff; font-size: 10px;
    line-height: 16px; text-align: center; padding: 0 4px; font-style: normal;
  }
  .ops-mobile-spacer { width: 72px; }
  .ops-main { padding: 16px 16px 36px; }
}
.ops-board { display: grid; gap: 18px; }
@keyframes opsIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.ops-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ops-top .back { margin: 0; color: var(--ops-teal); }
.ops-top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ops-ghost {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--ops-line); border-radius: 999px;
  color: var(--ops-ink); background: #ffffffb8;
  backdrop-filter: blur(8px); font-size: 12px; font-weight: 600;
}
.ops-ghost .ui-icon { width: 16px; height: 16px; color: var(--ops-teal); }
.ops-ghost.danger { color: #8a3030; }
.ops-ghost .badge {
  position: absolute; top: -4px; right: -2px;
  min-width: 16px; height: 16px; border-radius: 999px;
  background: var(--ops-signal); color: #fff; font-size: 10px; line-height: 16px; text-align: center; padding: 0 4px; font-style: normal;
}
.ops-hero {
  display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 8px 2px 4px;
}
.ops-hero small {
  display: block; margin-bottom: 6px;
  color: var(--ops-teal); font-size: 10px; font-weight: 800; letter-spacing: .16em;
}
.ops-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4cqi, 36px); font-weight: 700; letter-spacing: -.02em; color: var(--ops-ink);
}
.ops-hero p { margin-top: 6px; color: #5f7376; font-size: 13px; max-width: 42ch; }
.ops-year {
  display: grid; gap: 6px; min-width: 120px;
  color: #5f7376; font-size: 11px; font-weight: 700;
}
.ops-year select {
  min-height: 44px; border: 1px solid var(--ops-line); border-radius: 12px;
  background: #fff; color: var(--ops-ink); font-weight: 700;
}
.ops-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.ops-kpis .kpi {
  display: grid; gap: 4px; padding: 14px 16px;
  border: 1px solid #ffffffaa; border-radius: 18px;
  background: linear-gradient(160deg, #ffffffee, #f2f8f8cc);
  box-shadow: 0 10px 30px #0f2a2e0d;
}
.ops-kpis .kpi small { color: #678083; font-size: 11px; font-weight: 600; }
.ops-kpis .kpi strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 3cqi, 32px); line-height: 1; letter-spacing: 0;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ops-ink);
}
.ops-kpis .kpi em { color: #7a8d90; font-size: 10px; font-style: normal; }
.ops-kpis .kpi.signal.hot {
  border-color: #f0c4a8; color: #fff;
  background: linear-gradient(145deg, #c45c26, #a94418);
  box-shadow: 0 14px 32px #c45c2633;
  animation: opsPulse 2.4s ease-in-out infinite;
}
.ops-kpis .kpi.signal.hot small, .ops-kpis .kpi.signal.hot em { color: #ffe3d1; }
.ops-kpis .kpi.signal.hot strong { color: #fff; }
@keyframes opsPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr);
  gap: 14px;
  align-items: start;
}
.ops-side { display: grid; gap: 14px; }
.ops-panel {
  border: 1px solid #ffffffcc; border-radius: 22px;
  background: var(--ops-panel);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 36px #0f2a2e0a;
  overflow: clip;
}
.ops-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px 10px; border-bottom: 1px solid #e4eeef;
}
.ops-panel-head h2 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; color: var(--ops-ink);
}
.ops-panel-head .ui-icon { width: 18px; height: 18px; color: var(--ops-teal); }
.ops-panel-head > b {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; background: var(--ops-ink); color: #fff; font-size: 12px;
}
.ops-scroll { max-block-size: min(68vh, 720px); overflow: auto; padding: 12px; display: grid; gap: 12px; content-visibility: auto; }
.ops-empty {
  display: grid; justify-items: center; gap: 6px; padding: 36px 18px; text-align: center; color: #5f7376;
}
.ops-empty .ui-icon { width: 32px; height: 32px; color: var(--ops-good); }
.ops-empty strong { color: var(--ops-ink); }
.ops-request {
  position: relative;
  display: grid; gap: 8px; padding: 14px 14px 14px 16px;
  border: 1px solid var(--ops-line); border-radius: 16px; background: #fff;
  border-inline-start: 4px solid var(--leave-color, var(--ops-teal));
  animation: opsIn .4s ease both;
}
.ops-request header { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.ops-request header > div { display: grid; gap: 3px; min-width: 0; }
.ops-request header strong { color: var(--ops-ink); font-size: 14px; }
.ops-request header small, .ops-request-meta { color: #6d8083; font-size: 10px; }
.ops-request-meta { display: grid; justify-items: end; gap: 6px; }
.ops-chip {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
  background: #eef6f6; color: var(--ops-teal); font-size: 10px; font-weight: 700;
}
.ops-chip.warn { background: #fff1e8; color: var(--ops-signal); }
.ops-chip.pulse { background: #fff1e8; color: var(--ops-signal); }
.ops-chip.files {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e7f4f3;
  color: #0b6e6a;
}
.ops-chip.files .ui-icon { width: 13px; height: 13px; }
.ops-chip.ok { background: #e8f7ee; color: #197544; }
.ops-chip.bad { background: #fdeeee; color: #8a3030; }
.ops-chip.muted { background: #eef1f2; color: #6d8083; }
.ops-range { margin: 0; color: var(--ops-teal); font-size: 12px; font-weight: 700; }
.ops-range em { font-style: normal; color: var(--ops-ink); }
.ops-request blockquote {
  margin: 0; padding: 8px 10px; border-inline-start: 3px solid #dbe7e8;
  color: #4d5f62; font-size: 12px; background: #f7fbfb; border-radius: 0 10px 10px 0;
}
.ops-type-list { display: grid; gap: 12px; padding: 14px 16px 16px; }
.ops-type-row { display: grid; gap: 5px; }
.ops-type-row > span { display: flex; align-items: center; gap: 8px; }
.ops-type-row i { width: 9px; height: 9px; border-radius: 50%; }
.ops-type-row strong { font-size: 12px; color: var(--ops-ink); }
.ops-type-row small { color: #708285; font-size: 10px; }
.ops-type-row > b {
  display: block; height: 6px; border-radius: 999px; background: #e4eeef; overflow: hidden;
}
.ops-type-row > b::after {
  content: ""; display: block; width: var(--w, 0%); height: 100%;
  background: var(--c, var(--ops-teal)); border-radius: inherit;
  transition: width .5s ease;
}
.ops-presence { display: grid; gap: 14px; padding: 12px 16px 16px; }
.ops-label { display: block; margin-bottom: 8px; color: #6d8083; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ops-person {
  display: flex; justify-content: space-between; gap: 10px; align-items: start;
  padding: 8px 0; border-bottom: 1px solid #e8f0f1;
}
.ops-person:last-child { border-bottom: 0; }
.ops-person span { display: grid; gap: 2px; min-width: 0; }
.ops-person strong { font-size: 12px; color: var(--ops-ink); }
.ops-person small, .ops-person em { color: #708285; font-size: 10px; font-style: normal; }
.ops-person.pending strong { color: var(--ops-signal); }
.ops-rank { display: grid; gap: 8px; padding: 10px 14px 14px; }
.ops-rank-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(90px, .7fr);
  gap: 8px; align-items: center;
}
.ops-rank-row > b {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: #e8f3f2; color: var(--ops-teal); font-size: 11px; font-family: var(--font-display);
}
.ops-rank-row span { display: grid; gap: 1px; min-width: 0; }
.ops-rank-row strong { font-size: 12px; color: var(--ops-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-rank-row small { color: #708285; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-rank-meter { display: grid; gap: 3px; }
.ops-rank-meter i {
  display: block; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--ops-teal), #3aa39c);
}
.ops-rank-meter em { color: #5f7376; font-size: 10px; font-style: normal; font-weight: 700; text-align: end; }
.ops-panel.timeline { padding-bottom: 4px; }
.ops-timeline { display: grid; }
.ops-timeline article {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 12px 16px; border-top: 1px solid #e8f0f1;
}
.ops-timeline article > span { display: grid; gap: 3px; min-width: 0; }
.ops-timeline strong { font-size: 13px; color: var(--ops-ink); }
.ops-timeline small { color: #708285; font-size: 10px; }
.ops-timeline-end { justify-items: end; }
.empty.tiny { margin: 0; padding: 4px 0; font-size: 12px; }

@container ops (max-width: 860px) {
  .ops-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-kpis .kpi:last-child { grid-column: 1 / -1; }
  .ops-kpis.mail-kpis .kpi:last-child { grid-column: auto; }
  .ops-grid { grid-template-columns: 1fr; }
  .ops-scroll { max-block-size: none; }
}
@media (max-width: 720px) {
  body.hr-ops-mode #app { padding: 20px 16px 40px; }
  .ops-kpis { grid-template-columns: 1fr 1fr; }
  .ops-hero h1 { font-size: 28px; }
  .ops-ghost span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ops-board, .ops-request, .ops-kpis .kpi.signal.hot { animation: none; }
}

/* —— Outlook-style Leave Center —— */
.ops-hero.compact { padding-top: 0; }
.ops-hero.compact h1 { font-size: clamp(24px, 3.2cqi, 34px); }
.ops-kpis.compact { gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ops-kpis.compact .kpi { padding: 10px 12px; border-radius: 14px; }
.ops-kpis.compact .kpi strong { font-size: clamp(20px, 2.6cqi, 28px); }
.ops-kpis .kpi .unit {
  margin-inline-start: 6px;
  color: #7a8d90; font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; letter-spacing: 0;
}
.ops-kpis .kpi.signal.hot .unit { color: #ffe3d1; }
.ops-kpis .kpi em {
  display: block; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-board {
  gap: 12px;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.mail-split {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  height: 100%;
  border: 1px solid #c9dbdd;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffffd9;
  box-shadow: 0 12px 36px #0f2a2e0a;
}
.mail-list-pane {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  border-inline-end: 1px solid #d7e5e6;
  background: #f7fbfb;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.mail-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #e4eeef;
}
.mail-list-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.mail-list-head .ui-icon { width: 16px; height: 16px; color: var(--ops-teal); }
.mail-list-head > b {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px; background: var(--ops-ink); color: #fff; font-size: 11px;
}
.mail-list {
  overflow-x: hidden;
  overflow-y: scroll;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  content-visibility: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #8aaeb0 #e4eef0;
}
.mail-list::-webkit-scrollbar {
  width: 10px;
}
.mail-list::-webkit-scrollbar-track {
  background: #e4eef0;
  border-inline-start: 1px solid #d5e4e6;
}
.mail-list::-webkit-scrollbar-thumb {
  background: #8aaeb0;
  border: 2px solid #e4eef0;
  border-radius: 999px;
}
.mail-list::-webkit-scrollbar-thumb:hover {
  background: #6d9699;
}
.mail-list-section { display: grid; }
.mail-list-section-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px;
  background: #eef5f5;
  border-bottom: 1px solid #dce8e9;
  color: #4a5f62;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.mail-list-section.is-processed .mail-list-section-head {
  background: #f3f6f6;
  color: #6d8083;
  border-top: 1px solid #e0eaeb;
}
.mail-list-section-head > b {
  display: grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 999px; background: #17343b; color: #fff; font-size: 10px; font-weight: 800;
}
.mail-list-section-head > b.is-muted {
  background: #c5d4d5; color: #3f5558;
}
.mail-list-empty {
  margin: 0; padding: 16px 14px;
  color: #8aa0a2; font-size: 12px; text-align: center;
}
.mail-list-more,
.mail-list-end {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 10px 12px;
  color: #7a8d90; font-size: 11px; font-weight: 600;
}
.mail-list-more {
  border: 0; border-top: 1px dashed #d7e5e6;
  background: transparent; cursor: pointer;
}
.mail-list-more:hover:not(:disabled) { color: var(--ops-teal); background: #f4fafa; }
.mail-list-more:disabled { cursor: wait; opacity: .75; }
.mail-list-more .ui-icon { width: 14px; height: 14px; color: var(--ops-teal); }
.mail-list-end { border-top: 1px dashed #d7e5e6; color: #9aabac; }
.mail-row {
  width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px; align-items: start; padding: 12px 12px 12px 10px;
  border: 0; border-bottom: 1px solid #e8f0f1; border-inline-start: 3px solid transparent;
  background: #fff; text-align: left; color: inherit; cursor: pointer;
}
.mail-row:hover { background: #eef6f6; }
.mail-row.selected {
  background: #f3fafa;
  border-inline-start-color: var(--leave-color, var(--ops-teal));
  box-shadow: inset 0 0 0 1px #d5e8e7;
}
.mail-row.unread {
  background: #fff;
}
.mail-row.unread .mail-row-top strong {
  font-weight: 800; color: var(--ops-ink);
}
.mail-row.unread .mail-row-mid {
  color: var(--ops-teal); font-weight: 700;
}
.mail-row.unread .mail-row-bot {
  color: #4d5f62; font-weight: 600;
}
.mail-row.unread .mail-dot {
  background: var(--leave-color, var(--ops-teal));
  box-shadow: none;
}
.mail-row.read {
  background: #f7fbfb;
}
.mail-row.read .mail-row-top strong {
  color: #6d8083; font-weight: 500;
}
.mail-row.read .mail-row-mid {
  color: #8aa3a5; font-weight: 500;
}
.mail-row.read .mail-row-bot {
  color: #9aadaf; font-weight: 400;
}
.mail-row.read .mail-row-top time {
  color: #a8bbbd;
}
.mail-row.read .mail-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #c5d4d5;
}
.mail-row.read.selected {
  background: #eef6f6;
}
.mail-row.read.selected .mail-row-top strong {
  color: #5a6e71; font-weight: 600;
}
.mail-dot {
  width: 8px; height: 8px; margin-top: 6px; border-radius: 50%;
  background: var(--leave-color, var(--ops-teal));
}
.mail-read-flag {
  margin-top: 2px; color: #9aadaf;
  font-size: 10px; font-weight: 500; white-space: nowrap;
}
.mail-status-stamp {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 1px; padding: 4px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; white-space: nowrap;
}
.mail-status-stamp .ui-icon { width: 12px; height: 12px; }
.mail-status-stamp.ok { background: #e5f7ec; color: #147544; }
.mail-status-stamp.ok.system { background: #e7f3f7; color: #0b5f6e; }
.mail-status-stamp.bad { background: #fdeeee; color: #9a3030; }
.mail-status-stamp.warn { background: #fff1e8; color: var(--ops-signal); }
.mail-status-stamp.muted { background: #eef1f2; color: #6d8083; }
.mail-row.read.status-approved .mail-dot,
.mail-row.read:has(.mail-status-stamp.ok) .mail-dot {
  background: #2f8f68; box-shadow: none;
}
.mail-row.read:has(.mail-status-stamp.bad) .mail-dot {
  background: #c45f5f; box-shadow: none;
}
.mail-head-aside {
  display: grid; justify-items: end; gap: 8px; flex: none;
}
.mail-decision-result {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 14px;
}
.mail-decision-result .decision-stamp {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.mail-decision-result .decision-stamp > .ui-icon {
  width: 28px; height: 28px; flex: none;
}
.mail-decision-result .decision-stamp > div { display: grid; gap: 2px; min-width: 0; }
.mail-decision-result .decision-stamp strong {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.15;
}
.mail-decision-result .decision-stamp small { color: inherit; opacity: .78; font-size: 12px; }
.mail-decision-result.ok {
  color: #0f5c3a;
  background: linear-gradient(135deg, #e8f8ef, #f4fcf7);
  border: 1px solid #b7e4c7;
  box-shadow: inset 0 0 0 1px #ffffffaa;
}
.mail-decision-result.bad {
  color: #8a3030;
  background: linear-gradient(135deg, #fff1f1, #fff8f8);
  border: 1px solid #efd0d0;
}
.mail-decision-result.muted {
  color: #4d5f62;
  background: #f4f8f8;
  border: 1px solid #d7e5e6;
}
.mail-reading.status-approved .mail-decide,
.mail-reading.status-rejected .mail-decide,
.mail-reading.status-cancelled .mail-decide {
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
.mail-read-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 2px 0;
}
.mail-read-banner > span { display: inline-flex; align-items: center; gap: 8px; color: var(--ops-ink); }
.mail-read-banner .ui-icon { width: 18px; height: 18px; color: var(--ops-teal); }
.mail-read-banner small { color: #7a8d90; font-size: 11px; }
.mail-reading.is-read .mail-decide { background: #f7fbfb; }
.mail-reading.is-read .mail-decide:has(.mail-decision-result) { background: transparent; }
.mail-row-body { display: grid; gap: 3px; min-width: 0; }
.mail-row-top { display: flex; justify-content: space-between; gap: 8px; }
.mail-row-top strong { font-size: 12px; color: var(--ops-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row-top time { color: #7a8d90; font-size: 10px; flex: none; }
.mail-row-mid { color: var(--ops-teal); font-size: 11px; font-weight: 700; }
.mail-row-bot { color: #6d8083; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-reading-pane { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: auto; overscroll-behavior: contain; background: #fff; }
.mail-empty-reading {
  display: grid; place-content: center; justify-items: center; gap: 8px;
  min-height: 420px; padding: 32px; text-align: center; color: #5f7376;
}
.mail-empty-reading .ui-icon { width: 36px; height: 36px; color: var(--ops-teal); }
.mail-empty-reading strong { color: var(--ops-ink); font-size: 16px; }
.mail-reading { display: grid; gap: 10px; padding: 12px 14px 18px; }
.mail-reading.compact { gap: 8px; }
.mail-reading-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.mail-identity { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1; }
.mail-avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(145deg, #0b6e6a, #315f68); color: #fff;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
}
.mail-identity h2 {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 20px;
  letter-spacing: -.02em;
}
.mail-identity p { margin: 3px 0 0; color: #6d8083; font-size: 12px; }
.mail-cycle-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #f0d2a8;
  background: #fff4e8;
  color: #8a4b12;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .02em;
}
.mail-cycle-inline {
  color: #c45c26;
  font-weight: 800;
}
.mail-row-mid .mail-cycle-inline { font-size: 12px; }
.mail-summary-line { color: #3f5558 !important; font-size: 12px !important; }
.mail-summary-line .warn-text { color: var(--ops-signal); font-style: normal; font-weight: 700; }
.mail-leave-facts {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(96px, .55fr) minmax(0, 1.6fr);
  gap: 10px 12px;
  padding: 14px 16px;
  border: 1px solid #d7e5e6;
  border-radius: 16px;
  background: linear-gradient(180deg, #f4fafa, #fff);
}
.mail-leave-facts:has(.mail-attach-mini) {
  padding-bottom: 36px;
}
.mail-fact {
  display: grid; align-content: start; gap: 4px; min-width: 0;
}
.mail-fact > small {
  color: #6d8083; font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.mail-fact > strong {
  color: #17343b; font-size: 18px; font-weight: 800; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.mail-fact > span {
  color: #4a5f62; font-size: 13px; font-weight: 600; line-height: 1.35;
}
.mail-fact > span .warn-text {
  color: var(--ops-signal); font-style: normal; font-weight: 800;
}
.mail-fact-days > strong {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 28px; line-height: 1;
}
.mail-fact-days > strong em {
  color: #5f7376; font-size: 14px; font-style: normal; font-weight: 700;
}
.mail-fact-reason > p {
  margin: 0;
  color: #17343b; font-size: 16px; font-weight: 650; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .mail-leave-facts { grid-template-columns: 1fr 120px; }
  .mail-fact-reason { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mail-leave-facts { grid-template-columns: 1fr; }
  .mail-fact-days > strong { font-size: 24px; }
}
.mail-attach-mini {
  position: absolute;
  right: 14px;
  bottom: 10px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: min(100%, 420px);
  padding: 0;
}
.mail-attach-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8a9ea1;
  flex: none;
}
.mail-attach-label .ui-icon { width: 14px; height: 14px; }
.mail-attach-label small {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
}
.mail-attach-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
}
.mail-attach-link {
  max-width: 220px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0b6e6a;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #b7d6d4;
  text-underline-offset: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.mail-attach-link:hover {
  color: #085955;
  text-decoration-color: #0b6e6a;
}
.mail-leave-hero {
  position: relative;
  display: grid; justify-items: end; align-content: end; gap: 4px; flex: none;
  min-width: min(100%, 188px); min-height: 112px; padding: 16px 18px 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--leave-surface, #f4f9f9) 88%, #fff), #fff);
  border: 1px solid color-mix(in srgb, var(--leave-color, var(--ops-teal)) 28%, #e4eeef);
  box-shadow: 0 8px 20px #0f2a2e0a;
  overflow: hidden;
  isolation: isolate;
}
.mail-leave-hero::before {
  content: "";
  position: absolute; inset: 0 auto auto 0;
  width: 4px; height: 100%;
  background: var(--leave-color, var(--ops-teal));
  opacity: .85;
  z-index: 1;
}
.mail-head-aside .mail-leave-hero { width: max-content; min-width: 176px; }
.mail-leave-hero.is-approved {
  border-color: color-mix(in srgb, #2f8f68 35%, #e4eeef);
  background:
    radial-gradient(120% 90% at 100% 0%, #e7f8ef66 0%, transparent 55%),
    linear-gradient(160deg, #f7fbf8, #fff);
}
.mail-leave-hero.is-approved::before { background: #2f8f68; }
.mail-leave-hero.is-rejected {
  border-color: color-mix(in srgb, #c45f5f 35%, #e4eeef);
  background:
    radial-gradient(120% 90% at 100% 0%, #fdeeee66 0%, transparent 55%),
    linear-gradient(160deg, #fbf7f7, #fff);
}
.mail-leave-hero.is-rejected::before { background: #c45f5f; }
.mail-leave-hero.is-cancelled,
.mail-leave-hero.is-decided {
  border-color: #d7e5e6;
  background:
    radial-gradient(120% 90% at 100% 0%, #eef3f366 0%, transparent 55%),
    linear-gradient(160deg, #f8fafa, #fff);
}
.mail-leave-hero.is-cancelled::before,
.mail-leave-hero.is-decided::before { background: #7a8d90; }
.leave-hero-mark {
  position: absolute;
  inset: 54% auto auto 50%;
  z-index: 0;
  margin: 0;
  padding: .22em .5em;
  border: 2.5px solid currentColor;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2cqi, 34px);
  font-weight: 800;
  font-style: normal;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -55%) rotate(-20deg);
  opacity: .34;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent),
    0 0 0 4px color-mix(in srgb, currentColor 10%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, currentColor 18%, transparent);
}
.leave-hero-mark.ok { color: #1a8a58; opacity: .38; }
.leave-hero-mark.bad { color: #c04343; opacity: .4; }
.leave-hero-mark.muted { color: #6a7d80; opacity: .32; }
.mail-leave-hero strong,
.mail-leave-hero b {
  position: relative;
  z-index: 1;
}
.mail-leave-hero strong {
  color: var(--leave-color, var(--ops-teal));
  font-family: var(--font-ui);
  font-size: clamp(18px, 2.4cqi, 22px); font-weight: 700;
  letter-spacing: .01em; line-height: 1.2;
}
.mail-leave-hero b {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--ops-ink);
  font-family: var(--font-ui);
  font-size: clamp(40px, 5.6cqi, 56px); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0; line-height: .95;
}
.mail-leave-hero b span {
  color: #5f7376; font-size: 18px; font-weight: 600; letter-spacing: 0;
  transform: translateY(-2px);
}
.mail-head-meta { display: grid; justify-items: end; gap: 6px; }
.mail-head-meta strong { color: var(--ops-teal); font-size: 12px; }
@media (max-width: 720px) {
  .mail-head-aside { width: 100%; justify-items: stretch; }
  .mail-head-aside .mail-leave-hero,
  .mail-leave-hero { width: 100%; justify-items: start; min-width: 0; }
  .leave-hero-mark { inset: 48% auto auto 58%; font-size: 26px; }
}
.mail-kpi-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
.mail-kpi-strip article {
  display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px;
  background: #f4f9f9; border: 1px solid #e4eeef;
}
.mail-kpi-strip small { color: #708285; font-size: 10px; font-weight: 700; }
.mail-kpi-strip strong { color: var(--ops-ink); font-size: 12px; line-height: 1.35; }
.mail-kpi-strip article.warn { background: #fff6e8; border-color: #f0d7b0; }
.mail-columns {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .85fr); gap: 12px; align-items: start;
}
.mail-col-main, .mail-col-side { display: grid; gap: 12px; }
.mail-card {
  padding: 14px; border: 1px solid #e4eeef; border-radius: 16px; background: #fcfefe;
}
.mail-card.tight { padding: 10px 12px; border-radius: 12px; }
.mail-card h3 { margin: 0 0 10px; font-size: 13px; color: var(--ops-ink); }
.mail-card.tight h3 { margin: 0 0 8px; font-size: 12px; }
.mail-card.sticky-actions, .mail-decide.sticky-actions {
  position: sticky; top: 0; z-index: 5;
  padding: 8px 0 10px;
  border: 0; border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.mail-action-bar { display: grid; gap: 6px; }
.mail-actions {
  display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 4px;
}
.mail-actions button {
  min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid #d4e1e2; border-radius: 9px; background: #fff; color: #4a6063; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.mail-actions button:hover { background: #eef5f5; border-color: #b9cecf; }
.mail-actions button .ui-icon { width: 15px; height: 15px; }
.mail-actions .approve-main { border-color: #0b6e6a; color: #fff; background: #0b6e6a; }
.mail-actions .approve-main:hover { border-color: #0a625e; background: #0a625e; }
.mail-actions button[data-hr-decision="reject"] { color: #8a3030; border-color: #efd0d0; background: #fff; }
.mail-actions button[data-hr-decision="reject"]:hover { background: #fff1f1; }
.mail-actions button[data-hr-decision="cancel"] { color: #8a3030; border-color: #efd0d0; }
.mail-action-bar.approved-actions { gap: 0; }
.mail-decision-result .cancel-approved.quiet,
.mail-read-banner .cancel-approved.quiet {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; padding: 0 10px;
  border: 1px solid #efd0d0; border-radius: 999px;
  background: #fff; color: #8a3030;
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.mail-decision-result .cancel-approved.quiet .ui-icon,
.mail-read-banner .cancel-approved.quiet .ui-icon { width: 13px; height: 13px; }
.mail-decision-result .cancel-approved.quiet:hover,
.mail-read-banner .cancel-approved.quiet:hover { background: #fff1f1; }
.confirm-modal {
  position: fixed; z-index: 40; inset: 0;
  display: grid; place-items: center; padding: 20px;
}
.confirm-modal .modal-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  background: #0f2a2ecc; backdrop-filter: blur(6px);
}
.confirm-card {
  position: relative; z-index: 1;
  display: grid; gap: 12px; justify-items: center;
  width: min(100%, 400px); padding: 28px 24px 22px;
  border: 1px solid #f0d7b0; border-radius: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #fff7ef, transparent 55%),
    #fff;
  box-shadow: 0 28px 70px #0f2a2e44;
  text-align: center;
  animation: modal-in .2s ease-out;
}
.confirm-visual {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(145deg, #c45c26, #8a3030); color: #fff;
  box-shadow: 0 12px 24px #c45c2633;
}
.confirm-visual.ok {
  background: linear-gradient(145deg, #0b6e6a, #0e7c74);
  box-shadow: 0 12px 24px #0b6e6a33;
}
.confirm-visual.warn {
  background: linear-gradient(145deg, #c47a1f, #a35f12);
  box-shadow: 0 12px 24px #c47a1f33;
}
.confirm-visual.danger {
  background: linear-gradient(145deg, #c45c26, #8a3030);
  box-shadow: 0 12px 24px #c45c2633;
}
.confirm-card.has-note { width: min(100%, 440px); justify-items: stretch; text-align: left; }
.confirm-card.has-note > .confirm-visual,
.confirm-card.has-note > h2,
.confirm-card.has-note > p { justify-self: center; text-align: center; }
.confirm-note {
  display: grid; gap: 6px; width: 100%;
  color: #4e6467; font-size: 12px; font-weight: 700; text-align: left;
}
.confirm-note textarea {
  width: 100%; min-height: 88px; resize: vertical;
  padding: 12px 14px; border: 1px solid #d4e1e2; border-radius: 12px;
  background: #fbfefe; color: #17343b; font: inherit; font-weight: 500; line-height: 1.45;
}
.confirm-note textarea:focus {
  outline: none; border-color: #c47a1f;
  box-shadow: 0 0 0 3px #c47a1f22; background: #fff;
}
.confirm-card .form-error { margin: 0; text-align: center; }
.confirm-visual .ui-icon { width: 26px; height: 26px; }
.confirm-card h2 {
  margin: 0; font-family: var(--font-display);
  font-size: 22px; letter-spacing: -.02em; color: var(--ops-ink);
}
.confirm-card > p {
  margin: 0; color: #6d8083; font-size: 13px; line-height: 1.5; max-width: 32ch;
}
.confirm-summary {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px; border-radius: 16px; text-align: left;
  background: #f7fbfb; border: 1px solid #e4eeef;
}
.confirm-summary > div { display: grid; gap: 2px; min-width: 0; }
.confirm-summary strong {
  font-size: 13px; color: var(--ops-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.confirm-summary small {
  color: #708285; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.confirm-actions {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; width: 100%; margin-top: 4px;
}
.confirm-actions button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; border: 1px solid #d4e1e2; background: #fff;
  color: #3f5558; font-size: 13px; font-weight: 700; cursor: pointer;
}
.confirm-actions .danger {
  border: 0; color: #fff;
  background: linear-gradient(145deg, #c45c26, #8a3030);
  box-shadow: 0 10px 20px #c45c2630;
}
.confirm-actions .warn {
  border: 0; color: #fff;
  background: linear-gradient(145deg, #c47a1f, #a35f12);
  box-shadow: 0 10px 20px #c47a1f30;
}
.confirm-actions .ok {
  border: 0; color: #fff;
  background: linear-gradient(145deg, #0b6e6a, #0e7c74);
  box-shadow: 0 10px 20px #0b6e6a30;
}
.confirm-actions .danger .ui-icon,
.confirm-actions .warn .ui-icon,
.confirm-actions .ok .ui-icon { width: 16px; height: 16px; }
.confirm-actions button:hover { filter: brightness(1.03); }
.pin-change-modal { z-index: 50; }
.pin-change-card {
  width: min(100%, 420px);
  justify-items: stretch;
  text-align: left;
  border-color: #cfe3e2;
  background:
    radial-gradient(120% 90% at 50% 0%, #eef8f7, transparent 55%),
    #fff;
}
.pin-change-card > .confirm-visual { justify-self: center; }
.pin-change-card > h2,
.pin-change-card > p { text-align: center; justify-self: center; }
.pin-change-who { margin-top: 2px; }
.pin-change-form { display: grid; gap: 12px; width: 100%; }
.pin-change-form .field { display: grid; gap: 6px; color: #4e6467; font-size: 12px; font-weight: 700; }
.pin-change-form input {
  width: 100%; min-height: 48px; padding: 0 14px 0 42px;
  border: 1px solid #d4e1e2; border-radius: 12px;
  background: #fbfefe; color: #17343b;
  font-size: 22px; letter-spacing: .35em; text-align: center; font-weight: 700;
}
.pin-change-form input:focus {
  outline: none; border-color: #087d7a;
  box-shadow: 0 0 0 3px #087d7a22; background: #fff;
}
.pin-change-divider {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  color: #8aa0a2; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pin-change-divider::before,
.pin-change-divider::after { content: ""; height: 1px; background: #e2ecec; }
.pin-change-hint {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  color: #6d8083; font-size: 11px; line-height: 1.45; font-weight: 500;
}
.pin-change-hint .ui-icon { width: 15px; height: 15px; margin-top: 1px; color: #087d7a; flex: 0 0 auto; }
.pin-change-form .confirm-actions { margin-top: 2px; }
.change-pin-portal .brand { margin-bottom: 28px; }
.change-pin-panel {
  display: grid; gap: 14px; justify-items: stretch;
  padding: 28px 22px 22px; border: 1px solid #cfe3e2; border-radius: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #eef8f7, transparent 55%),
    #fff;
  box-shadow: 0 18px 40px #17343b14;
}
.change-pin-panel > .confirm-visual { justify-self: center; }
.change-pin-panel header { text-align: center; }
.change-pin-panel header h1 {
  margin: 0 0 6px; font-family: var(--font-display);
  font-size: 24px; letter-spacing: -.02em; color: #17343b;
}
.change-pin-panel header p { margin: 0; color: #6d8083; font-size: 13px; line-height: 1.5; }
.paid-split.tight, .quota-split.tight { margin-top: 0; }
.paid-split.tight .split-grid { gap: 6px; }
.paid-split.tight label { font-size: 10px; }
.paid-split.tight input { min-height: 36px; padding: 8px 10px; border-radius: 8px; }
.quota-split.tight { padding: 8px 10px; font-size: 11px; }
.mail-compact-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start;
}
.hr-leave-board {
  display: grid; gap: 12px; padding: 14px 14px 16px;
  border: 1px solid #d5e6e6; border-radius: 18px;
  background:
    linear-gradient(180deg, #f7fcfb 0%, #fff 42%),
    #fff;
}
.hr-leave-board-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px;
  align-items: end;
}
.hr-leave-board-head small {
  display: block; color: #7a9093; font-size: 10px; font-weight: 700; letter-spacing: .08em;
}
.hr-leave-board-head h3 {
  margin: 2px 0 0; font-size: 16px; color: var(--ops-ink); letter-spacing: -.01em;
}
.hr-leave-board-sum {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  color: #627679; font-size: 12px;
}
.hr-leave-board-sum b { color: var(--ops-ink); font-variant-numeric: tabular-nums; }
.hr-type-kpi-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.hr-type-kpi {
  position: relative;
  display: grid; gap: 4px; padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--leave-color) 28%, #d7e4e4);
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--leave-surface) 88%, #fff), #fff);
  overflow: hidden;
}
.hr-type-kpi.is-focus {
  border-color: color-mix(in srgb, var(--leave-color) 55%, #b9d0d0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leave-color) 18%, transparent);
}
.hr-type-kpi.is-over-quota {
  border-color: color-mix(in srgb, #b74444 40%, #d7e4e4);
  background:
    linear-gradient(145deg, color-mix(in srgb, #fff0f0 70%, var(--leave-surface)), #fff);
}
.hr-kpi-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
  color: #b74444;
  font-size: clamp(18px, 2.4cqi, 26px);
  font-weight: 900;
  letter-spacing: .04em;
  opacity: .14;
  transform: rotate(-18deg) scale(1.05);
  white-space: nowrap;
  user-select: none;
}
.hr-type-kpi.is-over-quota > :not(.hr-kpi-watermark) { position: relative; z-index: 1; }
.hr-type-kpi.is-over-quota small { color: #a34444; font-weight: 700; }
.hr-type-kpi header {
  display: flex; align-items: center; gap: 6px; color: #4f686c; font-size: 11px;
}
.hr-type-kpi header .ui-icon { width: 15px; height: 15px; color: var(--leave-color); }
.hr-type-kpi strong { font-weight: 700; }
.hr-type-kpi b {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 22px; line-height: 1; color: var(--ops-ink); font-variant-numeric: tabular-nums;
}
.hr-type-kpi b span { font-size: 12px; font-weight: 600; color: #6d8083; }
.hr-type-kpi b .hr-kpi-plus,
.hr-leave-board-sum .hr-kpi-plus {
  margin-left: 2px;
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  color: #c45c26;
  font-variant-numeric: tabular-nums;
}
.hr-leave-board-sum .hr-kpi-plus { font-size: 12px; }
.hr-type-kpi small { color: #708285; font-size: 10px; }
.hr-year-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  color: #627679; font-size: 11px;
}
.hr-year-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hr-year-legend i {
  display: inline-block; width: 12px; height: 12px; border-radius: 4px;
  box-sizing: border-box;
}
.hr-year-legend .lg-past {
  background: color-mix(in srgb, var(--ops-teal, #2a8f88) 35%, #e8f3f2);
  border: 1px solid color-mix(in srgb, var(--ops-teal, #2a8f88) 45%, #c5dcdb);
}
.hr-year-legend .lg-latest {
  background: #ff8a2a;
  border: 2px solid #d45a00;
  box-shadow: 0 0 0 2px #ffe2c4;
  animation: hr-cal-legend-pulse 1.4s ease-in-out infinite;
}
.hr-year-legend .lg-pending {
  background: color-mix(in srgb, #ce8218 38%, #fff);
  border: 1px dashed #ce8218;
  animation: hr-cal-legend-pulse 1.4s ease-in-out infinite;
}
.hr-year-legend .lg-holiday {
  background: #f3e9ef;
  border: 1px solid #c9a0b4;
}
body.wide-my-dashboard #app {
  width: min(100%, 1180px);
  padding: 36px 28px 72px;
}
/* HR ops shell already owns #app width — don't fight it when peeking an employee dashboard. */
body.hr-ops-mode.wide-my-dashboard #app {
  width: min(100%, 1440px);
  padding: 0;
}
.my-dash-desktop {
  position: relative;
  width: 100%;
  max-width: none;
}
body.hr-ops-mode .my-dash-desktop.is-viewing-employee {
  min-height: 0;
}
.dash-back { margin: 0 0 10px; }
.my-dash-desktop.is-viewing-employee .my-dash-head h1,
.ops-page.is-viewing-employee .dash-top h1 {
  letter-spacing: -.02em;
}
.my-dash-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 12px 18px;
}
.my-dash-head-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.year-nav {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px; border: 1px solid #c7d9d8; border-radius: 12px; background: #fff;
}
.year-nav > strong {
  min-width: 52px; text-align: center;
  color: #17343b; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.year-nav > button {
  width: 32px; height: 32px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 9px; color: #0b6e6a; background: transparent; cursor: pointer;
}
.year-nav > button:hover { background: #e8f5f4; }
.year-nav > button .ui-icon { width: 16px; height: 16px; }
.year-nav.is-compact > strong { min-width: 48px; font-size: 13px; }
.year-nav.is-compact > button { width: 30px; height: 30px; }
.dash-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.dash-top > div { min-width: 0; }
.dash-top h1 {
  margin: 0;
  line-height: 1.15;
}
.dash-top p { margin: 4px 0 0; }
.dash-top-actions {
  display: flex; align-items: center; gap: 8px; flex: none;
}
@media (max-width: 920px) {
  .dash-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .dash-top h1 { font-size: 24px; }
  .dash-top-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .dash-top-actions .year-nav { margin-right: auto; }
}
.dash-account-actions {
  flex: none;
  display: flex; align-items: center; gap: 8px;
}
.dash-icon-btn,
.dash-logout {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0; padding: 0;
  border: 1px solid #c8d8d9; border-radius: 10px;
  color: #087d7a; background: #fff;
  cursor: pointer;
}
.dash-icon-btn:hover,
.dash-logout:hover { border-color: #087d7a; background: #e5f5f4; }
.dash-icon-btn .ui-icon,
.dash-logout .ui-icon { width: 17px; height: 17px; }
.my-dash-desktop .hr-leave-board { margin-top: 4px; }
.my-dash-sidegrid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; align-items: start;
}
.my-dash-panel {
  display: grid; gap: 10px; padding: 14px;
  border: 1px solid #d5e6e6; border-radius: 16px; background: #fff;
}
.my-dash-panel.is-collapsed { padding: 8px 10px; }
.my-dash-panel > header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.my-dash-panel > header h2 { margin: 0; font-size: 15px; }
.my-dash-panel > header small { color: #7a9093; font-size: 11px; font-weight: 700; }
.my-dash-panel-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: 4px 2px; border: 0; border-radius: 10px;
  color: inherit; background: transparent; text-align: left; cursor: pointer;
}
.my-dash-panel-toggle:hover { background: #f3f9f9; }
.my-dash-panel-toggle .title-icon { margin: 0; font-size: 15px; font-weight: 700; }
.my-dash-panel-meta {
  display: inline-flex; align-items: center; gap: 6px; color: #7a9093; flex: none;
}
.my-dash-panel-meta small { font-size: 11px; font-weight: 700; }
.my-dash-panel-meta .ui-icon { width: 16px; height: 16px; }
.my-dash-holidays {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px;
  max-height: 220px; overflow: auto;
}
.my-dash-holidays > span {
  display: grid; gap: 1px; padding: 7px 9px; border-radius: 10px;
  background: #f7eef3; color: #6d4256;
}
.my-dash-holidays b { font-size: 12px; }
.my-dash-holidays small { color: #8a6074; font-size: 11px; }
.history-list.compact { display: grid; gap: 8px; }
.history-list.compact > .history-item,
.history-list.compact > article,
.history-list.compact > .history-swipe {
  border: 1px solid #e2ecec; border-radius: 12px; background: #fbfefe; border-bottom-style: solid;
}
.history-list.compact .history-item,
.history-list.compact article { padding: 10px 11px; }
.history-list.compact .history-item.is-action-needed,
.history-list.compact article.is-action-needed {
  border-color: #e8b06a;
  background: linear-gradient(180deg, #fff8ef, #fff3e4);
}
.history-list.compact .history-swipe-front {
  padding: 10px 11px;
  border-radius: 12px;
  background: #fbfefe;
}
.history-list.compact .history-swipe-cancel { border-radius: 0 11px 11px 0; }
.history-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.history-pager > small {
  color: #8a9ea1;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.history-pager-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.history-pager-nav span {
  min-width: 3.5em;
  text-align: center;
  color: #5f7376;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.history-pager-nav button {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d4e1e2;
  border-radius: 10px;
  background: #fff;
  color: #3f5558;
}
.history-pager-nav button:hover:not(:disabled) {
  border-color: #9fc9c5;
  color: #0b6e6a;
  background: #f3fbfa;
}
.history-pager-nav button:disabled { opacity: .4; cursor: not-allowed; }
.history-pager-nav .ui-icon { width: 16px; height: 16px; }
.my-dash-panel .history-pager { margin-top: 2px; }
.my-dash-action-hint {
  margin: 0; color: #c45c26; font-size: 12px; font-weight: 700;
}
.dash-action-needed {
  display: grid;
  gap: 10px;
  margin: 2px 0 4px;
  padding: 12px 14px;
  border: 1.5px solid #e8b06a;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff8ef, #fff3e4);
  box-shadow: inset 3px 0 0 #c45c26, 0 8px 18px #c45c2612;
}
.dash-action-needed > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dash-action-needed > header h2 {
  margin: 0;
  color: #8a4b12;
  font-size: 15px;
}
.dash-action-needed > header .ui-icon { color: #c45c26; }
.dash-action-needed > header small {
  color: #c45c26;
  font-size: 11px;
  font-weight: 800;
}
.dash-action-needed .history-list { gap: 8px; }
@media (max-width: 1100px) {
  .my-dash-sidegrid { grid-template-columns: 1fr; }
  .my-dash-holidays { grid-template-columns: 1fr 1fr; }
}
.hr-year-cal {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.hr-year-cal.has-focus .hr-cal-month.is-dim {
  opacity: .38;
  filter: saturate(.45);
}
.hr-year-cal.has-focus .hr-cal-month.has-leave:not(.has-latest) {
  opacity: 1;
  filter: none;
  border-color: #c5d9d8;
  background: linear-gradient(180deg, #f7fbfb, #fff);
}
.hr-cal-month {
  display: grid; gap: 4px; padding: 8px 7px 9px;
  border: 1px solid #e2ecec; border-radius: 12px; background: #fff;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hr-cal-month.has-latest {
  position: relative;
  z-index: 1;
  opacity: 1;
  filter: none;
  transform: scale(1.02);
  border: 2px solid color-mix(in srgb, var(--leave-color, #e08a4f) 85%, #c45c26);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--leave-surface, #fff7ef) 92%, #fff) 0%, #fff 70%),
    #fff;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--leave-color, #e08a4f) 22%, transparent),
    0 10px 22px color-mix(in srgb, var(--leave-color, #e08a4f) 18%, transparent);
  animation: hr-cal-month-glow 1.8s ease-in-out infinite;
}
.hr-cal-month > header {
  display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 16px;
}
.hr-cal-month > header strong {
  font-size: 11px; color: var(--ops-ink); font-weight: 800;
}
.hr-cal-month.has-latest > header strong {
  color: color-mix(in srgb, var(--leave-color, #c45c26) 75%, #17343b);
  font-size: 12px;
}
.hr-cal-head-right {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
}
.hr-cal-month-sum {
  font-style: normal; font-size: 13px; font-weight: 800;
  color: #1f6f6a; font-variant-numeric: tabular-nums; white-space: nowrap;
  letter-spacing: -.01em;
}
.hr-cal-month.has-latest .hr-cal-month-sum {
  color: color-mix(in srgb, var(--leave-color, #c45c26) 80%, #17343b);
  font-size: 14px;
}
.hr-cal-new {
  display: inline-flex; align-items: center; min-height: 15px; padding: 0 5px;
  border-radius: 999px; font-style: normal; font-size: 8px; font-weight: 800;
  letter-spacing: .02em; white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, var(--leave-color, #e08a4f), color-mix(in srgb, var(--leave-color, #e08a4f) 55%, #c45c26));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--leave-color, #e08a4f) 35%, transparent);
  animation: hr-cal-badge-blink 1.2s ease-in-out infinite;
}
.hr-cal-weekdays,
.hr-cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
}
.hr-cal-weekdays span {
  text-align: center; color: #8aa0a2; font-size: 9px; font-weight: 700; line-height: 1.4;
}
.hr-cal-spacer { min-height: 18px; }
.hr-cal-day {
  position: relative;
  display: grid; place-items: center; min-height: 18px; border-radius: 5px;
  color: #4a5f62; font-size: 10px; font-variant-numeric: tabular-nums;
  border: 0; padding: 0; background: transparent; font: inherit; cursor: default;
}
button.hr-cal-day { cursor: pointer; }
button.hr-cal-day:hover { filter: brightness(1.08); transform: scale(1.06); }
button.hr-cal-day:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--leave-color, var(--ops-teal)) 70%, #17343b);
  outline-offset: 1px;
}
.hr-cal-day b { font-weight: 600; position: relative; z-index: 1; font-size: 10px; }
.hr-cal-day.weekend { color: #9aabae; }
.hr-cal-day.is-holiday {
  color: #8a4d67;
  background: #f7eef3;
  box-shadow: inset 0 0 0 1px #e2c2d1;
  cursor: help;
}
.hr-cal-day.is-holiday.weekend { color: #9a6a7d; }
.hr-cal-day.is-holiday[data-holiday-name]:hover::after {
  content: attr(data-holiday-name);
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  min-width: max-content;
  max-width: 160px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #3a2430;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px #17343b33;
}
.hr-cal-month { overflow: visible; }
.hr-cal-grid { overflow: visible; }
.hr-cal-day.is-past {
  min-height: 18px;
  background: var(--leave-color, #2a8f88);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--leave-color, #2a8f88) 70%, #000),
    0 1px 3px color-mix(in srgb, var(--leave-color, #2a8f88) 40%, transparent);
}
.hr-cal-day.is-past b {
  font-size: 10px;
  text-shadow: 0 1px 1px color-mix(in srgb, var(--leave-color, #1f6f6a) 50%, transparent);
}
.hr-cal-day.is-past.weekend {
  color: #fff;
  filter: brightness(.92);
}
.hr-cal-dot {
  position: absolute; bottom: 1px; left: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff; transform: translateX(-50%);
  opacity: .9;
}
.hr-cal-day.is-pending:not(.is-latest) {
  min-height: 18px;
  background: color-mix(in srgb, var(--leave-color, #ce8218) 70%, #fff);
  color: #fff;
  font-weight: 800;
  outline: 1.5px dashed color-mix(in srgb, var(--leave-color, #ce8218) 88%, #17343b);
  outline-offset: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--leave-color, #ce8218) 55%, #000),
    0 0 0 2px color-mix(in srgb, var(--leave-color, #ce8218) 24%, transparent);
  animation: hr-cal-day-pulse 1.15s ease-in-out infinite;
  z-index: 1;
}
.hr-cal-day.is-pending:not(.is-latest) b {
  font-size: 10px;
  text-shadow: 0 1px 1px color-mix(in srgb, var(--leave-color, #ce8218) 50%, transparent);
}
.hr-cal-day.is-pending:not(.is-latest).weekend {
  color: #fff;
  filter: brightness(.95);
}
button.hr-cal-day.is-pending:not(.is-latest):hover {
  filter: brightness(1.06);
  transform: none;
}
.hr-cal-day.is-latest {
  min-height: 18px;
  background: color-mix(in srgb, var(--leave-color, #e08a4f) 62%, #fff);
  color: #fff;
  font-weight: 800;
  font-size: 10px;
  outline: 2px solid color-mix(in srgb, var(--leave-color, #e08a4f) 90%, #17343b);
  outline-offset: 0;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px color-mix(in srgb, var(--leave-color, #e08a4f) 40%, transparent);
  z-index: 2;
  border-radius: 999px;
  animation: hr-cal-day-pulse 1.15s ease-in-out infinite;
}
.hr-cal-day.is-latest.is-range {
  border-radius: 999px;
  min-width: 0;
  padding-inline: 4px;
}
.hr-cal-day.is-past.is-range {
  border-radius: 999px;
  padding-inline: 4px;
}
.hr-cal-day.is-pending.is-range {
  border-radius: 999px;
  padding-inline: 4px;
}
.hr-cal-day.is-latest b,
.hr-cal-day.is-past b {
  font-size: 10px;
}
.hr-cal-day b.is-span {
  font-size: 9px;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hr-cal-day.is-latest b {
  text-shadow: 0 1px 1px color-mix(in srgb, var(--leave-color, #c45c26) 55%, transparent);
}
button.hr-cal-day.is-latest:hover { filter: brightness(1.06); transform: none; }
.hr-cal-ping {
  position: absolute; top: 1px; right: 3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--leave-color, #e08a4f) 70%, #c45c26);
  animation: hr-cal-ping 1.15s ease-out infinite;
}
.hr-cal-day-modal {
  position: fixed; z-index: 40; inset: 0;
  display: grid; place-items: center; padding: 16px;
}
.hr-cal-day-modal .modal-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0;
  background: #0f2a2e55;
  backdrop-filter: blur(3px);
  cursor: pointer;
}
.hr-cal-day-dialog {
  position: relative; z-index: 1;
  width: min(100%, 340px); max-height: min(70vh, 420px);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--leave-color, #2a8f88) 35%, #c5d9d8);
  background: #fff;
  box-shadow: 0 18px 40px #102e3540;
  animation: modal-in .16s ease-out;
}
.hr-cal-day-dialog.is-rich {
  width: min(100%, 420px); max-height: min(82vh, 560px);
  border-radius: 20px;
  border-color: color-mix(in srgb, var(--leave-color, #2a8f88) 42%, #c5d9d8);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--leave-color, #2a8f88) 12%, transparent),
    0 22px 50px #102e3548;
}
.hr-cal-day-dialog-head,
.hr-cal-day-dialog > header {
  display: flex; align-items: start; justify-content: space-between; gap: 10px;
  padding: 14px 14px 12px;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--leave-surface, #eef8f7) 95%, #fff), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--leave-surface, #eef8f7) 70%, #fff), #fff);
  border-bottom: 1px solid #e7f0f0;
}
.hr-cal-day-dialog-identity {
  display: flex; align-items: center; gap: 11px; min-width: 0;
}
.hr-cal-day-dialog-identity > div { min-width: 0; }
.hr-cal-day-dialog-head small,
.hr-cal-day-dialog > header small {
  display: block; color: #6d8083; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.hr-cal-day-dialog-head strong,
.hr-cal-day-dialog > header strong {
  display: block; margin-top: 2px; color: var(--ops-ink); font-size: 16px; letter-spacing: -.02em;
}
.hr-cal-day-who {
  margin: 3px 0 0; color: #627679; font-size: 12px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-cal-day-dialog-head button,
.hr-cal-day-dialog > header button {
  width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  border: 1px solid #d5e4e4; border-radius: 50%; background: #fffc; color: #607779;
  box-shadow: 0 2px 8px #17343b10;
}
.hr-cal-day-dialog-head button .ui-icon,
.hr-cal-day-dialog > header button .ui-icon { width: 15px; height: 15px; }
.hr-cal-day-body {
  overflow: auto; padding: 12px 14px 14px; display: grid; gap: 10px;
  background:
    linear-gradient(180deg, #f7fbfb, #fff 28%);
}
.hr-cal-day-card,
.hr-cal-hover-card .hr-cal-day-card {
  display: grid; gap: 4px; padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--leave-color) 28%, #d7e4e4);
  background: linear-gradient(145deg, color-mix(in srgb, var(--leave-surface) 85%, #fff), #fff);
}
.hr-cal-day-card.is-detailed {
  gap: 10px; padding: 0; overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--leave-color) 26%, #d5e4e4);
  background: #fff;
  box-shadow: 0 8px 20px #17343b0c;
}
.hr-cal-day-card.is-current {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--leave-color) 40%, transparent),
    0 10px 24px color-mix(in srgb, var(--leave-color) 16%, transparent);
}
.hr-cal-day-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 12px 12px 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--leave-surface) 92%, #fff), #fff 70%);
  border-bottom: 1px solid color-mix(in srgb, var(--leave-color) 14%, #e8f0f0);
}
.hr-cal-day-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: color-mix(in srgb, var(--leave-color) 16%, #fff);
  color: var(--leave-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leave-color) 22%, transparent);
}
.hr-cal-day-ico .ui-icon { width: 20px; height: 20px; }
.hr-cal-day-hero-copy { min-width: 0; display: grid; gap: 2px; }
.hr-cal-day-hero-copy strong {
  color: var(--ops-ink); font-size: 14px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-cal-day-hero-copy small {
  color: #6d8083; font-size: 11px; font-variant-numeric: tabular-nums;
  display: block; -webkit-line-clamp: unset;
}
.hr-cal-day-current {
  display: inline-flex; align-self: start; margin: 0 12px;
  padding: 3px 9px; border-radius: 999px; font-style: normal;
  font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--leave-color), color-mix(in srgb, var(--leave-color) 55%, #17343b));
}
.hr-cal-day-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  padding: 0 12px;
}
.hr-cal-day-metrics > span {
  display: grid; gap: 2px; padding: 8px 8px 9px;
  border-radius: 12px; text-align: center;
  background: color-mix(in srgb, var(--leave-surface) 55%, #f4f9f9);
  border: 1px solid color-mix(in srgb, var(--leave-color) 14%, #e2ecec);
}
.hr-cal-day-metrics small {
  color: #7a8d90; font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; display: block; -webkit-line-clamp: unset;
}
.hr-cal-day-metrics b {
  color: var(--ops-ink); font-size: 13px; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.hr-cal-day-metrics b i {
  font-style: normal; font-size: 10px; font-weight: 700; color: #6d8083; margin-left: 2px;
}
.hr-cal-day-period {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px; padding: 9px 11px;
  border-radius: 12px;
  color: #3f5558; font-size: 12px; font-weight: 650;
  background: #f4f9f9;
  border: 1px dashed color-mix(in srgb, var(--leave-color) 22%, #d5e4e4);
}
.hr-cal-day-period .ui-icon { width: 16px; height: 16px; color: var(--leave-color); flex: none; }
.hr-cal-day-block {
  margin: 0 12px; padding: 10px 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfefe, #f7fbfb);
  border: 1px solid #e4eeef;
}
.hr-cal-day-block.soft { background: #f8fafa; }
.hr-cal-day-block.note {
  background: #fff9f2;
  border-color: #f0dcc0;
}
.hr-cal-day-block small {
  display: block; margin-bottom: 4px;
  color: #7a8d90; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; -webkit-line-clamp: unset;
}
.hr-cal-day-block.note small { color: #a86a2a; }
.hr-cal-day-block p {
  margin: 0; color: var(--ops-ink); font-size: 13px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.hr-cal-day-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px 12px;
  border-top: 1px solid #eef4f4;
  background: #fbfefe;
}
.hr-cal-day-meta > span {
  display: inline-flex; align-items: center; gap: 6px;
  color: #7a8d90; font-size: 11px; min-width: 0;
}
.hr-cal-day-meta > span:last-child:not(:only-child) {
  justify-content: flex-end; text-align: end;
}
.hr-cal-day-meta > span > span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-cal-day-meta .ui-icon { width: 13px; height: 13px; color: #9aabac; flex: none; }
.hr-cal-day-actors {
  display: flex; align-items: start; justify-content: space-between; gap: 10px;
  padding: 0 12px 12px;
}
.hr-cal-day-actors > span {
  display: grid; gap: 2px; min-width: 0;
}
.hr-cal-day-actors > span.end { text-align: end; margin-left: auto; }
.hr-cal-day-actors small {
  display: block; color: #8aa0a2; font-size: 10px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; -webkit-line-clamp: unset;
}
.hr-cal-day-actors b {
  color: var(--ops-ink); font-size: 12px; font-weight: 750;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hr-cal-day-card header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.hr-cal-day-card header > span {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--ops-ink); font-size: 13px;
}
.hr-cal-day-card header .ui-icon { width: 16px; height: 16px; color: var(--leave-color); flex: none; }
.hr-cal-day-card p {
  margin: 0; color: #4a5f62; font-size: 12px; line-height: 1.4;
}
.hr-cal-day-card small {
  color: #708285; font-size: 11px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hr-cal-day-status {
  flex: none; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
}
.hr-cal-day-status.ok { background: #e7f6f1; color: #1f6f6a; }
.hr-cal-day-status.wait { background: #fff4e8; color: #c45c26; }
.hr-cal-day-status.bad { background: #fdeeee; color: #b94f4f; }
.hr-cal-hover-card {
  position: absolute; z-index: 30; width: min(260px, calc(100% - 16px));
  padding: 10px; border-radius: 14px;
  border: 1px solid #cfe3e2; background: #fff;
  box-shadow: 0 12px 28px #17343b28;
  pointer-events: none;
  animation: modal-in .12s ease-out;
}
.hr-cal-hover-card > header {
  display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px;
}
.hr-cal-hover-card > header small { color: #6d8083; font-size: 10px; font-weight: 700; }
.hr-cal-hover-card > header strong { color: var(--ops-ink); font-size: 13px; }
.hr-cal-hover-card .hr-cal-day-card { padding: 8px 9px; }
.hr-cal-hover-card .hr-cal-day-card + .hr-cal-day-card { margin-top: 6px; }
.hr-cal-hover-hint {
  margin: 8px 0 0; color: #8aa0a2; font-size: 10px; text-align: center;
}
@keyframes hr-cal-day-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.06); }
}
@keyframes hr-cal-ping {
  0% { transform: scale(.8); opacity: 1; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(.8); opacity: 0; }
}
@keyframes hr-cal-month-glow {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--leave-color, #e08a4f) 18%, transparent), 0 10px 22px color-mix(in srgb, var(--leave-color, #e08a4f) 14%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--leave-color, #e08a4f) 28%, transparent), 0 12px 26px color-mix(in srgb, var(--leave-color, #e08a4f) 22%, transparent); }
}
@keyframes hr-cal-badge-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .78; transform: scale(1.04); }
}
@keyframes hr-cal-legend-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hr-cal-month.has-latest,
  .hr-cal-day.is-latest,
  .hr-cal-ping,
  .hr-cal-new,
  .hr-year-legend .lg-latest {
    animation: none !important;
  }
}
.track-card { display: grid; gap: 16px; padding: 18px; overflow: hidden; }
.self-approve-note.compact { margin: 0; }
.mail-dl { display: grid; gap: 10px; margin: 0; }
.mail-dl > div { display: grid; gap: 3px; }
.mail-dl dt { color: #708285; font-size: 10px; font-weight: 700; }
.mail-dl dd { margin: 0; color: var(--ops-ink); font-size: 13px; white-space: pre-wrap; }
.mail-balances { display: grid; gap: 10px; }
.mail-balances article { display: grid; gap: 5px; }
.mail-balances header { display: flex; justify-content: space-between; gap: 8px; }
.mail-balances strong { font-size: 12px; }
.mail-balances em { font-style: normal; font-size: 11px; color: var(--ops-teal); font-weight: 700; }
.mail-balances.over em, .mail-balances article.over em { color: var(--ops-signal); }
.mail-meter { height: 6px; border-radius: 999px; background: #e4eeef; overflow: hidden; }
.mail-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--ops-teal), #3aa39c); }
.mail-balances article.over .mail-meter i { background: linear-gradient(90deg, #c45c26, #e08a4f); }
.mail-balances small { color: #708285; font-size: 10px; }
.mail-year-sum {
  display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #e8f0f1; color: #5f7376; font-size: 11px;
}
.mail-year-sum b { color: var(--ops-ink); }
.mail-history { display: grid; }
.mail-history article {
  display: flex; justify-content: space-between; gap: 10px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid #eef4f4;
}
.mail-history article:last-child { border-bottom: 0; }
.mail-history article.current { background: #eef8f7; margin: 0 -8px; padding: 10px 8px; border-radius: 10px; }
.mail-history span { display: grid; gap: 2px; min-width: 0; }
.mail-history strong { font-size: 12px; }
.mail-history small { color: #708285; font-size: 10px; }
.mail-history small.muted { color: #8a9a9c; }
.ops-type-list.compact { padding: 0; gap: 10px; }
@container ops (max-width: 980px) {
  .mail-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mail-columns { grid-template-columns: 1fr; }
  .mail-actions { grid-template-columns: 1fr 1fr; }
  .mail-actions .approve-main { grid-column: 1 / -1; }
  .hr-type-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-year-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .mail-board {
    gap: 10px;
  }
  .mail-inbox-hero {
    padding-top: 0;
  }
  .mail-inbox-hero h1 { font-size: 24px; }
  .mail-inbox-hero p { margin-top: 4px; font-size: 12px; }
  .mail-board.is-mobile-list .mail-split,
  .mail-board.is-mobile-reading .mail-split {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    border-radius: 18px;
    min-height: 0;
    height: 100%;
  }
  .mail-board.is-mobile-list .mail-reading-pane {
    display: none;
  }
  .mail-board.is-mobile-list .mail-list-pane {
    border-inline-end: 0;
    height: 100%;
    min-height: 0;
  }
  .mail-board.is-mobile-list .mail-list-head {
    padding: 14px 16px;
  }
  .mail-board.is-mobile-list .mail-list-head h2 {
    font-size: 16px;
  }
  .mail-board.is-mobile-list .mail-row {
    padding: 14px 14px 14px 12px;
    gap: 12px;
    min-height: 72px;
  }
  .mail-board.is-mobile-reading .mail-list-pane {
    display: none;
  }
  .mail-board.is-mobile-reading .mail-reading-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .mail-board.is-mobile-reading .mail-reading {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 12px 12px;
  }
  .mail-board.is-mobile-reading .mail-reading-head {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .mail-board.is-mobile-reading .mail-identity {
    display: none;
  }
  .mail-board.is-mobile-reading .mail-mobile-status {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
  }
  .mail-board.is-mobile-reading .mail-mobile-status.ok { background: #e5f7ec; color: #147544; }
  .mail-board.is-mobile-reading .mail-mobile-status.bad { background: #fdeeee; color: #9a3030; }
  .mail-board.is-mobile-reading .mail-mobile-status.muted { background: #eef1f2; color: #6d8083; }
  .mail-board.is-mobile-reading .mail-head-aside {
    width: 100%;
    justify-items: stretch;
  }
  .mail-board.is-mobile-reading .mail-leave-hero {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px 8px 14px;
    border-radius: 10px;
    box-shadow: none;
    justify-items: unset;
    align-content: unset;
  }
  .mail-board.is-mobile-reading .mail-leave-hero::before {
    width: 3px;
  }
  .mail-board.is-mobile-reading .mail-leave-hero-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
  }
  .mail-board.is-mobile-reading .mail-leave-hero strong {
    font-size: 13px;
    font-weight: 700;
  }
  .mail-board.is-mobile-reading .mail-leave-hero .mail-mobile-status {
    width: fit-content;
  }
  .mail-board.is-mobile-reading .mail-leave-hero b {
    font-size: 20px;
    gap: 4px;
    flex: none;
  }
  .mail-board.is-mobile-reading .mail-leave-hero b span {
    font-size: 12px;
    transform: none;
  }
  .mail-board.is-mobile-reading .leave-hero-mark { display: none; }
  .mail-board.is-mobile-reading .mail-leave-facts {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .mail-board.is-mobile-reading .mail-leave-facts:has(.mail-attach-mini) {
    padding-bottom: 10px;
  }
  .mail-board.is-mobile-reading .mail-fact-days { display: none; }
  .mail-board.is-mobile-reading .mail-fact { gap: 2px; }
  .mail-board.is-mobile-reading .mail-fact > small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .mail-board.is-mobile-reading .mail-fact > strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
  }
  .mail-board.is-mobile-reading .mail-fact > span {
    font-size: 11px;
    font-weight: 550;
  }
  .mail-board.is-mobile-reading .mail-fact-reason > p {
    font-size: 13px;
    font-weight: 550;
    line-height: 1.4;
  }
  .mail-board.is-mobile-reading .mail-attach-mini {
    position: static;
    justify-content: flex-start;
    max-width: none;
    margin-top: 2px;
  }
  .mail-board.is-mobile-reading .mail-card {
    padding: 10px 12px;
    border-radius: 10px;
  }
  .mail-board.is-mobile-reading .mail-card.tight { padding: 8px 10px; }
  .mail-board.is-mobile-reading .mail-coverage-head h3 { font-size: 12px; }
  .mail-board.is-mobile-reading .mail-coverage-head > b { min-height: 22px; font-size: 10px; }
  .mail-board.is-mobile-reading .mail-compact-grid {
    gap: 8px;
  }
  .mail-board.is-mobile-reading .hr-leave-board {
    padding: 10px 12px;
    border-radius: 10px;
    gap: 8px;
  }
  .mail-board.is-mobile-reading .hr-leave-board-head h3 { font-size: 13px; }
  .mail-board.is-mobile-reading .hr-leave-board-sum { font-size: 11px; }
  .mail-board.is-mobile-reading .hr-type-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .mail-board.is-mobile-reading .hr-type-kpi {
    padding: 8px;
    border-radius: 8px;
    gap: 2px;
  }
  .mail-board.is-mobile-reading .hr-type-kpi strong { font-size: 12px; }
  .mail-board.is-mobile-reading .hr-type-kpi small { font-size: 10px; }
  .mail-board.is-mobile-reading .hr-year-cal,
  .mail-board.is-mobile-reading .hr-year-legend {
    display: none;
  }
  .mail-board.is-mobile-reading .track-card {
    padding: 10px 12px;
    border-radius: 10px;
  }
  .mail-board.is-mobile-reading .track-number { font-size: 16px; }
  .mail-board.is-mobile-reading .track-head { gap: 8px; }
  .mail-board.is-mobile-reading .track-timeline-wrap h3 { font-size: 12px; }
  .mail-board.is-mobile-reading .track-timeline { gap: 0; }
  .mail-board.is-mobile-reading .mail-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .mail-board.is-mobile-reading .mail-actions .approve-main {
    grid-column: 1 / -1;
    min-height: 40px;
    font-size: 13px;
  }
  .mail-board.is-mobile-reading .mail-actions button {
    min-height: 34px;
    font-size: 11px;
    border-radius: 8px;
  }
  .mail-mobile-toolbar {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 10px;
    border-bottom: 1px solid #e4eeef;
    background: #fffc;
    backdrop-filter: blur(10px);
  }
  .mail-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 32px;
    margin: 0;
    padding: 0 8px 0 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0b6e6a;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex: none;
  }
  .mail-mobile-back .ui-icon { width: 18px; height: 18px; }
  .mail-mobile-back:hover { background: #eef5f5; }
  .mail-mobile-toolbar-meta {
    min-width: 0;
    display: grid;
    gap: 0;
  }
  .mail-mobile-toolbar-meta strong {
    color: #17343b;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mail-mobile-toolbar-meta small {
    color: #8a9ea1;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mail-board.is-mobile-reading > .mail-split > .mail-reading-pane > .mail-decide.sticky-actions {
    position: relative;
    z-index: 5;
    flex: none;
    margin: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid #d7e5e6;
    border-radius: 0;
    background: #fffc;
    backdrop-filter: blur(10px);
    box-shadow: 0 -6px 16px #0f2a2e0a;
  }
  .mail-board.is-mobile-reading .mail-action-bar { gap: 4px; }
  .mail-board.is-mobile-reading .quota-split.tight {
    padding: 6px 8px;
    font-size: 11px;
  }
  .mail-board.is-mobile-reading .mail-leave-hero + .mail-leave-facts,
  .mail-board.is-mobile-reading .mail-reading-head + .mail-leave-facts {
    margin-top: 0;
  }
}
@media (max-width: 720px) {
  .mail-kpi-strip { grid-template-columns: 1fr 1fr; }
  .hr-type-kpi-grid { grid-template-columns: 1fr 1fr; }
  .hr-year-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mail-row.has-overlap .mail-row-bot { color: #a85a1c; font-weight: 600; }
.mail-coverage { background: linear-gradient(180deg, #fffaf4, #fcfefe); border-color: #f0d7b0; }
.mail-coverage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mail-coverage-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.mail-coverage-head .ui-icon { width: 18px; height: 18px; color: var(--ops-signal); }
.mail-coverage-head > b {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  border-radius: 999px; background: #e8f3f2; color: var(--ops-teal); font-size: 11px;
}
.mail-coverage-head > b.hot { background: #fff1e8; color: var(--ops-signal); }
.mail-coverage-note { margin: 0 0 12px; color: #7a6a55; font-size: 12px; }
.mail-coverage-empty { margin: 0 0 8px; color: #8aa0a2; font-size: 12px; }
.day-avatars {
  display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: start;
}
.day-person {
  display: grid; justify-items: center; gap: 4px;
  margin: 0; width: 52px; min-width: 0;
}
.day-person figcaption {
  max-width: 100%;
  color: var(--ops-ink); font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-person .person-avatar { --avatar-size: 34px; }
.person-avatar {
  --avatar-size: 36px;
  position: relative;
  display: inline-grid; place-items: center;
  flex: none; flex-shrink: 0;
  width: var(--avatar-size); height: var(--avatar-size);
  min-width: var(--avatar-size); min-height: var(--avatar-size);
  max-width: var(--avatar-size); max-height: var(--avatar-size);
  aspect-ratio: 1;
  border-radius: 34%;
  color: var(--avatar-ink, #fff);
  background:
    radial-gradient(circle at 28% 24%, #ffffff66 0 18%, transparent 42%),
    linear-gradient(155deg, var(--avatar-a, #128f88), var(--avatar-b, #0b3f42) 72%);
  box-shadow:
    inset 0 1px 0 #ffffff55,
    inset 0 -10px 18px #00000022,
    0 8px 16px #0f2a2e22;
  isolation: isolate;
  overflow: clip;
}
.person-avatar.has-photo {
  background:
    radial-gradient(circle at 35% 30%, #ffffffcc, #eef5f6 70%);
  box-shadow:
    inset 0 0 0 1px #ffffffaa,
    0 6px 14px #0f2a2e1f;
}
.person-avatar .avatar-photo {
  position: absolute; inset: 0;
  background-image: var(--avatar-photo);
  background-repeat: no-repeat;
  /* sheet.png is 600×564 (not square); size by height so faces stay proportional */
  background-size: var(--avatar-photo-size, auto 300%);
  background-position: var(--avatar-x, 0%) var(--avatar-y, 0%);
  background-color: transparent;
}
.person-avatar > b {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: calc(var(--avatar-size) * .32);
  font-weight: 700; letter-spacing: 0; line-height: 1;
}
.person-avatar.has-photo > b { display: none; }
.person-avatar .avatar-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(125deg, transparent 35%, #ffffff28 48%, transparent 62%),
    repeating-linear-gradient(-18deg, #ffffff10 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
  opacity: .9;
}
.person-avatar.has-photo .avatar-sheen { opacity: .25; }
.person-avatar .avatar-pip {
  position: absolute; z-index: 2;
  right: 2px; bottom: 2px;
  width: calc(var(--avatar-size) * .22); height: calc(var(--avatar-size) * .22);
  border-radius: 50%;
  background: var(--avatar-pip, #fff);
  box-shadow: 0 0 0 2px #fff, 0 2px 6px #0f2a2e33;
}
.person-avatar.sm { --avatar-size: 28px; border-radius: 32%; }
.person-avatar.lg { --avatar-size: 48px; border-radius: 36%; }
.person-avatar.xl { --avatar-size: 56px; border-radius: 38%; }
.person-avatar.is-approved {
  box-shadow:
    inset 0 1px 0 #ffffff55,
    inset 0 -10px 18px #00000022,
    0 0 0 2px #ffffff,
    0 0 0 4px #2f8f68aa,
    0 8px 16px #0f2a2e22;
}
.person-avatar.is-pending {
  box-shadow:
    inset 0 1px 0 #ffffff55,
    inset 0 -10px 18px #00000022,
    0 0 0 2px #ffffff,
    0 0 0 4px #d9783caa,
    0 8px 16px #0f2a2e22;
}
.person-avatar.more {
  background: linear-gradient(155deg, #e7efef, #d5e1e2);
  color: #3f5558;
  box-shadow: inset 0 1px 0 #ffffffaa, 0 6px 12px #0f2a2e12;
}
.person-avatar.more > b { text-shadow: none; font-size: calc(var(--avatar-size) * .3); }
.avatar-stack {
  display: flex; align-items: center; padding-inline-start: 4px; min-height: 40px;
}
.avatar-stack > span {
  margin-inline-start: -10px;
  position: relative;
  z-index: var(--i, 0);
  transition: transform .18s ease, z-index 0s;
}
.avatar-stack > span:hover {
  z-index: 20;
  transform: translateY(-3px) scale(1.08);
}
.avatar-stack .person-avatar {
  box-shadow:
    inset 0 1px 0 #ffffff55,
    inset 0 -8px 14px #0000001f,
    0 0 0 2.5px #fff8f1,
    0 8px 14px #0f2a2e1a;
}
.avatar-stack.empty {
  color: #9aadaf; font-size: 11px; padding-inline-start: 0; min-height: auto;
}
.mail-day-grid.tight .avatar-stack { min-height: 36px; }
.mail-day-grid.tight .person-avatar { --avatar-size: 30px; }
.mail-day .day-clear { margin: auto 0 0; color: #b4c4c5; font-size: 12px; }
.mail-identity .person-avatar.xl { margin-top: 2px; }
.mail-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}
.mail-day {
  display: grid; gap: 8px; min-height: 110px; padding: 10px;
  border: 1px solid #e4eeef; border-radius: 14px; background: #fff;
}
.mail-day-grid.tight { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.mail-day-grid.tight .mail-day { min-height: 96px; gap: 10px; padding: 10px; border-radius: 12px; align-content: start; }
.mail-day-grid.tight .mail-day header { font-size: 12px; }
.mail-day-grid.tight .mail-day header strong { font-size: 13px; }
.mail-coverage.tight { padding: 10px 12px; }
.mail-coverage.tight .mail-coverage-note { display: none; }
.mail-history.tight article { padding: 7px 0; }
.mail-dl.inline > div { gap: 2px; }
.attachment-list.tight { gap: 4px; margin-top: 6px; }
.attachment-list.tight .file-row { min-height: 40px; padding: 8px 10px; }
.mail-day.weekend { background: #f3f6f7; }
.mail-day.clear { border-style: dashed; }
.mail-day.busy { border-color: #f0c4a8; background: #fff8f1; }
.mail-day header { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.mail-day header strong { font-size: 13px; color: var(--ops-ink); }
.mail-day header small { color: #8a9a9c; font-size: 10px; }
.mail-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mail-day li { display: grid; gap: 1px; }
.mail-day li strong { font-size: 11px; color: var(--ops-ink); }
.mail-day li small { font-size: 10px; color: #708285; }
.mail-day > p { margin: auto 0 0; color: #8aa0a2; font-size: 12px; }
.mail-day > em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--ops-signal); }
.mail-overlap-list { display: grid; gap: 0; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0e0cc; }

.mail-request-card { display: grid; gap: 10px; }
.track-card {
  position: relative;
  border-color: #cfe0e2;
  background:
    radial-gradient(90% 70% at 100% 0%, #e7f4f3 0%, transparent 45%),
    linear-gradient(180deg, #f8fcfc, #fff);
}
.track-card::after {
  content: "";
  position: absolute; inset: auto -20% -40% auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, #0b6e6a14, transparent 68%);
  pointer-events: none;
}
.track-head {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.track-head small {
  display: block; margin-bottom: 4px;
  color: #6d8083; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.track-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8cqi, 28px);
  font-weight: 800; letter-spacing: .04em; line-height: 1.1;
  color: var(--ops-ink);
}
.track-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 8px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.track-status .ui-icon { width: 15px; height: 15px; }
.track-status.ok { color: #0f5c3a; background: #e3f6eb; border: 1px solid #b7e4c7; }
.track-status.bad { color: #8a3030; background: #fdeeee; border: 1px solid #efd0d0; }
.track-status.muted { color: #4e6467; background: #eef3f3; border: 1px solid #d7e5e6; }
.track-status.pending { color: #8a4b12; background: #fff4e8; border: 1px solid #f0d2a8; }
.track-head-status {
  display: grid; justify-items: end; gap: 8px;
}
.track-cancel-leave {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 32px; padding: 0 12px;
  border: 1px solid #efd0d0; border-radius: 999px;
  background: #fff; color: #8a3030;
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.track-cancel-leave .ui-icon { width: 13px; height: 13px; }
.track-cancel-leave:hover { background: #fff1f1; }
.track-steps {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0;
  padding: 12px 14px; border-radius: 14px;
  background: #102e3510; border: 1px solid #d7e5e6;
}
.track-step {
  display: grid; justify-items: center; gap: 6px; min-width: 72px;
  color: #8aa0a2; font-size: 11px; font-weight: 700;
}
.track-step > i {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #c9d8d9; background: #fff;
  font-style: normal; font-size: 12px; font-weight: 800;
}
.track-step.done { color: #0b6e6a; }
.track-step.done > i { border-color: #0b6e6a; background: #0b6e6a; color: #fff; }
.track-step.active { color: #8a4b12; }
.track-step.active > i {
  border-color: #c47a1f; background: #fff7ef; color: #8a4b12;
  box-shadow: 0 0 0 4px #c47a1f22;
}
.track-step.ok > i { border-color: #2f8f68; background: #2f8f68; color: #fff; }
.track-step.bad > i { border-color: #c45f5f; background: #c45f5f; color: #fff; }
.track-step.muted > i { border-color: #7a8d90; background: #7a8d90; color: #fff; }
.track-step-rail {
  flex: 1; height: 3px; margin: 0 8px 18px; border-radius: 999px;
  background: #d4e1e2; font-style: normal;
}
.track-step-rail.on { background: linear-gradient(90deg, #0b6e6a, #3aa39c); }
.track-route {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
}
.track-route article {
  display: grid; gap: 3px; min-width: 0;
  padding: 12px 14px; border-radius: 14px;
  background: #fff; border: 1px solid #e4eeef;
}
.track-route small {
  color: #6d8083; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.track-route strong {
  color: var(--ops-ink); font-size: 14px; font-weight: 800; line-height: 1.35;
}
.track-route span { color: #6d8083; font-size: 12px; }
.track-route-bridge {
  display: flex; align-items: center; gap: 5px; color: #0b6e6a;
}
.track-route-bridge i {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35;
  animation: trackPulse 1.4s ease-in-out infinite;
}
.track-route-bridge i:nth-child(2) { animation-delay: .15s; opacity: .55; }
.track-route-bridge i:nth-child(3) { animation-delay: .3s; opacity: .8; }
@keyframes trackPulse {
  0%, 100% { transform: translateY(0); opacity: .25; }
  50% { transform: translateY(-2px); opacity: .9; }
}
.track-body {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .9fr); gap: 14px;
}
.track-timeline-wrap {
  min-width: 0; padding: 4px 2px 0;
  background: transparent; border: 0;
}
.track-timeline-wrap > h3,
.track-facts > h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 12px; color: var(--ops-ink);
}
.track-timeline-wrap > h3 .ui-icon { width: 16px; height: 16px; color: var(--ops-teal); }
.track-timeline {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
}
.track-timeline li {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
  padding: 0 0 16px;
}
.track-timeline li:last-child { padding-bottom: 0; }
.track-timeline li:not(:last-child)::before {
  content: "";
  position: absolute; left: 16px; top: 30px; bottom: 0;
  width: 2px; background: linear-gradient(180deg, #b7d4d2, #e4eeef);
}
.track-dot {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #e8f3f2; color: #0b6e6a; border: 2px solid #fff;
  box-shadow: 0 0 0 1px #cfe3e2;
}
.track-dot .ui-icon { width: 16px; height: 16px; }
.track-timeline li.latest .track-dot {
  background: #0b6e6a; color: #fff;
  box-shadow: 0 0 0 4px #0b6e6a22;
}
.track-timeline li.ok .track-dot { background: #e3f6eb; color: #1f7a52; }
.track-timeline li.ok.latest .track-dot { background: #1f7a52; color: #fff; }
.track-timeline li.bad .track-dot { background: #fdeeee; color: #b44545; }
.track-timeline li.bad.latest .track-dot { background: #b44545; color: #fff; }
.track-timeline li.warn .track-dot { background: #fff4e8; color: #a35f12; }
.track-timeline li.warn.latest .track-dot { background: #c47a1f; color: #fff; }
.track-timeline li.pending .track-dot { background: #fff4e8; color: #a35f12; }
.track-timeline li.pending.latest .track-dot {
  background: #c47a1f; color: #fff;
  box-shadow: 0 0 0 4px #c47a1f22;
}
.track-timeline li > div { display: grid; gap: 3px; min-width: 0; padding-top: 2px; }
.track-timeline li header {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.track-timeline strong { font-size: 13px; color: var(--ops-ink); }
.track-timeline time { color: #7a8d90; font-size: 11px; white-space: nowrap; }
.track-timeline p { margin: 0; color: #4e6467; font-size: 12px; line-height: 1.45; }
.track-timeline small { color: #8aa0a2; font-size: 11px; }
.track-event-lines {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6d8083;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
}
.track-event-lines .track-sep {
  display: inline-block;
  margin: 0 .28em;
  color: #b7c7c9;
  font-weight: 600;
}
.track-event-lines .track-hi {
  font-weight: 800;
  letter-spacing: -.01em;
}
.track-event-lines .track-hi.key { color: var(--ops-ink); }
.track-event-lines .track-hi.ok { color: #1f7a52; }
.track-event-lines .track-hi.bad { color: #b44545; }
.track-event-lines .track-hi.warn { color: #a35f12; }
.track-event-lines .track-mute { color: #7a8d90; font-weight: 500; }
.track-timeline li.latest .track-event-lines,
.track-timeline li.ok.latest .track-event-lines,
.track-timeline li.warn.latest .track-event-lines,
.track-timeline li.pending.latest .track-event-lines {
  background: transparent; border: 0;
}
.track-facts dl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px;
}
.track-facts dl > div { display: grid; gap: 3px; min-width: 0; }
.track-facts dl > div.full { grid-column: 1 / -1; }
.track-facts dt {
  color: #6d8083; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.track-facts dd {
  margin: 0; color: var(--ops-ink); font-size: 13px; line-height: 1.4; white-space: pre-wrap;
}
.track-empty-docs {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: #f4f9f9; color: #7a8d90; font-size: 12px; text-align: center;
}
.track-system-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e7f3f7;
  color: #0b5f6e;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}
.track-system-flag .ui-icon { width: 13px; height: 13px; }
.track-cycle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.track-bounce-count {
  display: inline-flex; padding: 4px 9px;
  border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800;
  color: #8a4b12; background: #fff4e8; border: 1px solid #f0d2a8;
}
.track-bounce-count.is-hot {
  color: #fff;
  background: #c45c26;
  border-color: #c45c26;
}
.track-bounce-count.is-muted {
  color: #5f7376;
  background: #eef3f3;
  border-color: #d7e2e2;
}
.track-bounces {
  margin: 0 0 12px; padding: 12px;
  border-radius: 12px; background: #fff8ef; border: 1px solid #f0d7b0;
}
.track-bounces > h4 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px; color: #8a4b12; font-size: 12px; font-weight: 800;
}
.track-bounces > h4 .ui-icon { width: 15px; height: 15px; }
.track-bounces ol {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
}
.track-bounces li {
  display: grid; gap: 4px;
  padding: 10px 11px; border-radius: 10px;
  background: #fff; border: 1px solid #f0e0cc;
}
.track-bounces li.done { border-color: #cfe3e2; background: #f7fbfb; }
.track-bounces li header {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.track-bounces li b { color: #5c3d16; font-size: 12px; }
.track-bounces li.done b { color: #0f5c3a; }
.track-bounces li time { color: #9a7a4a; font-size: 10px; white-space: nowrap; }
.track-bounces li p {
  margin: 0; color: #5c3d16; font-size: 12px; line-height: 1.45; white-space: pre-wrap;
}
.track-bounces li p.muted-note { color: #9a7a4a; font-style: italic; }
.track-bounces li small { color: #9a7a4a; font-size: 11px; }
@media (max-width: 920px) {
  .track-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .track-head { flex-direction: column; align-items: stretch; }
  .track-head-status { justify-items: start; }
  .track-status { justify-content: center; }
  .track-cancel-leave { width: 100%; }
  .track-route { grid-template-columns: 1fr; }
  .track-route-bridge { justify-content: center; padding: 2px 0; }
  .track-steps { overflow-x: auto; }
  .track-facts dl { grid-template-columns: 1fr; }
  .mail-meta-row { grid-template-columns: 1fr; }
}

/* Master employees */
.ops-layout:has(.emp-page-fill) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.ops-main:has(.emp-page-fill) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding-bottom: 18px;
}
.ops-main:has(.emp-page-fill) > .ops-mobile-bar { flex: none; }
.emp-page { gap: 14px; }
.emp-page-fill {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}
.emp-page-chrome { display: grid; gap: 12px; }
.emp-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.emp-page-head small {
  display: block; margin-bottom: 4px; color: #6d8083;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.emp-page-head h1 { margin: 0; font-size: clamp(26px, 3vw, 32px); }
.emp-page-head p { margin-top: 4px; color: #738085; font-size: 13px; }
.emp-add-btn.primary {
  width: auto; margin-top: 0;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; white-space: nowrap;
  font-size: 14px; border-radius: 12px;
}
.emp-toolbar {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
}
.emp-search { flex: 1 1 220px; margin: 0; }
.emp-search .input-icon { width: 100%; }
.emp-view-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid #d0e0df; border-radius: 12px; background: #e7f1f1;
}
.emp-view-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: #5f7376; font-size: 12px; font-weight: 700;
}
.emp-view-toggle button.active {
  background: #fff; color: #087d7a;
  box-shadow: 0 2px 8px #0f2a2e14;
}
.emp-view-toggle .ui-icon { width: 16px; height: 16px; }
.emp-summary {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  color: #6d8083; font-size: 12px;
}
.emp-summary strong { color: #17343b; font-size: 18px; font-variant-numeric: tabular-nums; }
.emp-fit-hint {
  margin-left: auto;
  color: #8a9ea1; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.emp-empty {
  min-height: 0; height: 100%;
  display: grid; place-items: center;
  padding: 28px 16px; border-radius: 16px; background: #fff; border: 1px dashed #d0e0df; text-align: center;
}

.emp-card-grid {
  --emp-cols: 2;
  --emp-rows: 2;
  --emp-row-h: 186px;
  container-type: inline-size;
  container-name: emp-cards;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--emp-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--emp-rows), var(--emp-row-h));
  gap: 10px;
  align-content: start;
}
.emp-card-grid.is-partial {
  height: auto;
  align-content: start;
}
.emp-card {
  --emp-card-pad: 10px;
  position: relative;
  isolation: isolate;
  min-height: 0;
  height: var(--emp-row-h);
  max-height: var(--emp-row-h);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 6px;
  padding: var(--emp-card-pad);
  overflow: hidden;
  border: 1px solid #d2e2e1;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #f3fafa 0%, #ffffff 42%),
    #fff;
  box-shadow:
    0 1px 0 #ffffffcc inset,
    0 10px 24px #102e350a;
  translate: 0 0;
  scale: 1;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    translate .2s ease;
}
.emp-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #0b6e6a, #2bb5ad 55%, #d7ebe9);
  opacity: .85;
  pointer-events: none;
}
.emp-card:hover {
  border-color: #a9cecb;
  box-shadow:
    0 1px 0 #ffffffcc inset,
    0 16px 34px #102e3516;
  translate: 0 -2px;
}
@media (prefers-reduced-motion: reduce) {
  .emp-card { transition: border-color .15s ease, box-shadow .15s ease; }
  .emp-card:hover { translate: 0 0; }
}
.emp-card.is-inactive {
  background:
    linear-gradient(180deg, #f4f6f6 0%, #fafcfc 50%),
    #fafcfc;
}
.emp-card.is-inactive::before {
  background: linear-gradient(90deg, #9aaeb1, #c5d4d6);
  opacity: .7;
}
.emp-card.is-inactive .emp-card-meta strong { color: #5f7376; }
.emp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.emp-card-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.emp-card .person-avatar.xl {
  --avatar-size: 40px;
  box-shadow:
    inset 0 0 0 1px #ffffffaa,
    0 4px 10px #0f2a2e14;
}
.emp-card-email {
  display: block;
  color: #6a7f82;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-card-email.is-empty { color: #a7b6b8; font-style: italic; }
.emp-card-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.emp-card-code {
  color: #0b6e6a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.emp-card-meta strong {
  color: #17343b;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.emp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: start;
}
.emp-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-content: center;
  align-self: center;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 4px 0;
  border-block: 1px solid #e7efef;
  overflow: hidden;
}
.emp-stat {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  padding: 1px 4px;
  color: #17343b;
}
.emp-stat + .emp-stat {
  border-left: 1px solid #e7efef;
}
.emp-stat > small {
  color: #8a9ea1;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}
.emp-stat > b {
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.emp-stat.is-zero > b {
  color: #b4c4c6;
  font-weight: 500;
}
.emp-card.is-inactive .emp-card-stats { border-color: #e6eaea; }
.emp-card.is-inactive .emp-stat { color: #6d7f82; }
.emp-card.is-inactive .emp-stat + .emp-stat { border-left-color: #e6eaea; }
.emp-card.is-inactive .emp-stat > small { color: #9aabad; }
.emp-card.is-inactive .emp-stat.is-zero > b { color: #c2cdcf; }
.emp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  max-width: 100%;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  border: 1px solid #d7e5e4;
  background: #f4fafa;
  color: #3f5558;
  font-size: 10px;
}
.emp-chip > .ui-icon {
  width: 12px;
  height: 12px;
  color: #0b6e6a;
  flex: none;
}
.emp-chip > b {
  min-width: 0;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emp-chip-role {
  background: #eef6f8;
  border-color: #d2e0e4;
}
.emp-chip-role > .ui-icon { color: #3d6d7a; }
.emp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.emp-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.emp-badge.on { background: #e5f6f0; color: #1b5c3a; }
.emp-badge.off { background: #f6efe8; color: #8a4b12; }
.emp-card-foot {
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid #eef3f3;
  min-width: 0;
}
.emp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.emp-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d4e1e2;
  border-radius: 10px;
  background: #fff;
  color: #3f5558;
  font-size: 11px;
  font-weight: 700;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.emp-actions button:hover {
  background: #f3fbfa;
  border-color: #9fc9c5;
  color: #0b6e6a;
}
.emp-actions .emp-delete-btn { color: #8a4b4b; border-color: #e0c4c4; }
.emp-actions .emp-delete-btn:hover { color: #9b2c2c; border-color: #d9a0a0; background: #fff7f7; }
.emp-actions .ui-icon { width: 14px; height: 14px; }

/* Minimal card actions */
.emp-card .emp-actions-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.emp-card .emp-act-link {
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0b6e6a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none;
  transition: color .15s ease, opacity .15s ease;
}
.emp-card .emp-act-link:hover {
  color: #085955;
  background: transparent;
  border: 0;
}
.emp-card .emp-act-dash {
  color: #7a9093;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
}
.emp-card .emp-act-dash:hover {
  color: #0b6e6a;
  text-decoration: none;
}
.emp-card .emp-act-link.is-enable { color: #1f7a4d; }
.emp-card .emp-act-link.is-enable:hover { color: #17633e; }
.emp-card .emp-act-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.emp-card .emp-act-icon {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8aa0a2;
  box-shadow: none;
  transition: background .15s ease, color .15s ease;
}
.emp-card .emp-act-icon > .ui-icon {
  width: 14px;
  height: 14px;
}
.emp-card .emp-act-icon:hover {
  background: #eef5f5;
  color: #0b6e6a;
  border: 0;
}
.emp-card .emp-act-icon.emp-act-danger:hover,
.emp-card .emp-act-icon.emp-delete-btn:hover {
  background: #fff1f1;
  color: #a34444;
  border: 0;
}
@container emp-cards (max-width: 720px) {
  .emp-card-meta strong { font-size: 14px; }
  .emp-card .person-avatar.xl { --avatar-size: 48px; }
}

.emp-delete-modal { z-index: 72; }
.emp-delete-card {
  width: min(100%, 440px);
  justify-items: stretch;
  text-align: left;
  padding: 24px 22px 18px;
  border-color: #e7c7c7;
  background:
    radial-gradient(120% 90% at 50% 0%, #fff5f5, transparent 55%),
    #fff;
}
.emp-delete-card > .confirm-visual,
.emp-delete-card > h2,
.emp-delete-card > p { justify-self: center; text-align: center; }
.emp-delete-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: #fff8f8; border: 1px solid #efd4d4;
}
.emp-delete-summary .person-avatar { flex: none; }
.emp-delete-summary strong { display: block; color: #17343b; font-size: 15px; }
.emp-delete-summary small { display: block; color: #7a6a6a; font-size: 12px; margin-top: 2px; }
.emp-delete-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  padding: 10px 12px; border-radius: 12px;
  background: #fff7ed; color: #8a5a2b; font-size: 12px; line-height: 1.45;
}
.emp-delete-note .ui-icon { width: 15px; height: 15px; margin-top: 1px; flex: none; color: #c47b2b; }

.emp-list {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid #d7e4e2; border-radius: 18px; background: #fff;
  overflow: hidden;
}
.emp-list-body {
  --emp-list-rows: 1;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(var(--emp-list-rows), minmax(0, 1fr));
  gap: 8px;
  position: relative;
  align-content: stretch;
}
.emp-list-body.is-partial {
  align-content: start;
  grid-template-rows: repeat(var(--emp-list-rows), auto);
}
.emp-list-head,
.emp-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) .9fr .7fr .55fr auto;
  gap: 10px; align-items: center;
}
.emp-list-head {
  padding: 4px 10px 8px;
  color: #7a9093; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border-bottom: 1px solid #e5eeee;
}
.emp-row {
  min-height: 0;
  height: 100%;
  padding: 10px; border-radius: 12px; background: #f8fbfb;
  box-sizing: border-box;
}
.emp-list-body.is-partial .emp-row { height: auto; }
.emp-row:hover { background: #eef7f6; }
.emp-row.is-inactive { opacity: .7; }
.emp-row.is-editing {
  --emp-inline-h: 34px;
  height: auto;
  opacity: 1;
  align-items: start;
  border: 1px solid #9ec9c6;
  background: #fff;
  box-shadow: 0 8px 20px #102e350a;
}
.emp-row.is-editing .emp-row-who { align-items: flex-start; }
.emp-row-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.emp-row-who > span { display: grid; gap: 1px; min-width: 0; }
.emp-row-who strong {
  color: #17343b; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-row-who small { color: #708285; font-size: 11px; }
.emp-inline-form {
  display: block;
  min-width: 0;
  flex: 1;
}
.emp-inline-controls {
  display: grid;
  grid-template-columns: minmax(72px, 0.7fr) minmax(0, 1.3fr);
  gap: 6px 8px;
  align-items: center;
  min-width: 0;
}
.emp-inline-email { grid-column: 1 / -1; font-weight: 600 !important; }
.emp-inline-form input,
.emp-inline-select {
  width: 100%; min-width: 0; height: var(--emp-inline-h, 34px); min-height: var(--emp-inline-h, 34px);
  box-sizing: border-box;
  border: 1px solid #b7d4d2; border-radius: 10px;
  background: #fff; color: #17343b;
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 0 8px;
}
.emp-inline-form input:focus,
.emp-inline-select:focus {
  outline: none; border-color: #0b6e6a;
  box-shadow: 0 0 0 3px #0b6e6a22;
}
.emp-inline-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6d8083 50%), linear-gradient(135deg, #6d8083 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% - 2px), calc(100% - 7px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.emp-inline-active {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--emp-inline-h, 34px); color: #3f5558; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.emp-inline-active input { width: 15px; height: 15px; accent-color: #0b6e6a; }
.emp-cell {
  color: #3f5558; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-row.is-editing .emp-cell {
  overflow: visible;
  display: flex;
  align-items: center;
  min-height: var(--emp-inline-h, 34px);
}
.emp-status-cell { min-width: 0; }
.emp-row .emp-actions { justify-content: flex-end; }
.emp-row .emp-actions span { display: none; }
.emp-row .emp-actions button { min-width: 34px; padding: 0; justify-content: center; }
.emp-actions.is-editing {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--emp-inline-h, 34px);
}
.emp-actions.is-editing .dept-edit-ok,
.emp-actions.is-editing .dept-edit-cancel {
  width: var(--emp-inline-h, 34px); min-width: var(--emp-inline-h, 34px);
  height: var(--emp-inline-h, 34px); padding: 0;
}
.emp-actions.is-editing .dept-edit-ok { color: #0b6e6a; border-color: #9ec9c6; }
.emp-actions.is-editing .dept-edit-cancel { color: #8a4b4b; border-color: #e0c4c4; }

.emp-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 4px 2px 0; color: #6d8083; font-size: 12px;
}
.emp-pager-nav {
  display: inline-flex; align-items: center; gap: 8px;
}
.emp-pager-nav span {
  min-width: 4.5ch; text-align: center; color: #17343b; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.emp-pager-nav button {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid #d4e1e2; border-radius: 10px; background: #fff; color: #087d7a;
}
.emp-pager-nav button:disabled { opacity: .4; cursor: not-allowed; }
.emp-pager-nav .ui-icon { width: 18px; height: 18px; }

.emp-modal { z-index: 70; }
.emp-modal-card {
  width: min(100%, 560px);
  max-height: min(92vh, 760px);
  overflow: auto;
  justify-items: stretch;
  text-align: left;
  padding: 0;
  border-color: #c9dddb;
  background:
    radial-gradient(120% 80% at 8% 0%, #e8f6f5, transparent 46%),
    radial-gradient(90% 60% at 100% 0%, #fff6ea, transparent 42%),
    #fff;
  box-shadow: 0 28px 70px #102e3530;
}
.emp-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: #ffffffd9; color: #547173;
  backdrop-filter: blur(6px);
}
.emp-modal-close:hover { background: #e3efef; color: #17343b; }
.emp-modal-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid #e5eeee;
}
.emp-modal-avatar { position: relative; flex: none; }
.emp-modal-avatar-badge {
  position: absolute; right: -4px; bottom: -2px;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 9px;
  color: #fff; background: #0b6e6a;
  border: 2px solid #fff;
  box-shadow: 0 6px 14px #0b6e6a33;
}
.emp-modal-avatar-badge .ui-icon { width: 13px; height: 13px; }
.emp-modal-hero-copy { min-width: 0; padding-right: 28px; }
.emp-modal-hero-copy small {
  display: block; margin-bottom: 4px;
  color: #6d8083; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.emp-modal-hero-copy h2 {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 26px); letter-spacing: -.02em; color: var(--ops-ink, #17343b);
}
.emp-modal-hero-copy p {
  margin: 4px 0 0; color: #6d8083; font-size: 13px; line-height: 1.45; max-width: 36ch;
}
.emp-modal-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.emp-modal-chips > span:first-child {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0 9px; border-radius: 999px;
  background: #e7f2f1; color: #0b6e6a; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.emp-modal-form {
  display: grid; gap: 14px; width: 100%;
  padding: 16px 22px 18px;
}
.emp-modal-section {
  display: grid; gap: 12px;
  padding: 14px;
  border: 1px solid #e0eceb;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfefe, #f7fbfb);
}
.emp-modal-section > header {
  display: grid; gap: 2px;
}
.emp-modal-section > header strong {
  color: #17343b; font-size: 13px; font-weight: 800;
}
.emp-modal-section > header small {
  color: #708285; font-size: 11px; font-weight: 600;
}
.emp-modal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.emp-modal-grid-identity {
  grid-template-columns: minmax(120px, 0.72fr) minmax(0, 1.28fr);
}
.emp-modal-grid .field { margin: 0; display: grid; gap: 6px; }
.emp-modal-grid .field > span {
  color: #5f7376; font-size: 11px; font-weight: 700;
}
.emp-field-wide { grid-column: 1 / -1; }
.emp-email-field {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #c5d9ef;
  background: linear-gradient(180deg, #f7fbfe, #eef5fc);
}
.emp-title-field { min-width: 0; }
.emp-name-field { min-width: 0; }
.emp-modal-grid input,
.emp-modal-grid .emp-pin-field {
  min-height: 42px; border-radius: 12px;
}
.emp-modal-grid input {
  width: 100%; padding: 0 12px; box-sizing: border-box;
  border: 1px solid #b7d4d2; background: #fff; color: #17343b;
  font: inherit; font-size: 14px; font-weight: 700;
}
.emp-modal-grid input:focus {
  outline: none; border-color: #0b6e6a;
  box-shadow: 0 0 0 3px #0b6e6a22;
}
.emp-modal-grid input[readonly] {
  background: #eef4f4; color: #547173;
}
.emp-select,
.emp-select::picker(select) { appearance: base-select; }
.emp-select {
  width: 100%; min-height: 42px;
  border: 1px solid #b7d4d2; border-radius: 12px;
  background: linear-gradient(180deg, #fbfffe, #f3faf9);
  color: #17343b; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.emp-select:hover { border-color: #9ec9c6; }
.emp-select:focus-within,
.emp-select:open {
  border-color: #0b6e6a;
  box-shadow: 0 0 0 3px #0b6e6a22;
  outline: none;
}
.emp-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 40px; padding: 0 12px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left;
}
.emp-select::picker-icon { color: #0b6e6a; transition: transform .18s ease; }
.emp-select:open::picker-icon { transform: rotate(180deg); }
.emp-select::picker(select) {
  margin-top: 6px; padding: 6px;
  border: 1px solid #c5d9d7; border-radius: 14px;
  background: #fff; box-shadow: 0 16px 36px #102e3520;
}
.emp-select option {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 12px; border-radius: 10px;
  color: #17343b; font-weight: 700; cursor: pointer;
}
.emp-select option:hover { background: #eef8f7; }
.emp-select option:checked { background: #e2f3f2; color: #0b6e6a; }
.emp-select option::checkmark { color: #0b6e6a; order: 1; margin-left: auto; }
@supports not (appearance: base-select) {
  .emp-select {
    appearance: none;
    padding: 0 36px 0 12px;
    background-color: #fbfffe;
    background-image:
      linear-gradient(180deg, #fbfffe, #f3faf9),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b6e6a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 12px center;
    background-size: auto, 16px;
  }
  .emp-select-trigger { display: none; }
}
.emp-active-field { display: grid; gap: 8px; }
.emp-switch {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 0 12px 0 10px; border-radius: 12px;
  border: 1px solid #d4e1e2; background: #fff;
  color: #3f5558; font-size: 13px; font-weight: 700; cursor: pointer;
}
.emp-switch input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.emp-switch-track {
  position: relative; width: 40px; height: 24px; border-radius: 999px; flex: none;
  background: #c9d6d6; transition: background .18s ease;
}
.emp-switch-track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px #102e3526;
  transition: transform .18s ease;
}
.emp-switch:has(input:checked) { border-color: #9ec9c6; background: #f2faf8; color: #0b6e6a; }
.emp-switch:has(input:checked) .emp-switch-track { background: #0b6e6a; }
.emp-switch:has(input:checked) .emp-switch-track::after { transform: translateX(16px); }
.emp-switch-on { display: none; }
.emp-switch:has(input:checked) .emp-switch-on { display: inline; }
.emp-switch:has(input:checked) .emp-switch-off { display: none; }
.emp-pin-field {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border: 1px solid #b7d4d2; border-radius: 12px; background: #fff;
}
.emp-pin-field .ui-icon { width: 16px; height: 16px; color: #0b6e6a; flex: none; }
.emp-pin-field input {
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
  min-height: 40px; background: transparent !important; letter-spacing: .18em;
}
.emp-pin-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
}
.emp-pin-label b {
  color: #5f7376; font-size: 11px; font-weight: 700;
}
.emp-field-hint {
  color: #7a9093; font-size: 11px; font-weight: 600;
}
.emp-pin-label .emp-field-hint {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}
.emp-modal-actions {
  margin-top: 2px;
  padding-top: 4px;
}
.emp-modal-card .form-error { margin: 0; text-align: left; }

@media (max-width: 720px) {
  .emp-page-head { align-items: stretch; }
  .emp-add-btn { width: 100%; justify-content: center; }
  .emp-view-toggle { width: 100%; }
  .emp-view-toggle button { flex: 1; justify-content: center; }
  .emp-list-head { display: none; }
  .emp-list-head,
  .emp-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .emp-row .emp-actions { justify-content: flex-start; }
  .emp-row .emp-actions span { display: inline; }
  .emp-row .emp-actions button { min-width: 0; padding: 0 10px; }
  .emp-modal-grid,
  .emp-modal-grid-identity { grid-template-columns: 1fr; }
  .emp-field-wide { grid-column: auto; }
  .emp-modal-card { width: min(100%, 430px); }
  .emp-modal-hero { align-items: flex-start; }
}

/* —— Master holidays year calendar —— */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hol-page { gap: 14px; }
.hol-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: -4px;
}
.hol-topbar .back { margin: 0; }
.hol-topbar .hol-sync-wrap {
  display: grid; gap: 3px; justify-items: end; margin-left: auto;
}

.hol-page-head {
  display: flex; align-items: end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.hol-page-head small {
  display: block; color: #6d8083; font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.hol-page-head h1 { margin: 0; font-size: clamp(26px, 3vw, 32px); }
.hol-page-head p { margin: 4px 0 0; color: #738085; font-size: 13px; max-width: 46ch; }
.hol-page-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hol-year-nav {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px; border: 1px solid #d5e4e4; border-radius: 12px; background: #fff;
}
.hol-year-nav > button {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: transparent; color: #3f5a5e;
}
.hol-year-nav > button:hover { background: #eef6f6; color: #0b6e6a; }
.hol-year-nav > button .ui-icon { width: 17px; height: 17px; }
.hol-year-label {
  min-width: 64px; text-align: center;
  color: #17343b; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.hol-sync-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid #9ec9c6; border-radius: 12px;
  background: linear-gradient(180deg, #f3fafa, #fff);
  color: #0b6e6a; font: inherit; font-weight: 700;
}
.hol-sync-btn:hover { background: #e8f5f4; }
.hol-sync-btn .ui-icon { width: 16px; height: 16px; }
.hol-sync-meta {
  color: #708285; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right; max-width: 28ch;
}
.hol-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.hol-summary article {
  display: grid; gap: 2px; padding: 10px 12px;
  border: 1px solid #e2ecec; border-radius: 12px; background: #fff;
}
.hol-summary small { color: #6d8083; font-size: 11px; font-weight: 700; }
.hol-summary strong {
  color: #17343b; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.hol-summary .is-official { background: linear-gradient(180deg, #f7eef3, #fff); border-color: #e7c9d6; }
.hol-summary .is-official strong { color: #8a4d67; }
.hol-summary .is-company { background: linear-gradient(180deg, #eef8f7, #fff); border-color: #c5ddd9; }
.hol-summary .is-company strong { color: #0b6e6a; }
.hol-summary .is-muted strong { color: #8aa0a2; }
.hol-legend {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  color: #6d8083; font-size: 11px; font-weight: 700;
}
.hol-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hol-legend i {
  width: 12px; height: 12px; border-radius: 4px; display: block;
  box-shadow: inset 0 0 0 1px #d5c0c8;
}
.hol-legend .is-official i { background: #f3d7e3; box-shadow: inset 0 0 0 1px #e2c2d1; }
.hol-legend .is-company i { background: #cfecea; box-shadow: inset 0 0 0 1px #9ec9c6; }
.hol-legend .is-inactive i {
  background: #f2f4f4;
  box-shadow: inset 0 0 0 1px #c5d0d1;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, #c5d0d188 2px, #c5d0d188 3px);
}
.hol-legend .is-weekend i { background: #eef1f1; box-shadow: inset 0 0 0 1px #d5e0e1; }
.hol-year-cal {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.hol-cal-month {
  display: grid; gap: 6px; padding: 10px 9px 11px;
  border: 1px solid #e2ecec; border-radius: 14px; background: #fff;
}
.hol-cal-month.has-holidays {
  border-color: #d5e4e4;
  background: linear-gradient(180deg, #fbfefe, #fff);
}
.hol-cal-month > header {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 18px;
}
.hol-cal-month > header strong {
  color: var(--ops-ink, #17343b); font-size: 12px; font-weight: 800;
}
.hol-cal-month > header em {
  font-style: normal; min-width: 20px; height: 18px; padding: 0 6px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: #e8f3f2; color: #0b6e6a; font-size: 10px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hol-cal-weekdays,
.hol-cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px;
}
.hol-cal-weekdays span {
  text-align: center; color: #8aa0a2; font-size: 9px; font-weight: 700; line-height: 1.4;
}
.hol-cal-spacer { min-height: 28px; }
.hol-cal-day {
  position: relative;
  min-height: 28px; border: 0; border-radius: 8px; padding: 0;
  display: grid; place-items: center;
  background: transparent; color: #3f5a5e;
  font: inherit; font-size: 11px; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .12s ease, box-shadow .12s ease;
}
.hol-cal-day b { font-weight: 600; position: relative; z-index: 1; }
.hol-cal-day:hover { background: #eef6f6; }
.hol-cal-day:focus-visible {
  outline: 2px solid #0b6e6a; outline-offset: 1px;
}
.hol-cal-day.weekend { color: #9aabae; }
.hol-cal-day.weekend:hover { background: #f3f5f5; }
.hol-cal-day.is-holiday.is-official {
  color: #8a4d67; background: #f7eef3;
  box-shadow: inset 0 0 0 1px #e2c2d1;
}
.hol-cal-day.is-holiday.is-company {
  color: #0b6e6a; background: #e7f5f3;
  box-shadow: inset 0 0 0 1px #9ec9c6;
}
.hol-cal-day.is-holiday.is-inactive {
  color: #8aa0a2; background: #f2f4f4;
  box-shadow: inset 0 0 0 1px #c5d0d1;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, #c5d0d155 3px, #c5d0d155 4px);
}
.hol-cal-day.is-holiday:hover { filter: brightness(1.03); }
.hol-year-cal,
.hol-cal-month,
.hol-cal-grid { overflow: visible; }
.hol-cal-day.is-holiday[data-holiday-name]:hover,
.hol-cal-day.is-holiday[data-holiday-name]:focus-visible {
  z-index: 6;
}
.hol-cal-day.is-holiday[data-holiday-name]:hover::after,
.hol-cal-day.is-holiday[data-holiday-name]:focus-visible::after {
  content: attr(data-holiday-name);
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(12rem, 46vw);
  padding: 6px 9px;
  border-radius: 8px;
  background: #24363a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 18px #17343b33;
}
.hol-cal-day.is-holiday[data-holiday-name]:hover::before,
.hol-cal-day.is-holiday[data-holiday-name]:focus-visible::before {
  content: "";
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: calc(100% + 2px);
  width: 8px; height: 8px;
  background: #24363a;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.hol-cal-day.is-selected {
  box-shadow:
    inset 0 0 0 1px #0b6e6a,
    0 0 0 2px #0b6e6a33;
  z-index: 1;
}
.hol-day-modal { z-index: 70; }
.hol-day-modal .hol-day-card {
  position: relative;
  width: min(100%, 440px);
  max-height: min(92vh, 640px);
  overflow: auto;
  justify-items: stretch;
  text-align: left;
  padding: 0;
  border-radius: 20px;
  border-color: #c9dddb;
  background:
    radial-gradient(120% 80% at 8% 0%, #e8f6f5, transparent 46%),
    radial-gradient(90% 55% at 100% 0%, #f7eef3, transparent 42%),
    #fff;
  box-shadow: 0 28px 70px #102e3530;
}
.hol-day-card.is-official {
  border-color: #e0c4d0;
  background:
    radial-gradient(120% 80% at 8% 0%, #f7eef3, transparent 48%),
    radial-gradient(90% 55% at 100% 0%, #eef8f7, transparent 40%),
    #fff;
}
.hol-day-card.is-company {
  border-color: #b7d6d3;
}
.hol-day-card.is-inactive {
  border-color: #c5d0d1;
  background:
    radial-gradient(120% 80% at 8% 0%, #f2f4f4, transparent 48%),
    #fff;
}
.hol-day-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: #ffffffd9; color: #547173;
  backdrop-filter: blur(6px);
}
.hol-day-close:hover { background: #e3efef; color: #17343b; }
.hol-day-close .ui-icon { width: 15px; height: 15px; }
.hol-day-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid #e5eeee;
}
.hol-day-tile {
  flex: none;
  width: 72px; min-height: 84px;
  display: grid; align-content: center; justify-items: center; gap: 1px;
  padding: 10px 8px 9px;
  border-radius: 16px;
  border: 1px solid #c5ddd9;
  background:
    linear-gradient(180deg, #f4fbfa 0%, #fff 55%),
    #fff;
  box-shadow: 0 10px 22px #0b6e6a14;
  color: #0b6e6a;
}
.hol-day-card.is-official .hol-day-tile {
  border-color: #e2c2d1;
  color: #8a4d67;
  background: linear-gradient(180deg, #fbf3f7 0%, #fff 55%);
  box-shadow: 0 10px 22px #8a4d6714;
}
.hol-day-card.is-inactive .hol-day-tile {
  border-color: #c5d0d1;
  color: #7a8c8f;
  background: linear-gradient(180deg, #f4f5f5 0%, #fff 55%);
  box-shadow: none;
}
.hol-day-tile small {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.hol-day-tile strong {
  font-size: 34px; font-weight: 800; line-height: .95;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  color: var(--ops-ink, #17343b);
}
.hol-day-card.is-official .hol-day-tile strong { color: #6d3a50; }
.hol-day-tile em {
  font-style: normal; font-size: 11px; font-weight: 700;
  color: #708285; font-variant-numeric: tabular-nums;
}
.hol-day-hero-copy { min-width: 0; padding-right: 28px; }
.hol-day-hero-copy > small {
  display: block; margin-bottom: 4px;
  color: #6d8083; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.hol-day-hero-copy h2 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(20px, 3vw, 24px);
  letter-spacing: -.02em; color: var(--ops-ink, #17343b);
}
.hol-day-hero-copy > p {
  margin: 4px 0 0; color: #6d8083; font-size: 13px; line-height: 1.45; max-width: 34ch;
}
.hol-day-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.hol-chip {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
}
.hol-chip.is-date {
  background: #eef3f3; color: #3f5a5e; font-variant-numeric: tabular-nums;
}
.hol-chip.is-official { background: #f7eef3; color: #8a4d67; }
.hol-chip.is-company { background: #e7f2f1; color: #0b6e6a; }
.hol-chip.is-new { background: #fff4e8; color: #b86a1c; }
.hol-chip.is-on { background: #e7f2f1; color: #0b6e6a; }
.hol-chip.is-off { background: #eef1f1; color: #7a8c8f; }
.hol-day-form {
  display: grid; gap: 14px; width: 100%;
  padding: 16px 18px 18px;
}
.hol-day-section {
  display: grid; gap: 10px;
  padding: 12px;
  border: 1px solid #e2ecec; border-radius: 14px; background: #fbfefe;
}
.hol-day-section > header {
  display: grid; gap: 2px;
}
.hol-day-section > header strong,
.hol-day-status > div strong {
  display: block; color: var(--ops-ink, #17343b); font-size: 13px; font-weight: 800;
}
.hol-day-section > header small,
.hol-day-status > div small {
  display: block; color: #708285; font-size: 11px; line-height: 1.4;
}
.hol-day-name-field { margin: 0; display: grid; gap: 6px; }
.hol-day-name-field > span {
  color: #5f7376; font-size: 12px; font-weight: 700;
}
.hol-day-name-field input {
  min-height: 46px; padding: 0 13px;
  border: 1px solid #c5d9d8; border-radius: 12px;
  background: #fff; color: #17343b; font: inherit; font-size: 15px;
}
.hol-day-name-field input:focus {
  outline: 2px solid #0b6e6a40; border-color: #0b6e6a;
}
.hol-day-name-field input::placeholder { color: #9aabad; }
.hol-day-name-readonly {
  display: grid; gap: 4px;
  padding: 12px 13px;
  border: 1px solid #e2ecec; border-radius: 12px; background: #fff;
}
.hol-day-name-readonly > span {
  color: #5f7376; font-size: 11px; font-weight: 700;
}
.hol-day-name-readonly strong {
  color: var(--ops-ink, #17343b); font-size: 16px; font-weight: 800; line-height: 1.35;
}
.hol-day-actions.is-official-only { grid-template-columns: 1fr; }
.hol-day-status {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
}
.hol-day-switch {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 12px 0 8px;
  border: 1px solid #c5d9d8; border-radius: 999px;
  background: #fff; color: #3f5a5e; font: inherit; font-weight: 800; font-size: 12px;
}
.hol-day-switch i {
  width: 34px; height: 20px; border-radius: 999px; position: relative;
  background: #c5d0d1; transition: background .15s ease;
}
.hol-day-switch i::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px #17343b33;
  transition: transform .15s ease;
}
.hol-day-switch.is-on {
  border-color: #9ec9c6; color: #0b6e6a; background: #f3fafa;
}
.hol-day-switch.is-on i { background: #0b6e6a; }
.hol-day-switch.is-on i::after { transform: translateX(14px); }
.hol-day-switch.is-off { color: #7a8c8f; }
.hol-day-actions {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; margin-top: 2px;
}
.hol-day-card .form-error { margin: 0; text-align: left; }
@media (max-width: 1100px) {
  .hol-year-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hol-page-head { align-items: stretch; }
  .hol-page-tools { width: 100%; }
  .hol-year-nav { width: 100%; justify-content: space-between; }
  .hol-topbar { align-items: flex-start; }
  .hol-topbar .hol-sync-wrap { justify-items: end; }
  .hol-sync-meta { max-width: 22ch; }
  .hol-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hol-year-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hol-cal-day { min-height: 26px; }
  .hol-day-hero { align-items: flex-start; }
  .hol-day-card { width: min(100%, 430px); }
  .hol-day-status { grid-template-columns: 1fr; }
  .hol-day-switch { justify-self: start; }
  .hol-day-actions { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .hol-year-cal { grid-template-columns: 1fr; }
}

/* Adjust balance workbench */
.balance-page { gap: 14px; min-height: min(72vh, 720px); }
.balance-page-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.balance-page-head h1 { margin: 0; }
.balance-page-head p { margin: 4px 0 0; color: #6a7f82; }
.balance-split {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  min-height: min(64vh, 640px);
  border: 1px solid #c9dbdd;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffffd9;
  box-shadow: 0 12px 36px #0f2a2e0a;
}
.balance-list-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-inline-end: 1px solid #d7e5e6;
  background: #f7fbfb;
  min-height: 0;
}
.balance-search { margin: 0; padding: 12px; border-bottom: 1px solid #e4eeef; }
.balance-search .input-icon { width: 100%; }
.balance-emp-list {
  overflow: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.balance-emp {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid #e8f0f1;
  border-inline-start: 3px solid transparent;
  background: #fff;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.balance-emp .person-avatar { --avatar-size: 36px; }
.balance-detail-head .person-avatar { --avatar-size: 48px; }
.balance-emp > span:not(.person-avatar) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.balance-emp strong { font-size: 13px; }
.balance-emp small { color: #758588; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance-emp:hover { background: #eef6f6; }
.balance-emp.selected {
  background: #e5f5f4;
  border-inline-start-color: var(--ops-teal, #0b6e6a);
}
.balance-detail-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px 20px 22px;
  background: #fff;
}
.balance-empty {
  min-height: 280px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  color: #6a7f82;
}
.balance-empty .ui-icon { width: 28px; height: 28px; color: var(--ops-teal, #0b6e6a); margin-bottom: 4px; }
.balance-empty strong { color: #17343b; font-size: 15px; }
.balance-empty small { max-width: 36ch; line-height: 1.45; }
.balance-empty .primary { margin-top: 10px; }
.balance-detail-form { display: grid; gap: 16px; }
.balance-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4eeef;
}
.balance-detail-head > div { display: grid; gap: 2px; min-width: 0; }
.balance-detail-head strong { font-size: 18px; letter-spacing: -.02em; }
.balance-detail-head small { color: #758588; }
.balance-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.balance-type-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--leave-color) 28%, #d7e5e6);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--leave-surface) 88%, #fff), #fff);
}
.balance-type-card > header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.balance-type-card > header .ui-icon {
  width: 22px; height: 22px; color: var(--leave-color);
}
.balance-type-card > header span { display: grid; gap: 1px; min-width: 0; }
.balance-type-card > header strong { font-size: 14px; }
.balance-type-card > header small { color: #7a8d90; font-size: 11px; }
.balance-days-stepper {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
}
.balance-days-stepper .settings-days-value {
  border-color: color-mix(in srgb, var(--leave-color) 42%, #9ec9c6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--leave-color) 14%, transparent);
}
.balance-days-stepper .settings-days-nudge {
  border-color: color-mix(in srgb, var(--leave-color) 35%, #c5dfdc);
  color: var(--leave-color);
}
.balance-days-stepper .settings-days-nudge:hover {
  border-color: var(--leave-color);
  background: color-mix(in srgb, var(--leave-surface) 70%, #fff);
}
.balance-detail-form > .privacy { margin: 0; }
.balance-detail-form > .primary { justify-self: start; }
body.hr-ops-mode:has(.audit-page-fill),
body.hr-ops-mode:has(.audit-page-fill) #app {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.ops-layout:has(.audit-page-fill) {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.ops-main:has(.audit-page-fill) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 20px 28px 0;
}
.ops-main:has(.audit-page-fill) > .ops-mobile-bar { flex: none; }
.audit-page-fill {
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}
.audit-page-chrome { display: grid; gap: 8px; flex: none; }
.audit-page-fill,
.audit-page-fill h1,
.audit-page-fill strong,
.audit-page-fill b,
.audit-page-fill .field,
.audit-page-fill .primary,
.audit-page-fill .primary span,
.audit-page-fill .emp-select,
.audit-page-fill .emp-select .emp-select-trigger,
.audit-page-fill .audit-pager,
.audit-page-fill .audit-pager span,
.audit-page-fill .emp-pager button {
  font-weight: 400;
}
.audit-head { margin: 0; }
.audit-head h1 {
  margin: 0;
  font-size: clamp(20px, 2.6cqi, 26px);
}
.audit-head p {
  margin: 2px 0 0;
  color: #6a7f82;
  font-size: 12px;
}
.audit-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 220px) auto;
  gap: 8px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.audit-filters .field { margin: 0; }
.audit-filters .audit-search .input-icon {
  min-height: 38px;
  border-radius: 10px;
  border-color: #c5d6d8;
  background: #fff;
}
.audit-filters .audit-search input {
  min-height: 36px;
  font-size: 13px;
  font-weight: 400;
}
.audit-filters .emp-select {
  min-height: 38px;
  border-radius: 10px;
  font-weight: 400;
}
.audit-filters .emp-select .emp-select-trigger {
  min-height: 36px;
  font-size: 12px;
  font-weight: 400;
  padding: 0 10px;
}
.audit-filters .emp-select::picker(select) {
  min-width: 220px;
  max-height: min(360px, 50vh);
  overflow: auto;
}
.audit-filters .primary {
  width: auto;
  min-height: 38px;
  height: 38px;
  margin: 0;
  padding-inline: 14px;
  border-radius: 10px;
  font-size: 13px;
}
.audit-panel {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d5e3e4;
  border-radius: 12px;
  background: #fff;
}
.audit-list-head {
  z-index: 2;
  display: grid;
  grid-template-columns: 6.6rem 7.8rem minmax(8rem, 1.15fr) minmax(9rem, 1.35fr) minmax(7rem, .85fr) 22px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #dfeaea;
  background: #f3f8f8;
  color: #6a7f82;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
}
.audit-list-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}
.audit-list {
  min-height: 0;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.audit-item {
  flex: 1 1 0;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.audit-item.is-open {
  flex: 0 0 auto;
}
.audit-item > .audit-item-main {
  flex: 1 1 auto;
}
.audit-item + .audit-item {
  border-top: 1px solid #e8efef;
}
.audit-item.is-open {
  background: #f7fbfb;
}
.audit-item.is-adjust .audit-chip {
  background: #e5f5f4;
  color: #0b6e6a;
}
.audit-item-main {
  width: 100%;
  display: grid;
  grid-template-columns: 6.6rem 7.8rem minmax(8rem, 1.15fr) minmax(9rem, 1.35fr) minmax(7rem, .85fr) 22px;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.audit-item-main:hover { background: #f5fafa; }
.audit-item.is-open .audit-item-main { background: #f3f8f8; }
.audit-item-main > time {
  color: #6a7f82;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.audit-chip {
  justify-self: start;
  display: inline-flex;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef4f4;
  color: #17343b;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit-target,
.audit-by {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 400;
}
.audit-target {
  color: #17343b;
}
.audit-by {
  display: grid;
  gap: 1px;
  color: #7a8d90;
  white-space: normal;
}
.audit-by > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  color: #7a8d90;
}
.audit-ip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9aaeb1;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.audit-ua {
  font-size: 11px;
  font-weight: 400;
  color: #6a7f82;
  word-break: break-all;
}
.audit-file-row {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e4eeef;
}
.audit-file-row > small {
  color: #8a9ea1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.audit-file-link-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.audit-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #c9dbdd;
  border-radius: 10px;
  background: #f7fbfb;
  color: #0b6e6a;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.audit-file-link .ui-icon { width: 16px; height: 16px; }
.audit-file-link:hover { background: #e5f5f4; border-color: #9ec9c6; }
.audit-file-link.is-static { cursor: default; }
.audit-file-path {
  color: #6a7f82;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.audit-delta { min-width: 0; }
.audit-changes {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: center;
}
.audit-changes.is-compact { flex-wrap: nowrap; overflow: hidden; }
.audit-change {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}
.audit-change > b {
  color: #6a7f82;
  font-weight: 400;
}
.audit-change > s {
  color: #9aaeb1;
  text-decoration-color: #c5d4d6;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.audit-change > em {
  font-style: normal;
  color: #b0c0c3;
  font-size: 10px;
  font-weight: 400;
}
.audit-change > strong {
  color: #0b6e6a;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.audit-more-count,
.audit-changes .mute {
  color: #9aaeb1;
  font-size: 10px;
}
.audit-caret {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #9aaeb1;
}
.audit-caret .ui-icon { width: 14px; height: 14px; }
.audit-item-body {
  display: grid;
  gap: 8px;
  padding: 0 12px 10px;
  border-top: 1px solid #e8efef;
  background: #f7fbfb;
}
.audit-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  padding-top: 8px;
}
.audit-kv > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.audit-kv > div.span { grid-column: 1 / -1; }
.audit-kv small {
  color: #7a8d90;
  font-size: 10px;
}
.audit-kv b {
  color: #17343b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}
.audit-change-block {
  display: grid;
  gap: 4px;
}
.audit-change-block > small {
  color: #7a8d90;
  font-size: 10px;
}
.audit-change-block .audit-changes { gap: 4px; }
.audit-change-block .audit-change {
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef5f5;
}
.audit-pager {
  flex: none;
  margin: 0;
  padding: 6px 12px;
  border-top: 1px solid #e8efef;
  background: #f7fbfb;
  border-radius: 0 0 12px 12px;
}
.audit-panel .empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
}
@media (max-width: 960px) {
  .audit-list-head { display: none; }
  .audit-item-main {
    grid-template-columns: 5.8rem minmax(0, 1fr) 22px;
    grid-template-areas:
      "time chip caret"
      "target target caret"
      "delta delta caret"
      "by by caret";
    gap: 2px 8px;
    padding: 8px 10px;
  }
  .audit-item-main > time { grid-area: time; }
  .audit-chip { grid-area: chip; }
  .audit-target { grid-area: target; }
  .audit-delta { grid-area: delta; }
  .audit-by { grid-area: by; }
  .audit-caret { grid-area: caret; align-self: start; }
}
@media (max-width: 820px) {
  .audit-filters { grid-template-columns: 1fr; }
  .audit-kv { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .balance-type-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .balance-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .balance-list-pane {
    border-inline-end: 0;
    border-bottom: 1px solid #d7e5e6;
    max-height: 280px;
  }
}

/* —— Team calendar —— */
.team-cal-page { gap: 14px; }
.team-cal-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.team-cal-head h1 { margin: 0; }
.team-cal-head p { margin: 4px 0 0; color: #6d8083; font-size: 13px; }
.team-cal-today-pill {
  display: grid; gap: 2px; min-width: 140px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(135deg, #0b6e6a, #1f8f88); color: #fff;
  box-shadow: 0 10px 22px #0b6e6a22;
}
.team-cal-today-pill small { color: #d4efed; font-size: 10px; letter-spacing: .04em; }
.team-cal-today-pill strong { font-size: 15px; font-weight: 700; }
.team-cal-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.team-cal-views {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px;
  border: 1px solid #d0e0df; background: #e7f1f1;
}
.team-cal-views button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: #4e6467; font-size: 12px; font-weight: 700; cursor: pointer;
}
.team-cal-views button .ui-icon { width: 15px; height: 15px; }
.team-cal-views button.active {
  background: #fff; color: #0b6e6a; box-shadow: 0 1px 0 #fff, 0 4px 12px #0f2a2e12;
}
.team-cal-nav {
  display: inline-flex; align-items: center; gap: 6px;
}
.team-cal-nav > strong {
  min-width: 7.5rem; text-align: center; color: #17343b; font-size: 15px; font-weight: 700;
}
.team-cal-nav > button {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid #d4e1e2; border-radius: 10px; background: #fff; color: #3f5558; cursor: pointer;
}
.team-cal-nav > button:hover { border-color: #9fc9c5; color: #0b6e6a; }
.team-cal-nav > button .ui-icon { width: 16px; height: 16px; }
.team-cal-today-btn {
  width: auto !important; padding: 0 12px !important; font-size: 12px; font-weight: 700;
}
.team-cal-month-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 14px; align-items: start;
}
.team-cal-month-board {
  min-width: 0; padding: 12px; border: 1px solid #d5e3e4; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 24px #102e3508;
}
.team-cal-weekdays,
.team-cal-month-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
}
.team-cal-weekdays { margin-bottom: 6px; }
.team-cal-weekdays span {
  text-align: center; color: #7a9093; font-size: 11px; font-weight: 700; padding: 4px 0;
}
.team-cal-mday {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 6px 8px;
  border: 1px solid #e5eeee;
  border-radius: 14px;
  background: #fbfefe;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.team-cal-mday.is-spacer { visibility: hidden; pointer-events: none; min-height: 0; border: 0; padding: 0; }
.team-cal-mday.is-weekend { background: #f6f9f9; }
.team-cal-mday.has-leave {
  background:
    linear-gradient(180deg, #f2fafa 0%, #ffffff 55%);
  border-color: #cfe3e2;
}
.team-cal-mday.is-today { box-shadow: inset 0 0 0 1px #0b6e6a66; }
.team-cal-mday.is-selected,
.team-cal-mday:hover {
  border-color: #9fc9c5;
  background: #eef8f7;
  box-shadow: 0 8px 18px #0f2a2e0d;
}
.team-cal-mday-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.team-cal-mday-num > b {
  color: #17343b;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.team-cal-mday-num > em {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #c04545;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.team-cal-mday-people {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  align-content: flex-start;
  justify-content: flex-start;
  min-height: 0;
}
.team-cal-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 44px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.team-cal-person .person-avatar {
  --avatar-size: 30px;
  border-radius: 50%;
  filter: contrast(1.12) saturate(1.2) brightness(.88);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px color-mix(in srgb, var(--leave-color, #0b6e6a) 82%, #12333a),
    0 5px 12px #0f2a2e22;
}
.team-cal-person > b {
  width: 100%;
  color: #2a3f44;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-cal-person.is-pending .person-avatar {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px #b8862e99,
    0 4px 10px #0f2a2e14;
  opacity: .42;
  filter: contrast(1.05) saturate(.95) brightness(.9) grayscale(.12);
}
.team-cal-person.is-pending > b {
  color: #8a6a2b;
  opacity: .7;
}
.team-cal-panel-list article:not(.is-pending) .person-avatar {
  filter: contrast(1.12) saturate(1.2) brightness(.88);
}
.team-cal-status {
  justify-self: start;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
}
.team-cal-status.is-approved { color: #1b5c3a; }
.team-cal-status.is-pending { color: #a27619; }
.team-cal-panel-list article.is-pending {
  background: #fffaf0;
  border-color: #efdfc0;
}
.team-cal-panel-list article.is-pending .person-avatar {
  opacity: .42;
  filter: contrast(1.05) saturate(.95) brightness(.9) grayscale(.12);
}
.team-cal-panel {
  position: sticky; top: 12px; display: grid; gap: 10px; align-content: start;
  min-height: 280px; padding: 14px; border: 1px solid #d5e3e4; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 24px #102e3508;
}
.team-cal-panel > header { display: grid; gap: 2px; }
.team-cal-panel > header small { color: #7a9093; font-size: 11px; font-weight: 700; }
.team-cal-panel > header strong { color: #17343b; font-size: 15px; }
.team-cal-panel-list { display: grid; gap: 8px; }
.team-cal-panel-list article {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 10px; border-radius: 14px; background: #f5fafa; border: 1px solid #e2eeee;
}
.team-cal-panel-list article > div { display: grid; gap: 2px; min-width: 0; }
.team-cal-panel-list strong {
  color: #17343b; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-cal-panel-list small { color: #6d8083; font-size: 11px; }
.team-cal-panel-list em {
  justify-self: start; margin-top: 2px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--leave-color, #0b6e6a) 14%, #fff);
  color: var(--leave-color, #0b6e6a); font-size: 10px; font-style: normal; font-weight: 700;
}
.team-cal-year-board {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.team-cal-year-month {
  overflow: visible;
  padding: 10px 10px 14px; border: 1px solid #d7e4e2; border-radius: 16px; background: #fff;
  box-shadow: 0 8px 18px #102e3508;
}
.team-cal-year-month-head {
  width: 100%; margin: 0 0 6px; padding: 4px 6px; border: 0; border-radius: 8px;
  background: transparent; color: #0b6e6a; text-align: left; cursor: pointer;
}
.team-cal-year-month-head:hover { background: #eef7f6; }
.team-cal-year-month-head strong { font-size: 13px; font-weight: 700; }
.team-cal-year-weekdays,
.team-cal-year-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
  overflow: visible;
}
.team-cal-year-grid { padding-top: 4px; }
.team-cal-year-weekdays { margin-bottom: 4px; }
.team-cal-year-weekdays span {
  text-align: center; color: #8aa0a2; font-size: 9px; font-weight: 700;
}
.team-cal-yday {
  position: relative;
  display: grid; place-items: center;
  justify-self: center;
  width: 100%;
  max-width: 30px;
  min-height: 24px;
  padding: 1px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #3f5558;
  cursor: pointer;
}
.team-cal-yday.is-spacer { visibility: hidden; pointer-events: none; }
.team-cal-yday.is-weekend { color: #8aa0a2; }
.team-cal-yday.is-today > b {
  color: #0b6e6a; box-shadow: inset 0 0 0 1px #0b6e6a55; border-radius: 999px;
  width: 20px; height: 20px; display: grid; place-items: center;
}
.team-cal-yday.has-leave {
  color: #17343b;
  background: #fff6f6;
  box-shadow: inset 0 0 0 1.5px #d45555;
}
.team-cal-yday.has-leave:hover { background: #ffefef; }
.team-cal-yday:hover { background: #f3f8f8; }
.team-cal-yday > b {
  position: relative; z-index: 1; font-size: 11px; font-weight: 650;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.team-cal-hang {
  position: absolute;
  top: -6px;
  right: -5px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  background: #c04545;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1.5px #fff;
}
@media (max-width: 1100px) {
  .team-cal-year-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .team-cal-month-layout { grid-template-columns: 1fr; }
  .team-cal-panel { position: static; }
  .team-cal-mday { min-height: 96px; }
  .team-cal-person { width: 40px; }
  .team-cal-person .person-avatar { --avatar-size: 28px; }
}
@media (max-width: 720px) {
  .team-cal-year-board { grid-template-columns: 1fr; }
  .team-cal-person { width: 36px; }
  .team-cal-person .person-avatar { --avatar-size: 26px; }
  .team-cal-person > b { font-size: 8px; }
  .team-cal-toolbar { align-items: stretch; }
  .team-cal-views, .team-cal-nav { width: 100%; justify-content: space-between; }
}