/*!
 * Shared frontend theme — the skin that used to be appended to bootstrap.min.css.
 *
 * Extracted from the vendored Bootstrap bundle on 2026-10-07, when that bundle was replaced by the
 * unmodified Bootstrap 5.3.8 distribution, and pruned the same day to the rules this repo can match.
 * The rest of the Clean skin (catalog, product, cart, blog, pricing, hero, testimonials, footer,
 * header-standard) and the smooth-products widget styled markup that neither app renders; the
 * baguetteBox lightbox went with them. What is left is the part the pages actually use:
 * the gate design tokens and the Bootstrap variables and rules they re-pin, the Sass-level variable
 * customisations (Montserrat, the `info` colour family), `.clean-block`, `.block-heading`,
 * `.feature-box`, `.clean-form`, `.clean-navbar` and the pagination tokens. Loaded after
 * bootstrap.min.css.
 */

:root {
  /* The gate tokens: every colour, radius and shadow the skin names lives here (spec 023 §5.1). */
  --gate-accent: #3b99e0;
  --gate-accent-rgb: 59, 153, 224;
  --gate-accent-strong: #2f86c9;
  --gate-accent-strong-rgb: 47, 134, 201;
  --gate-accent-bg: rgba(var(--gate-accent-rgb), .25);
  --gate-radius: 4px;
  --gate-shadow: 0 2px 10px rgba(0, 0, 0, .075);
  --gate-form-border: 2px solid var(--gate-accent);
  /* The placement page's copies count (spec 046 §5.4): the figure and the band its column wears. Both
     schemes are pinned by hand, because a tinted ground is the one thing Bootstrap's own variables do
     not carry across the scheme switch. */
  --gate-quantity-fg: #1b6ba4;
  --gate-quantity-bg: rgba(var(--gate-accent-rgb), .12);
  /* The fixed navbar's own height: the page keeps it as a top padding, and anything that has to sit
     *right* under the bar — the item card's sticky action bar — reads the same number. Measured in the
     browser at both sizes (2026-10-16), never played back from Bootstrap's padding arithmetic. */
  --gate-navbar-height: 67px;

  /* Bootstrap's own variables follow the accent — links, utilities and the focus ring read these. */
  --bs-primary: var(--gate-accent);
  --bs-primary-rgb: var(--gate-accent-rgb);
  --bs-link-color: var(--gate-accent);
  --bs-link-color-rgb: var(--gate-accent-rgb);
  --bs-link-hover-color: var(--gate-accent-strong);
  --bs-link-hover-color-rgb: var(--gate-accent-strong-rgb);
  --bs-focus-ring-color: var(--gate-accent-bg);

  /* Carried over from the pre-5.3.8 bundle: the body font and the info colour family. */
  --bs-font-sans-serif: "Montserrat", sans-serif;
  --bs-info: var(--gate-accent);
  --bs-info-rgb: var(--gate-accent-rgb);
  --bs-info-text-emphasis: #183d5a;
  --bs-info-bg-subtle: #d8ebf9;
  --bs-info-border-subtle: #b1d6f3;
}

/* Bootstrap pins the primary hex inside these rules rather than reading --bs-primary, so the accent
   has to be re-pinned by name (spec 023 §5.1). Links and the pagination read --bs-link-* /
   --bs-pagination-*, which the variables above already cover. */
.btn-primary {
  --bs-btn-bg: var(--gate-accent);
  --bs-btn-border-color: var(--gate-accent);
  --bs-btn-hover-bg: var(--gate-accent-strong);
  --bs-btn-hover-border-color: var(--gate-accent-strong);
  --bs-btn-active-bg: var(--gate-accent-strong);
  --bs-btn-active-border-color: var(--gate-accent-strong);
  --bs-btn-disabled-bg: var(--gate-accent);
  --bs-btn-disabled-border-color: var(--gate-accent);
  --bs-btn-focus-shadow-rgb: var(--gate-accent-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--gate-accent);
  --bs-btn-border-color: var(--gate-accent);
  --bs-btn-hover-bg: var(--gate-accent);
  --bs-btn-hover-border-color: var(--gate-accent);
  --bs-btn-active-bg: var(--gate-accent-strong);
  --bs-btn-active-border-color: var(--gate-accent-strong);
  --bs-btn-focus-shadow-rgb: var(--gate-accent-rgb);
}
.form-control:focus,.form-select:focus,.form-check-input:focus {
  border-color:var(--gate-accent);
  box-shadow:0 0 0 .25rem var(--gate-accent-bg);
}
.form-check-input:checked {
  background-color:var(--gate-accent);
  border-color:var(--gate-accent);
}

