/* =========================================================
   Naleng AutoPOS — Mobile-first Dashboard
   Colors: Deep Blue + Orange (Auto Industry: power + growth)
========================================================= */

:root{
  --bg:#f6f8fc;
  --panel: rgba(255,255,255,.90);
  --panel2: rgba(255,255,255,.72);

  --deep:#062a57;      /* deep blue */
  --deep2:#0b3d7a;
  --orange:#ff7a18;    /* orange */
  --orange2:#ff9a3c;

  --text:#0b1b33;
  --muted:#5a6b7d;
  --line: rgba(12, 28, 55, .12);

  --shadow: 0 18px 45px rgba(2, 10, 28, .10);
  --shadow2: 0 10px 28px rgba(2, 10, 28, .08);

  --radius: 18px;
  --radius2: 22px;

  --topH: 68px;
  --sidebarW: 300px;

  --focus: rgba(255, 122, 24, .25);
}





*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(11,61,122,.12), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(255,122,24,.14), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
button{font-family:inherit}

.icon-btn{
  width:44px; height:44px;
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow: var(--shadow2);
  transition: transform .15s ease, border-color .2s ease;
}
.icon-btn:active{transform: scale(.98)}
.icon-btn:focus{outline: 3px solid var(--focus); outline-offset:2px}

