:root {
  --forest-950:#031a14; --forest-900:#07271d; --forest-850:#0a3024; --forest-800:#0e3c2c;
  --forest-700:#17523b; --forest-600:#286c4c; --forest-500:#4e8d64;
  --leaf:#9dcc6d; --leaf-soft:#e8f3dd; --paper:#f5f4ef; --card:#fff;
  --ink:#14241d; --muted:#5f6e66; --line:#d8dfd7; --danger:#b93630; --danger-soft:#fbecea;
  --amber:#b47b2d; --amber-soft:#fff4df; --blue:#3f7296; --blue-soft:#e8f1f7;
  --shadow:0 18px 50px rgba(22,49,35,.09); --shadow-deep:0 26px 75px rgba(2,24,16,.24);
  --sidebar:270px; --radius:22px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --paper:#041710; --card:#0e3025; --ink:#f3faf5; --muted:#b5c5bc; --line:#3b5d50;
  --leaf:#acd879; --leaf-soft:#1c4735; --danger:#f08f88; --danger-soft:#452724; --amber:#e6b75e; --amber-soft:#483a1e; --blue:#8cc2e2; --blue-soft:#193e4d;
  --shadow:0 18px 50px rgba(0,8,5,.28); --shadow-deep:0 28px 80px rgba(0,7,4,.54);
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { min-height:100%; color-scheme:light; background:var(--paper); }
body { min-height:100vh; min-height:100dvh; margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
html.theme-changing *,html.theme-changing *::before,html.theme-changing *::after { transition-property:background-color,color,border-color,box-shadow,fill,stroke,opacity!important; transition-duration:.7s!important; transition-timing-function:cubic-bezier(.22,.75,.2,1)!important; }
::view-transition-old(root) { z-index:1; animation:none; }
::view-transition-new(root) { z-index:2; animation:theme-reveal .72s cubic-bezier(.2,.78,.18,1) both; }
button,input,select,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
svg { display:block; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.icon { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 17px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); font-size:13px; font-weight:750; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease; }
.btn:hover { transform:translateY(-1px); border-color:#b8c8bb; box-shadow:0 9px 22px rgba(24,65,43,.09); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-primary { border-color:transparent; background:linear-gradient(135deg,#2c7350,#164a35); color:#fff; box-shadow:0 12px 25px rgba(24,76,52,.18); }
.btn-danger { border-color:#f0c9c6; color:#a73833; background:#fff7f6; }
.btn-ghost { border-color:transparent; background:transparent; }
.icon-btn { width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:13px; background:transparent; color:inherit; cursor:pointer; transition:.2s ease; }
.icon-btn:hover { border-color:var(--line); background:rgba(255,255,255,.72); }
.field { display:grid; gap:7px; }
.field label { color:#526159; font-size:11px; font-weight:800; letter-spacing:.02em; }
.input,.select,.textarea { width:100%; padding:0 14px; border:1px solid #d5ded6; border-radius:13px; outline:0; background:#fff; color:var(--ink); box-shadow:inset 0 1px 2px rgba(20,44,31,.02); transition:.18s ease; }
.input,.select { height:46px; min-height:46px; }
.select[multiple] { height:auto; min-height:110px; }
.textarea { min-height:110px; padding-top:12px; resize:vertical; }
.input::placeholder,.textarea::placeholder { color:#849087; opacity:1; }
.input:focus,.select:focus,.textarea:focus { border-color:#6f9b7b; box-shadow:0 0 0 4px rgba(59,121,78,.09); }
.input:user-invalid { border-color:#da8e89; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.form-grid .wide { grid-column:1/-1; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.eyebrow { margin:0 0 5px; color:#6f7e75; font-size:10px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:25px; }
.page-heading h1 { margin:0; font-size:clamp(24px,3vw,34px); letter-spacing:-.04em; }
.page-heading p { margin:7px 0 0; color:var(--muted); font-size:13px; }
.card { border:1px solid rgba(211,220,211,.88); border-radius:var(--radius); background:rgba(255,255,255,.94); box-shadow:var(--shadow); }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 22px; border-bottom:1px solid var(--line); }
.card-header h2,.card-header h3 { margin:0; font-size:15px; letter-spacing:-.015em; }
.card-body { padding:22px; }
.pill { min-height:26px; display:inline-flex; align-items:center; gap:7px; padding:0 10px; border-radius:999px; background:#eef1ee; color:#5a6860; font-size:10px; font-weight:800; white-space:nowrap; }
.pill::before { width:7px; height:7px; content:""; border-radius:50%; background:currentColor; opacity:.72; }
.pill.success { background:#e9f4e5; color:#4d873e; }
.pill.pending { background:var(--amber-soft); color:var(--amber); }
.pill.refused,.pill.danger { background:var(--danger-soft); color:var(--danger); }
.pill.info { background:var(--blue-soft); color:var(--blue); }
.empty-state { min-height:160px; display:grid; place-items:center; padding:35px; color:var(--muted); text-align:center; }
.empty-state.compact { min-height:105px; padding:24px; }

/* Connexion */
.auth-shell { min-height:100vh; min-height:100dvh; position:relative; display:grid; place-items:center; overflow:hidden; padding:24px; background:radial-gradient(circle at 18% 13%,rgba(111,183,117,.22),transparent 30%),radial-gradient(circle at 88% 82%,rgba(147,190,88,.15),transparent 34%),linear-gradient(145deg,#123f2e 0%,#082b20 54%,#031a14 100%); }
.auth-shell::before,.auth-shell::after { position:absolute; content:""; border:1px solid rgba(196,231,189,.08); border-radius:50%; pointer-events:none; }
.auth-shell::before { width:520px; height:520px; left:-260px; bottom:-245px; box-shadow:0 0 0 70px rgba(175,220,167,.025),0 0 0 145px rgba(175,220,167,.015); }
.auth-shell::after { width:380px; height:380px; right:-240px; top:-155px; box-shadow:0 0 100px rgba(153,215,137,.08); }
.auth-card { width:min(430px,100%); position:relative; z-index:1; padding:clamp(25px,5vw,38px); border:1px solid rgba(255,255,255,.62); border-radius:29px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,249,242,.94)); box-shadow:0 38px 100px rgba(0,18,10,.38),inset 0 1px rgba(255,255,255,.9); backdrop-filter:blur(24px); animation:card-in .52s cubic-bezier(.2,.8,.2,1) both; }
.auth-brand { display:flex; align-items:center; gap:13px; margin-bottom:31px; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; flex:0 0 auto; border-radius:15px; background:linear-gradient(145deg,#1c6545,#0b3727); color:#c7e69c; box-shadow:0 12px 27px rgba(17,78,50,.24),inset 0 1px rgba(255,255,255,.15); }
.brand-mark img { width:32px; height:32px; }
.auth-brand strong { display:block; font-size:15px; }
.auth-brand small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.auth-card h1 { margin-bottom:7px; font-size:27px; letter-spacing:-.04em; }
.auth-copy { margin-bottom:23px; color:var(--muted); font-size:13px; line-height:1.55; }
.auth-form { display:grid; gap:15px; }
.auth-submit { width:100%; margin-top:4px; }
.auth-privacy { margin:22px 0 0; color:#8a958f; font-size:10px; line-height:1.5; text-align:center; }

/* Application */
.app-shell { min-height:100vh; min-height:100dvh; }
.sidebar { width:var(--sidebar); position:fixed; inset:0 auto 0 0; z-index:40; display:flex; flex-direction:column; overflow:hidden; padding:24px 18px 17px; color:#f7fbf8; background:radial-gradient(circle at 7% -8%,rgba(74,147,93,.25),transparent 32%),radial-gradient(ellipse at 120% 42%,rgba(30,112,80,.24),transparent 42%),linear-gradient(158deg,#174a34 0%,#0e392a 31%,#092c21 61%,#041c16 100%); box-shadow:15px 0 45px rgba(4,31,20,.18),inset -1px 0 rgba(255,255,255,.035); }
.sidebar::before { width:325px; height:325px; position:absolute; left:-205px; bottom:5%; content:""; border:1px solid rgba(166,216,171,.07); border-radius:50%; box-shadow:0 0 0 58px rgba(119,177,129,.018),0 0 0 118px rgba(95,157,110,.012); }
.sidebar::after { position:absolute; inset:0; content:""; background:linear-gradient(123deg,transparent 0 35%,rgba(255,255,255,.022) 44%,transparent 54%),linear-gradient(90deg,transparent,rgba(176,221,183,.16),transparent) top/100% 1px no-repeat; pointer-events:none; }
.sidebar>* { position:relative; z-index:1; }
.side-brand { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 8px; text-align:center; }
.side-brand .brand-mark { width:41px; height:41px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.075); box-shadow:none; }
.side-brand .brand-mark img { width:27px; }
.side-brand strong { display:block; max-width:210px; font-size:13px; line-height:1.35; }
.side-brand small { display:block; margin-top:2px; color:#91a69a; font-size:9px; }
.side-nav { display:grid; gap:4px; margin-top:38px; }
.nav-section { margin:22px 12px 6px; color:#698176; font-size:8px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.nav-item { width:100%; min-height:47px; display:flex; align-items:center; gap:13px; padding:0 13px; border:1px solid transparent; border-radius:13px; background:transparent; color:#bfcec5; text-align:left; font-size:12px; font-weight:700; cursor:pointer; transition:.2s ease; }
.nav-item:hover { border-color:rgba(255,255,255,.055); background:rgba(255,255,255,.055); color:#fff; }
.nav-item.active { border-color:rgba(225,247,211,.34); background:linear-gradient(135deg,#aad779,#8ec363); color:#123b2b; box-shadow:0 12px 26px rgba(3,25,16,.26),inset 0 1px rgba(255,255,255,.42); }
.nav-item .nav-badge { min-width:21px; height:21px; display:grid; place-items:center; margin-left:auto; padding:0 5px; border-radius:7px; background:rgba(255,255,255,.11); font-size:9px; }
.nav-item.active .nav-badge { background:rgba(19,59,43,.12); }
.sidebar-bottom { margin-top:auto; }
.side-profile { display:flex; align-items:center; gap:10px; padding:13px 7px 4px; border-top:1px solid rgba(255,255,255,.08); }
.avatar { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(158,213,111,.13); color:#c6e9a6; font-size:12px; font-weight:850; object-fit:cover; }
.side-profile-copy { min-width:0; flex:1; text-align:center; }
.side-profile-copy strong,.side-profile-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-profile-copy strong { font-size:10px; }
.side-profile-copy small { margin-top:3px; color:#8ea197; font-size:8px; text-transform:capitalize; }
.side-logout { display:block; margin:4px auto 0; padding:0; border:0; background:transparent; color:#ff8d85; font:inherit; font-size:9px; font-weight:850; cursor:pointer; transition:color .2s ease; }
.side-logout:hover { color:#ffc0bb; }
.side-profile .icon-btn { width:35px; height:35px; color:#96aaa0; transition:color .3s ease,background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease; }
.side-profile .icon-btn:hover { border-color:rgba(255,255,255,.11); background:rgba(255,255,255,.08); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,15,9,.2); }
.side-profile .icon-btn:hover .icon { animation:settings-spin 1.8s linear infinite; }
.main-shell { min-height:100vh; margin-left:var(--sidebar); }
.topbar { height:74px; position:sticky; top:0; z-index:25; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:0 clamp(20px,4vw,48px); border-bottom:1px solid rgba(215,221,214,.8); background:rgba(247,246,242,.84); backdrop-filter:blur(18px); }
.mobile-menu { display:none; }
.topbar-title strong { display:block; font-size:12px; }
.topbar-title small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.topbar-actions { display:flex; align-items:center; gap:9px; }
.connection-state { display:flex; align-items:center; gap:7px; color:#5f6e66; font-size:9px; font-weight:750; }
.connection-state::before { width:7px; height:7px; content:""; border-radius:50%; background:#6eaf58; box-shadow:0 0 0 4px rgba(110,175,88,.11); }
.connection-state.offline::before { background:var(--danger); box-shadow:0 0 0 4px rgba(200,73,67,.1); }
.notification-button { position:relative; }
.theme-toggle .icon { transition:transform .3s ease; }
.theme-toggle:hover .icon { transform:rotate(18deg) scale(1.05); }
.notification-button em { min-width:17px; height:17px; position:absolute; right:2px; top:1px; display:grid; place-items:center; padding:0 4px; border:2px solid var(--paper); border-radius:999px; background:var(--danger); color:#fff; font-size:7px; font-style:normal; font-weight:900; }
.content { width:min(1450px,100%); margin:0 auto; padding:clamp(24px,4vw,47px); }
.page-actions { display:flex; justify-content:flex-end; gap:10px; margin-bottom:22px; }

/* Pointage */
.clock-page { width:min(1050px,100%); margin:0 auto; }
.clock-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr); gap:22px; }
.clock-card { min-height:490px; position:relative; overflow:hidden; padding:clamp(24px,4vw,42px); background:radial-gradient(circle at 83% 9%,rgba(166,211,118,.21),transparent 28%),linear-gradient(145deg,#fff,#f5f9f3); }
.clock-card-inner { min-height:400px; position:relative; z-index:1; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(310px,1.2fr); align-items:center; gap:30px; }
.clock-control { display:grid; justify-items:center; text-align:center; }
.date-now { margin-bottom:12px; color:#59685f; font-size:11px; font-weight:750; text-transform:capitalize; }
.clock-time { margin:0; font-variant-numeric:tabular-nums; font-size:clamp(38px,5vw,62px); font-weight:770; letter-spacing:-.06em; }
.clock-elapsed { min-height:28px; margin:7px 0 22px; color:#236344; font-size:14px; font-weight:800; }
.clock-button { width:148px; height:148px; position:relative; display:grid; place-items:center; padding:15px; border:8px solid rgba(255,255,255,.88); border-radius:50%; color:#fff; cursor:pointer; box-shadow:0 22px 46px rgba(34,105,65,.22),0 0 0 1px rgba(49,116,70,.1),inset 0 1px rgba(255,255,255,.26); transition:transform .22s ease,box-shadow .22s ease; }
.clock-button:hover { transform:translateY(-3px) scale(1.015); box-shadow:0 28px 52px rgba(34,105,65,.28),0 0 0 8px rgba(94,160,91,.07),inset 0 1px rgba(255,255,255,.26); }
.clock-button:active { transform:scale(.98); }
.clock-button.inactive { border-color:rgba(255,255,255,.95); background:linear-gradient(145deg,#66a956,#398749); }
.clock-button.active { background:linear-gradient(145deg,#db655f,#b73c38); box-shadow:0 22px 46px rgba(154,50,45,.2),0 0 0 1px rgba(153,53,48,.1),inset 0 1px rgba(255,255,255,.28); }
.clock-button.loading { pointer-events:none; animation:pulse-button 1s ease-in-out infinite; }
.clock-button .icon { width:31px; height:31px; margin:0 auto 8px; }
.clock-button strong { display:block; font-size:13px; }
.clock-button small { display:block; margin-top:4px; color:rgba(255,255,255,.75); font-size:8px; }
.ack-strip { min-width:205px; min-height:36px; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:17px; padding:0 14px; border:1px solid #dfe4df; border-radius:999px; background:#f0f2ef; color:#68756e; font-size:9px; font-weight:750; }
.ack-strip::before { width:8px; height:8px; content:""; border-radius:50%; background:#9aa39d; }
.ack-strip.success::before { background:#62a850; box-shadow:0 0 0 4px rgba(98,168,80,.1); }
.ack-strip.error { border-color:#edcfcc; background:#faefee; color:#a3423d; }
.ack-strip.error::before { background:var(--danger); }
.worker-stage { min-height:330px; position:relative; display:grid; place-items:end center; overflow:hidden; border:1px solid rgba(194,211,195,.64); border-radius:28px; background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.95),transparent 32%),linear-gradient(180deg,#eaf3e6,#dcebd8); box-shadow:inset 0 1px rgba(255,255,255,.8); }
.worker-stage::before { width:80%; height:42px; position:absolute; bottom:25px; content:""; border-radius:50%; background:rgba(39,82,54,.09); filter:blur(8px); }
.worker-scene { width:360px; max-width:96%; position:relative; z-index:1; padding-bottom:24px; color:#153b2b; }
.worker-scene svg { width:100%; max-height:285px; overflow:visible; }
.worker-scene .active-person { transform-origin:125px 150px; animation:worker-breathe 3.4s ease-in-out infinite; }
.worker-scene .typing-hands { transform-origin:145px 148px; animation:typing-hands .7s ease-in-out infinite alternate; }
.worker-scene .work-plant { transform-origin:307px 235px; animation:plant-sway 3.8s ease-in-out infinite alternate; }
.worker-scene .screen-pulse { transform-box:fill-box; transform-origin:center; animation:screen-pulse 1.6s ease-in-out infinite; }
.worker-scene .rest-person { transform-origin:130px 185px; animation:rest-breathe 3.8s ease-in-out infinite; }
.worker-scene .rest-book { transform-origin:122px 184px; animation:book-float 3.8s ease-in-out infinite; }
.clock-side { display:grid; align-content:start; gap:18px; }
.employee-page-actions { display:flex; justify-content:center; margin-bottom:22px; }
.mini-card { padding:21px; }
.mini-card h3 { margin-bottom:15px; font-size:13px; }
.progress-ring-row { display:flex; align-items:center; gap:16px; }
.progress-ring { --progress:0; --overtime-progress:0; width:68px; height:68px; position:relative; isolation:isolate; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:conic-gradient(var(--leaf) calc(var(--progress)*1%),#e4e9e3 0); }
.progress-ring::before { width:54px; height:54px; position:absolute; z-index:1; inset:7px; content:""; border-radius:50%; background:#fff; }
.progress-ring::after { position:absolute; z-index:0; inset:-7px; content:""; border-radius:50%; opacity:0; background:conic-gradient(#d34d46 calc(var(--overtime-progress)*1%),transparent 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0); transition:opacity .25s ease; }
.progress-ring.overtime::after { opacity:1; }
.progress-ring span { position:relative; z-index:2; display:grid; place-items:center; margin:0; font-size:9px; font-weight:850; line-height:1; }
.progress-copy strong { display:block; font-size:17px; }
.progress-copy small { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.4; }
.progress-copy em { display:block; margin-top:5px; color:#c64039; font-size:9px; font-style:normal; font-weight:850; }
.schedule-line { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:17px; }
.schedule-day { display:grid; justify-items:center; gap:6px; color:#7c8881; font-size:8px; }
.schedule-day i { width:100%; height:6px; border-radius:99px; background:#e8ebe7; }
.schedule-day.work i { background:linear-gradient(90deg,#8ec365,#b4d989); }
.today-inline { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:42px; margin-top:24px; padding:22px 24px 4px; border-top:1px solid var(--line); }
.today-heading { display:flex; align-items:center; gap:13px; }
.today-inline h3 { margin:0; font-size:14px; }
.today-inline .schedule-line { margin-top:0; }
.break-counter { min-width:90px; min-height:42px; display:flex; align-items:center; justify-content:center; gap:7px; padding:7px 11px; border:1px solid transparent; border-radius:14px; }
.break-counter small { font-size:8px; font-weight:750; }
.break-counter strong { font-size:12px; white-space:nowrap; }
.break-counter.safe { border-color:#cfe3c7; background:#eef8e9; color:#397147; }
.break-counter.warning { border-color:#efd59d; background:#fff3d8; color:#94651e; }
.quick-balances { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.balance-mini { min-width:0; padding:15px 12px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(145deg,#fff,#f7f9f6); }
.balance-mini span { display:block; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.balance-mini strong { display:block; margin-top:6px; font-size:14px; }

/* Listes et tableaux */
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.stat-card { position:relative; overflow:hidden; padding:21px; text-align:center; }
.stat-card::after { width:85px; height:85px; position:absolute; right:-30px; top:-35px; content:""; border-radius:50%; background:rgba(126,181,95,.08); }
.stat-card .stat-icon { width:42px; height:42px; display:grid; place-items:center; margin:0 auto 16px; border-radius:13px; background:var(--leaf-soft); color:var(--forest-600); }
.stat-card .stat-icon .icon { width:20px; height:20px; margin:auto; }
.stat-card strong { display:block; font-size:24px; letter-spacing:-.04em; }
.stat-card span { display:block; margin-top:4px; color:var(--muted); font-size:9px; }
.balance-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-bottom:22px; }
.balance-card { padding:22px; }
.balance-card .balance-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.balance-card .balance-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--leaf-soft); color:var(--forest-600); }
.balance-card strong { display:block; margin-top:20px; font-size:27px; letter-spacing:-.04em; }
.balance-card span { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.balance-card.balance-positive strong { color:#347446; }
.balance-card.balance-negative strong { color:#b33d37; }
.two-column { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.55fr); gap:22px; }
.request-list,.activity-list,.notification-list,.notes-list { display:grid; }
.request-row,.activity-row,.notification-row,.note-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:15px 20px; border-bottom:1px solid var(--line); }
.request-row:last-child,.activity-row:last-child,.notification-row:last-child,.note-row:last-child { border-bottom:0; }
.notification-row { width:100%; border-top:0; border-right:0; border-left:0; color:var(--ink); text-align:left; cursor:pointer; }
.notification-row.is-read { background:var(--card); }
.notification-row.is-unread { background:#f6faf3; }
.row-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#f1f3f0; color:#617068; }
.row-copy { min-width:0; }
.row-copy strong,.row-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-copy strong { font-size:11px; }
.row-copy span { margin-top:4px; color:var(--muted); font-size:9px; }
.row-meta { color:#6e7c74; font-size:9px; text-align:right; }
.table-wrap { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:11px; }
.data-table th { padding:13px 17px; border-bottom:1px solid var(--line); background:#f7f8f6; color:#7a877f; font-size:8px; letter-spacing:.08em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.data-table td { padding:15px 17px; border-bottom:1px solid #edf0ec; vertical-align:middle; white-space:nowrap; }
.data-table tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:#fafbf9; }
.person-cell { display:flex; align-items:center; gap:10px; }
.person-cell .avatar { width:34px; height:34px; border-color:#dfe5de; background:#eef4e9; color:#4f7a59; }
.table-actions { display:flex; justify-content:flex-end; gap:4px; }
.table-actions .icon-btn { width:34px; height:34px; }
.table-actions .icon { width:16px; height:16px; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.search { min-width:230px; position:relative; }
.search .icon { width:17px; height:17px; position:absolute; left:13px; top:14px; color:#8a968e; }
.search .input { padding-left:40px; }
.segmented { display:inline-flex; padding:4px; border:1px solid var(--line); border-radius:13px; background:#f4f6f3; }
.segmented button { min-height:34px; padding:0 12px; border:0; border-radius:9px; background:transparent; color:#6c7971; font-size:9px; font-weight:800; cursor:pointer; }
.segmented button.active { background:#fff; color:var(--forest-700); box-shadow:0 4px 12px rgba(38,71,50,.08); }

/* Admin */
.admin-banner { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; padding:21px 24px; border:1px solid rgba(115,155,115,.26); border-radius:20px; background:linear-gradient(125deg,#103f2e,#1d5a3d); color:#fff; box-shadow:0 18px 40px rgba(12,60,39,.15); }
.admin-banner h2 { margin-bottom:4px; font-size:16px; }
.admin-banner p { margin:0; color:#b9cbbf; font-size:10px; }
.admin-banner .btn { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.1); color:#fff; }
.employee-app .page-heading { flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.employee-app .clock-card-inner { grid-template-columns:minmax(260px,.85fr) minmax(320px,1.15fr); justify-items:center; }
.employee-app .clock-control,.employee-app .worker-stage { width:100%; }
.employee-app .mini-card,.employee-app .balance-card { text-align:center; }
.employee-app .progress-ring-row,.employee-app .balance-card .balance-top { justify-content:center; }
.employee-app .balance-icon { margin:0 auto; }
.employee-app .card-header { justify-content:center; text-align:center; }
.admin-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:22px; }
.admin-history { display:grid; gap:22px; }
.employee-time-button { border-color:#cfe0ce; background:#edf7e9; color:#39734d; }
.employee-detail-head { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; padding:18px 22px; }
.employee-detail-profile { min-width:0; display:flex; align-items:center; gap:13px; }
.employee-detail-profile .avatar { width:49px; height:49px; border-color:#d3dfd4; background:#ebf4e6; color:#3f7250; }
.employee-detail-profile span { min-width:0; }
.employee-detail-profile strong,.employee-detail-profile small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.employee-detail-profile strong { font-size:15px; }
.employee-detail-profile small { margin-top:5px; color:var(--muted); font-size:9px; }
.employee-summary { margin-bottom:18px; }
.employee-detail-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr); align-items:start; gap:18px; }
.employee-attendance-list,.employee-detail-side { display:grid; gap:18px; }
.attendance-day { overflow:hidden; }
.employee-punches { display:grid; }
.employee-punch-row { display:grid; grid-template-columns:minmax(120px,.45fr) minmax(210px,1fr) auto; align-items:center; gap:15px; padding:15px 18px; border-bottom:1px solid var(--line); }
.employee-punch-row:last-child { border-bottom:0; }
.punch-time strong,.punch-time small,.punch-network strong,.punch-network small { display:block; }
.punch-time strong,.punch-network strong { font-size:10px; }
.punch-time small,.punch-network small { margin-top:4px; color:var(--muted); font-size:8px; line-height:1.4; }
.personnel-empty { min-height:210px; }
.user-status { display:flex; align-items:center; gap:7px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#acb5af; }
.status-dot.active { background:#6bab51; box-shadow:0 0 0 4px rgba(107,171,81,.11); }
.decision-actions { display:flex; justify-content:flex-end; gap:6px; }
.week-editor { display:grid; gap:11px; padding:15px; border:1px solid var(--line); border-radius:15px; background:#f8f9f7; }
.week-row { display:grid; grid-template-columns:82px repeat(2,minmax(0,1fr)); align-items:center; gap:9px; }
.week-row strong { font-size:10px; }
.week-row .input { min-height:40px; }
.week-head { color:var(--muted); font-size:8px; font-weight:850; text-align:center; text-transform:uppercase; }
.user-form-grid>.field>label { min-height:28px; display:flex; align-items:flex-end; }
.user-form-grid>.field>.input,.user-form-grid>.field>.select { height:46px; min-height:46px; }
.rules-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.rule-card { display:grid; align-content:start; gap:22px; padding:24px; }
.rule-title { display:flex; align-items:center; gap:12px; }
.rule-title h2 { margin:0; font-size:16px; }
.toggle-row { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 15px; border:1px solid var(--line); border-radius:15px; background:#f7f9f6; color:var(--ink); font-size:12px; font-weight:800; cursor:pointer; }
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle-row i { width:44px; height:25px; position:relative; flex:0 0 auto; border-radius:99px; background:#cbd3cc; transition:background .25s ease; }
.toggle-row i::after { width:19px; height:19px; position:absolute; left:3px; top:3px; content:""; border-radius:50%; background:#fff; box-shadow:0 3px 9px rgba(20,45,30,.2); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.toggle-row input:checked+i { background:#4d9360; }
.toggle-row input:checked+i::after { transform:translateX(19px); }
.input-suffix { position:relative; }
.input-suffix .input { padding-right:72px; }
.input-suffix span { position:absolute; right:13px; top:15px; color:var(--muted); font-size:9px; font-weight:750; pointer-events:none; }

/* Modales, panneaux, alertes */
.modal-layer { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(3,25,17,.58); backdrop-filter:blur(10px); animation:fade-in .2s ease both; }
.modal { width:min(650px,100%); max-height:min(88vh,900px); position:relative; overflow:auto; border:1px solid rgba(255,255,255,.7); border-radius:25px; background:#fff; box-shadow:var(--shadow-deep); animation:modal-in .3s cubic-bezier(.2,.8,.2,1) both; }
.modal.wide { width:min(900px,100%); }
.modal-header { min-height:66px; position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:15px; padding:16px 64px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(15px); }
.modal-header h2 { margin:0; font-size:16px; text-align:center; }
.modal-close { position:absolute; right:15px; top:12px; color:var(--muted); }
.close-button:hover { border-color:transparent; background:transparent; color:#821f1a; transform:none; box-shadow:none; }
.close-button:hover .icon { stroke-width:2.8; }
.modal-body { padding:23px; }
.internal-note-popup { width:min(560px,100%); overflow:hidden; padding:0; text-align:center; }
.internal-note-mark { width:76px; height:76px; display:grid; place-items:center; margin:34px auto 0; border-radius:24px; background:linear-gradient(145deg,#dff0d2,#b8daa0); color:#286c4c; box-shadow:0 16px 35px rgba(65,118,72,.18); }
.internal-note-mark .icon { width:32px; height:32px; }
.internal-note-content { display:grid; justify-items:center; padding:23px 34px 34px; }
.internal-note-content h2 { margin:15px 0 12px; font-size:24px; letter-spacing:-.035em; }
.internal-note-text { width:100%; color:#4f5f56; font-size:13px; line-height:1.7; white-space:normal; }
.internal-note-meta { margin:18px 0; color:var(--muted); font-size:9px; }
.internal-note-content .btn { min-width:150px; }
.note-open-button { min-width:120px; justify-content:center; }
.attachment-list { width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:17px; }
.attachment-chip { max-width:100%; min-height:36px; display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid #d8e4d6; border-radius:12px; background:#f4f8f2; color:#2d6644; font-size:9px; font-weight:800; text-decoration:none; transition:border-color .18s ease,background .18s ease,color .18s ease; }
.attachment-chip:hover { border-color:#a8c7a5; background:#eaf4e5; color:#174d33; }
.attachment-chip .icon { width:15px; height:15px; flex:0 0 auto; }
.attachment-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-row .row-copy>.attachment-list { justify-content:flex-start; margin-top:10px; }
.check-row { min-height:46px; display:flex!important; align-items:center!important; gap:10px; padding:0 13px; border:1px solid var(--line); border-radius:13px; background:#f8faf7; cursor:pointer; }
.check-row input,.recipient-choice input { width:18px; height:18px; flex:0 0 auto; accent-color:#3e8558; }
.recipient-checklist { max-height:245px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; overflow:auto; padding:10px; border:1px solid var(--line); border-radius:15px; background:#f8faf7; }
.recipient-checklist[hidden] { display:none; }
.recipient-choice { min-width:0; display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #dce5dc; border-radius:12px; background:#fff; cursor:pointer; transition:border-color .18s ease,background .18s ease; }
.recipient-choice:has(input:checked) { border-color:#8db78c; background:#edf6e8; }
.recipient-choice>span { min-width:0; display:flex; align-items:center; gap:9px; }
.recipient-choice .avatar { width:30px; height:30px; border-color:#d8e3d6; background:#edf5e8; color:#427253; border-radius:9px; }
.recipient-choice strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.attachment-picker { min-height:65px!important; display:flex!important; align-items:center!important; gap:13px; padding:12px 15px; border:1px dashed #adc5ad; border-radius:15px; background:#f5f9f3; cursor:pointer; transition:border-color .18s ease,background .18s ease; }
.attachment-picker:hover { border-color:#6f9b7b; background:#edf6e9; }
.attachment-picker>.icon { width:21px; height:21px; flex:0 0 auto; color:#3c7953; }
.attachment-picker span,.attachment-picker strong,.attachment-picker small { display:block; }
.attachment-picker strong { color:var(--ink); font-size:10px; }
.attachment-picker small { margin-top:4px; color:var(--muted); font-size:8px; }
.profile-photo-zone { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:17px; margin-bottom:24px; padding:17px; border:1px solid var(--line); border-radius:17px; background:#f8faf7; }
.profile-photo-zone .avatar { width:68px; height:68px; border-color:#d9e1d9; background:#eaf3e3; color:#4d7958; font-size:18px; }
.profile-photo-copy strong { display:block; font-size:12px; }
.profile-photo-copy small { display:block; margin:4px 0 10px; color:var(--muted); font-size:9px; }
.profile-password-form .form-actions { justify-content:center; }
.select-shell { position:relative; }
.select-shell>.icon:first-child { width:18px; height:18px; position:absolute; z-index:1; left:15px; top:14px; color:var(--forest-600); pointer-events:none; }
.select-shell>.icon:last-child { width:17px; height:17px; position:absolute; right:14px; top:15px; color:var(--muted); pointer-events:none; }
.request-type-select { height:46px; min-height:46px; padding:0 43px; appearance:none; border-color:#cfdcd1; background:linear-gradient(145deg,#fff,#f7faf6); font-weight:760; }
.leave-balance { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 18px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(135deg,#f7f9f5,#edf1eb); color:#53645a; transition:background .28s ease,border-color .28s ease,color .28s ease; }
.leave-balance span { font-size:11px; font-weight:760; }
.leave-balance strong { font-size:22px; letter-spacing:-.035em; }
.leave-balance.positive strong { color:#347446; }
.leave-balance.negative strong { color:#b33d37; }
.calendar-range-field { padding:15px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,#fbfcfa,#f3f7f1); }
.calendar-range-trigger { width:100%; min-height:64px; display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px 14px; border:1px solid #cfdcd1; border-radius:14px; background:#fff; color:var(--ink); cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.calendar-range-trigger:hover,.calendar-range-trigger:focus-visible { border-color:#6f9b7b; box-shadow:0 0 0 4px rgba(59,121,78,.09); outline:0; }
.calendar-range-trigger>.icon { width:18px; height:18px; color:var(--forest-600); }
.calendar-range-trigger>.icon:last-child { width:15px; color:var(--muted); }
.range-date { min-width:0; display:grid; gap:3px; text-align:center; }
.range-date small { color:var(--muted); font-size:8px; font-weight:780; }
.range-date strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.range-arrow { color:#5b7e68; font-size:18px; line-height:1; }
.leave-calendar { width:min(430px,100%); justify-self:center; padding:15px; border:1px solid #cddfcd; border-radius:19px; background:linear-gradient(145deg,#fff,#f4f8f2); box-shadow:0 20px 45px rgba(28,67,42,.11); animation:calendar-in .24s cubic-bezier(.2,.8,.2,1) both; }
.calendar-toolbar { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:10px; margin-bottom:12px; }
.calendar-toolbar strong { font-size:13px; text-align:center; text-transform:capitalize; }
.calendar-toolbar .calendar-next .icon { transform:rotate(180deg); }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.calendar-weekdays { margin-bottom:6px; }
.calendar-weekdays span { display:grid; place-items:center; height:24px; color:var(--muted); font-size:8px; font-weight:850; }
.calendar-day,.calendar-empty { min-width:0; min-height:40px; aspect-ratio:1; }
.calendar-day { display:grid; place-items:center; padding:0; border:0; border-radius:11px; background:transparent; color:var(--ink); font-size:10px; font-weight:750; cursor:pointer; transition:background .17s ease,color .17s ease,transform .17s ease; }
.calendar-day:hover { background:#e7f2e1; color:#286c4c; transform:scale(1.04); }
.calendar-day.in-range { border-radius:8px; background:#edf6e8; color:#3a6c49; }
.calendar-day.selected { background:linear-gradient(145deg,#68a85d,#367c4e); color:#fff; box-shadow:0 7px 17px rgba(45,112,69,.22); }
.calendar-selected-field { margin-top:11px; color:#496557; font-size:9px; font-weight:780; text-align:center; }
.hours-input-wrap { position:relative; }
.hours-input-wrap .input { padding-right:72px; font-size:16px; font-weight:800; }
.hours-input-wrap span { position:absolute; right:14px; top:15px; color:var(--muted); font-size:9px; font-weight:750; }
.leave-transformation { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:15px; padding:18px; border:1px solid #d7e1d5; border-radius:18px; background:linear-gradient(135deg,#f7faf5,#edf4e9); transition:background .28s ease,border-color .28s ease,color .28s ease; }
.leave-transformation>div { text-align:center; }
.leave-transformation>div span,.leave-transformation>div strong { display:block; }
.leave-transformation>div span { color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }
.leave-transformation>div strong { margin-top:6px; font-size:22px; letter-spacing:-.04em; }
.transformation-arrow { display:grid; justify-items:center; gap:4px; color:#4f805e; }
.transformation-arrow b { font-size:28px; font-weight:500; line-height:1; }
.transformation-arrow small { max-width:105px; color:var(--muted); font-size:8px; font-weight:760; text-align:center; }
.leave-transformation p { min-height:0; grid-column:1/-1; margin:0; color:var(--muted); font-size:9px; font-weight:750; text-align:center; }
.leave-transformation.positive #leave-remaining-value { color:#347446; }
.leave-transformation.negative #leave-remaining-value,.leave-transformation.negative p { color:#b33d37; }
.drawer { width:min(430px,calc(100% - 24px)); position:fixed; inset:12px 12px 12px auto; z-index:90; overflow:auto; border:1px solid rgba(255,255,255,.68); border-radius:24px; background:#fff; box-shadow:var(--shadow-deep); animation:drawer-in .3s ease both; }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:21px; border-bottom:1px solid var(--line); }
.drawer-header h2 { margin:0; font-size:15px; }
.toast-stack { position:fixed; right:20px; bottom:20px; z-index:150; display:grid; gap:9px; pointer-events:none; }
.toast { min-width:270px; max-width:390px; display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border:1px solid rgba(255,255,255,.18); border-radius:15px; background:#123e2d; color:#fff; box-shadow:0 18px 45px rgba(3,25,16,.24); font-size:10px; line-height:1.45; animation:toast-in .3s ease both; }
.toast.error { background:#8d322e; }
.toast .icon { width:17px; height:17px; flex:0 0 auto; }
.offline-banner { position:fixed; inset:auto 20px 20px auto; z-index:120; display:flex; align-items:center; gap:9px; padding:12px 16px; border-radius:14px; background:#8d322e; color:#fff; box-shadow:0 15px 35px rgba(74,20,18,.25); font-size:10px; font-weight:750; }

html[data-theme="dark"] body { background:var(--paper); }
html[data-theme="dark"] .card { border-color:#3a5d4f; background:#0e3025; }
html[data-theme="dark"] .btn { border-color:#426556; background:#143a2d; color:var(--ink); }
html[data-theme="dark"] .btn:hover { border-color:#668b79; background:#1a4937; }
html[data-theme="dark"] .btn-primary { border-color:transparent; background:linear-gradient(135deg,#5e9d63,#2e7450); color:#fff; }
html[data-theme="dark"] .btn-danger { border-color:#70423e; background:#3b2422; color:#efaaa4; }
html[data-theme="dark"] .icon-btn:hover { border-color:#345347; background:rgba(37,76,57,.72); }
html[data-theme="dark"] .input,html[data-theme="dark"] .select,html[data-theme="dark"] .textarea { border-color:#45695a; background:#071f17; color:var(--ink); }
html[data-theme="dark"] .input::placeholder,html[data-theme="dark"] .textarea::placeholder { color:#91a49a; }
html[data-theme="dark"] .input:focus,html[data-theme="dark"] .select:focus,html[data-theme="dark"] .textarea:focus { border-color:#82bd8e; box-shadow:0 0 0 4px rgba(130,189,142,.17); }
html[data-theme="dark"] .field label { color:#d1ded6; }
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .row-meta { color:#b4c5bb; }
html[data-theme="dark"] .date-now,html[data-theme="dark"] .connection-state { color:#bdccc3; }
html[data-theme="dark"] .clock-elapsed { color:#b3dd95; }
html[data-theme="dark"] .topbar { border-color:#345548; background:rgba(4,23,16,.92); }
html[data-theme="dark"] .notification-button em { border-color:var(--paper); }
html[data-theme="dark"] .clock-card { background:radial-gradient(circle at 83% 9%,rgba(120,178,99,.16),transparent 28%),linear-gradient(145deg,#0e3024,#092219); }
html[data-theme="dark"] .worker-stage { border-color:#315044; background:radial-gradient(circle at 50% 22%,rgba(46,89,61,.55),transparent 34%),linear-gradient(180deg,#183c2c,#102f24); }
html[data-theme="dark"] .worker-caption { border-color:#3b5e4c; background:rgba(8,34,24,.72); color:#b8d2bd; }
html[data-theme="dark"] .ack-strip { border-color:#385347; background:#153128; color:#adc0b5; }
html[data-theme="dark"] .ack-strip.error { border-color:#74433f; background:#3b2221; color:#efa7a1; }
html[data-theme="dark"] .progress-ring { background:conic-gradient(var(--leaf) calc(var(--progress)*1%),#244239 0); }
html[data-theme="dark"] .progress-ring::before { background:#0d2a20; }
html[data-theme="dark"] .progress-copy em { color:#ff9c95; }
html[data-theme="dark"] .break-counter.safe { border-color:#3f6c50; background:#173d2b; color:#bce3aa; }
html[data-theme="dark"] .break-counter.warning { border-color:#6f592b; background:#3e321b; color:#f1cb78; }
html[data-theme="dark"] .schedule-day i { background:#29443a; }
html[data-theme="dark"] .balance-mini { border-color:#2c493e; background:linear-gradient(145deg,#103127,#0a251c); }
html[data-theme="dark"] .balance-card.balance-positive strong { color:#b7e09d; }
html[data-theme="dark"] .balance-card.balance-negative strong { color:#ffa099; }
html[data-theme="dark"] .card-header { border-color:var(--line); }
html[data-theme="dark"] .row-icon { background:#17372c; color:#a9c9b4; }
html[data-theme="dark"] .pill { background:#1b3e31; color:#d3e0d8; }
html[data-theme="dark"] .pill.success { background:#1c452e; color:#bce49e; }
html[data-theme="dark"] .pill.pending { background:var(--amber-soft); color:var(--amber); }
html[data-theme="dark"] .pill.refused,html[data-theme="dark"] .pill.danger { background:var(--danger-soft); color:var(--danger); }
html[data-theme="dark"] .pill.info { background:var(--blue-soft); color:var(--blue); }
html[data-theme="dark"] .request-row,html[data-theme="dark"] .activity-row,html[data-theme="dark"] .notification-row,html[data-theme="dark"] .note-row { border-color:#27453a; }
html[data-theme="dark"] .data-table th { border-color:#2c4a3e; background:#102f25; color:#a0b2a8; }
html[data-theme="dark"] .data-table td { border-color:#234036; }
html[data-theme="dark"] .data-table tbody tr:hover { background:#123329; }
html[data-theme="dark"] .person-cell .avatar { border-color:#365448; background:#17392c; color:#b9d9aa; }
html[data-theme="dark"] .segmented { border-color:#315044; background:#0a271e; }
html[data-theme="dark"] .segmented button { color:#a2b4a9; }
html[data-theme="dark"] .segmented button.active { background:#1c4434; color:#eef7f1; box-shadow:0 4px 14px rgba(0,8,5,.24); }
html[data-theme="dark"] .week-editor,html[data-theme="dark"] .profile-photo-zone { border-color:#315044; background:#0a271e; }
html[data-theme="dark"] .employee-time-button { border-color:#3d6a50; background:#183d2c; color:#b8dda6; }
html[data-theme="dark"] .employee-detail-profile .avatar { border-color:#416455; background:#183a2d; color:#c0dfa9; }
html[data-theme="dark"] .employee-punch-row { border-color:#27453a; }
html[data-theme="dark"] .check-row,html[data-theme="dark"] .recipient-checklist { border-color:#315044; background:#0a271e; }
html[data-theme="dark"] .recipient-choice { border-color:#315044; background:#0d3024; }
html[data-theme="dark"] .recipient-choice:has(input:checked) { border-color:#5f956b; background:#17412e; }
html[data-theme="dark"] .recipient-choice .avatar { border-color:#416354; background:#17392d; color:#c0dda9; }
html[data-theme="dark"] .attachment-picker { border-color:#496f5c; background:#0b291f; }
html[data-theme="dark"] .attachment-picker:hover { border-color:#77a985; background:#123629; }
html[data-theme="dark"] .attachment-chip { border-color:#3c614f; background:#143629; color:#b8d9aa; }
html[data-theme="dark"] .attachment-chip:hover { border-color:#668f72; background:#1b4633; color:#e1efd9; }
html[data-theme="dark"] .toggle-row { border-color:#315044; background:#0a271e; }
html[data-theme="dark"] .toggle-row i { background:#365249; }
html[data-theme="dark"] .profile-photo-zone .avatar { border-color:#3a5b4e; background:#173a2c; color:#c2ddaf; }
html[data-theme="dark"] .modal,html[data-theme="dark"] .drawer { border-color:#365448; background:#0d2a20; }
html[data-theme="dark"] .modal-header { border-color:#3a5d4f; background:rgba(14,48,37,.96); }
html[data-theme="dark"] .close-button:hover { border-color:transparent; background:transparent; color:#ff8f87; }
html[data-theme="dark"] .request-type-select,html[data-theme="dark"] .calendar-range-trigger { border-color:#45695a; background:linear-gradient(145deg,#0b2a20,#082219); color:var(--ink); }
html[data-theme="dark"] .leave-balance { border-color:#315342; background:linear-gradient(135deg,#173b2c,#102e23); color:#b6d9a9; }
html[data-theme="dark"] .leave-balance.positive strong { color:#b7e09d; }
html[data-theme="dark"] .leave-balance.negative strong { color:#ffa099; }
html[data-theme="dark"] .calendar-range-field { border-color:#315044; background:linear-gradient(145deg,#0d2c22,#09241b); }
html[data-theme="dark"] .leave-calendar { border-color:#426455; background:linear-gradient(145deg,#113328,#09261d); box-shadow:0 22px 50px rgba(0,8,5,.34); }
html[data-theme="dark"] .calendar-day:hover { background:#214735; color:#c7e4b6; }
html[data-theme="dark"] .calendar-day.in-range { background:#193e2e; color:#c2ddb3; }
html[data-theme="dark"] .calendar-selected-field { color:#bdd2c5; }
html[data-theme="dark"] .leave-transformation { border-color:#3c5d4e; background:linear-gradient(135deg,#123228,#0c281f); }
html[data-theme="dark"] .leave-transformation.positive #leave-remaining-value { color:#b7e09d; }
html[data-theme="dark"] .leave-transformation.negative #leave-remaining-value,html[data-theme="dark"] .leave-transformation.negative p { color:#ffa099; }
html[data-theme="dark"] .notification-row.is-read { background:#0d2a20; }
html[data-theme="dark"] .notification-row.is-unread { background:#12372a; }
html[data-theme="dark"] .internal-note-text { color:#c4d3ca; }
html[data-theme="dark"] .internal-note-mark { background:linear-gradient(145deg,#214d38,#153629); color:#b9dda1; box-shadow:0 16px 35px rgba(0,10,6,.32); }
html[data-theme="dark"] .auth-card { border-color:rgba(105,143,121,.55); background:linear-gradient(145deg,rgba(14,47,36,.98),rgba(8,34,25,.96)); color:var(--ink); }
html[data-theme="dark"] .auth-brand small,html[data-theme="dark"] .auth-copy,html[data-theme="dark"] .auth-privacy { color:var(--muted); }

@keyframes card-in { from { opacity:0; transform:translateY(15px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes modal-in { from { opacity:0; transform:translateY(17px) scale(.975); } to { opacity:1; transform:none; } }
@keyframes drawer-in { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
@keyframes fade-in { from { opacity:0; } }
@keyframes toast-in { from { opacity:0; transform:translateY(12px); } }
@keyframes pulse-button { 50% { transform:scale(.97); opacity:.86; } }
@keyframes worker-breathe { 50% { transform:translateY(2px) rotate(.25deg); } }
@keyframes typing-hands { from { transform:rotate(-.6deg) translateY(0); } to { transform:rotate(.8deg) translateY(2px); } }
@keyframes plant-sway { from { transform:rotate(-1deg); } to { transform:rotate(1.5deg); } }
@keyframes rest-breathe { 50% { transform:translateY(2px) rotate(.35deg); } }
@keyframes book-float { 50% { transform:translateY(1px) rotate(-.5deg); } }
@keyframes screen-pulse { 50% { opacity:.55; transform:scale(.86); } }
@keyframes settings-spin { to { transform:rotate(360deg); } }
@keyframes theme-reveal { from { clip-path:circle(0 at var(--theme-x) var(--theme-y)); } to { clip-path:circle(150vmax at var(--theme-x) var(--theme-y)); } }
@keyframes calendar-in { from { opacity:0; transform:translateY(-7px) scale(.985); } to { opacity:1; transform:none; } }

@media (max-width:1320px) {
  .clock-grid,.admin-grid { grid-template-columns:1fr; }
  .clock-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .employee-detail-grid { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  :root { --sidebar:270px; }
  .sidebar { transform:translateX(-104%); transition:transform .25s ease; }
  .sidebar.open { transform:translateX(0); }
  .main-shell { margin-left:0; }
  .mobile-menu { display:grid; }
  .content { padding:25px 18px 38px; }
  .clock-card-inner { grid-template-columns:1fr; }
  .employee-app .clock-card-inner { grid-template-columns:1fr; }
  .worker-stage { min-height:290px; }
  .two-column { grid-template-columns:1fr; }
  .balance-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sidebar-scrim { position:fixed; inset:0; z-index:35; background:rgba(2,22,15,.48); backdrop-filter:blur(3px); }
  .rules-grid { grid-template-columns:1fr; }
  .employee-detail-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .topbar { height:66px; padding:0 14px; }
  .topbar-title small,.connection-state span { display:none; }
  .content { padding:21px 13px 32px; }
  .page-heading { align-items:flex-start; margin-bottom:19px; }
  .page-heading h1 { font-size:26px; }
  .page-heading .btn span { display:none; }
  .clock-card { min-height:0; padding:23px 15px; border-radius:20px; }
  .clock-card-inner { gap:22px; }
  .clock-time { font-size:46px; }
  .clock-button { width:138px; height:138px; }
  .worker-stage { width:100%; min-height:245px; }
  .worker-scene { width:265px; padding-bottom:18px; }
  .worker-scene svg { max-height:220px; }
  .today-inline { flex-direction:column; gap:15px; margin-top:20px; padding:20px 4px 2px; text-align:center; }
  .clock-side { grid-template-columns:1fr; }
  .quick-balances,.balance-cards { grid-template-columns:1fr; }
  .balance-card { display:grid; grid-template-columns:auto 1fr; column-gap:15px; align-items:center; padding:17px; }
  .balance-card .balance-top { grid-row:1/3; }
  .balance-card strong { margin:0; font-size:21px; }
  .balance-card span { margin-top:3px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .stat-card { padding:16px; }
  .stat-card strong { font-size:21px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .request-row,.activity-row,.notification-row,.note-row { grid-template-columns:auto minmax(0,1fr); padding:14px; }
  .row-meta { grid-column:2; text-align:left; }
  .card-header { align-items:flex-start; padding:17px; }
  .card-body { padding:17px; }
  .filters { width:100%; }
  .search { width:100%; }
  .admin-banner { align-items:flex-start; flex-direction:column; }
  .modal-layer { padding:9px; }
  .modal { max-height:94vh; border-radius:21px; }
  .modal-body { padding:17px; }
  .modal-header { padding-right:54px; padding-left:54px; }
  .profile-photo-zone { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .profile-photo-copy { display:grid; justify-items:center; }
  .leave-transformation { grid-template-columns:1fr auto 1fr; gap:8px; padding:15px 10px; }
  .leave-transformation>div strong { font-size:18px; }
  .transformation-arrow b { font-size:23px; }
  .transformation-arrow small { max-width:78px; }
  .calendar-range-trigger { grid-template-columns:auto minmax(0,1fr) auto; row-gap:7px; }
  .calendar-range-trigger>.icon:first-child { grid-row:1/3; }
  .calendar-range-trigger>.icon:last-child { grid-column:3; grid-row:1/3; }
  .range-date { text-align:left; }
  .range-arrow { grid-column:2; font-size:14px; transform:rotate(90deg); }
  .internal-note-content { padding:20px 21px 27px; }
  .week-row { grid-template-columns:66px repeat(2,minmax(0,1fr)); }
  .recipient-checklist { grid-template-columns:1fr; }
  .employee-detail-head { align-items:flex-start; padding:15px; }
  .employee-detail-head>.user-status { flex:0 0 auto; }
  .employee-detail-side { grid-template-columns:1fr; }
  .employee-punch-row { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:14px; }
  .punch-network { grid-column:1/-1; grid-row:2; }
  .employee-punch-row>.table-actions { grid-column:2; grid-row:1; }
  .page-actions { flex-wrap:wrap; }
  .note-open-button { min-width:0; justify-self:start; grid-column:2; }
  .toast-stack { right:10px; bottom:10px; left:10px; }
  .toast { min-width:0; max-width:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}