/* Modern POS UI - Charcoal / Purple tone */
:root{
  --radius: 16px;
  --radius-sm: 12px;

  /* base */
  --bg: #0b1020;              /* deep charcoal/navy */
  --surface: rgba(255,255,255,.86);
  --surface-2: rgba(255,255,255,.78);
  --ink: #0f172a;             /* slate-900 for text on cards */
  --muted: rgba(15,23,42,.62);
  --border: rgba(15,23,42,.10);

  /* brand purple */
  --brand: #6d28d9;           /* purple-700 */
  --brand-2: #9333ea;         /* purple-600 */
  --brand-soft: rgba(109,40,217,.14);

  /* accent */
  --accent: #22c55e;          /* green for OK */
  --danger: #ef4444;
  --warn: #f59e0b;

  /* shadows */
  --shadow: 0 20px 55px rgba(0, 0, 0, .28);
  --shadow-sm: 0 12px 28px rgba(0, 0, 0, .20);
}

html, body { height: 100%; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  /* Dark classy background */
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(147,51,234,.18), transparent 55%),
    radial-gradient(800px 520px at 95% 10%, rgba(109,40,217,.20), transparent 55%),
    radial-gradient(1200px 700px at 50% 120%, rgba(0,0,0,.35), transparent 60%),
    var(--bg);
  color: #e5e7eb; /* light text on background */
  letter-spacing: .1px;
}

.container{ max-width: 1100px; }

/* Navbar */
.navbar{
  backdrop-filter: blur(12px);
  background: rgba(17, 24, 39, .55) !important; /* dark translucent */
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.navbar .navbar-brand{
  font-weight: 900;
  letter-spacing: .25px;
  color: #f9fafb !important;
}
.navbar a, .navbar .btn{
  color: #f3f4f6;
}
.navbar .nav-pill{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.06);
  color: rgba(243,244,246,.85);
}

/* Cards */
.card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.card .card-body{ padding: 18px; }
.card.soft{ background: var(--surface-2); }

/* Text inside pages (on light cards) */
h1,h2,h3,h4,h5,h6{ color: var(--ink); }
.text-muted{ color: var(--muted) !important; }

/* Dashboard typography */
.kpi-label{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(15,23,42,.55);
}
.kpi-value{
  font-size: 2.25rem;
  font-weight: 950;
  line-height: 1.08;
  color: var(--ink);
}

/* Buttons */
.btn{
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
}
.btn-sm{
  border-radius: 10px;
  padding: 7px 10px;
  font-weight: 800;
}

/* Primary = Purple gradient */
.btn-primary{
  border: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 16px 26px rgba(109,40,217,.22);
}
.btn-primary:hover{
  filter: brightness(.95);
}

/* Outline buttons (on dark nav / light body) */
.btn-outline-secondary{
  border-color: rgba(15,23,42,.18);
  color: rgba(15,23,42,.85);
  background: rgba(255,255,255,.55);
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.75);
  border-color: rgba(15,23,42,.28);
}

/* Outline primary uses purple */
.btn-outline-primary{
  border-color: rgba(109,40,217,.45);
  color: #5b21b6;
  background: rgba(255,255,255,.55);
}
.btn-outline-primary:hover{
  background: rgba(109,40,217,.10);
  border-color: rgba(109,40,217,.65);
  color: #4c1d95;
}

/* Danger / Success subtle */
.btn-outline-danger{
  background: rgba(255,255,255,.55);
}
.btn-success{
  background: #16a34a;
  border-color: #16a34a;
  box-shadow: 0 12px 22px rgba(22,163,74,.14);
}

/* Inputs */
.form-control, .form-select{
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  padding: 11px 12px;
  background: rgba(255,255,255,.92);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(109,40,217,.55);
  box-shadow: 0 0 0 .25rem rgba(109,40,217,.14);
}

/* Alerts */
.alert{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.86);
  color: var(--ink);
}
.alert-success{ background: rgba(22,163,74,.10); }
.alert-warning{ background: rgba(245,158,11,.12); }
.alert-danger{ background: rgba(239,68,68,.10); }
.alert-info{ background: rgba(109,40,217,.10); }

/* Badges */
.badge{
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 900;
  letter-spacing: .2px;
}
.text-bg-primary{ background-color: #6d28d9 !important; }
.text-bg-success{ background-color: #16a34a !important; }
.text-bg-dark{ background-color: #111827 !important; }
.text-bg-light{ background-color: rgba(15,23,42,.08) !important; color: rgba(15,23,42,.78) !important; }

/* Tables */
.table{
  border-color: rgba(15,23,42,.08);
  color: var(--ink);
}
.table thead th{
  font-size: .85rem;
  letter-spacing: .2px;
  color: rgba(15,23,42,.72);
}
.table-responsive{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
}
.table-hover tbody tr:hover{
  background: rgba(109,40,217,.06);
}
.table-light{
  --bs-table-bg: rgba(109,40,217,.06);
}

/* Small refinements */
hr{ opacity: .12; }
a{ text-decoration: none; }
a:hover{ text-decoration: none; }

/* Tablet comfort */
@media (max-width: 768px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .card .card-body{ padding: 16px; }
  .btn{ width: 100%; }
  .btn-sm{ width: auto; }
}