/* =========================================================
   Orion POS — Design Tokens
   Tema "night sky / constellation" — cocok dengan nama Orion,
   dibedakan dari default cream/terracotta atau dark/neon generik.
   ========================================================= */
:root{
  --orion-navy-950: #0F1526;
  --orion-navy-900: #151D33;
  --orion-navy-800: #1E2A4A;
  --orion-navy-700: #2A3A63;
  --orion-navy-600: #3A4E82;
  --orion-slate-400: #7C89AD;
  --orion-slate-200: #C6CCE0;
  --orion-bg: #F5F6FB;
  --orion-surface: #FFFFFF;
  --orion-border: #E4E7F2;
  --orion-text: #171B2E;
  --orion-text-soft: #5A6285;
  --orion-gold: #F5B942;
  --orion-gold-dark: #D99A1F;
  --orion-teal: #2BB4C4;
  --orion-danger: #E1504B;
  --orion-danger-bg: #FDEDEC;
  --orion-success: #2FAE6B;
  --orion-success-bg: #EAF8F0;
  --font-display: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  font-family: var(--font-body);
  background: var(--orion-bg);
  color: var(--orion-text);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4, .font-display{ font-family: var(--font-display); }
.font-mono, .tabular{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Scrollbar tipis */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: var(--orion-slate-200); border-radius:8px; }
::-webkit-scrollbar-track{ background: transparent; }

/* Pola konstelasi — dipakai TERBATAS hanya di login & header sidebar (signature element) */
.constellation-bg{
  position: relative;
  background:
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 90px 80px, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 150px 40px, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 200px 120px, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 260px 60px, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 40px 140px, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 320px 100px, rgba(255,255,255,.4), transparent),
    linear-gradient(160deg, var(--orion-navy-950), var(--orion-navy-800) 60%, var(--orion-navy-700));
  background-repeat: repeat;
  background-size: 340px 180px, 340px 180px, 340px 180px, 340px 180px, 340px 180px, 340px 180px, 340px 180px, cover;
}

/* Kartu & elemen umum */
.card{
  background: var(--orion-surface);
  border: 1px solid var(--orion-border);
  border-radius: 14px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.875rem; border-radius:10px; padding:.6rem 1rem;
  transition: all .15s ease; cursor:pointer; border:1px solid transparent;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--orion-navy-800); color:#fff; }
.btn-primary:hover{ background: var(--orion-navy-700); }
.btn-gold{ background: var(--orion-gold); color: var(--orion-navy-950); }
.btn-gold:hover{ background: var(--orion-gold-dark); }
.btn-outline{ background: transparent; border-color: var(--orion-border); color: var(--orion-text); }
.btn-outline:hover{ background: #F0F1F8; }
.btn-danger{ background: var(--orion-danger-bg); color: var(--orion-danger); }
.btn-danger:hover{ background: #FADEDD; }
.btn-success{ background: var(--orion-success-bg); color: var(--orion-success); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.input{
  width:100%; border:1px solid var(--orion-border); border-radius:10px;
  padding:.6rem .8rem; font-size:.9rem; background:#fff; color: var(--orion-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus{ outline:none; border-color: var(--orion-navy-600); box-shadow: 0 0 0 3px rgba(58,78,130,.15); }

.badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:700; padding:.15rem .55rem; border-radius:999px; letter-spacing:.02em; }
.badge-success{ background: var(--orion-success-bg); color: var(--orion-success); }
.badge-danger{ background: var(--orion-danger-bg); color: var(--orion-danger); }
.badge-gold{ background: #FCF1DA; color: var(--orion-gold-dark); }
.badge-slate{ background: #EEF0F9; color: var(--orion-text-soft); }

table.grid-table{ width:100%; border-collapse: collapse; font-size:.875rem; }
table.grid-table thead th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color: var(--orion-text-soft); font-weight:700; padding:.7rem .85rem; border-bottom:1px solid var(--orion-border);
  background:#FAFBFE; position:sticky; top:0;
}
table.grid-table tbody td{ padding:.65rem .85rem; border-bottom:1px solid var(--orion-border); vertical-align: middle; }
table.grid-table tbody tr:hover{ background:#FAFBFE; }

/* Sidebar aktif */
.nav-link{ display:flex; align-items:center; gap:.75rem; padding:.6rem .85rem; border-radius:10px; color: var(--orion-slate-200); font-size:.875rem; font-weight:500; transition: all .15s ease; }
.nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nav-link.active{ background: var(--orion-gold); color: var(--orion-navy-950); font-weight:700; }
.nav-link.active svg{ color: var(--orion-navy-950); }

/* Animasi ringan */
.fade-in{ animation: fadeIn .2s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none; } }
.scale-tap:active{ transform: scale(.97); }

/* Kartu produk POS */
.product-card{
  background:#fff; border:1px solid var(--orion-border); border-radius:12px; padding:.75rem;
  cursor:pointer; transition: all .12s ease; text-align:left;
}
.product-card:hover{ border-color: var(--orion-navy-600); box-shadow: 0 4px 14px rgba(30,42,74,.08); transform: translateY(-1px); }
.product-card:active{ transform: scale(.98); }

/* ====== Struk Cetak (thermal) ====== */
.struk-58{ width: 58mm; }
.struk-80{ width: 80mm; }
.struk-wrap{ font-family: var(--font-mono); font-size: 11px; color:#000; line-height:1.45; }
.struk-wrap hr{ border: none; border-top: 1px dashed #000; margin: 4px 0; }
.struk-center{ text-align:center; }
.struk-row{ display:flex; justify-content:space-between; gap:6px; }

@media print{
  body *{ visibility: hidden; }
  #print-area, #print-area *{ visibility: visible; }
  #print-area{ position:absolute; left:0; top:0; }
  @page{ margin: 0; }
}