:root {
  --primary:#5b21b6;
  --primary-dark:#43168a;
  --ink:#18202b;
  --muted:#667085;
  --line:#e2e6ec;
  --bg:#f5f6f8;
  --danger:#b42318;
  --success:#067647;
  --amber:#b54708;
  --radius:12px;
  --shadow:0 2px 12px rgba(24,32,43,.07)
}

* {
  box-sizing:border-box
}

html {
  font-family:"Noto Sans Thai",Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg)
}

body {
  margin:0;
  font-size:15px;
  line-height:1.5
}

a {
  color:var(--primary);
  text-decoration:none
}

button,input,select,textarea {
  font:inherit
}

.topbar {
  height:64px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 max(20px,calc((100vw - 1180px)/2));
  gap:22px;
  position:sticky;
  top:0;
  z-index:10
}

.brand {
  font-weight:800;
  color:var(--ink);
  white-space:nowrap
}

.topbar nav {
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto
}

.topbar nav>a {
  color:#344054
}

.user-name {
  font-size:13px;
  color:var(--muted);
  padding-left:16px;
  border-left:1px solid var(--line)
}

.inline {
  display:inline
}

.link-button {
  border:0;
  background:none;
  color:var(--danger);
  cursor:pointer;
  padding:0
}

.nav-toggle {
  display:none;
  border:0;
  background:none;
  font-size:24px
}

.container {
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 80px
}

.auth-container {
  min-height:100vh;
  display:grid;
  place-items:center
}

.auth-card {
  background:#fff;
  width:min(430px,100%);
  padding:38px;
  border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid var(--line)
}

.auth-logo {
  width:62px;
  height:62px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  margin:auto
}

.auth-card h1 {
  text-align:center;
  margin:16px 0 0;
  font-size:clamp(20px,6vw,28px);
  white-space:nowrap
}

.auth-card p {
  text-align:center
}

.auth-card label {
  display:block;
  margin-top:16px
}

.auth-card input {
  margin-top:6px
}

.page-head,.card-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}

.page-head {
  margin-bottom:20px
}

.page-head h1 {
  margin:0
}

.page-head p {
  margin:2px 0
}

.eyebrow {
  color:var(--muted);
  font-weight:600
}

.muted,small,.optional {
  color:var(--muted)
}

.required,.danger-text {
  color:var(--danger)
}

.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:20px
}

.stat {
  background:#fff;
  border:1px solid var(--line);
  border-left:5px solid var(--primary);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow)
}

.stat span {
  color:var(--muted);
  display:block
}

.stat strong {
  font-size:28px
}

.stat.amber {
  border-left-color:#f79009
}

.stat.green {
  border-left-color:#12b76a
}

.stat.red {
  border-left-color:#f04438
}

.stat.wide {
  grid-column:span 2
}

.card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:18px;
  box-shadow:var(--shadow)
}

.card h2 {
  font-size:18px;
  margin:0 0 16px
}

.card-head h2 {
  margin:0
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid #b9c0ca;
  background:#fff;
  color:#344054;
  border-radius:8px;
  padding:9px 14px;
  cursor:pointer;
  font-weight:600
}

.btn:hover {
  background:#f8f9fb
}

.btn.primary {
  background:var(--primary);
  border-color:var(--primary);
  color:#fff
}

.btn.primary:hover {
  background:var(--primary-dark)
}

.btn.danger {
  background:var(--danger);
  border-color:var(--danger);
  color:#fff
}

.btn.danger-outline {
  border-color:#f4aaa4;
  color:var(--danger)
}

.btn.small {
  padding:5px 10px;
  font-size:13px
}

.btn.full {
  width:100%;
  margin-top:22px
}

.alert {
  padding:14px 16px;
  border-radius:10px;
  margin-bottom:18px;
  border:1px solid
}

.alert.success {
  background:#ecfdf3;
  border-color:#abefc6;
  color:#05603a
}

.alert.danger {
  background:#fef3f2;
  border-color:#fecdca;
  color:#912018
}

.alert ul {
  margin:6px 0 0
}

.table-wrap {
  overflow-x:auto
}

table {
  width:100%;
  border-collapse:collapse
}

th,td {
  text-align:left;
  padding:12px;
  border-bottom:1px solid var(--line);
  vertical-align:top
}

th {
  font-size:13px;
  color:#475467;
  background:#fafafa
}

