/* ══ BASE VIEW SYSTEM (split / form / prev) ══ */
.body.view-split .fpane { width: 55%; flex: none; }
.body.view-split .ppane { width: 45% !important; flex: none !important; display: flex !important; }
.body.view-form .fpane  { width: 100%; flex: none; }
.body.view-form .ppane  { display: none; }
.body.view-prev .fpane  { display: none; }
.body.view-prev .ppane  { width: 100%; flex: none; }

/* ══════════════════════════════════════════════════════
   theme-impex.css — InvoiceFlow Pro v3
   Import/Export card layout, CSS Grid, view overrides
   Auto-activates via body.impex-on (set by onImpExToggle)
   ══════════════════════════════════════════════════════ */

/* ══ IMPEX CARD — hidden by default ══ */
#impex-card {
  display: none;
  flex-direction: column;
}

/* ══ SPLIT VIEW + IMPEX ON ══ */
/* Split view always shows items + PDF only — buyer/impex hidden via JS */
.body.view-split.impex-on .fpane {
  width: 55%;
  flex: none;
}

.body.view-split.impex-on .ppane {
  width: 45%;
  flex: none;
}

/* ImpEx card hidden in split view — shown in form view only */
.body.view-split.impex-on #impex-card {
  display: none !important;
}

.body.view-split.impex-on .client-area {
  display: none;
}

/* ══ FORM VIEW + IMPEX ON ══ */
.body.view-form.impex-on .fpane {
  width: 100%;
}

.body.view-form.impex-on .client-area {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
}

.body.view-form.impex-on #impex-card {
  display: flex !important;
}

/* ══ PREVIEW VIEW + IMPEX ON ══ */
.body.view-prev.impex-on #impex-card {
  display: none !important;  /* preview shows doc, not form */
}

/* ══ FALLBACK: no view class set + IMPEX ON ══ */
.body:not(.view-split):not(.view-form):not(.view-prev).impex-on .fpane {
  width: 70%;
  flex: none;
}

.body:not(.view-split):not(.view-form):not(.view-prev).impex-on .ppane {
  width: 30%;
  flex: none;
}

.body:not(.view-split):not(.view-form):not(.view-prev).impex-on .client-area {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.body:not(.view-split):not(.view-form):not(.view-prev).impex-on #impex-card {
  display: flex !important;
}

/* ══ IMPEX CARD INNER LAYOUT ══ */
.impex-card .sp-head {
  background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(6,182,212,.1));
  color: var(--te);
}

.impex-card .sp-body {
  padding: 12px 14px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

/* ══ CROSS-BORDER LABEL (bottom of buyer card) ══ */
.impex-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: var(--te);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 4px 8px;
  background: var(--te-bg);
  border-radius: 6px;
  margin-top: 6px;
}

/* ══ IMPEX SECTION BADGES ══ */
.impex-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  background: var(--te-bg);
  color: var(--te);
  border: 1px solid rgba(13,148,136,.2);
}

/* ══ LEGACY: impex-panel (kept for compat) ══ */
#impex-panel { display: none; }
.body.impex-on #impex-panel { display: block; }

/* ══ IMPEX FIELDS SECTION LABEL ══ */
#impex-fields .section-label { margin-top: 8px; }
#impex-fields .section-label:first-child { margin-top: 0; }





/* IMPEX GRID TEST */

