/**
 * Portal layout — shared sidebar widths for all clientzone modules.
 * Left: 240px cap (Bootstrap col-*-2 must not stretch on ultra-wide screens).
 * Right cart/order (catalog): 260px — must stay visible on 1440×900.
 * Right (proforma/quotation actions): 280px cap when not .orderListWrapper.
 * Main content column fills the remaining row width (and may shrink: min-width: 0).
 *
 * Also: Request Details Film/Edge/Catalogs cards (staff loads clients.css, not v2/main.css).
 *
 * Loaded globally from template/header.php and template/v4/header.php (after Bootstrap / clients.css).
 */
@media (min-width: 992px) {
  .container-fluid > .row > .navInnerWrapper,
  .row > .navInnerWrapper {
    flex: 0 0 240px;
    width: 240px;
    max-width: 240px;
  }

  /*
   * Adjacent sibling (+) — only the main content column grows.
   * General sibling (~) previously also stretched the right sidebar on
   * /proforma/edit and /quotation*/edit (col-sm-7 + col-lg-3 layouts).
   * Skip multi-pane quotation columns (they keep their own flex / max-width).
   * !important beats Bootstrap .col-* width percentages on wide viewports.
   */
  .container-fluid > .row > .navInnerWrapper + [class*="col-"]:not(.orderListWrapper):not(.decorList),
  .row > .navInnerWrapper + [class*="col-"]:not(.orderListWrapper):not(.decorList) {
    flex: 1 1 0%;
    max-width: none !important;
    width: auto !important;
    min-width: 0; /* иначе сетка карточек раздувает ряд и выталкивает корзину */
  }

  /* Catalog cart rail — always reserved on desktop (1440 and up) */
  .container-fluid > .row > .orderListWrapper,
  .row > .orderListWrapper {
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px;
  }

  /* Right action rail: col-lg-3 → fixed 280px (skip quotation cart panes / catalog order). */
  .container-fluid > .row > .navInnerWrapper + [class*="col-"] + [class*="col-"]:not(.orderListWrapper):not(.decorList),
  .row > .navInnerWrapper + [class*="col-"] + [class*="col-"]:not(.orderListWrapper):not(.decorList) {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
  }

  /*
   * Nested Bootstrap .container inside the main column centers itself
   * (max-width + auto margins) and leaves a wide gap after the sidebar
   * on ultra-wide screens. Keep detail/content flush to the rail.
   */
  .container-fluid > .row > .navInnerWrapper + [class*="col-"] > .container,
  .row > .navInnerWrapper + [class*="col-"] > .container {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/*
 * Submenu groups: collapsed until .show (don't wait for Bootstrap CDN).
 * Without this, staff menus flash open then snap shut on every page load.
 */
.navInnerWrapper .nav-group-children.collapse:not(.show) {
  display: none !important;
}

@media (max-width: 991.98px) {
  .container-fluid > .row > .navInnerWrapper,
  .row > .navInnerWrapper {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  /*
   * Mobile FOUC: until/without Bootstrap collapse rules the full sidebar
   * menu paints tall, then snaps shut. Keep it closed unless .show.
   */
  .navInnerWrapper .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  .navInnerWrapper .navbar.sidebar-nav {
    min-height: 48px;
    align-items: center;
  }

  .navInnerWrapper #collections {
    padding-top: 8px !important;
  }
}

/* Backup: never paint inactive catalog tabs before Bootstrap CSS settles */
.tab-content > .tab-pane:not(.active) {
  display: none !important;
}

/* Catalogs shelf: hide Film/Edge filters even before page-local CSS */
.catalog-toolbar--shelf .catalog-toolbar__decor-filters {
  display: none !important;
}

/*
 * Shared order Request Details (Film & Edge / Catalogs).
 * Needed for staff (admin loads clients.css, not v2/main.css) and clients.
 */
.order-section-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 650;
  color: #2c3338;
}

.order-material-card {
  border: 1px solid #e4e7eb;
  border-radius: 8px;
}

.order-material-card__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.order-material-card__thumb {
  flex: 0 0 192px;
  width: 192px;
  height: 108px;
  border: 1px solid #eef1f4;
  border-radius: 6px;
  background: #eef1f4;
  overflow: hidden;
}

.order-material-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.order-material-card__thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #8a949e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-material-card__main {
  flex: 1 1 auto;
  min-width: 0;
}

a.order-material-card__thumb {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.order-material-card__thumb:hover {
  border-color: #c8d3e0;
}

.order-material-card__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 650;
  color: #2c3338;
  line-height: 1.3;
}

.order-material-card__title a {
  color: inherit;
  text-decoration: none;
}

.order-material-card__title a:hover {
  color: #2c5aa0;
  text-decoration: underline;
}

.order-material-card__article {
  font-size: 0.9rem;
  line-height: 1.35;
}

.order-confirm-qty {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f4f6f8;
}

.order-confirm-qty__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2c3338;
  font-variant-numeric: tabular-nums;
}

.order-confirm-qty__unit {
  font-size: 0.85rem;
  color: #6c757d;
}

