/* MyHometown administration portal — CLAUDE-028 presentation finish.
   Server-rendered, no build step, no JS, no external assets, no icon font.
   Token scale + component skeleton drafted with the local Ollama model
   (qwen3-coder:30b-a3b-q8_0); the shell/mobile mechanics, the full pill set,
   forms, states and every legacy selector were finalised by Claude. */

:root{
  /* ink / surface */
  --ink:#1b2530; --muted:#5b6b7b; --line:#e4e8ec; --line-strong:#d5dbe1;
  --panel:#fff; --bg:#f5f7f9; --bg-subtle:#f0f3f6;
  /* sidebar — light (CLAUDE-029): white to very pale blue, dark text */
  --side-bg:#f7fafd; --side-bg-2:#eef4fb; --side-ink:#243040; --side-label:#7d8ea0;
  --side-hover:#e4eefb; --side-border:#e1e8f0;
  /* accents */
  --accent:#1f6feb; --accent-strong:#195fce; --accent-soft:#e9f1ff;
  --teal:#0d9488; --teal-soft:#e4f5f2;
  /* status */
  --ok:#1c7c46; --ok-soft:#e7f6ee; --ok-line:#bfe3cd;
  --warn:#8a5300; --warn-soft:#fdf3e3; --warn-line:#f0d8ac;
  --err:#a4262c; --err-soft:#fbeaea; --err-line:#efc2c4;
  --violet:#5a3aa8; --violet-soft:#f1ecff;
  /* rhythm */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem;
  --radius:10px; --radius-sm:8px; --shell:250px;
  --shadow:0 1px 2px rgba(16,29,46,.06); --shadow-card:0 1px 3px rgba(16,29,46,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:15.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.skip-link{position:absolute; left:-999px}
.skip-link:focus{left:1rem; top:1rem; background:#fff; padding:.5rem .8rem; z-index:40; border-radius:8px}

/* ---------- shell ---------- */
.app{display:grid; grid-template-columns:var(--shell) 1fr; min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--side-bg) 0%,var(--side-bg-2) 100%); color:var(--side-ink);
  padding:1.1rem 0; position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; border-right:1px solid var(--side-border); box-shadow:1px 0 2px rgba(16,29,46,.04)}
.sidebar__brand{display:block; font-weight:700; color:var(--ink); text-decoration:none; padding:.2rem 1.25rem 1rem; font-size:1.05rem; letter-spacing:.01em}
.sidebar__brand:hover{text-decoration:none}
.sidebar__brand span{color:var(--side-label); font-weight:500}
.sidebar__group{color:var(--side-label); text-transform:uppercase; font-size:.67rem; letter-spacing:.07em; margin:1.15rem 1.25rem .35rem}
.nav-list{list-style:none; margin:0; padding:0 .6rem}
.nav-list a{display:block; padding:.5rem .8rem; border-radius:var(--radius-sm); color:var(--side-ink); text-decoration:none; font-size:.92rem}
.nav-list a:hover{background:var(--side-hover); color:var(--accent-strong); text-decoration:none}
.nav-list a[aria-current="page"]{background:var(--accent); color:#fff}
/* CLAUDE-030: a planned area, greyed and not usable. */
.nav-list__planned{display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem; color:var(--side-label); font-size:.92rem; cursor:default}
.nav-list__badge{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; border:1px solid var(--side-border); border-radius:999px; padding:.05rem .45rem}
.sidebar__foot{margin-top:auto; color:var(--side-label); font-size:.78rem; padding:1rem 1.25rem}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:1rem; padding:.55rem 1.6rem; min-height:52px; box-shadow:var(--shadow)}
.topbar__spacer{flex:1}
.topbar__tenant{font-weight:650}
.topbar__tenant .muted{font-weight:400}
.topbar__account{color:var(--muted); font-size:.9rem}
.content{padding:1.9rem 1.9rem; max-width:1140px; width:100%}

.mobile-nav{display:none}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .mobile-nav{display:block; background:var(--side-bg-2); color:var(--side-ink); border-bottom:1px solid var(--side-border)}
  .mobile-nav>summary{list-style:none; cursor:pointer; padding:0 1.25rem; min-height:44px; display:flex; align-items:center; gap:.6rem; color:var(--ink); font-weight:600}
  .mobile-nav>summary::-webkit-details-marker{display:none}
  .mobile-nav>summary::after{content:"▾"; margin-left:auto; color:var(--side-label)}
  .mobile-nav[open]>summary::after{content:"▴"}
  .mobile-nav .sidebar__group{margin-top:.6rem}
  .mobile-nav .nav-list{padding-bottom:.8rem}
  .content{padding:1.25rem 1rem}
  .topbar{flex-wrap:wrap; padding:.5rem 1rem; gap:.5rem}
  .topbar__spacer{flex-basis:100%; order:2; height:0}
  .page-head{gap:.6rem}
  .selector-form{flex-wrap:wrap}
  .table{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
  .btn{max-width:100%}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:380px){ .content{padding:1rem .8rem} }

/* ---------- page furniture ---------- */
.breadcrumbs{font-size:.85rem; color:var(--muted); margin-bottom:.7rem}
.breadcrumbs a{color:var(--muted); text-decoration:none}
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs span:not(:first-child)::before{content:"/"; margin:0 .45rem; color:var(--line-strong)}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem}
h1{font-size:1.5rem; margin:.1rem 0 1rem; font-weight:650; letter-spacing:-.01em}
.page-title{font-size:1.5rem; margin:.1rem 0; font-weight:650; letter-spacing:-.01em}
.page-sub{color:var(--muted); margin:.2rem 0 0}
h2{font-size:1.12rem; margin:1.5rem 0 .6rem; font-weight:650}
.section-title{font-size:1.02rem; margin:0 0 .8rem; font-weight:650}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.stack>*+*{margin-top:.6rem}
.mt-sm{margin-top:.6rem}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.35rem; box-shadow:var(--shadow-card)}
/* a card that holds a wide table: let the table scroll inside it, never the page */
.card.table-scroll{padding:0; overflow-x:auto}
.card.table-scroll>.table{border:0; border-radius:0}
.card + .card{margin-top:1rem}
.card--narrow{max-width:460px; margin:2.4rem auto}
.card__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem}
.panel{background:var(--bg-subtle); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:1.05rem 1.15rem; margin:1rem 0}
.pagehead{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem}

