:root{
  /* ── FertProMax brand ──────────────────────────────────────────────────
     Green and orange, taken from the logo. Green carries the interface —
     navigation, primary actions, positive states. Orange is the accent that
     draws the eye to the one thing that matters on a screen: a figure that
     needs attention, a pending count, the active section. Used sparingly it
     stays energetic; used everywhere it would shout. */
  --green:#177245; --green-dark:#0e5432; --green-deep:#0a3d24;
  --green-soft:#e6f4ec; --green-mid:#c3e6d3;
  --orange:#ef6c17; --orange-dark:#c8530b; --orange-soft:#fff0e4; --orange-mid:#ffd7bb;

  --primary:var(--green); --primary-dark:var(--green-dark); --primary-soft:var(--green-soft);
  --accent:var(--orange); --accent-dark:var(--orange-dark); --accent-soft:var(--orange-soft);

  /* Neutrals — warm-tinted so they sit with the brand rather than against it */
  --bg:#f6f8f7; --surface:#ffffff; --surface-2:#fbfcfb;
  --ink:#152219; --ink-2:#33443a; --muted:#6b7a72; --line:#e3e9e5; --line-2:#eef2ef;

  --good:#177245; --good-soft:#e6f4ec; --warn:#b45309; --warn-soft:#fef3c7;
  --bad:#c0392b; --bad-soft:#fdecea; --info:#1d4ed8; --info-soft:#e0e7ff;

  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow:0 1px 2px rgba(10,61,36,.05), 0 4px 12px rgba(10,61,36,.05);
  --shadow-lg:0 8px 28px rgba(10,61,36,.12);
  --ring:0 0 0 3px rgba(23,114,69,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;font-size:15px;-webkit-tap-highlight-color:transparent}
a{color:var(--primary-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0}
h2{font-size:1.1rem;margin:0 0 .75rem}
.muted{color:var(--muted)}
.small{font-size:.82rem}

/* Topbar */
.topbar{display:flex;align-items:center;gap:1rem;background:var(--surface);
  border-bottom:1px solid var(--line);padding:.6rem 1.25rem;position:sticky;top:0;z-index:50;flex-wrap:wrap}
.brand a{font-weight:700;color:var(--ink);font-size:1.05rem}
.mainnav{display:flex;gap:.25rem;flex:1;flex-wrap:wrap;align-items:center}
.mainnav a{padding:.4rem .7rem;border-radius:8px;color:var(--muted);font-weight:500;font-size:.9rem}
.mainnav a:hover{background:var(--bg);text-decoration:none;color:var(--ink)}
.mainnav a.active{background:var(--primary-soft);color:var(--primary-dark)}
.nav-sep{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding-left:.6rem;border-left:1px solid var(--line);margin-left:.3rem}
.user-menu{display:flex;align-items:center;gap:.6rem}
.who{display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-weight:600}
.who-name{font-size:.9rem}
.logout{color:var(--muted);font-size:.85rem}
.menu-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer}

/* Layout */
.container{max-width:1100px;margin:1.5rem auto;padding:0 1.25rem}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.head-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.sitefoot{text-align:center;color:var(--muted);font-size:.8rem;padding:2rem 1rem}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem;box-shadow:var(--shadow);margin-bottom:1.25rem}
.card.narrow{max-width:480px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}

/* Stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.25rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem;box-shadow:var(--shadow);border-left:4px solid var(--primary)}
.stat-good{border-left-color:var(--good)} .stat-warn{border-left-color:var(--warn)} .stat-bad{border-left-color:var(--bad)}
.stat-num{font-size:1.8rem;font-weight:700}
.stat-label{color:var(--muted);font-size:.85rem}
.quick-links{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);padding:.5rem .9rem;border-radius:8px;font-size:.88rem;cursor:pointer;font-weight:500;
  transition:.15s}
.btn:hover{background:var(--bg);text-decoration:none}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent}
.btn-sm{padding:.3rem .6rem;font-size:.8rem}
.btn-lg{padding:.7rem 1.4rem;font-size:1rem}
.btn-block{width:100%;justify-content:center}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);border-bottom:2px solid var(--line);padding:.6rem .5rem}
.table td{padding:.65rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:hover td{background:#fafbfc}
.row-actions{display:flex;gap:.4rem;flex-wrap:wrap}

/* Badges */
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600;text-transform:capitalize}
.badge-present{background:var(--good-soft);color:var(--good)}
.badge-late{background:var(--warn-soft);color:var(--warn)}
.badge-leave{background:var(--info-soft);color:var(--info)}
.badge-absent{background:var(--bad-soft);color:var(--bad)}
.role-admin{background:#ede9fe;color:#6d28d9}
.role-manager{background:var(--info-soft);color:var(--info)}
.role-hr{background:#fce7f3;color:#be185d}
.role-accountant{background:#ecfccb;color:#4d7c0f}
.role-staff{background:var(--bg);color:var(--muted)}

/* Birthday banners */
.bday-hero{background:linear-gradient(135deg,#fdf2f8,#eff6ff);border:1px solid #fbcfe8;border-radius:var(--radius);
  padding:1.1rem 1.25rem;margin-bottom:1rem;font-size:1.15rem;font-weight:700;color:#be185d}
.bday-hero span{display:block;font-size:.9rem;font-weight:400;color:var(--muted);margin-top:.25rem}
.bday-note{background:#fef3c7;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:.7rem 1rem;margin-bottom:.75rem}
.bday-soon{background:var(--info-soft);border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:.6rem 1rem;margin-bottom:.75rem;font-size:.9rem}
.notice-card{border-left:4px solid var(--primary)}
.notice-item{padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.notice-item:last-child{border-bottom:none}

/* Interactive notice board */
.reactions{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0}
.react-btn{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;cursor:pointer;font-size:.9rem}
.react-btn:hover{background:#eef2f5}
.react-btn.reacted{background:var(--primary-soft);border-color:var(--primary)}
.react-btn .rc{color:var(--muted);font-size:.8rem}
.comments{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.6rem}
.comments-head{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:.4rem}
.comment{display:flex;align-items:baseline;gap:.5rem;padding:.35rem 0;border-bottom:1px solid #f1f3f5;font-size:.9rem}
.comment .c-author{font-weight:600}
.comment .c-body{flex:1}
.c-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem}
.comment-form{margin-top:.6rem}
.comment-form input{flex:1;margin:0}
.rating{color:var(--warn);font-weight:700}

/* Forms */
form.stack{display:flex;flex-direction:column;gap:.9rem}
label{display:block;font-size:.85rem;font-weight:500;color:var(--ink)}
input,select,textarea{width:100%;padding:.55rem .65rem;border:1px solid var(--line);border-radius:8px;
  font-size:.9rem;font-family:inherit;margin-top:.25rem;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.form-grid .wide{grid-column:1/-1}
.form-actions{grid-column:1/-1;display:flex;gap:.5rem;margin-top:.5rem}
.checkbox{display:flex;align-items:center;gap:.5rem}
.checkbox input{width:auto;margin:0}
.inline-form{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:0}
.inline-form input,.inline-form select{width:auto;margin:0}
.inline-label{display:flex;align-items:center;gap:.4rem;font-size:.85rem}
.note-input{max-width:130px}
.itemset{border:1px solid var(--line);border-radius:8px;padding:.9rem;margin:0}
.itemset legend{font-weight:600;padding:0 .4rem;font-size:.85rem}
.item-row{display:flex;gap:.5rem;margin-bottom:.5rem}
.item-row input:first-child{flex:2}.item-row input:nth-child(2){flex:1}
.net-preview{font-size:1.1rem;padding:.6rem 0}

/* Flash */
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}
.flash-success{background:var(--good-soft);color:#166534}
.flash-error{background:var(--bad-soft);color:#991b1b}
.flash-info{background:var(--info-soft);color:#1e40af}

/* Auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:linear-gradient(135deg,#0d9488,#0f766e)}
.auth-card{background:#fff;border-radius:16px;padding:2.25rem;width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.auth-brand{font-weight:700;font-size:1.2rem;margin-bottom:1rem}
.auth-card h1{font-size:1.3rem}
.auth-card p.muted{margin-top:.2rem;margin-bottom:1.25rem}

/* Clock card */
.clock-card{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.done-pill{background:var(--good-soft);color:var(--good);padding:.6rem 1.1rem;border-radius:999px;font-weight:600}

/* KPI bars */
.bar{display:inline-block;width:100%;height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin:.4rem 0}
.bar-sm{width:80px;vertical-align:middle}
.bar-fill{display:block;height:100%;background:var(--primary)}
.kpi-mini{list-style:none;padding:0;margin:0 0 .5rem}
.kpi-mini li{display:grid;grid-template-columns:1fr 80px 40px;align-items:center;gap:.5rem;margin-bottom:.4rem;font-size:.85rem}
.kpi-mini .pct{text-align:right;color:var(--muted)}
.kpi-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.kpi-progress{margin-top:.5rem}
.kpi-progress input[type=range]{flex:1}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1rem}
.error-page{text-align:center;padding:3rem 1rem}
.error-page h1{margin-bottom:.5rem}

/* ===== Charts (attendance analytics) ===== */
.legend{display:flex;flex-wrap:wrap;gap:1rem;margin:.5rem 0 1rem;font-size:.85rem;color:var(--muted)}
.lg{display:inline-flex;align-items:center;gap:.4rem}
.lg-swatch{width:12px;height:12px;border-radius:3px;display:inline-block}
.stackbar{display:flex;width:100%;height:22px;border-radius:6px;overflow:hidden;background:var(--bg)}
.stackbar.sb-sm{height:14px}
.stackbar .seg{height:100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.dept-row{display:grid;grid-template-columns:180px 1fr;gap:1rem;align-items:center;padding:.4rem 0}
.dept-name{font-weight:600;font-size:.9rem}
.trend{display:flex;align-items:flex-end;gap:3px;height:130px;overflow-x:auto;padding-top:.5rem}
.trend-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:16px}
.trend-bar{width:12px;background:var(--primary);border-radius:4px 4px 0 0;min-height:2px}
.trend-x{font-size:.6rem;color:var(--muted);margin-top:.2rem}
@media(max-width:620px){.dept-row{grid-template-columns:110px 1fr}}

/* ===== Chat / messages / tasks ===== */
.nav-badge{background:var(--bad);color:#fff;border-radius:999px;padding:0 .4rem;font-size:.7rem;font-weight:700}
.conv-row{display:flex;align-items:center;gap:.75rem;padding:.6rem .25rem;border-bottom:1px solid var(--line);color:var(--ink)}
.conv-row:last-child{border-bottom:none}
.conv-row:hover{background:#fafbfc;text-decoration:none}
.conv-avatar{width:40px;height:40px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);display:grid;place-items:center;font-weight:700;flex-shrink:0}
.conv-main{flex:1;min-width:0}
.conv-main .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.unread-badge{background:var(--primary);color:#fff;border-radius:999px;padding:0 .5rem;font-size:.75rem;font-weight:700}
.people-list{display:flex;flex-wrap:wrap;gap:.4rem}
.chat-card{padding:0;overflow:hidden}
.chat-scroll{max-height:55vh;min-height:280px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;background:#f7f9fb}
.msg{max-width:75%;padding:.5rem .75rem;border-radius:14px;font-size:.92rem;position:relative}
.msg.mine{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.msg.theirs{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg-author{font-size:.72rem;font-weight:700;color:var(--primary-dark);margin-bottom:.15rem}
.msg-time{font-size:.66rem;opacity:.7;margin-top:.2rem;text-align:right}
.chat-compose{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--line);background:#fff}
.chat-compose input{flex:1;margin:0}
.task-done{opacity:.55}
.task-done strong{text-decoration:line-through}

/* ===== Public marketing site ===== */
body.site{background:#fff}
.site-nav{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;max-width:1150px;margin:0 auto;flex-wrap:wrap}
.site-brand{font-weight:800;font-size:1.2rem;color:var(--ink)}
.site-links{display:flex;gap:1.25rem;flex:1;flex-wrap:wrap}
.site-links a{color:var(--muted);font-weight:500}
.site-links a:hover{color:var(--ink);text-decoration:none}
.site-cta{display:flex;gap:.5rem}
.hero{background:linear-gradient(160deg,#0d9488,#0f766e);color:#fff;padding:4rem 1.5rem;text-align:center}
.hero-inner{max-width:820px;margin:0 auto}
.hero h1{font-size:2.4rem;line-height:1.15;margin-bottom:1rem}
.hero-sub{font-size:1.15rem;opacity:.95;margin-bottom:1.5rem}
.hero-cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.hero .btn:not(.btn-primary){background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn-primary{background:#fff;color:var(--primary-dark);border-color:#fff}
.hero .muted{color:rgba(255,255,255,.85)}
.trust-row{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;padding:1.25rem;background:#f0fdfa;color:var(--primary-dark);font-weight:600;font-size:.9rem}
.section{max-width:1100px;margin:0 auto;padding:3.5rem 1.5rem}
.section-alt{background:#f8fafc;max-width:100%}
.section-alt > *{max-width:1100px;margin-left:auto;margin-right:auto}
.section-title{text-align:center;font-size:1.8rem;margin-bottom:.5rem}
.section-sub{text-align:center;color:var(--muted);margin-bottom:2rem}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.feature{padding:1.25rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.feature .fi{font-size:1.8rem}
.feature h3{margin:.5rem 0}
.feature p{color:var(--muted);font-size:.92rem}
.bill-toggle{display:flex;justify-content:center;gap:.25rem;margin:-1rem auto 1.75rem;background:#e2e8f0;border-radius:999px;padding:.25rem;width:max-content}
.bill-toggle .bt{border:none;background:transparent;padding:.45rem 1.1rem;border-radius:999px;cursor:pointer;font-weight:600;color:var(--muted);font-size:.9rem}
.bill-toggle .bt.active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.bill-toggle .save{color:var(--primary-dark);font-size:.75rem;font-weight:700}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;align-items:start}
.price-card{border:1px solid var(--line);border-radius:14px;padding:1.5rem;background:#fff;position:relative}
.price-card.featured{border-color:var(--primary);box-shadow:0 8px 30px rgba(13,148,136,.15)}
.badge-pop{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:.72rem;padding:.2rem .7rem;border-radius:999px;font-weight:700}
.price{margin:.5rem 0}
.price .amt{font-size:2rem;font-weight:800}
.price .per{color:var(--muted);font-size:.9rem}
.price-card ul{list-style:none;padding:0;margin:1rem 0}
.price-card li{padding:.35rem 0;border-bottom:1px solid #f1f3f5;font-size:.9rem}
.price-card li:before{content:'✓ ';color:var(--primary);font-weight:700}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-bottom:2.5rem}
.adv{display:flex;gap:.75rem;align-items:flex-start}
.adv-i{font-size:1.5rem;line-height:1}
.adv strong{display:block;margin-bottom:.15rem}
.adv p{color:var(--muted);font-size:.9rem;margin:0}
.compare{max-width:720px;margin:0 auto}
.compare-table{width:100%;border-collapse:collapse}
.compare-table th,.compare-table td{padding:.6rem .75rem;border-bottom:1px solid var(--line);text-align:left}
.compare-table th.us,.compare-table td.us{text-align:center;background:var(--primary-soft);color:var(--primary-dark);font-weight:700}
.compare-table thead th{font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.compare-table td:nth-child(3){text-align:center;color:var(--muted)}
.hero-sm{padding:2.75rem 1.5rem}
.hero-sm h1{font-size:2rem}
.demo-tour{display:flex;flex-direction:column;gap:3rem}
.demo-step{display:grid;grid-template-columns:1fr 1.3fr;gap:2rem;align-items:center}
.demo-step.reverse{direction:rtl}
.demo-step.reverse > *{direction:ltr}
.demo-text h2{font-size:1.5rem;margin-bottom:.5rem}
.demo-text p{color:var(--muted)}
.demo-shot img{width:100%;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,.12)}
@media(max-width:760px){.demo-step,.demo-step.reverse{grid-template-columns:1fr;direction:ltr}}
.cta-band{text-align:center;background:#0f766e;color:#fff;max-width:100%}
.cta-band h2{font-size:1.6rem}
.cta-band p{opacity:.9;margin-bottom:1.25rem}
.doc{max-width:760px}
.doc h1{margin-bottom:.5rem}
.doc h3{margin-top:1.5rem}
.doc p{color:#374151}
.site-foot{background:#0b1220;color:#cbd5e1;padding:2.5rem 1.5rem 1.5rem}
.site-foot-cols{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.5rem}
.site-foot h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}
.site-foot a{display:block;color:#cbd5e1;font-size:.9rem;padding:.15rem 0}
.site-foot a:hover{color:#fff}
.site-foot .site-brand{color:#fff}
.site-foot-base{max-width:1100px;margin:1.5rem auto 0;border-top:1px solid #1f2937;padding-top:1rem}
@media(max-width:720px){.hero h1{font-size:1.8rem}.site-foot-cols{grid-template-columns:1fr 1fr}}

/* Payslip */
.payslip-body{background:#e9edf1;padding:1.5rem}
.payslip-toolbar{max-width:640px;margin:0 auto 1rem;display:flex;justify-content:space-between}
.payslip{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:2rem}
.payslip-head{display:flex;justify-content:space-between;border-bottom:2px solid var(--primary);padding-bottom:1rem;margin-bottom:1rem}
.payslip-company{font-size:1.3rem;font-weight:700;color:var(--primary-dark)}
.payslip-period .big{font-size:1.2rem;font-weight:700}
.payslip-period{text-align:right}
.payslip-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:1.25rem}
.payslip-table{width:100%;border-collapse:collapse}
.payslip-table td{padding:.5rem .3rem;border-bottom:1px solid var(--line)}
.payslip-table .amt{text-align:right;font-variant-numeric:tabular-nums}
.payslip-table .section-row td{font-weight:700;color:var(--primary-dark);border-bottom:2px solid var(--line);padding-top:1rem}
.payslip-table .subtotal td{font-weight:600;background:#f8fafc}
.payslip-table .net-row td{font-weight:700;font-size:1.15rem;border-top:2px solid var(--primary);border-bottom:none;padding-top:.8rem}
.payslip-notes{margin-top:1rem}
.payslip-foot{display:flex;justify-content:space-between;margin-top:2rem;border-top:1px solid var(--line);padding-top:.8rem}

@media print{
  .no-print{display:none!important}
  .payslip-body{background:#fff;padding:0}
  .payslip{border:none;max-width:100%;padding:.5rem}
}

/* ===== Responsive — tablet & below ===== */
@media(max-width:820px){
  .menu-toggle{display:grid;place-items:center;order:3;margin-left:auto;width:42px;height:42px;
    border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
  body.nav-open .menu-toggle{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark)}
  .user-menu{order:4}
  /* Slide-down nav panel — flex-basis:100% forces it onto its own row */
  .mainnav{display:none;flex:0 0 100%;width:100%;flex-direction:column;order:6;gap:2px;
    border-top:1px solid var(--line);margin-top:.55rem;padding:.5rem 0 .35rem;
    max-height:calc(100vh - 130px);overflow-y:auto;overscroll-behavior:contain}
  body.nav-open .mainnav{display:flex;animation:navdrop .16s ease-out}
  .mainnav a{width:100%;padding:.72rem .9rem;font-size:1rem;border-radius:10px;color:var(--ink)}
  .mainnav a:active{background:var(--primary-soft)}
  .mainnav a.active{background:var(--primary-soft);color:var(--primary-dark);font-weight:600}
  .nav-sep{width:100%;border-left:none;margin:.4rem 0 .1rem;padding:.35rem .9rem .1rem;
    border-top:1px solid var(--line);padding-top:.65rem}
}
@keyframes navdrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===== Phones — superb small-screen experience ===== */
@media(max-width:640px){
  body{font-size:15.5px}
  /* Topbar: compact, app-like */
  .topbar{padding:.5rem .8rem;gap:.6rem;box-shadow:0 1px 8px rgba(16,24,40,.06)}
  .who-name{display:none}
  .avatar{width:34px;height:34px}
  .logout{font-size:.8rem}

  /* Layout rhythm */
  .container{margin:.9rem auto;padding:0 .8rem}
  .page-head{margin-bottom:.9rem;gap:.6rem}
  h1{font-size:1.28rem}
  h2{font-size:1.02rem}
  .card{padding:.95rem;margin-bottom:.9rem;border-radius:14px}
  .card-grid{gap:.9rem}

  /* Stats: tidy 2-up tiles */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:.9rem}
  .stat{padding:.8rem .85rem;border-radius:12px}
  .stat-num{font-size:1.45rem}
  .stat-label{font-size:.78rem}
  .quick-links{gap:.45rem;margin-bottom:.9rem}

  /* Touch targets & iOS-friendly inputs (16px stops auto-zoom) */
  .btn{padding:.62rem 1rem;font-size:.92rem;border-radius:10px;min-height:42px}
  .btn-sm{padding:.4rem .7rem;font-size:.82rem;min-height:34px}
  input,select,textarea{font-size:16px;padding:.65rem .75rem;border-radius:10px}
  .checkbox input{min-height:auto}
  .form-actions .btn{flex:1;justify-content:center}

  /* Tables: scroll inside the card instead of breaking the page */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{font-size:.88rem}
  .table th,.table td{padding:.55rem .45rem;vertical-align:middle}
  .table th{font-size:.68rem}
  /* Keep inline row controls compact instead of stretching the row */
  .table .inline-form{gap:.3rem}
  .table .inline-form select,.table .inline-form input{font-size:14px;padding:.35rem .4rem;margin:0}
  .table .note-input{max-width:104px}
  .table .btn{padding:.32rem .55rem;font-size:.78rem;min-height:32px}
  .row-actions{gap:.3rem}

  /* Chat feels like a messaging app */
  .msg{max-width:88%}
  .chat-scroll{max-height:62vh}
  .conv-row{padding:.7rem .15rem}

  /* Auth */
  .auth-wrap{padding:1rem}
  .auth-card{padding:1.4rem 1.2rem;border-radius:18px}

  /* Payslip readable on a phone */
  .payslip-body{padding:.8rem}
  .payslip{padding:1.1rem}
  .payslip-head{flex-direction:column;gap:.5rem}
  .payslip-period{text-align:left}

  /* Celebration / info banners: compact so real content stays above the fold */
  .bday-hero{padding:.8rem .9rem;font-size:1rem;margin-bottom:.6rem}
  .bday-hero span{font-size:.84rem}
  .bday-note,.bday-soon{padding:.6rem .75rem;margin-bottom:.5rem;font-size:.86rem;line-height:1.45}
  .flash{padding:.65rem .85rem;font-size:.87rem}

  /* Misc grids */
  .profile-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .kpi-mini li{grid-template-columns:1fr 64px 36px}
  .clock-card{flex-direction:column;align-items:stretch;text-align:center}
  .clock-card .btn{justify-content:center}
}

/* Installed as an app (PWA): respect the notch / status bar */
@media (display-mode: standalone){
  .topbar{padding-top:calc(.5rem + env(safe-area-inset-top))}
  .container{padding-left:calc(.8rem + env(safe-area-inset-left));padding-right:calc(.8rem + env(safe-area-inset-right))}
}

/* Brand logo (FertProMax HBS) */
.brand{flex:0 0 auto;min-width:0}
.brand a{display:inline-flex;align-items:center}
.brand-logo{height:40px;width:auto;max-width:150px;object-fit:contain;display:block}
.auth-brand{display:flex;justify-content:center}
.brand-logo-lg{width:auto;max-width:220px;max-height:150px;height:auto;display:block;margin:0 auto .5rem}

/* Tablet */
@media (max-width:820px){
  .brand-logo{height:34px}
}
/* Phones — keep the near-square logo compact so it never dominates */
@media (max-width:640px){
  .brand-logo{height:30px;max-width:120px}
  .brand-logo-lg{max-width:150px;max-height:104px;margin-bottom:.4rem}
}

/* Self-appraisal reminder banner */
.appraisal-alert{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(135deg,#fff7ed,#ecfeff);border:1px solid #fdba74;border-left:4px solid #f97316;
  border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:1rem}
.appraisal-alert strong{display:block;color:#9a3412}
.appraisal-alert span{display:block;font-size:.88rem;color:var(--muted);margin-top:.15rem}
@media(max-width:640px){
  .appraisal-alert{padding:.8rem .9rem}
  .appraisal-alert .btn{width:100%;justify-content:center}
}

/* Setup checklist */
.setup-step{display:flex;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.setup-step:last-child{border-bottom:none}
.setup-num{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--primary-soft);
  color:var(--primary-dark);display:grid;place-items:center;font-weight:700}
.setup-step.is-done .setup-num{background:var(--good-soft);color:var(--good)}
.setup-body{flex:1;min-width:0}
.setup-body h3{margin:.1rem 0 .3rem;font-size:1rem}
.setup-body p{margin:0 0 .5rem;color:var(--muted);font-size:.9rem}
.setup-actions{display:flex;gap:.4rem;flex-wrap:wrap}

/* Range sliders (self-appraisal) — brand-coloured, touch-friendly */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;padding:0;border:none;
  margin-top:.5rem;height:28px;box-shadow:none}
input[type=range]:focus{outline:none;box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--line)}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
  margin-top:-9px;border-radius:50%;background:var(--primary);border:3px solid #fff;
  box-shadow:0 1px 4px rgba(16,24,40,.3);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--primary);
  border:3px solid #fff;box-shadow:0 1px 4px rgba(16,24,40,.3);cursor:pointer}
.itemset output.rating{font-size:1.05rem}

/* Scrollable table affordance on small screens */
@media(max-width:640px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Tables that still scroll sideways get a minimum width so columns stay
     readable — but NOT the ones that restack into cards, which must be free
     to shrink to the width of the phone. */
  .card > .table:not(.stack){min-width:520px}
}

/* Clock-in policy: weekday picker + status note */
.day-picker{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.day-chip{position:relative;margin:0}
.day-chip input{position:absolute;opacity:0;width:0;height:0;margin:0}
.day-chip span{display:inline-grid;place-items:center;min-width:52px;padding:.5rem .6rem;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer;user-select:none;transition:.15s}
.day-chip input:checked + span{background:var(--primary);border-color:var(--primary);color:#fff}
.day-chip input:focus-visible + span{box-shadow:0 0 0 3px var(--primary-soft)}
.policy-note{margin:.35rem 0 0;font-weight:500}
.policy-note.is-onsite{color:var(--primary-dark)}
.policy-note.is-free{color:var(--muted)}
@media(max-width:640px){.day-chip span{min-width:44px;padding:.55rem .45rem;font-size:.8rem}}

/* Org chart & departments */
.org-unit{padding:.5rem 0}
.org-unit.is-child{margin-left:1rem;padding-left:.9rem;border-left:2px solid var(--line);margin-top:.75rem}
.org-unit h3{margin:0;font-size:1rem}
.org-list{list-style:none;padding:0;margin:.5rem 0 0}
.org-list li{display:grid;grid-template-columns:1.4fr 1fr 1.2fr auto;gap:.6rem;align-items:center;
  padding:.45rem 0;border-bottom:1px solid #f1f3f5;font-size:.9rem}
.org-list li:last-child{border-bottom:none}
.org-name{font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.dept-child{border-left:3px solid var(--primary-soft);padding:.6rem 0 .6rem .9rem;margin-top:.6rem}
@media(max-width:640px){
  .org-list li{grid-template-columns:1fr;gap:.15rem;padding:.6rem 0}
  .org-unit.is-child{margin-left:.4rem;padding-left:.6rem}
}

/* Platform console — visually distinct from an organization's HR app */
body.platform{--primary:#334e68;--primary-dark:#243b53;--primary-soft:#dbe4ee}
body.platform .topbar.plat-bar{background:#1e293b;border-bottom-color:#334155}
body.platform .plat-bar .brand a{color:#f1f5f9;font-weight:700;display:inline-flex;gap:.45rem;align-items:center}
body.platform .plat-bar .mainnav a{color:#94a3b8}
body.platform .plat-bar .mainnav a:hover{background:#334155;color:#f1f5f9}
body.platform .plat-bar .mainnav a.active{background:#334e68;color:#fff}
body.platform .plat-bar .who-name{color:#94a3b8}
body.platform .plat-bar .logout{color:#cbd5e1}
body.platform .plat-bar .menu-toggle{color:#f1f5f9;border-color:#475569;background:#334155}
body.platform .auth-wrap.plat-auth{background:linear-gradient(140deg,#1e293b,#334e68)}
body.platform code{background:var(--bg);padding:.1rem .35rem;border-radius:4px;font-size:.86em}

/* Organization launcher (mobile app entry point) */
.org-input{display:flex;align-items:stretch;gap:0;margin-top:.25rem}
.org-input input{border-top-right-radius:0;border-bottom-right-radius:0;margin-top:0;text-align:right}
.org-suffix{display:grid;place-items:center;padding:0 .7rem;background:var(--bg);border:1px solid var(--line);
  border-left:none;border-top-right-radius:8px;border-bottom-right-radius:8px;color:var(--muted);
  font-size:.9rem;white-space:nowrap}
.switch-org{font-size:1rem;opacity:.6}
.switch-org:hover{opacity:1;text-decoration:none}

/* ── Leave decline box ─────────────────────────────────────────────── */
.decline-box { display: inline-block; position: relative; }
.decline-box > summary { list-style: none; cursor: pointer; display: inline-block; }
.decline-box > summary::-webkit-details-marker { display: none; }
.decline-form {
  position: absolute; right: 0; z-index: 30; width: min(19rem, 78vw);
  background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0);
  border-radius: .6rem; padding: .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.14); text-align: left;
}
.decline-form textarea { width: 100%; margin-top: .25rem; }
.decline-form .btn { margin-top: .5rem; width: 100%; }
.req { color: #dc2626; }
.decision-note { margin-top: .3rem; line-height: 1.35; }
@media (max-width: 640px) { .decline-form { position: static; width: 100%; box-shadow: none; margin-top: .5rem; } }

/* ── Say Something ─────────────────────────────────────────────────── */
.protect-note { border-left: 4px solid #0d9488; }
.protect-note h2 { margin-top: 0; }
.anon-tag {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  background: #e2e8f0; color: #334155; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.anon-tag-lg { font-size: 1rem; padding: .35rem .9rem; }
.tracking-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 700; letter-spacing: .12em; text-align: center; padding: 1.1rem .5rem; margin: 1rem 0;
  background: #0f766e; color: #fff; border-radius: .6rem; word-break: break-all;
}
.code-card { max-width: 34rem; }
.report-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.report-head h2 { margin: 0; }
.report-body { white-space: pre-wrap; line-height: 1.6; }
.outcome { margin-top: 1rem; padding: .75rem; background: #f0fdf4; border-radius: .5rem; }
.wb-msg { padding: .65rem .8rem; border-radius: .55rem; margin-bottom: .6rem; background: #f1f5f9; }
.wb-msg-handler { background: #ecfdf5; }
.wb-msg > div:last-child { white-space: pre-wrap; margin-top: .2rem; }
.inline-lookup { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.inline-lookup label { flex: 1 1 12rem; }
.unmask-box > summary { list-style: none; cursor: pointer; display: inline-block; }
.unmask-box > summary::-webkit-details-marker { display: none; }
.unmask-form { margin-top: .75rem; padding: .9rem; border: 1px solid #fecaca; background: #fef2f2; border-radius: .6rem; }
.unmask-form textarea { width: 100%; }
.unmasked { padding: .9rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: .6rem; }
.unmasked-name { font-size: 1.15rem; font-weight: 700; }
.audit-trail { margin-top: 1.25rem; border-top: 1px solid var(--line, #e2e8f0); padding-top: .9rem; }
.audit-trail h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.audit-entry { padding: .5rem 0; border-bottom: 1px dashed var(--line, #e2e8f0); font-size: .9rem; }
.filter-row { display: flex; gap: .5rem; margin-bottom: .9rem; flex-wrap: wrap; }

/* ── Recognition ───────────────────────────────────────────────────── */
.rec-wall { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.rec-card { display: flex; gap: .7rem; padding: .9rem; border: 1px solid var(--line, #e2e8f0); border-radius: .7rem; background: linear-gradient(180deg, #fffdf5, #fff); }
.rec-star { font-size: 1.4rem; color: #f59e0b; line-height: 1; }
.rec-name { font-weight: 700; }
.rec-cat { display: inline-block; margin: .35rem 0; padding: .1rem .5rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 600; }
.rec-citation { white-space: pre-wrap; line-height: 1.5; margin: .4rem 0; }
.approve-row { display: flex; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line, #e2e8f0); flex-wrap: wrap; }
.approve-main { flex: 1 1 18rem; }
.approve-actions { display: flex; gap: .5rem; align-items: flex-start; }
@media (max-width: 640px) {
  .rec-wall { grid-template-columns: 1fr; }
  .approve-actions { width: 100%; }
}

/* Payslip: gross leads, its components are indented beneath it */
.payslip-table tr.breakdown td:first-child { padding-left: 1.5rem; color: #64748b; font-size: .92rem; }
.payslip-table tr.breakdown td { border-bottom: none; padding-top: .15rem; padding-bottom: .15rem; }
.payslip-employer { margin-top: .75rem; padding: .6rem .75rem; background: #f0fdf4; border-radius: .5rem; }

/* Pension split preview */
.split-preview { margin-top: .75rem; padding: .7rem .85rem; background: #f8fafc; border: 1px solid var(--line, #e2e8f0); border-radius: .55rem; max-width: 22rem; }
.split-row { display: flex; justify-content: space-between; padding: .2rem 0; font-size: .92rem; }
.split-total { border-top: 1px solid var(--line, #e2e8f0); margin-top: .3rem; padding-top: .4rem; }
.split-warn { margin-top: .5rem; padding: .45rem .6rem; background: #fef3c7; color: #92400e; border-radius: .4rem; font-size: .82rem; }

/* Evidence attachments */
.ssss-head h1 { line-height: 1.1; letter-spacing: .02em; }
.evidence-list { margin-top: 1rem; border-top: 1px solid var(--line, #e2e8f0); padding-top: .75rem; }
.evidence-list h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin: 0 0 .5rem; }
.evidence-item {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; margin-bottom: .4rem;
  border: 1px solid var(--line, #e2e8f0); border-radius: .5rem; text-decoration: none; color: inherit; background: #f8fafc;
}
.evidence-item:hover { background: #f1f5f9; }
.evidence-icon { font-size: 1.1rem; }
.evidence-name { flex: 1; word-break: break-word; }

/* ── Catalogued navigation ─────────────────────────────────────────────
   Groups are <details>. On a laptop a group opens as a floating panel over
   the page; on a phone the whole nav is already a vertical drawer, so the
   group expands inline as an accordion instead. */
.navgroup { position: relative; }
.navgroup > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: .4rem .7rem; border-radius: 8px; color: var(--muted);
  font-weight: 500; font-size: .9rem; display: inline-flex; align-items: center; gap: .3rem;
}
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after { content: '⌄'; font-size: .85em; opacity: .6; line-height: 1; }
.navgroup > summary:hover { background: var(--bg); color: var(--ink); }
.navgroup > summary.active { background: var(--primary-soft); color: var(--primary-dark); }
.navgroup[open] > summary::after { transform: rotate(180deg); }

.navpanel {
  position: absolute; top: calc(100% + .35rem); left: 0; z-index: 60; min-width: 13.5rem;
  display: flex; flex-direction: column; gap: 1px; padding: .35rem;
  background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0);
  border-radius: .6rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .13);
}
.navpanel a { white-space: nowrap; padding: .5rem .7rem; }

@media (max-width: 900px) {
  /* Inside the mobile drawer the group is an accordion, not a floating panel */
  .navgroup { width: 100%; }
  .navgroup > summary { width: 100%; padding: .72rem .9rem; font-size: 1rem; border-radius: 10px; color: var(--ink); justify-content: space-between; }
  .navpanel {
    position: static; box-shadow: none; border: none; background: transparent;
    padding: .1rem 0 .35rem .75rem; min-width: 0; border-left: 2px solid var(--line, #e2e8f0); margin-left: .9rem;
  }
  .navpanel a { white-space: normal; font-size: .95rem; padding: .6rem .8rem; }
}

/* ── Reports ───────────────────────────────────────────────────────────── */
.report-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.report-tile { padding: .9rem; border: 1px solid var(--line, #e2e8f0); border-radius: .65rem; background: #fbfdff; }
.report-tile h3 { margin: 0 0 .3rem; font-size: 1rem; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--primary, #0d9488); padding-bottom: .7rem; margin-bottom: 1rem; }
.sheet-head h2 { margin: .15rem 0; }
.sheet-org { font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.sheet h3 { margin-top: 1.5rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
.rec-line { padding: .5rem 0; border-bottom: 1px dashed var(--line, #e2e8f0); }
.glossary { margin-top: 1rem; padding: .6rem .75rem; background: #f8fafc; border-radius: .5rem; }
.sign-off { display: flex; gap: 3rem; margin-top: 2.5rem; flex-wrap: wrap; }
.sign-off > div { flex: 1 1 12rem; font-size: .85rem; color: #64748b; }
.sign-line { display: block; border-bottom: 1px solid #94a3b8; height: 2.2rem; margin-bottom: .3rem; }

/* Printing: drop the interface, keep only the document */
@media print {
  .topbar, .no-print, .menu-toggle, .user-menu, footer, .flash { display: none !important; }
  body { background: #fff; }
  .container { max-width: none; padding: 0; margin: 0; }
  .card, .sheet { box-shadow: none; border: none; padding: 0; margin: 0; }
  .stat-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
  .stat { border: 1px solid #cbd5e1; }
  .table, .payslip-table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  .sheet h3 { page-break-after: avoid; }
  a[href]:after { content: ''; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FertProMax visual layer
   Loaded last so it refines what came before rather than fighting it.
   ═══════════════════════════════════════════════════════════════════════ */

body{font-size:15.5px;color:var(--ink)}
h1{font-size:1.55rem;letter-spacing:-.015em;font-weight:700}
h2{font-size:1.08rem;letter-spacing:-.01em;font-weight:650}
a{color:var(--green-dark)}
::selection{background:var(--green-mid)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:.55rem 1.5rem;gap:1.1rem;box-shadow:0 1px 0 rgba(10,61,36,.03);
}
/* A hairline of brand colour under the bar: green running into orange */
.topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--green) 0%,var(--green) 55%,var(--orange) 100%);
}
.topbar{position:sticky;top:0}
.brand-logo{height:34px;width:auto;display:block}
.avatar{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  box-shadow:0 2px 6px rgba(23,114,69,.28);font-size:.9rem
}
.who-name{font-weight:600;color:var(--ink-2)}
.logout{font-weight:500}
.logout:hover{color:var(--orange-dark);text-decoration:none}

/* ── Navigation ──────────────────────────────────────────────────────── */
.mainnav{gap:.15rem}
.mainnav a,.navgroup>summary{
  font-weight:550;font-size:.895rem;color:var(--ink-2);border-radius:10px;
  transition:background .13s ease,color .13s ease
}
.mainnav a:hover,.navgroup>summary:hover{background:var(--green-soft);color:var(--green-dark)}
.mainnav>a.active,.navgroup>summary.active{
  background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(23,114,69,.25)
}
.navgroup>summary.active::after{opacity:.85}
.navpanel{
  border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.4rem;
  border-top:3px solid var(--green)
}
.navpanel a{border-radius:8px;color:var(--ink-2);font-weight:500}
.navpanel a.active{background:var(--green-soft);color:var(--green-dark);font-weight:650}
.navpanel a.active::before{content:'';display:inline-block;width:3px;height:1em;background:var(--orange);
  border-radius:2px;margin-right:.5rem;vertical-align:-.15em}

/* Counts that need attention are orange — the one colour that interrupts */
.nav-badge{
  background:var(--orange);color:#fff;border-radius:999px;padding:.05rem .42rem;
  font-size:.7rem;font-weight:700;line-height:1.5;box-shadow:0 1px 3px rgba(239,108,23,.4)
}
.mainnav>a.active .nav-badge,.navgroup>summary.active .nav-badge{background:#fff;color:var(--orange-dark);box-shadow:none}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.15rem 1.25rem;margin-bottom:1.15rem
}
.card>h2:first-child{
  display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--line-2);color:var(--ink)
}
.card>h2:first-child::before{
  content:'';width:4px;height:1.05em;border-radius:3px;flex:0 0 4px;
  background:linear-gradient(180deg,var(--green),var(--orange))
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  border-radius:10px;font-weight:600;letter-spacing:.005em;
  transition:transform .1s ease,box-shadow .13s ease,background .13s ease
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);
  border-color:var(--green-dark);color:#fff;box-shadow:0 2px 8px rgba(23,114,69,.28)
}
.btn-primary:hover{box-shadow:0 4px 14px rgba(23,114,69,.36)}
.btn-accent{
  background:linear-gradient(180deg,var(--orange) 0%,var(--orange-dark) 100%);
  border:1px solid var(--orange-dark);color:#fff;box-shadow:0 2px 8px rgba(239,108,23,.3)
}
.btn-accent:hover{box-shadow:0 4px 14px rgba(239,108,23,.38);color:#fff}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--green-mid);background:var(--green-soft);color:var(--green-dark)}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}

/* ── Stat tiles ──────────────────────────────────────────────────────── */
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:.95rem 1.05rem;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)}
.stat-num{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.stat-label{font-size:.775rem;color:var(--muted);text-transform:uppercase;letter-spacing:.045em;font-weight:600;margin-top:.15rem}
.stat-good::before{background:var(--green)}
.stat-warn::before{background:var(--orange)}
.stat-warn .stat-num{color:var(--orange-dark)}
.stat-grid .stat:nth-child(4n+3)::before{background:var(--green-dark)}

/* ── Tables ──────────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th{
  background:var(--surface-2);font-size:.735rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;padding:.6rem .7rem;border-bottom:2px solid var(--line);text-align:left
}
.table td{padding:.7rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--green-soft)}
.th-note{display:block;text-transform:none;letter-spacing:0;font-weight:500;font-size:.68rem;color:var(--muted);opacity:.85}
.amt{text-align:right;font-variant-numeric:tabular-nums}
td.amt strong{color:var(--green-dark)}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge{border-radius:999px;padding:.16rem .58rem;font-size:.745rem;font-weight:650;letter-spacing:.01em}
.badge-present{background:var(--green-soft);color:var(--green-dark)}
.badge-late{background:var(--orange-soft);color:var(--orange-dark)}
.badge-absent{background:var(--bad-soft);color:var(--bad)}

/* ── Forms ───────────────────────────────────────────────────────────── */
input,select,textarea{
  border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;font-size:.95rem;
  font-family:inherit;background:var(--surface);color:var(--ink);transition:border-color .13s,box-shadow .13s
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:var(--ring)}
label{font-weight:550;color:var(--ink-2);font-size:.9rem}
fieldset.itemset{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9rem 1rem;background:var(--surface-2)
}
fieldset.itemset>legend{
  font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--green-dark);padding:0 .45rem
}

/* ── Flash messages ──────────────────────────────────────────────────── */
.flash{border-radius:var(--radius-sm);padding:.7rem .95rem;font-weight:550;border-left:4px solid}
.flash-success{background:var(--green-soft);border-color:var(--green);color:var(--green-dark)}
.flash-error{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}

/* ── Payslip ─────────────────────────────────────────────────────────── */
.payslip-table tr.section-row td{
  background:var(--green-soft);color:var(--green-dark);font-weight:700;
  text-transform:uppercase;font-size:.76rem;letter-spacing:.05em
}
.payslip-table tr.net-row td{
  background:linear-gradient(90deg,var(--green-soft),var(--orange-soft));
  font-weight:700;font-size:1.06rem;border-top:2px solid var(--green)
}
.payslip-table tr.net-row td.amt{color:var(--green-dark)}
.rec-cat{background:var(--orange-soft);color:var(--orange-dark)}
.rec-star{color:var(--orange)}
.rec-card{background:linear-gradient(180deg,var(--orange-soft) 0%,var(--surface) 55%)}
.tracking-code{background:linear-gradient(120deg,var(--green-dark),var(--green));box-shadow:var(--shadow-lg)}
.protect-note{border-left:4px solid var(--orange)}
.sheet-head{border-bottom:3px solid var(--green)}
.sheet-org{color:var(--green-dark)}
.report-tile{background:var(--surface-2);border-color:var(--line);transition:box-shadow .15s,border-color .15s}
.report-tile:hover{box-shadow:var(--shadow);border-color:var(--green-mid)}
.report-tile h3{color:var(--green-dark)}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile
   The drawer becomes a proper sheet: a brand header, generous tap targets,
   and groups that read as sections rather than a wall of links. Tables that
   would need sideways scrolling turn into stacked cards instead.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body{font-size:16px}
  .container{margin:1rem auto;padding:0 .9rem}
  h1{font-size:1.35rem}

  .topbar{padding:.5rem .9rem;gap:.6rem}
  .brand-logo{height:30px}
  .menu-toggle{
    display:block;background:var(--green-soft);border:1px solid var(--green-mid);
    color:var(--green-dark);border-radius:10px;width:42px;height:42px;font-size:1.15rem;line-height:1
  }
  body.nav-open .menu-toggle{background:var(--green);color:#fff;border-color:var(--green)}
  .who-name{display:none}

  .mainnav{
    background:var(--surface);border-top:1px solid var(--line-2);
    padding:.5rem .25rem .8rem;gap:.1rem;max-height:calc(100vh - 4.2rem);overflow-y:auto
  }
  .mainnav>a{
    border-radius:12px;padding:.85rem .95rem;font-size:1rem;font-weight:600;color:var(--ink)
  }
  .mainnav>a.active{background:var(--green);color:#fff}

  .navgroup>summary{
    padding:.85rem .95rem;font-size:1rem;font-weight:600;color:var(--ink);border-radius:12px
  }
  .navgroup[open]>summary{background:var(--green-soft);color:var(--green-dark)}
  .navgroup>summary.active{background:var(--green);color:#fff}
  .navpanel{
    border-left:2px solid var(--green-mid);border-top:none;margin:.15rem 0 .5rem 1.35rem;
    padding:.15rem 0 .15rem .5rem;background:transparent
  }
  .navpanel a{padding:.7rem .75rem;font-size:.95rem;border-radius:9px}

  /* Cards breathe more on a small screen */
  .card{padding:1rem;border-radius:var(--radius);margin-bottom:.9rem}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:.65rem}
  .stat{padding:.8rem .85rem}
  .stat-num{font-size:1.45rem}
  .stat-label{font-size:.7rem}

  /* Buttons become comfortably tappable */
  .btn{padding:.62rem .95rem;font-size:.95rem;border-radius:11px}
  .btn-sm{padding:.5rem .8rem;font-size:.88rem}
  .row-actions{display:flex;gap:.45rem;flex-wrap:wrap}
  .row-actions .btn{flex:1 1 auto;text-align:center}

  input,select,textarea{font-size:16px;padding:.7rem .8rem}  /* 16px stops iOS zooming */
  .form-grid{grid-template-columns:1fr}

  /* Wide tables stack into cards, so nothing scrolls sideways */
  /* Turn every table part into a block, otherwise the table layout algorithm
     still sizes from the widest cell and the card overflows the screen. */
  .table.stack,.table.stack tbody{display:block;width:100%}
  .table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table.stack tbody tr{
    display:block;border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:.7rem .8rem;margin-bottom:.6rem;background:var(--surface);box-shadow:var(--shadow)
  }
  .table.stack tbody tr:hover{background:var(--surface)}
  .table.stack td{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    padding:.3rem 0;border:none;text-align:right
  }
  .table.stack td::before{
    content:attr(data-label);font-size:.73rem;text-transform:uppercase;letter-spacing:.045em;
    color:var(--muted);font-weight:700;text-align:left;flex:0 0 auto
  }
  .table.stack td:first-child{
    text-align:left;border-bottom:1px solid var(--line-2);padding-bottom:.5rem;margin-bottom:.35rem;
    display:block
  }
  .table.stack td:first-child::before{display:none}
  .table.stack td.row-actions{display:flex;justify-content:flex-end;padding-top:.55rem}
  .table.stack td.row-actions::before{display:none}
}

@media (max-width: 360px){
  .stat-grid{grid-template-columns:1fr}
  .page-head{gap:.6rem}
  .page-head .row-actions,.page-head .head-actions{width:100%}
}

/* ── Settings: a rail of areas beside the panel you are editing ───────── */
.settings-shell{display:grid;grid-template-columns:15.5rem 1fr;gap:1.25rem;align-items:start}
.settings-rail{
  display:flex;flex-direction:column;gap:.2rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:.5rem;
  box-shadow:var(--shadow);position:sticky;top:5rem
}
.srail-item{
  display:block;padding:.6rem .7rem;border-radius:10px;color:var(--ink-2);
  border-left:3px solid transparent;transition:background .13s,border-color .13s
}
.srail-item:hover{background:var(--green-soft);text-decoration:none}
.srail-item.on{background:var(--green-soft);border-left-color:var(--orange)}
.srail-item.on .srail-label{color:var(--green-dark)}
.srail-label{display:block;font-weight:650;font-size:.93rem}
.srail-hint{display:block;font-size:.755rem;color:var(--muted);line-height:1.35;margin-top:.1rem}
.settings-panel{display:none}
.settings-panel.on{display:block;animation:panelIn .18s ease-out}
@keyframes panelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.settings-body .card{margin-bottom:0}
.settings-body .card.narrow,.settings-body .card{max-width:none}

@media (max-width: 900px){
  .settings-shell{grid-template-columns:1fr;gap:.8rem}
  .settings-rail{
    position:static;flex-direction:row;overflow-x:auto;gap:.35rem;padding:.4rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .settings-rail::-webkit-scrollbar{display:none}
  .srail-item{
    border-left:none;border-bottom:3px solid transparent;border-radius:10px 10px 0 0;
    white-space:nowrap;padding:.5rem .8rem;flex:0 0 auto
  }
  .srail-item.on{border-left:none;border-bottom-color:var(--orange)}
  .srail-hint{display:none}
}
.settings-shell > *{min-width:0}
.settings-save{
  position:sticky;bottom:0;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--green);
  border-radius:var(--radius);padding:.8rem 1rem;margin-top:1.15rem;box-shadow:var(--shadow-lg);z-index:20
}
@media (max-width:900px){
  .settings-save{border-radius:var(--radius) var(--radius) 0 0;margin-left:-.9rem;margin-right:-.9rem}
  .settings-save .btn{flex:1 1 auto}
}

/* Final word on the mobile drawer: the open group is an indented list, not a
   floating card — the panel styling from the desktop dropdown must not leak in. */
@media (max-width: 900px){
  .navpanel{
    background:transparent!important;border:none!important;border-left:2px solid var(--green-mid)!important;
    border-radius:0!important;box-shadow:none!important;padding:.1rem 0 .35rem .55rem!important;
    margin:.1rem 0 .45rem 1.4rem!important;min-width:0
  }
  .navpanel a{background:transparent}
  .navpanel a.active{background:var(--green-soft)}
}

/* Wallet: the one thing standing between you and paying people */
.bank-fix{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:.9rem 1rem;margin-bottom:1rem;border:1px solid var(--orange-mid);
  background:var(--orange-soft);border-radius:var(--radius);border-left:4px solid var(--orange)}
.bank-fix .btn{white-space:nowrap}
@media(max-width:640px){.bank-fix .btn,.bank-fix form{width:100%}}

/* Wallet: live-money warnings and the OTP step */
.live-warn{margin-top:.85rem;padding:.8rem .95rem;border-radius:var(--radius-sm);
  background:var(--bad-soft);border-left:4px solid var(--bad);color:#7f1d1d}
.fund-note{margin-top:.75rem;padding:.8rem .95rem;border-radius:var(--radius-sm);
  background:var(--orange-soft);border-left:4px solid var(--orange)}
.fund-note .btn{margin-top:.6rem}
.wallet-balance{font-size:1.15rem;color:var(--green-dark)}
.otp-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;padding:.7rem 0;
  border-bottom:1px solid var(--line-2)}
.otp-row:last-child{border-bottom:none}
.otp-main{flex:1 1 16rem}
.otp-form{display:flex;gap:.5rem;align-items:center}
.otp-form input{width:7.5rem;font-variant-numeric:tabular-nums;letter-spacing:.12em;text-align:center}
@media(max-width:640px){.otp-row>form{width:100%}.otp-form input{flex:1;width:auto}}
.name-warn{color:var(--bad);font-weight:600;margin-top:.15rem}