/* Shared visual language from the local КостКасса одежда interface.
   This layer changes presentation only; register internals have their own layer. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./fonts/manrope/cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./fonts/manrope/cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./fonts/manrope/latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./fonts/manrope/latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.clothing-interface {
  font-family: "Manrope", Arial, sans-serif;
  font-synthesis: none;
  font-weight: 500;
  color-scheme: light;
  --accent: #244e41;
  --green: #244e41;
  --ink: #263d35;
  --muted: #87928b;
  --line: #e4e8e1;
  --surface: #fff;
  --cream: #f0f2ed;
  --sidebar: #fff;
  --sidebar-width: 224px;
  --navigation-text: #667e6c;
  --navigation-hover: #f0f4ed;
  --navigation-active: #e4eddf;
  --navigation-active-text: #284f3b;
  color: var(--ink);
  background: #f6f7f4;
}

@media screen {
  /* White navigation and a shared header on every workspace, including the till. */
  body.clothing-interface .sidebar {
    width: var(--sidebar-width);
    height: 100dvh;
    padding: 0 12px 15px;
    background: #fff;
    color: var(--navigation-text);
    border-right: 1px solid var(--line);
    overflow: hidden;
    box-shadow: none;
  }
  body.clothing-interface .sidebar-brand-row {
    height: 76px;
    min-height: 76px;
    padding: 0 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  body.clothing-interface .sidebar .brand,
  body.clothing-interface .auth-brand {
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: 11px;
    color: #294333;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1;
  }
  body.clothing-interface .sidebar .brand > span:last-child {
    display: block;
  }
  body.clothing-interface .brand small {
    color: #89958b;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.7px;
    margin-top: 7px;
  }
  body.clothing-interface .brand-symbol {
    width: 40px;
    min-width: 40px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #244e41;
  }
  body.clothing-interface .brand-symbol .ui-icon {
    width: 34px;
    height: 34px;
    stroke-width: 1.6;
  }
  body.clothing-interface .sidebar-toggle {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    min-height: 46px;
    width: 100%;
    padding: 0 13px;
    margin: 0 0 12px;
    gap: 12px;
    color: var(--navigation-text);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 650;
  }
  body.clothing-interface .sidebar-toggle .ui-icon {
    width: 20px;
    height: 20px;
  }
  body.clothing-interface .sidebar-toggle:hover:not(:disabled) {
    background: var(--navigation-hover);
  }
  body.clothing-interface .workspace-label,
  body.clothing-interface .navigation-label {
    display: none;
  }
  body.clothing-interface .navigation {
    flex: 0 1 auto;
    width: 100%;
    min-height: 0;
    gap: 6px;
    padding: 0 0 4px;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: #d6dfd3 transparent;
  }
  body.clothing-interface .navigation button {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 13px;
    margin: 0;
    gap: 12px;
    justify-content: flex-start;
    color: var(--navigation-text);
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
  }
  body.clothing-interface .navigation button > span {
    display: inline;
    min-width: 0;
    text-align: left;
  }
  body.clothing-interface .navigation button > .ui-icon {
    width: 20px;
    height: 20px;
    color: currentColor;
  }
  body.clothing-interface .navigation button .nav-chevron {
    display: none;
  }
  body.clothing-interface .navigation button:hover:not(:disabled) {
    color: var(--navigation-active-text);
    background: var(--navigation-hover);
  }
  body.clothing-interface .navigation button.active {
    color: var(--navigation-active-text);
    background: var(--navigation-active);
    border-color: transparent;
  }
  body.clothing-interface .navigation button.active > .ui-icon {
    color: currentColor;
  }
  body.clothing-interface .sidebar-back {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding: 0 13px;
    margin: 0 0 8px;
    color: var(--navigation-text);
    background: transparent;
    font-size: 12px;
  }
  body.clothing-interface .sidebar-back:hover:not(:disabled) {
    background: var(--navigation-hover);
  }
  body.clothing-interface .sidebar-back .ui-icon {
    width: 20px;
    height: 20px;
  }
  body.clothing-interface .sidebar-bottom {
    display: block;
    margin-top: auto;
    padding: 16px 7px 0;
  }
  body.clothing-interface .sidebar-sync {
    display: flex;
    margin-bottom: 20px;
  }
  body.clothing-interface .sidebar-sync-icon {
    color: #91a38b;
  }
  body.clothing-interface .sidebar-sync strong {
    color: #53694f;
    font-size: 11px;
    font-weight: 650;
  }
  body.clothing-interface .sidebar-sync small {
    color: #8c9788;
    font-size: 10px;
  }
  body.clothing-interface .sidebar-version {
    display: flex;
    border-color: var(--line);
    color: #9aa493;
    font-size: 9px;
  }
  body.clothing-interface .topbar {
    min-height: 76px;
    height: 76px;
    margin-left: var(--sidebar-width);
    padding: 0 26px;
    gap: 20px;
    background: #fafbf8;
    border-bottom: 1px solid var(--line);
    flex: none;
  }
  body.clothing-interface .topbar .store-switcher {
    position: static;
    inset: auto;
    display: flex;
    flex: 0 1 230px;
    width: auto;
    max-width: 230px;
    min-width: 130px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    gap: 0;
    background: #fff;
    border-color: #dde3dc;
    border-radius: 9px;
  }
  body.clothing-interface .topbar .store-switcher-icon {
    display: none;
  }
  body.clothing-interface .topbar .store-switcher select {
    min-height: 46px;
    height: 46px;
    padding: 8px 28px 8px 10px;
    margin: 0;
    background: #fff;
    color: #263d35;
    border: 0;
    font-size: 13px;
    font-weight: 500;
  }
  body.clothing-interface .topbar .store-switcher:focus-within {
    border-color: #628c78;
    box-shadow: 0 0 0 3px #608b7414;
  }
  body.clothing-interface .topbar .store-switcher select:focus {
    outline: 0;
    box-shadow: none;
  }
  body.clothing-interface .breadcrumb {
    flex: 1 1 0;
    min-width: 0;
    gap: 15px;
    color: #929d94;
    font-size: 11px;
  }
  body.clothing-interface .breadcrumb > span:first-child {
    display: inline;
    min-width: 0;
    max-width: 200px;
  }
  body.clothing-interface .breadcrumb strong {
    min-width: 0;
    color: #4a5c51;
    font-weight: 600;
  }
  body.clothing-interface .breadcrumb-separator {
    color: #929d94;
    width: 15px;
    height: 15px;
    flex: none;
  }
  body.clothing-interface .top-actions {
    flex: none;
    gap: 23px;
  }
  body.clothing-interface .top-actions .secondary,
  body.clothing-interface .top-cash-button {
    min-height: 40px;
    padding: 8px 13px;
    font-size: 12px;
    border-radius: 8px;
  }
  body.clothing-interface .top-actions .secondary {
    color: #667e6c;
    background: #fff;
    border-color: #e0e6dc;
  }
  body.clothing-interface .top-cash-button {
    background: #244e41;
    color: #fff;
  }
  body.clothing-interface .top-actions .icon-button {
    color: #879580;
    background: transparent;
  }
  body.clothing-interface .top-actions .icon-button:hover:not(:disabled) {
    color: #244e41;
    background: #f0f4ed;
  }
  body.clothing-interface .user-profile {
    padding-left: 0;
    gap: 10px;
    border: 0;
  }
  body.clothing-interface .user-profile > div {
    display: block;
    min-width: 0;
  }
  body.clothing-interface .user-avatar {
    display: none;
  }
  body.clothing-interface .user-profile strong {
    max-width: 130px;
    color: #263d35;
    font-size: 12px;
    font-weight: 500;
  }
  body.clothing-interface .user-profile small {
    color: #8a948c;
    font-size: 10px;
  }
  body.clothing-interface #connection-state {
    color: #7a8b7f;
  }
  body.clothing-interface #connection-state.ok {
    color: #597c56;
  }
  body.clothing-interface #connection-state.error {
    color: #ab4053;
  }
  body.clothing-interface .app-main {
    max-width: 1520px;
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    padding: 34px 38px 48px;
  }
  body.clothing-interface .app-footer {
    margin-left: var(--sidebar-width);
    padding: 20px 38px 24px;
    color: #9aa493;
  }
  body.clothing-interface #notice,
  body.clothing-interface #update-banner {
    margin-left: calc(var(--sidebar-width) + 38px);
    margin-right: 38px;
  }
  body.clothing-interface.cash-workspace .app-main {
    max-width: none;
    padding: 0;
  }
  body.clothing-interface.cash-workspace #notice {
    margin: 7px 20px 7px calc(var(--sidebar-width) + 20px);
  }
  body.clothing-interface.cash-workspace .topbar {
    height: 64px;
    min-height: 64px;
    padding: 0 20px;
    background: #fff;
  }
  body.clothing-interface.cash-workspace .sidebar-brand-row {
    height: 64px;
    min-height: 64px;
  }
  body.clothing-interface.cash-workspace .breadcrumb {
    color: #64786b;
    font-size: 12px;
  }
  body.clothing-interface.cash-workspace .breadcrumb strong {
    color: #263d35;
  }
  body.clothing-interface.cash-workspace .top-actions {
    gap: 18px;
  }
  body.clothing-interface #header-session {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  body.clothing-interface .topbar #logout-button {
    width: auto;
    height: auto;
    min-height: 48px;
    padding: 7px 9px;
    color: #4f6255;
    background: #eff3ef;
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 650;
  }
  body.clothing-interface .topbar #logout-button:hover:not(:disabled) {
    color: #244e41;
    background: #e4eddf;
  }

  /* Lists, reports, catalog, stock forms and onboarding use the clothing controls. */
  body.clothing-interface:not(.cash-workspace) :where(#workspace, #auth-screen, #print-preview, dialog) button {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 650;
    gap: 9px;
    border: 0;
  }
  body.clothing-interface:not(.cash-workspace) :where(#workspace, #auth-screen, #print-preview, dialog) button:where(:not(.secondary, .icon-button, .store-card, .customer-picker-option, .danger)):hover:not(:disabled) {
    background: #173d30;
  }
  body.clothing-interface:not(.cash-workspace) .secondary {
    color: #263d35;
    background: #fff;
    border: 1px solid #e0e6dc;
  }
  body.clothing-interface:not(.cash-workspace) .secondary:hover:not(:disabled) {
    color: #263d35;
    background: #f2f5ee;
    border-color: #cbd9c6;
  }
  body.clothing-interface:not(.cash-workspace) .icon-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 8px;
    color: #879580;
    background: transparent;
  }
  body.clothing-interface:not(.cash-workspace) .icon-button:hover:not(:disabled) {
    color: #244e41;
    background: #f0f4ed;
  }
  body.clothing-interface:not(.cash-workspace) input,
  body.clothing-interface:not(.cash-workspace) select,
  body.clothing-interface:not(.cash-workspace) textarea {
    min-height: 48px;
    padding: 12px 13px;
    color: #293f35;
    border-color: #dde3dc;
    border-radius: 9px;
    font-size: 14px;
  }
  body.clothing-interface:not(.cash-workspace) input:focus,
  body.clothing-interface:not(.cash-workspace) select:focus,
  body.clothing-interface:not(.cash-workspace) textarea:focus {
    outline: none;
    border-color: #628c78;
    box-shadow: 0 0 0 3px #608b7414;
  }
  body.clothing-interface:not(.cash-workspace) input::placeholder,
  body.clothing-interface:not(.cash-workspace) textarea::placeholder {
    color: #9da69b;
  }
  body.clothing-interface:not(.cash-workspace) input[type=checkbox] {
    min-height: 0;
    padding: 0;
    border-radius: 4px;
  }
  body.clothing-interface:not(.cash-workspace) label {
    color: #5b6c5e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
  }
  body.clothing-interface:not(.cash-workspace) label.check {
    font-size: 12px;
    font-weight: 500;
  }
  body.clothing-interface h1,
  body.clothing-interface h2,
  body.clothing-interface h3 {
    color: #263d35;
  }
  body.clothing-interface:not(.cash-workspace) h1 {
    font-size: 32px;
    font-weight: 750;
    letter-spacing: -1.2px;
    line-height: 1.3;
    margin: 7px 0 0;
  }
  body.clothing-interface:not(.cash-workspace) h2 {
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.6px;
    margin-bottom: 24px;
  }
  body.clothing-interface:not(.cash-workspace) h3 {
    font-size: 15px;
    font-weight: 750;
  }
  body.clothing-interface:not(.cash-workspace) .workspace-heading {
    margin-bottom: 27px;
  }
  body.clothing-interface .eyebrow {
    color: #879580;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }
  body.clothing-interface:not(.cash-workspace) .workspace-heading .muted {
    color: #8c9788;
    font-size: 14px;
  }
  body.clothing-interface .muted {
    color: #8c9788;
  }
  body.clothing-interface:not(.cash-workspace) .card {
    padding: 26px;
    border-color: #e4e8e1;
    border-radius: 14px;
    box-shadow: none;
  }
  body.clothing-interface:not(.cash-workspace) .metrics {
    gap: 18px;
    margin-bottom: 26px;
  }
  body.clothing-interface:not(.cash-workspace) .metric {
    padding: 20px 22px;
    border-radius: 12px;
    box-shadow: none;
  }
  body.clothing-interface:not(.cash-workspace) .metric-heading > span:first-child {
    color: #909b91;
    font-size: 12px;
  }
  body.clothing-interface:not(.cash-workspace) .metric-icon {
    color: #89a67c;
    background: #f0f4ed;
  }
  body.clothing-interface:not(.cash-workspace) .metric strong {
    color: #263d35;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-top: 10px;
  }
  body.clothing-interface:not(.cash-workspace) .metric small {
    color: #8c978d;
    font-size: 11px;
  }
  body.clothing-interface:not(.cash-workspace) .section-head h2,
  body.clothing-interface:not(.cash-workspace) .section-head h3 {
    margin: 0;
  }
  body.clothing-interface:not(.cash-workspace) .toolbar {
    gap: 12px;
    margin-bottom: 22px;
  }
  body.clothing-interface:not(.cash-workspace) .toolbar > button {
    font-size: 14px;
  }
  body.clothing-interface:not(.cash-workspace) .toolbar input[type=date] {
    font-size: 13px;
  }
  body.clothing-interface:not(.cash-workspace) table {
    font-size: 14px;
  }
  body.clothing-interface:not(.cash-workspace) th {
    padding: 17px 20px;
    color: #7a877e;
    background: #f9faf7;
    border-color: #e4e8e1;
    font-size: 12px;
    font-weight: 600;
  }
  body.clothing-interface:not(.cash-workspace) td {
    padding: 15px 20px;
    color: #263d35;
    border-color: #edf0e9;
  }
  body.clothing-interface:not(.cash-workspace) tbody tr:hover td {
    background: #fafbf8;
  }
  body.clothing-interface:not(.cash-workspace) td input {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 13px;
  }
  body.clothing-interface:not(.cash-workspace) td .small {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 11px;
  }
  body.clothing-interface:not(.cash-workspace) .empty {
    color: #9aa493;
    font-size: 13px;
  }
  body.clothing-interface .badge {
    border-radius: 6px;
    font-size: 10px;
  }
  body.clothing-interface .badge.ok {
    color: #597c56;
    background: #edf5e8;
  }
  body.clothing-interface:not(.cash-workspace) .store-card {
    padding: 24px;
    border-color: #e4e8e1;
    border-radius: 14px;
    font-size: 13px;
  }
  body.clothing-interface:not(.cash-workspace) .store-card:hover:not(:disabled) {
    border-color: #a8bca0;
    box-shadow: 0 5px 16px #244e4108;
  }
  body.clothing-interface:not(.cash-workspace) .store-card .store-title {
    color: #3d5145;
    font-size: 15px;
    font-weight: 750;
  }
  body.clothing-interface:not(.cash-workspace) .store-card strong {
    color: #244e41;
    font-size: 28px;
    font-weight: 750;
  }
  body.clothing-interface:not(.cash-workspace) .store-card small {
    color: #9aa493;
    font-size: 11px;
  }
  body.clothing-interface:not(.cash-workspace) .tabs button {
    min-height: 44px;
    padding: 10px 5px;
    border-radius: 0;
    background: transparent;
    font-size: 12px;
    color: #8c9788;
  }
  body.clothing-interface:not(.cash-workspace) .tabs button.active {
    color: #244e41;
    border-bottom-color: #244e41;
  }
  body.clothing-interface:not(.cash-workspace) .tabs button:hover:not(:disabled) {
    color: #244e41;
    background: transparent;
  }
  body.clothing-interface:not(.cash-workspace) .d2-document-tabs {
    gap: 12px;
    margin: 27px 0 22px;
  }
  body.clothing-interface:not(.cash-workspace) .d2-document-tabs button {
    padding: 10px 15px 14px;
    border-bottom: 3px solid transparent;
    color: #7a877e;
    font-size: 14px;
  }
  body.clothing-interface:not(.cash-workspace) .d2-document-tabs button.active {
    color: #244e41;
    border-bottom-color: #244e41;
  }
  body.clothing-interface:not(.cash-workspace) .owner-periods .secondary.selected {
    color: #fff;
    border-color: #244e41;
    background: #244e41;
  }
  body.clothing-interface:not(.cash-workspace) .clothing-stock-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
  }
  body.clothing-interface:not(.cash-workspace) .clothing-stock-toolbar .search {
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    min-width: min(100%, 260px);
    min-height: 48px;
    padding-left: 15px;
    background: #fff;
    color: #95a090;
    border: 1px solid #e4e8e1;
    border-radius: 9px;
  }
  body.clothing-interface:not(.cash-workspace) .clothing-stock-toolbar .search input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 12px 13px;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
  }
  body.clothing-interface:not(.cash-workspace) .clothing-stock-toolbar .search:focus-within {
    border-color: #628c78;
    box-shadow: 0 0 0 3px #608b7414;
  }
  body.clothing-interface:not(.cash-workspace) .card.clothing-stock-table-panel {
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
  }
  body.clothing-interface:not(.cash-workspace) .clothing-stock-table-panel .table-scroll {
    border-radius: 0;
  }
  body.clothing-interface:not(.cash-workspace) .clothing-stock-table-panel > button,
  body.clothing-interface:not(.cash-workspace) .clothing-stock-table-panel > .toolbar {
    margin: 18px 20px;
  }
  body.clothing-interface:not(.cash-workspace) .catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
    padding: 18px 0;
    color: #87928b;
    font-size: 13px;
  }
  /* Source: SalesHistory.tsx, stock.css receipt list and returns.css search. */
  body.clothing-interface .pos-history-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 230px;
    gap: 15px;
    margin-bottom: 22px;
    align-items: end;
  }
  body.clothing-interface .pos-history-toolbar label {
    display: block;
    min-width: 0;
    margin: 0;
    font-size: 12px;
  }
  body.clothing-interface .pos-history-toolbar label > select {
    width: 100%;
    margin-top: 5px;
  }
  body.clothing-interface .return-search {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    margin-top: 5px;
    padding: 0 13px;
    color: #8b9b80;
    background: #fff;
    border: 1px solid #e4e8e1;
    border-radius: 9px;
  }
  body.clothing-interface .return-search:focus-within {
    border-color: #7a9a6e;
    box-shadow: 0 0 0 3px #789b6210;
  }
  body.clothing-interface:not(.cash-workspace) .return-search input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
  }
  body.clothing-interface .history-period {
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
  }
  body.clothing-interface .history-period label {
    margin: 0;
  }
  body.clothing-interface .stock-receipt-list {
    display: grid;
    gap: 12px;
  }
  body.clothing-interface:not(.cash-workspace) .stock-receipt-card {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 18px 22px;
    justify-content: flex-start;
    text-align: left;
    gap: 18px;
    color: #263d35;
    background: #fff;
    border: 1px solid #e4e8e1;
    border-radius: 12px;
    font-size: 13px;
  }
  body.clothing-interface:not(.cash-workspace) .stock-receipt-card:hover:not(:disabled) {
    border-color: #9bb09c;
    background: #fcfdf9;
  }
  body.clothing-interface .stock-doc-icon {
    display: flex;
    flex: none;
    padding: 13px;
    border-radius: 10px;
    background: #f0f4eb;
    color: #67866a;
  }
  body.clothing-interface .stock-doc-icon .ui-icon {
    width: 21px;
    height: 21px;
  }
  body.clothing-interface .stock-receipt-name {
    flex: 1;
    min-width: 0;
  }
  body.clothing-interface .sales-history-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  body.clothing-interface .stock-receipt-card b {
    display: block;
    font-size: 15px;
    font-weight: 700;
  }
  body.clothing-interface .stock-receipt-card small {
    display: block;
    font-size: 12px;
    color: #879285;
    margin-top: 7px;
    overflow-wrap: anywhere;
  }
  body.clothing-interface .stock-receipt-sum {
    min-width: 145px;
    text-align: right;
  }
  body.clothing-interface .stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 11px;
    border-radius: 7px;
    background: #f4eddc;
    color: #8b763f;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }
  body.clothing-interface .stock-badge.posted {
    color: #3b7358;
    background: #eaf2e8;
  }
  body.clothing-interface .stock-badge.partial {
    color: #8e804c;
    background: #f3eedb;
  }
  body.clothing-interface .stock-badge.returned {
    color: #688366;
    background: #edf3e7;
  }
  body.clothing-interface .stock-badge.cancelled {
    color: #99705c;
    background: #f4eae3;
  }
  body.clothing-interface .sales-history-title .sales-history-discount {
    max-width: 100%;
    flex-wrap: wrap;
    gap: 4px;
    white-space: normal;
    text-align: left;
  }
  body.clothing-interface .sales-history-discount-amount {
    white-space: nowrap;
  }
  body.clothing-interface .sales-history-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 260px;
  }
  body.clothing-interface .stock-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 14px 0;
    color: #64786b;
    font-size: 13px;
  }
  body.clothing-interface .register-dialog.history-sale-dialog {
    position: fixed;
    width: min(1000px, calc(100vw - 40px));
    max-height: calc(100dvh - 40px);
    padding: 0;
    color: #263d35;
    background: #fff;
    border: 1px solid #cfdcca;
    border-radius: 14px;
    overflow: hidden;
  }
  body.clothing-interface .history-sale-dialog[open] {
    display: flex;
    flex-direction: column;
  }
  body.clothing-interface .history-sale-dialog::backdrop {
    background: #193c2d59;
    backdrop-filter: blur(3px);
  }
  body.clothing-interface .history-sale-dialog > .register-dialog-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 8px;
    color: #64786b;
    background: transparent;
    border-radius: 7px;
  }
  body.clothing-interface .history-sale-heading {
    flex: none;
    padding: 24px 68px 20px 24px;
    border-bottom: 1px solid #e2e8df;
  }
  body.clothing-interface .history-sale-heading h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.4;
  }
  body.clothing-interface .history-sale-heading p {
    margin: 8px 0 0;
    color: #879285;
    font-size: 12px;
  }
  body.clothing-interface .history-sale-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 24px;
  }
  body.clothing-interface .history-sale-content .commerce-receipt-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 0 0 18px;
    color: #64786b;
    font-size: 13px;
    line-height: 1.7;
  }
  body.clothing-interface .history-sale-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 12px;
  }
  body.clothing-interface .history-sale-dialog .pos-document {
    padding: 20px;
    background: #fff;
    border: 1px solid #e4e8e1;
    border-radius: 14px;
  }
  body.clothing-interface .history-sale-dialog .stock-table-scroll {
    overflow-x: auto;
  }
  body.clothing-interface .history-sale-dialog .stock-table {
    min-width: 480px;
  }
  body.clothing-interface .history-sale-dialog .pos-document-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid #e4e8e1;
    padding: 22px 10px 17px;
  }
  body.clothing-interface .history-sale-dialog .pos-document-summary > div {
    display: grid;
    gap: 8px;
    font-size: 14px;
  }
  body.clothing-interface .history-sale-dialog .pos-document-summary span,
  body.clothing-interface .history-sale-dialog .pos-document-summary small {
    color: #94a284;
    font-size: 12px;
  }
  body.clothing-interface .history-sale-dialog .pos-document-summary strong {
    font-size: 29px;
    white-space: nowrap;
    letter-spacing: -.7px;
  }
  body.clothing-interface .history-sale-actions {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid #e2e8df;
    background: #fff;
  }
  body.clothing-interface #sync-button {
    color: #667e6c;
    border-color: #e0e6dc;
    background: #fff;
  }
  body.clothing-interface #sync-button:hover:not(:disabled) {
    color: #284f3b;
    background: #f2f5ee;
  }
  body.clothing-interface:not(.cash-workspace) .safe-note,
  body.clothing-interface:not(.cash-workspace) .customer-picker,
  body.clothing-interface:not(.cash-workspace) .onboarding-shop {
    color: #667e6c;
    background: #f3f7ef;
    border-color: #dfe7d9;
  }
  body.clothing-interface:not(.cash-workspace) summary {
    color: #53694f;
  }

  /* Source: network.css login-screen/login-card; no second marketing column. */
  body.clothing-interface.locked {
    background: #f4f6f2;
  }
  body.clothing-interface.locked .topbar,
  body.clothing-interface.locked .app-footer {
    display: none;
  }
  body.clothing-interface.locked .topbar .store-switcher,
  body.clothing-interface.locked .sidebar-toggle {
    display: none;
  }
  body.clothing-interface.locked .auth-brand .brand-symbol {
    color: #244e41;
    background: transparent;
    border: 0;
  }
  body.clothing-interface.locked .app-main,
  body.clothing-interface.printing .app-main {
    width: 100%;
    margin-left: auto;
    max-width: 1400px;
  }
  body.clothing-interface.locked .app-main {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    max-width: none;
    padding: 24px;
  }
  body.clothing-interface.locked .app-footer,
  body.clothing-interface.printing .app-footer,
  body.clothing-interface.printing .topbar {
    margin-left: 0;
  }
  body.clothing-interface.locked #notice,
  body.clothing-interface.locked #update-banner,
  body.clothing-interface.printing #notice,
  body.clothing-interface.printing #update-banner {
    margin-left: 38px;
  }
  body.clothing-interface .auth-layout {
    display: block;
    width: min(480px, 100%);
    max-width: none;
    margin: 0;
    border-color: #e2e7df;
    border-radius: 20px;
    box-shadow: 0 18px 70px #173e2610;
  }
  body.clothing-interface .auth-intro {
    display: none;
  }
  body.clothing-interface:not(.cash-workspace) .auth-card {
    border: 0;
    border-radius: 20px;
    padding: 36px;
  }
  body.clothing-interface .login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 750;
    color: #235b44;
    margin-bottom: 32px;
  }
  body.clothing-interface .login-brand small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 4px;
  }
  body.clothing-interface:not(.cash-workspace) .auth-card h2 {
    margin-bottom: 6px;
    font-size: 24px;
    font-weight: 750;
  }
  body.clothing-interface:not(.cash-workspace) .auth-card p {
    color: #718075;
    line-height: 1.6;
  }
  body.clothing-interface:not(.cash-workspace) .auth-card label {
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    margin: 16px 0;
  }
  body.clothing-interface.registering .app-main {
    align-items: start;
    padding-block: 36px;
  }
  body.clothing-interface.registering .auth-layout {
    width: min(880px, 100%);
  }
  body.clothing-interface.registering .auth-card {
    padding: 32px 38px;
  }
  body.clothing-interface.registering #register-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
  }
  body.clothing-interface.registering #register-form > :not(label) {
    grid-column: 1 / -1;
  }

  /* Keep the explicit compact mode, rather than forcing it in the register. */
  @media (min-width: 801px) {
    body.clothing-interface.sidebar-collapsed {
      --sidebar-width: 76px;
    }
    body.clothing-interface.sidebar-collapsed .sidebar {
      padding: 0 10px 14px;
    }
    body.clothing-interface.sidebar-collapsed .sidebar-brand-row {
      justify-content: center;
      padding: 0;
    }
    body.clothing-interface.sidebar-collapsed .sidebar .brand > span:last-child,
    body.clothing-interface.sidebar-collapsed .sidebar-toggle-label,
    body.clothing-interface.sidebar-collapsed .navigation button > span,
    body.clothing-interface.sidebar-collapsed .sidebar-bottom {
      display: none;
    }
    body.clothing-interface.sidebar-collapsed .sidebar-toggle,
    body.clothing-interface.sidebar-collapsed .navigation button {
      justify-content: center;
      padding: 0;
    }
    body.clothing-interface.sidebar-collapsed .navigation {
      gap: 8px;
    }
    body.clothing-interface.sidebar-collapsed .sidebar-back {
      justify-content: center;
      padding: 0;
      font-size: 0;
    }
  }
  @media (min-width: 801px) and (max-width: 1100px) {
    body.clothing-interface .topbar {
      padding-left: 12px;
      padding-right: 12px;
      gap: 12px;
    }
    body.clothing-interface .topbar .store-switcher {
      flex-basis: 170px;
      min-width: 110px;
      max-width: 170px;
    }
    body.clothing-interface .breadcrumb > span:first-child {
      max-width: 160px;
    }
    body.clothing-interface .topbar .top-actions {
      gap: 8px;
    }
    body.clothing-interface .user-profile > div {
      display: block;
      max-width: 105px;
    }
    body.clothing-interface .app-main {
      padding: 28px 26px 40px;
    }
    body.clothing-interface.cash-workspace .app-main {
      padding: 0;
    }
    body.clothing-interface:not(.cash-workspace) .heading-actions button {
      min-height: 42px;
      padding: 0 14px;
      font-size: 12px;
    }
    body.clothing-interface:not(.cash-workspace) .card {
      padding: 22px;
    }
    body.clothing-interface #notice,
    body.clothing-interface #update-banner {
      margin-left: calc(var(--sidebar-width) + 26px);
      margin-right: 26px;
    }
  }
  @media (max-width: 800px) {
    body.clothing-interface .sidebar {
      width: min(290px, calc(100vw - 46px));
      padding: 0 12px 18px;
      box-shadow: 8px 0 32px #152c2526;
    }
    body.clothing-interface .sidebar-brand-row {
      padding: 0 8px;
    }
    body.clothing-interface .sidebar .brand {
      font-size: 23px;
    }
    body.clothing-interface .sidebar-toggle {
      display: none;
    }
    body.clothing-interface .sidebar .icon-button {
      color: #879580;
      background: transparent;
    }
    body.clothing-interface .sidebar .icon-button:hover:not(:disabled) {
      background: #f0f4ed;
    }
    body.clothing-interface .sidebar-backdrop,
    body.clothing-interface .sidebar-backdrop:hover:not(:disabled) {
      min-height: 100%;
      padding: 0;
      border-radius: 0;
      background: #152c255e;
      backdrop-filter: blur(2px);
    }
    body.clothing-interface .topbar {
      min-height: 70px;
      height: 70px;
      margin-left: 0;
      padding: 0 16px;
      gap: 12px;
    }
    body.clothing-interface .topbar .store-switcher {
      flex: 0 1 190px;
      min-width: 110px;
      width: 190px;
    }
    body.clothing-interface .breadcrumb {
      gap: 7px;
    }
    body.clothing-interface .breadcrumb > span:first-child,
    body.clothing-interface .breadcrumb-separator {
      display: none;
    }
    body.clothing-interface .top-actions {
      gap: 8px;
    }
    body.clothing-interface .top-actions .button-label,
    body.clothing-interface .user-profile {
      display: none;
    }
    body.clothing-interface #top-cash,
    body.clothing-interface #install-button {
      width: 36px;
      height: 36px;
      min-height: 36px;
      padding: 8px;
    }
    body.clothing-interface .app-main {
      width: 100%;
      margin-left: 0;
      padding: 26px 20px 38px;
    }
    body.clothing-interface.cash-workspace .app-main {
      padding: 0;
    }
    body.clothing-interface .app-footer {
      margin-left: 0;
      padding: 20px;
    }
    body.clothing-interface #notice,
    body.clothing-interface #update-banner,
    body.clothing-interface.cash-workspace #notice,
    body.clothing-interface.locked #notice,
    body.clothing-interface.locked #update-banner {
      margin-left: 20px;
      margin-right: 20px;
    }
    body.clothing-interface:not(.cash-workspace) .auth-card {
      padding: 36px;
    }
  }
  @media (max-width: 600px) {
    body.clothing-interface .topbar,
    body.clothing-interface.cash-workspace .topbar {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      height: auto;
      min-height: 0;
      padding: 10px 12px;
      gap: 8px;
    }
    body.clothing-interface #menu-toggle {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
    }
    body.clothing-interface .topbar .store-switcher {
      flex: 1 1 100%;
      min-width: 0;
      width: 100%;
      max-width: none;
      padding: 0;
    }
    body.clothing-interface .topbar .store-switcher select {
      font-size: 16px;
    }
    body.clothing-interface .topbar .breadcrumb {
      grid-column: 2;
      grid-row: 1;
      display: flex;
      width: 100%;
      max-width: 100%;
      flex-wrap: wrap;
      gap: 4px;
    }
    body.clothing-interface .breadcrumb > span:first-child {
      display: block;
      flex: 1 1 100%;
      max-width: 100%;
      font-size: 11px;
    }
    body.clothing-interface .breadcrumb strong,
    body.clothing-interface .breadcrumb-separator {
      display: none;
    }
    body.clothing-interface .topbar .top-actions {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100%;
      margin-left: 0;
      gap: 8px;
      justify-content: flex-end;
    }
    body.clothing-interface #connection-state {
      margin-right: auto;
      font-size: 10px;
      gap: 5px;
      width: auto;
      padding: 5px 0;
    }
    body.clothing-interface #connection-state::before {
      width: 6px;
      height: 6px;
      margin: 0;
    }
    body.clothing-interface .topbar #logout-button {
      min-width: 64px;
      min-height: 44px;
      font-size: 14px;
    }
    body.clothing-interface .app-main {
      padding: 24px 16px 32px;
    }
    body.clothing-interface:not(.cash-workspace) h1 {
      font-size: 27px;
      letter-spacing: -.9px;
    }
    body.clothing-interface:not(.cash-workspace) .workspace-heading .muted {
      font-size: 12px;
    }
    body.clothing-interface:not(.cash-workspace) .workspace-heading {
      margin-bottom: 24px;
    }
    body.clothing-interface:not(.cash-workspace) .card {
      padding: 20px 17px;
      border-radius: 12px;
    }
    body.clothing-interface:not(.cash-workspace) .metrics {
      gap: 12px;
    }
    body.clothing-interface:not(.cash-workspace) .metric {
      padding: 17px 15px;
    }
    body.clothing-interface:not(.cash-workspace) .metric-heading > span:first-child {
      font-size: 10px;
    }
    body.clothing-interface:not(.cash-workspace) .metric strong {
      font-size: 24px;
    }
    body.clothing-interface:not(.cash-workspace) .metric small {
      font-size: 9px;
    }
    body.clothing-interface:not(.cash-workspace) .toolbar > button,
    body.clothing-interface:not(.cash-workspace) .heading-actions button {
      min-height: 42px;
      padding: 0 14px;
      font-size: 12px;
    }
    body.clothing-interface:not(.cash-workspace) .toolbar input[type=date] {
      min-width: 0;
      padding: 10px;
      font-size: 12px;
    }
    body.clothing-interface:not(.cash-workspace) .auth-card {
      padding: 36px;
    }
    body.clothing-interface:not(.cash-workspace) .auth-card input {
      font-size: 16px;
    }
    body.clothing-interface.registering:not(.cash-workspace) .auth-card {
      padding: 24px;
    }
    body.clothing-interface.registering #register-form {
      grid-template-columns: 1fr;
      gap: 0;
    }
    body.clothing-interface.locked .topbar {
      padding-left: 18px;
      padding-right: 18px;
    }
    body.clothing-interface.locked .auth-brand {
      font-size: 21px;
    }
    body.clothing-interface .app-footer {
      padding: 18px 16px;
    }
    body.clothing-interface #notice,
    body.clothing-interface #update-banner,
    body.clothing-interface.cash-workspace #notice,
    body.clothing-interface.locked #notice,
    body.clothing-interface.locked #update-banner {
      margin-left: 16px;
      margin-right: 16px;
    }
  }
  @media (max-height: 740px) and (min-width: 801px) {
    body.clothing-interface .sidebar-bottom {
      display: none;
    }
  }
  @media (pointer: coarse) {
    body.clothing-interface .sidebar-toggle {
      min-height: 48px;
    }
    body.clothing-interface .navigation button {
      min-height: 54px;
    }
  }

  body.clothing-interface :is(button, a):focus-visible {
    outline: 3px solid #85a99a;
    outline-offset: 3px;
  }
  body.clothing-interface button:disabled {
    cursor: not-allowed;
    opacity: .45;
  }
  body.clothing-interface.cash-workspace .register-status #workspace-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: 9px;
    color: #64786b;
    font-size: 11px;
  }
  body.clothing-interface.cash-workspace .register-status #workspace-subtitle > .ui-icon {
    width: 15px;
    height: 15px;
  }
  body.clothing-interface.cash-workspace .register-status .register-demo {
    color: #856c35;
  }
  body.clothing-interface.cash-workspace .register-status #cash-history-button {
    min-height: 40px;
    padding: 0;
    color: #244e41;
    font-size: 11px;
    background: transparent;
    border: 0;
  }
  body.clothing-interface.cash-workspace #page-content > .register-last-sale {
    min-height: 36px;
    padding: 4px 20px;
    margin: 0;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid #e2e8df;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }
  body.clothing-interface.cash-workspace .register-last-sale .last-sale-label {
    margin-right: auto;
    color: #64786b;
    font-size: 11px;
    line-height: 1.5;
  }
  body.clothing-interface.cash-workspace .register-last-sale button {
    min-height: 28px;
    padding: 4px 6px;
    color: #244e41;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 11px;
  }
  body.clothing-interface.cash-workspace .register-last-sale button:hover:not(:disabled) {
    background: #edf4e7;
  }
  body.clothing-interface.cash-workspace .register-last-sale button .ui-icon {
    width: 15px;
    height: 15px;
  }
  /* Source: style.css .toast; successful notices no longer reflow the till. */
  body.clothing-interface #notice:not(.error) {
    position: fixed;
    inset: auto auto 28px 50%;
    z-index: 100;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 15px 23px;
    color: #fff;
    background: #254b3c;
    border: 0;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 4px 30px #16332425;
  }
  body.clothing-interface #notice:not(.error) > .ui-icon {
    width: 20px;
    height: 20px;
  }
}

