@font-face {
    font-family: "Aristotelica Display";
    src: url("/assets/fonts/aristotelica-display-extralight.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    unicode-range: U+0000-002F, U+003A-00FF, U+0100-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-22FF, U+FB00-FB4F;
}

@font-face {
    font-family: "Aristotelica Display";
    src: url("/assets/fonts/aristotelica-display-demibold.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    unicode-range: U+0000-002F, U+003A-00FF, U+0100-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-22FF, U+FB00-FB4F;
}

@font-face {
    font-family: "Aristotelica Small Caps";
    src: url("/assets/fonts/aristotelica-smallcaps-regular.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    unicode-range: U+0000-002F, U+003A-00FF, U+0100-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-22FF, U+FB00-FB4F;
}

@font-face {
    font-family: "BC Alphapipe";
    src: url("/assets/fonts/bc-alphapipe-rb-bold.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    unicode-range: U+0000-002F, U+003A-00FF, U+0100-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-22FF, U+FB00-FB4F;
}

:root {
    --b2b-bg: #f5f7fc;
    --b2b-panel: #ffffff;
    --b2b-panel-soft: #f9fbff;
    --b2b-text: #141a33;
    --b2b-muted: #68708a;
    --b2b-line: #e1e6f2;
    --b2b-navy: #222c84;
    --b2b-purple: #7d36f0;
    --b2b-purple-strong: #6025c7;
    --b2b-blue: #2f7bec;
    --b2b-green: #72c90d;
    --b2b-green-strong: #4f9d08;
    --b2b-pink: #d11672;
    --b2b-yellow: #efb51b;
    --b2b-red: #d71920;
    --b2b-shadow: 0 18px 40px rgba(20, 26, 51, 0.09);
    --b2b-soft-shadow: 0 10px 24px rgba(20, 26, 51, 0.05);
    --font-ui: "Aristotelica Display", "Segoe UI", Arial, sans-serif;
    --font-heading: "Aristotelica Display", "Segoe UI", Arial, sans-serif;
    --font-brand: "BC Alphapipe", "Aristotelica Display", "Segoe UI", Arial, sans-serif;
    --font-number: "Segoe UI", Arial, sans-serif;
    --brand-strip: linear-gradient(90deg, var(--b2b-green), var(--b2b-blue), var(--b2b-purple), var(--b2b-pink), var(--b2b-yellow));
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--b2b-bg);
    color: var(--b2b-text);
    font-family: var(--font-ui) !important;
    font-weight: 500;
    letter-spacing: 0;
}

button,
input,
select,
textarea {
    font-family: var(--font-ui) !important;
    letter-spacing: 0;
}

.app-view,
.auth-view,
.card,
.btn,
.form-control,
.form-select,
.form-label,
.form-check-label,
.dropdown-menu,
.toast,
.workspace,
.cart-panel,
.customer-card,
.product-card {
    font-family: var(--font-ui) !important;
}

h1,
h2,
h3,
.product-title,
.topbar-brand strong,
.workspace-heading h2,
.cart-header h2 {
    font-family: var(--font-brand) !important;
}

.product-price,
.product-meta,
.customer-meta,
.customer-total strong,
.order-meta,
.order-total,
.order-status,
.pagination-actions,
.pagination-size,
.line-money,
#summary-products,
#summary-discounts,
#summary-total,
#cart-status,
.cart-item-meta,
input[type="number"] {
    font-family: var(--font-number) !important;
    font-variant-numeric: tabular-nums;
}

.form-label {
    color: var(--b2b-text);
    font-weight: 700;
}

.form-control,
.form-select,
.input-group-text {
    border-color: var(--b2b-line);
    color: var(--b2b-text);
}

.form-control,
.form-select {
    background-color: #ffffff;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(125, 54, 240, 0.58);
    box-shadow: 0 0 0 0.18rem rgba(125, 54, 240, 0.14);
}

.input-group-text {
    background: var(--b2b-panel-soft);
    color: var(--b2b-navy);
    font-weight: 700;
}

.form-check-input:checked {
    background-color: var(--b2b-purple);
    border-color: var(--b2b-purple);
}

.form-check-input:focus {
    border-color: rgba(125, 54, 240, 0.58);
    box-shadow: 0 0 0 0.18rem rgba(125, 54, 240, 0.14);
}

.auth-view {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(125, 54, 240, 0.08), rgba(47, 123, 236, 0.03) 46%, rgba(245, 247, 252, 0) 100%),
        var(--b2b-bg);
    position: relative;
}

.auth-view::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 6px;
    background: var(--brand-strip);
    z-index: 1;
}

.login-card {
    width: min(430px, 100%);
    border: 1px solid rgba(225, 230, 242, 0.94);
    border-radius: 8px;
    box-shadow: var(--b2b-shadow);
    overflow: hidden;
}

.login-card::before {
    content: "";
    display: block;
    height: 5px;
    background: var(--brand-strip);
}

.login-card .card-body {
    display: grid;
    gap: 18px;
    padding: 32px;
}

.brand-logo {
    display: block;
    object-fit: contain;
}

.brand-logo-login {
    width: min(306px, 100%);
    height: auto;
    margin: 0 auto 8px;
}

.brand-logo-topbar {
    width: 184px;
    height: auto;
    flex: 0 0 auto;
}

.login-card h1 {
    margin: 0 0 4px;
    font-size: 27px;
    color: var(--b2b-navy);
}

.login-card p {
    margin: 0 0 24px;
    color: var(--b2b-muted);
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-form .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.login-form .form-control {
    min-height: 46px;
    padding-inline: 14px;
    font-size: 16px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

.btn-primary {
    --bs-btn-bg: var(--b2b-purple);
    --bs-btn-border-color: var(--b2b-purple);
    --bs-btn-hover-bg: var(--b2b-purple-strong);
    --bs-btn-hover-border-color: var(--b2b-purple-strong);
    --bs-btn-active-bg: var(--b2b-purple-strong);
    --bs-btn-active-border-color: var(--b2b-purple-strong);
}

.btn-outline-primary {
    --bs-btn-color: var(--b2b-purple);
    --bs-btn-border-color: rgba(125, 54, 240, 0.72);
    --bs-btn-hover-bg: var(--b2b-purple);
    --bs-btn-hover-border-color: var(--b2b-purple);
    --bs-btn-active-bg: var(--b2b-purple-strong);
    --bs-btn-active-border-color: var(--b2b-purple-strong);
}

.btn-outline-secondary {
    --bs-btn-color: var(--b2b-navy);
    --bs-btn-border-color: #cfd7e8;
    --bs-btn-hover-bg: var(--b2b-navy);
    --bs-btn-hover-border-color: var(--b2b-navy);
}

.btn-success {
    --bs-btn-bg: var(--b2b-green);
    --bs-btn-border-color: var(--b2b-green);
    --bs-btn-hover-bg: var(--b2b-green-strong);
    --bs-btn-hover-border-color: var(--b2b-green-strong);
    --bs-btn-active-bg: var(--b2b-green-strong);
    --bs-btn-active-border-color: var(--b2b-green-strong);
    color: #173100;
}

.btn-light {
    --bs-btn-bg: #f6f8fc;
    --bs-btn-border-color: #e0e6f2;
    --bs-btn-hover-bg: #eef3fb;
    --bs-btn-hover-border-color: #d4ddea;
    color: var(--b2b-navy);
}

.app-view {
    min-height: 100vh;
}

.app-topbar {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 22px 17px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        var(--brand-strip) border-box;
    border: 0;
    border-bottom: 4px solid transparent;
    box-shadow: 0 6px 22px rgba(20, 26, 51, 0.07);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-brand,
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-dropdown {
    position: relative;
    flex: 0 0 auto;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 45;
    display: grid;
    min-width: 160px;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--b2b-line);
    border-radius: 8px;
    background: var(--b2b-panel);
    box-shadow: var(--b2b-shadow);
}

.nav-dropdown-item {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--b2b-navy);
    font-weight: 700;
    text-align: left;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
    background: var(--b2b-panel-soft);
}

.topbar-brand strong {
    display: block;
    line-height: 1.1;
    color: var(--b2b-navy);
}

.topbar-brand small {
    display: block;
    color: var(--b2b-muted);
}

.user-chip {
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 7px 10px;
    border: 1px solid var(--b2b-line);
    border-radius: 6px;
    color: var(--b2b-navy);
    background: #f9fbff;
    font-size: 13px;
    font-weight: 700;
}

#toggle-cart:not(.d-none) {
    display: none;
}

.workspace {
    width: min(1440px, calc(100vw - 32px));
    margin: 18px auto;
}

.workspace-narrow {
    width: min(1040px, calc(100vw - 32px));
}

.workspace-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.workspace-heading h2,
.cart-header h2 {
    margin: 0;
    color: var(--b2b-navy);
    font-family: var(--font-brand);
    font-size: 22px;
    font-weight: 700;
}

.workspace-heading p,
.cart-header p {
    margin: 3px 0 0;
    color: var(--b2b-muted);
}

.search-box {
    width: min(440px, 100%);
    position: relative;
}

.customer-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.customer-card,
.product-card,
.cart-panel {
    background: var(--b2b-panel);
    border: 1px solid var(--b2b-line);
    border-radius: 8px;
    box-shadow: var(--b2b-soft-shadow);
}

.customer-card {
    padding: 14px;
    text-align: left;
    color: inherit;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.customer-card:hover {
    border-color: rgba(125, 54, 240, 0.58);
    box-shadow: 0 12px 28px rgba(125, 54, 240, 0.12);
    transform: translateY(-1px);
}

.customer-card strong {
    display: block;
    min-height: 40px;
    margin-bottom: 8px;
    color: var(--b2b-navy);
    line-height: 1.25;
}

.customer-meta {
    display: grid;
    gap: 5px;
    color: var(--b2b-muted);
    font-size: 13px;
}

.customer-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--b2b-line);
}

