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

:root {
  --method-blue:#0062FB; --method-navy:#0B184F;
  --blue-600:#0053D6; --blue-300:#6E9BFF; --blue-100:#DCE8FF;
  --bg:#EEF2F9; --panel:#FFFFFF; --text:#0B184F; --muted:#5A648C;
  --border:rgba(11,24,79,.10);
  --glass-bg:rgba(255,255,255,.66); --glass-border:rgba(255,255,255,.85);
  --glass-shadow:0 8px 32px rgba(11,24,79,.10); --blur:16px;
  --ok:#0E9F6E; --warn:#B87200; --danger:#D02B39;
  --rail:var(--method-navy); --rail-text:#C7D4F5; --rail-active:rgba(0,98,251,.22);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#060C22; --panel:#0D1533; --text:#E9EEFB; --muted:#93A0C8;
  --border:rgba(233,238,251,.13);
  --glass-bg:rgba(17,28,66,.58); --glass-border:rgba(233,238,251,.12);
  --glass-shadow:0 8px 32px rgba(0,0,0,.5);
  --ok:#34D399; --warn:#FBBF24; --danger:#F87171;
  --rail:#080F28; --rail-text:#9FB0DC; --rail-active:rgba(0,98,251,.28);
  --blue-100:#16255C;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,-apple-system,system-ui,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; overflow:hidden;
}
/* soft colour fields so the frosted panels have something to refract */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48rem 32rem at 12% -8%, rgba(0,98,251,.30), transparent 60%),
    radial-gradient(40rem 30rem at 96% 6%, rgba(110,155,255,.26), transparent 62%),
    radial-gradient(44rem 34rem at 74% 104%, rgba(11,24,79,.16), transparent 60%);
}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(48rem 32rem at 12% -8%, rgba(0,98,251,.30), transparent 62%),
    radial-gradient(40rem 30rem at 96% 6%, rgba(0,60,170,.30), transparent 64%);
}

.shell{position:relative; z-index:1; display:grid; grid-template-columns:236px 1fr; height:100vh}

/* ---------- rail ---------- */
.rail{background:var(--rail); display:flex; flex-direction:column; padding:20px 14px; gap:26px; overflow-y:auto}
.brand{display:flex; align-items:center; gap:11px; padding:0 8px}
.brand svg{width:30px; height:30px; flex:none; color:var(--method-blue)}
.brand b{color:#fff; font-size:17px; letter-spacing:-.02em; font-weight:600}
.nav{display:flex; flex-direction:column; gap:2px}
.nav-label{color:#6D7DB0; font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; padding:0 10px; margin:14px 0 5px}
.nav button{
  all:unset; display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  color:var(--rail-text); cursor:pointer; font-size:13.5px; font-weight:500; transition:background .16s,color .16s;
}
.nav button:hover{background:rgba(255,255,255,.07); color:#fff}
.nav button[aria-current="page"]{background:var(--rail-active); color:#fff; font-weight:600}
.nav .ico{width:17px; text-align:center; opacity:.85; font-size:14px}
.rail-foot{margin-top:auto; color:#5B67A0; font-size:11px}

/* ---------- main ---------- */
.main{display:flex; flex-direction:column; min-width:0; overflow:hidden}
.topbar{
  display:flex; align-items:center; gap:14px; padding:15px 26px;
  border-bottom:1px solid var(--border); background:var(--glass-bg);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
}
.topbar h1{margin:0; font-size:19px; font-weight:650; letter-spacing:-.02em}
.topbar .sub{color:var(--muted); font-size:12.5px; margin-top:1px}
.spacer{flex:1}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  border:1px solid var(--border); background:var(--panel); font-size:12.5px; font-weight:550; cursor:pointer;
  color:var(--text);
}
.pill:hover{border-color:var(--method-blue)}
.seg{display:inline-flex; background:var(--blue-100); border-radius:999px; padding:3px}
.seg button{
  all:unset; padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
  cursor:pointer; color:var(--muted);
}
.seg button[aria-pressed="true"]{background:var(--method-blue); color:#fff}
.avatar{width:31px; height:31px; border-radius:50%; background:var(--method-blue); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:650}

.content{padding:22px 26px 40px; overflow-y:auto; flex:1}
.view{display:none} .view.on{display:block}

/* ---------- panels ---------- */
.glass{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow); backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur)); border-radius:15px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--panel)}
}
@media (prefers-reduced-transparency:reduce){ .glass{background:var(--panel); backdrop-filter:none} }

.grid{display:grid; gap:16px}
.kpis{grid-template-columns:repeat(4,1fr)}
.cols-2{grid-template-columns:1.35fr 1fr}
.card{padding:17px 19px}
.card h3{margin:0 0 3px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.kpi .n{font-size:31px; font-weight:680; letter-spacing:-.03em; line-height:1.1}
.kpi .d{font-size:12px; color:var(--muted); margin-top:3px}
.card h2{margin:0 0 13px; font-size:15px; font-weight:650; letter-spacing:-.01em}

.live{display:inline-flex; align-items:center; gap:6px; color:var(--ok); font-size:11.5px; font-weight:600}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} }

table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
   font-weight:600; padding:0 10px 8px; border-bottom:1px solid var(--border)}
td{padding:10px; border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(0,98,251,.05)}
.who{display:flex; align-items:center; gap:9px}
.mini{width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  font-size:10.5px; font-weight:650; color:#fff; flex:none}
.tag{display:inline-block; padding:2.5px 8px; border-radius:999px; font-size:11px; font-weight:600}
.t-in{background:rgba(14,159,110,.15); color:var(--ok)}
.t-leave{background:rgba(184,114,0,.15); color:var(--warn)}
.t-out{background:var(--blue-100); color:var(--muted)}

label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin:0 0 5px;
  text-transform:uppercase; letter-spacing:.05em}
