/* SHINGOTEX Order Manager */
:root{
  --green:#1a5632; --green-d:#134426; --ink:#22262b; --muted:#6b7280;
  --line:#e3e6e3; --bg:#f4f1ec; --card:#fff; --red:#c0392b; --amber:#b7791f;
  --radius:8px; --shadow:0 1px 3px rgba(0,0,0,.07),0 6px 20px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 'Segoe UI',Inter,Verdana,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
code{background:#eceae4;padding:1px 5px;border-radius:4px;font-size:12px}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:28px;background:var(--green);color:#fff;
  padding:0 24px;height:56px;box-shadow:var(--shadow)}
.brand{font-weight:700;letter-spacing:.5px}
.brand span{font-weight:400;opacity:.75;margin-left:6px}
.topbar nav{display:flex;gap:4px;flex:1}
.topbar nav a{color:#dcece2;padding:8px 14px;border-radius:6px;font-weight:500}
.topbar nav a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.topbar nav a.on{background:rgba(255,255,255,.18);color:#fff}
.who{font-size:13px;opacity:.9;display:flex;align-items:center;gap:14px}
.who .logout{color:#cfe3d6}

main{max-width:1240px;margin:26px auto 60px;padding:0 24px}

/* ---------- page head ---------- */
.pagehead{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.pagehead h1{font-size:21px;margin:0;font-weight:650}
.headmeta{color:var(--muted);font-size:13px;flex:1}
.search{display:flex;gap:6px;margin-left:auto}
.search input{width:320px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:#fff}
.search button{padding:8px 16px}
.search .clear{align-self:center;font-size:13px;color:var(--muted)}

/* ---------- buttons ---------- */
.btn,button{border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:8px 16px;border-radius:6px;cursor:pointer;font:inherit;font-weight:500;display:inline-block}
.btn:hover,button:hover{border-color:#c9cfc9;text-decoration:none}
.btn.primary,button[type=submit].primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-d)}
.btn.go{background:#0b6aa2;border-color:#0b6aa2;color:#fff}
.btn.go:hover{background:#08587f}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red);border-color:#e7c9c5}
.btn.sm{padding:4px 10px;font-size:12.5px}
.btn.right{margin-left:auto}

/* ---------- table ---------- */
.grid{width:100%;border-collapse:collapse;background:var(--card);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.grid th{background:#fafaf8;text-align:left;font-size:12px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line)}
.grid td{padding:11px 14px;border-bottom:1px solid #f0f2f0;vertical-align:top}
.grid tbody tr:hover{background:#fbfcfb}
.grid tr.off{opacity:.45}
.grid .r,th.r{text-align:right}
.grid .mono{font-family:'Cascadia Mono',Consolas,monospace;font-size:13px}
.grid .empty{text-align:center;color:var(--muted);padding:34px}
.grid .actions{white-space:nowrap;text-align:right}
.sub2{color:var(--muted);font-size:12px}
.muted{color:var(--muted)}
.pager{display:flex;gap:4px;margin-top:16px}
.pager a{padding:6px 11px;border:1px solid var(--line);border-radius:5px;background:#fff}
.pager a.on{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- flash ---------- */
.flash{padding:12px 16px;border-radius:var(--radius);margin-bottom:18px;border:1px solid}
.flash.ok{background:#eef7f0;border-color:#c8e6c9;color:#1a5632}
.flash.err{background:#fdf0ef;border-color:#f0cdc9;color:#96271c}
.flash.warn{background:#fdf7e8;border-color:#f0e0b8;color:#7a5a12}
.errlist{margin:8px 0 0 18px;font-size:13px}

/* ---------- forms ---------- */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:-1px}
.tab{background:#eceae4;border:1px solid var(--line);border-bottom:none;
  border-radius:6px 6px 0 0;padding:8px 15px;font-size:13px;color:var(--muted)}
.tab.on{background:#fff;color:var(--ink);font-weight:600}
.panel{display:none;background:#fff;border:1px solid var(--line);
  border-radius:0 var(--radius) var(--radius) var(--radius);padding:22px;box-shadow:var(--shadow)}
.panel.on{display:block}
.fieldgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 18px}
.field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.field.wide{grid-column:span 2}
.field.req span{color:var(--ink);font-weight:600}
.field input,.field textarea,.field select{padding:8px 10px;border:1px solid var(--line);
  border-radius:6px;font:inherit;color:var(--ink);background:#fff;width:100%}
.field input:focus,.field textarea:focus{outline:2px solid #cfe3d6;border-color:var(--green)}
.field .num{text-align:right;font-variant-numeric:tabular-nums}
.formbar{display:flex;gap:10px;align-items:center;margin-top:18px}

/* ---------- cards ---------- */
.setcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow);max-width:920px}
.setcard.narrow{max-width:420px}
.setcard h2{margin:0 0 12px;font-size:15px}
.doclist{list-style:none;margin:0 0 16px;padding:0}
.doclist li{padding:5px 0}
.doclist li.missing{opacity:.5}
.doclist .tag{background:#fdf0ef;color:#96271c;font-size:11px;padding:2px 7px;border-radius:4px;margin-left:8px}
.plain{margin:0;padding-left:18px;color:var(--muted)}
.plain li{margin:4px 0}
.inline{display:flex;gap:8px;align-items:center;margin:12px 0;color:var(--muted)}
.inlineform{display:inline}

/* ---------- login ---------- */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--green)}
.login-card{background:#fff;padding:36px 34px;border-radius:12px;width:340px;
  box-shadow:0 18px 50px rgba(0,0,0,.25)}
.login-card h1{margin:0;font-size:22px;letter-spacing:1px;color:var(--green)}
.login-card .sub{margin:2px 0 22px;color:var(--muted);font-size:13px}
.login-card label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.login-card input{width:100%;padding:9px 11px;margin-top:5px;border:1px solid var(--line);
  border-radius:6px;font:inherit}
.login-card button{width:100%;background:var(--green);color:#fff;border-color:var(--green);padding:10px}

.foot{text-align:center;color:var(--muted);font-size:12px;padding:26px 0 40px}

@media (max-width:820px){
  .topbar{gap:12px;padding:0 14px}
  .brand span{display:none}
  main{padding:0 14px}
  .search input{width:180px}
  .field.wide{grid-column:span 1}
}