.num {
  text-align:right;
  white-space:nowrap
}

tfoot th {
  color:var(--ink);
  font-size:15px
}

.badge {
  display:inline-block;
  border-radius:20px;
  padding:3px 9px;
  font-size:12px;
  font-weight:700
}

.badge.draft {
  background:#fff4e5;
  color:#934c00
}

.badge.issued {
  background:#e8f8ef;
  color:#05603a
}

.badge.cancelled {
  background:#feeceb;
  color:#912018
}

.filter {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:12px;
  align-items:end
}

.filter-actions {
  display:flex;
  gap:8px;
  grid-column:1/-1
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.span-2 {
  grid-column:span 2
}

label {
  display:block;
  font-weight:600
}

label small {
  display:block;
  font-weight:400;
  margin-top:4px
}

input,select,textarea {
  display:block;
  width:100%;
  border:1px solid #aeb7c3;
  border-radius:8px;
  padding:10px 11px;
  background:#fff;
  margin-top:5px;
  color:var(--ink)
}

input:focus,select:focus,textarea:focus {
  outline:3px solid rgba(91,33,182,.15);
  border-color:var(--primary)
}

.item-row {
  display:grid;
  grid-template-columns:1fr 220px auto;
  gap:12px;
  align-items:end;
  padding:12px 0;
  border-bottom:1px dashed var(--line)
}

.total-box {
  margin:20px 0 0 auto;
  width:min(350px,100%);
  display:flex;
  justify-content:space-between;
  background:#f5f0ff;
  padding:14px 18px;
  border-radius:10px
}

.sticky-actions {
  position:sticky;
  bottom:0;
  background:rgba(245,246,248,.95);
  border-top:1px solid var(--line);
  padding:14px 0;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  backdrop-filter:blur(6px)
}

.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.detail-grid .card {
  margin:0 0 18px
}

dl {
  display:grid;
  grid-template-columns:150px 1fr;
  margin:0
}

dt,dd {
  padding:8px 0;
  border-bottom:1px solid var(--line)
}

dt {
  color:var(--muted)
}

dd {
  margin:0;
  font-weight:600
}

.action-panel {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  margin:22px 0
}

.action-panel form {
  margin:0
}

.hidden {
  display:none
}

.empty {
  padding:35px;
  text-align:center
}

.empty strong,.empty span {
  display:block
}

.empty-page {
  text-align:center;
  padding:80px 20px
}

.error-code {
  font-size:80px;
  color:var(--primary);
  font-weight:900
}

details {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:15px
}

summary {
  font-weight:700;
  color:var(--primary);
  cursor:pointer
}

.top-gap {
  margin-top:16px
}

.pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px
}

.compare-card strong,.compare-card .muted {
  display:block
}

.compare-card strong {
  margin-top:3px
}

@media(max-width:800px) {
  .topbar {
    padding:0 16px
  }

  .nav-toggle {
    display:block;
    margin-left:auto
  }

  .topbar nav {
    display:none;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:#fff;
    padding:18px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch
  }

  .topbar nav.open {
    display:flex
  }

  .user-name {
    border:0;
    padding:10px 0;
    border-top:1px solid var(--line)
  }

  .container {
    padding:20px 14px 80px
  }

  .page-head {
    align-items:flex-start
  }

  .stats-grid {
    grid-template-columns:1fr 1fr
  }

  .stat.wide {
    grid-column:span 2
  }

  .filter,.form-grid,.detail-grid {
    grid-template-columns:1fr
  }

  .span-2 {
    grid-column:auto
  }

  .item-row {
    grid-template-columns:1fr
  }

  .remove-item {
    justify-self:start
  }

  .action-panel {
    align-items:stretch;
    flex-direction:column
  }

  .action-panel .btn,.action-panel form,.action-panel button {
    width:100%
  }

  dl {
    grid-template-columns:1fr
  }

  dt {
    border-bottom:0;
    padding-bottom:0
  }

  .table-wrap table {
    min-width:720px
  }
}

@media(max-width:480px) {
  .stats-grid {
    grid-template-columns:1fr
  }

  .stat.wide {
    grid-column:auto
  }

  .page-head {
    flex-direction:column
  }

  .page-head>.btn {
    width:100%
  }

  .auth-card {
    padding:25px
  }

  .filter-actions {
    flex-direction:column
  }

  .sticky-actions .btn {
    flex:1
  }
}