.customer-total span {
    color: var(--b2b-muted);
}

.customer-total strong {
    min-height: auto;
    margin: 0;
    color: var(--b2b-purple);
}

.parameters-form {
    display: grid;
    gap: 12px;
}

.settings-section {
    padding: 16px;
    background: var(--b2b-panel);
    border: 1px solid var(--b2b-line);
    border-left: 4px solid rgba(125, 54, 240, 0.72);
    border-radius: 8px;
    box-shadow: var(--b2b-soft-shadow);
}

.settings-section:nth-of-type(2) {
    border-left-color: rgba(47, 123, 236, 0.72);
}

.settings-section:nth-of-type(3) {
    border-left-color: rgba(209, 22, 114, 0.72);
}

.settings-section:nth-of-type(4) {
    border-left-color: rgba(114, 201, 13, 0.72);
}

.settings-section h3 {
    margin: 0 0 12px;
    color: var(--b2b-navy);
    font-size: 16px;
    font-weight: 700;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: end;
}

.settings-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 18px;
}

.settings-switch {
    min-height: 38px;
    align-items: center;
    margin: 0;
}

.settings-footer {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--b2b-panel);
    border: 1px solid var(--b2b-line);
    border-radius: 8px;
    box-shadow: var(--b2b-soft-shadow);
}

