.sf-portal-scope{
  --ink:#0E1626; --ink-soft:#3A4358;
  --paper:#F5F6F8; --card:#FFFFFF;
  --line:#E4E7ED;
  --teal:#0C8C86; --teal-dark:#076661; --teal-soft:#E3F4F2;
  --amber:#C87E11; --amber-soft:#FDF1DD;
  --green:#1C8A4B; --green-soft:#E4F5EA;
  --red:#C1382E; --red-soft:#FCE9E7;
  --slate:#5A6478; --slate-soft:#EEF0F3;
  --sidebar:#0E1626; --sidebar-soft:#8891A6;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--paper); color:var(--ink);
  border-radius:14px; overflow:auto; box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
.sf-portal-scope *{box-sizing:border-box;}
.sf-portal-scope h1,.sf-portal-scope h2,.sf-portal-scope h3{font-family:'Space Grotesk',sans-serif;}
.sf-portal-scope button{font-family:inherit;cursor:pointer;}
.sf-portal-scope input,.sf-portal-scope select,.sf-portal-scope textarea{font-family:inherit;}
.sf-portal-scope a{color:inherit;}
.sf-loading{padding:60px;text-align:center;color:var(--slate);}

/* login */
.sf-login-wrap{min-height:520px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 15% 20%, rgba(12,140,134,0.16), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(200,126,17,0.10), transparent 45%), var(--sidebar);
  padding:24px;}
.sf-login-card{width:100%;max-width:820px;background:var(--card);border-radius:18px;display:grid;
  grid-template-columns:1.1fr 1fr;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,0.35);}
