/* HeroUI-inspired design kit (tokens, components, motion) — plain CSS, no build step. */
:root{
  --p:#5fa83a;--p-600:#4c8f2c;--p-700:#3d7524;--p-50:#f1f9eb;--p-100:#e1f2d4;--p-200:#c3e5a9;
  --navy:#0b1b36;--navy-2:#13284d;
  --d-50:#fafafa;--d-100:#f4f4f5;--d-200:#e4e4e7;--d-300:#d4d4d8;--d-400:#a1a1aa;--d-500:#71717a;--d-600:#52525b;--d-700:#3f3f46;--d-900:#18181b;
  --ok:#17c964;--warn:#f5a524;--err:#f31260;--info:#006fee;--sec:#7828c8;
  --r-s:8px;--r-m:12px;--r-l:14px;
  --sh-s:0 0 5px 0 rgb(0 0 0/.02),0 2px 10px 0 rgb(0 0 0/.06),0 0 1px 0 rgb(0 0 0/.3);
  --sh-m:0 0 15px 0 rgb(0 0 0/.03),0 2px 30px 0 rgb(0 0 0/.08),0 0 1px 0 rgb(0 0 0/.3);
  --sh-l:0 0 30px 0 rgb(0 0 0/.04),0 30px 60px 0 rgb(0 0 0/.12),0 0 1px 0 rgb(0 0 0/.3);
  --ease:cubic-bezier(.33,1,.68,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--d-900);background:#f7f8fa;-webkit-font-smoothing:antialiased}
[x-cloak]{display:none!important}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.5rem;padding:0 1rem;border-radius:var(--r-m);
  font-size:.875rem;font-weight:500;white-space:nowrap;user-select:none;cursor:pointer;border:0;outline:none;
  transition:transform .15s var(--ease),background-color .2s,box-shadow .2s,opacity .2s,color .2s}
