/* ===========================================================================
   Buat UI — the shared design system for the BuatNow hub and every Buat app.
   One file, no build step. Drop it in and use the classes.
   Tokens come from the BuatNow brand sheet (Oct 2026).
   =========================================================================== */

/* Self-hosted and subset to Latin — 64KB for all three weights, no Google
   round trip, and the app still renders if a third party is unreachable. */
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 500;
  font-display:swap; src:url('fonts/PlusJakartaSans-Medium.ttf') format('truetype');
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600 700;
  font-display:swap; src:url('fonts/PlusJakartaSans-Bold.ttf') format('truetype');
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:800 900;
  font-display:swap; src:url('fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
}

:root{
  /* brand */
  --blue:#0052CC;  --blue-700:#0041A3;  --blue-100:#E6EFFC;  --blue-50:#F2F7FE;
  --ink:#0A1733; --orange:#FF8A00; --orange-50:#FFF4E6;
  /* neutrals */
  --slate-700:#37435A; --slate-500:#5F6B80; --slate-400:#7A8694;
  --line:#E3E7EC; --line-soft:#EFF2F6; --surface:#FFFFFF; --canvas:#F6F8FB;
  /* status */
  --ok:#0F7B4F; --ok-bg:#E8F5EE; --ok-line:#B7DFC9;
  --warn:#9A5B00; --warn-bg:#FFF4E2; --warn-line:#F0D3A0;
  --alert:#B0241A; --alert-bg:#FDEEEC; --alert-line:#F2C2BC;
  /* shape */
  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(10,23,51,.06), 0 1px 3px rgba(10,23,51,.04);
  --shadow-2:0 4px 12px rgba(10,23,51,.08), 0 1px 3px rgba(10,23,51,.04);
  --shadow-3:0 12px 32px rgba(10,23,51,.16);
  /* metrics */
  --bar-h:58px; --tap:44px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font:15px/1.55 'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}

.u-mono{font-variant-numeric:tabular-nums;
        font-feature-settings:"tnum" 1,"lnum" 1}
.u-hide{display:none !important}
[hidden]{display:none !important}
@media(max-width:720px){.u-sm-hide{display:none !important}}
@media(min-width:721px){.u-lg-hide{display:none !important}}

/* --------------------------------------------------------------- app shell */
.shell{min-height:100dvh;display:flex;flex-direction:column}

.topbar{
  background:var(--ink); color:#fff; position:sticky; top:0; z-index:40;
  padding-top:env(safe-area-inset-top);
}
.topbar-in{
  max-width:1120px; margin:0 auto; height:var(--bar-h);
  display:flex; align-items:center; gap:12px; padding:0 16px;
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;flex:none}
.brand svg{width:26px;height:26px;flex:none}
.brand img{width:28px;height:28px;flex:none;border-radius:7px}
.brand b{font-weight:800;font-size:15px;letter-spacing:-.01em}
.brand span{font-weight:500;opacity:.72}

/* app switcher — how you get back to the hub, and across to sibling apps */
.switch{position:relative;margin-left:auto;flex:none}
.switch-btn{
  display:flex;align-items:center;gap:7px;height:36px;padding:0 10px 0 12px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm);cursor:pointer;font-size:13px;font-weight:600;color:#fff;
}
.switch-btn:hover{background:rgba(255,255,255,.16)}
.switch-btn svg{width:13px;height:13px;opacity:.7}
.menu{
  position:absolute;right:0;top:calc(100% + 7px);min-width:244px;background:#fff;
  border-radius:var(--r);box-shadow:var(--shadow-3);padding:7px;z-index:60;
  color:var(--ink);
}
.menu[hidden]{display:none}
.menu-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
            color:var(--slate-400);padding:9px 10px 5px}
.menu-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;
  background:none;border-radius:var(--r-sm);cursor:pointer;text-align:left;
  font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);
}
.menu-item:hover{background:var(--blue-50)}
.menu-item.on{background:var(--blue-100);font-weight:600}
.menu-item .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);margin-left:auto;flex:none}
.menu-item.soon{color:var(--slate-400);cursor:default}
.menu-item.soon:hover{background:none}
.menu-item .soon-tag{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.06em;
                     text-transform:uppercase;color:var(--slate-400)}
.menu-sep{height:1px;background:var(--line-soft);margin:6px 4px}

/* context strip — which company / which month you are working in */
.context{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;
         top:var(--bar-h);z-index:30}
.context-in{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;
            align-items:center;gap:8px;flex-wrap:wrap}

.seg{display:inline-flex;background:var(--canvas);border:1px solid var(--line);
     border-radius:var(--r-sm);padding:2px;gap:2px}
.seg button{
  border:0;background:none;padding:7px 13px;border-radius:4px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--slate-500);white-space:nowrap;
}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}

.main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:20px 16px 96px}

/* ------------------------------------------------------------------- type */
.h1{font-size:21px;font-weight:800;letter-spacing:-.02em}
.h2{font-size:16px;font-weight:700;letter-spacing:-.01em}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
         color:var(--slate-400)}
.muted{color:var(--slate-500)}
.small{font-size:13px}
.tiny{font-size:12px}