.sf-login-side{background:linear-gradient(160deg,#0E1626 0%,#132038 60%,#0C8C86 160%);color:#fff;
  padding:36px 32px;display:flex;flex-direction:column;justify-content:center;}
.sf-login-side .sf-mark{display:flex;align-items:center;gap:9px;margin-bottom:18px;}
.sf-login-side .sf-dot{width:11px;height:11px;border-radius:3px;background:var(--teal);box-shadow:0 0 0 4px rgba(12,140,134,0.28);}
.sf-login-side .sf-mark span{font-weight:700;font-size:19px;}
.sf-login-side h1{font-size:24px;line-height:1.3;margin:0 0 10px;font-weight:600;}
.sf-login-side p{color:#B7C0D4;font-size:13.5px;line-height:1.6;max-width:32ch;}
.sf-login-form{padding:36px 32px;}
.sf-login-form h2{font-size:18px;margin:0 0 6px;}
.sf-hint{font-size:12.5px;color:var(--slate);margin-bottom:18px;}
.sf-field{margin-bottom:14px;}
.sf-field-checkbox{margin-bottom:8px;font-size:13px;}
.sf-field-checkbox label{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--ink);}
.sf-field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.sf-field select,.sf-field input,.sf-field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;font-size:13.5px;background:#fff;color:var(--ink);}
.sf-field select:focus,.sf-field input:focus,.sf-field textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.sf-link-btn{background:none;border:none;color:var(--teal-dark);font-size:12.5px;font-weight:600;padding:0;cursor:pointer;}
.sf-error{background:var(--red-soft);color:var(--red);padding:9px 12px;border-radius:8px;font-size:12.5px;margin-bottom:14px;}
.sf-success{background:var(--green-soft);color:var(--green);padding:9px 12px;border-radius:8px;font-size:12.5px;margin-bottom:14px;}

/* buttons */
.sf-btn{border:none;border-radius:9px;padding:10px 16px;font-size:13.5px;font-weight:600;display:inline-flex;
  align-items:center;gap:7px;}
.sf-btn-primary{background:var(--ink);color:#fff;}
.sf-btn-primary:hover{background:#000;}
.sf-btn-teal{background:var(--teal);color:#fff;}
.sf-btn-teal:hover{background:var(--teal-dark);}
.sf-btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
.sf-btn-ghost:hover{border-color:var(--ink);color:var(--ink);}
.sf-btn-danger{background:var(--red-soft);color:var(--red);}
.sf-btn-block{width:100%;justify-content:center;}
.sf-btn-sm{padding:6px 10px;font-size:12px;border-radius:7px;}
.sf-btn[disabled]{opacity:.55;cursor:default;}

/* app shell — deliberately NOT responsive: the whole app is forced to a desktop-width layout
   (see the viewport-meta override in app.js) and on a narrower screen the content area scrolls
   sideways rather than reflowing. The sidebar stays fixed in place and never scrolls with it. */
.sf-app{display:flex;min-height:600px;min-width:1100px;}
.sf-sidebar{background:var(--sidebar);color:#fff;padding:20px 14px;width:220px;flex:0 0 220px;
  position:sticky;left:0;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto;z-index:2;}
.sf-sidebar .sf-mark{display:flex;align-items:center;gap:9px;padding:0 6px 18px;}
.sf-sidebar .sf-dot{width:10px;height:10px;border-radius:3px;background:var(--teal);}
.sf-sidebar .sf-mark span{font-weight:700;font-size:16px;}
.sf-nav-group{margin-bottom:16px;}
.sf-nav-label{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--sidebar-soft);
  padding:0 10px;margin-bottom:6px;font-weight:600;}
.sf-nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;
  color:#D3D9E6;font-weight:500;margin-bottom:2px;cursor:pointer;white-space:nowrap;}
.sf-nav-item:hover{background:rgba(255,255,255,0.06);color:#fff;}
.sf-nav-item.active{background:var(--teal);color:#fff;}
.sf-sidebar-foot{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.1);}
.sf-who{padding:10px;border-radius:9px;background:rgba(255,255,255,0.05);}
.sf-who .sf-name{font-size:12.5px;font-weight:600;color:#fff;}
.sf-who .sf-role{font-size:10.5px;color:var(--sidebar-soft);margin-top:2px;}
.sf-who .sf-role span{background:var(--teal);color:#fff;padding:1.5px 7px;border-radius:20px;font-size:9.5px;
  font-weight:700;text-transform:uppercase;}
.sf-foot-link{display:block;margin-top:8px;font-size:12px;color:var(--sidebar-soft);text-decoration:none;
  padding:5px 10px;cursor:pointer;background:none;border:none;text-align:left;width:100%;white-space:nowrap;}
.sf-foot-link:hover{color:#fff;}

.sf-main{padding:22px 26px 50px;max-width:1300px;flex:1 1 auto;min-width:0;}
.sf-topbar{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.sf-topbar h1{font-size:20px;margin:0;}
.sf-topbar .sf-sub{color:var(--slate);font-size:12.5px;margin-top:3px;}

.sf-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;}
.sf-card h3{font-size:14.5px;margin:0 0 12px;}
.sf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.sf-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

.sf-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;}
.sf-stat .sf-num{font-family:'Space Grotesk';font-size:24px;font-weight:700;}
.sf-stat .sf-lbl{font-size:11.5px;color:var(--slate);margin-top:2px;}

.sf-portal-scope table{width:100%;border-collapse:collapse;font-size:12.5px;}
.sf-portal-scope th{text-align:left;color:var(--slate);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:0.03em;padding:8px 9px;border-bottom:1px solid var(--line);}
.sf-portal-scope td{padding:9px;border-bottom:1px solid var(--line);vertical-align:middle;}
.sf-portal-scope tr:last-child td{border-bottom:none;}
.sf-table-wrap{overflow-x:auto;}
.sf-tag{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;}
.sf-teal{background:var(--teal-soft);color:var(--teal-dark);}
.sf-amber{background:var(--amber-soft);color:var(--amber);}
.sf-green{background:var(--green-soft);color:var(--green);}
.sf-red{background:var(--red-soft);color:var(--red);}
.sf-qty-low{color:var(--red);font-weight:700;}
.sf-slate{background:var(--slate-soft);color:var(--slate);}
.sf-order-id{font-family:monospace;font-weight:600;font-size:11.5px;background:var(--ink);color:#fff;
  padding:3px 7px;border-radius:5px;}
.sf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap;}
.sf-tab-btn{background:none;border:none;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--slate);
  border-bottom:2px solid transparent;}
.sf-tab-btn.active{color:var(--ink);border-bottom-color:var(--teal);}
.sf-empty{padding:26px 10px;text-align:center;color:var(--slate);font-size:12.5px;}
.sf-empty b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px;}
.sf-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;}
.sf-actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.sf-note{font-size:11.5px;color:var(--slate);margin-top:6px;}
.sf-divider{height:1px;background:var(--line);margin:16px 0;}
.sf-small-muted{font-size:11.5px;color:var(--slate);}
.sf-toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;padding:11px 16px;
  border-radius:10px;font-size:12.5px;box-shadow:0 12px 30px rgba(0,0,0,0.25);z-index:9999;max-width:320px;}
.sf-portal-notice{padding:16px;background:#FDF1DD;border-radius:10px;color:#7a4e0a;}
.sf-modal-backdrop{position:fixed;inset:0;background:rgba(14,22,38,0.5);display:flex;align-items:center;
  justify-content:center;z-index:9998;padding:20px;}
.sf-modal{background:#fff;border-radius:14px;padding:24px;max-width:400px;width:100%;}