@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --ink:#17223b; --muted:#71809b; --line:#e6eaf2; --page:#f6f8fc; --card:#fff; --blue:#2563eb; --blue-50:#edf4ff; --violet:#7c55e6; --violet-50:#f3efff; --amber:#d68b19; --amber-50:#fff6df; --teal:#148777; --teal-50:#e9faf7; --rose:#db5d7d; --nav:#111d36; --nav-muted:#afbad0; --danger:#cc4b59; --shadow:0 12px 36px rgba(31, 49, 88, .07); }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink); font:14px/1.45 'DM Sans', Arial, sans-serif; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:256px; background:var(--nav); color:#fff; display:flex; flex-direction:column; flex:0 0 auto; padding:25px 14px 16px; position:fixed; inset:0 auto 0 0; z-index:20; }
.brand { display:flex; align-items:center; gap:8px; padding:0 13px; font:700 23px/1 'Manrope', sans-serif; letter-spacing:-1.1px; }
.brand-mark { height:29px; width:29px; background:#4d7cff; color:#fff; border-radius:9px; display:grid; place-items:center; font:800 20px/1 'Manrope', sans-serif; letter-spacing:-2px; padding-right:3px; }
.brand-dot { color:#75a1ff; }
.workspace { display:flex; align-items:center; gap:10px; margin:31px 4px 27px; padding:10px 9px; border:1px solid rgba(187,205,246,.14); border-radius:11px; background:rgba(255,255,255,.045); }
.workspace-mini { display:grid; place-items:center; width:29px; height:29px; color:#111d36; background:#f6c75c; border-radius:8px; font-weight:800; }
.workspace span:nth-child(2) { display:grid; line-height:1.2; flex:1; }
.workspace strong { font-size:12.5px; }.workspace small { color:var(--nav-muted); font-size:10px; margin-top:2px; }.workspace-chevron { color:var(--nav-muted); font-size:17px; }
.primary-nav { display:grid; gap:4px; }.nav-item { width:100%; border:0; color:var(--nav-muted); background:transparent; display:flex; align-items:center; gap:12px; min-height:42px; padding:0 12px; border-radius:9px; text-align:left; font-weight:500; transition:.16s ease; }.nav-item svg { width:18px; height:18px; }.nav-item:hover { color:#fff; background:rgba(255,255,255,.08); }.nav-item.active { background:#294374; color:#fff; box-shadow:inset 3px 0 #6e9afe; }.nav-badge { margin-left:auto; display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; background:#f5bd45; color:#3d2b08; border-radius:10px; font-size:10px; }
.sidebar-bottom { margin-top:auto; border-top:1px solid rgba(255,255,255,.1); padding-top:12px; }.profile-card { position:relative; margin-top:10px; }.profile-button { width:100%; display:flex; align-items:center; gap:10px; border:0; background:transparent; color:#fff; padding:8px; border-radius:9px; text-align:left; }.profile-button:hover { background:rgba(255,255,255,.07); }.profile-button span:nth-child(2) { display:grid; flex:1; }.profile-button strong { font-size:12px; }.profile-button small { color:var(--nav-muted); font-size:10.5px; }.profile-dots { color:var(--nav-muted); letter-spacing:1px; }.profile-menu { display:none; position:absolute; left:0; right:0; bottom:50px; z-index:30; padding:6px; border-radius:10px; background:#fff; box-shadow:0 10px 25px rgba(0,0,0,.25); }.profile-menu.show { display:grid; }.profile-menu button { border:0; border-radius:6px; background:transparent; padding:9px; color:var(--ink); text-align:left; font-size:12px; }.profile-menu button:hover { background:#f2f5fb; }
.main-area { width:calc(100% - 256px); margin-left:256px; min-height:100vh; }.topbar { height:70px; display:flex; align-items:center; padding:0 40px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.72); backdrop-filter:blur(10px); position:sticky; top:0; z-index:10; }.topbar-spacer { flex:1; }.icon-button,.top-avatar,.more-button { border:0; background:transparent; color:#64728a; display:grid; place-items:center; }.icon-button { width:36px; height:36px; border-radius:8px; }.icon-button:hover { background:#edf1f8; color:var(--ink); }.notification-button { position:relative; margin-right:16px; }.notification-button i { position:absolute; top:4px; right:3px; min-width:16px; height:16px; padding:0 4px; display:grid; place-items:center; border-radius:10px; background:#ed5d70; color:white; font:700 9px/1 'DM Sans'; font-style:normal; border:2px solid white; }.top-avatar { padding:0; }.install-button { border:1px solid #cdd8ee; background:#fff; color:#315db6; border-radius:8px; padding:7px 11px; font-size:12px; font-weight:700; margin-right:16px; }.install-button.hidden { display:none; }.mobile-menu { display:none; }
.page-content { max-width:1450px; margin:0 auto; padding:42px 42px 60px; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; }.eyebrow { margin:0 0 7px; color:#6881b9; font:700 10px/1.2 'Manrope'; letter-spacing:1.3px; text-transform:uppercase; }.page-heading h1 { margin:0; font:700 29px/1.15 'Manrope', sans-serif; letter-spacing:-.9px; }.heading-text { color:var(--muted); margin:8px 0 0; }.heading-actions { display:flex; gap:10px; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 15px; border-radius:8px; font-weight:700; font-size:12.5px; border:1px solid transparent; transition:transform .15s, box-shadow .15s, background .15s; }.button svg { width:17px; height:17px; }.button:hover { transform:translateY(-1px); }.button.primary { background:var(--blue); color:#fff; box-shadow:0 5px 12px rgba(37,99,235,.2); }.button.primary:hover { background:#1d55d0; }.button.secondary,.secondary-button { background:#fff; border-color:#d8e0ed; color:#344460; }.button.ghost { background:transparent; border-color:#d9e1ef; color:#52627d; }.button.small { min-height:33px; padding:0 10px; font-size:11.5px; }.wide { width:100%; }.text-button { display:inline-flex; align-items:center; gap:5px; color:#3567c4; background:none; border:0; font-weight:700; font-size:11.5px; padding:4px; }.text-button svg { width:15px; height:15px; }.row-action { border:0; background:transparent; color:#5470a9; font-weight:700; font-size:11px; padding:5px; }.row-action:hover { color:var(--blue); text-decoration:underline; }
.metrics-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:18px; }.metric-card,.card { background:var(--card); border:1px solid #e9edf4; box-shadow:var(--shadow); border-radius:12px; }.metric-card { display:flex; align-items:flex-start; gap:12px; padding:19px; min-height:129px; }.metric-icon,.toggle-icon,.summary-icon { width:37px; height:37px; border-radius:10px; display:grid; place-items:center; }.metric-icon svg { width:19px; }.blue-soft { background:var(--blue-50); color:#386de6; }.violet-soft { background:var(--violet-50); color:var(--violet); }.amber-soft { background:var(--amber-50); color:var(--amber); }.teal-soft { background:var(--teal-50); color:var(--teal); }.metric-card p { margin:0 0 4px; color:var(--muted); font-size:11.5px; }.metric-card strong { display:block; font:800 25px/1.1 'Manrope'; letter-spacing:-1px; }.metric-card strong small { font-size:12px; letter-spacing:0; }.metric-card .metric-date { font-size:20px; }.metric-note { display:block; font-size:10.5px; color:#8390a6; margin-top:6px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:18px; }.lower-grid { margin-top:18px; }.card { padding:20px; }.card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:18px; }.card-heading h2 { margin:0; font:700 15px/1.25 'Manrope'; letter-spacing:-.3px; }.card-heading p { margin:4px 0 0; color:var(--muted); font-size:11px; }.leave-highlight { min-height:127px; padding:16px; border-radius:10px; background:linear-gradient(105deg,#eef4ff 0%,#f8fbff 68%,#ebf5ff); border:1px solid #dce8fc; display:flex; align-items:center; gap:14px; overflow:hidden; }.leave-date-block { width:50px; height:62px; display:grid; align-content:center; text-align:center; border-radius:8px; background:#fff; color:#3664c9; box-shadow:0 4px 12px rgba(35,84,174,.1); }.leave-date-block span { font:800 22px/1 'Manrope'; }.leave-date-block small { text-transform:uppercase; font-size:9px; font-weight:700; margin-top:3px; }.leave-info { flex:1; z-index:1; }.leave-info>div { display:flex; gap:8px; align-items:center; }.leave-type { color:#66758e; font-size:10.5px; }.leave-info h3 { margin:7px 0 3px; font:700 15px/1.3 'Manrope'; letter-spacing:-.2px; }.leave-info p { margin:0; color:#66758e; font-size:10.7px; }.leave-illustration { color:#f7be36; font-size:62px; transform:rotate(-12deg); opacity:.9; margin-right:-5px; }.status { display:inline-flex; align-items:center; gap:4px; padding:3px 7px; border-radius:5px; white-space:nowrap; font-size:9.8px; font-weight:700; }.status svg { width:12px; height:12px; }.status.approved { color:#16816f; background:#e7f8f3; }.status.pending { color:#a76b0d; background:#fff5de; }.status.rejected,.status.cancelled { color:#bf4b5a; background:#fdecf0; }.mini-details { display:flex; gap:24px; padding:15px 2px 0; color:#63718a; font-size:10.5px; }.mini-details span { display:flex; align-items:center; gap:5px; }.mini-details svg { width:15px; height:15px; color:#7b8da9; }.mini-details b { color:#32405a; margin-right:2px; }.absence-list { display:grid; }.absence-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #edf0f5; }.absence-row:last-child { border-bottom:0; padding-bottom:0; }.absence-row>div { display:grid; flex:1; }.absence-row strong { font-size:11.5px; }.absence-row span { color:#8792a7; font-size:10px; }.absence-row time { color:#65728a; font-size:10px; text-align:right; }.avatar { width:29px; height:29px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font:700 9.5px/1 'Manrope'; }.avatar.large { width:42px; height:42px; font-size:12px; }.avatar.tiny { display:inline-grid; width:17px; height:17px; font-size:6px; vertical-align:middle; margin-right:3px; }.avatar.blue { background:#e0ebff; color:#285ec5; }.avatar.violet { background:#eee7ff; color:#7051cd; }.avatar.rose { background:#ffe5ec; color:#b74d68; }.avatar.amber { background:#fff0d0; color:#b47818; }.avatar.teal { background:#ddf8f3; color:#177d70; }.avatar.slate { background:#e8ecf3; color:#536177; }.avatar.coral { background:#ffe9df; color:#bd6647; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th { padding:0 7px 9px; color:#8290a7; font-size:9.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; } td { padding:11px 7px; color:#68758b; font-size:11px; border-top:1px solid #edf0f5; white-space:nowrap; } td b { color:#34425a; font-weight:700; }.requests-card { min-width:0; }.quick-rows { display:grid; gap:14px; }.quick-rows>div { display:flex; align-items:center; gap:10px; }.quick-rows>div>svg { width:28px; height:28px; border-radius:8px; padding:6px; background:#f1f5fb; color:#5375b6; }.quick-rows span { display:grid; flex:1; }.quick-rows strong { font-size:11px; }.quick-rows small { color:#8994a8; font-size:10px; margin-top:2px; }.dot-ok { width:7px; height:7px; border-radius:50%; background:#31b795; }.secondary-button { height:34px; border-radius:7px; font-size:11px; font-weight:700; }
.request-layout { display:grid; grid-template-columns:minmax(0,1fr) 266px; gap:18px; align-items:start; }.form-card { padding:0; overflow:hidden; }.form-section { padding:25px 28px; border-bottom:1px solid #edf0f5; }.form-section h2 { margin:0; font:700 16px/1.25 'Manrope'; letter-spacing:-.35px; }.form-section>p,.section-title-line p { margin:5px 0 19px; color:#7a879e; font-size:11.5px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } label,.full-label { display:grid; gap:7px; color:#4c5b73; font-size:11px; font-weight:700; } label span { color:#96a0b0; font-weight:500; } input[type=date],input[type=email],input[type=password],select,textarea { width:100%; border:1px solid #dce3ee; border-radius:7px; color:#2c3d58; background:#fff; outline:none; min-height:39px; padding:8px 10px; font-size:12px; transition:border .15s, box-shadow .15s; } select { appearance:auto; } textarea { min-height:auto; resize:vertical; line-height:1.55; } input:focus,select:focus,textarea:focus { border-color:#759ff0; box-shadow:0 0 0 3px rgba(76,128,231,.11); }.workdays-box { margin-top:17px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; background:#f3f7ff; }.workdays-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:7px; color:#bd7a13; background:#fff0cb; }.workdays-box span:last-child { display:grid; }.workdays-box strong { color:#3d5686; font-size:11.5px; }.workdays-box small { color:#8290aa; font-size:10.5px; }.toggle-list { display:grid; gap:8px; }.toggle-row { min-height:58px; display:flex; align-items:center; gap:11px; padding:8px 0; cursor:pointer; }.toggle-row>span:nth-child(2) { display:grid; flex:1; }.toggle-row strong { color:#37465e; font-size:11.5px; }.toggle-row small { color:#8893a8; font-size:10.5px; margin-top:2px; font-weight:400; }.toggle-row input { position:absolute; opacity:0; pointer-events:none; }.toggle-row>i { width:32px; height:18px; background:#c9d2e0; border-radius:20px; position:relative; transition:.18s; }.toggle-row>i:after { content:''; position:absolute; top:3px; left:3px; width:12px; height:12px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.18s; }.toggle-row input:checked + i { background:#4a79db; }.toggle-row input:checked + i:after { transform:translateX(14px); }.section-title-line { display:flex; justify-content:space-between; gap:10px; }.provider-pill { align-self:start; display:inline-flex; align-items:center; gap:5px; color:#647aa2; border:1px solid #d9e4f5; border-radius:15px; padding:4px 7px; font-size:9.5px; font-weight:700; }.provider-pill svg { width:12px; }.checkbox-label { display:flex; align-items:center; gap:8px; margin-top:12px; color:#68758e; font-size:10.5px; font-weight:500; }.checkbox-label input { width:14px; height:14px; accent-color:var(--blue); }.form-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 28px; background:#fbfcfe; color:#8390a4; font-size:10.5px; }.form-footer>span { display:flex; align-items:center; gap:6px; }.form-footer svg { width:14px; }.request-side { display:grid; gap:14px; }.help-card { padding:20px; border-radius:12px; background:linear-gradient(145deg,#273f71,#172848); color:#fff; box-shadow:0 10px 24px rgba(17,39,79,.17); }.help-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; background:#769af2; color:#eaf0ff; margin-bottom:15px; }.help-card h3 { margin:0; font:700 15px 'Manrope'; }.help-card p { color:#c3d0e8; font-size:11px; line-height:1.55; }.help-card ul { display:grid; gap:8px; margin:17px 0 0; padding:12px 0 0; border-top:1px solid rgba(255,255,255,.16); list-style:none; color:#d4def1; font-size:10px; }.help-card li:before { content:'✓'; color:#7bb0ff; font-weight:800; margin-right:7px; }.security-note { padding:15px; display:flex; gap:10px; color:#73819a; font-size:10px; }.security-note svg { color:#4b79db; width:21px; height:21px; }.security-note span { display:grid; }.security-note strong { color:#465670; font-size:10.5px; margin-bottom:2px; }
.calendar-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:18px; align-items:start; }.calendar-card { padding:0; overflow:hidden; }.calendar-toolbar { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #edf0f5; }.month-controls { display:flex; align-items:center; gap:4px; }.month-controls h2 { margin:0 10px; font:700 16px 'Manrope'; text-transform:capitalize; }.today-button,.filter-button { border:1px solid #dce4f0; background:#fff; color:#5e6e87; border-radius:7px; min-height:31px; padding:0 9px; font-size:10.5px; font-weight:700; }.today-button { margin-left:8px; }.calendar-filters { display:flex; gap:7px; }.filter-button { display:inline-flex; align-items:center; gap:5px; }.filter-button svg { width:14px; }.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); }.calendar-weekdays { padding:12px 0 6px; background:#fbfcfe; }.calendar-weekdays span { text-align:center; color:#8a96aa; font-size:9.5px; font-weight:700; text-transform:uppercase; }.calendar-day { min-height:83px; padding:7px; border-top:1px solid #edf0f5; border-right:1px solid #edf0f5; background:#fff; }.calendar-day:nth-child(7n) { border-right:0; }.calendar-day time { display:grid; place-items:center; width:21px; height:21px; color:#66748b; border-radius:50%; font-size:10px; font-weight:700; }.calendar-day.today time { background:var(--blue); color:#fff; }.calendar-day.muted { background:#fcfdff; }.calendar-day.muted time { color:#bdc6d4; }.day-events { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }.calendar-event { display:grid; place-items:center; width:20px; height:20px; border-radius:5px; font:700 7px/1 'Manrope'; }.calendar-event.blue { background:#dbe8ff;color:#265cbc; }.calendar-event.violet { background:#eee8ff;color:#7052cc; }.calendar-event.rose { background:#ffe5ec;color:#b94b68; }.calendar-event.amber { background:#fff0d3;color:#ad7011; }.calendar-event.teal { background:#ddf8f3;color:#167d70; }.calendar-event.slate { background:#e8ecf3;color:#536177; }.calendar-event.coral { background:#ffe9df;color:#bd6647; }.more-events { font-size:8px; color:#71829c; align-self:center; }.calendar-legend { display:flex; gap:16px; padding:13px 20px; border-top:1px solid #edf0f5; color:#78869d; font-size:10px; }.legend-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; }.legend-dot.blue { background:#5482e3; }.legend-dot.amber { background:#dfa138; }.legend-dot.violet { background:#8968e7; }.calendar-side { display:grid; gap:18px; }.side-list-card { padding:18px; }.upcoming-list { display:grid; }.upcoming-person { display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid #edf0f5; }.upcoming-person:last-child { border:0; }.upcoming-person>div { display:grid; flex:1; }.upcoming-person strong { font-size:10.8px; }.upcoming-person span { color:#8994a9; font-size:9.5px; }.upcoming-person time { color:#68778f; text-align:right; font-size:9.5px; line-height:1.45; }.availability-card { padding:18px; background:linear-gradient(155deg,#f8fbff,#eef5ff); border-color:#dfeafb; }.availability-top { display:flex; gap:10px; align-items:center; }.availability-top>span { display:grid; place-items:center; width:32px; height:32px; background:#dceaff; color:#3a6cd1; border-radius:8px; }.availability-top span svg { width:17px; }.availability-top div { display:grid; }.availability-top strong { font-size:11px; }.availability-top small { color:#8795aa; font-size:9.5px; }.availability-number { display:flex; align-items:baseline; gap:6px; margin:20px 0 8px; }.availability-number b { font:800 27px/1 'Manrope'; color:#2d569e; }.availability-number span { color:#7283a2; font-size:10px; }.availability-track { height:6px; background:#d7e1f0; border-radius:4px; overflow:hidden; }.availability-track i { display:block; height:100%; width:92%; background:#4b7ee3; border-radius:4px; }.availability-card p { margin:9px 0 0; color:#7485a2; font-size:9.5px; }
.approvals-card { padding:0; overflow:hidden; }.filter-tabs { display:flex; align-items:center; gap:4px; padding:13px 18px; border-bottom:1px solid #edf0f5; }.filter-tabs>button { border:0; background:transparent; color:#7d8a9f; padding:8px 9px; font-size:11px; font-weight:700; border-radius:6px; }.filter-tabs>button.active { color:#2b5eba; background:#edf3ff; }.filter-tabs b { margin-left:3px; font-size:9px; }.table-search { margin-left:auto; height:31px; display:flex; align-items:center; gap:6px; padding:0 9px; border:1px solid #e1e7f1; border-radius:7px; color:#91a0b5; }.table-search svg { width:14px; }.table-search input { padding:0; min-height:auto; border:0; width:110px; font-size:10.5px; }.table-search input:focus { box-shadow:none; }.approval-list { display:grid; }.approval-item { display:grid; grid-template-columns:1.1fr 1fr .9fr auto; align-items:center; gap:20px; padding:19px 22px; border-bottom:1px solid #edf0f5; }.approval-item:last-child { border-bottom:0; }.approval-user { display:flex; align-items:center; gap:11px; }.approval-user h3 { margin:0; font:700 12.5px 'Manrope'; }.approval-user p { margin:3px 0 0; color:#8b97aa; font-size:10px; }.approval-details { display:grid; justify-items:start; gap:4px; }.approval-details strong { font-size:11px; }.approval-details small { color:#8591a7; font-size:9.5px; }.replacement-detail { display:grid; gap:4px; color:#56657d; font-size:10px; }.replacement-detail small { color:#98a2b2; font-size:9.5px; }.approval-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; }.overlap-warning { color:#a56d19; font-size:9px; font-weight:700; }.empty-state { display:grid; place-items:center; padding:23px; text-align:center; color:#8793a6; font-size:11px; }.empty-state.large { padding:58px 20px; }.empty-state.large svg { color:#36a585; width:38px; height:38px; margin-bottom:10px; }.empty-state h3 { margin:0; color:#43516a; font:700 15px 'Manrope'; }.empty-state p { margin:5px 0 0; }.policy-card { display:flex; align-items:center; gap:12px; margin-top:17px; padding:14px 17px; border:1px solid #dae5f7; border-radius:10px; background:#f4f8ff; color:#60708a; }.policy-card>svg { width:22px; height:22px; color:#5080d9; }.policy-card>div { flex:1; }.policy-card strong { color:#3d557c; font-size:11px; }.policy-card p { margin:2px 0 0; font-size:10px; }.policy-card button { border:0; background:transparent; color:#4674ce; font-weight:700; font-size:10.5px; }
.team-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-bottom:18px; }.team-summary article { display:flex; align-items:center; gap:11px; padding:16px; border:1px solid #e7ecf3; background:#fff; border-radius:10px; }.summary-icon { width:35px; height:35px; }.team-summary div { display:grid; }.team-summary b { font:800 18px/1.05 'Manrope'; }.team-summary small { color:#8793a7; font-size:10px; margin-top:3px; }.people-card { padding:0; overflow:hidden; }.people-toolbar { display:flex; gap:9px; padding:15px 18px; border-bottom:1px solid #edf0f5; }.table-search.big { margin-right:auto; width:260px; }.people-table td { padding:12px 8px; }.person-cell { display:flex; align-items:center; gap:9px; }.person-cell span { display:grid; }.person-cell b { font-size:11px; }.person-cell small { color:#909bad; font-size:9.5px; margin-top:2px; }.availability-status { color:#358671; font-size:10.5px; }.availability-status i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#38b28f; margin-right:4px; }.more-button { width:28px; height:28px; }.more-button svg { stroke:none; }
.report-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:18px; }.report-metrics .card { padding:18px; }.report-metrics p { margin:0; color:#7c899e; font-size:10.5px; }.report-metrics b { display:block; margin:6px 0; font:800 23px/1.1 'Manrope'; }.up-change,.neutral-change { font-size:9.5px; }.up-change { color:#21876f; }.neutral-change { color:#8290a5; }.report-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; }.bar-chart { height:213px; display:flex; align-items:end; justify-content:space-around; gap:14px; padding:22px 10px 0; border-bottom:1px solid #e8edf4; background:repeating-linear-gradient(to bottom,transparent 0,transparent 52px,#eef1f6 53px); }.bar-col { height:100%; display:flex; flex:1; max-width:42px; flex-direction:column; align-items:center; justify-content:end; gap:8px; }.bar-col span { width:100%; border-radius:5px 5px 1px 1px; background:linear-gradient(#6590ea,#376ad0); }.bar-col:nth-child(6) span { background:linear-gradient(#9bb5f3,#3569d0); }.bar-col small { color:#8491a6; font-size:9.5px; }.department-chart { padding:20px; }.department-bar { display:grid; grid-template-columns:80px 1fr 24px; gap:8px; align-items:center; margin:16px 0; font-size:10px; }.department-bar span { color:#65748c; }.department-bar i { display:block; height:7px; border-radius:5px; background:#edf1f6; overflow:hidden; }.department-bar i b { display:block; height:100%; border-radius:5px; background:#759be8; }.department-bar strong { color:#4f5f78; text-align:right; font-size:10px; }.report-table-card { margin-top:18px; }
.settings-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; align-items:start; }.settings-nav { display:grid; gap:4px; }.settings-nav button { border:0; background:transparent; color:#71809a; text-align:left; padding:10px 12px; border-radius:7px; font-weight:700; font-size:11px; }.settings-nav button.active { background:#eaf1ff; color:#3164c5; }.settings-card { padding:0; }.settings-section { padding:25px 28px; border-bottom:1px solid #edf0f5; }.settings-section h2 { margin:0; font:700 16px 'Manrope'; }.settings-section>p { margin:5px 0 18px; color:#7d899e; font-size:11px; }.integration-status { display:flex; align-items:center; gap:10px; margin-top:13px; padding:10px; border-radius:8px; background:#f7fafc; color:#738098; font-size:10px; }.integration-status>span:nth-child(2) { flex:1; }.rule-box { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #e3e9f3; border-radius:8px; }.rule-box>span { display:grid; place-items:center; width:30px; height:30px; border-radius:7px; background:#eff4ff; color:#527cd3; }.rule-box>span svg { width:16px; }.rule-box>div { display:grid; flex:1; }.rule-box strong { font-size:11px; }.rule-box small { color:#8a96aa; font-size:9.5px; }.settings-footer { display:flex; justify-content:space-between; align-items:center; padding:16px 28px; background:#fcfdff; }.settings-help { color:#8794aa; font-size:10px; }.restricted-card { display:grid; justify-items:start; max-width:560px; padding:28px; }.restricted-card>svg { width:31px; height:31px; color:#4d79d7; background:#edf3ff; border-radius:9px; padding:7px; }.restricted-card h2 { margin:14px 0 5px; font:700 17px 'Manrope'; }.restricted-card p { margin:0 0 16px; color:#768399; font-size:11.5px; line-height:1.6; }
.notifications-card { padding:0; overflow:hidden; }.notification-row { width:100%; display:grid; grid-template-columns:38px 1fr auto 8px; align-items:center; gap:11px; padding:17px 20px; text-align:left; border:0; border-bottom:1px solid #edf0f5; background:#fff; color:var(--ink); }.notification-row:hover { background:#fafcff; }.notification-row.unread { background:#f6f9ff; }.notification-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:#4c79d4; background:#e7efff; }.notification-icon svg { width:17px; }.notification-row span:nth-child(2) { display:grid; }.notification-row strong { font-size:11.5px; }.notification-row p { color:#7c899e; margin:2px 0 0; font-size:10.5px; }.notification-row time { color:#92a0b4; font-size:10px; }.notification-row>i { width:6px; height:6px; border-radius:50%; background:#4274d8; }
.toast-region { position:fixed; right:24px; bottom:24px; z-index:100; display:grid; gap:10px; }.toast { display:flex; align-items:center; gap:9px; min-width:270px; max-width:360px; padding:12px 14px; border-radius:9px; box-shadow:0 10px 28px rgba(26,42,75,.18); background:#1d3157; color:#fff; font-size:11.5px; animation:slide-in .25s ease-out; }.toast svg { width:18px; color:#83e3c9; }.toast.warning svg { color:#ffd078; }.toast.warning { background:#564226; }@keyframes slide-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(460px,1fr) minmax(370px,.8fr); background:#fff; }.login-card { width:min(392px, calc(100% - 40px)); align-self:center; justify-self:center; }.brand.centered { padding:0; margin-bottom:40px; }.login-card h1 { margin:0; font:800 30px/1.15 'Manrope'; letter-spacing:-1px; }.login-card>p:not(.eyebrow) { color:#77849a; font-size:12px; line-height:1.6; margin:10px 0 26px; }.login-card form { display:grid; gap:15px; }.login-card label { font-size:11px; }.login-card input { min-height:42px; }.login-divider { height:1px; background:#e7ebf2; margin:23px 0; position:relative; }.login-divider span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:0 10px; background:#fff; color:#9aa5b6; font-size:10px; }.sso-button { width:100%; min-height:40px; border:1px solid #dce3ee; background:#fff; border-radius:8px; color:#475772; font-weight:700; font-size:12px; }.login-card>small { display:block; margin-top:23px; text-align:center; color:#9ba5b5; font-size:9.5px; }.login-aside { padding:70px; display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 88% 20%,rgba(103,144,252,.65),transparent 24%),linear-gradient(140deg,#274a90,#15294f); color:#fff; overflow:hidden; }.aside-mark { display:grid; place-items:center; width:36px; height:36px; background:rgba(255,255,255,.15); border-radius:10px; color:#c9d9ff; }.login-aside h2 { max-width:370px; margin:20px 0 9px; font:800 33px/1.17 'Manrope'; letter-spacing:-1.2px; }.login-aside p { max-width:335px; color:#cbd8f3; font-size:13px; }.login-preview { max-width:380px; padding:20px; border:1px solid rgba(255,255,255,.16); border-radius:13px; background:rgba(10,27,63,.24); backdrop-filter:blur(8px); display:grid; }.login-preview>span { color:#c7d6f4; font-size:11px; }.login-preview b { margin:4px 0 11px; font:800 31px/1 'Manrope'; }.login-preview i { display:block; height:8px; border-radius:5px; background:rgba(255,255,255,.18); overflow:hidden; }.login-preview em { display:block; width:92%; height:100%; border-radius:5px; background:#84a9ff; }.login-preview small { color:#cbd7ee; font-size:10px; margin-top:10px; }
.mobile-backdrop { display:none; }
@media (max-width:1150px) { .metrics-grid { grid-template-columns:repeat(2,1fr); }.request-layout { grid-template-columns:1fr; }.request-side { grid-template-columns:1fr 1fr; }.calendar-layout { grid-template-columns:1fr; }.calendar-side { grid-template-columns:1fr 1fr; }.approval-item { grid-template-columns:1fr 1fr; }.approval-actions { justify-content:flex-start; }.settings-layout { grid-template-columns:165px 1fr; } }
@media (max-width:800px) { .sidebar { transform:translateX(-100%); transition:transform .2s ease; box-shadow:8px 0 25px rgba(15,26,51,.2); }.sidebar-open .sidebar { transform:translateX(0); }.sidebar-open .mobile-backdrop { display:block; position:fixed; z-index:15; inset:0; background:rgba(12,25,52,.35); }.main-area { width:100%; margin-left:0; }.topbar { height:60px; padding:0 18px; }.mobile-menu { display:grid; }.page-content { padding:27px 18px 40px; }.page-heading { align-items:flex-start; flex-direction:column; margin-bottom:20px; }.page-heading h1 { font-size:25px; }.heading-actions { width:100%; }.dashboard-grid,.lower-grid,.report-grid { grid-template-columns:1fr; }.request-side,.calendar-side { grid-template-columns:1fr; }.calendar-filters { display:none; }.calendar-day { min-height:62px; padding:4px; }.calendar-event { width:17px; height:17px; font-size:6px; }.calendar-legend { gap:8px; font-size:8.5px; padding:10px; }.approval-item { grid-template-columns:1fr; gap:11px; }.filter-tabs { flex-wrap:wrap; }.table-search { margin-left:0; }.team-summary,.report-metrics { grid-template-columns:1fr 1fr; }.settings-layout { grid-template-columns:1fr; }.settings-nav { grid-auto-flow:column; grid-auto-columns:max-content; overflow:auto; padding-bottom:3px; }.login-page { grid-template-columns:1fr; }.login-aside { display:none; }.login-card { padding:45px 0; }.form-section { padding:21px 18px; }.form-footer,.settings-footer { padding:14px 18px; align-items:flex-start; flex-direction:column; }.form-footer .button { width:100%; }.mini-details { flex-direction:column; gap:7px; }.leave-illustration { font-size:46px; }.topbar .install-button { display:none; } }
@media (max-width:480px) { .metrics-grid,.team-summary,.report-metrics,.form-grid { grid-template-columns:1fr; }.page-heading h1 { font-size:23px; }.card { padding:16px; }.upcoming-card { padding:16px; }.leave-highlight { padding:11px; }.leave-info h3 { font-size:12.5px; }.leave-info p { font-size:9.5px; }.calendar-toolbar { padding:12px; }.month-controls h2 { font-size:13px; margin:0 3px; }.today-button { display:none; }.calendar-day { min-height:50px; }.day-events { gap:1px; margin-top:3px; }.calendar-event { width:14px; height:14px; font-size:5px; }.calendar-weekdays span { font-size:8px; }.topbar { padding:0 12px; }.notification-button { margin-right:8px; }.integration-status { align-items:flex-start; flex-wrap:wrap; }.integration-status>span:nth-child(2) { flex-basis:100%; }.people-toolbar { flex-wrap:wrap; }.table-search.big { width:100%; }.notification-row { grid-template-columns:34px 1fr 6px; padding:14px; }.notification-row time { display:none; } }