/* =========================================================
   Naleng AutoPOS – ADD PRODUCT (CLEAN MODULE)
   Mobile-first | Dashboard-integrated | ERP-grade
========================================================= */

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

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

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

  --shadow:0 14px 34px rgba(2,10,28,.10);
  --radius:18px;
  --radius2:22px;

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

/* =================================================
   MAIN CONTAINER – DASHBOARD ALIGNED
================================================= */
.pos-add-product{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

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

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

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

/* =================================================
   LIVE PRODUCT NAME PREVIEW (STICKY CONTEXT)
================================================= */
.pos-product-preview{
  position: sticky;
  top: 80px;
  z-index: 4;

  margin-bottom: 14px;
  padding: 12px 16px;

  display:flex;
  align-items:center;
  gap:12px;

  border-radius: 18px;
  border:1px solid var(--line);
  background: linear-gradient(
    135deg,
    rgba(6,42,87,.06),
    rgba(255,122,24,.08)
  );

  font-weight: 900;
}

.pos-product-preview i{
  color: var(--orange);
}

.pos-product-preview span{
  font-size: 1.05rem;
}

.pos-product-preview .muted{
  font-weight: 700;
  color: var(--muted);
}

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

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

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

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

/* Section divider */
.pos-divider{
  grid-column: 1 / -1;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line),
    transparent
  );
  margin: 6px 0 10px;
}

/* =================================================
   FORM FIELDS
================================================= */
.pos-field{
  display:flex;
  flex-direction: column;
}

.pos-field.full{
  grid-column: 1 / -1;
}

.pos-field label{
  font-size:12px;
  font-weight:850;
  color: var(--muted);
  margin-bottom:4px;
}

.req{
  color:#b51230;
  margin-left:6px;
}

/* Inputs */
.pos-field input,
.pos-field select,
.pos-field textarea{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: transparent;
  font-size:1rem;
  font-weight:750;
  color:var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pos-field textarea{
  resize: vertical;
  min-height: 70px;
}

.pos-field input:focus,
.pos-field select:focus,
.pos-field textarea:focus{
  outline:none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--focus);
}

/* =================================================
   INLINE VALIDATION
================================================= */
.pos-help{
  margin-top:6px;
  font-size:.82rem;
  color:var(--muted);
  font-weight:650;
}

.pos-field.has-error input,
.pos-field.has-error select,
.pos-field.has-error textarea{
  border-color: rgba(220,38,38,.55);
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

.pos-error{
  margin-top:6px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(220,38,38,.30);
  background: rgba(220,38,38,.08);
  color:#b91c1c;
  font-weight:800;
  font-size:.86rem;
}

/* =================================================
   FORM ACTIONS
================================================= */
.pos-form-actions{
  display:flex;
  gap:12px;
  margin-top:14px;
}

.pos-form-actions .pos-btn{
  flex:1;
}

@media (max-width:600px){
  .pos-form-actions{
    flex-direction: column;
  }
}

/* =================================================
   BULK UPLOAD – INTEGRATED
================================================= */
.pos-bulk-upload{
  margin-top:18px;
  padding-top:14px;
  border-top:2px dashed var(--line);
}

.pos-bulk-upload h3{
  margin:0;
  font-size:1rem;
  font-weight:900;
}

.pos-bulk-upload .pos-hint{
  margin-top:4px;
  font-size:.85rem;
  font-weight:650;
  color:var(--muted);
}

.pos-bulk-box{
  display:flex;
  gap:14px;
  align-items:flex-start;

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

  border-radius:18px;
  border:2px dashed var(--line);
  background: rgba(255,122,24,.05);
}

.pos-bulk-box i{
  font-size:1.6rem;
  color:var(--orange);
  flex-shrink:0;
}

.pos-bulk-box strong{
  font-weight:900;
  font-size:.95rem;
}

.pos-bulk-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.pos-bulk-actions input[type="file"]{
  flex:1;
  min-width:220px;
}

/* CSV template */
.pos-csv-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:.9rem;
  font-weight:850;
  color:var(--deep);
}

.pos-csv-link:hover{
  text-decoration: underline;
}

/* =================================================
   CSV PREVIEW
================================================= */
.pos-csv-preview{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(6,42,87,.02);
}

.pos-csv-table-wrap{
  overflow:auto;
  border-radius:16px;
  border:1px solid rgba(12,28,55,.10);
  background: var(--panel);
}

.pos-csv-table{
  width:100%;
  min-width:720px;
  border-collapse: collapse;
}

.pos-csv-table th,
.pos-csv-table td{
  padding:12px;
  border-bottom:1px solid rgba(12,28,55,.08);
  font-weight:750;
}

.pos-csv-table th{
  font-size:.85rem;
  font-weight:950;
  color:var(--muted);
}

.pos-row-ok{ color:#166534; font-weight:900; }
.pos-row-bad{ color:#b91c1c; font-weight:900; }

/* =================================================
   SUCCESS / ERROR TOAST
================================================= */
.pos-toast{
  position: sticky;
  top:10px;
  z-index:5;

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

  padding:14px;
  margin-bottom:12px;

  border-radius:16px;
  border:1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);

  font-weight:900;
  animation: toastIn .18s ease;
}

.pos-toast.success{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.10);
  color:#166534;
}

.pos-toast.error{
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.10);
  color:#b91c1c;
}

.pos-toast.warn{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
  color:#92400e;
}

@keyframes toastIn{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:none}
}

/* =================================================
   HIDE NON-ADD-PRODUCT POS COMPONENTS
================================================= */
.pos-add-product .pos-sale-grid,
.pos-add-product .pos-stock,
.pos-add-product .pos-cart,
.pos-add-product .pos-tax-box,
.pos-add-product .pos-actions,
.pos-add-product .pos-summary,
.pos-add-product .pos-stock-search{
  display:none !important;
}

/* =========================================================
   END – ADD PRODUCT (CLEAN & FOCUSED)
========================================================= */