@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bg-deep:#0b1523;
  --bg-mid:#0f2136;
  --bg-glow-1: rgba(51,232,176,0.16);
  --bg-glow-2: rgba(91,141,239,0.18);
  --bg-glow-3: rgba(255,107,129,0.10);

  --glass-bg: rgba(255,255,255,0.055);
  --glass-bg-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.14);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.45);

  --accent-mint:#33e8b0;
  --accent-mint-dim: rgba(51,232,176,0.15);
  --accent-blue:#5b8def;
  --accent-amber:#ffb454;
  --accent-rose:#ff6b81;

  --text-hi:#20a2b9;
  --text-mid:#aebdca;
  --text-dim:#7c8ba0;

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--text-hi);
  background:
    radial-gradient(circle at 8% 8%, var(--bg-glow-1), transparent 40%),
    radial-gradient(circle at 92% 18%, var(--bg-glow-2), transparent 45%),
    radial-gradient(circle at 50% 100%, var(--bg-glow-3), transparent 50%),
    linear-gradient(160deg, var(--bg-deep), var(--bg-mid));
  background-attachment:fixed;
  min-height:100vh;
  letter-spacing:0.1px;
}

h1,h2,h3,h4,h5,.brand,.display{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:0.2px;
}

a{color:var(--accent-blue); text-decoration:none;}
a:hover{color:var(--accent-mint);}

::selection{background:var(--accent-mint); color:#04140f;}

/* ---------- Glass primitives ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--glass-shadow);
}
.glass-panel{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--glass-shadow);
  padding:1.5rem;
}
.glass-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  padding:1.1rem 1.25rem;
}
.glass-card:hover{
  transform:translateY(-3px);
  border-color:rgba(51,232,176,0.35);
  box-shadow:0 14px 40px rgba(0,0,0,0.5);
}

.glass-nav{
  background:rgba(10,20,32,0.55);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}

.glass-sidebar{
  background:rgba(10,20,32,0.5);
  border-right:1px solid var(--glass-border);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.18) transparent;
  will-change:scroll-position;
}
.glass-sidebar::-webkit-scrollbar{ width:6px; }
.glass-sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.16); border-radius:99px; }

/* Desktop shell: sidebar is pinned to the viewport with position:fixed so its
   size can never change between page navigations — only its own contents
   scroll, independently of whatever page is loaded on the right. */
.app-shell{ min-height:100vh; }
@media (min-width:992px){
  .app-shell .glass-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:250px; height:100vh; z-index:1030;
  }
  .app-main{ margin-left:250px; }
}
.app-main{ min-height:100vh; }
@media (max-width:991.98px){
  .app-main{ margin-top:56px; }
}

/* ---------- Nav / Sidebar links ---------- */
.side-link{
  display:flex; align-items:center; gap:.7rem;
  padding:.65rem .9rem; border-radius:var(--radius-sm);
  color:var(--text-mid); font-weight:500; font-size:.92rem;
  transition:all .15s ease; margin-bottom:.25rem;
}
.side-link i{font-size:1.05rem; width:20px; text-align:center;}
.side-link:hover{ background:var(--glass-bg-strong); color:var(--text-hi); }
.side-link.active{
  background:linear-gradient(120deg, var(--accent-mint-dim), rgba(91,141,239,0.10));
  color:var(--accent-mint);
  border:1px solid rgba(51,232,176,0.3);
}
.side-section{
  font-size:.68rem; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text-dim); margin:1.1rem .9rem .4rem;
}

/* ---------- Buttons ---------- */
.btn-glass{
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  color:var(--text-hi);
  border-radius:var(--radius-sm);
  padding:.55rem 1.1rem;
  font-weight:500; font-size:.9rem;
  backdrop-filter:blur(10px);
  transition:all .15s ease;
}
.btn-glass:hover{ background:rgba(255,255,255,0.14); color:var(--text-hi); }