.btn{
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, var(--deep), var(--deep2));
  color:#fff;
  padding: 12px 14px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 800;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform .15s ease, filter .2s ease;
}
.btn:active{transform: scale(.99)}
.btn:hover{filter: brightness(1.05)}
.btn.ghost{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn.danger{
  background: linear-gradient(135deg, #a3122f, #e0314b);
  border-color: rgba(255,255,255,.18);
}

/* =========================
   TOPBAR (NAVBAR)
========================= */
.topbar{
  height: var(--topH);
  position: sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar-left{display:flex; align-items:center; gap:12px}
.brand{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow2);
}
.brand-mark{
  width:34px; height:34px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color:#111;
}
.brand-text{font-weight: 800; letter-spacing:.2px}
.brand-text b{color: var(--deep)}

.topbar-right{display:flex; align-items:center; gap:10px}

/* Theme button */
.theme-btn{
  border:1px solid var(--line);
  background: var(--panel);
  padding: 10px 12px;
  height:44px;
  border-radius: 14px;
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.theme-dot{
  width:14px; height:14px; border-radius:999px;
  background: linear-gradient(135deg, var(--deep), var(--orange));
}
.theme-label{font-weight: 800; font-size: 13px; color: var(--muted)}

/* User dropdown */
.user-area{position:relative}
.user-btn{
  border:1px solid var(--line);
  background: var(--panel);
  height:44px;
  border-radius: 14px;
  padding: 8px 10px;
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.user-avatar{
  width:32px; height:32px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(11,61,122,.12);
  color: var(--deep);
}
.user-name{font-weight: 800; font-size: 13px}
.chevron{font-size: 12px; color: var(--muted)}

.dropdown{
  position:absolute;
  right:0;
  top: 52px;
  width: 210px;
  border-radius: 16px;
  background: var(--panel);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateY(-6px);
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
}
.dropdown.open{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.dropdown-item{
  display:flex; gap:10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(12,28,55,.08);
  font-weight: 800;
  color: var(--text);
}
.dropdown-item:hover{background: rgba(255,122,24,.10)}
.dropdown-item.danger{color:#b51230}
.dropdown-item.danger:hover{background: rgba(181,18,48,.08)}

/* =========================
   APP LAYOUT
========================= */
.app{
  display:grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - var(--topH));
}

/* Sidebar - mobile drawer */
.sidebar{
  position: fixed;
  top: var(--topH);
  left:0;
  width: min(86vw, var(--sidebarW));
  height: calc(100vh - var(--topH));
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(-105%);
  transition: transform .2s ease;
  z-index: 60;
  display:flex;
  flex-direction: column;
}
.sidebar.open{transform: translateX(0)}

.sidebar-head{
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.sidebar-title{
  display:flex; gap:12px; align-items:center;
  margin-bottom: 12px;
}
.chip{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(6,42,87,.12), rgba(255,122,24,.16));
  border: 1px solid rgba(12,28,55,.10);
  color: var(--deep);
}
.sidebar-name{font-weight: 900}
.sidebar-sub{font-size: 12px; color: var(--muted); margin-top:2px}

.sidebar-search{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.sidebar-search input{
  border:0; outline:0;
  width:100%;
  background: transparent;
  font-weight: 700;
  color: var(--text);
}
.sidebar-search i{color: var(--muted)}

.nav{
  padding: 12px;
  overflow:auto;
  flex:1;
}
.nav-group{
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 900;
  margin: 14px 8px 8px;
  text-transform: uppercase;
}
.nav-link{
  display:flex; align-items:center; gap:12px;
  padding: 12px 12px;
  border-radius: 16px;
  font-weight: 850;
  border: 1px solid transparent;
  transition: background .2s ease, transform .1s ease, border-color .2s ease;
}
.nav-link i{width:18px; text-align:center; color: var(--deep2)}
.nav-link:hover{
  background: rgba(255,122,24,.10);
  border-color: rgba(255,122,24,.22);
}
.nav-link.active{
  background: linear-gradient(135deg, rgba(6,42,87,.12), rgba(255,122,24,.14));
  border-color: rgba(11,61,122,.22);
  box-shadow: inset 6px 0 0 var(--orange);
}

.sidebar-foot{
  padding: 14px;
  border-top: 1px solid var(--line);
}
.status-pill{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-weight: 850;
  color: var(--muted);
}
.status-pill .dot{
  width:10px; height:10px; border-radius:999px;
  background: #19c37d;
}

/* Main content */
.content{
  padding: 14px;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}
.welcome h1{
  margin:0 0 8px;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  letter-spacing: -.02em;
}
.accent{color: var(--deep2)}
.welcome p{
  margin:0;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 650;
}
.rule{
  height: 3px;
  width: 130px;
  border-radius: 99px;
  margin: 12px 0 10px;
  background: linear-gradient(90deg, var(--orange), rgba(255,122,24,.05));
}

.quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.qa-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 11px 12px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
  font-weight: 900;
}
.qa-btn:hover{border-color: rgba(255,122,24,.26); background: rgba(255,255,255,.95)}
.qa-btn.ghost{
  background: transparent;
}

/* Hero card */
.hero-card{
  background: linear-gradient(135deg, rgba(6,42,87,.95), rgba(11,61,122,.92));
  color:#fff;
  border-radius: var(--radius2);
  padding: 14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.12);
}
.hero-title{font-weight: 900; opacity:.95}
.hero-metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.hero-metric{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 10px;
}
.hero-metric .k{font-size: 12px; opacity:.85; font-weight: 800}
.hero-metric .v{font-size: 15px; font-weight: 950; margin-top:4px}
.hero-metric .v.warn{color: var(--orange2)}
.hero-note{
  margin-top: 12px;
  display:flex; gap:10px; align-items:center;
  font-weight: 700;
  opacity: .92;
}

/* Cards */
.grid{
  display:grid;
  gap: 12px;
  margin-top: 12px;
}
.cards{
  grid-template-columns: 1fr;
}
.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 14px;
  display:flex;
  gap: 12px;
  box-shadow: var(--shadow2);
}
.card-icon{
  width:46px; height:46px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,122,24,.18), rgba(11,61,122,.12));
  border: 1px solid rgba(12,28,55,.08);
  color: var(--deep);
}
.card-k{font-size: 12px; color: var(--muted); font-weight: 900; letter-spacing:.02em}
.card-v{font-size: 18px; font-weight: 950; margin-top:4px}
.card-sub{font-size: 12px; color: var(--muted); margin-top:6px; font-weight: 750}
.up{color:#12a150; font-weight: 950}
.down{color:#b51230; font-weight: 950}

/* Panels (charts) */
.charts{
  grid-template-columns: 1fr;
  margin-bottom: 18px;
}
.panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 14px;
  box-shadow: var(--shadow2);
}
.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.panel-title{font-weight: 950}
.panel-sub{font-size: 12px; color: var(--muted); font-weight: 750; margin-top:3px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,122,24,.12);
  border: 1px solid rgba(255,122,24,.22);
  font-weight: 900;
  color: var(--deep);
}
.chart-wrap{
  border-radius: 18px;
  border: 1px dashed rgba(12,28,55,.18);
  padding: 10px;
  background: rgba(6,42,87,.02);
}

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  display:flex;
  gap: 10px;
  justify-content: space-between;
  align-items:center;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  font-weight: 800;
  color: var(--muted);
}

