:root {
  --ink: #18332f;
  --muted: #71817e;
  --green: #1c514a;
  --green-dark: #153f3a;
  --mint: #b9ded2;
  --mint-light: #eaf5f1;
  --cream: #f7f6f1;
  --line: #e4e8e4;
  --white: #fff;
  --blue: #7ca6cf;
  --amber: #e8bd68;
  --coral: #e59b84;
  --violet: #aa9dcc;
  --shadow: 0 12px 30px rgba(25, 60, 54, .07);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.app-shell.is-locked { display: none; }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, 45%) 1fr; background: white; }
.login-screen.is-hidden { display: none; }
.login-brand-panel { background: var(--green-dark); color: white; padding: 46px 54px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.login-brand { padding: 0; position: relative; z-index: 2; }
.login-message { margin: auto 0; max-width: 510px; position: relative; z-index: 2; }
.login-kicker { color: #a9cfc4; font-size: 10px; letter-spacing: 2px; font-weight: 700; }
.login-message h1 { font: 600 clamp(38px, 4.2vw, 62px)/1.12 "Manrope"; letter-spacing: -2.8px; margin: 18px 0; }
.login-message h1 em { color: #aed7ca; font-style: normal; }
.login-message p { color: #b8ccc7; max-width: 390px; line-height: 1.65; font-size: 14px; }
.login-decoration { position: absolute; width: 430px; height: 430px; right: -170px; bottom: -180px; border: 1px solid rgba(183,221,207,.12); border-radius: 50%; }
.login-decoration i { position: absolute; inset: 45px; border: 1px solid rgba(183,221,207,.14); border-radius: 50%; }
.login-decoration i:nth-child(2) { inset: 110px; }.login-decoration i:nth-child(3) { inset: 170px; background: rgba(183,221,207,.09); }
.login-form-panel { display: grid; place-items: center; padding: 45px 25px; position: relative; }
.login-card { width: min(390px, 100%); }
.login-card h2 { font: 600 30px "Manrope"; letter-spacing: -1px; margin: 4px 0 7px; }
.login-intro { color: var(--muted); font-size: 13px; margin-bottom: 29px; }
.login-card>label { display: grid; gap: 7px; font-weight: 700; font-size: 11px; margin-top: 17px; }
.login-card input { width: 100%; padding: 12px; }
.password-field { position: relative; }
.password-field button { position: absolute; right: 8px; top: 7px; border: 0; background: none; color: var(--muted); padding: 6px; }
.login-options { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 5px; }
.login-options label { color: var(--muted); font-size: 10px; display: flex; align-items: center; gap: 5px; }
.login-options input { width: auto; accent-color: var(--green); }
.forgot-password { color: var(--green); border: 0; background: none; font-size: 10px; font-weight: 700; }
.login-submit { width: 100%; margin-top: 13px; padding: 13px; display: flex; justify-content: center; gap: 8px; }
.login-error { min-height: 15px; color: #a94f40; font-size: 10px; margin: 7px 0 0; }
.demo-logins { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-logins>p { grid-column: 1/-1; text-align: center; color: var(--muted); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 2px; font-weight: 700; }
.demo-logins button { display: grid; grid-template-columns: 28px 1fr; column-gap: 7px; text-align: left; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fafbf9; padding: 8px; }
.demo-logins button:hover { border-color: #a3c2b8; background: #f0f6f3; }
.demo-logins button>span { grid-row: 1/3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #d6e9e2; font-size: 8px; font-weight: 700; }
.demo-logins b { font-size: 9px; }.demo-logins button small { font-size: 8px; color: var(--muted); }
.demo-logins>small { grid-column: 1/-1; text-align: center; margin-top: 5px; color: var(--muted); font-size: 9px; }
.login-help{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted)}.login-help p{font-size:10px;margin:0}
.mobile-login-brand { display: none; }
.login-footer { position: absolute; bottom: 18px; color: #9ba6a3; font-size: 9px; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 242px; background: var(--green-dark); color: #e8f2ef; padding: 31px 18px 20px; display: flex; flex-direction: column; }
.brand { color: white; text-decoration: none; font: 700 24px "Manrope"; letter-spacing: -.8px; display: flex; align-items: center; gap: 12px; padding: 0 12px 38px; }
.brand em { color: #a6d5c7; font-style: normal; }
.brand-mark { width: 29px; height: 29px; position: relative; display: flex; gap: 3px; align-items: end; }
.brand-mark span { background: #b7ddcf; width: 7px; border-radius: 7px 7px 2px 2px; transform: rotate(24deg); }
.brand-mark span:nth-child(1) { height: 17px; }
.brand-mark span:nth-child(2) { height: 25px; }
.brand-mark span:nth-child(3) { height: 19px; }
.main-nav { display: grid; gap: 6px; }
.nav-item { border: 0; background: none; color: #b9cbc6; border-radius: 9px; padding: 12px 13px; display: flex; align-items: center; gap: 13px; font-weight: 600; text-align: left; width: 100%; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.1); }
.nav-icon { width: 20px; font-size: 20px; line-height: 1; text-align: center; }
.nav-count { margin-left: auto; background: #e4ac6a; color: #173f3a; border-radius: 99px; min-width: 21px; padding: 2px 6px; text-align: center; font-size: 12px; }
.sidebar-bottom { margin-top: auto; }
.profile { border-top: 1px solid rgba(255,255,255,.13); margin-top: 12px; padding: 20px 8px 2px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #c7dfd4; color: var(--green); font-size: 12px; font-weight: 700; }
.profile strong, .profile span { display: block; }
.profile strong { font-size: 13px; color: white; }
.profile span { color: #9db4ae; font-size: 11px; margin-top: 2px; }
.profile-menu { border: 0; background: none; color: #a7bbb6; }
.main { margin-left: 242px; width: calc(100% - 242px); min-height: 100vh; }
.topbar { height: 74px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 42px; justify-content: space-between; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }
.role-switch { padding: 3px; border-radius: 8px; background: #eff1ee; display: none; margin-left: auto; margin-right: 26px; }
body.can-admin .role-switch { display: flex; }
.role-switch button { background: none; border: 0; border-radius: 6px; padding: 7px 13px; font-size: 12px; color: var(--muted); }
.role-switch button.active { background: white; color: var(--ink); box-shadow: 0 2px 5px #d8dcd8; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.icon-button, .mobile-menu { border: 0; background: none; font-size: 21px; position: relative; }
.icon-button i { width: 6px; height: 6px; border-radius: 50%; background: #dc856f; position: absolute; top: 1px; right: 1px; }
.mobile-menu { display: none; }
.primary, .approve-task { border: 0; border-radius: 8px; padding: 12px 17px; background: var(--green); color: white; font-weight: 700; box-shadow: 0 4px 10px rgba(28,81,74,.15); }
.primary:hover, .approve-task:hover { background: #123e38; transform: translateY(-1px); }
.primary.compact { padding: 10px 15px; font-size: 13px; }
.content { max-width: 1450px; margin: 0 auto; padding: 42px 46px 60px; }
.view { display: none; }
.view.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } }
.page-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 30px; }
.heading-actions { display: flex; gap: 9px; align-items: center; }
.heading-actions .secondary { padding: 11px 15px; }.heading-actions i{font-style:normal}
.eyebrow, .card-label { color: #8a9895; font-size: 10px; letter-spacing: 1.4px; font-weight: 700; margin: 0 0 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font: 600 30px "Manrope"; letter-spacing: -1.2px; margin-bottom: 7px; }
.subtitle { color: var(--muted); margin-bottom: 0; font-size: 14px; }
.employee-dashboard { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; margin-bottom: 20px; }
.balance-card, .next-card { border-radius: 13px; padding: 25px 27px; min-height: 220px; }
.balance-card { color: white; background: var(--green); box-shadow: var(--shadow); }
.balance-card .card-label { color: #bcd2cc; }
.balance-main { display: flex; justify-content: space-between; align-items: center; }
.big-number { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.big-number strong { font: 600 45px "Manrope"; letter-spacing: -2px; }
.big-number span { font-weight: 600; color: #c5d8d3; }
.balance-main p { color: #b5cac4; font-size: 12px; }
.donut { width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(#b7ddd1 0 61%, rgba(255,255,255,.15) 61%); display: grid; place-items: center; position: relative; }
.donut::after { content:""; position:absolute; width: 84px; height:84px; border-radius:50%; background:var(--green); }
.donut div { z-index: 1; text-align: center; }
.donut strong, .donut span { display: block; }
.donut strong { font-size: 20px; }
.donut span { font-size: 9px; color: #bdd0cb; }
.balance-details { border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; padding-top: 18px; margin-top: 18px; }
.balance-details div { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; font-size: 11px; color: #bed0cc; }
.balance-details strong { color: white; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot.mint { background: #a9dbca; }.dot.sand { background: #e2c894; }.dot.violet { background: var(--violet); }.dot.blue { background: var(--blue); }.dot.green { background: #82b99c; }.dot.amber { background: var(--amber); }
.next-card { background: #e8f1ed; overflow: hidden; position: relative; }
.next-card::after { content:""; position:absolute; width:140px; height:140px; border-radius:50%; border:35px solid rgba(255,255,255,.28); right:-52px; bottom:-70px; }
.card-title-row, .section-header { display: flex; justify-content: space-between; align-items: flex-start; }
.status { display: inline-block; border-radius: 99px; padding: 4px 9px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.approved { color: #357a60; background: #d4e9df; }
.pending { color: #8c681f; background: #f8ebc7; }
.conflict-status { color: #a14f3d; background: #f5dfd8; }
.next-date { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.next-date span { font: 600 36px "Manrope"; }
.next-date i { width: 22px; height: 1px; background: #839590; }
.date-labels { display: flex; gap: 51px; margin: -4px 0 14px 5px; color: #81938e; font-size: 9px; font-weight: 700; }
.next-card h3 { font-size: 15px; margin-bottom: 4px; }.next-card p { font-size: 11px; color: #6f827d; }
.countdown { display: inline-flex; gap: 7px; align-items: center; color: #42635c; background: rgba(255,255,255,.52); padding: 6px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; }
.panel { background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 18px rgba(24,51,47,.035); }
.section-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
.team-away, .tasks-panel { padding: 23px 25px; }
.section-header h2 { font: 600 16px "Manrope"; margin-bottom: 4px; letter-spacing: -.3px; }
.section-header p { font-size: 11px; color: var(--muted); margin: 0; }
.text-button { border: 0; background: none; color: var(--green); font-size: 11px; font-weight: 700; }
.text-button span, .full-link span { margin-left: 5px; }
.away-list { margin-top: 15px; }
.away-person { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; padding: 12px 0; border-top: 1px solid #eef0ee; }
.person-avatar { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 700; flex: 0 0 auto; }
.peach { background: #f2d7c8; color: #8d513e; }.lavender { background: #ddd8ec; color: #62547c; }.sky { background: #d5e6ec; color: #3d6676; }.gold { background: #efe0b9; color: #796029; }.mint-bg { background: #cde5dc; color: #316b58; }
.away-person strong, .away-person span { display: block; }
.away-person strong { font-size: 12px; }.away-person span { font-size: 10px; color: var(--muted); margin-top: 2px; }
.away-time { text-align: right; }
.task-list { margin-top: 15px; display: grid; gap: 11px; }
.task { background: #fafaf8; border: 1px solid #eaede9; border-radius: 9px; padding: 13px; }
.task-top { display: flex; align-items: center; gap: 10px; }
.task-top div:nth-child(2) { flex: 1; }.task-top strong, .task-top span { display: block; font-size: 11px; }.task-top span { color: var(--muted); font-size: 9px; margin-top: 2px; }
.task-top .time { color: #9ba6a3; }
.task-dates { display: flex; justify-content: space-between; border-top: 1px solid #e7eae7; padding: 10px 0 8px; margin-top: 10px; font-size: 10px; }
.task-dates span:last-child { color: var(--muted); }
.task-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.secondary { border: 1px solid #dce2de; background: white; border-radius: 7px; padding: 9px 13px; font-weight: 700; font-size: 11px; }
.approve-task { padding: 9px; font-size: 10px; }
.full-link { width: 100%; border: 0; border-top: 1px solid #e7eae7; padding: 10px 0 0; background: none; color: #a05242; font-weight: 700; font-size: 10px; text-align: left; }
.week-panel { margin-top: 20px; padding: 23px 25px; }
.legend { display: flex; gap: 15px; color: var(--muted); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.week-strip { display: grid; grid-template-columns: repeat(7,1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 18px; }
.week-day { min-height: 92px; padding: 10px; border-right: 1px solid var(--line); }
.week-day:last-child { border: 0; }.week-day.weekend { background: #fafaf8; }
.week-day header { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); }
.week-day header strong { font-size: 14px; color: var(--ink); }
.absence-pill { margin-top: 9px; border-radius: 5px; padding: 5px 6px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #e4eef7; color: #456986; border-left: 2px solid var(--blue); }
.absence-pill.school { background: #fbf0d8; color: #816223; border-color: var(--amber); }
.admin-dashboard { display: none; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 20px; }
.metric { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 21px; display: flex; gap: 14px; align-items: center; }
.metric-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; font-weight: 700; }
.metric-icon.coral { background:#fae7e0;color:#a45d49}.metric-icon.amber{background:#f9efd6;color:#9a772e}.metric-icon.green{background:#dceee6;color:#3b745e}
.metric p,.metric small{margin:0;color:var(--muted);font-size:10px;display:block}.metric strong{font:600 25px "Manrope";margin-right:6px}
.admin-copy, .admin-only, .admin-dashboard, .admin-task { display: none; }
body.admin .employee-dashboard, body.admin .employee-task { display: none; } body.admin .admin-dashboard { display: grid; } body.admin .admin-only, body.admin .admin-copy { display: flex; } body.admin .admin-task { display: block; } body.admin .employee-copy { display: none; }

.calendar-panel { overflow: hidden; }
.calendar-toolbar { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:19px 22px;border-bottom:1px solid var(--line)}
.calendar-toolbar>div:last-child{justify-self:end}.calendar-toolbar h2{font:600 17px "Manrope";margin:0}.circle-btn,.today-btn{border:1px solid var(--line);background:white;padding:7px 11px}.circle-btn:first-child{border-radius:7px 0 0 7px}.circle-btn:nth-child(3){border-radius:0 7px 7px 0}.circle-btn:disabled{color:#bcc4c1;background:#f7f8f6;cursor:not-allowed}.today-btn{border-left:0;border-right:0;font-size:11px}.calendar-year{justify-self:end;text-align:right}.calendar-year span,.calendar-year strong{display:block}.calendar-year span{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}.calendar-year strong{font-size:12px;margin-top:2px}
.calendar-legend-bar{display:flex;gap:16px;align-items:center;padding:12px 22px;background:#fafbf9;border-bottom:1px solid var(--line);font-size:9px;color:var(--muted)}.calendar-legend-bar span{display:flex;align-items:center;gap:5px}.calendar-legend-bar small{margin-left:auto;color:#9aa6a2}
.year-calendar{background:#f5f6f2;padding:18px}
.month-section{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden;animation:monthFade .22s ease}.month-heading{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.month-heading h3{font:600 17px "Manrope";margin:0}.month-heading span{font-size:9px;color:var(--muted)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.month-weekday{padding:9px;text-align:right;background:#fafbf9;color:#8b9995;font-size:8px;font-weight:700;text-transform:uppercase;border-bottom:1px solid var(--line)}.month-day{min-height:105px;padding:7px;border-right:1px solid #edf0ed;border-bottom:1px solid #edf0ed;overflow:hidden}.month-day:nth-child(7n){border-right:0}.month-day.outside{background:#fafbf9;color:#bac2bf}.month-day.weekend{background:#fbfbf9}.month-day.today{box-shadow:inset 0 0 0 2px #6f9f90}.day-number{display:block;text-align:right;font-size:10px;font-weight:600;margin-bottom:5px}.today .day-number{color:var(--green);font-weight:800}.day-leave{display:block;border-radius:4px;padding:4px 5px;margin-top:3px;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#e1ecf5;color:#416883;border-left:2px solid var(--blue)}.day-leave.half{background:#ebe7f4;color:#62557b;border-color:var(--violet)}.day-leave.school{background:#fbf0d8;color:#806223;border-color:var(--amber)}.day-leave.office{background:#e2f0e9;color:#39725b;border-color:#82b99c}@keyframes monthFade{from{opacity:.35;transform:translateX(5px)}}
.request-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:20px;gap:24px}.request-tabs button{border:0;background:none;padding:10px 2px;color:var(--muted);font-weight:600}.request-tabs button.active{color:var(--green);border-bottom:2px solid var(--green)}.request-tabs span{background:#e6ece9;border-radius:99px;padding:2px 6px;font-size:9px}
.request-tabs i{font-style:normal}
.requests-layout{display:grid;grid-template-columns:360px 1fr;gap:20px}.request-list-panel{overflow:hidden}.request-row{padding:18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);cursor:pointer}.request-row.selected{background:#eff5f2;border-left:3px solid var(--green)}.request-row>div:nth-child(2){flex:1}.request-name{display:flex;justify-content:space-between;align-items:center}.request-row p,.request-row small{margin:4px 0 0;display:block}.request-row p{font-size:11px}.request-row small{font-size:9px;color:var(--muted)}
.request-detail{padding:28px}.detail-heading{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line);padding-bottom:21px}.person-avatar.large{width:48px;height:48px}.detail-heading div{flex:1}.detail-heading p{font-size:9px;letter-spacing:1px;color:var(--muted);margin:0}.detail-heading h2{font:600 18px "Manrope";margin:2px 0}.date-range{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;padding:24px;background:#fafaf8;border-radius:8px;margin:22px 0}.date-range div span,.date-range div strong{display:block}.date-range div span,.detail-grid span{font-size:9px;color:var(--muted);margin-bottom:5px}.date-range div strong{font-size:13px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.detail-grid div{border-bottom:1px solid #edf0ed;padding-bottom:12px}.detail-grid strong{font-size:12px;display:block}.good{color:#398064}.note{display:flex;gap:10px;background:#f5f6f3;padding:15px;margin:20px 0;border-radius:8px}.note span{font:30px Georgia;color:#aab6b2}.note p{font-size:11px;line-height:1.5;margin:0;color:#556863}.detail-actions{display:flex;justify-content:flex-end;gap:10px}
.empty-requests{min-height:330px;display:grid;place-items:center;text-align:center;padding:30px}.empty-requests span{width:50px;height:50px;border-radius:50%;background:var(--mint-light);display:grid;place-items:center;margin:0 auto 12px;font-size:22px}.empty-requests h3{font:600 15px "Manrope";margin-bottom:5px}.empty-requests p{color:var(--muted);font-size:10px;margin:0}.request-history{display:flex;align-items:center;gap:8px;background:#f5f7f5;border-radius:7px;padding:10px;margin-top:18px;color:var(--muted);font-size:9px}.request-history strong{color:var(--ink)}
.admin-feedback{background:#fff8ec;border:1px solid #f0dfbc;border-radius:8px;padding:14px;margin-top:18px}.admin-feedback label{display:grid;gap:7px;font-size:10px;font-weight:700;color:#715522}.admin-feedback textarea{background:white;min-height:72px}.admin-feedback p{color:#8b7550;font-size:9px;margin:0 0 10px}.readonly-notice{display:flex;gap:9px;align-items:center;background:#f3f6f4;color:var(--muted);border-radius:7px;padding:11px;margin-top:18px;font-size:9px}.readonly-notice strong{color:var(--ink)}
.employee-table-panel{overflow:hidden}.table-tools{display:flex;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}.search{border:1px solid var(--line);border-radius:7px;padding:8px 12px;color:var(--muted)}.search input{border:0;outline:0;margin-left:5px}.employee-table{overflow-x:auto}.table-row{min-width:880px;display:grid;grid-template-columns:1.6fr repeat(5,1fr) 40px;align-items:center;padding:13px 20px;border-bottom:1px solid #edf0ed;font-size:11px}.table-head{background:#fafbf9;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.6px}.table-row>span:first-child{display:flex;align-items:center;gap:9px}.table-row button{border:0;background:none}.editable{display:inline-block;background:#f1f5f3;border-radius:5px;padding:6px;width:50px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.settings-card{padding:24px;display:grid;gap:16px;align-content:start}.settings-card label{display:grid;gap:7px;font-size:11px;font-weight:700}.settings-card .primary{justify-self:start}.settings-heading{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:17px}.settings-heading h2{font:600 16px "Manrope";margin:0 0 4px}.settings-heading p{font-size:10px;color:var(--muted);margin:0}.settings-icon{width:39px;height:39px;border-radius:9px;background:var(--mint-light);display:grid;place-items:center;color:var(--green);font-weight:700}.workflow-rule{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #edf0ed;font-size:11px}.workflow-rule span{color:var(--muted)}.workflow-rule strong{text-align:right}.settings-admin{display:none}body.admin .settings-admin{display:grid}
dialog{border:0;border-radius:14px;padding:0;width:min(570px,calc(100% - 28px));box-shadow:0 25px 70px rgba(19,48,43,.25);color:var(--ink)}dialog::backdrop{background:rgba(15,38,34,.58);backdrop-filter:blur(2px)}.dialog-header{display:flex;justify-content:space-between;padding:24px 27px;border-bottom:1px solid var(--line)}.dialog-header h2{font:600 21px "Manrope";margin:0}.close-dialog{border:0;background:none;font-size:25px;color:#81908c}.dialog-body{padding:23px 27px;display:grid;gap:16px}.dialog-body label{display:grid;gap:6px;font-size:11px;font-weight:700}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}input,select,textarea{border:1px solid #dce2de;border-radius:7px;padding:10px;background:white;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:#78a397;box-shadow:0 0 0 3px #e7f1ed}textarea{min-height:65px;resize:vertical}.duration-preview{display:flex;gap:11px;background:#eff6f3;padding:12px;border-radius:7px}.duration-preview strong,.duration-preview p{display:block;margin:0}.duration-preview strong{font-size:11px}.duration-preview p{font-size:9px;color:var(--muted);margin-top:2px}.conflict-hint{display:none;gap:10px;background:#fff4e5;color:#805d24;border:1px solid #f0d9ac;padding:11px;border-radius:7px}.conflict-hint.show{display:flex}.conflict-hint span{font-weight:700}.conflict-hint p{font-size:9px;margin:0}.conflict-hint strong{display:block;font-size:10px}.dialog-footer{display:flex;justify-content:flex-end;gap:10px;padding:18px 27px;background:#fafbf9;border-top:1px solid var(--line)}
.toast{position:fixed;z-index:50;right:25px;bottom:25px;background:#173f3a;color:white;border-radius:10px;padding:14px 18px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);transform:translateY(120px);opacity:0;transition:.3s}.toast.show{transform:none;opacity:1}.toast>span{background:#8fc3ad;width:25px;height:25px;border-radius:50%;display:grid;place-items:center}.toast strong,.toast p{display:block;margin:0}.toast strong{font-size:11px}.toast p{font-size:9px;color:#bfd1cc;margin-top:2px}
@media(max-width:1100px){.section-grid{grid-template-columns:1fr}.employee-dashboard{grid-template-columns:1fr}.requests-layout{grid-template-columns:1fr}.request-list-panel{display:grid;grid-template-columns:1fr 1fr}.admin-dashboard{grid-template-columns:1fr!important}}
@media(max-width:760px){.login-screen{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-panel{padding:55px 22px}.mobile-login-brand{display:block;color:var(--green);font:700 24px "Manrope";margin-bottom:35px}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.main{margin-left:0;width:100%}.topbar{padding:0 17px}.mobile-menu{display:block}.role-switch{margin:0}.role-switch button{padding:7px 8px}.top-actions .compact{display:none}.content{padding:28px 17px}.page-heading{align-items:start}.page-heading>.primary{display:none}.heading-actions .open-request{display:none}.heading-actions .secondary{padding:9px}.page-heading:has(.heading-actions){gap:12px}h1{font-size:25px}.balance-details{grid-template-columns:1fr 1fr}.section-grid{display:block}.tasks-panel{margin-top:16px}.week-panel{overflow-x:auto}.week-strip{min-width:650px}.legend{display:none}.admin-dashboard{grid-template-columns:1fr}.requests-layout{display:block}.request-list-panel{display:block;margin-bottom:15px}.request-detail{padding:20px}.date-range{grid-template-columns:1fr}.date-range>span{display:none}.detail-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.calendar-toolbar{grid-template-columns:1fr auto}.calendar-toolbar h2{grid-row:1;grid-column:2}.calendar-year{display:none}.calendar-legend-bar small{display:none}.year-calendar{padding:8px}.month-day{min-height:68px;padding:4px}.month-weekday{padding:6px 3px}.day-leave{font-size:0;padding:3px;height:8px}.day-number{font-size:9px}}