.order-catalogs-block {
  border: 1px solid #e8d48a;
  border-radius: 10px;
  background: #fffdf5;
  overflow: hidden;
}

.order-catalogs-block__head {
  padding: 12px 16px;
  border-bottom: 1px solid #e8d48a;
  background: #ffe566;
}

.order-catalogs-block__head .order-section-title {
  margin: 0;
}

.order-catalogs-list {
  padding: 4px 0;
}

.order-catalog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0e6c2;
}

.order-catalog-row:last-child {
  border-bottom: 0;
}

.order-catalog-row__info {
  min-width: 0;
  flex: 1 1 auto;
}

.order-catalog-row__name {
  font-weight: 600;
  color: #2c3338;
  line-height: 1.3;
}

.order-catalog-row__meta {
  margin-top: 2px;
  font-size: 0.85rem;
  color: #6c757d;
}

.order-catalog-row__qty {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
}

.order-catalog-row__qty--readonly {
  padding: 4px 10px;
  border-radius: 6px;
  background: #fff8dc;
}

.order-catalog-row__qty--readonly strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2c3338;
  font-variant-numeric: tabular-nums;
}

.order-catalog-row__unit {
  font-size: 0.85rem;
  color: #6c757d;
}

@media (max-width: 576px) {
  .order-material-card__row {
    flex-wrap: wrap;
  }

  .order-material-card__thumb {
    flex: 0 0 192px;
    width: 192px;
    height: 108px;
  }

  .order-catalog-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .order-catalog-row__qty {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Client portal: Leave feedback — also needed for staff (clients.css, not v2/main.css). */
.page-feedback__intro {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #d9e2ee;
  border-radius: 8px;
  background: #f4f7fb;
}

.page-feedback__intro-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #d7e0ea;
  color: #2c5aa0;
}

.page-feedback__intro-kicker {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2c5aa0;
}

.page-feedback__intro-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 650;
  line-height: 1.25;
  color: #2c3338;
}

.page-feedback__intro-lead {
  margin: 6px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #5b6570;
}

.page-feedback__card {
  padding: 16px;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  background: #fff;
}

.page-feedback__card--ceo {
  background: #fbf8f1;
  border-color: #e4d7b8;
}

.page-feedback__card-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 12px;
  align-items: start;
  margin-bottom: 14px;
}

.page-feedback__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f3f6fa;
  border: 1px solid #d7e0ea;
  color: #2c5aa0;
}

.page-feedback__card--ceo .page-feedback__card-icon {
  color: #8a6a1f;
  background: #fff;
  border-color: #e4d7b8;
}

.page-feedback__card-step {
  display: block;
  margin-bottom: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
}

.page-feedback__card--ceo .page-feedback__card-step {
  color: #8a6a1f;
}

.page-feedback__card-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 650;
  color: #2c3338;
}

.page-feedback__card-hint {
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #5b6570;
}

.page-feedback__scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.page-feedback__scale-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  min-width: 0;
  min-height: 68px;
  padding: 8px 4px;
  border: 1.5px solid #d5dbe3;
  border-radius: 8px;
  background: #fff;
  color: #2c3338;
  cursor: pointer;
  text-align: center;
}

.page-feedback__scale-opt:hover {
  border-color: #9aa7b5;
}

.page-feedback__scale-opt:has(:checked) {
  border-color: #2c5aa0;
  background: #eef4fb;
  color: #1e3f73;
}

.page-feedback__scale-opt:has(:focus-visible) {
  outline: 2px solid #2c5aa0;
  outline-offset: 2px;
}

.page-feedback__scale-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-feedback__scale-num {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.page-feedback__scale-label {
  font-size: 0.72rem;
  line-height: 1.2;
  color: #6c757d;
}

.page-feedback__scale-opt:has(:checked) .page-feedback__scale-label {
  color: #1e3f73;
}

.page-feedback__note {
  margin-top: 12px;
}

.page-feedback__note .form-label {
  margin-bottom: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2c3338;
}

.page-feedback__note .form-control {
  border-color: #d5dbe3;
  border-radius: 6px;
}

.page-feedback__note .form-control:focus {
  border-color: #2c5aa0;
  box-shadow: 0 0 0 0.2rem rgba(44, 90, 160, 0.15);
}

.page-feedback__card--ceo .page-feedback__note .form-control {
  background: #fff;
  border-color: #e4d7b8;
}

.page-feedback__aside {
  position: sticky;
  top: 1rem;
  margin: 1.5rem 0.75rem 1.5rem 0;
  padding: 16px;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  background: #fff;
}

.page-feedback__aside-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 650;
  color: #2c3338;
}

.page-feedback__aside-note {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: #5b6570;
}

@media (max-width: 575.98px) {
  .page-feedback__intro {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-feedback__scale {
    gap: 6px;
  }

  .page-feedback__scale-opt {
    min-height: 60px;
    padding: 8px 2px;
  }

  .page-feedback__scale-label {
    font-size: 0.65rem;
  }
}