/* ------------------------------------------------------------------ cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      box-shadow:var(--shadow-1)}
.card-pad{padding:16px}
.card-hd{padding:13px 16px;border-bottom:1px solid var(--line-soft);
         display:flex;align-items:center;gap:10px}
.card-ft{padding:12px 16px;border-top:1px solid var(--line-soft);
         display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:14px 16px}
.stat .k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
         color:var(--slate-400)}
.stat .v{font-size:25px;font-weight:800;letter-spacing:-.02em;margin-top:5px}
.stat .v small{font-size:14px;font-weight:600;color:var(--slate-400);margin-right:3px}
.stat .sub{font-size:12.5px;color:var(--slate-500);margin-top:3px}
.stat.flag{border-color:var(--warn-line);background:var(--warn-bg)}
.stat.flag .v{color:var(--warn)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);padding:0 17px;border-radius:var(--r-sm);cursor:pointer;
  font-size:14px;font-weight:700;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);transition:background .12s,border-color .12s;white-space:nowrap;text-decoration:none;
}
.btn:hover{background:var(--canvas)}
.btn:active{transform:translateY(.5px)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-700);border-color:var(--blue-700)}
.btn-ghost{border-color:transparent;background:none;color:var(--slate-500)}
.btn-ghost:hover{background:var(--canvas);color:var(--ink)}
.btn-sm{min-height:34px;padding:0 11px;font-size:13px;font-weight:600}
.btn-block{width:100%}

/* ----------------------------------------------------------------- inputs */
.field{display:flex;flex-direction:column;gap:5px}
.field > label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
               color:var(--slate-400)}
.input,select.input,textarea.input{
  width:100%;min-height:var(--tap);padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  font:500 16px/1.4 'Plus Jakarta Sans',system-ui,sans-serif;  /* 16px: no iOS zoom */
}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.input.big{font-size:21px;font-weight:700;letter-spacing:-.01em;min-height:52px}
.input.flagged{border-color:var(--warn);background:var(--warn-bg)}
select.input{appearance:none;background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%235F6B80' d='M1 1.5 6 6.5l5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;
  padding-right:34px}
.prefix{position:relative}
.prefix > span{position:absolute;left:12px;top:50%;transform:translateY(-50%);
               font-size:14px;font-weight:700;color:var(--slate-400);pointer-events:none}
.prefix .input{padding-left:42px}

/* ------------------------------------------------------------------ chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
      border:1px solid var(--line);background:var(--canvas);font-size:12px;font-weight:600;
      color:var(--slate-500);white-space:nowrap}
.chip-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.chip-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.chip-alert{background:var(--alert-bg);border-color:var(--alert-line);color:var(--alert)}
.chip-btn{cursor:pointer}
.chip-btn:hover{filter:brightness(.97)}

/* ------------------------------------------------------------------ table */
.table{width:100%;border-collapse:collapse}
.table th{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
          color:var(--slate-400);text-align:left;padding:10px 14px;
          border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:13px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--blue-50)}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Below 720px a table clips its right-hand columns, and the right-hand column
   is the amount. So each row becomes a card instead of scrolling sideways. */
@media(max-width:720px){
  .table thead{display:none}
  .table,.table tbody{display:block;width:100%}
  .table tr{
    display:grid;width:100%;
    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:11px;row-gap:3px;padding:13px 14px;
    border-bottom:1px solid var(--line-soft);
  }
  .table tr:last-child{border-bottom:none}
  .table td{display:block;padding:0;border:none}
  .table .c-shot{grid-column:1;grid-row:1 / span 2;align-self:start}
  .table .c-main{grid-column:2;grid-row:1 / span 2;min-width:0}
  .table .c-amt {grid-column:3;grid-row:1;text-align:right;font-size:16px;font-weight:800}
  .table .c-kill{grid-column:3;grid-row:2;text-align:right;align-self:end}
}

/* ------------------------------------------------------------- notice/empty */
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
        border-radius:var(--r-sm);font-size:14px;border:1px solid}
.notice svg{width:17px;height:17px;flex:none;margin-top:1px}
.notice-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.notice-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.notice-alert{background:var(--alert-bg);border-color:var(--alert-line);color:var(--alert)}
.notice-info{background:var(--blue-50);border-color:var(--blue-100);color:var(--slate-700)}

.empty{text-align:center;padding:52px 22px;color:var(--slate-500)}
.empty .art{width:52px;height:52px;margin:0 auto 14px;opacity:.3}
.empty b{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px}

/* ---------------------------------------------------------------- overlay */
.overlay{position:fixed;inset:0;background:rgba(10,23,51,.8);z-index:100;
         display:flex;align-items:center;justify-content:center;padding:16px;
         backdrop-filter:blur(3px)}
.overlay[hidden]{display:none}
.overlay img{max-width:100%;max-height:92dvh;border-radius:var(--r);object-fit:contain}
.overlay-x{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;
           width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
           background:rgba(255,255,255,.16);color:#fff;font-size:21px;line-height:1}

/* ------------------------------------------------------------------- gate */
.gate{position:fixed;inset:0;background:var(--ink);z-index:200;display:flex;
      align-items:center;justify-content:center;padding:24px}
.gate-box{width:100%;max-width:330px;text-align:center;color:#fff}
.gate-box .mark{width:64px;height:64px;margin:0 auto 20px;border-radius:15px;display:block}
.gate-box h1{font-size:19px;font-weight:800;margin-bottom:5px}
.gate-box p{font-size:13.5px;color:rgba(255,255,255,.6);margin-bottom:22px}
.gate-box input{width:100%;text-align:center;letter-spacing:.28em;font-size:19px;
  font-weight:700;padding:14px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#fff;font-family:inherit}
.gate-box input::placeholder{letter-spacing:.08em;font-weight:500;color:rgba(255,255,255,.35)}
.gate-box input:focus{outline:none;border-color:var(--blue);background:rgba(255,255,255,.12)}
.gate-err{min-height:20px;margin-top:11px;font-size:13px;color:#FF9C8F}

/* ------------------------------------------------------------------ misc */
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:4px;background:var(--line-soft);border-radius:var(--r-pill);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--blue);border-radius:inherit;
         transition:width .3s ease}
.row{display:flex;align-items:center;gap:10px}
.row-wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}