:root{
  --nk-navy:#0b1f4d;
  --nk-blue:#1c5cff;
  --nk-blue-light:#3a8dff;
  --nk-gold:#f5a623;
  --nk-bg:#f3f6fc;
  --nk-green:#1ba97e;
  --nk-red:#e0433c;
}
*{box-sizing:border-box;}
body{
  background:var(--nk-bg);
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  color:#152341;
}
a{text-decoration:none;}

/* ---------- Auth pages ---------- */
.auth-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
  position:relative;
  padding:20px;
}
.auth-wrapper::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(11,31,77,.88), rgba(28,92,255,.78));
}
.auth-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:18px;
  padding:36px 32px;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}
.auth-wrapper .auth-footer{
  /* Scoped to .auth-wrapper (not just .auth-footer) so this reliably beats
     .app-footer's position:relative below — both are single-class selectors
     of equal specificity, so without this the one declared later in the
     file wins regardless of intent, dropping the footer back into the
     auth-wrapper flex row instead of pinning it to the bottom. */
  position:absolute;
  left:0; right:0; bottom:16px;
  z-index:2;
  text-align:center;
  font-size:.78rem;
  font-weight:700;
  color:rgba(255,255,255,.75);
}
.auth-card .brand-logo{
  display:block;
  margin:0 auto 10px;
  max-height:90px;
}
.auth-card h1{
  font-size:1.4rem;
  font-weight:700;
  text-align:center;
  color:var(--nk-navy);
  margin-bottom:2px;
}
.auth-card .tagline{
  text-align:center;
  color:var(--nk-blue);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.04em;
  margin-bottom:22px;
  text-transform:uppercase;
}
.auth-card .form-control, .auth-card .form-select{
  border-radius:10px;
  padding:10px 14px;
  border:1px solid #d8e0f0;
}
.btn-nkwa{
  background:linear-gradient(135deg,var(--nk-blue),var(--nk-navy));
  border:none;
  color:#fff;
  font-weight:600;
  border-radius:10px;
  padding:10px 18px;
  transition:.15s;
}
.btn-nkwa:hover{ filter:brightness(1.08); color:#fff; }
.btn-nkwa-outline{
  background:#fff;
  border:2px solid var(--nk-blue);
  color:var(--nk-blue);
  font-weight:600;
  border-radius:10px;
  padding:9px 18px;
}
.auth-links{ text-align:center; margin-top:16px; font-size:.9rem; }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:250px;
  background:linear-gradient(180deg,var(--nk-navy),#132a63);
  color:#dbe6ff;
  min-height:100vh;
  padding:22px 0;
  flex-shrink:0;
  position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding:0 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:14px;
}
.sidebar .brand img{ height:38px; }
.sidebar .brand-text{ font-weight:800; font-size:1.05rem; color:#fff; line-height:1.05; }
.sidebar .brand-text small{ display:block; font-weight:400; font-size:.65rem; color:var(--nk-blue-light); letter-spacing:.05em; }
.sidebar .shop-name{ padding:0 20px 14px; font-size:.78rem; color:#9db3e8; text-transform:uppercase; letter-spacing:.05em; }
.sidebar a.nav-link, .sidebar button.nav-link{
  color:#c9d7f7;
  padding:11px 22px;
  display:flex; align-items:center; gap:12px;
  font-size:.92rem;
  border:none;
  border-left:3px solid transparent;
  line-height:1.2;
  cursor:pointer;
}
.sidebar .nav-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; flex-shrink:0; font-size:1rem;
}
.sidebar .nav-label{ flex:1; text-align:left; }
.nav-badge{
  background:var(--nk-red);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.sidebar a.nav-link:hover, .sidebar a.nav-link.active,
.sidebar button.nav-link:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-left:3px solid var(--nk-gold);
}
.sidebar hr{ border-color:rgba(255,255,255,.12); margin:12px 20px;}

.main-area{ flex:1; position:relative; min-width:0; min-height:100vh; display:flex; flex-direction:column; }
.main-area::before{
  content:"";
  position:fixed; inset:0; left:250px;
  background-image:var(--watermark-url);
  background-size:cover;
  background-position:center;
  opacity:.06;
  z-index:0;
  pointer-events:none;
}
.topbar{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  background:#fff;
  padding:14px 26px;
  box-shadow:0 2px 10px rgba(20,40,90,.06);
}
.topbar .page-title{ font-weight:700; color:var(--nk-navy); font-size:1.15rem; }
.user-chip{
  display:flex; align-items:center; gap:10px;
  background:var(--nk-bg);
  padding:6px 14px 6px 6px;
  border-radius:30px;
}
.user-chip .avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--nk-blue),var(--nk-gold));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem;
}
.content{ position:relative; z-index:1; padding:26px; flex:1 0 auto; }
.app-footer{
  position:relative; z-index:1;
  flex-shrink:0;
  text-align:center;
  padding:14px 26px 20px;
  font-size:.78rem;
  font-weight:700;
  color:#8b96b3;
}