.settings-footer span {
    color: var(--b2b-muted);
    font-size: 13px;
}

.orders-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr)) auto;
    gap: 8px;
    align-items: center;
}

.orders-list {
    display: grid;
    gap: 10px;
}

.order-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: var(--b2b-panel);
    border: 1px solid var(--b2b-line);
    border-radius: 8px;
    box-shadow: var(--b2b-soft-shadow);
}

.order-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.order-card h3 {
    margin: 0 0 6px;
    color: var(--b2b-navy);
    font-size: 16px;
    font-weight: 700;
}

.order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--b2b-muted);
    font-size: 13px;
}

.order-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.order-total {
    color: var(--b2b-purple);
    font-size: 20px;
    font-weight: 800;
    text-align: right;
}

.order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 4px 8px;
    border: 1px solid var(--b2b-line);
    border-radius: 999px;
    background: var(--b2b-panel-soft);
    color: var(--b2b-navy);
    font-size: 12px;
    font-weight: 700;
}

.order-detail {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--b2b-line);
}

.order-detail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--b2b-muted);
    font-size: 13px;
}

.order-items {
    display: grid;
    border: 1px solid var(--b2b-line);
    border-radius: 8px;
    overflow: hidden;
}

.order-item {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 90px repeat(5, minmax(98px, 0.7fr));
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--b2b-line);
    font-family: var(--font-number) !important;
    font-size: 12px;
}

.order-item:first-child {
    border-top: 0;
}

.order-item-header {
    background: var(--b2b-panel-soft);
    color: var(--b2b-navy);
    font-weight: 800;
}

.order-item-product {
    min-width: 0;
    font-family: var(--font-ui) !important;
}

.order-item-product strong {
    display: block;
    color: var(--b2b-navy);
    line-height: 1.25;
}

.order-item-product span {
    color: var(--b2b-muted);
}

.sales-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 16px;
    align-items: start;
}

.catalog-panel {
    min-width: 0;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--b2b-panel);
    border: 1px solid var(--b2b-line);
    border-radius: 8px;
    box-shadow: var(--b2b-soft-shadow);
}

.pagination-size,
.pagination-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--b2b-muted);
    font-size: 13px;
}

.pagination-size select {
    width: 82px;
}

.pagination-actions span {
    min-width: 104px;
    color: var(--b2b-navy);
    text-align: center;
    font-weight: 700;
}

.product-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 334px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.product-card:hover {
    border-color: rgba(47, 123, 236, 0.5);
    box-shadow: 0 12px 28px rgba(47, 123, 236, 0.12);
    transform: translateY(-1px);
}

