/* ══════════════════════════════════════════════════════
   responsive.css — Auto-collapse + Mobile/Zoom layout
   ══════════════════════════════════════════════════════ */

/* ── Collapsible side panels ── */
.sp-head {
  cursor: pointer;
  user-select: none;
  transition: opacity .15s;
}

.sp-head:hover {
  opacity: .88;
}

.sp-head .sp-toggle {
  margin-left: auto;
  font-size: 10px;
  opacity: .55;
  transition: transform .2s;
  flex-shrink: 0;
}

.sp-head .sp-toggle.closed {
  transform: rotate(-90deg);
}

.sp-body {
  transition: max-height .3s ease, opacity .25s ease, padding .25s ease;
  max-height: 1200px;
  overflow: hidden;
  opacity: 1;
}

.sp-body.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Summary row shown when section is collapsed */
.sp-summary {
  display: none;
  padding: 7px 14px;
  font-size: 11px;
  color: var(--s4);
  border-top: 1px solid var(--border);
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg);
}

.sp-summary.visible {
  display: flex;
}

.sp-sum-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sp-sum-val {
  font-weight: 600;
  color: var(--s2);
  font-size: 11px;
}

/* Bank section collapsible */
.bank-section-head {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  margin-bottom: 6px;
}

.bank-section-head:hover .section-label {
  color: var(--pu);
}

.bank-toggle {
  font-size: 10px;
  color: var(--muted);
  margin-left: 6px;
  transition: transform .2s;
}

.bank-toggle.closed {
  transform: rotate(-90deg);
}

.bank-fields {
  transition: max-height .3s ease, opacity .25s ease;
  max-height: 400px;
  overflow: hidden;
  opacity: 1;
}

.bank-fields.collapsed {
  max-height: 0;
  opacity: 0;
}

/* ── Responsive shell: topbar wraps on small screens ── */
@media (max-width: 1100px) {
  .nav-tabs {
    flex-wrap: nowrap;
    gap: 2px;
    max-width: calc(100vw - 220px);
    overflow-x: auto;
  }

  .nt {
    font-size: 10px;
    padding: 4px 9px;
  }
}