/* ---------- Cards / widgets ---------- */
.card-nkwa{ background:#fff; border-radius:14px; box-shadow:0 4px 18px rgba(20,40,90,.06); border:none; }
.stat-card{ padding:20px; border-radius:14px; background:#fff; box-shadow:0 4px 18px rgba(20,40,90,.06); }
.stat-card .stat-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:#7c88a6; font-weight:600;}
.stat-card .stat-value{ font-size:1.65rem; font-weight:800; color:var(--nk-navy); margin-top:4px;}

.item-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 4px 14px rgba(20,40,90,.07);
  transition:.15s; height:100%; display:flex; flex-direction:column;
}
.item-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,40,90,.14); }
.item-card .item-img{ height:120px; background:#eef2fb; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.item-card .item-img img{ width:100%; height:100%; object-fit:cover; }
.item-card .item-body{ padding:12px 14px; flex:1; display:flex; flex-direction:column; }
.item-card .item-name{ font-weight:700; font-size:.92rem; color:var(--nk-navy); margin-bottom:2px; min-height:2.4em;}
.item-card .item-price{ color:var(--nk-blue); font-weight:800; font-size:1.05rem; }
.badge-stock{ font-size:.72rem; padding:4px 9px; border-radius:20px; font-weight:600; }
.badge-stock.ok{ background:#e4f8f0; color:var(--nk-green); }
.badge-stock.low{ background:#fdeceb; color:var(--nk-red); }
.badge-new{
  display:inline-block;
  background:var(--nk-gold);
  color:#402d00;
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:2px 8px;
  border-radius:20px;
  vertical-align:middle;
}

.cart-panel{ background:#fff; border-radius:14px; box-shadow:0 4px 18px rgba(20,40,90,.06); padding:16px; position:sticky; top:14px; }
.cart-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #eef1f8; font-size:.88rem;}
.badge-role{ font-size:.68rem; padding:3px 10px; border-radius:20px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;}
.badge-role.admin{ background:#fff3de; color:var(--nk-gold); }
.badge-role.staff{ background:#e6f0ff; color:var(--nk-blue); }

.table-nkwa thead{ background:var(--nk-bg); }
.table-nkwa th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:#5c6a8c; font-weight:700; border:none;}
.table-nkwa td{ vertical-align:middle; }

.menu-toggle-btn{
  display:none;
  background:none;
  border:none;
  font-size:1.35rem;
  color:var(--nk-navy);
  line-height:1;
  padding:4px 10px 4px 0;
  cursor:pointer;
}
.sidebar-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(10,20,45,.5);
  z-index:1049;
}

.ios-install-hint{
  display:none;
  align-items:center;
  gap:12px;
  position:fixed;
  left:12px; right:12px; bottom:12px;
  z-index:1100;
  background:var(--nk-navy);
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(10,20,45,.35);
  font-size:.85rem;
}
.ios-install-hint span{ flex:1; }
.ios-install-hint button{
  background:rgba(255,255,255,.15);
  border:none;
  color:#fff;
  border-radius:8px;
  width:26px; height:26px;
  flex-shrink:0;
  line-height:1;
}

@media (max-width: 900px){
  .app-shell{ flex-direction:column; }
  .menu-toggle-btn{ display:inline-flex; align-items:center; }
  .sidebar{
    position:fixed; top:0; left:0; z-index:1050;
    width:250px; max-width:82vw; height:100vh;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:6px 0 28px rgba(10,20,45,.3);
  }
  body.mobile-nav-open .sidebar{ transform:translateX(0); }
  body.mobile-nav-open .sidebar-backdrop{ display:block; }
  body.mobile-nav-open{ overflow:hidden; }
  .main-area::before{ left:0; }
}

/* ---------- Receipts page ---------- */
.receipts-total-stat{ text-align:right; }

@media (max-width: 700px){
  .content{ padding:16px; }
  .receipts-header{ flex-direction:column; align-items:stretch; }
  .receipts-header-left form{ flex-direction:column; align-items:stretch; }
  .receipts-header-left form input,
  .receipts-header-left form .btn{ max-width:none !important; width:100%; }
  .receipts-total-stat{ width:100%; text-align:left; }
}

@media (max-width: 480px){
  .topbar{ padding:12px 16px; }
  .card-nkwa.p-4{ padding:16px !important; }
}

/* ---------- POS Home: search + ticket + vertical item list ---------- */
.pos-topbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pos-topbar .search-wrap{ position:relative; min-width:220px; }
.pos-topbar .search-wrap .search-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#9aa7c4; font-size:.9rem; pointer-events:none;
}
.pos-topbar .search-wrap input{ padding-left:38px; border-radius:10px; }
.pos-topbar .form-select{ max-width:220px; border-radius:10px; }

.ticket-btn{
  background:linear-gradient(135deg,var(--nk-blue),var(--nk-navy));
  color:#fff; border:none; border-radius:10px; padding:10px 18px;
  font-weight:700; display:flex; align-items:center; gap:8px; white-space:nowrap;
  box-shadow:0 4px 14px rgba(28,92,255,.25);
}
.ticket-btn .badge{ font-weight:800; }

.item-list-vertical{
  background:#fff; border-radius:14px; box-shadow:0 4px 18px rgba(20,40,90,.06);
  overflow:hidden;
}
.item-row{
  display:flex; align-items:center; gap:14px; padding:12px 18px;
  border-bottom:1px solid #eef1f8; cursor:pointer; transition:background .1s;
  user-select:none;
}
.item-row:last-child{ border-bottom:none; }
.item-row:hover{ background:#f6f9ff; }
.item-row.adding{ background:#e4f8f0; }
.item-row-thumb{
  width:44px; height:44px; border-radius:10px; background:#eef2fb;
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; font-size:1.25rem;
}
.item-row-thumb img{ width:100%; height:100%; object-fit:cover; }
.item-row-info{ flex:1; min-width:0; }
.item-row-name{ font-weight:700; color:var(--nk-navy); font-size:.95rem; }
.item-row-sub{ font-size:.78rem; color:#8794b0; margin-top:1px; }
.item-row-price{ font-weight:800; color:var(--nk-blue); font-size:1rem; white-space:nowrap; }

/* Ticket modal */
.ticket-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #eef1f8; }
.ticket-row:last-child{ border-bottom:none; }
.ticket-row .tr-name{ flex:1; font-weight:600; font-size:.9rem; color:var(--nk-navy); }
.ticket-qty{ display:flex; align-items:center; gap:8px; }
.ticket-qty button{
  width:26px; height:26px; border-radius:6px; border:1px solid #d8e0f0; background:#fff;
  line-height:1; font-weight:700; color:var(--nk-blue);
}
.ticket-qty .qty-val{ min-width:18px; text-align:center; font-weight:700; }
.ticket-row .tr-subtotal{ font-weight:700; min-width:75px; text-align:right; color:var(--nk-navy); }
.ticket-row .tr-remove{ color:var(--nk-red); background:none; border:none; font-size:1rem; padding:0 4px; }

/* Back link on forms */
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--nk-blue); font-weight:600; font-size:.9rem; margin-bottom:14px;
}

/* Combined CHARGE + total bar (tap the whole bar to charge) */
.charge-bar{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,var(--nk-green),#158a67);
  color:#fff; border:none; border-radius:0 0 14px 14px;
  padding:18px 24px; font-weight:800; font-size:1.1rem; letter-spacing:.03em;
  transition:filter .15s;
}
.charge-bar:hover:not(:disabled){ filter:brightness(1.06); }
.charge-bar:disabled{ background:#c9d3e4; color:#8794b0; cursor:not-allowed; }
.charge-bar .charge-label{ text-transform:uppercase; }
.charge-bar .charge-amount{ font-size:1.15rem; }