.product-image {
    height: 150px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #ffffff, #f4f7fc);
    border-bottom: 1px solid var(--b2b-line);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-image .image-placeholder {
    color: #98a2b3;
    font-size: 13px;
    font-weight: 700;
}

.product-body {
    padding: 12px;
    display: grid;
    gap: 10px;
    flex: 1;
}

.product-title {
    min-height: 42px;
    margin: 0;
    color: var(--b2b-navy);
    line-height: 1.25;
    font-weight: 700;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--b2b-muted);
    font-size: 12px;
}

.product-price {
    font-size: 19px;
    color: var(--b2b-purple);
    font-weight: 700;
}

.add-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
    margin-top: auto;
}

.cart-panel {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 106px);
    display: flex;
    flex-direction: column;
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--b2b-line);
}

.cart-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-close {
    display: none;
}

.cart-items {
    padding: 12px;
    overflow: auto;
    display: grid;
    gap: 10px;
}

.cart-empty,
.empty-state {
    padding: 24px;
    border: 1px dashed #cfd7e8;
    border-radius: 8px;
    color: var(--b2b-muted);
    text-align: center;
    background: var(--b2b-panel-soft);
}

.cart-item {
    border: 1px solid var(--b2b-line);
    border-radius: 8px;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.cart-item-title {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.cart-item-title strong {
    color: var(--b2b-navy);
    line-height: 1.25;
}

.cart-item-title button {
    flex: 0 0 auto;
}

.cart-item-meta,
.line-money {
    color: var(--b2b-muted);
    font-size: 12px;
}

.cart-item-actions {
    display: grid;
    grid-template-columns: 90px 1fr 40px;
    gap: 8px;
}

.item-discount {
    display: grid;
    grid-template-columns: 86px 1fr 40px;
    gap: 8px;
}

.seller-tools {
    padding: 12px;
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--b2b-line);
    background: var(--b2b-panel-soft);
}

.tool-block {
    display: grid;
    gap: 6px;
}

.discount-row {
    display: grid;
    grid-template-columns: 108px 1fr 40px;
    gap: 8px;
}

.cart-summary {
    padding: 12px;
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--b2b-line);
    background: #fbfcff;
}

.summary-row,
.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.summary-row span,
.summary-total span {
    color: var(--b2b-muted);
}

.summary-total {
    padding-top: 8px;
    border-top: 1px solid var(--b2b-line);
    color: var(--b2b-navy);
    font-size: 19px;
    font-weight: 700;
}

.loading-line {
    min-height: 88px;
    display: grid;
    place-items: center;
    color: var(--b2b-purple);
}

.text-danger-soft {
    color: var(--b2b-red);
}

#toast-container > .toast-success {
    background-color: var(--b2b-green-strong);
}

#toast-container > .toast-error {
    background-color: var(--b2b-pink);
}

#toast-container > .toast-warning {
    background-color: var(--b2b-yellow);
}

#toast-container > .toast-info {
    background-color: var(--b2b-blue);
}

@media (max-width: 1120px) {
    #toggle-cart:not(.d-none) {
        display: inline-flex;
    }

    .cart-close {
        display: inline-flex;
    }

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

    .cart-panel {
        position: static;
        max-height: none;
    }

    .sales-grid:not(.cart-visible) .cart-panel {
        display: none;
    }

    .sales-grid.cart-visible .cart-panel {
        position: fixed;
        inset: 84px 12px 12px;
        z-index: 35;
        max-height: none;
        box-shadow: 0 24px 70px rgba(20, 26, 51, 0.24);
    }

    .sales-grid.cart-visible .cart-items {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .app-topbar,
    .workspace-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar-actions {
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
    }

    .nav-dropdown-menu {
        right: auto;
        left: 0;
    }

    .user-chip {
        max-width: 100%;
        flex: 1;
    }

    .workspace {
        width: min(100vw - 20px, 100%);
        margin: 10px auto;
    }

    .product-grid,
    .customer-list {
        grid-template-columns: 1fr;
    }

    .catalog-pagination,
    .orders-filters,
    .order-card,
    .order-summary {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .pagination-size,
    .pagination-actions {
        width: 100%;
        justify-content: space-between;
    }

    .pagination-actions span {
        min-width: auto;
    }

    .order-total {
        text-align: left;
    }

    .order-actions {
        justify-items: stretch;
    }

    .order-item,
    .order-item-header {
        grid-template-columns: 1fr;
    }

    .order-item-header {
        display: none;
    }

    .brand-logo-login {
        width: min(280px, 100%);
    }

    .brand-logo-topbar {
        width: 174px;
    }

    .settings-footer {
        align-items: stretch;
        flex-direction: column;
    }
}