.btn-mint{
  background:linear-gradient(135deg, var(--accent-mint), #22c39a);
  border:none; color:#04140f; font-weight:600;
  border-radius:var(--radius-sm); padding:.6rem 1.2rem;
  box-shadow:0 6px 20px rgba(51,232,176,0.25);
  transition:all .15s ease;
}
.btn-mint:hover{ transform:translateY(-1px); box-shadow:0 8px 26px rgba(51,232,176,0.4); color:#04140f; }

.btn-outline-glass{
  background:transparent; border:1px solid var(--glass-border); color:var(--text-mid);
  border-radius:var(--radius-sm); padding:.55rem 1.1rem; font-weight:500;
  transition:all .15s ease;
}
.btn-outline-glass:hover{ border-color:var(--accent-mint); color:var(--accent-mint); }

.btn-danger-glass{
  background:rgba(255,107,129,0.14); border:1px solid rgba(255,107,129,0.4); color:var(--accent-rose);
  border-radius:var(--radius-sm); padding:.55rem 1.1rem; font-weight:500;
}
.btn-danger-glass:hover{ background:rgba(255,107,129,0.24); color:#fff; }

/* ---------- Inputs ---------- */
.glass-input, select.glass-input, textarea.glass-input{
  width:100%;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  color:var(--text-hi);
  padding:.6rem .85rem;
  font-family:'Inter',sans-serif;
  transition:border-color .15s ease, background .15s ease;
}
.glass-input:focus{
  outline:none; border-color:var(--accent-mint);
  background:rgba(255,255,255,0.08);
  box-shadow:0 0 0 3px rgba(51,232,176,0.15);
}
.glass-input::placeholder{ color:var(--text-dim); }
label.glass-label{ font-size:.82rem; color:var(--text-mid); margin-bottom:.35rem; display:block; font-weight:500;}

/* ---------- Badges / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .65rem; border-radius:99px; font-size:.75rem; font-weight:600;
  border:1px solid transparent;
}
.pill-mint{ background:var(--accent-mint-dim); color:var(--accent-mint); border-color:rgba(51,232,176,0.35);}
.pill-amber{ background:rgba(255,180,84,0.14); color:var(--accent-amber); border-color:rgba(255,180,84,0.35);}
.pill-rose{ background:rgba(255,107,129,0.14); color:var(--accent-rose); border-color:rgba(255,107,129,0.35);}
.pill-blue{ background:rgba(91,141,239,0.14); color:var(--accent-blue); border-color:rgba(91,141,239,0.35);}

/* ---------- KPI stat card (signature element) ---------- */
.stat-card{
  position:relative; overflow:hidden;
  padding:1.3rem 1.4rem; border-radius:var(--radius-lg);
}
.stat-card .stat-label{ color:var(--text-dim); font-size:.78rem; text-transform:uppercase; letter-spacing:1px; }
.stat-card .stat-value{
  font-family:'JetBrains Mono',monospace; font-size:1.9rem; font-weight:600; color:var(--text-hi); margin-top:.3rem;
}
.stat-card .stat-icon{
  position:absolute; right:1.1rem; top:1.1rem; font-size:1.4rem; opacity:.55;
}
.stat-card::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(circle at 100% 0%, rgba(51,232,176,0.16), transparent 60%);
}

/* ---------- Tables ---------- */
.glass-table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.glass-table thead th{
  color:var(--text-dim); font-size:.72rem; text-transform:uppercase; letter-spacing:1px;
  font-weight:600; padding:.5rem .9rem; text-align:left;
}
.glass-table tbody tr{ background:var(--glass-bg); }
.glass-table tbody tr td{
  padding:.75rem .9rem; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border);
}
.glass-table tbody tr td:first-child{ border-left:1px solid var(--glass-border); border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
.glass-table tbody tr td:last-child{ border-right:1px solid var(--glass-border); border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.glass-table tbody tr:hover td{ background:rgba(255,255,255,0.04); }

.mono{ font-family:'JetBrains Mono',monospace; }

/* ---------- Login page ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:2rem;
}
.login-card{ width:100%; max-width:420px; padding:2.4rem 2.2rem; }
.rx-mark{
  width:52px; height:52px; border-radius:16px;
  background:linear-gradient(135deg, var(--accent-mint), var(--accent-blue));
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.4rem; color:#04140f;
  box-shadow:0 8px 24px rgba(51,232,176,0.3);
}

/* ---------- POS layout ---------- */
.pos-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:1.2rem; align-items:start; }
@media (max-width:991px){ .pos-grid{ grid-template-columns:1fr; } }

/* Right column (cart + checkout) stays pinned while the search results
   on the left scroll, so the running total is always visible. */
.pos-right-col{ position:sticky; top:1.25rem; }
@media (max-width:991px){ .pos-right-col{ position:static; } }

/* Cart shows ~7-8 lines comfortably, then scrolls internally instead of
   pushing the checkout panel off screen. */
.pos-cart-lines{
  max-height:340px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:.25rem;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.18) transparent;
}
.pos-cart-lines::-webkit-scrollbar{ width:6px; }
.pos-cart-lines::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.16); border-radius:99px; }

.pos-search-results{
  max-height:460px;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.18) transparent;
}
.pos-search-results::-webkit-scrollbar{ width:6px; }
.pos-search-results::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.16); border-radius:99px; }

.cart-line{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .3rem; border-bottom:1px solid var(--glass-border);
  gap:.5rem;
}
.qty-btn{
  width:26px; height:26px; border-radius:8px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.06); color:var(--text-hi); display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  user-select:none;
}
.qty-btn:hover{ border-color:var(--accent-mint); color:var(--accent-mint); }
.qty-input{
  width:46px; text-align:center; -moz-appearance:textfield;
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-border);
  border-radius:8px; color:var(--text-hi); font-family:'JetBrains Mono',monospace;
  font-size:.85rem; padding:.2rem 0;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.qty-input:focus{ outline:none; border-color:var(--accent-mint); box-shadow:0 0 0 2px rgba(51,232,176,0.15); }
.dept-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-border);
  color:var(--text-mid); border-radius:99px; padding:.4rem .85rem;
  font-size:.8rem; font-weight:500; cursor:pointer; transition:all .15s ease;
}
.dept-btn:hover{ background:rgba(255,255,255,0.1); color:var(--text-hi); }
.dept-btn.active{
  background:linear-gradient(120deg, var(--accent-mint-dim), rgba(91,141,239,0.12));
  border-color:rgba(51,232,176,0.4); color:var(--accent-mint);
}
.search-result-item{
  padding:.7rem .9rem; border-radius:var(--radius-sm); cursor:pointer;
  border:1px solid transparent; transition:all .12s ease;
}
.search-result-item:hover{ background:var(--glass-bg-strong); border-color:var(--glass-border); }

/* ---------- Progress bar (stock level) ---------- */
.stock-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,0.08); overflow:hidden; }
.stock-bar-fill{ height:100%; border-radius:99px; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:99px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Misc ---------- */
.text-dim{ color:var(--text-dim) !important; }
.text-mid{ color:var(--text-mid) !important; }
.text-mint{ color:var(--accent-mint) !important; }
.text-rose{ color:var(--accent-rose) !important; }
.text-amber{ color:var(--accent-amber) !important; }
.divider-glass{ border:none; border-top:1px solid var(--glass-border); }

.page-header{ margin-bottom:1.4rem; }
.page-header h1{ font-size:1.5rem; font-weight:600; margin:0; }
.page-header p{ color:var(--text-dim); margin:.2rem 0 0; font-size:.9rem; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}