html,body {
  height:100%;
  width:100%;
}
/* The dark scheme lifted a step or two off Bootstrap's near-black defaults, so surfaces separate without
   the page turning into a black rectangle (spec 023 §5.1). */
[data-bs-theme=dark] {
  --bs-body-bg:#2d2f33;
  --bs-body-bg-rgb:45, 47, 51;
  --bs-secondary-bg:#383b40;
  --bs-secondary-bg-rgb:56, 59, 64;
  --bs-tertiary-bg:#43474d;
  --bs-tertiary-bg-rgb:67, 71, 77;
  --bs-border-color:#5a5f66;
  --bs-border-color-translucent:rgba(255, 255, 255, .16);
  --gate-quantity-fg:#9ccdf5;
  --gate-quantity-bg:rgba(var(--gate-accent-rgb), .2);
  /* The `info` family the skin pinned for the flash banner is a light set too: without these it would stay
     a pale blue slab with navy text on the dark page (review 2026-10-16). Same accent, sunk for the dark
     ground and lifted for the text on it. */
  --bs-info-text-emphasis:#9ad2f2;
  --bs-info-bg-subtle:#17384f;
  --bs-info-border-subtle:#24556f;
}
@media(min-width: 576px) {
  :root {
    --gate-navbar-height:85px;
  }
}
/* The navbar and the page body are one colour, so in the dark they need a line to separate (spec 023 §5.1). */
.clean-navbar {
  border-bottom:1px solid var(--bs-border-color);
}
/* Bootstrap's contextual table rows (the totals row uses `.table-secondary`) are fixed light colours and
   ignore the scheme, so on a dark page the totals read as a white band (spec 023 §5.1). */
[data-bs-theme=dark] .table-secondary {
  --bs-table-color:var(--bs-body-color);
  --bs-table-bg:var(--bs-secondary-bg);
  --bs-table-border-color:var(--bs-border-color);
  --bs-table-striped-bg:var(--bs-tertiary-bg);
  --bs-table-striped-color:var(--bs-body-color);
  --bs-table-active-bg:var(--bs-tertiary-bg);
  --bs-table-active-color:var(--bs-body-color);
  --bs-table-hover-bg:var(--bs-tertiary-bg);
  --bs-table-hover-color:var(--bs-body-color);
}
/* Outline buttons follow the scheme instead of the framework's fixed grey, which reads as a ghost. */
[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-color:var(--bs-body-color);
  --bs-btn-border-color:var(--bs-border-color);
  --bs-btn-hover-bg:var(--bs-tertiary-bg);
  --bs-btn-hover-border-color:var(--bs-border-color);
  --bs-btn-active-bg:var(--bs-tertiary-bg);
  --bs-btn-active-border-color:var(--bs-border-color);
}
.clean-block {
  padding-bottom:50px;
}
.clean-block.dark {
  --bs-bg-opacity: 1;
  background-color:rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
}
.clean-block .block-heading {
  padding-top:50px;
  margin-bottom:40px;
  text-align:center;
}
.clean-block .block-heading h1,.clean-block .block-heading .h1,.clean-block .block-heading h2,.clean-block .block-heading .h2,.clean-block .block-heading h3,.clean-block .block-heading .h3 {
  margin-bottom:1.2rem;
}
.clean-block.clean-form form {
  --bs-bg-opacity: 1;
  background-color:rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity));
  border-top:var(--gate-form-border);
  max-width:500px;
  margin:auto;
  padding:40px;
  box-shadow:var(--gate-shadow);
}
@media(min-width: 576px) {
  .clean-block {
    padding-bottom:100px;
  }
  .clean-block .block-heading {
    padding-top:80px;
  }
}
.clean-navbar .navbar-nav .nav-link {
  font-weight:600;
  font-size:.8rem;
  text-transform:uppercase;
}
.clean-navbar.fixed-top {
  box-shadow:0px 0px 15px rgba(0,0,0,.1);
}
.clean-navbar .navbar-nav .nav-item {
  padding-right:2rem;
}
.clean-navbar .logo {
  font-size:1.5rem;
}
.clean-navbar {
  padding-top:10px;
  padding-bottom:10px;
}
.clean-navbar .navbar-brand {
  margin-right:32px;
}
.clean-navbar .navbar-collapse {
  margin:5px;
}
.clean-navbar.fixed-top+.page {
  padding-top:var(--gate-navbar-height);
}
@media(min-width: 576px) {
  .navbar {
    padding-top:1.2rem;
    padding-bottom:1.2rem;
  }
  .clean-navbar.fixed-top+.page {
    padding-top:var(--gate-navbar-height);
  }
}
/* The «Каталог» folder in the items menu (spec 048 §5.2). Bootstrap 5 has no nested dropdown, so the
   folder is a `.dropdown-submenu` whose child menu opens sideways on click (`nav_submenu.js`); the child
   is an ordinary `.dropdown-menu`, only its position changes. On the collapsed navbar the folder expands
   in place instead — a sideways flyout would run off a phone's screen. */