.btn:active{transform:scale(.97)}
.btn:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--p)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.btn-sm{height:2rem;padding:0 .75rem;font-size:.8rem;border-radius:var(--r-s)}
.btn-lg{height:3rem;padding:0 1.5rem;font-size:1rem;border-radius:var(--r-l)}
.btn-icon{width:2.5rem;padding:0}.btn-icon.btn-sm{width:2rem}
.btn-primary{background:var(--p);color:#fff;box-shadow:0 8px 20px -6px rgb(95 168 58/.55)}
.btn-primary:hover{background:var(--p-600)}
.btn-dark{background:var(--navy);color:#fff}.btn-dark:hover{background:var(--navy-2)}
.btn-flat{background:var(--p-100);color:var(--p-700)}.btn-flat:hover{background:var(--p-200)}
.btn-default{background:var(--d-100);color:var(--d-900)}.btn-default:hover{background:var(--d-200)}
.btn-bordered{background:transparent;border:2px solid var(--d-200);color:var(--d-900)}.btn-bordered:hover{background:var(--d-100)}
.btn-light{background:transparent;color:var(--d-700)}.btn-light:hover{background:var(--d-100)}
.btn-danger{background:#fee7ef;color:#c20e4d}.btn-danger:hover{background:#fdd0df}
.btn-white{background:#fff;color:var(--navy)}.btn-white:hover{background:#f4f4f5}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.25;animation:ripple .6s var(--ease);pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ---------- Cards ---------- */
.card{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-m)}
.card-s{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-s)}
.card-hover{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-l)}

/* ---------- Inputs (HeroUI "flat") ---------- */
.field{display:flex;flex-direction:column;gap:.375rem}
.field>label,.lbl-f{font-size:.8rem;font-weight:500;color:var(--d-600)}
.inp{width:100%;min-height:2.6rem;padding:.55rem .8rem;border-radius:var(--r-m);background:var(--d-100);border:2px solid transparent;
  font-size:.9rem;color:var(--d-900);outline:none;transition:background-color .2s,border-color .2s,box-shadow .2s}
.inp:hover{background:var(--d-200)}
.inp:focus{background:#fff;border-color:var(--p);box-shadow:0 0 0 4px rgb(95 168 58/.12)}
.inp::placeholder{color:var(--d-400)}
textarea.inp{resize:vertical}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;padding-right:2.2rem}
.inp-err{border-color:var(--err)!important}
.inp.pl-10{padding-left:2.5rem}
@media (min-width:1024px){.lg\:hidden{display:none!important}}
@media (min-width:640px){.sm\:hidden{display:none!important}}
.req{color:var(--err)}

/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:.3rem;height:1.6rem;padding:0 .6rem;border-radius:999px;font-size:.74rem;font-weight:500;white-space:nowrap}
.chip-dot::before{content:"";width:.45rem;height:.45rem;border-radius:999px;background:currentColor}
.c-default{background:var(--d-100);color:var(--d-700)}.c-primary{background:var(--p-100);color:var(--p-700)}
.c-success{background:#e8faf0;color:#0e793c}.c-warning{background:#fefce8;color:#936316}.c-danger{background:#fee7ef;color:#c20e4d}
.c-info{background:#e6f1fe;color:#005bc4}.c-secondary{background:#f2eafa;color:#6020a0}

/* ---------- Switch ---------- */
.switch{position:relative;display:inline-flex;align-items:center;width:2.6rem;height:1.5rem;border-radius:999px;background:var(--d-200);transition:background .25s;cursor:pointer;flex:none}
.switch::after{content:"";position:absolute;left:.2rem;width:1.1rem;height:1.1rem;border-radius:999px;background:#fff;box-shadow:var(--sh-s);transition:transform .3s var(--spring),width .2s}
.switch:active::after{width:1.4rem}
.switch.on{background:var(--p)}.switch.on::after{transform:translateX(1.1rem)}
.switch.on:active::after{transform:translateX(.8rem)}

/* ---------- Checkbox ---------- */
.chk{appearance:none;width:1.25rem;height:1.25rem;border-radius:6px;border:2px solid var(--d-300);display:inline-grid;place-content:center;cursor:pointer;transition:all .2s var(--ease);flex:none}
.chk::before{content:"";width:.65rem;height:.65rem;transform:scale(0);transition:transform .25s var(--spring);background:#fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.chk:checked{background:var(--p);border-color:var(--p)}.chk:checked::before{transform:scale(1)}

/* ---------- Tabs (animated cursor) ---------- */
.tabs{position:relative;display:inline-flex;gap:.25rem;padding:.25rem;border-radius:var(--r-m);background:var(--d-100);overflow-x:auto;max-width:100%}
.tab{position:relative;z-index:1;height:2.1rem;padding:0 .9rem;border-radius:var(--r-s);font-size:.85rem;font-weight:500;color:var(--d-500);white-space:nowrap;transition:color .2s;cursor:pointer;background:transparent;border:0}
.tab.on{color:var(--d-900)}
.tab-cursor{position:absolute;z-index:0;top:.25rem;height:2.1rem;border-radius:var(--r-s);background:#fff;box-shadow:var(--sh-s);transition:left .35s var(--spring),width .35s var(--spring)}

/* ---------- Table ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{font-size:.72rem;font-weight:600;color:var(--d-500);text-align:left;padding:.65rem .8rem;background:var(--d-100);white-space:nowrap}
.tbl th:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}.tbl th:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
.tbl td{padding:.75rem .8rem;font-size:.875rem;vertical-align:middle;border-bottom:1px solid var(--d-100)}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover td{background:#fafafa}
.tbl .sr{width:3.2rem;color:var(--d-400);font-variant-numeric:tabular-nums;font-weight:500}
.tbl tr.click{cursor:pointer}

/* ---------- Avatar ---------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:600;flex:none;overflow:hidden}

/* ---------- Modal / drawer ---------- */
.backdrop{position:fixed;inset:0;background:rgb(0 0 0/.4);backdrop-filter:blur(4px);z-index:60}
.modal{position:fixed;z-index:61;inset:0;margin:auto;height:fit-content;width:min(92vw,var(--w,34rem));max-height:90vh;overflow:auto;background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-l)}
@media (max-width:640px){.modal{top:auto;margin:0;width:100%;border-radius:1.25rem 1.25rem 0 0;max-height:92vh;animation:sheetUp .35s var(--ease) both!important}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.t-modal-enter{transition:opacity .25s var(--ease),transform .3s var(--spring)}
.t-modal-from{opacity:0;transform:translate(-50%,-46%) scale(.96)}
.t-modal-to{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (max-width:640px){.t-modal-from{opacity:1;transform:translateY(100%)}.t-modal-to{transform:translateY(0)}}

/* ---------- Motion ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes shimmer{100%{transform:translateX(100%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.95)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.2)}}
.anim-up{animation:fadeUp .5s var(--ease) both}
.anim-in{animation:fadeIn .4s var(--ease) both}
.anim-pop{animation:pop .35s var(--spring) both}
.stagger>*{animation:fadeUp .5s var(--ease) both}
.stagger>*:nth-child(1){animation-delay:.02s}.stagger>*:nth-child(2){animation-delay:.06s}.stagger>*:nth-child(3){animation-delay:.1s}.stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s}.stagger>*:nth-child(6){animation-delay:.22s}.stagger>*:nth-child(7){animation-delay:.26s}.stagger>*:nth-child(8){animation-delay:.3s}
.skel{position:relative;overflow:hidden;background:var(--d-200);border-radius:var(--r-s)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgb(255 255 255/.6),transparent);animation:shimmer 1.4s infinite}
.spinner{width:1.1rem;height:1.1rem;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* ---------- Toast ---------- */
.toast{position:fixed;z-index:80;left:50%;bottom:1.5rem;transform:translateX(-50%);display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-radius:var(--r-m);background:var(--d-900);color:#fff;font-size:.875rem;box-shadow:var(--sh-l);animation:pop .35s var(--spring)}
@media (max-width:1023px){.toast{bottom:5.5rem}}

/* ---------- Nav ---------- */
.side-a{position:relative;display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;border-radius:var(--r-m);color:#b8c2d6;font-size:.9rem;font-weight:500;transition:background .2s,color .2s}
.side-a:hover{background:rgb(255 255 255/.06);color:#fff}
.side-a.on{background:rgb(95 168 58/.16);color:#fff}
.side-a.on::before{content:"";position:absolute;left:-.75rem;top:.5rem;bottom:.5rem;width:3px;border-radius:0 3px 3px 0;background:var(--p)}
.side-a.on svg{color:#8fd16a}
.bn-a{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 0;font-size:.68rem;font-weight:500;color:var(--d-500);transition:color .2s}
.bn-a.on{color:var(--p-700)}
.bn-a .pill{padding:.2rem .9rem;border-radius:999px;transition:background .25s}
.bn-a.on .pill{background:var(--p-100)}

/* print: job card */
@media print{body *{visibility:hidden}.printable,.printable *{visibility:visible}.printable{position:absolute;inset:0;padding:0;box-shadow:none}.no-print{display:none!important}}