/* two-column composition for detail sections */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:640px){ .grid-2{grid-template-columns:1fr} }

/* honest count cards — real numbers only, never invented metrics */
.kpi-row{display:flex; flex-wrap:wrap; gap:.75rem; margin:.25rem 0 1.25rem}
.kpi{flex:1 1 8rem; min-width:8rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8rem .9rem}
.kpi .kpi__label{color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em}
.kpi .kpi__value{font-size:1.5rem; font-weight:650; margin-top:.15rem}

/* ---------- actions / buttons ---------- */
.actions{display:flex; gap:.55rem; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:var(--radius-sm); border:1px solid var(--line-strong);
  background:#fff; color:var(--ink); font:inherit; font-size:.9rem; line-height:1.2; text-decoration:none; cursor:pointer; transition:background .12s,border-color .12s}
.btn:hover{border-color:#aeb7c2; text-decoration:none}
.btn--primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-strong); border-color:var(--accent-strong)}
.btn--ghost{background:transparent}
.btn--danger,.btn--warn{border-color:var(--err-line); color:var(--err); background:#fff}
.btn--danger:hover,.btn--warn:hover{border-color:#e0a0a4; background:var(--err-soft)}
.btn--sm{padding:.34rem .68rem; font-size:.85rem}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
.inline{display:inline}

/* ---------- data ---------- */
.table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:.92rem}
.table th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:.6rem .85rem; border-bottom:2px solid var(--line); background:var(--bg-subtle)}
.table td{padding:.65rem .85rem; border-bottom:1px solid var(--line); vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table--hover tbody tr:hover{background:var(--bg-subtle)}
.ta-right{text-align:right}
.nowrap{white-space:nowrap}
code{background:#eef1f5; border-radius:4px; padding:.05rem .35rem; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mono-sm{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem; word-break:break-all}

.data-list,.props{display:grid; grid-template-columns:11rem 1fr; gap:.4rem 1rem; margin:1rem 0}
.data-list dt,.props dt{color:var(--muted)}
.data-list dd,.props dd{margin:0}
@media(max-width:560px){ .data-list,.props{grid-template-columns:1fr} .data-list dt,.props dt{margin-top:.4rem} }

.status,.pill{display:inline-flex; align-items:center; padding:.14rem .55rem; border-radius:999px; font-size:.76rem; border:1px solid var(--line-strong); background:var(--bg-subtle); color:var(--muted); white-space:nowrap}
.status--active,.pill--active,.pill--activated,.pill--authorized,.pill--printed,.pill--printed_unassigned{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok)}
.status--suspended,.pill--suspended,.pill--handed_off{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}
.pill--revoked{background:var(--err-soft); border-color:var(--err-line); color:var(--err)}
.pill--draft,.pill--generated,.pill--pending{background:#eef1f6; border-color:#dbe1ea; color:#43506b}
.pill--prepared,.pill--approved,.pill--print_approved{background:var(--accent-soft); border-color:#c4ddff; color:var(--accent-strong)}
.pill--value_assigned,.pill--sold,.pill--partially_redeemed{background:var(--violet-soft); border-color:#ddd2f5; color:var(--violet)}
.pill--redeemed{background:var(--teal-soft); border-color:#c7e9e3; color:var(--teal)}
/* CLAUDE-029: company order + employee handover statuses */
.pill--issued,.pill--handed_over{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok)}
.pill--placed{background:var(--accent-soft); border-color:#c4ddff; color:var(--accent-strong)}
.pill--batch_issued{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}
.pill--superseded{background:#eef1f6; border-color:#dbe1ea; color:#43506b}

/* ---------- forms ---------- */
.form,.form-block{max-width:560px}
.field,.form label{display:block; margin:.9rem 0}
.field label{font-weight:600; margin-bottom:.3rem}
.field input,.field select,.form input{width:100%; max-width:560px; padding:.55rem .7rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font:inherit; background:#fff}
.field input:focus,.field select:focus{border-color:var(--accent); outline:none}
.selector-form select{padding:.35rem .5rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font:inherit}
.field .hint,.form small{display:block; color:var(--muted); font-size:.82rem; margin-top:.28rem}
.field--error input,.field--error select{border-color:var(--err-line)}
.field .error-text{color:var(--err); font-size:.82rem; margin-top:.25rem}
.form-actions,.form__actions{display:flex; gap:.6rem; margin-top:1.3rem; flex-wrap:wrap}
.readonly{background:var(--bg-subtle); border-radius:var(--radius-sm); padding:.5rem .8rem}
fieldset{border:1px solid var(--line); border-radius:var(--radius-sm); padding:.7rem 1.1rem 1rem; margin:1.2rem 0}
legend{color:var(--muted); font-size:.9rem; padding:0 .4rem}
.choice{display:flex; gap:.5rem; align-items:center; padding:.4rem 0}

/* ---------- feedback / states ---------- */
.flash{border:1px solid; border-radius:var(--radius-sm); padding:.7rem 1rem; margin:.5rem 0}
.flash--success{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok)}
.flash--error,.error{background:var(--err-soft); border-color:var(--err-line); color:var(--err)}
.flash--warning{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}
.flash--info{background:var(--accent-soft); border-color:#c4ddff; color:var(--accent-strong)}
.empty-state,.empty{text-align:center; padding:2.6rem 1rem; color:var(--muted)}
.empty-state h2{color:var(--ink); margin:.2rem 0 .5rem}
.notice{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:1.5rem; text-align:center}
.notice h2{margin:.2rem 0 .5rem}

/* ---------- tenant selector ---------- */
.selector-form{display:flex; gap:.5rem; align-items:center}
.selector-form select{width:auto; min-width:12rem; padding:.35rem .5rem}

/* ---------- login (no shell) — friendly light background (CLAUDE-029) ---------- */
.plain{max-width:100%; margin:0; padding:0}
.login-hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem;
  background:
    radial-gradient(680px 420px at 12% 8%, rgba(31,111,235,.10), transparent 60%),
    radial-gradient(560px 380px at 88% 92%, rgba(13,148,136,.10), transparent 60%),
    linear-gradient(160deg,#f3f8ff 0%,#eef4fb 45%,#f6faf9 100%);
  position:relative; overflow:hidden;
}
.login-hero::before,.login-hero::after{content:""; position:absolute; border-radius:40% 44% 46% 42%; filter:blur(2px); opacity:.5; pointer-events:none}
.login-hero::before{width:280px; height:280px; left:-90px; top:-80px; background:rgba(31,111,235,.10)}
.login-hero::after{width:220px; height:220px; right:-70px; bottom:-70px; background:rgba(13,148,136,.12); border-radius:46% 42% 40% 44%}
.login-hero .card--narrow{margin:0; position:relative; z-index:1; width:100%; max-width:420px; box-shadow:0 10px 30px rgba(16,29,46,.10)}
.login-brand{font-weight:700; color:var(--ink); font-size:1.1rem; margin-bottom:.75rem}
.login-brand span{color:var(--muted); font-weight:500}
.plain>.flash{max-width:420px; margin:1rem auto 0}