.dropdown-submenu {
  position:relative;
}
.dropdown-submenu > .dropdown-menu {
  top:0;
  left:100%;
  margin-top:calc(-1 * var(--bs-dropdown-padding-y) - var(--bs-dropdown-border-width));
  margin-left:0;
  display:none;
}
.dropdown-submenu.show > .dropdown-menu {
  display:block;
}
.dropdown-submenu > .dropdown-toggle::after {
  position:absolute;
  top:50%;
  right:var(--bs-dropdown-item-padding-x);
  margin-left:0;
  transform:translateY(-50%) rotate(-90deg);
}
@media(max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu {
    position:static;
    margin:0 0 0 var(--bs-dropdown-item-padding-x);
    padding-left:var(--bs-dropdown-item-padding-x);
    border:0;
    border-left:1px solid var(--bs-border-color);
    background:transparent;
    box-shadow:none;
  }
}
/* The pagination block the skin carried pinned the light theme's own literals — black digits, `#dee2e6`
   borders — so on the dark ground the page numbers came out black on black (review 2026-10-16; the same
   class of miss §12's dark pass fixed for `bg-light` and the contextual tables). The values are the
   scheme's own tokens now, and the current page is the one chip the design system accents rather than a
   pinned grey — exactly the "active page number" §1.1 counted among the three accents. */
.pagination {
  --bs-pagination-color:var(--bs-body-color);
  --bs-pagination-bg:transparent;
  --bs-pagination-border-color:var(--bs-border-color);
  --bs-pagination-hover-color:var(--bs-body-color);
  --bs-pagination-hover-bg:var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color:var(--bs-border-color);
  --bs-pagination-focus-color:var(--bs-body-color);
  --bs-pagination-focus-bg:var(--bs-tertiary-bg);
  --bs-pagination-focus-box-shadow:0 0 0 .25rem var(--gate-accent-bg);
  --bs-pagination-active-color:#fff;
  --bs-pagination-active-bg:var(--gate-accent);
  --bs-pagination-active-border-color:var(--gate-accent);
  --bs-pagination-disabled-color:var(--bs-secondary-color);
  --bs-pagination-disabled-bg:transparent;
  --bs-pagination-disabled-border-color:var(--bs-border-color);
}
/* A table row that links to its record must not swallow the buttons in its action cell. */
.gate-table .row-action {
  position:relative;
  z-index:2;
}
/* A sources row opens as a two-line preview — the row's fold control, and the block's one control for
   all of them, bring the full text back (spec 032 §5). */