input,select{
  width:100%; padding:9px 11px; border-radius:9px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); font:inherit; font-size:13.5px;
}
input:focus,select:focus{outline:2px solid var(--method-blue); outline-offset:-1px; border-color:transparent}
.field{margin-bottom:13px}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* sick-leave ladder */
.ladder{display:flex; height:34px; border-radius:9px; overflow:hidden; border:1px solid var(--border)}
.rung{position:relative; display:grid; place-items:center; font-size:10.5px; font-weight:650; color:#fff;
  transition:flex-grow .3s ease}
.rung small{opacity:.85; font-weight:500}
.legend{display:flex; flex-wrap:wrap; gap:13px; margin-top:9px; font-size:11.5px; color:var(--muted)}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px}

.workings{list-style:none; margin:0; padding:0; font-size:12.5px}
.workings li{padding:7px 0 7px 20px; border-bottom:1px dashed var(--border); position:relative; color:var(--muted)}
.workings li::before{content:'→'; position:absolute; left:0; color:var(--method-blue)}
.workings li:last-child{border-bottom:0; color:var(--text); font-weight:600}

.big-figure{font-size:33px; font-weight:700; letter-spacing:-.03em}
.note{font-size:12px; color:var(--muted); line-height:1.55}
.alert{display:flex; gap:10px; padding:11px 13px; border-radius:10px; margin-bottom:9px; font-size:12.5px; line-height:1.5}
.a-violation{background:rgba(208,43,57,.11); color:var(--danger)}
.a-warning{background:rgba(184,114,0,.13); color:var(--warn)}
.a-info{background:rgba(0,98,251,.10); color:var(--method-blue)}
.alert b{display:block; margin-bottom:1px}
.alert .ref{opacity:.75; font-size:11px; margin-top:3px}

/* kanban */
.board{display:grid; grid-template-columns:repeat(8,minmax(158px,1fr)); gap:11px; overflow-x:auto; padding-bottom:8px}
.col{background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:12px; padding:11px; min-height:230px}
.col h4{margin:0 0 9px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; justify-content:space-between}
.col h4 span{background:var(--blue-100); color:var(--muted); border-radius:999px; padding:1px 7px; font-size:10.5px}
.cand{background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:9px 10px; margin-bottom:7px; cursor:grab; font-size:12.5px}
.cand:hover{border-color:var(--method-blue)}
.cand b{display:block; font-weight:600; margin-bottom:2px}
.cand span{color:var(--muted); font-size:11px}
.cand.drag{opacity:.4}
.col.over{outline:2px dashed var(--method-blue); outline-offset:-3px}

.bars{display:flex; flex-direction:column; gap:9px}
.bar-row{display:grid; grid-template-columns:96px 1fr 40px; align-items:center; gap:10px; font-size:12.5px}
.bar{height:8px; border-radius:999px; background:var(--blue-100); overflow:hidden}
.bar i{display:block; height:100%; border-radius:999px; background:var(--method-blue)}
.muted{color:var(--muted)}
@media (max-width:1100px){ .kpis{grid-template-columns:repeat(2,1fr)} .cols-2{grid-template-columns:1fr} }

/* Blade layout uses anchors in the rail rather than buttons */
.nav a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  color:var(--rail-text); cursor:pointer; font-size:13.5px; font-weight:500;
  text-decoration:none; transition:background .16s,color .16s;
}
.nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.nav a[aria-current="page"]{background:var(--rail-active); color:#fff; font-weight:600}
.topbar form{margin:0}

/* ---------- flash + forms added with the feature build ---------- */
.flash{padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:13px;font-weight:500}
.flash-ok{background:rgba(14,159,110,.13);color:var(--ok)}
.flash-bad{background:rgba(208,43,57,.12);color:var(--danger)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:0;border-radius:9px;
  background:var(--method-blue);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--blue-600)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:transparent;border-color:var(--method-blue)}
.btn-ok{background:var(--ok)} .btn-bad{background:var(--danger)}
.btn-sm{padding:5px 10px;font-size:12px}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
textarea{width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);font:inherit;font-size:13.5px;min-height:74px;resize:vertical}
textarea:focus{outline:2px solid var(--method-blue);outline-offset:-1px;border-color:transparent}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.section-head h2{margin:0}
details.panel{border:1px solid var(--border);border-radius:11px;padding:0;margin-bottom:16px;background:var(--glass-bg)}
details.panel>summary{padding:13px 17px;cursor:pointer;font-weight:600;font-size:13.5px;list-style:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:'+ ';color:var(--method-blue);font-weight:700}
details.panel[open]>summary::before{content:'– '}
details.panel>div{padding:0 17px 17px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;text-transform:none;letter-spacing:0;
  font-weight:500;color:var(--text);margin-bottom:9px}
.check input{width:auto}
.tag-cat{background:var(--blue-100);color:var(--muted);padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}

/* An expired residency is a different class of problem from an expiring one:
   the employment itself is unlawful until it is renewed. */
.t-expired{background:rgba(208,43,57,.16);color:var(--danger);font-weight:700}
.stat-strip{display:flex;gap:22px;flex-wrap:wrap;padding:12px 0}
.stat-strip > div{min-width:120px}
.stat-strip .l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.stat-strip .v{font-size:19px;font-weight:650;letter-spacing:-.02em;margin-top:2px}
.payslip-line{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.payslip-line:last-child{border-bottom:0}
.payslip-line.total{font-weight:700;font-size:15px;border-top:2px solid var(--border);border-bottom:0;margin-top:6px;padding-top:11px}