:root {
  --ink: #17251f;
  --muted: #66726d;
  --paper: #f6f4ee;
  --card: rgba(255, 255, 255, 0.88);
  --line: rgba(23, 37, 31, 0.12);
  --green: #1f7151;
  --green-dark: #16563e;
  --green-soft: #e4f1e8;
  --mint: #b9dbc7;
  --amber: #bd7730;
  --amber-soft: #f7eadb;
  --red: #a84f43;
  --red-soft: #f7e5e1;
  --shadow: 0 24px 70px rgba(24, 54, 42, 0.12);
  --radius: 24px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(233, 241, 235, 0.8), rgba(246, 244, 238, 0.6) 28rem),
    var(--paper);
  overflow-x: hidden;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

#cheaply-analytics-consent { position: fixed; z-index: 100; right: 20px; bottom: 20px; width: min(420px, calc(100vw - 40px)); padding: 18px; border: 1px solid var(--line, #dfe5e1); border-radius: 16px; color: #17251f; background: #fff; box-shadow: 0 14px 40px rgba(23, 37, 31, .18); }
#cheaply-analytics-consent p { margin: 8px 0 14px; color: #5f6b65; font-size: .9rem; line-height: 1.45; }
#cheaply-analytics-consent div { display: flex; justify-content: flex-end; gap: 8px; }
#cheaply-analytics-consent button { padding: 9px 14px; border: 1px solid #b9c8bf; border-radius: 9px; background: #fff; color: #1e3329; font-weight: 700; }
#cheaply-analytics-consent button[data-analytics="accept"] { border-color: #147d5a; color: #fff; background: #147d5a; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.22;
  pointer-events: none;
}
.ambient-one { top: -18rem; right: -10rem; background: #82b897; }
.ambient-two { bottom: -20rem; left: -13rem; background: #dca56d; }

.app-shell {
  width: min(100%, 780px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom));
}

.app-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: #f8f4e8;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 22px; letter-spacing: -.02em; }
h2 { margin-bottom: 8px; font-size: clamp(22px, 5vw, 30px); line-height: 1.08; letter-spacing: -.035em; }

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.66);
  cursor: pointer;
}
.icon-button:active { transform: rotate(18deg) scale(.95); }

.session-bar {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px 8px 15px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 28px rgba(23,37,31,.06);
  font-size: 12px;
  font-weight: 700;
}

.logout-button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(168,79,67,.22);
  border-radius: 11px;
  color: var(--red);
  background: var(--red-soft);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.logout-button:disabled { opacity: .55; cursor: default; }
.session-actions { display: flex; align-items: center; gap: 7px; }

.profile-control { position: relative; }
.profile-button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; overflow: hidden; border: 1px solid rgba(23,37,31,.16); border-radius: 50%; color: var(--ink); background: var(--green-soft); cursor: pointer; }
.profile-button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.profile-avatar { width: 100%; height: 100%; object-fit: cover; }
.profile-initials { font-size: 11px; font-weight: 900; }
.profile-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; display: grid; min-width: 230px; gap: 5px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 18px 45px rgba(23,37,31,.18); color: var(--ink); }
.profile-menu strong { font-size: 13px; }
.profile-menu > span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.profile-menu > a { margin-top: 7px; padding: 8px 10px; border-radius: 9px; color: var(--green-dark); background: var(--green-soft); font-size: 11px; font-weight: 900; text-decoration: none; }
.profile-persona { display: grid; gap: 3px; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.profile-persona select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }

.session-admin-link { color: var(--green-dark); font-size: 11px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.access-secondary { margin-top: 10px; text-decoration: none; }

.tab-bar {
  position: sticky;
  top: 10px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
  margin-bottom: 18px;
  border: 1px solid rgba(23,37,31,.09);
  border-radius: 18px;
  background: rgba(246,244,238,.84);
  box-shadow: 0 10px 32px rgba(23,37,31,.08);
  backdrop-filter: blur(18px);
}
.personal-only { display: none !important; }
.personal-mode .tab-button.personal-only { display: flex !important; }
.personal-mode .tab-panel.personal-only.active { display: block !important; }
.personal-mode .tab-bar { grid-template-columns: repeat(5, 1fr); }
.team-only-mode .employee-action-card,
.team-only-mode .tab-button[data-tab="absence"],
.team-only-mode .tab-button[data-tab="month"] { display: none !important; }
.team-only-mode .tab-bar { grid-template-columns: repeat(2, 1fr); }

.tab-button {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tab-button.active { color: white; background: var(--ink); box-shadow: 0 6px 14px rgba(23,37,31,.2); }

.tab-panel { display: none; animation: rise .28s ease; }
.tab-panel.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.hero-card, .access-card {
  position: relative;
  overflow: hidden;
  padding: 26px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius);
  color: #f7f5ee;
  background:
    radial-gradient(circle at 90% 0%, rgba(153,206,174,.3), transparent 45%),
    var(--ink);
  box-shadow: var(--shadow);
}
.hero-card.warm { background: radial-gradient(circle at 90% 0%, rgba(240,190,132,.28), transparent 46%), #3d3025; }
.hero-card p:last-child { margin-bottom: 0; color: rgba(255,255,255,.72); line-height: 1.5; }
.date-label { margin-bottom: 10px; color: #abd9bf; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.access-card { margin-top: 50px; text-align: center; }
.access-card p { color: rgba(255,255,255,.7); line-height: 1.5; }
.access-card .account-choice-hint { margin: 11px 8px 0; color: rgba(255,255,255,.62); font-size: 12px; }
.access-icon { display: block; margin-bottom: 12px; font-size: 32px; }
.access-card label { display: block; margin-bottom: 7px; text-align: left; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 700; }
.inline-field { display: flex; gap: 8px; }
.inline-field input { min-width: 0; flex: 1; }

.form-card, .today-board, .planned-card {
  padding: 22px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 16px 48px rgba(23,37,31,.06);
  backdrop-filter: blur(16px);
}

fieldset { padding: 0; margin: 0 0 24px; border: 0; }
legend, .field-block label { display: block; margin-bottom: 12px; color: var(--ink); font-size: 14px; font-weight: 800; }
.field-block label span { color: var(--green); }
.field-block label small { color: var(--muted); font-weight: 500; }
.field-block { margin-bottom: 20px; }

.employee-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.employee-choice { position: relative; }
.employee-choice input { position: absolute; opacity: 0; pointer-events: none; }
.employee-choice label {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(248,248,244,.76);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: .16s ease;
}
.employee-choice label::before {
  content: attr(data-initials);
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--green-dark);
  background: var(--green-soft);
  font-size: 11px;
  font-weight: 900;
}
.employee-choice input:checked + label { border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.employee-choice input:focus-visible + label { outline: 3px solid rgba(31,113,81,.22); }

input[type="time"], input[type="date"], input[type="month"], input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%;
  min-height: 54px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fbfaf7;
  outline: none;
}
input[type="tel"] {
  width: 100%;
  min-height: 54px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fbfaf7;
  outline: none;
}
.money-input { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.money-input input { width: 100%; min-height: 54px; padding: 0 15px; border: 1px solid var(--line); border-radius: 14px; background: #fbfaf7; }
.money-input span { color: var(--muted); font-size: 13px; font-weight: 800; }
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,113,81,.12); }
.planning-time-select {
  min-height: 62px;
  border: 2px solid rgba(146,201,174,.9);
  border-radius: 17px;
  color: inherit;
  background-color: rgba(255,255,255,.12);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
.planning-time-select option { color: var(--ink); background: white; }
.field-block .planning-time-select { min-height: 54px; border-width: 1px; border-color: var(--line); background-color: #fbfaf7; font-size: 17px; }
.admin-manual-attendance-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
  margin-top: 8px;
}
.admin-manual-attendance-form .field-block { margin-bottom: 0; }
.admin-manual-attendance-form .field-block:last-of-type { grid-column: 1 / -1; }
.admin-manual-attendance-form .primary-button { grid-column: 1 / -1; justify-self: start; min-width: 220px; }
.date-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.primary-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border: 0;
  border-radius: 15px;
  color: white;
  background: var(--green);
  box-shadow: 0 10px 22px rgba(31,113,81,.22);
  font-weight: 800;
  cursor: pointer;
}
.primary-button:hover { background: var(--green-dark); }
.primary-button:active { transform: translateY(1px) scale(.99); }
.primary-button:disabled { opacity: .55; cursor: wait; }
.primary-button.full { width: 100%; }
.cheaply-auth-button {
  color: var(--ink);
  background: linear-gradient(180deg, #fff, #f4ffe8);
  border: 1px solid rgba(185,219,199,.82);
  box-shadow: 0 14px 30px rgba(31,113,81,.2);
  text-decoration: none;
}
.cheaply-auth-button:hover { background: #dfffb0; }
.cheaply-auth-button img { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgba(23,37,31,.08); }
.now-button {
  min-height: 62px;
  background: var(--ink);
  box-shadow: 0 12px 26px rgba(23,37,31,.2);
  font-size: 16px;
}
.now-button:hover { background: #263a31; }
.action-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
.action-divider::before, .action-divider::after { content: ""; height: 1px; background: var(--line); }
.personal-mode .employee-grid { grid-template-columns: 1fr; }
.personal-mode .employee-choice label { min-height: 52px; }
.personal-mode .identity-fieldset { display: none; }
.primary-button.compact { min-height: 50px; padding-inline: 17px; }
.warm-button { background: #9e6330; box-shadow: 0 10px 22px rgba(158,99,48,.2); }
.warm-button:hover { background: #7f4d25; }
.form-hint { margin: 13px 5px 0; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.status-fieldset { margin-bottom: 20px; }
.status-fieldset legend span { color: var(--green); }
.status-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.status-choice-row label { position: relative; }
.status-choice-row input { position: absolute; opacity: 0; }
.status-choice-row label span { display: grid; min-height: 54px; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: #fbfaf7; font-size: 12px; font-weight: 800; cursor: pointer; }
.status-choice-row input:checked + span { color: var(--green-dark); border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }

.attendance-card { display: grid; gap: 18px; padding: 22px; margin-bottom: 14px; border-radius: var(--radius); color: white; background: #26342e; box-shadow: var(--shadow); }
.attendance-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.attendance-card h2 { margin-bottom: 6px; font-size: 24px; }
.attendance-card p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; }
.attendance-state-pill { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.attendance-state-pill[data-state="working"] { color: #d9f7e4; border-color: rgba(125,221,161,.36); background: rgba(31,113,81,.5); }
.attendance-state-pill[data-state="finished"] { color: #26342e; border-color: #d5eddd; background: #d5eddd; }
.attendance-session-summary { padding: 14px 16px; border: 1px solid rgba(189,233,206,.28); border-radius: 14px; color: #d9f7e4; background: rgba(31,113,81,.24); font-size: 14px; font-weight: 800; text-align: center; }
.attendance-result { padding: 16px; border-radius: 16px; color: var(--ink); background: #f4f7f2; }
.attendance-card .attendance-result > p { margin-bottom: 12px; color: var(--green-dark); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.attendance-result > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.attendance-result span { display: grid; gap: 4px; padding: 11px; border-radius: 12px; background: white; }
.attendance-result small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.attendance-result strong { color: var(--ink); font-size: 18px; }
.attendance-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.attendance-time-field { display: grid; gap: 7px; }
.attendance-time-field label { color: rgba(255,255,255,.78); font-size: 11px; font-weight: 800; }
.attendance-time-field label strong { display: block; margin-top: 2px; color: #bde9ce; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.attendance-time-field input { width: 100%; min-height: 58px; padding: 0 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; color: white; background: rgba(255,255,255,.1); font-size: 22px; font-weight: 900; color-scheme: dark; }
.attendance-time-field input:focus { outline: 3px solid rgba(189,233,206,.25); border-color: #bde9ce; }
.attendance-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
.attendance-actions .primary-button { min-width: 0; }
.checkout-button { background: #a84f43; box-shadow: 0 12px 26px rgba(168,79,67,.2); }
.checkout-button:hover { background: #8f4036; }
.attendance-card .attendance-correction-hint { font-size: 11px !important; line-height: 1.45; text-align: center; }

.month-picker-card { padding: 16px 20px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.consent-card { display: grid; gap: 16px; margin: 18px 0; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow-soft); }
.consent-card h2 { margin: 3px 0 8px; }
.consent-card p { margin: 0; }
.consent-check { display: flex; gap: 11px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f7f7f2; font-size: 13px; font-weight: 700; line-height: 1.45; cursor: pointer; }
.consent-check input { width: 19px; height: 19px; margin: 0; accent-color: var(--green); flex: 0 0 auto; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions .primary-button { flex: 1 1 230px; }
.consent-actions .cancel-button { flex: 0 1 auto; }
.month-picker-card label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 800; }
.month-picker-card input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; }
.pay-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 14px; }
.pay-stat { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.pay-stat span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pay-stat strong { font-size: 20px; }
.pay-stat.total { grid-column: 1 / -1; color: white; border-color: var(--green-dark); background: linear-gradient(135deg, var(--green-dark), var(--green)); }
.pay-stat.total span { color: rgba(255,255,255,.72); }
.pay-stat.total strong { font-size: 27px; }
.pay-stat.outstanding { background: #fff8eb; }
.month-records { display: grid; gap: 10px; margin-top: 16px; }
.month-row { padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.month-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.month-row-head .money { color: var(--green-dark); font-size: 13px; text-align: right; }
.month-row-detail { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.day-pay-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.day-pay-breakdown > div { padding: 11px; border-radius: 11px; background: #f7f7f2; }
.day-pay-breakdown span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.day-pay-breakdown strong { font-size: 13px; }
.attendance-edit-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.attendance-edit-button { min-height: 38px; padding: 0 12px; border: 1px solid var(--green); border-radius: 10px; color: var(--green-dark); background: var(--green-soft); font-size: 11px; font-weight: 900; cursor: pointer; }
.admin-correction-link { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.attendance-remove-button { border-color: #b8584d; color: #8c342b; background: #fff1ee; }
.attendance-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; gap: 7px; align-items: end; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f7f7f2; }
.attendance-edit-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.attendance-edit-form input, .attendance-edit-form textarea, .attendance-edit-form .planning-time-select { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 16px; font-weight: 800; }
.attendance-edit-form textarea { min-height: 72px; padding-block: 10px; resize: vertical; font-family: inherit; font-weight: 650; }
.attendance-edit-form .attendance-reason-field { grid-column: 1 / -1; }
.attendance-edit-form small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.45; }
.attendance-edit-form button { min-height: 40px; padding: 0 11px; border: 0; border-radius: 9px; font-size: 11px; font-weight: 900; cursor: pointer; }
.attendance-edit-save { color: white; background: var(--green); }
.attendance-edit-cancel { color: var(--ink); background: white; border: 1px solid var(--line) !important; }
.month-row { padding: 14px; border-radius: 15px; background: #f7f7f2; }
.month-row-head { display: flex; justify-content: space-between; gap: 12px; }
.month-row strong { font-size: 13px; }
.month-row .money { color: var(--green-dark); }
.month-row-detail { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.payment-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.payment-confirm-actions { display: flex; gap: 6px; }
.payment-confirm-actions button { padding: 7px 9px; border: 0; border-radius: 9px; color: white; background: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.payment-confirm-actions button:last-child { background: var(--red); }
.payment-confirm-actions button.selected { box-shadow: 0 0 0 3px rgba(31,113,81,.2); transform: translateY(-1px); }
.payment-confirm-actions button:last-child.selected { box-shadow: 0 0 0 3px rgba(168,79,67,.2); }
.payment-confirm-actions button:disabled,
.payment-confirm-actions button:last-child:disabled {
  background: #aeb5b1;
  color: #f7f8f7;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  opacity: .82;
}
.mark-paid-button { padding: 8px 10px; border: 0; border-radius: 9px; color: white; background: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.admin-payroll-hero { margin-top: 24px; }
.system-card { padding: 20px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.system-card h2 { margin-bottom: 14px; font-size: 21px; }
.system-status { display: grid; gap: 8px; margin-bottom: 12px; }
.system-status-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: #f7f7f2; font-size: 12px; font-weight: 800; }
.system-status-row span { min-width: 0; }
.system-service-identity { display: grid; gap: 3px; }
.system-service-name { color: var(--ink); }
.system-service-account { color: var(--muted); font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.system-service-state { color: var(--green-dark); text-align: right; }
.system-status-row.warning .system-service-state { color: var(--red); }
.system-actions { display: grid; gap: 8px; }
.secondary-button { min-height: 48px; padding: 0 16px; border: 1px solid var(--green); border-radius: 13px; color: var(--green-dark); background: var(--green-soft); font-weight: 900; cursor: pointer; }
.secondary-button:disabled { opacity: .55; cursor: default; }

.section-heading, .calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading h2 { margin-bottom: 0; font-size: 21px; }
.live-dot { width: 11px; height: 11px; border: 3px solid #d9eee2; border-radius: 50%; background: #3ca16f; box-shadow: 0 0 0 4px rgba(60,161,111,.08); }

.team-list { display: grid; gap: 8px; margin-top: 18px; }
.today-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 18px; }
.today-metric { min-width: 0; padding: 12px 8px; border: 0; border-radius: 14px; color: inherit; background: #f1f2ee; font: inherit; text-align: center; }
button.today-metric { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
button.today-metric:hover { box-shadow: 0 8px 20px rgba(23,37,31,.1); transform: translateY(-1px); }
.today-metric strong { display: block; margin-bottom: 3px; font-size: 22px; }
.today-metric span { display: block; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.today-metric.expected, .today-metric.checked { color: var(--green-dark); background: var(--green-soft); }
.today-metric.absent { color: var(--red); background: var(--red-soft); }
.today-metric.unknown { color: #66726d; background: #e9ece9; }
.team-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  min-height: 55px;
  padding: 9px 11px;
  border-radius: 15px;
  background: #f7f7f2;
}
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--green-dark); background: var(--green-soft); font-size: 11px; font-weight: 900; }
.team-name { font-size: 13px; font-weight: 800; }
.team-status { margin-top: 2px; color: var(--muted); font-size: 11px; }
.status-pill { padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-pill.checked_in, .status-pill.checked_out, .status-pill.coming { color: var(--green-dark); background: var(--green-soft); }
.status-pill.unknown { color: #66726d; background: #e9ece9; }
.status-pill.absent { color: var(--red); background: var(--red-soft); }

.planned-list { display: grid; gap: 9px; margin-top: 16px; }
.planned-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; border-radius: 15px; background: var(--amber-soft); }
.planned-item strong { display: block; margin-bottom: 4px; font-size: 13px; }
.planned-item span { color: #795a3b; font-size: 12px; }
.cancel-button { align-self: center; padding: 8px 10px; border: 1px solid rgba(168,79,67,.18); border-radius: 10px; color: var(--red); background: rgba(255,255,255,.55); font-size: 11px; font-weight: 800; cursor: pointer; }

.admin-home { text-decoration: none; }
.admin-shell { width: min(100%, 1180px); }
.admin-tab-bar {
  position: sticky;
  z-index: 20;
  top: 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  margin: 0 0 18px;
  border: 1px solid rgba(23,37,31,.1);
  border-radius: 18px;
  background: rgba(250,250,247,.92);
  box-shadow: 0 12px 36px rgba(23,37,31,.09);
  backdrop-filter: blur(14px);
}
.admin-tab-button {
  display: flex;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
}
.admin-tab-button span { font-size: 14px; }
.admin-tab-button.active { color: white; background: var(--ink); box-shadow: 0 7px 18px rgba(23,37,31,.18); }
.admin-tab-panel { display: none; animation: rise .28s ease; }
.admin-tab-panel.active { display: block; }
.executive-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.executive-hero > div { min-width: 0; }
.executive-hero .secondary-button { flex: 0 0 auto; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.admin-kpi { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 12px 32px rgba(23,37,31,.05); }
.admin-kpi.actionable { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.admin-kpi.actionable:hover { box-shadow: 0 16px 38px rgba(23,37,31,.12); transform: translateY(-2px); }
.admin-kpi span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.admin-kpi strong { display: block; font-size: clamp(20px, 4vw, 29px); }
.admin-kpi.positive { color: var(--green-dark); background: var(--green-soft); }
.admin-kpi.attention { color: #7b532c; background: var(--amber-soft); }
.admin-overview-grid { display: grid; gap: 14px; }
.admin-overview-card { margin: 0; }
.admin-attention-stack { display: grid; gap: 14px; align-content: start; }
.admin-alert-list { display: grid; gap: 8px; margin-top: 15px; }
.admin-alert-item { display: grid; gap: 4px; width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #f7f7f2; text-align: left; cursor: pointer; }
.admin-alert-item:hover { border-color: rgba(31,113,81,.32); background: white; }
.admin-alert-item strong { font-size: 12px; }
.admin-alert-item span { color: var(--muted); font-size: 10px; line-height: 1.35; }
.admin-alert-item.correction { border-color: rgba(183,117,46,.24); background: var(--amber-soft); }
.admin-open-session-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.admin-open-delete-button { min-height: 38px; padding: 0 12px; border: 1px solid rgba(151,56,43,.28); border-radius: 10px; color: #8f352b; background: #fff5f2; font-size: 10px; font-weight: 900; cursor: pointer; }
.admin-open-delete-button.compact { min-width: 82px; }
.admin-open-delete-button:hover { border-color: rgba(151,56,43,.55); background: #ffeae5; }
.admin-open-delete-button:disabled { opacity: .55; cursor: wait; }
.admin-alert-empty { padding: 14px; margin: 0; border-radius: 12px; color: var(--muted); background: #f7f7f2; font-size: 11px; text-align: center; }
.admin-team-layout { display: grid; gap: 14px; }
.admin-employee-form-card, .admin-directory-card { margin: 0; }
.admin-calendar-heading { margin-top: 4px; }
.admin-calendar-tools { display: grid; gap: 8px; justify-items: end; }
.admin-calendar-public-link { color: var(--green-dark); font-size: 10px; font-weight: 900; text-decoration: none; }
.admin-pay-summary { grid-template-columns: repeat(2, 1fr); }
.correction-request-admin { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 11px; margin-top: 11px; border: 1px solid var(--line); border-radius: 12px; background: #f7f7f2; }
.correction-request-admin.open { border-color: rgba(183,117,46,.26); background: var(--amber-soft); }
.correction-request-admin.resolved { border-color: rgba(31,113,81,.22); background: var(--green-soft); }
.correction-request-admin strong { display: block; margin-bottom: 3px; font-size: 11px; }
.correction-request-admin span { display: block; color: var(--muted); font-size: 9px; line-height: 1.4; }
.request-correction-button { min-height: 36px; padding: 0 11px; border: 0; border-radius: 9px; color: white; background: #a86f32; font-size: 10px; font-weight: 900; cursor: pointer; }
.request-correction-button.secondary { color: var(--green-dark); border: 1px solid rgba(31,113,81,.24); background: white; }
.request-correction-button:disabled, .mark-paid-button:disabled { opacity: .45; cursor: default; }
.employee-correction-request { display: grid; gap: 5px; padding: 12px; margin-top: 12px; border: 1px solid rgba(183,117,46,.3); border-radius: 12px; color: #704a27; background: var(--amber-soft); }
.employee-correction-request strong { font-size: 12px; }
.employee-correction-request span { font-size: 10px; line-height: 1.45; }
.month-row.correction-target { border-color: #b7752e; box-shadow: 0 0 0 4px rgba(183,117,46,.14); }
.navigation-target { animation: navigation-flash 2.2s ease; }
@keyframes navigation-flash {
  0%, 100% { box-shadow: inherit; }
  12%, 58% { border-color: #b7752e; box-shadow: 0 0 0 5px rgba(183,117,46,.22), 0 18px 46px rgba(183,117,46,.18); }
}
.team-calendar-callout { display: grid; gap: 18px; padding: 22px; margin-bottom: 14px; border: 1px solid rgba(31,113,81,.2); border-radius: var(--radius); background: linear-gradient(135deg, rgba(228,241,232,.95), rgba(255,255,255,.88)); box-shadow: 0 16px 48px rgba(23,37,31,.06); }
.team-calendar-callout h2 { margin-bottom: 7px; font-size: 23px; }
.team-calendar-callout p:last-child { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.team-calendar-callout .primary-button { text-decoration: none; }
.active-toggle { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 13px; font-weight: 800; }
.active-toggle input { width: 20px; height: 20px; accent-color: var(--green); }
.text-button { min-height: 44px; margin-top: 8px; border: 0; color: var(--green); background: transparent; font-weight: 800; cursor: pointer; }
.text-button.full { width: 100%; }
.employee-count { display: grid; min-width: 34px; height: 34px; place-items: center; border-radius: 12px; color: var(--green-dark); background: var(--green-soft); font-size: 13px; font-weight: 900; }
.admin-directory-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.consent-request-all { width: auto; min-height: 38px; padding: 0 12px; border-radius: 11px; font-size: 11px; }
.admin-employee-list { display: grid; gap: 10px; margin-top: 18px; }
.admin-employee { display: grid; gap: 12px; padding: 15px; border-radius: 16px; background: #f7f7f2; }
.admin-employee.inactive { opacity: .55; }
.admin-employee strong { display: block; margin-bottom: 4px; font-size: 14px; }
.admin-employee span { color: var(--muted); font-size: 12px; }
.admin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.admin-actions button, .admin-actions a { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; font-size: 11px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.admin-actions .admin-history-link { color: white; border-color: var(--green); background: var(--green); }
.admin-actions .admin-consent-request-button { grid-column: 1 / -1; color: var(--green-dark); border-color: rgba(31,113,81,.3); background: var(--green-soft); }
.admin-actions button:disabled { opacity: .45; cursor: default; }

.employee-history-hero h2 { text-transform: none; }
.month-pagination-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}
.month-page-center { min-width: 0; text-align: center; }
.month-page-center label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.month-page-center input { width: 100%; min-height: 46px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf7; }
.month-page-center strong { display: block; margin-top: 7px; font-size: 13px; text-transform: capitalize; }
.month-page-button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--green); border-radius: 13px; color: var(--green-dark); background: var(--green-soft); font-size: 20px; font-weight: 900; cursor: pointer; }
.month-page-button:disabled { opacity: .38; cursor: default; }
.month-today-button { grid-column: 1 / -1; min-height: 34px; margin: 0; }
.month-today-button:disabled { color: var(--muted); opacity: .55; cursor: default; }
.admin-rate-card { display: grid; gap: 14px; padding: 17px; margin-bottom: 12px; border: 1px solid rgba(183,117,46,.24); border-radius: 18px; background: var(--amber-soft); }
.admin-rate-card h2 { margin-bottom: 5px; font-size: 18px; }
.admin-rate-help { max-width: 620px; margin: 0; color: #704a27; font-size: 11px; line-height: 1.45; }
.admin-rate-form { display: grid; gap: 7px; }
.admin-rate-form label { color: #704a27; font-size: 11px; font-weight: 900; }
.admin-rate-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-rate-controls input { width: 120px; min-height: 42px; padding: 0 11px; border: 1px solid rgba(112,74,39,.28); border-radius: 11px; color: var(--ink); background: white; font: inherit; font-weight: 800; }
.admin-rate-controls span { color: #704a27; font-size: 12px; font-weight: 900; }
.admin-rate-controls .primary-button { min-height: 42px; padding: 0 14px; }
.employee-pay-summary { grid-template-columns: repeat(2, 1fr); }
.employee-pay-summary .pay-stat:last-child { grid-column: 1 / -1; color: var(--green-dark); background: var(--green-soft); }
.employee-history-row { padding: 16px; }
.work-intervals { display: grid; gap: 7px; margin-top: 12px; }
.work-interval { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.work-interval-summary { display: flex; min-width: 180px; flex: 1; align-items: center; justify-content: space-between; gap: 12px; }
.work-interval strong { margin: 0; font-size: 12px; }
.work-interval span { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.admin-attendance-edit-button { flex: 0 0 auto; }
.admin-attendance-edit-form { flex: 1 0 100%; }
.employee-day-total { margin-top: 10px; font-weight: 700; }

.calendar-heading { align-items: flex-start; margin: 24px 2px 14px; }
.calendar-heading h2 { margin-bottom: 0; }
.legend { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.present { background: var(--green); }
.legend-dot.available { background: #a7b0ac; }
.legend-dot.absent { background: var(--red); }

.calendar-list { display: grid; gap: 10px; }
.calendar-day { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.82); }
.calendar-day.today { border-color: rgba(31,113,81,.42); box-shadow: 0 12px 30px rgba(31,113,81,.1); }
.calendar-day summary { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 17px; list-style: none; cursor: pointer; }
.calendar-day summary::-webkit-details-marker { display: none; }
.calendar-date strong { display: block; margin-bottom: 3px; font-size: 15px; text-transform: capitalize; }
.calendar-date span { color: var(--muted); font-size: 11px; }
.day-counts { display: flex; align-items: center; gap: 6px; }
.count-badge { display: grid; min-width: 27px; height: 27px; place-items: center; border-radius: 9px; font-size: 11px; font-weight: 900; }
.count-badge.green { color: var(--green-dark); background: var(--green-soft); }
.count-badge.red { color: var(--red); background: var(--red-soft); }
.calendar-employees { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 0 13px 13px; }
.calendar-person { padding: 10px; border-radius: 12px; background: #f6f6f1; font-size: 11px; }
.calendar-person strong { display: block; overflow: hidden; margin-bottom: 3px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-person span { color: var(--muted); }
.calendar-person.checked_in, .calendar-person.checked_out, .calendar-person.coming { background: var(--green-soft); }
.calendar-person.absent { background: var(--red-soft); }

.calendar-shell { overflow: hidden; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.84); box-shadow: 0 16px 48px rgba(23,37,31,.06); }
.calendar-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid var(--line); }
.calendar-month-title { min-width: 0; text-align: center; }
.calendar-month-title span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.calendar-month-title strong { display: block; overflow: hidden; font-size: 16px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.calendar-current-button { grid-column: 1 / -1; min-height: 30px; margin: -3px 0 0; }
.calendar-current-button:disabled { opacity: .42; cursor: default; }
.calendar-grid-scroll { overflow-x: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
.calendar-weekdays, .calendar-month-grid { display: grid; min-width: 630px; grid-template-columns: repeat(7, minmax(82px, 1fr)); gap: 6px; }
.calendar-weekdays { margin-bottom: 6px; }
.calendar-weekdays span { padding: 5px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.calendar-month-day { display: flex; min-height: 112px; flex-direction: column; gap: 7px; align-items: stretch; padding: 9px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fbfaf7; text-align: left; cursor: pointer; }
.calendar-month-day:hover { border-color: rgba(31,113,81,.35); background: white; }
.calendar-month-day.outside-month { opacity: .42; }
.calendar-month-day.today { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.calendar-month-day.selected { outline: 3px solid rgba(31,113,81,.14); background: white; }
.calendar-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calendar-cell-head strong { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; font-size: 12px; }
.calendar-month-day.today .calendar-cell-head strong { color: white; background: var(--green); }
.calendar-cell-head > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.calendar-cell-signals { display: grid; gap: 3px; }
.calendar-cell-signals i { display: block; padding: 3px 5px; border-radius: 6px; font-size: 8px; font-style: normal; font-weight: 900; }
.calendar-live-count { color: var(--green-dark); background: var(--green-soft); }
.calendar-absent-count { color: var(--red); background: var(--red-soft); }
.calendar-cell-names { display: -webkit-box; overflow: hidden; margin-top: auto; color: var(--muted); font-size: 9px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.calendar-day-detail { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 16px 48px rgba(23,37,31,.06); }
.calendar-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.calendar-detail-heading h2 { margin-bottom: 0; font-size: 21px; text-transform: capitalize; }
.calendar-detail-summary { padding: 7px 9px; border-radius: 999px; color: var(--green-dark); background: var(--green-soft); font-size: 10px; font-weight: 900; white-space: nowrap; }
.calendar-detail-people { padding: 0; margin-top: 16px; }

.expense-hero { background: radial-gradient(circle at 90% 0%, rgba(240,190,132,.28), transparent 46%), #3d3025; }
.expense-form { display: grid; gap: 2px; }
.expense-eligible-preview { padding: 13px 15px; margin: -4px 0 15px; border: 1px solid rgba(31,113,81,.18); border-radius: 12px; color: var(--green-dark); background: var(--green-soft); font-size: 13px; font-weight: 900; }
.form-help { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.expense-list { display: grid; gap: 10px; }
.expense-item { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #f7f7f2; }
.expense-item.pending { border-color: rgba(183,117,46,.3); background: var(--amber-soft); }
.expense-item.approved { border-color: rgba(31,113,81,.25); background: var(--green-soft); }
.expense-item.rejected { border-color: rgba(168,79,67,.25); background: var(--red-soft); }
.expense-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.expense-item-head strong { font-size: 13px; line-height: 1.3; }
.expense-status { flex: 0 0 auto; padding: 6px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.expense-status.pending { color: #7b532c; background: #f3d6b4; }
.expense-status.approved { color: var(--green-dark); background: #c9e6d3; }
.expense-status.rejected { color: var(--red); background: #edc6c0; }
.expense-item-meta, .expense-item-reason { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.expense-item-reason { color: var(--ink); font-size: 13px; font-weight: 700; }
.expense-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.expense-item-actions .text-button { min-height: 32px; margin: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 10px; text-decoration: none; }
.expense-review-button { min-height: 38px; font-size: 11px; }
.expense-receipt-link { color: var(--green-dark); }
.expense-rejection-reason { color: var(--red); font-size: 10px; font-weight: 800; }
.expense-summary { grid-template-columns: repeat(2, 1fr); }
.expense-admin-filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 16px 20px 2px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.expense-admin-filters .field-block { margin-bottom: 14px; }

.empty-state { padding: 22px; color: var(--muted); text-align: center; font-size: 13px; }
.skeleton-list:empty::after { content: "Chargement…"; display: block; padding: 24px; color: var(--muted); text-align: center; }

.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: min(calc(100% - 32px), 480px);
  padding: 14px 17px;
  border-radius: 14px;
  color: white;
  background: var(--ink);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: .22s ease;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #8b3f36; }
.toast.warning { background: #7a531c; }
.hidden { display: none !important; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  padding: 24px 10px calc(24px + env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.site-footer a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--green-dark); }
.policy-body { background: var(--background); }
.policy-shell { max-width: 860px; }
.policy-card {
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 18px 56px rgba(23,37,31,.08);
}
.policy-card h2 { margin-bottom: 14px; font-size: clamp(25px, 5vw, 42px); line-height: 1.05; }
.policy-card h3 { margin: 30px 0 9px; color: var(--green-dark); font-size: 16px; }
.policy-card p, .policy-card li { color: var(--muted); font-size: 14px; line-height: 1.72; }
.policy-card p { margin: 0 0 12px; }
.policy-card ul, .policy-card ol { display: grid; gap: 7px; padding-left: 22px; margin: 10px 0 16px; }
.policy-card a { color: var(--green-dark); font-weight: 800; }
.policy-updated { margin-bottom: 18px !important; font-size: 11px !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

@media (min-width: 680px) {
  .app-shell { padding-inline: 28px; }
  .employee-grid { grid-template-columns: repeat(3, 1fr); }
  .calendar-employees { grid-template-columns: repeat(3, 1fr); }
  .team-calendar-callout { grid-template-columns: 1fr auto; align-items: center; }
  .admin-kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .admin-pay-summary { grid-template-columns: repeat(5, 1fr); }
  .expense-summary { grid-template-columns: repeat(4, 1fr); }
  .admin-team-layout { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr); align-items: start; }
  .admin-employee-form-card { position: sticky; top: 86px; }
}

@media (min-width: 960px) {
  .admin-overview-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr); }
}

@media (max-width: 480px) {
  .app-shell { padding-inline: 12px; }
  .tab-button { gap: 4px; font-size: 11px; }
  .personal-mode .tab-bar { grid-template-columns: repeat(5, 1fr); }
  .hero-card, .form-card, .today-board, .planned-card { padding: 19px; }
  .employee-choice label { padding-inline: 9px; font-size: 11px; }
  .date-pair { grid-template-columns: 1fr; gap: 0; }
  .expense-admin-filters { grid-template-columns: 1fr; gap: 0; }
  .attendance-time-fields { grid-template-columns: 1fr; }
  .attendance-edit-form { grid-template-columns: 1fr 1fr; }
  .attendance-edit-form label { grid-column: 1 / -1; }
  .admin-manual-attendance-form { grid-template-columns: 1fr; }
  .admin-manual-attendance-form .primary-button { min-width: 0; width: 100%; }
  .calendar-heading { display: block; }
  .legend { display: flex; flex-wrap: wrap; margin-top: 10px; }
  .today-metrics { grid-template-columns: repeat(2, 1fr); }
  .session-bar { align-items: flex-start; }
  .session-actions { flex-direction: column-reverse; align-items: flex-end; }
  .calendar-detail-heading { display: block; }
  .calendar-detail-summary { display: inline-block; margin-top: 10px; }
  .admin-tab-bar { top: 4px; gap: 3px; padding: 5px; }
  .admin-tab-button { min-height: 48px; padding: 6px 3px; gap: 3px; font-size: 8px; }
  .admin-tab-button span { font-size: 12px; }
  .executive-hero { display: block; }
  .executive-hero .secondary-button { width: 100%; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}