.gate-row-toggle {
  background:none;
  border:0;
  padding:0 .3rem 0 0;
  color:var(--bs-secondary-color);
  line-height:1;
  cursor:pointer;
}
.gate-row-toggle[aria-expanded="false"] > span {
  display:inline-block;
  transform:rotate(-90deg);
}
.gate-sources tr.gate-source-clamped .gate-source-text {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
/* The position box beside a variant is a place in a list, not a paragraph (spec 035 §5). */
.gate-position-input {
  max-width:5rem;
}
/* The export queue's price/amount boxes are two short numbers, not the row they sit in (spec 037 §5.2). */
.gate-export-input {
  max-width:8rem;
}
/* The item form's image widget (spec 034 §5): a wrapping grid of thumbnails; the main one is ringed. */
.gate-image-grid {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.gate-image {
  width:9rem;
  margin:0;
  padding:.4rem;
  border:1px solid var(--bs-border-color);
  border-radius:var(--gate-radius);
  background-color:var(--bs-body-bg);
}
.gate-image-main {
  border-color:var(--gate-accent);
  box-shadow:0 0 0 .15rem var(--gate-accent-bg);
}
.gate-image img {
  width:100%;
  height:6rem;
  object-fit:cover;
  border-radius:calc(var(--gate-radius) - 2px);
}
.gate-image-preview img {
  width:9rem;
  height:6rem;
  object-fit:cover;
  border:1px dashed var(--bs-border-color);
  border-radius:var(--gate-radius);
}
/* A row that links to its record is the only one that invites the click: a mixed table must not hover a
   row that goes nowhere (spec 023 §5.4, spec 035 §5). */
.gate-table tbody tr.gate-row-link:hover > * {
  background-color:var(--bs-table-hover-bg);
  color:var(--bs-table-hover-color);
}
/* A row the browser's own click handler takes to its record (023 §5.4, `row_links.js`): the pointer says
   so, and — the reason the overlay is gone — the row itself is what is under the pointer, never a link
   stretched over the page. */
.gate-table tbody tr.gate-row-clickable {
  cursor:pointer;
}
/* A phone cannot show seven columns at their natural width: the long values take one line with an
   ellipsis there, and the cells give back a little padding (spec 023 §5.4). */
@media (max-width: 767.98px) {
  .gate-table > :not(caption) > * > * {
    padding:.4rem .35rem;
  }
}
/* The first column carries the link and a record's own number, so it never wraps mid-value. */
.gate-table td:first-child,.gate-table th:first-child {
  white-space:nowrap;
}
/* A free-form note keeps the manager's line breaks: HTML collapses a newline otherwise (spec 013 §5.7). */
.gate-text-pre-line {
  white-space:pre-line;
  overflow-wrap:anywhere;
}
/* The shelf's copies count (spec 046 §5.4). The number, not the name, is what the operator scans this
   page for, so its column wears a band of its own and the figure is big, bold and tabular — figures of
   different widths line up down the column. The band is painted per cell rather than through Bootstrap's
   table variables, which is what keeps it under the highlighted target row. */
.gate-shelf .gate-shelf-quantity {
  background-color:var(--gate-quantity-bg);
  border-right:1px solid var(--bs-border-color);
}
/* A phone drops the format and the «Артикул» (the template's own `d-none d-md-table-cell`), and what is
   left still has to fit: at the shelf's own size the five columns are 366px wide and the longest names
   set that floor, so on a phone the metadata steps down one notch and the cells give back their padding —
   328px, which fits a 360px screen. The copies count does not step down: its figure is 1.4rem, the one
   thing on this page the operator scans for (023 §12's phone rule, extended 2026-10-17). */
@media (max-width: 767.98px) {
  .gate-shelf {
    font-size:.85rem;
  }
  .gate-shelf > :not(caption) > * > * {
    padding-left:.2rem;
    padding-right:.2rem;
  }
}
.gate-quantity {
  display:inline-block;
  min-width:2.4rem;
  font-size:1.4rem;
  font-weight:700;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
  color:var(--gate-quantity-fg);
}
/* A live zero is the operator's own signal that the mirror needs a sync (spec 046 §5.3): the one figure
   that must not read as an ordinary count. */
.gate-quantity-zero {
  padding:0 .5rem;
  border-radius:var(--gate-radius);
  background-color:var(--bs-warning-bg-subtle);
  color:var(--bs-warning-text-emphasis);
}
/* The store did not answer the window: the dash is muted, its tooltip says why (spec 046 §5.4). */
.gate-quantity-unknown {
  font-size:1.1rem;
  color:var(--bs-secondary-color);
}
/* Where the window runs past an end of the shelf, one note marks the boundary instead of blank rows
   (spec 046 §5.4): it is a caption, not a record, so it carries neither the band nor a row's height. */
.gate-shelf-edge > td {
  padding-top:.4rem;
  padding-bottom:.4rem;
  border-bottom:0;
  background-color:transparent;
  font-size:.75rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--bs-secondary-color);
  text-align:center;
}
/* The target row is the one the eye must land on: the legacy's grey, plus a bar the row's own column
   carries, so the mark survives the grey reading faintly on a dark page. */
.gate-shelf-target > .gate-shelf-quantity {
  box-shadow:inset 3px 0 0 var(--gate-accent);
}
/* The page header and the form action bar: one place each, so every page agrees (spec 023 §5.2, §5.3).
   The header's under-navbar gap is 1rem (user request 2026-10-18), not 30px: the fixed navbar already
   supplies its own height through the page's top padding, so the breadcrumb must not repeat it. */
.page-header {
  padding-top:1rem;
  margin-bottom:30px;
}
.page-title {
  font-size:2rem;
  color:var(--gate-accent);
  margin-bottom:0;
}
.breadcrumb {
  margin-bottom:.5rem;
  font-size:.875rem;
}
/* The placement page keeps its shelf closer to the title (user request 2026-10-18): the default 30px gap
   pushed the useful content down, especially on a phone. It is the page's own rule, not a global one. */
.gate-placement .page-header {
  margin-bottom:1rem;
}
.form-actions {
  margin-top:1.5rem;
}
/* The item card's action bar, stuck under the fixed navbar (user request 2026-10-16): the card runs to five
   payload sections, the sources fold and the image widget, so a save is otherwise an end-of-page trip and
   the card carries that bar alone. It sticks at the navbar's own height, the token the page's padding
   uses, so no line of content can slip through the seam — and the z-index clears the row buttons that
   carry their own stacking (`.gate-table .row-action`). */
.gate-form-bar {
  position:sticky;
  top:var(--gate-navbar-height);
  z-index:3;
  padding-top:.75rem;
  padding-bottom:.25rem;
  border-bottom:1px solid var(--bs-border-color);
  background-color:var(--bs-body-bg);
}
.gate-form-bar .form-actions {
  margin-top:0;
}
.confirm-delete {
  padding-bottom:20px;
}
/* Keyboard focus must be visible wherever a link, a button or a row can be reached (spec 023 §5.8). */
a:focus-visible,.btn:focus-visible,.page-link:focus-visible,.gate-table a:focus-visible {
  outline:2px solid var(--gate-accent);
  outline-offset:2px;
}
/* The dashboard's counters (spec 023 §5.7). */
.dash-card {
  display:block;
  padding:20px;
  border:1px solid var(--bs-border-color);
  border-radius:var(--gate-radius);
  background-color:var(--bs-body-bg);
  box-shadow:var(--gate-shadow);
  color:inherit;
  text-decoration:none;
}
.dash-card:hover {
  border-color:var(--gate-accent);
}
.dash-value {
  display:block;
  font-size:2rem;
  font-weight:600;
  color:var(--gate-accent);
}
.dash-label {
  color:var(--bs-secondary-color);
}
.dash-hint {
  display:block;
  margin-top:.25rem;
  font-size:.875rem;
  color:var(--bs-secondary-color);
}
/* The list search box and its sortable headers (spec 023 §5.5). */
.gate-search {
  max-width:20rem;
}
/* The item form's payload sections: one panel per `<details>`, the heading a clickable summary
   (spec 032 §5, 023's block styling). Bootstrap's own tokens carry the dark scheme. */
.gate-section {
  border:1px solid var(--bs-border-color);
  border-radius:var(--gate-radius);
  padding:.75rem 1rem 1rem;
  margin-top:1.5rem;
  background-color:var(--bs-body-bg);
}
.gate-section > summary {
  cursor:pointer;
  margin-bottom:0;
}
.gate-section[open] > summary {
  margin-bottom:.5rem;
}
/* The picker's hits are a fold of their own (spec 032 §13, 2026-10-13): a lighter block than a payload
   section, since it sits inside one and holds nothing but the search's answer. */
.gate-hits > summary {
  cursor:pointer;
  margin-bottom:0;
}
.gate-hits[open] > summary {
  margin-bottom:.5rem;
}
.sort-link {
  color:inherit;
  text-decoration:none;
}
.sort-link:hover,.sort-link.active {
  color:var(--gate-accent);
}
/* The sources block's table (spec 032 §5/§13): its value columns share one width, so gate's, the store's
   and Discogs' spellings of a field stay comparable — a narrower store column wraps a long value into a
   column of its own and the three stop lining up. The field's label and the picks take what is left, and
   every value cell aligns to the top, so a tall description reads as a paragraph rather than centred. */
.gate-sources th,.gate-sources td {
  width:25%;
  vertical-align:top;
}
.gate-sources th:first-child,.gate-sources td:first-child {
  width:12%;
  white-space:normal;
}
.gate-sources th:last-child,.gate-sources td:last-child {
  width:1%;
  white-space:nowrap;
}
/* A row whose value the manager took in the browser: marked until Save or until the mark is clicked. */
.gate-source-taken td {
  background-color:var(--bs-success-bg-subtle);
  color:var(--bs-secondary-color);
}
.gate-sources td {
  overflow-wrap:anywhere;
}