/* BEGIN EXACT CLOTHING CATALOG: src/style.css, selectors scoped only. */
@media screen {

body.clothing-interface:not(.cash-workspace) .stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 15px;
}
body.clothing-interface:not(.cash-workspace) .stats.stats-without-telegram {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.clothing-interface:not(.cash-workspace) .stats > div {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
}
body.clothing-interface:not(.cash-workspace) .stats > div > span {
  font-size: 10px;
  color: #909b91;
}
body.clothing-interface:not(.cash-workspace) .stats strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 27px;
  letter-spacing: -1px;
  margin-top: 10px;
  font-weight: 700;
}
body.clothing-interface:not(.cash-workspace) .stats strong svg {
  color: #9aaa98;
  stroke-width: 1.2;
}
body.clothing-interface:not(.cash-workspace) .catalog-tools {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}
body.clothing-interface:not(.cash-workspace) .search {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding-left: 15px;
  flex: 1;
  color: #95a090;
}
body.clothing-interface:not(.cash-workspace) .search input {
  border: 0;
  background: none;
  margin: 0;
  font-size: 11px;
  box-shadow: none;
  min-height: 47px;
}
body.clothing-interface:not(.cash-workspace) .search button {
  padding: 0 12px;
}
body.clothing-interface:not(.cash-workspace) .filter-button {
  border: 1px solid var(--line);
  padding: 0 17px;
  background: white;
  border-radius: 9px;
  font-size: 11px;
  color: #6f7d70;
}
body.clothing-interface:not(.cash-workspace) .filter-button.is-on {
  background: #e5eddf;
  border-color: #9cb393;
}
body.clothing-interface:not(.cash-workspace) .view-switch {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  padding: 3px;
}
body.clothing-interface:not(.cash-workspace) .view-switch button {
  min-height: 40px;
  width: 42px;
  border-radius: 6px;
  color: #929d91;
}
body.clothing-interface:not(.cash-workspace) .view-switch .selected {
  background: #eaf0e5;
  color: #426341;
}
body.clothing-interface:not(.cash-workspace) .product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
}
body.clothing-interface:not(.cash-workspace) .product-card {
  display: block;
  text-align: left;
  background: white;
  border-radius: 13px;
  border: 1px solid var(--line);
  overflow: hidden;
  padding: 0;
  width: 100%;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
body.clothing-interface:not(.cash-workspace) .product-card:hover {
  transform: translateY(-3px);
  border-color: #bbcbb4;
}
body.clothing-interface:not(.cash-workspace) .product-visual {
  height: 204px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efeee7;
  color: #90927c;
  overflow: hidden;
}
body.clothing-interface:not(.cash-workspace) .product-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.clothing-interface:not(.cash-workspace) .tone-tops {
  background: #ecefe9;
  color: #7c927d;
}
body.clothing-interface:not(.cash-workspace) .tone-knitwear {
  background: #eee8de;
  color: #a28b67;
}
body.clothing-interface:not(.cash-workspace) .tone-trousers {
  background: #e9ecea;
  color: #667e77;
}
body.clothing-interface:not(.cash-workspace) .tone-dresses {
  background: #efe6df;
  color: #a77e68;
}
body.clothing-interface:not(.cash-workspace) .tone-outerwear {
  background: #eae8dd;
  color: #8e8b61;
}
body.clothing-interface:not(.cash-workspace) .tone-accessories {
  background: #eae5ee;
  color: #8d7d99;
}
body.clothing-interface:not(.cash-workspace) .category-badge {
  position: absolute;
  top: 13px;
  left: 14px;
  font-size: 9px;
  background: #ffffffb8;
  color: #6f7868;
  border-radius: 5px;
  padding: 5px 8px;
  letter-spacing: 0.2px;
  font-weight: 500;
}
body.clothing-interface:not(.cash-workspace) .no-photo {
  position: absolute;
  bottom: 12px;
  right: 13px;
  font-size: 8px;
  font-weight: 500;
  color: #8d9284;
}
body.clothing-interface:not(.cash-workspace) .product-body {
  padding: 17px 19px 10px;
}
body.clothing-interface:not(.cash-workspace) .product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9ca596;
  font-size: 9px;
  letter-spacing: 0.6px;
  margin-bottom: 7px;
}
body.clothing-interface:not(.cash-workspace) .visibility-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #c3c7bf;
}
body.clothing-interface:not(.cash-workspace) .visibility-dot.live {
  background: #84a278;
}
body.clothing-interface:not(.cash-workspace) .product-body h3 {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.2px;
  line-height: 1.5;
}
body.clothing-interface:not(.cash-workspace) .price {
  font-size: 16px;
  display: block;
  margin-top: 7px;
  font-weight: 750;
  letter-spacing: -0.4px;
}
body.clothing-interface:not(.cash-workspace) .size-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}
body.clothing-interface:not(.cash-workspace) .size-row span {
  font-size: 9px;
  border: 1px solid #e8ece3;
  border-radius: 4px;
  min-width: 25px;
  text-align: center;
  padding: 4px;
  color: #8c9785;
  font-weight: 500;
}
body.clothing-interface:not(.cash-workspace) .product-bottom {
  border-top: 1px solid #f0f2ec;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  font-size: 10px;
  color: #93a186;
}
body.clothing-interface:not(.cash-workspace) .product-bottom > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.clothing-interface:not(.cash-workspace) .open-arrow {
  color: #8a9a81;
}
body.clothing-interface:not(.cash-workspace) .product-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.clothing-interface:not(.cash-workspace) .product-list .product-card {
  display: flex;
}
body.clothing-interface:not(.cash-workspace) .product-list .product-visual {
  width: 140px;
  min-width: 140px;
  height: 140px;
}
body.clothing-interface:not(.cash-workspace) .product-list .garment {
  height: 110px;
}
body.clothing-interface:not(.cash-workspace) .product-list .category-badge,
body.clothing-interface:not(.cash-workspace) .product-list .no-photo {
  display: none;
}
body.clothing-interface:not(.cash-workspace) .product-list .product-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 16px 23px;
}
body.clothing-interface:not(.cash-workspace) .product-list .size-row,
body.clothing-interface:not(.cash-workspace) .product-list .product-bottom {
  margin: 0;
}
body.clothing-interface:not(.cash-workspace) .product-list .product-bottom {
  border: 0;
}
body.clothing-interface:not(.cash-workspace) .product-list .product-meta {
  margin: 0;
}
@media (min-width: 1600px) {
  body.clothing-interface:not(.cash-workspace) .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1600px) {
  body.clothing-interface:not(.cash-workspace) .product-visual {
    height: 220px;
  }
}
@media (max-width: 1150px) {
  body.clothing-interface:not(.cash-workspace) .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1150px) {
  body.clothing-interface:not(.cash-workspace) .product-grid {
    gap: 15px;
  }
}
@media (max-width: 1150px) {
  body.clothing-interface:not(.cash-workspace) .product-visual {
    height: 174px;
  }
}
@media (max-width: 1150px) {
  body.clothing-interface:not(.cash-workspace) .product-list .product-body {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .stats {
    gap: 8px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .stats > div {
    padding: 15px 12px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .stats > div > span {
    font-size: 9px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .stats strong {
    font-size: 24px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .stats strong svg {
    display: none;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-visual {
    height: 160px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-body {
    padding: 12px 13px 7px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-body h3 {
    font-size: 12px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .category-badge {
    font-size: 8px;
    top: 9px;
    left: 9px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .no-photo {
    font-size: 7px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-meta {
    font-size: 8px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .size-row {
    gap: 3px;
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .size-row span {
    min-width: 22px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .price {
    font-size: 15px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .filter-button {
    font-size: 0;
    width: 48px;
    padding: 0;
    gap: 0;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .view-switch {
    display: none;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-list .product-visual {
    width: 100px;
    min-width: 100px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-list .product-body {
    gap: 5px;
    padding: 10px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-list .product-meta {
    display: none;
  }
}
@media (pointer: coarse) {
  body.clothing-interface:not(.cash-workspace) .view-switch button {
    min-width: 48px;
  }
}
body.clothing-interface:not(.cash-workspace) .filter-button {
  font-size: 14px;
}
body.clothing-interface:not(.cash-workspace) .search input {
  font-size: 14px;
}
body.clothing-interface:not(.cash-workspace) .product-body h3 {
  font-size: 16px;
}
body.clothing-interface:not(.cash-workspace) .price {
  font-size: 19px;
}
body.clothing-interface:not(.cash-workspace) .stats > div > span {
  font-size: 12px;
}
body.clothing-interface:not(.cash-workspace) .product-meta {
  font-size: 11px;
}
body.clothing-interface:not(.cash-workspace) .size-row span {
  font-size: 12px;
  min-width: 29px;
}
body.clothing-interface:not(.cash-workspace) .product-bottom {
  font-size: 12px;
  min-height: 39px;
}
body.clothing-interface:not(.cash-workspace) .category-badge {
  font-size: 10px;
}
body.clothing-interface:not(.cash-workspace) .no-photo {
  font-size: 9px;
}
body.clothing-interface:not(.cash-workspace) .product-visual {
  height: 190px;
}
body.clothing-interface:not(.cash-workspace) .product-body {
  padding-top: 17px;
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .filter-button {
    font-size: 0;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-body h3 {
    font-size: 13px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .product-visual {
    height: 150px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .stats > div > span {
    font-size: 10px;
  }
}
@media (max-width: 760px) {
  body.clothing-interface:not(.cash-workspace) .price {
    font-size: 17px;
  }
}
}
/* END EXACT CLOTHING CATALOG */

@media screen {
  /* Warehouse counts have three real measures; the gallery itself is unchanged. */
  body.clothing-interface:not(.cash-workspace) .stats.stats-without-telegram {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 26px;
  }
  body.clothing-interface:not(.cash-workspace) .product-grid {
    max-height: none;
    padding: 0;
    overflow: visible;
  }
  body.clothing-interface:not(.cash-workspace) .product-card:hover:not(:disabled) {
    background: #fff;
  }
  body.clothing-interface:not(.cash-workspace) .view-switch button:not(.selected) {
    background: transparent;
  }
  body.clothing-interface:not(.cash-workspace) .view-switch button:hover:not(:disabled) {
    background: #f0f4ed;
  }
  body.clothing-interface:not(.cash-workspace) .filter-button.is-on {
    background: #e5eddf;
    border-color: #9cb393;
  }
  @media (max-width: 1100px) {
    body.clothing-interface .stock-doc-icon {
      display: none;
    }
    body.clothing-interface .stock-receipt-sum {
      min-width: 115px;
    }
  }
  @media (max-width: 800px) {
    body.clothing-interface .pos-history-toolbar {
      grid-template-columns: 1fr;
    }
    body.clothing-interface:not(.cash-workspace) .stock-receipt-card {
      flex-wrap: wrap;
      gap: 12px;
      padding: 17px;
    }
    body.clothing-interface .stock-receipt-name {
      min-width: 50%;
    }
    body.clothing-interface .stock-receipt-sum {
      min-width: 80%;
      text-align: left;
    }
    body.clothing-interface .sales-history-badges {
      justify-content: flex-start;
      max-width: 100%;
    }
  }
  @media (max-width: 600px) {
    body.clothing-interface:not(.cash-workspace) .stats.stats-without-telegram {
      grid-template-columns: 1fr;
    }
    body.clothing-interface .history-period > input[type=date] {
      flex: 1 1 130px;
      min-width: 0;
      max-width: 100%;
    }
    body.clothing-interface .register-dialog.history-sale-dialog {
      width: calc(100vw - 24px);
      max-height: calc(100dvh - 24px);
    }
    body.clothing-interface .history-sale-heading {
      padding: 20px 60px 18px 18px;
    }
    body.clothing-interface .history-sale-content {
      padding: 18px;
    }
    body.clothing-interface .history-sale-dialog .pos-document {
      padding: 16px;
    }
    body.clothing-interface .history-sale-actions {
      padding: 14px 18px;
    }
    body.clothing-interface .history-sale-actions button {
      flex: 1 1 140px;
    }
    body.clothing-interface .history-sale-dialog .mobile-stacked-table,
    body.clothing-interface .history-sale-dialog .mobile-stacked-table tbody {
      display: block;
      width: 100%;
      min-width: 0;
    }
    body.clothing-interface .history-sale-dialog .mobile-stacked-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    body.clothing-interface .history-sale-dialog .mobile-stacked-table tbody tr {
      display: block;
      padding: 16px 0;
      border-bottom: 1px solid #e4e8e1;
    }
    body.clothing-interface .history-sale-dialog .mobile-stacked-table td {
      display: block;
      min-width: 0;
      padding: 8px 0;
      border: 0;
      overflow-wrap: anywhere;
    }
    body.clothing-interface .history-sale-dialog .mobile-stacked-table td[data-label] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 4px 12px;
      align-items: baseline;
      text-align: right;
    }
    body.clothing-interface .history-sale-dialog .mobile-stacked-table td[data-label]::before {
      content: attr(data-label);
      color: #7a877e;
      font-size: 12px;
      line-height: 1.5;
      text-align: left;
    }
  }
  body.clothing-interface.cash-workspace :is(.register-layout, .register-dialog) button:focus-visible {
    outline: 2px solid #789b67;
    outline-offset: 3px;
  }
}


/* Final rendered-reference spacing and responsive controls. */
@media screen {
  body.clothing-interface .sidebar .sidebar-copy { display:none; }
  body.clothing-interface .history-sale-dialog .stock-table td > small {
    display:block; margin-top:4px; font-size:12px; font-weight:500; color:#87928b;
  }
  body.clothing-interface .history-sale-dialog .history-sale-customer-phone {
    display:block; margin-top:4px;
  }
  body.clothing-interface .warehouse-product-visual > .ui-icon {
    width:100px; height:100px; stroke-width:1.2; opacity:.7;
  }
  body.clothing-interface .product-card .warehouse-product-barcode {
    display:block; margin-top:5px; color:#879285; font-size:11px; font-weight:500; line-height:1.5;
  }
  @media (max-width:600px) {
    body.clothing-interface .catalog-tools { display:flex; flex-wrap:wrap; gap:12px; }
    body.clothing-interface .catalog-tools .search { flex:1 0 100%; min-width:0; width:100%; }
    body.clothing-interface .catalog-tools .filter-button { flex:0 0 auto; min-width:132px; font-size:14px; white-space:nowrap; }
    body.clothing-interface .catalog-tools .view-switch { flex:0 0 auto; margin-left:auto; }
  }
}

/* Native product editing follows style.css .dialog.wide / .dialog-close.
   Existing catalog controls and their IDs remain inside the same form. */
@media screen {
  body.clothing-interface .product-grid .product-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    color: #263d35;
  }
  body.clothing-interface .product-card .price {
    color: #263d35;
  }
  body.clothing-interface .product-card .product-visual {
    flex: none;
  }
  body.clothing-interface .product-card .product-body {
    width: 100%;
  }
  body.clothing-interface .register-dialog.catalog-editor-dialog {
    position: fixed;
    width: min(880px, calc(100vw - 32px));
    max-height: 92dvh;
    padding: 0;
    color: #304637;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 20px 100px #172b3540;
    overflow: hidden;
  }
  body.clothing-interface .catalog-editor-dialog[open] {
    display: flex;
    flex-direction: column;
  }
  body.clothing-interface .catalog-editor-dialog::backdrop {
    background: #1d332e66;
    backdrop-filter: blur(3px);
  }
  body.clothing-interface .catalog-editor-dialog > button {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 10px;
    color: #304637;
    background: #ffffffed;
    border: 1px solid #e4e8df;
    border-radius: 50%;
  }
  body.clothing-interface .catalog-editor-dialog > button:hover:not(:disabled) {
    color: #244e41;
    background: #f2f5ee;
  }
  body.clothing-interface .catalog-editor-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  body.clothing-interface .catalog-editor-dialog #catalog-form {
    padding: 28px 30px 30px;
    margin: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.clothing-interface .catalog-editor-dialog #catalog-form > .section-head {
    min-height: 30px;
    padding-right: 52px;
    margin-bottom: 24px;
  }
  body.clothing-interface .catalog-editor-dialog #catalog-form h2 {
    margin: 0;
    color: #304637;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.6px;
  }
  body.clothing-interface .catalog-editor-dialog #catalog-form .form-grid {
    gap: 0 20px;
  }
  body.clothing-interface .catalog-editor-dialog .catalog-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e4e8e1;
  }
  body.clothing-interface .catalog-editor-dialog .catalog-editor-actions button {
    min-height: 48px;
    padding: 0 20px;
    font-size: 14px;
  }
  @media (max-width: 600px) {
    body.clothing-interface .catalog-editor-dialog #catalog-form {
      padding: 28px 20px 24px;
    }
    body.clothing-interface .catalog-editor-dialog #catalog-form > .section-head {
      padding-right: 48px;
    }
    body.clothing-interface .catalog-editor-dialog #catalog-form .form-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    body.clothing-interface .catalog-editor-dialog #catalog-form input:not([type=checkbox]) {
      font-size: 16px;
    }
    body.clothing-interface .catalog-editor-dialog .catalog-editor-actions button {
      flex: 1 1 140px;
    }
  }
}