/* =========================
   MODALS
========================= */
.modal-backdrop{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index: 120;
}
.modal{
  position: fixed;
  inset: 0;
  display:grid;
  place-items:center;
  z-index: 130;
  padding: 14px;
}
.modal[aria-hidden="true"]{display:none}
.modal-card{
  width: min(560px, 96vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{
  padding: 14px;
  border-bottom: 1px solid rgba(12,28,55,.10);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:12px;
}
.modal-title{
  font-weight: 950;
  display:flex; align-items:center; gap:10px;
}
.modal-title.danger{color:#b51230}
.modal-body{padding: 14px}
.modal-foot{
  padding: 14px;
  border-top: 1px solid rgba(12,28,55,.10);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.profile-grid{
  display:grid;
  gap:10px;
  padding: 12px;
  border-radius: 18px;
  border:1px solid rgba(12,28,55,.10);
  background: rgba(255,255,255,.6);
}
.profile-row{
  display:flex;
  justify-content: space-between;
  gap:10px;
  font-weight: 800;
  color: var(--muted);
}
.profile-row b{color: var(--text)}
.hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.logout-msg{
  margin:0;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 750;
}
.error-box{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(181,18,48,.08);
  border: 1px solid rgba(181,18,48,.18);
  color:#8a0f24;
  font-weight: 850;
}

/* =========================
   RESPONSIVE (tablet+ / desktop)
========================= */
@media (min-width: 920px){
  .app{
    grid-template-columns: var(--sidebarW) 1fr;
  }
  .sidebar{
    position: sticky;
    top: var(--topH);
    transform: translateX(0);
    width: var(--sidebarW);
    z-index: 10;
  }
  .content{padding: 18px}
  .welcome{
    grid-template-columns: 1.35fr .85fr;
    align-items: stretch;
  }
  .cards{
    grid-template-columns: repeat(4, 1fr);
  }
  .charts{
    grid-template-columns: 1fr 1fr;
  }
  .charts .panel:last-child{
    grid-column: 1 / -1;
  }
}

/* =========================================================
   DARK MODE (Deep Blue + Orange, neon clarity)
========================================================= */
body.dark{
  --bg: #05070d;
  --panel: rgba(10, 14, 26, .82);
  --panel2: rgba(10, 14, 26, .62);

  --text: #f1f5ff;
  --muted: rgba(241,245,255,.74);
  --line: rgba(241,245,255,.12);

  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --focus: rgba(255, 122, 24, .28);
}

body.dark .topbar,
body.dark .footer{
  background: rgba(8, 10, 16, .55);
}

body.dark .brand-text b{color: var(--orange2)}
body.dark .nav-link i{color: var(--orange2)}
body.dark .pill{
  background: rgba(255,122,24,.16);
  border-color: rgba(255,122,24,.28);
  color: var(--text);
}


/* =========================================================
   POS SALES – MAIN CONTENT ONLY
   Mobile-first | Touch-friendly | High clarity
========================================================= */

/* =========================
   HEADER
========================= */
.pos-sale-header h1{
  margin: 0;
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
}

.pos-sale-header p{
  margin-top: 4px;
  color: var(--muted);
  font-weight: 600;
}

/* =========================
   LAYOUT
========================= */
.pos-sale-grid{
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

@media (min-width: 900px){
  .pos-sale-grid{
    grid-template-columns: 1.2fr 0.8fr;
  }
}

/* =========================
   PANELS (Stock & Cart)
========================= */
.pos-stock,
.pos-cart{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 14px;
  box-shadow: var(--shadow2);
}

/* =========================
   STOCK LIST
========================= */
.pos-stock-list{
  display: grid;
  gap: 10px;
}

.pos-stock-item{
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: transparent;

  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;

  transition: background .15s ease, border-color .15s ease;
}

.pos-stock-item small{
  font-size: .9rem;
  color: var(--muted);
  font-weight: 700;
}

.pos-stock-item:hover{
  background: rgba(255,122,24,.10);
  border-color: rgba(255,122,24,.25);
}

/* =========================
   CART
========================= */
.pos-cart-items{
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.pos-cart-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;

  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}

.pos-cart-row small{
  font-size: .85rem;
  color: var(--muted);
  font-weight: 600;
}

/* Quantity controls */
.pos-qty{
  display: flex;
  align-items: center;
  gap: 6px;
}

.pos-qty button{
  width: 36px;
  height: 36px;

  border-radius: 10px;
  border: none;

  background: var(--deep);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;

  cursor: pointer;
}

/* Empty cart */
.pos-empty{
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

/* =========================
   INPUTS
========================= */
.pos-input{
  margin-top: 10px;
}

.pos-input label{
  display: block;
  margin-bottom: 4px;

  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.pos-input input{
  width: 100%;
  padding: 14px;

  border-radius: 14px;
  border: 1px solid var(--line);

  font-size: 1rem;
  font-weight: 800;
}

/* =========================
   SUMMARY
========================= */
.pos-summary{
  margin-top: 14px;
  padding-top: 10px;

  display: grid;
  gap: 6px;

  font-weight: 800;
  border-top: 2px dashed var(--line);
}

.pos-summary div{
  display: flex;
  justify-content: space-between;
}

.pos-summary .total{
  font-size: 1.35rem;
  color: var(--deep);
}
/* =================================================
   TAX TYPE SELECTOR – INTERACTIVE & MOBILE FRIENDLY
================================================= */

.pos-tax-box{
  margin-top: 10px;
}

.pos-tax-options{
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.pos-tax-option{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: transparent;

  cursor: pointer;
  transition: all .15s ease;
}

.pos-tax-option span{
  display: flex;
  flex-direction: column;
}

.pos-tax-option strong{
  font-size: 1rem;
  font-weight: 900;
}

.pos-tax-option small{
  font-size: .8rem;
  color: var(--muted);
  font-weight: 700;
}

/* Hide default radio */
.pos-tax-option input{
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
}

/* Checked state */
.pos-tax-option input:checked{
  border-color: var(--orange);
  background: radial-gradient(circle at center, var(--orange) 55%, transparent 56%);
}

/* Active VAT */
.pos-tax-option:has(input:checked){
  background: rgba(255,122,24,.12);
  border-color: rgba(255,122,24,.35);
}

/* Zero rated visual */
.pos-tax-option.zero:has(input:checked){
  background: rgba(6,42,87,.08);
  border-color: rgba(6,42,87,.35);
}

/* Hover & focus */
.pos-tax-option:hover{
  transform: scale(1.01);
}

/* Mobile spacing */
@media(max-width:600px){
  .pos-tax-option{
    padding: 16px;
  }
}


/* =========================
   ACTIONS (Sticky on Mobile)
========================= */
.pos-actions{
  position: sticky;
  bottom: 0;

  display: flex;
  gap: 10px;

  margin-top: 12px;
  padding: 10px 0;

  background: var(--panel);
  border-top: 1px solid var(--line);
}

/* Action buttons */
.pos-btn{
  flex: 1;

  padding: 16px;
  border-radius: 16px;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.pos-cancel{
  background: transparent;
  border: 2px dashed var(--deep);
  color: var(--deep);
}

.pos-sell{
  background: linear-gradient(135deg, var(--deep), var(--deep2));
  color: #fff;
}

/* =========================
   HINT
========================= */
.pos-hint{
  margin-top: 8px;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
}

/* =========================
   SMALL SCREEN OPTIMIZATION
========================= */
@media (max-width: 600px){
  .pos-sale-grid{
    gap: 10px;
  }

  .pos-stock,
  .pos-cart{
    padding: 12px;
  }
}

/* =================================================
   POS STOCK FILTER (FAST PRODUCT SEARCH)
================================================= */

/* =========================
   STOCK SEARCH
========================= */
.pos-stock-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--panel);
  margin:10px 0 12px;
}

.pos-stock-search i{
  color:var(--muted);
  font-size:.95rem;
}

.pos-stock-search input{
  border:none;
  outline:none;
  width:100%;
  font-size:1rem;
  font-weight:700;
  background:transparent;
}

.pos-stock-empty{
  padding:14px;
  text-align:center;
  font-weight:700;
  color:var(--muted);
}
/* =========================
   END POS SALES
========================= */

/* =================================================
   POS STATUS MESSAGES (Error / Success / Warning)
================================================= */

.pos-message{
  display:flex;
  align-items:center;
  gap:10px;

  padding:14px;
  margin-top:10px;

  border-radius:14px;
  font-weight:800;
  font-size:.95rem;

  animation: posFadeIn .2s ease;
}

/* Icons */
.pos-message i{
  font-size:1.2rem;
}

/* Variants */
.pos-message.error{
  background: rgba(220,38,38,.12);
  color:#b91c1c;
  border:1px solid rgba(220,38,38,.35);
}

.pos-message.success{
  background: rgba(22,163,74,.12);
  color:#166534;
  border:1px solid rgba(22,163,74,.35);
}

.pos-message.warn{
  background: rgba(245,158,11,.12);
  color:#92400e;
  border:1px solid rgba(245,158,11,.35);
}

/* Animation */
@keyframes posFadeIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
/* =================================================
   END POS STATUS MESSAGES (Error / Success / Warning)
================================================= */

/* =========================================================
   ADD PRODUCT – POS (DASHBOARD INTEGRATED)
   Mobile-first | Full-width | ERP-grade UI
========================================================= */

/* =================================================
   MAIN CONTAINER – INHERITS DASHBOARD WIDTH
================================================= */
.pos-add-product{
  width: 90%;
  margin: 0;
  padding: 0;
  padding-left: 20px;
  padding-top: 20px;
}

/* =================================================
   HEADER
================================================= */
.pos-add-header{
  margin-bottom: 14px;
}

.pos-add-header h1{
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -.02em;
}

.pos-add-header p{
  margin-top: 4px;
  font-size: .95rem;
  color: var(--muted);
  font-weight: 650;
}

/* =================================================
   FORM CARD – FULL WIDTH, RECTANGULAR
================================================= */
.pos-form{
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow2);
}

/* Reduce vertical scrolling on large screens */
@media (min-width: 920px){
  .pos-form{
    padding: 18px 20px;
  }
}

/* =================================================
   FORM GRID
================================================= */
.pos-form-grid{
  display: grid;
  gap: 14px;
}

/* Two columns when space allows */
@media (min-width: 720px){
  .pos-form-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =================================================
   MOBILE ONLY — STOP HORIZONTAL SCROLL
   Put this at the VERY BOTTOM of your CSS
================================================= */
@media (max-width: 600px){

  /* 1) Never allow the page to scroll sideways */
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 2) Ensure all layout containers cannot exceed the screen */
  .app, .content, .grid, .panel, .cards, .charts,
  .pos-sale-grid, .pos-stock, .pos-cart, .pos-form{
    width: 100%;
    max-width: 100%;
    min-width: 0; /* critical for grid/flex children */
  }

  /* 3) Make sure all form controls & wrappers respect width */
  input, select, textarea, button{
    max-width: 100%;
  }
  .chart-wrap{
    max-width: 100%;
    overflow-x: auto; /* if charts/tables get wide, scroll inside, not page */
  }

  /* 4) Your "Add Product" container is causing overflow (90% + padding-left) */
  .pos-add-product{
    width: 100%;
    max-width: 100%;
    padding: 14px;       /* replaces left padding that pushes content out */
    margin: 0;
  }

  /* 5) If any flex rows push out, allow wrapping */
  .topbar, .topbar-left, .topbar-right,
  .quick-actions, .pos-actions,
  .pos-cart-row, .panel-head, .brand{
    flex-wrap: wrap;
  }

  /* 6) Prevent long text / numbers from forcing width */
  .brand-text, .user-name, .panel-title, .pill,
  .card-v, .hero-metric .v, .pos-stock-item{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 7) Grid children often overflow unless min-width:0 */
  .welcome > *, .cards > *, .charts > *,
  .pos-sale-grid > *, .pos-form-grid > *{
    min-width: 0;
  }
}

/* ==============================
   STICKY NAVBAR ON SCROLL
============================== */

.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;

  transition: box-shadow .25s ease, background .25s ease;
}

/* Optional: shadow when scrolling */
.topbar.scrolled{
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}