@media (max-width: 600px) {

  /* Main container stacking */
  .main-container {
    display: flex;
    flex-direction: column;
  }

  .editor-section {
    order: 1;
  }

  .preview-section {
    order: 2;
  }

  /* Stack form + preview vertically - Form first, Preview second */
  .body {
    flex-direction: column;
    overflow-y: auto;
  }

  .fpane {
    flex: 1 1 100%;
    order: 1;
    padding: 10px 12px;
  }

  .ppane {
    flex: 1 1 100%;
    order: 2;
    width: 100% !important;
    border-left: none;
    border-top: 1px solid var(--border);
    min-width: 0;
  }

  .ppane.w-half {
    width: 100% !important;
  }

  .ppane.w-full {
    width: 100% !important;
  }

  /* Horizontal scroll for table */
  .ptab {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Single column side panels */
  .side-panels {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Grids → single or double column */
  .g4 {
    grid-template-columns: 1fr 1fr;
  }

  .g3 {
    grid-template-columns: 1fr 1fr;
  }

  /* Nav tabs scroll horizontally */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: calc(100vw - 200px);
  }

  .nav-tabs::-webkit-scrollbar {
    height: 0;
  }

  .nt {
    flex-shrink: 0;
  }

  /* Top bar */
  .top {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
    gap: 6px;
  }

  .top-r {
    width: 100%;
    justify-content: flex-end;
  }

  .view-sel {
    display: none;
  }

  /* Topbar buttons smaller */
  .btn-sm {
    padding: 4px 9px;
    font-size: 10px;
  }

  /* DB stats 2 column */
  .db-stats {
    grid-template-columns: 1fr 1fr;
  }

  .db-panels {
    grid-template-columns: 1fr;
  }

  .erp-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gw-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .g2 {
    grid-template-columns: 1fr;
  }

  .g3 {
    grid-template-columns: 1fr;
  }

  .g4 {
    grid-template-columns: 1fr;
  }

  .side-panels {
    grid-template-columns: 1fr;
  }

  /* Make items table scrollable */
  .itab-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .itab {
    min-width: 580px;
  }

  /* Full screen modal */
  .modal {
    width: 95vw !important;
    max-height: 92vh;
    padding: 16px;
  }

  .overlay {
    align-items: flex-end;
    padding-bottom: 0;
  }

  .modal {
    border-radius: 16px 16px 0 0 !important;
  }

  /* Compliance strip scrolls */
  .cstrip {
    overflow-x: auto;
    gap: 5px;
  }

  .cstrip::-webkit-scrollbar {
    height: 0;
  }

  /* Topbar logo text hidden on very small */
  .ln .lv {
    display: none;
  }

  .btn-gh {
    display: none;
  }
}

/* ── Zoom-safe: use vw/vh for shell not px ── */
.shell {
  height: 100dvh;
}

/* dvh = dynamic viewport height, works with mobile browser chrome */

/* ── Print: full page ── */
@media print {

  .top,
  .cstrip,
  .fpane,
  .nstack,
  .pph {
    display: none !important;
  }

  .body {
    display: block !important;
  }

  .ppane {
    width: 100% !important;
    border: none !important;
    max-height: none !important;
    height: auto !important;
  }

  .ppb {
    padding: 0 20mm !important;
    overflow: visible !important;
  }

  .shell,
  .body {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ══ DYNAMIC CARD SYSTEM — All screens ══ */

/* Base card behavior */
.card {
  width: 100%;
  box-sizing: border-box;
}

/* Side panels — seller + client */
.side-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}

/* Grid helpers — responsive */
.g2,
.g3,
.g4 {
  display: grid;
  gap: 10px;
  width: 100%;
}

.g2 {
  grid-template-columns: repeat(2, 1fr);
}

.g3 {
  grid-template-columns: repeat(3, 1fr);
}

.g4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Large screens 1400px+ — show 4 cols */
@media (min-width: 1400px) {
  .g4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .g3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .fpane {
    min-width: 520px;
  }
}

/* Medium-large 1100–1400px */
@media (max-width: 1400px) {
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium 900–1100px */
@media (max-width: 480px) {
  .side-panels {
    grid-template-columns: 1fr;
  }

  .g3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .fpane {
    width: 100%;
  }

  .ppane {
    display: none !important;
  }
}

/* Tablet 768–900px */
@media (max-width: 600px) {
  .side-panels {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .g2 {
    grid-template-columns: 1fr;
  }

  .g3 {
    grid-template-columns: 1fr;
  }

  .g4 {
    grid-template-columns: 1fr;
  }

  .top {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
  }

  .nav-tabs {
    max-width: 100vw;
    overflow-x: auto;
  }

  .top-r {
    flex-wrap: wrap;
    gap: 4px;
  }

  .view-sel {
    display: none;
  }
}

/* Mobile <480px */
@media (max-width: 480px) {
  .shell {
    padding: 0;
  }

  .body {
    flex-direction: column;
    padding: 8px;
    gap: 8px;
  }

  .fpane,
  .ppane {
    width: 100% !important;
    min-width: unset;
  }

  .ppane {
    display: none !important;
  }

  .card {
    border-radius: 8px;
  }

  .sp-body {
    padding: 10px;
  }

  .itab-wrap {
    overflow-x: auto;
  }

  .itab {
    min-width: 600px;
  }

  .tots {
    padding: 10px;
  }

  .biz-header-strip {
    padding: 8px 10px;
  }

  .biz-header-name {
    font-size: 12px;
  }

  .nav-tabs .nt {
    padding: 5px 8px;
    font-size: 10px;
  }

  .btn-sm {
    padding: 4px 8px;
    font-size: 10px;
  }
}

/* Import/Export fields grid */
#impex-fields .g2 {
  grid-template-columns: repeat(2, 1fr);
}

#impex-fields .g3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
  #impex-fields .g2 {
    grid-template-columns: 1fr;
  }

  #impex-fields .g3 {
    grid-template-columns: 1fr;
  }
}

/* Card collapse animation */
.cb-body {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

.cb-body.h {
  max-height: 0 !important;
  opacity: 0;
  padding: 0;
}

/* Items table responsive */
@media (max-width: 1100px) {

  .itab th:nth-child(3),
  .itab td:nth-child(3) {
    display: none;
  }

  /* hide Type col */
}

@media (max-width: 600px) {

  .itab th:nth-child(4),
  .itab td:nth-child(4) {
    display: none;
  }

  /* hide HSN col */
}

/* Totals section responsive */
.tots>div {
  grid-template-columns: 1fr 200px;
}

@media (max-width: 600px) {
  .tots>div {
    grid-template-columns: 1fr;
  }

  .tot-grand {
    font-size: 16px;
  }
}

/* Biz header strip responsive */
.biz-header-inner {
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 600px) {
  .biz-header-meta {
    flex-direction: column;
    gap: 2px;
  }

  .biz-header-right {
    width: 100%;
  }

  .biz-header-right button {
    width: 100%;
  }
}

/* Client area responsive */
@media (max-width: 1100px) {
  .client-area.split {
    grid-template-columns: 1fr;
  }
}