/* IMPEX CSS GRID */
.client-area {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}
.body.view-form.impex-on .client-area {
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 12px;
  align-items: start;
}
.body:not(.view-split):not(.view-form):not(.view-prev).impex-on .client-area {
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 12px;
}
.body.impex-on #impex-card {
  width: 100%;
  min-width: 0;
}
.body.impex-on #slot-buyer {
  width: 100%;
  min-width: 0;
}
@media (max-width: 900px) {
  .body.view-form.impex-on .client-area,
  .body:not(.view-split):not(.view-form):not(.view-prev).impex-on .client-area {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .client-area {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
}

/* .side-panels column direction — Session 38: fully detached from .impex-on.
   (This was already redundant with the base .side-panels rule in
   theme-forms.css, which is column by default — but Session 36 had still
   left an .impex-on-gated duplicate here. Made explicit and unconditional
   now, per instruction, so nothing about the stacking direction depends
   on the ImpEx toggle at all.) */
.body.view-form .side-panels {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
/* Width for .client-area / #slot-docitems is handled by the unconditional
   PERMANENT FULL-WIDTH CONTRACT rule further down this file — it already
   has no .impex-on dependency, so no duplicate rule is needed here.
   The old @media(max-width:1100px) patch that used to target the
   .impex-on-gated version of these selectors has been removed — it
   patched a state that no longer exists now that the base rule above is
   unconditional; the 768px/480px breakpoints in theme-utils.css (and the
   900px/600px ones above in this file) are untouched. */

/* ImpEx ON — buyer top, impex below in left column */
.body.impex-on .client-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.body.impex-on #impex-card {
  display: flex !important;
  flex-direction: column;
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   ITEMS FULL-WIDTH SLOT — Session 35
   #slot-items-full sits as a sibling AFTER .side-panels inside
   #page-inv (not inside it), so none of the .side-panels /
   .client-area flex-row / 48% rules above apply to it regardless
   of ImpEx state — it was never inside that squeeze to begin with.
   This rule is a targeted safety net, scoped to desktop Form view
   only, per explicit instruction. Split view (.fpane already 55%)
   and Preview view (.fpane hidden) are untouched — the block simply
   fills whatever width .fpane already has in those states, same as
   it did before the split. Existing @media collapse rules
   (max-width:768px / 480px) are untouched — they don't reference
   this new id, so responsive behavior there is unaffected. */
.body.view-form #slot-items-full {
  width: 100%;
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════
   PERMANENT FULL-WIDTH CONTRACT — Session 36
   Explicit statement, not just a side-effect of the impex-on fix above:
   under desktop Form view, these three always span the full #page-inv
   width, ImpEx on or off. (Base rules already give .client-area/
   #slot-docitems 100% width when ImpEx is off — this makes that
   guarantee explicit and self-documenting, and is what actually wins
   the cascade for the impex-on case together with the edit above.)
   Split view (.fpane 55%) and Preview view (.fpane hidden) are
   untouched by this — it only fires inside .view-form. ══ */
.body.view-form .client-area,
.body.view-form #slot-docitems,
.body.view-form #slot-items-full {
  width: 100%;
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════
   SPLIT VIEW WHITESPACE ELIMINATION — Session 38
   Stretches .side-panels and its cards to fill the full width of .fpane
   (still 55% of the body in Split view — that's untouched, per the
   preservation directive). Only affects horizontal fill within .fpane's
   own box, not .fpane's width itself or .ppane at all.
   SUBSTITUTION FLAGGED: the instruction named "#slot-impex" — that id
   doesn't exist anywhere in this codebase. The Import/Export card's real
   id is #impex-card (it lives inside partials/buyer.html, loaded into
   #slot-buyer — there is no separate impex.html partial or slot). Using
   #impex-card here instead, since that's the actual element. */
.body.view-split .side-panels {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}
.body.view-split .client-area,
.body.view-split #slot-docitems,
.body.view-split #impex-card,
.body.view-split #slot-items-full {
  width: 100%;
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════
   #items-card ENLARGED INPUTS + SUMMARY BLOCK
   Scoped strictly to #items-card via ID selector (higher specificity
   than the plain-class rules in theme-tables.css, so no !important is
   needed and nothing outside this card is touched). Only sizes/spacing
   change — no ids, classes, or JS handlers are added or removed.
   ══════════════════════════════════════════════════════ */

/* Row inputs/selects — bigger tap targets and readable text */
#items-card .itab {
  table-layout: fixed;
}

#items-card .itab td input,
#items-card .itab td select {
  padding: 9px 10px;
  font-size: 13px;
  min-height: 36px;
}

/* Selects need more room on the right for the native dropdown arrow,
   or short option text ('Nos', 'Pcs', 'Kgs') gets clipped to an ellipsis */
#items-card .itab td select {
  padding: 4px 16px 4px 4px;
}

/* Qty / Rate / Disc% columns (by td position, matching this file's own
   <thead> order: #,Item,Type,HSN/SAC,Qty,Unit,Rate,Disc%,GST%,Amount,del
   = columns 1-11) — sufficient min-width + right-aligned for numerics */
#items-card .itab td:nth-child(5) input,
#items-card .itab td:nth-child(7) input,
#items-card .itab td:nth-child(8) input {
  min-width: 64px;
  text-align: right;
}

/* Summary block (Subtotal/Tax/Discount/Grand Total) — larger labels
   and values for readability */
#items-card .tot-row {
  font-size: 13px;
  padding: 5px 0;
}

#items-card .tl {
  font-size: 12px;
}

#items-card .tv {
  font-size: 13px;
}

#items-card .tot-grand {
  font-size: 17px;
  padding-top: 10px;
  margin-top: 8px;
}

#items-card .tot-grand .tv {
  font-size: 21px;
}