/* ============================================================
   Secondary nav (section submenu) + mobile responsive form
   ============================================================ */

/* ---- Secondary navigation bar ---- */
.sklad-subnav {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
  position: sticky; top: 0; z-index: 99;
  overflow-x: auto;
  scrollbar-width: thin;
}
.sklad-subnav__inner {
  display: flex; align-items: center; gap: 18px;
  min-height: 40px; flex-wrap: nowrap; white-space: nowrap;
  max-width: 1600px; margin: 0 auto;
}
.sklad-subnav__title {
  font-weight: 600; color: #111; font-size: 14px;
  padding-right: 12px; border-right: 1px solid #e5e7eb;
}
.sklad-subnav__link {
  color: #555 !important; text-decoration: none !important;
  padding: 10px 4px; font-size: 13px; border-bottom: 2px solid transparent;
}
.sklad-subnav__link:hover { color: #2563eb !important; }
.sklad-subnav__link.is-active {
  color: #2563eb !important; border-bottom-color: #2563eb; font-weight: 500;
}

/* On the sales-order edit form, the ms-toolbar already pushes content down;
   subnav sits between main nav and toolbar */
.ms-toolbar { top: 105px !important; }

/* ============================================================
   Mobile responsive — sales order form
   ============================================================ */
@media (max-width: 768px) {

  /* Title row: smaller, wrap better */
  .ms-order-title { font-size: 15px; gap: 6px; margin-bottom: 10px; }
  .ms-order-title strong { font-size: 18px; }
  .ms-order-date { font-size: 14px; }

  /* Toolbar — horizontal scroll, no wrap */
  .ms-toolbar { position: sticky; top: 0 !important; padding: 6px 8px; gap: 4px;
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .ms-toolbar .ms-btn { flex-shrink: 0; padding: 7px 12px; font-size: 13px; }

  /* Main fieldset — single column */
  fieldset.ms-grid .form-row > div {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  fieldset.ms-grid label { width: 110px !important; font-size: 12px; }
  fieldset.ms-grid input,
  fieldset.ms-grid select,
  fieldset.ms-grid .select2-container { max-width: 100% !important; }

  /* Payment / Shipment sections — stack vertically */
  .form-row.field-attach_payment,
  .form-row.field-attach_shipment { flex-direction: column; align-items: stretch; }
  .form-row.field-attach_payment > div,
  .form-row.field-attach_shipment > div { flex-direction: column; align-items: stretch; }
  .form-row.field-attach_payment label,
  .form-row.field-attach_shipment label { width: auto !important; }
  .form-row.field-attach_payment select,
  .form-row.field-attach_shipment select { min-width: 0 !important; width: 100% !important; }

  /* Items table — horizontal scroll wrapper */
  .inline-group { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .inline-group table { min-width: 720px; }

  /* Bottom: notes & totals stack on mobile, notes smaller */
  fieldset.ms-bottom .form-row > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  fieldset.ms-bottom .field-notes textarea { min-height: 48px !important; max-height: 80px; }
  .totals-grid { padding: 10px 12px; }

  /* Hide subnav title on mobile (just show the items) */
  .sklad-subnav__title { display: none; }
  .sklad-subnav__inner { gap: 12px; min-height: 36px; }
}

@media (max-width: 480px) {
  /* Even tighter */
  .ms-order-title strong { font-size: 16px; }
  .ms-toolbar .ms-btn { padding: 6px 10px; font-size: 12px; }
  fieldset.ms-grid label { font-size: 11px; width: 90px !important; }
  fieldset.ms-grid input,
  fieldset.ms-grid select { font-size: 12px; height: 30px; padding: 4px 8px; }
  fieldset.ms-grid .select2-selection { height: 30px !important; min-height: 30px !important; }
  fieldset.ms-grid .select2-selection__rendered { line-height: 28px !important; }
  fieldset.ms-bottom .field-notes textarea { min-height: 40px !important; }
}
/* ============================================================
   Nav responsive — pure CSS, no JS jitter
   ============================================================ */

/* Hide the overflow ⋮ button entirely — replaced by horizontal scroll */
.sklad-nav__overflow { display: none !important; }

/* Default desktop: items in row, no wrap, scroll if too narrow */
.sklad-nav__items {
  display: flex !important; flex-wrap: nowrap !important;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  flex: 1 1 auto; min-width: 0;
}
.sklad-nav__items > li { flex: 0 0 auto; }
.sklad-nav__items > li.is-moved { display: block !important; }  /* undo any stale state from JS */

/* Hide scrollbar visually but keep functionality */
.sklad-nav__items::-webkit-scrollbar { height: 2px; }
.sklad-nav__items::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); }

/* Burger only kicks in below 700px */
@media (min-width: 701px) {
  .sklad-nav__burger { display: none !important; }
  .sklad-nav[data-open="1"] .sklad-nav__items { display: flex !important; }
}

/* Mobile burger */
@media (max-width: 700px) {
  .sklad-nav__items {
    display: none !important; flex-direction: column !important;
    overflow: visible !important;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #2c3e50; padding: 8px 0; z-index: 99;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
  }
  .sklad-nav[data-open="1"] .sklad-nav__items { display: flex !important; }
  .sklad-nav__burger { display: block !important; }
  .sklad-nav__user { margin-left: 0 !important; }
  .sklad-nav__item > a {
    flex-direction: row !important; gap: 8px !important;
    padding: 8px 12px !important; justify-content: flex-start !important;
    font-size: 14px !important;
  }
  .sklad-nav__dd {
    position: static !important; box-shadow: none !important;
    background: #34495e !important; padding-left: 16px !important; border: 0 !important;
  }
}
/* ============================================================
   Nav overflow: hide what doesn't fit, show in ⋮ — no scroll
   ============================================================ */

/* Items: row, no wrap, NO horizontal scroll */
.sklad-nav__items {
  display: flex !important; flex-wrap: nowrap !important;
  overflow: visible !important;
  flex: 1 1 auto; min-width: 0;
}
.sklad-nav__items > li { flex: 0 0 auto; }
.sklad-nav__items > li.is-moved { display: none !important; }  /* JS sets this on overflow items */

/* ⋮ button — visible when there are moved items */
.sklad-nav__overflow {
  display: none !important; position: relative;
}
.sklad-nav__overflow:not([data-empty="1"]) { display: inline-block !important; }
.sklad-nav__overflow-btn {
  background: none; border: 0; color: #fff;
  font-size: 1.3rem; padding: 6px 10px; cursor: pointer;
  border-radius: 4px;
}
.sklad-nav__overflow-btn:hover { background: rgba(255,255,255,.12); }
.sklad-nav__overflow-dd {
  display: none; position: absolute; top: 100%; right: 0;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); min-width: 180px;
  padding: 4px 0; z-index: 200;
}
.sklad-nav__overflow:hover .sklad-nav__overflow-dd,
.sklad-nav__overflow[data-open="1"] .sklad-nav__overflow-dd { display: block; }
.sklad-nav__overflow-dd a {
  display: block !important; padding: 6px 12px !important;
  color: #111 !important; text-decoration: none !important; font-size: 13px;
}
.sklad-nav__overflow-dd a:hover { background: #f3f4f6; }

/* Burger only on real mobile */
@media (min-width: 701px) {
  .sklad-nav__burger { display: none !important; }
}

@media (max-width: 700px) {
  .sklad-nav__items {
    display: none !important; flex-direction: column !important;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #2c3e50; padding: 8px 0; z-index: 99;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
  }
  .sklad-nav[data-open="1"] .sklad-nav__items { display: flex !important; }
  .sklad-nav__items > li.is-moved { display: block !important; }
  .sklad-nav__burger { display: block !important; }
  .sklad-nav__overflow { display: none !important; }
}

/* Django admin reserves 299px on the right for its sidebar — we don't use it. Reclaim. */
.main.shifted, .main { padding-right: 0 !important; }
.main #content-start, main.content, #content-start.content {
  max-width: 100% !important;
}
.main #header, .main #nav-sidebar, #nav-sidebar { display: none !important; }
.main, body, html { width: 100% !important; }