:root {
    --tailor-font-family: 'Bahij_Uthman_Taha_Regular', Tahoma, "Segoe UI", Arial, sans-serif;
    --tailor-primary: #7c4dff;
    --tailor-primary-soft: #eee8ff;
    --tailor-primary-strong: #6236d9;
    --tailor-ink: #24213a;
    --tailor-muted: #70657e;
    --tailor-card-border: #ece8f3;
    --tailor-page-bg: #f8f9fb;
    --tailor-chart-soft: #d8cffb;
    --tailor-chart-mid: #8b7bd0;
    --tailor-chart-dark: #62549c;
}

/* Simple, one-sheet order entry */
.simple-order-page-header,
.simple-order-form {
    margin-left: auto;
    margin-right: auto;
    max-width: 1420px;
}

.simple-order-page-header {
    margin-bottom: .85rem;
}

.simple-order-page-header h1 {
    font-size: 1.35rem;
}

.simple-order-page-header p {
    font-size: .78rem;
    margin-top: .15rem;
}

.simple-order-form {
    display: grid;
    gap: .85rem;
}

.simple-order-form > .content-card {
    margin: 0;
    padding: .85rem;
}

.simple-order-meta {
    align-items: end;
    direction: rtl;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(280px, 1.6fr) minmax(280px, 1fr) auto;
}

.simple-order-meta .form-label {
    font-size: .82rem;
    margin-bottom: .3rem;
}

.simple-order-meta .form-control,
.simple-order-meta .system-date-display,
.simple-order-meta .system-date-toggle {
    min-height: 44px;
}

.label-with-action {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.label-with-action a {
    font-size: .75rem;
    text-decoration: none;
}

.simple-meta-customer .customer-picker-control > i {
    color: var(--tailor-muted);
    font-size: .95rem;
    pointer-events: none;
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.simple-meta-customer .customer-picker-input {
    padding-right: 2.35rem;
}

.simple-status-note {
    align-items: center;
    background: #fff9e8;
    border: 1px solid #f5df9d;
    border-radius: 8px;
    color: #795b00;
    display: flex;
    font-size: .78rem;
    gap: .4rem;
    min-height: 44px;
    padding: .6rem .75rem;
    white-space: nowrap;
}

.simple-products-title {
    margin-bottom: .65rem;
}

.simple-products-title h2 {
    font-size: 1rem;
}

.simple-order-products .order-items {
    gap: .8rem;
    max-width: none;
}

.simple-order-item {
    background: #fff;
    border: 1px solid #dce3f2;
    border-radius: 10px;
    box-shadow: none;
    padding: .75rem;
}

.simple-order-item .order-item-header {
    border-bottom: 1px solid #edf0f6;
    margin: 0 0 .65rem;
    padding-bottom: .5rem;
}

.simple-order-item .order-item-header strong {
    color: var(--tailor-ink);
    font-size: .95rem;
}

.simple-order-item .remove-order-item {
    font-size: .74rem;
    padding: .15rem .35rem;
    text-decoration: none;
}

.order-item-topline {
    align-items: end;
    direction: rtl;
    display: grid;
    gap: .65rem;
    grid-template-columns: 64px minmax(180px, .9fr) minmax(240px, 1.3fr);
    margin-bottom: .7rem;
}

.order-item-topline .product-field,
.order-item-topline .old-measurement-field {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
}

.order-item-topline .order-product-image {
    border-radius: 8px;
    height: 64px;
    min-height: 64px;
    width: 64px;
}

.order-item-topline .form-label {
    font-size: .78rem;
    margin-bottom: .25rem;
}

.order-item-topline .form-control,
.order-item-topline .form-select {
    min-height: 40px;
}

.tailor-paper-grid {
    align-items: stretch;
    background: #fbfcff;
    border: 1px solid #e5eaf4;
    border-radius: 9px;
    direction: rtl;
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 2fr);
    overflow: hidden;
}

.inline-measurement-sheet,
.inline-design-sheet {
    min-width: 0;
    padding: .7rem;
}

.inline-measurement-sheet {
    background: #fff;
    border-left: 1px solid #e5eaf4;
}

.simple-section-heading {
    align-items: center;
    color: var(--tailor-ink);
    display: flex;
    font-size: .88rem;
    font-weight: 800;
    gap: .4rem;
    margin-bottom: .55rem;
}

.simple-section-heading i {
    color: var(--tailor-primary);
    font-size: 1rem;
}

.measurement-empty,
.design-empty {
    align-items: center;
    color: var(--tailor-muted);
    display: flex;
    flex-direction: column;
    font-size: .76rem;
    gap: .3rem;
    justify-content: center;
    min-height: 112px;
    text-align: center;
}

.measurement-empty i,
.design-empty i {
    color: #a9b4cb;
    font-size: 1.4rem;
}

.measurement-product-block h3,
.order-design-section h3 {
    color: #4f5870;
    font-size: .75rem;
    font-weight: 800;
    margin: .35rem 0 .4rem;
}

.inline-measurement-grid {
    display: grid;
    gap: .42rem .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-measurement-field {
    min-width: 0;
}

.inline-measurement-field > label {
    align-items: center;
    display: flex;
    font-size: .72rem;
    font-weight: 700;
    justify-content: space-between;
    margin-bottom: .16rem;
}

.inline-measurement-field > label b {
    color: var(--tailor-danger);
    margin-right: .12rem;
}

.inline-measurement-field > label img {
    border: 1px solid #dce3f2;
    border-radius: 4px;
    height: 24px;
    object-fit: cover;
    width: 30px;
}

.measurement-input-wrap {
    align-items: stretch;
    display: flex;
    direction: ltr;
}

.measurement-input-wrap .form-control {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    font-size: .82rem;
    min-height: 35px;
    padding: .35rem .45rem;
    text-align: center;
}

.measurement-input-wrap > small {
    align-items: center;
    background: #f0f3f9;
    border: 1px solid #d8deeb;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    color: #6b7284;
    display: flex;
    font-size: .62rem;
    justify-content: center;
    min-width: 34px;
    padding: .2rem;
}

.simple-order-item .order-item-designs {
    border: 0;
    margin: 0;
    padding: 0;
}

.simple-order-item .order-design-section {
    border-bottom: 1px solid #edf0f6;
    margin: 0 0 .5rem;
    padding: 0 0 .5rem;
}

.simple-order-item .order-design-section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.order-design-option-grid {
    direction: rtl;
    display: grid;
    gap: .42rem;
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
}

.order-design-option-card {
    align-items: center;
    background: #fff;
    border: 1px solid #dce3f2;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .18rem;
    justify-content: center;
    min-height: 105px;
    overflow: hidden;
    padding: .38rem;
    position: relative;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.order-design-option-card:hover {
    border-color: #91a7df;
    transform: translateY(-1px);
}

.order-design-option-card input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.order-design-option-card:has(input:checked) {
    background: #edf4ff;
    border: 2px solid var(--tailor-primary);
    box-shadow: 0 0 0 2px rgba(65, 105, 225, .08);
    padding: calc(.38rem - 1px);
}

.sample-source-grid .order-design-option-card {
    font: inherit;
}

.sample-source-picker {
    position: relative;
}

.sample-source-trigger {
    align-items: center;
    background: #fff;
    border: 1px solid #d8deed;
    border-radius: 8px;
    color: var(--tailor-ink);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: .7rem;
    grid-template-columns: 1fr auto auto;
    padding: .7rem .85rem;
    text-align: right;
    width: 100%;
}

.sample-source-trigger > span:first-child {
    display: flex;
    gap: .45rem;
    align-items: center;
}

.sample-source-trigger-value {
    color: var(--tailor-primary);
    font-size: .78rem;
}

.sample-source-trigger-arrow {
    transition: transform .18s ease;
}

.sample-source-picker.is-open .sample-source-trigger {
    border-color: var(--tailor-primary);
    box-shadow: 0 0 0 3px rgba(65, 105, 225, .08);
}

.sample-source-picker.is-open .sample-source-trigger-arrow {
    transform: rotate(180deg);
}

.sample-source-menu {
    background: #fff;
    border: 1px solid #d8deed;
    border-radius: 10px;
    box-shadow: 0 14px 35px rgba(33, 47, 82, .16);
    inset-inline: 0;
    max-height: min(440px, 65vh);
    overflow-y: auto;
    padding: .7rem;
    position: absolute;
    top: calc(100% + .35rem);
    z-index: 1050;
}

.sample-source-tools {
    background: #fff;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr);
    padding-bottom: .7rem;
    position: sticky;
    top: 0;
    z-index: 4;
}

.sample-source-search-wrap {
    position: relative;
}

.sample-source-search-wrap > i {
    color: #7b849a;
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.sample-source-search-wrap .form-control {
    padding-right: 2.25rem;
}

.sample-source-no-results {
    align-items: center;
    color: #7b849a;
    display: flex;
    gap: .45rem;
    justify-content: center;
    min-height: 100px;
}

@media (max-width: 575.98px) {
    .sample-source-tools {
        grid-template-columns: 1fr;
    }
}

.sample-source-grid .order-design-option-card.is-selected {
    background: #edf4ff;
    border: 2px solid var(--tailor-primary);
    box-shadow: 0 0 0 2px rgba(65, 105, 225, .08);
    padding: calc(.38rem - 1px);
}

.design-check {
    align-items: center;
    background: var(--tailor-primary);
    border-radius: 50%;
    color: #fff;
    display: none;
    font-size: .65rem;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: .3rem;
    top: .3rem;
    width: 20px;
    z-index: 2;
}

.order-design-option-card:has(input:checked) .design-check {
    display: flex;
}

.sample-source-grid .order-design-option-card.is-selected .design-check {
    display: flex;
}

.order-design-option-card > img,
.design-line-art {
    align-items: center;
    background: #f8faff;
    border-radius: 6px;
    display: flex;
    height: 61px;
    justify-content: center;
    object-fit: contain;
    width: 78px;
}

.design-line-art svg {
    fill: none;
    height: 58px;
    stroke: #315fc5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 76px;
}

.order-design-option-card strong {
    color: var(--tailor-ink);
    font-size: .72rem;
    line-height: 1.25;
}

.order-design-option-card > small {
    color: var(--tailor-primary);
    direction: ltr;
    font-size: .63rem;
}

.order-cost-strip {
    align-items: end;
    background: #f8fafc;
    border: 1px solid #e5eaf4;
    border-radius: 8px;
    direction: rtl;
    display: grid;
    gap: .55rem;
    grid-template-columns: 80px minmax(120px, 1fr) minmax(120px, 1fr) minmax(150px, .9fr);
    margin-top: .65rem;
    padding: .55rem;
}

.order-cost-strip .order-field {
    grid-column: auto;
    grid-row: auto;
}

.order-cost-strip .form-label {
    font-size: .7rem;
    margin-bottom: .18rem;
}

.order-cost-strip .form-control {
    min-height: 36px;
}

.order-cost-strip input[readonly] {
    background: #eef2f8;
}

.order-cost-strip .order-line-total {
    align-items: center;
    background: #fff;
    border: 1px solid #dce3f2;
    border-radius: 7px;
    display: flex;
    justify-content: space-between;
    min-height: 56px;
    padding: .45rem .65rem;
}

.order-cost-strip .order-line-total > span {
    color: var(--tailor-muted);
    font-size: .7rem;
}

.order-cost-strip .order-line-total strong {
    color: var(--tailor-primary);
    font-size: .95rem;
}

.optional-note {
    margin-top: .55rem;
}

.optional-note summary {
    color: var(--tailor-primary);
    cursor: pointer;
    font-size: .74rem;
    font-weight: 700;
    list-style: none;
}

.optional-note summary::-webkit-details-marker {
    display: none;
}

.optional-note textarea {
    min-height: 62px;
}

.simple-finance-card .simple-section-heading {
    margin-bottom: .65rem;
}

.simple-finance-grid {
    align-items: end;
    direction: rtl;
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(7, minmax(105px, 1fr));
}

.simple-finance-grid .form-label,
.finance-discount-toggle label {
    font-size: .72rem;
    margin-bottom: .2rem;
}

.simple-finance-grid .form-control {
    min-height: 40px;
}

.finance-amount {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5eaf4;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 62px;
    padding: .4rem;
}

.finance-amount > span {
    color: var(--tailor-muted);
    font-size: .67rem;
}

.finance-amount strong {
    font-size: .9rem;
}

.finance-final {
    background: var(--tailor-primary-soft);
    border-color: #b9ccef;
}

.finance-final strong {
    color: var(--tailor-primary);
    font-size: 1.05rem;
}

.finance-remaining strong {
    color: #b26b00;
}

.finance-discount-toggle {
    align-items: center;
    display: flex;
    min-height: 40px;
}

.finance-discount-toggle .form-check-input {
    margin-left: .35rem;
}

.order-note-details {
    border-top: 1px solid #edf0f6;
    padding-top: .55rem;
}

.measurement-guide-preview {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5eaf4;
    border-radius: 8px;
    display: inline-flex;
    gap: .6rem;
    padding: .5rem;
}

.measurement-guide-preview img {
    border-radius: 6px;
    height: 80px;
    object-fit: contain;
    width: 110px;
}

@media (max-width: 1199.98px) {
    .tailor-paper-grid {
        grid-template-columns: minmax(250px, .85fr) minmax(0, 1.7fr);
    }

    .simple-finance-grid {
        grid-template-columns: repeat(4, minmax(110px, 1fr));
    }
}

@media (max-width: 991.98px) {
    .simple-order-meta {
        grid-template-columns: 1fr 1fr;
    }

    .simple-status-note {
        grid-column: 1 / -1;
    }

    .tailor-paper-grid {
        grid-template-columns: 1fr;
    }

    .inline-measurement-sheet {
        border-bottom: 1px solid #e5eaf4;
        border-left: 0;
    }

    .order-design-option-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .simple-order-meta,
    .order-item-topline,
    .order-cost-strip,
    .simple-finance-grid {
        grid-template-columns: 1fr;
    }

    .simple-status-note {
        grid-column: auto;
    }

    .order-item-topline .order-product-image {
        height: 72px;
        width: 100%;
    }

    .order-cost-strip .order-line-total {
        min-height: 48px;
    }

    .simple-order-form > .content-card,
    .simple-order-item {
        padding: .65rem;
    }
}

@media (max-width: 430px) {
    .inline-measurement-grid {
        grid-template-columns: 1fr;
    }

    .order-design-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

* {
    letter-spacing: 0;
}

.tailoring-app.font-bahij {
    --tailor-font-family: 'Bahij_Uthman_Taha_Regular', Tahoma, "Segoe UI", Arial, sans-serif;
}

.tailoring-app.font-zar {
    --tailor-font-family: 'XW_Zar_Bd_0', Tahoma, "Segoe UI", Arial, sans-serif;
}

.tailoring-app.font-khorramshahr {
    --tailor-font-family: 'xb-khoramshahr-bold-1_0', Tahoma, "Segoe UI", Arial, sans-serif;
}

.tailoring-app.font-qalam {
    --tailor-font-family: 'Al_Qalam_Quran_Majeed', Tahoma, "Segoe UI", Arial, sans-serif;
}

.tailoring-app.font-tahoma {
    --tailor-font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}

.tailoring-app.font-segoe-ui {
    --tailor-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.tailoring-app.font-arial {
    --tailor-font-family: Arial, Tahoma, "Segoe UI", sans-serif;
}

.tailoring-app.theme-purple {
    --tailor-primary: #7c4dff;
    --tailor-primary-soft: #eee8ff;
    --tailor-primary-strong: #6236d9;
    --tailor-card-border: #ece8f3;
    --tailor-page-bg: #f8f9fb;
    --tailor-chart-soft: #d8cffb;
    --tailor-chart-mid: #8b7bd0;
    --tailor-chart-dark: #62549c;
}

.tailoring-app.theme-emerald {
    --tailor-primary: #07875f;
    --tailor-primary-soft: #e5f7ef;
    --tailor-primary-strong: #056246;
    --tailor-card-border: #d7eee5;
    --tailor-page-bg: #f6fbf8;
    --tailor-chart-soft: #bfe9d5;
    --tailor-chart-mid: #40b987;
    --tailor-chart-dark: #08704f;
}

.tailoring-app.theme-blue {
    --tailor-primary: #2563eb;
    --tailor-primary-soft: #e8f0ff;
    --tailor-primary-strong: #1d4ed8;
    --tailor-card-border: #dce7fb;
    --tailor-page-bg: #f7faff;
    --tailor-chart-soft: #bfd4ff;
    --tailor-chart-mid: #6b97f6;
    --tailor-chart-dark: #264fbd;
}

.tailoring-app.theme-rose {
    --tailor-primary: #be3b67;
    --tailor-primary-soft: #fde8ef;
    --tailor-primary-strong: #9f274f;
    --tailor-card-border: #f3d9e2;
    --tailor-page-bg: #fff8fa;
    --tailor-chart-soft: #f7bfd1;
    --tailor-chart-mid: #d86b91;
    --tailor-chart-dark: #a82f58;
}

.tailoring-app.theme-amber {
    --tailor-primary: #b7791f;
    --tailor-primary-soft: #fff3d6;
    --tailor-primary-strong: #8f5714;
    --tailor-card-border: #f1dfbb;
    --tailor-page-bg: #fffaf0;
    --tailor-chart-soft: #f6dda6;
    --tailor-chart-mid: #dca13a;
    --tailor-chart-dark: #8f5f19;
}

.tailoring-app.theme-teal {
    --tailor-primary: #0f8b8d;
    --tailor-primary-soft: #e1f6f5;
    --tailor-primary-strong: #0a696b;
    --tailor-card-border: #cdebea;
    --tailor-page-bg: #f5fbfb;
    --tailor-chart-soft: #b9e6e5;
    --tailor-chart-mid: #49b5b7;
    --tailor-chart-dark: #0d7476;
}

.tailoring-app.theme-indigo {
    --tailor-primary: #4f46e5;
    --tailor-primary-soft: #e9e8ff;
    --tailor-primary-strong: #3730a3;
    --tailor-card-border: #dcdafd;
    --tailor-page-bg: #f8f8ff;
    --tailor-chart-soft: #c9c6fb;
    --tailor-chart-mid: #818cf8;
    --tailor-chart-dark: #4338ca;
}

.tailoring-app.theme-crimson {
    --tailor-primary: #b42345;
    --tailor-primary-soft: #fce8ed;
    --tailor-primary-strong: #8e1635;
    --tailor-card-border: #f3d4dc;
    --tailor-page-bg: #fff8fa;
    --tailor-chart-soft: #f5c0cf;
    --tailor-chart-mid: #d8607d;
    --tailor-chart-dark: #9e1d3c;
}

.tailoring-app.theme-slate {
    --tailor-primary: #475569;
    --tailor-primary-soft: #eaf0f5;
    --tailor-primary-strong: #334155;
    --tailor-card-border: #d8e0e8;
    --tailor-page-bg: #f8fafc;
    --tailor-chart-soft: #cbd5e1;
    --tailor-chart-mid: #94a3b8;
    --tailor-chart-dark: #475569;
}

.tailoring-app.theme-lime {
    --tailor-primary: #5e8c19;
    --tailor-primary-soft: #f0f8df;
    --tailor-primary-strong: #476c12;
    --tailor-card-border: #dcecc1;
    --tailor-page-bg: #fbfdf7;
    --tailor-chart-soft: #d5eeb0;
    --tailor-chart-mid: #9acb55;
    --tailor-chart-dark: #5a8519;
}

body.tailoring-app {
    background: var(--tailor-page-bg);
    color: var(--tailor-ink);
    direction: rtl;
    font-family: var(--tailor-font-family);
    min-height: 100vh;
    text-align: right;
}

button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.table {
    font-family: var(--tailor-font-family);
}

a {
    color: var(--tailor-primary);
    text-decoration: none;
}

a:hover {
    color: var(--tailor-primary-strong);
}

.dropdown-menu,
.table,
.form-control,
.btn,
.card,
.list-group-item {
    text-align: right;
}

.text-end {
    text-align: left !important;
}

.layout-sidebar-large .main-header .logo {
    align-items: center;
    display: flex;
    height: 80px;
    justify-content: center;
    margin-left: 1rem;
    min-width: 132px;
    padding: 0 16px;
    width: 132px;
}

.main-header .logo a,
.main-header .logo .shop-logo-link {
    align-items: center;
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(35, 24, 61, .05);
    display: inline-flex;
    height: 58px;
    justify-content: center;
    overflow: hidden;
    padding: .35rem .55rem;
    width: 96px;
}

.layout-sidebar-large .main-header .logo img.app-logo,
.main-header .logo .app-logo,
.search-header .app-logo,
.search-ui .search-header .app-logo {
    display: block;
    height: 46px;
    margin: 0;
    max-width: 84px;
    object-fit: contain;
    width: 100%;
}

.brand-mark {
    align-items: center;
    background: var(--tailor-primary-soft);
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    color: var(--tailor-primary);
    display: inline-flex;
    font-family: var(--tailor-font-family);
    font-size: 1.65rem;
    font-weight: 700;
    height: 58px;
    justify-content: center;
    line-height: 1;
    min-width: 58px;
    padding: .25rem .6rem;
}

.header-brand-mark {
    height: 54px;
    min-width: 64px;
}

.shop-logo-link .header-brand-mark {
    background: transparent;
    border: 0;
    box-shadow: none;
    height: 46px;
    min-width: 52px;
    padding: 0;
}

.main-header .header-shop-name {
    color: var(--tailor-ink);
    display: block;
    flex: 0 1 auto;
    font-family: var(--tailor-font-family);
    font-size: clamp(1.45rem, 1.7vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-left: 1.35rem;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-header .header-shop-name:hover,
.main-header .header-shop-name:focus {
    color: var(--tailor-primary);
    text-decoration: none;
}

@media (max-width: 1199.98px) {
    .main-header .header-shop-name {
        font-size: 1.4rem;
        margin-left: .75rem;
        max-width: 190px;
    }
}

@media (max-width: 767.98px) {
    .main-header .header-shop-name {
        font-size: 1.15rem;
        margin-left: .4rem;
        max-width: 130px;
    }
}

@media (max-width: 430px) {
    .main-header .header-shop-name {
        font-size: 1rem;
        max-width: 92px;
    }
}

.main-header .search-bar input {
    font-family: var(--tailor-font-family);
    padding-left: 2.5rem;
    padding-right: 1rem;
    text-align: right;
}

.main-header .search-bar .search-icon {
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #8d849d;
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    left: 14px;
    outline: 0;
    padding: 0;
    right: auto;
    top: 7px;
    width: 36px;
}

.main-header .mega-menu .dropdown-menu {
    min-width: 720px;
}

/* Keep the mega menu's visual and reading order explicitly RTL.
   The introductory card is the first item and remains on the right. */
.main-header .mega-menu .dropdown-menu {
    direction: rtl;
    text-align: right;
}

.main-header .mega-menu .mega-menu-panel {
    direction: ltr;
    display: grid;
    grid-template-areas: "sections quick intro";
    grid-template-columns: minmax(270px, .9fr) minmax(360px, 1.15fr) minmax(360px, 1.05fr);
    margin: 0;
}

.main-header .mega-menu .mega-menu-panel > [class*="col-"] {
    direction: rtl;
    max-width: none;
    text-align: right;
    width: auto;
}

.main-header .mega-menu .mega-menu-intro {
    grid-area: intro;
}

.main-header .mega-menu .mega-menu-quick-links {
    grid-area: quick;
}

.main-header .mega-menu .mega-menu-sections {
    grid-area: sections;
}

.main-header .mega-menu .mega-menu-intro,
.main-header .mega-menu .mega-menu-intro .title,
.main-header .mega-menu .mega-menu-intro p {
    text-align: right;
}

.main-header .mega-menu .mega-menu-quick-links .text--cap,
.main-header .mega-menu .mega-menu-sections .text--cap {
    text-align: right;
}

.main-header .mega-menu .mega-menu-sections .links {
    direction: rtl;
    display: grid;
    gap: .15rem 1.4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: right;
}

.main-header .mega-menu .mega-menu-sections .links li,
.main-header .mega-menu .mega-menu-sections .links li a {
    min-width: 0;
    width: 100%;
}

.main-header .mega-menu .mega-menu-sections .links li a {
    margin-bottom: 0;
    padding: .35rem 0;
}

.main-header .mega-menu .mega-menu-quick-links .menu-icon-grid {
    direction: rtl;
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: initial;
    width: 100% !important;
}

.main-header .mega-menu .mega-menu-quick-links .menu-icon-grid > a {
    align-items: center;
    border: 1px solid transparent;
    display: flex;
    flex-direction: row;
    gap: .55rem;
    justify-content: flex-start;
    min-height: 54px;
    padding: .65rem .55rem;
    text-align: right;
    white-space: nowrap;
    width: 100%;
}

.main-header .mega-menu .mega-menu-quick-links .menu-icon-grid > a i {
    font-size: 1.5rem;
    margin: 0;
}

@media (max-width: 767.98px) {
    .main-header .mega-menu .mega-menu-panel {
        grid-template-areas:
            "intro"
            "quick"
            "sections";
        grid-template-columns: 1fr;
    }

    .main-header .mega-menu .mega-menu-panel > [class*="col-"] {
        max-width: 100%;
        width: 100%;
    }

    .main-header .mega-menu .mega-menu-sections .links,
    .main-header .mega-menu .mega-menu-quick-links .menu-icon-grid {
        grid-template-columns: 1fr;
    }
}

.main-header .header-icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.feature-management-page {
    margin: 0 auto;
    max-width: 1450px;
}

.feature-management-header {
    align-items: flex-end;
}

.feature-eyebrow {
    align-items: center;
    background: var(--tailor-primary-soft);
    border-radius: 999px;
    color: var(--tailor-primary);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 800;
    gap: .35rem;
    margin-bottom: .5rem;
    padding: .3rem .7rem;
}

.feature-summary-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.feature-summary-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(35, 24, 61, .045);
    display: flex;
    gap: .8rem;
    min-height: 86px;
    padding: .85rem 1rem;
}

.feature-summary-icon {
    align-items: center;
    background: var(--tailor-primary-soft);
    border-radius: 10px;
    color: var(--tailor-primary);
    display: inline-flex;
    flex: 0 0 48px;
    font-size: 1.25rem;
    height: 48px;
    justify-content: center;
}

.feature-summary-card > div {
    display: grid;
    gap: .1rem;
}

.feature-summary-card small {
    color: var(--tailor-muted);
    font-size: .74rem;
}

.feature-summary-card strong {
    color: var(--tailor-ink);
    font-size: 1.3rem;
    line-height: 1.2;
}

.feature-summary-card.is-active .feature-summary-icon,
.feature-summary-card.is-safe .feature-summary-icon {
    background: #e8f8ef;
    color: #18864b;
}

.feature-summary-card.is-disabled .feature-summary-icon {
    background: #f3f1f6;
    color: #81788d;
}

.feature-information-banner {
    align-items: flex-start;
    background: #fff8e6;
    border: 1px solid #f2d995;
    border-radius: 12px;
    color: #76560a;
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
}

.feature-information-banner > i {
    font-size: 1.15rem;
    margin-top: .1rem;
}

.feature-information-banner > div {
    display: grid;
    gap: .2rem;
}

.feature-information-banner strong {
    color: #634600;
    font-size: .86rem;
}

.feature-information-banner span {
    font-size: .78rem;
    line-height: 1.65;
}

.advanced-feature-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.advanced-feature-card {
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(35, 24, 61, .045);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.advanced-feature-card.is-enabled {
    border-color: color-mix(in srgb, var(--tailor-primary) 42%, white);
    box-shadow: 0 10px 28px rgba(35, 24, 61, .075);
}

.advanced-feature-card.is-disabled {
    background: #fcfbfd;
}

.advanced-feature-header {
    align-items: flex-start;
    border-bottom: 1px solid #f0edf5;
    display: grid;
    gap: .75rem;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    padding: 1rem;
}

.advanced-feature-icon {
    align-items: center;
    background: var(--tailor-primary-soft);
    border-radius: 12px;
    color: var(--tailor-primary);
    display: inline-flex;
    font-size: 1.55rem;
    height: 54px;
    justify-content: center;
    transition: background .18s ease, color .18s ease;
    width: 54px;
}

.advanced-feature-card.is-disabled .advanced-feature-icon {
    background: #efedf2;
    color: #8c8495;
}

.advanced-feature-heading h2 {
    color: var(--tailor-ink);
    font-size: 1rem;
    margin: 0;
}

.advanced-feature-heading > p {
    color: var(--tailor-muted);
    font-size: .77rem;
    line-height: 1.65;
    margin: .4rem 0 0;
}

.feature-kind-badge {
    background: #f4f1fa;
    border-radius: 999px;
    color: #726680;
    font-size: .66rem;
    font-weight: 700;
    padding: .2rem .5rem;
}

.feature-status-badge {
    background: #edf9f1;
    border: 1px solid #c8ead4;
    border-radius: 999px;
    color: #187a43;
    font-size: .7rem;
    font-weight: 800;
    padding: .28rem .65rem;
    white-space: nowrap;
}

.advanced-feature-card.is-disabled .feature-status-badge {
    background: #f1eff3;
    border-color: #ded9e3;
    color: #746c7d;
}

.advanced-feature-body {
    display: grid;
    flex: 1 1 auto;
    gap: .65rem;
    padding: 1rem;
}

.advanced-feature-body h3 {
    color: var(--tailor-ink);
    font-size: .8rem;
    margin: 0;
}

.feature-role-list {
    display: grid;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-role-list li {
    align-items: flex-start;
    color: #564e61;
    display: flex;
    font-size: .76rem;
    gap: .45rem;
    line-height: 1.55;
}

.feature-role-list li i {
    color: #1b9958;
    font-size: .9rem;
    margin-top: .05rem;
}

.advanced-feature-card.is-disabled .feature-role-list li i {
    color: #98919f;
}

.feature-impact-note {
    align-items: flex-start;
    background: #faf8fc;
    border-radius: 8px;
    color: var(--tailor-muted);
    display: flex;
    font-size: .7rem;
    gap: .4rem;
    line-height: 1.55;
    margin-top: .15rem;
    padding: .6rem .7rem;
}

.feature-impact-note i {
    color: var(--tailor-primary);
    margin-top: .1rem;
}

.advanced-feature-footer {
    align-items: center;
    background: #fbfafd;
    border-top: 1px solid #f0edf5;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .8rem 1rem;
}

.advanced-feature-footer > div {
    display: grid;
    gap: .12rem;
}

.advanced-feature-footer strong {
    color: var(--tailor-ink);
    font-size: .75rem;
}

.advanced-feature-footer small {
    color: var(--tailor-muted);
    font-size: .67rem;
}

.advanced-feature-switch {
    cursor: pointer;
    flex: 0 0 auto;
    margin: 0;
    position: relative;
}

.advanced-feature-switch input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.feature-switch-track {
    background: #cfcad4;
    border-radius: 999px;
    display: block;
    height: 28px;
    padding: 3px;
    transition: background .18s ease;
    width: 52px;
}

.feature-switch-track > span {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(35, 24, 61, .22);
    display: block;
    height: 22px;
    transform: translateX(0);
    transition: transform .18s ease;
    width: 22px;
}

.advanced-feature-switch input:checked + .feature-switch-track {
    background: var(--tailor-primary);
}

.advanced-feature-switch input:checked + .feature-switch-track > span {
    transform: translateX(24px);
}

.advanced-feature-switch input:focus-visible + .feature-switch-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tailor-primary) 22%, transparent);
}

.feature-save-bar {
    align-items: center;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--tailor-card-border);
    border-radius: 12px;
    bottom: .7rem;
    box-shadow: 0 12px 32px rgba(35, 24, 61, .12);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding: .75rem 1rem;
    position: sticky;
    z-index: 1040;
}

.feature-save-bar > div:first-child {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.feature-save-bar > div:first-child > i {
    color: #198754;
    font-size: 1.25rem;
}

.feature-save-bar span {
    display: grid;
    gap: .12rem;
}

.feature-save-bar strong {
    color: var(--tailor-ink);
    font-size: .78rem;
}

.feature-save-bar small {
    color: var(--tailor-muted);
    font-size: .68rem;
}

@media (max-width: 991.98px) {
    .feature-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .advanced-feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .feature-management-header,
    .feature-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .feature-management-header .d-flex,
    .feature-save-bar > .d-flex {
        width: 100%;
    }

    .feature-management-header .btn,
    .feature-save-bar .btn {
        flex: 1 1 0;
    }
}

@media (max-width: 575.98px) {
    .feature-summary-grid {
        grid-template-columns: 1fr;
    }

    .advanced-feature-header {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .advanced-feature-icon {
        height: 48px;
        width: 48px;
    }

    .feature-status-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .advanced-feature-footer {
        align-items: flex-start;
    }
}

.layout-sidebar-large .main-header .header-part-right .user {
    align-items: center;
    display: flex;
    margin-right: 1.25rem;
    padding: 0;
}

.user-trigger {
    align-items: center;
    background: var(--tailor-primary-soft);
    border: 1px solid var(--tailor-card-border);
    border-radius: 50%;
    color: var(--tailor-primary);
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    width: 40px;
}

.user-trigger i {
    font-size: 24px;
}

.user-trigger:hover,
.user-trigger:focus {
    background: var(--tailor-primary);
    border-color: var(--tailor-primary);
    color: #fff;
    outline: 0;
}

.sidebar-left .navigation-left .nav-item .nav-item-hold,
.sidebar-left-secondary .childNav li.nav-item a {
    font-family: var(--tailor-font-family);
}

.layout-sidebar-large .sidebar-left {
    border-left: 1px solid #e7e2f3;
}

.layout-sidebar-large .sidebar-left .navigation-left {
    width: 120px;
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item {
    min-height: 112px;
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item .nav-item-hold {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 112px;
    padding: 14px 8px;
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item .nav-item-hold .nav-icon {
    font-size: 32px;
    height: 34px;
    line-height: 34px;
    margin: 0 auto 10px;
    width: 34px;
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item .nav-item-hold .nav-text {
    font-size: 14px;
    line-height: 1.25;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item.active,
.layout-sidebar-large .sidebar-left .navigation-left .nav-item:hover {
    background: #fff;
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item.active .triangle {
    border-color: transparent transparent var(--tailor-primary) transparent;
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item.active .nav-item-hold,
.layout-sidebar-large .sidebar-left .navigation-left .nav-item:hover .nav-item-hold {
    color: var(--tailor-primary);
}

.sidebar-left-secondary.open {
    border-left: 1px solid #ece8f3;
    box-shadow: 0 6px 18px rgba(35, 24, 61, .08);
    width: 250px;
}

[dir="rtl"] .layout-sidebar-large .sidebar-left-secondary.open {
    right: 120px;
}

.layout-sidebar-large .sidebar-left-secondary .childNav {
    padding: 1.25rem .85rem;
}

.layout-sidebar-large .sidebar-left-secondary .childNav li.nav-item {
    margin-bottom: .25rem;
}

.layout-sidebar-large .sidebar-left-secondary .settings-child-nav .settings-nav-heading {
    border-bottom: 1px solid var(--tailor-card-border);
    color: var(--tailor-primary);
    font-size: .82rem;
    font-weight: 700;
    list-style: none;
    margin: .85rem .25rem .5rem;
    padding: 0 0 .45rem;
}

.layout-sidebar-large .sidebar-left-secondary .settings-child-nav .settings-nav-heading:first-child {
    margin-top: 0;
}

.layout-sidebar-large .sidebar-left-secondary .settings-nav-heading span {
    align-items: center;
    display: flex;
    gap: .45rem;
}

.layout-sidebar-large .sidebar-left-secondary .settings-nav-heading .nav-icon {
    font-size: 17px;
}

.layout-sidebar-large .sidebar-left-secondary .childNav li.nav-item a {
    align-items: center;
    border-radius: 8px;
    color: #4d4658;
    display: flex;
    font-size: 14px;
    gap: .65rem;
    min-height: 46px;
    padding: .65rem .75rem;
}

.layout-sidebar-large .sidebar-left-secondary .childNav li.nav-item a .nav-icon {
    color: var(--tailor-primary);
    font-size: 20px;
    margin: 0 !important;
    width: 24px;
}

.layout-sidebar-large .sidebar-left-secondary .childNav li.nav-item a:hover,
.layout-sidebar-large .sidebar-left-secondary .childNav li.nav-item a.open {
    background: var(--tailor-primary-soft);
    color: var(--tailor-primary);
}

.main-content {
    padding: 2rem;
}

.breadcrumb {
    align-items: center;
    justify-content: flex-end;
}

.breadcrumb h1 {
    font-family: var(--tailor-font-family);
}

.text-primary,
.breadcrumb ul li a {
    color: var(--tailor-primary) !important;
}

.border-bottom-primary {
    border-bottom-color: var(--tailor-primary) !important;
}

.badge-primary {
    background-color: var(--tailor-primary);
}

.btn-primary {
    background-color: var(--tailor-primary);
    border-color: var(--tailor-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--tailor-primary-strong) !important;
    border-color: var(--tailor-primary-strong) !important;
}

.btn-outline-primary {
    border-color: var(--tailor-primary);
    color: var(--tailor-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--tailor-primary);
    border-color: var(--tailor-primary);
    color: #fff;
}

.card-icon-bg-primary .card-body i {
    color: color-mix(in srgb, var(--tailor-primary) 30%, #fff);
}

.card-icon-bg-primary .card-body .content .text-primary {
    color: var(--tailor-primary) !important;
}

.card,
.content-card,
.stat-card,
.mini-stat,
.auth-card {
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(35, 24, 61, .06);
}

.content-card {
    padding: 1.25rem;
}

a.content-card:hover {
    border-color: #d9cffb;
    box-shadow: 0 8px 24px rgba(124, 77, 255, .12);
}

.narrow-card {
    max-width: 760px;
}

.dashboard-icon-card .card-body {
    min-height: 120px;
}

.dashboard-icon-card .card-body i {
    color: color-mix(in srgb, var(--tailor-primary) 30%, #fff);
}

.dashboard-chart {
    height: 310px;
}

.page-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.55rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.page-header p {
    color: var(--tailor-muted);
    margin-bottom: 0;
}

.section-title {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-title h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.stat-card {
    display: grid;
    gap: .55rem;
    min-height: 122px;
    padding: 1rem;
}

.stat-card .stat-icon {
    align-items: center;
    background: var(--tailor-primary-soft);
    border-radius: 8px;
    color: var(--tailor-primary);
    display: inline-flex;
    font-size: 1.25rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.stat-card span,
.mini-stat span {
    color: var(--tailor-muted);
    font-size: .9rem;
}

.stat-card strong {
    font-size: 1.45rem;
    line-height: 1.15;
}

.mini-stat {
    display: grid;
    gap: .35rem;
    padding: .85rem;
}

.mini-stat strong {
    font-size: 1.05rem;
}

.accent-green {
    border-top: 4px solid #2f8f62;
}

.accent-blue {
    border-top: 4px solid #3276b8;
}

.accent-amber {
    border-top: 4px solid #d99a22;
}

.accent-rose {
    border-top: 4px solid #c05662;
}

.table-responsive {
    border-radius: 8px;
}

.table {
    margin-bottom: 0;
    vertical-align: middle;
}

.table thead th {
    background: #f8f7fb;
    border-bottom: 1px solid var(--tailor-card-border);
    color: #52495a;
    font-size: .86rem;
    font-weight: 700;
    padding: .8rem .9rem;
    white-space: nowrap;
}

.table tbody td {
    border-color: #f0edf7;
    padding: .85rem .9rem;
}

.table tbody tr:hover {
    background: #fcfbff;
}

.table .btn-group {
    gap: .25rem;
}

.table .btn-group > .btn {
    border-radius: 8px !important;
}

.empty-state {
    color: var(--tailor-muted);
    display: grid;
    gap: .45rem;
    justify-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.empty-state i {
    color: #b7adc8;
    font-size: 2rem;
}

.empty-state strong {
    color: var(--tailor-ink);
}

.badge {
    border-radius: 999px;
    font-weight: 700;
    padding: .4rem .7rem;
}

.status-badge {
    background: #eef4f0;
    color: #2f5943;
}

.status-pending {
    background: #fff3cd;
    color: #8a5a00;
}

.status-sewing {
    background: #dbeafe;
    color: #1d4f91;
}

.status-ready {
    background: #d1fae5;
    color: #0f6848;
}

.status-delivered {
    background: #e9ecef;
    color: #495057;
}

.status-cancelled {
    background: #f8d7da;
    color: #842029;
}

.detail-list {
    display: grid;
    gap: .75rem;
    margin-bottom: 0;
}

.detail-list dt {
    color: var(--tailor-muted);
    font-weight: 500;
}

.detail-list dd {
    margin-bottom: 0;
}

.form-label {
    color: #52495a;
    display: inline-block;
    font-weight: 700;
    margin-bottom: .35rem;
}

.required-star {
    color: #dc3545;
    font-weight: 800;
    margin-right: .25rem;
}

.form-control,
.form-select {
    border-color: #d7d2e7;
    border-radius: 8px;
    min-height: 42px;
}

.latin-number,
input[data-normalize-digits="1"],
input[inputmode="decimal"],
input[inputmode="numeric"],
input[type="number"] {
    direction: ltr;
    font-family: "Segoe UI", Arial, sans-serif;
    text-align: left;
    unicode-bidi: plaintext;
}

textarea.form-control {
    min-height: 110px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--tailor-primary);
    box-shadow: 0 0 0 .2rem rgba(124, 77, 255, .12);
}

.system-date-picker {
    position: relative;
}

.system-date-select-wrapper {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-month-select-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 360px;
}

.system-date-select {
    direction: ltr;
    min-width: 0;
    text-align: center;
}

.system-date-field {
    display: flex;
    gap: .45rem;
}

.system-date-display {
    background: #fff !important;
    cursor: pointer;
    direction: ltr;
    text-align: left;
}

.system-date-toggle {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 42px;
    justify-content: center;
    min-height: 42px;
    padding: 0;
}

.system-date-popover {
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(47, 36, 84, .14);
    padding: .85rem;
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    width: min(322px, calc(100vw - 2rem));
    z-index: 1060;
}

.system-date-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.system-date-header strong {
    color: var(--tailor-text);
    font-weight: 700;
}

.system-date-nav {
    border-radius: 8px;
    min-width: 34px;
}

.system-date-weekdays,
.system-date-grid {
    display: grid;
    gap: .3rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.system-date-weekdays {
    color: var(--tailor-muted);
    font-size: .78rem;
    margin-bottom: .35rem;
    text-align: center;
}

.system-date-day,
.system-date-empty,
.system-date-month {
    min-width: 0;
}

.system-date-day,
.system-date-month {
    background: #f8f7fb;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--tailor-text);
    min-height: 36px;
    padding: .35rem;
    transition: .15s ease;
}

.system-date-day:hover,
.system-date-month:hover {
    background: #fff8ec;
    border-color: var(--tailor-primary);
    color: var(--tailor-primary);
}

.system-date-day.is-today,
.system-date-month.is-today {
    border-color: #d4a24c;
}

.system-date-day.is-selected,
.system-date-month.is-selected {
    background: var(--tailor-primary);
    border-color: var(--tailor-primary);
    color: #fff;
}

.system-month-grid {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-date-footer {
    align-items: center;
    border-top: 1px solid #f0edf7;
    display: flex;
    justify-content: space-between;
    margin-top: .75rem;
    padding-top: .75rem;
}

.form-text {
    color: var(--tailor-muted);
}

.form-section {
    border-bottom: 1px solid #f0edf7;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.form-section:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
}

.form-section-title {
    align-items: center;
    color: var(--tailor-primary);
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    gap: .5rem;
    margin-bottom: .9rem;
}

.auth-page {
    align-items: center;
    background: linear-gradient(135deg, var(--tailor-page-bg) 0%, var(--tailor-primary-soft) 100%);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-panel {
    max-width: 420px;
    width: 100%;
}

.print-page {
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    margin: 0 auto;
    max-width: 920px;
    padding: 2rem;
}

.print-header {
    align-items: start;
    display: flex;
    justify-content: space-between;
}

.print-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.print-header p {
    margin-bottom: .15rem;
}

.print-logo {
    display: block;
    height: 72px;
    margin-bottom: .5rem;
    object-fit: contain;
    width: 72px;
}

.print-section {
    margin-bottom: 1.25rem;
}

.print-section h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.print-signatures {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4rem;
}

.print-signatures div {
    text-align: center;
}

.print-signatures span {
    border-top: 1px solid #222;
    display: block;
    margin-bottom: .5rem;
    min-height: 1px;
}

.receipt-note,
.receipt-preview-note {
    background: #f8f7fb;
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    color: var(--tailor-muted);
    margin-top: 1.25rem;
    padding: .75rem;
}

.shop-preview {
    display: grid;
    gap: .45rem;
}

.shop-preview h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: .5rem 0 0;
}

.shop-preview p {
    margin: 0;
}

.shop-preview-logo {
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    height: 96px;
    object-fit: contain;
    padding: .35rem;
    width: 96px;
}

.system-preview {
    gap: .65rem;
}

.font-preview {
    background: var(--tailor-primary-soft);
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    color: var(--tailor-ink);
    font-size: 1.25rem;
    line-height: 1.8;
    margin-top: .35rem;
    padding: .85rem;
}

.theme-preview {
    display: flex;
    gap: .4rem;
    margin-top: .35rem;
}

.theme-preview span {
    border-radius: 999px;
    display: block;
    height: 18px;
    width: 42px;
}

.theme-preview-purple span:nth-child(1) { background: #7c4dff; }
.theme-preview-purple span:nth-child(2) { background: #8b7bd0; }
.theme-preview-purple span:nth-child(3) { background: #eee8ff; }
.theme-preview-emerald span:nth-child(1) { background: #07875f; }
.theme-preview-emerald span:nth-child(2) { background: #40b987; }
.theme-preview-emerald span:nth-child(3) { background: #e5f7ef; }
.theme-preview-blue span:nth-child(1) { background: #2563eb; }
.theme-preview-blue span:nth-child(2) { background: #6b97f6; }
.theme-preview-blue span:nth-child(3) { background: #e8f0ff; }
.theme-preview-rose span:nth-child(1) { background: #be3b67; }
.theme-preview-rose span:nth-child(2) { background: #d86b91; }
.theme-preview-rose span:nth-child(3) { background: #fde8ef; }
.theme-preview-amber span:nth-child(1) { background: #b7791f; }
.theme-preview-amber span:nth-child(2) { background: #dca13a; }
.theme-preview-amber span:nth-child(3) { background: #fff3d6; }
.theme-preview-teal span:nth-child(1) { background: #0f8b8d; }
.theme-preview-teal span:nth-child(2) { background: #49b5b7; }
.theme-preview-teal span:nth-child(3) { background: #e1f6f5; }
.theme-preview-indigo span:nth-child(1) { background: #4f46e5; }
.theme-preview-indigo span:nth-child(2) { background: #818cf8; }
.theme-preview-indigo span:nth-child(3) { background: #e9e8ff; }
.theme-preview-crimson span:nth-child(1) { background: #b42345; }
.theme-preview-crimson span:nth-child(2) { background: #d8607d; }
.theme-preview-crimson span:nth-child(3) { background: #fce8ed; }
.theme-preview-slate span:nth-child(1) { background: #475569; }
.theme-preview-slate span:nth-child(2) { background: #94a3b8; }
.theme-preview-slate span:nth-child(3) { background: #eaf0f5; }
.theme-preview-lime span:nth-child(1) { background: #5e8c19; }
.theme-preview-lime span:nth-child(2) { background: #9acb55; }
.theme-preview-lime span:nth-child(3) { background: #f0f8df; }

.design-note {
    background: var(--tailor-primary-soft);
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    color: var(--tailor-muted);
    font-size: .9rem;
    margin-top: .25rem;
    padding: .75rem;
}

.dynamic-section {
    border-bottom: 1px solid #f0edf7;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.dynamic-section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.dynamic-section h3,
.compact-title h3 {
    font-size: .98rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}

.compact-title {
    margin-bottom: .75rem;
}

.detail-list-grid {
    grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr);
}

.summary-chip,
.selected-design-item {
    background: var(--tailor-primary-soft);
    border: 1px solid var(--tailor-card-border);
    border-radius: 999px;
    color: var(--tailor-ink);
    display: inline-flex;
    font-size: .85rem;
    margin: .15rem;
    padding: .25rem .55rem;
}

.selected-design-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.design-option-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.design-option-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: .45rem;
    justify-items: center;
    min-height: 132px;
    padding: .75rem;
    text-align: center;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.design-option-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.design-option-card:has(input:checked) {
    border-color: var(--tailor-primary);
    box-shadow: 0 0 0 .18rem rgba(124, 77, 255, .12);
}

.design-option-card:hover {
    border-color: var(--tailor-primary);
    transform: translateY(-1px);
}

.design-option-card img,
.design-option-preview img {
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    height: 72px;
    object-fit: cover;
    width: 92px;
}

.design-option-card strong {
    font-size: .92rem;
}

.design-option-card small {
    color: var(--tailor-muted);
    font-size: .78rem;
}

.design-option-icon {
    align-items: center;
    background: var(--tailor-primary-soft);
    border-radius: 8px;
    color: var(--tailor-primary);
    display: inline-flex;
    font-size: 1.5rem;
    height: 72px;
    justify-content: center;
    width: 92px;
}

.settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.settings-card {
    cursor: default;
}

.settings-card:hover {
    transform: none;
}

.design-option-preview {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.product-image-preview {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.product-image-preview img,
.product-thumb,
.product-title-image {
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    object-fit: cover;
}

.product-image-preview img {
    height: 72px;
    width: 92px;
}

.product-thumb {
    align-items: center;
    background: var(--tailor-primary-soft);
    color: var(--tailor-primary);
    display: inline-flex;
    font-size: 1.15rem;
    height: 44px;
    justify-content: center;
    width: 56px;
}

.product-title-block {
    align-items: center;
    display: flex;
    gap: .9rem;
}

.product-title-image {
    align-items: center;
    background: var(--tailor-primary-soft);
    color: var(--tailor-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.7rem;
    height: 76px;
    justify-content: center;
    width: 96px;
}

.print-subtitle {
    font-size: .95rem;
    font-weight: 700;
    margin: .75rem 0 .5rem;
}

.empty-state.compact {
    padding: 1rem;
}

.order-form-page-header,
.order-form-shell {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
}

.order-form-shell > .content-card {
    padding: 1rem 1.15rem;
}

.order-meta-grid {
    align-items: end;
    direction: rtl;
    display: grid !important;
    gap: .75rem;
    grid-template-areas: "customer date status";
    grid-template-columns: minmax(280px, 1.35fr) minmax(280px, 1.4fr) minmax(220px, .9fr);
    justify-content: stretch;
    margin-left: 0;
    margin-right: 0;
}

.order-meta-grid > [class*="col-"] {
    flex: initial;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.order-meta-grid .form-label {
    display: block;
    margin-bottom: .45rem;
    min-height: 22px;
    text-align: right;
}

.order-meta-grid .form-control,
.order-meta-grid .form-select,
.order-meta-grid .system-date-display {
    min-height: 54px;
}

.order-meta-grid .system-date-field {
    align-items: stretch;
}

.order-meta-grid .system-date-toggle {
    flex: 0 0 54px;
    min-height: 54px;
}

.order-meta-customer {
    grid-area: customer;
    min-width: 0;
}

.order-meta-date {
    grid-area: date;
    min-width: 0;
}

.order-meta-status {
    grid-area: status;
    min-width: 0;
}

.order-status-readonly {
    align-items: flex-start;
    background: #faf9fc;
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    justify-content: center;
    min-height: 54px;
    padding: .45rem .75rem;
}

.order-status-readonly small {
    color: var(--tailor-muted);
    font-size: .72rem;
    line-height: 1.35;
}

.customer-picker {
    position: relative;
}

.customer-picker-control {
    display: none;
    position: relative;
}

.customer-picker.is-enhanced .customer-picker-control {
    display: block;
}

.customer-source-select,
.customer-picker.is-enhanced > select {
    display: none !important;
}

.customer-picker-input {
    padding-left: .85rem;
    padding-right: .85rem;
    text-align: right;
}

.customer-picker-menu {
    background: #fff;
    border: 1px solid #bfc6d8;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(27, 31, 59, .08);
    box-sizing: border-box;
    display: block;
    left: 0;
    max-height: 240px;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: 58px;
    z-index: 1080;
}

.customer-picker-option {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eef0f5;
    border-radius: 0;
    box-sizing: border-box;
    color: var(--tailor-ink);
    direction: rtl;
    display: block !important;
    font-weight: 500;
    min-height: 40px;
    padding: .5rem .75rem;
    text-align: right;
    width: 100% !important;
}

.customer-picker-option:last-child {
    border-bottom: 0;
}

.customer-picker-option:hover,
.customer-picker-option:focus,
.customer-picker-option.active {
    background: #f8f7fb;
    color: var(--tailor-ink);
    outline: 0;
}

.customer-picker-option span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-picker-phone {
    color: var(--tailor-muted);
    direction: ltr;
    display: block;
    font-size: .76rem;
    margin-top: .12rem;
    text-align: right;
}

.customer-picker-option.active .customer-picker-name {
    color: var(--tailor-primary);
}

.customer-picker-more {
    background: #faf9fc;
    color: var(--tailor-muted);
    font-size: .75rem;
    padding: .55rem .75rem;
    text-align: center;
}

.customer-picker-empty {
    color: var(--tailor-muted);
    padding: .75rem;
    text-align: center;
}

.order-items {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    margin-left: auto;
    margin-right: auto;
    max-width: 1210px;
    width: 100%;
}

.order-item-row {
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    min-width: 0;
    padding: .85rem;
    width: 100%;
}

.compact-order-item {
    background: #fff;
    box-shadow: 0 6px 16px rgba(35, 24, 61, .045);
}

.order-item-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.order-item-header strong {
    font-size: 1rem;
}

.order-item-grid {
    align-items: end;
    display: grid;
    gap: .6rem;
    grid-template-columns: 92px minmax(150px, 1.25fr) minmax(180px, 1.6fr) minmax(76px, .55fr) minmax(110px, .8fr) minmax(110px, .8fr) minmax(110px, .75fr);
}

.order-field .form-label {
    font-size: .82rem;
    margin-bottom: .25rem;
}

.order-field .form-control,
.order-field .form-select {
    min-height: 38px;
}

.order-field textarea.form-control {
    min-height: 48px;
}

.product-preview-cell {
    align-self: stretch;
    grid-column: 1;
    grid-row: 1 / span 2;
}

.product-field {
    grid-column: 2;
    grid-row: 1;
}

.measurement-field {
    grid-column: 3;
    grid-row: 1;
}

.quantity-field {
    grid-column: 4;
    grid-row: 1;
}

.total-field {
    grid-column: 7;
    grid-row: 1;
}

.order-product-image {
    align-items: center;
    background: var(--tailor-primary-soft);
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    color: var(--tailor-primary);
    display: inline-flex;
    font-size: 1.45rem;
    height: 100%;
    justify-content: center;
    min-height: 82px;
    overflow: hidden;
    width: 82px;
}

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

.note-field {
    grid-column: 2 / -1;
    grid-row: 2;
}

.measurement-help {
    display: block;
    font-size: .72rem;
    line-height: 1.3;
    margin-top: .25rem;
}

.money-unit {
    color: var(--tailor-muted);
    font-size: .72rem;
    font-weight: 500;
}

.money-with-unit {
    align-items: baseline;
    direction: ltr;
    display: inline-flex;
    gap: .28rem;
}

.money-with-unit small {
    color: var(--tailor-muted);
    font-size: .66em;
    font-weight: 600;
}

.order-item-designs {
    border-top: 1px solid #f0edf7;
    margin-top: .75rem;
    padding-top: .75rem;
}

.order-design-section {
    margin-bottom: .75rem;
    padding-bottom: .75rem;
}

.order-design-section h3 {
    font-size: .86rem;
    margin-bottom: .45rem;
}

.order-design-option-grid {
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.order-design-option-card {
    min-height: 108px;
    padding: .55rem;
}

.order-design-option-card img,
.order-design-option-card .design-option-icon {
    height: 54px;
    width: 70px;
}

.order-design-option-card strong {
    font-size: .82rem;
}

.order-line-total {
    min-height: 58px;
    padding: .55rem;
}

.order-finance-grid {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.order-finance-grid .mini-stat {
    min-height: 68px;
    padding: .75rem;
}

.finance-note {
    grid-column: 1 / -1;
}

.finance-note textarea.form-control {
    min-height: 72px;
}

.order-discount-check {
    align-items: center;
    display: flex;
    min-height: 38px;
}

.order-discount-check .form-check-input {
    margin-left: .45rem;
}

.order-form-actions {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--tailor-card-border);
    border-radius: 10px;
    bottom: .75rem;
    box-shadow: 0 10px 28px rgba(35, 24, 61, .12);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding: .7rem .85rem;
    position: sticky;
    z-index: 1040;
}

.order-action-total {
    align-items: baseline;
    display: flex;
    gap: .65rem;
}

.order-action-total > span {
    color: var(--tailor-muted);
    font-size: .82rem;
}

.order-action-total strong {
    color: var(--tailor-primary);
    font-size: 1.1rem;
}

.status-management-card {
    display: grid;
    gap: .9rem;
}

.status-current-panel {
    background: #f8f7fb;
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    display: grid;
    gap: .35rem;
    padding: .85rem;
}

.status-current-panel span,
.status-current-panel small,
.status-log-item small,
.status-log-item em,
.status-timeline-item small {
    color: var(--tailor-muted);
}

.status-next-form,
.status-manual-form {
    display: grid;
    gap: .65rem;
}

.status-confirm-line {
    align-items: center;
    color: var(--tailor-muted);
    display: flex;
    font-size: .9rem;
    gap: .5rem;
    line-height: 1.6;
    margin: 0;
}

.status-timeline {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.status-timeline-item {
    border: 1px solid var(--tailor-card-border);
    border-radius: 8px;
    display: grid;
    gap: .25rem;
    min-height: 84px;
    padding: .7rem;
}

.status-timeline-item span {
    background: #d7d2e7;
    border-radius: 999px;
    display: block;
    height: 8px;
    width: 36px;
}

.status-timeline-item.done span {
    background: var(--tailor-primary);
}

.status-log-list {
    border-top: 1px solid #f0edf7;
    display: grid;
    gap: .55rem;
    padding-top: .85rem;
}

.status-log-item {
    background: #fcfbff;
    border: 1px solid #f0edf7;
    border-radius: 8px;
    display: grid;
    gap: .15rem;
    padding: .65rem;
}

.status-log-item em {
    font-style: normal;
}

.error-card {
    margin: 4rem auto;
    max-width: 640px;
    padding: 2.5rem;
}

.error-code {
    color: var(--tailor-primary);
    display: block;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
}

.error-card h1 {
    font-size: 1.6rem;
    font-weight: 700;
}

.error-card p {
    color: var(--tailor-muted);
    margin: .75rem auto 1.5rem;
    max-width: 460px;
}

.inventory-stat {
    color: inherit;
    display: flex;
    height: 100%;
    text-decoration: none;
}

.inventory-stat:hover {
    border-color: var(--tailor-primary);
    color: inherit;
    transform: translateY(-1px);
}

.inventory-alert-row,
.inventory-setting-row {
    align-items: center;
    border-bottom: 1px solid #f0edf7;
    color: inherit;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .7rem .25rem;
    text-decoration: none;
}

.inventory-alert-row:last-child,
.inventory-setting-row:last-child {
    border-bottom: 0;
}

.inventory-alert-row:hover {
    color: var(--tailor-primary);
}

.inventory-setting-row > div {
    display: grid;
    gap: .15rem;
}

.inventory-setting-row small {
    color: var(--tailor-muted);
}

.inventory-fabric-image {
    border: 1px solid var(--tailor-card-border);
    border-radius: 10px;
    display: block;
    height: 240px;
    object-fit: cover;
    width: 100%;
}

.inventory-line-card {
    background: #fbfcff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 10px;
    margin-bottom: .8rem;
    padding: .75rem;
}

.inventory-line-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.inventory-line-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.inventory-line-grid.sale-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.inventory-line-wide {
    grid-column: span 2;
}

@media (max-width: 1199.98px) {
    .inventory-line-grid,
    .inventory-line-grid.sale-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .inventory-line-grid,
    .inventory-line-grid.sale-grid {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-line-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .inventory-line-grid,
    .inventory-line-grid.sale-grid {
        grid-template-columns: 1fr;
    }

    .inventory-line-wide {
        grid-column: auto;
    }
}

.d-grid {
    display: grid !important;
}

.gap-1 {
    gap: .25rem !important;
}

.gap-2 {
    gap: .5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.row.g-2,
.row.g-3,
.row.g-4 {
    display: flex;
    flex-wrap: wrap;
}

.row.g-2 {
    margin-left: -.25rem;
    margin-right: -.25rem;
}

.row.g-3 {
    margin-left: -.5rem;
    margin-right: -.5rem;
}

.row.g-4 {
    margin-left: -.75rem;
    margin-right: -.75rem;
}

.row.g-2 > [class*="col-"] {
    padding-left: .25rem;
    padding-right: .25rem;
}

.row.g-3 > [class*="col-"] {
    padding-left: .5rem;
    padding-right: .5rem;
}

.row.g-4 > [class*="col-"] {
    padding-left: .75rem;
    padding-right: .75rem;
}

@media (max-width: 1199.98px) {
    .order-meta-grid {
        grid-template-areas:
            "customer date"
            "status status";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-item-grid {
        grid-template-columns: 82px repeat(2, minmax(0, 1fr));
    }

    .product-preview-cell {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .product-field {
        grid-column: 2 / -1;
        grid-row: 1;
    }

    .measurement-field {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .quantity-field,
    .price-field,
    .total-field {
        grid-column: auto;
        grid-row: auto;
    }

    .note-field {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 991.98px) {
    .main-content {
        padding: 1rem;
    }

    .page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .page-header .btn,
    .page-header > a.btn {
        width: 100%;
    }

    .table {
        min-width: 720px;
    }

    .order-form-page-header,
    .order-form-shell {
        max-width: 100%;
    }

    .order-meta-grid {
        grid-template-areas:
            "customer"
            "date"
            "status";
        grid-template-columns: 1fr;
    }

    .order-items {
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
    }

    .order-item-grid,
    .order-finance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-preview-cell {
        grid-row: span 2;
    }

    .note-field,
    .finance-note {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .content-card {
        padding: .95rem;
    }

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

    .order-items {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .product-preview-cell,
    .product-field,
    .measurement-field,
    .quantity-field,
    .price-field,
    .total-field,
    .note-field,
    .finance-note {
        grid-column: auto;
        grid-row: auto;
    }

    .order-product-image {
        height: 76px;
        width: 100%;
    }

    .product-title-block {
        align-items: flex-start;
    }

    .status-timeline {
        grid-template-columns: 1fr;
    }

    .system-date-popover {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .order-form-actions {
        align-items: stretch;
        bottom: .35rem;
        flex-direction: column;
    }

    .order-form-actions .d-flex {
        width: 100%;
    }

    .order-form-actions .btn {
        flex: 1 1 0;
    }
}

.production-stat {
    border-inline-start: 4px solid var(--tailor-primary);
}

.production-stat.warning { border-inline-start-color: #f59e0b; }
.production-stat.info { border-inline-start-color: #0ea5e9; }
.production-stat.danger { border-inline-start-color: #dc3545; }

.production-progress {
    background: #ece8f7;
    border-radius: 999px;
    height: 7px;
    min-width: 90px;
    overflow: hidden;
}

.production-progress.large { height: 13px; }

.production-progress > span {
    background: linear-gradient(90deg, var(--tailor-primary), var(--tailor-chart-dark));
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width .25s ease;
}

.production-order-unit {
    align-items: center;
    background: #faf9fd;
    border: 1px solid #e4def1;
    border-radius: .8rem;
    color: inherit;
    display: flex;
    justify-content: space-between;
    padding: .8rem 1rem;
}

.production-order-unit:hover {
    border-color: var(--tailor-primary);
    color: inherit;
    text-decoration: none;
}

.production-order-unit span { display: flex; flex-direction: column; }
.production-order-unit span:last-child { align-items: flex-end; }
.production-order-unit small { color: #766d82; }

.worker-capacity-row {
    border-bottom: 1px solid #ece8f3;
    padding: .8rem 0;
}

.worker-capacity-row:last-child { border-bottom: 0; }
.worker-capacity-row .progress { height: 8px; margin: .45rem 0; }

.quality-history-item {
    border-bottom: 1px solid #ece8f3;
    padding: .85rem 0;
}

.quality-history-item:last-child { border-bottom: 0; }

.quality-check-line {
    align-items: center;
    background: #faf9fd;
    border: 1px solid #ece8f3;
    border-radius: .65rem;
    display: flex;
    gap: .6rem;
    margin-bottom: .55rem;
    padding: .65rem .8rem;
}

.quality-check-line .form-check-input {
    margin: 0;
    position: static;
}

/* Company information, public about page and contact inbox */
.auth-page {
    flex-direction: column;
}

.auth-content-area {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    width: 100%;
}

.auth-content-inner {
    width: 100%;
}

.auth-page:not(.auth-page-about) .auth-content-inner {
    max-width: 420px;
}

.auth-page-about {
    align-items: stretch;
    padding: 0;
}

.auth-page-about .auth-content-area {
    align-items: stretch;
}

.company-footer {
    background: #fff;
    border-top: 1px solid var(--tailor-card-border);
    color: var(--tailor-muted);
    flex: 0 0 auto;
    padding: 1rem 1.5rem;
    width: 100%;
}

.company-footer-main {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.company-footer-main > div:first-child {
    display: grid;
    gap: .15rem;
}

.company-footer-main strong {
    color: var(--tailor-ink);
}

.company-footer-main span,
.company-footer-copy {
    font-size: .76rem;
}

.company-footer-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.company-footer-links a {
    color: var(--tailor-muted);
}

.company-footer-links a:hover,
.login-help-links a:hover {
    color: var(--tailor-primary);
}

.company-footer-copy {
    border-top: 1px solid #f0edf7;
    margin-top: .7rem;
    padding-top: .6rem;
    text-align: center;
}

.login-help-links a {
    color: var(--tailor-muted);
    font-size: .9rem;
}

.public-site-shell {
    margin: 0 auto;
    max-width: 1280px;
    padding: 1.25rem 2rem 3rem;
    width: 100%;
}

.public-site-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.public-company-brand {
    align-items: center;
    color: var(--tailor-ink);
    display: flex;
    gap: .75rem;
}

.public-company-brand:hover {
    color: var(--tailor-ink);
    text-decoration: none;
}

.public-company-brand img,
.company-brand-mark {
    align-items: center;
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 12px;
    display: flex;
    height: 54px;
    justify-content: center;
    object-fit: contain;
    width: 54px;
}

.company-brand-mark {
    color: var(--tailor-primary);
    font-size: 1.45rem;
    font-weight: 700;
}

.public-company-brand > span:last-child {
    display: grid;
}

.public-company-brand small {
    color: var(--tailor-muted);
    margin-top: .15rem;
}

.company-page-header {
    margin-bottom: 1.25rem;
}

.company-hero {
    align-items: center;
    background: linear-gradient(135deg, #fff 0%, var(--tailor-primary-soft) 100%);
    border: 1px solid var(--tailor-card-border);
    border-radius: 18px;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    min-height: 410px;
    overflow: hidden;
    padding: 3.25rem;
    position: relative;
}

.company-hero::before {
    background: var(--tailor-primary);
    border-radius: 999px;
    content: '';
    filter: blur(2px);
    height: 220px;
    left: -90px;
    opacity: .06;
    position: absolute;
    top: -80px;
    width: 220px;
}

.company-eyebrow {
    color: var(--tailor-primary);
    display: block;
    font-size: .84rem;
    font-weight: 700;
    margin-bottom: .55rem;
}

.company-hero h2 {
    color: var(--tailor-ink);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 1rem;
}

.company-hero-copy > p {
    color: var(--tailor-muted);
    font-size: 1.08rem;
    line-height: 2;
    margin-bottom: 1.5rem;
    max-width: 720px;
}

.company-hero-visual {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
}

.company-hero-visual > div {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--tailor-card-border);
    border-radius: 14px;
    box-shadow: 0 16px 35px rgba(35, 24, 61, .08);
    color: var(--tailor-muted);
    display: flex;
    flex-direction: column;
    gap: .45rem;
    justify-content: center;
    min-height: 105px;
    padding: .75rem;
}

.company-hero-visual > div i {
    color: var(--tailor-primary);
    font-size: 1.65rem;
}

.company-hero-visual .company-system-icon {
    background: var(--tailor-primary);
    color: #fff;
    grid-column: 1 / -1;
    min-height: 165px;
}

.company-hero-visual .company-system-icon i {
    color: #fff;
    font-size: 4.5rem;
}

.company-hero-visual.company-brand-showcase {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.company-logo-card {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--tailor-card-border);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(35, 24, 61, .07);
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    min-height: 140px;
    padding: 1rem 1.35rem;
}

.company-logo-card img {
    display: block;
    height: auto;
    max-height: 78px;
    max-width: min(100%, 280px);
    object-fit: contain;
}

.company-logo-card-system img {
    max-height: 92px;
}

.company-logo-card figcaption {
    color: var(--tailor-muted);
    font-size: .82rem;
    font-weight: 700;
    margin-top: .65rem;
    text-align: center;
}

.company-brand-connector {
    align-items: center;
    color: var(--tailor-primary);
    display: flex;
    font-size: .82rem;
    font-weight: 700;
    gap: .45rem;
    justify-content: center;
    padding: .15rem;
}

.company-brand-connector i {
    font-size: 1.15rem;
}

.company-section {
    padding: 4.5rem 0 0;
}

.company-section-heading {
    margin: 0 auto 1.75rem;
    max-width: 780px;
    text-align: center;
}

.company-section-heading h2,
.company-services-card h2 {
    color: var(--tailor-ink);
    font-size: 1.75rem;
    font-weight: 800;
}

.company-section-heading p,
.company-services-card p {
    color: var(--tailor-muted);
    line-height: 2;
    margin: .75rem 0 0;
}

.company-feature-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.company-feature-grid article {
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 14px;
    padding: 1.5rem;
    transition: transform .18s ease, box-shadow .18s ease;
}

.company-feature-grid article:hover {
    box-shadow: 0 18px 35px rgba(35, 24, 61, .07);
    transform: translateY(-2px);
}

.company-feature-grid article > i {
    align-items: center;
    background: var(--tailor-primary-soft);
    border-radius: 12px;
    color: var(--tailor-primary);
    display: flex;
    font-size: 1.45rem;
    height: 48px;
    justify-content: center;
    margin-bottom: 1rem;
    width: 48px;
}

.company-feature-grid h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

.company-feature-grid p {
    color: var(--tailor-muted);
    line-height: 1.8;
    margin: .55rem 0 0;
}

.company-services-section {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-services-card,
.company-services-list {
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 14px;
    padding: 2rem;
}

.company-services-list {
    background: var(--tailor-primary);
    color: #fff;
}

.company-services-list h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.company-services-list > div {
    line-height: 2.25;
}

.company-contact-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr);
}

.company-contact-cards {
    display: grid;
    gap: .75rem;
}

.company-contact-cards > a,
.company-contact-cards > div:not(.company-social-links) {
    align-items: center;
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 12px;
    color: var(--tailor-ink);
    display: flex;
    gap: .9rem;
    min-height: 76px;
    padding: .9rem 1rem;
}

.company-contact-cards > a:hover {
    border-color: var(--tailor-primary);
    color: var(--tailor-primary);
    text-decoration: none;
}

.company-contact-cards > a > i,
.company-contact-cards > div:not(.company-social-links) > i {
    align-items: center;
    background: var(--tailor-primary-soft);
    border-radius: 10px;
    color: var(--tailor-primary);
    display: flex;
    flex: 0 0 44px;
    font-size: 1.2rem;
    height: 44px;
    justify-content: center;
}

.company-contact-cards span {
    display: grid;
    min-width: 0;
}

.company-contact-cards small {
    color: var(--tailor-muted);
}

.company-contact-cards strong {
    overflow-wrap: anywhere;
}

.company-social-links {
    display: flex;
    gap: .6rem;
}

.company-social-links a {
    align-items: center;
    background: var(--tailor-primary);
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-size: 1.15rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.company-contact-form {
    background: #fff;
    border: 1px solid var(--tailor-card-border);
    border-radius: 14px;
    padding: 1.5rem;
}

.company-contact-form h3 {
    font-size: 1.25rem;
    font-weight: 700;
}

.company-contact-form > p {
    color: var(--tailor-muted);
    line-height: 1.8;
}

.company-message-filter select {
    max-width: 240px;
}

.company-message-list {
    display: grid;
    gap: 1rem;
}

.company-message-card.is-new {
    border-inline-start: 4px solid #dc3545;
}

.company-message-head {
    align-items: start;
    display: flex;
    justify-content: space-between;
}

.company-message-head h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.company-message-head p {
    color: var(--tailor-muted);
    font-size: .82rem;
    margin: 0;
}

.company-message-body {
    border-bottom: 1px solid #f0edf7;
    border-top: 1px solid #f0edf7;
    line-height: 1.9;
    margin: 1rem 0;
    padding: 1rem 0;
}

.company-message-meta,
.company-message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.company-message-meta a {
    color: var(--tailor-primary);
}

.company-message-actions {
    justify-content: flex-end;
    margin-top: 1rem;
}

@media (max-width: 991.98px) {
    .company-hero {
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .company-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .company-contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .public-site-shell {
        padding: 1rem 1rem 2rem;
    }

    .public-site-header,
    .company-footer-main {
        align-items: stretch;
        flex-direction: column;
    }

    .public-site-header > .btn {
        width: 100%;
    }

    .company-footer-links {
        gap: .6rem 1rem;
    }

    .company-feature-grid,
    .company-services-section {
        grid-template-columns: 1fr;
    }

    .company-section {
        padding-top: 3rem;
    }
}

@media (max-width: 480px) {
    .company-hero {
        padding: 1.35rem;
    }

    .company-hero-visual {
        grid-template-columns: 1fr;
    }

    .company-hero-visual .company-system-icon {
        grid-column: auto;
    }

    .company-footer {
        padding: .9rem 1rem;
    }
}

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .no-print,
    .main-header,
    .side-content-wrap,
    .search-ui,
    .modal {
        display: none !important;
    }

    .main-content-wrap {
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-content {
        padding: 0 !important;
    }

    .content-card,
    .print-page {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        max-width: none;
        padding: 0;
    }

    .print-page table {
        min-width: 0;
        page-break-inside: avoid;
    }

    .print-page th,
    .print-page td {
        border-color: #333 !important;
        padding: .35rem .5rem;
    }

    .print-section,
    .print-header,
    .print-signatures {
        break-inside: avoid;
    }

    .receipt-note {
        background: #fff;
        color: #000;
    }
}

/* Desktop activation and first-run screens */
.desktop-onboarding-panel {
    width: min(760px, 100%);
}

.desktop-onboarding-panel .auth-card {
    max-width: 760px;
}

.desktop-onboarding-panel textarea[readonly] {
    font-family: Consolas, "Courier New", monospace;
    font-size: .78rem;
    overflow-wrap: anywhere;
}

/* Redesigned login page */
.auth-page-login {
    background:
        radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--tailor-primary) 9%, transparent) 0, transparent 28%),
        radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--tailor-primary) 8%, transparent) 0, transparent 26%),
        linear-gradient(145deg, #fbfcff 0%, var(--tailor-page-bg) 52%, #fff 100%);
    box-sizing: border-box;
    min-height: 100svh;
    overflow-x: hidden;
    padding: 0;
    position: relative;
}

.auth-page-login::before,
.auth-page-login::after {
    border: 1px solid color-mix(in srgb, var(--tailor-primary) 12%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    position: absolute;
}

.auth-page-login::before {
    height: 280px;
    left: -150px;
    top: -150px;
    width: 280px;
}

.auth-page-login::after {
    bottom: 35px;
    height: 210px;
    right: -125px;
    width: 210px;
}

.auth-page-login .auth-content-area {
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(1.25rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
    position: relative;
    z-index: 1;
}

.auth-page-login .auth-content-inner {
    max-width: 1080px !important;
}

.auth-page-login .company-footer {
    background: transparent;
    border: 0;
    padding: 0 1rem 1rem;
    position: relative;
    z-index: 1;
}

.auth-page-login .company-footer-main {
    display: none;
}

.auth-page-login .company-footer-copy {
    border: 0;
    color: #8a8494;
    margin: 0;
    padding: 0;
}

.login-panel {
    max-width: none;
    width: 100%;
}

.login-shell {
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--tailor-primary) 14%, #e8e8ef);
    border-radius: 26px;
    box-shadow: 0 28px 75px rgba(35, 24, 61, .13), 0 4px 18px rgba(35, 24, 61, .06);
    direction: ltr;
    display: grid;
    grid-template-columns: minmax(330px, .86fr) minmax(430px, 1.14fr);
    min-height: 610px;
    overflow: hidden;
}

.login-shell > * {
    direction: rtl;
}

.login-brand-side {
    background: linear-gradient(150deg, var(--tailor-primary-strong) 0%, var(--tailor-primary) 58%, color-mix(in srgb, var(--tailor-primary) 84%, #fff) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(2.2rem, 4vw, 3.5rem);
    position: relative;
}

.login-brand-side::after {
    background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px);
    background-size: 18px 18px;
    bottom: 0;
    content: "";
    height: 42%;
    left: 0;
    mask-image: linear-gradient(to top, #000, transparent);
    opacity: .45;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: -1;
}

.login-brand-glow {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.login-brand-glow-one {
    height: 260px;
    left: -120px;
    top: -90px;
    width: 260px;
}

.login-brand-glow-two {
    bottom: -105px;
    height: 230px;
    right: -100px;
    width: 230px;
}

.login-brand-content {
    position: relative;
    z-index: 1;
}

.login-brand-logo {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    box-shadow: 0 14px 35px rgba(20, 15, 35, .16);
    display: flex;
    height: 92px;
    justify-content: center;
    margin-bottom: 2rem;
    overflow: hidden;
    padding: .55rem;
    width: 92px;
}

.login-brand-logo img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.login-brand-fallback {
    align-items: center;
    background: var(--tailor-primary-soft);
    border-radius: 12px;
    color: var(--tailor-primary-strong);
    display: flex;
    font-size: 2.5rem;
    font-weight: 800;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.login-brand-eyebrow {
    align-items: center;
    color: rgba(255, 255, 255, .83);
    display: flex;
    font-size: .83rem;
    font-weight: 700;
    gap: .55rem;
    letter-spacing: .01em;
    margin: 0 0 .65rem;
}

.login-brand-eyebrow span {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .14);
    height: 6px;
    width: 6px;
}

.login-brand-side h1 {
    color: #fff;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 .75rem;
}

.login-brand-description {
    color: rgba(255, 255, 255, .86);
    font-size: 1rem;
    line-height: 1.9;
    margin: 0;
    max-width: 400px;
}

.login-benefits {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
}

.login-benefit-item {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    display: flex;
    gap: .8rem;
    padding: .72rem .8rem;
}

.login-benefit-icon {
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border-radius: 10px;
    display: flex;
    flex: 0 0 40px;
    font-size: 1.05rem;
    height: 40px;
    justify-content: center;
}

.login-benefit-item > span:last-child {
    display: grid;
    gap: .05rem;
}

.login-benefit-item strong {
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
}

.login-benefit-item small {
    color: rgba(255, 255, 255, .7);
    font-size: .72rem;
}

.login-brand-security {
    align-items: center;
    color: rgba(255, 255, 255, .74);
    display: flex;
    font-size: .78rem;
    gap: .5rem;
    margin: 1.5rem 0 0;
    position: relative;
    z-index: 1;
}

.login-brand-security i {
    color: #fff;
    font-size: 1rem;
}

.login-form-side {
    align-items: center;
    background: #fff;
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.login-form-container {
    max-width: 410px;
    width: 100%;
}

.login-form-header {
    align-items: center;
    display: flex;
    gap: .85rem;
}

.login-welcome-icon {
    align-items: center;
    background: var(--tailor-primary-soft);
    border: 1px solid color-mix(in srgb, var(--tailor-primary) 13%, transparent);
    border-radius: 14px;
    color: var(--tailor-primary);
    display: flex;
    flex: 0 0 52px;
    font-size: 1.4rem;
    height: 52px;
    justify-content: center;
}

.login-form-kicker {
    color: var(--tailor-primary);
    font-size: .75rem;
    font-weight: 800;
    margin: 0 0 .15rem;
}

.login-form-header h2 {
    color: var(--tailor-ink);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}

.login-form-intro {
    color: var(--tailor-muted);
    font-size: .88rem;
    line-height: 1.8;
    margin: .85rem 0 1.65rem;
}

.login-form {
    display: grid;
    gap: 1.1rem;
}

.login-alert {
    align-items: flex-start;
    background: #fff2f2;
    border: 1px solid #f4cccc;
    border-radius: 12px;
    color: #a32626;
    display: flex;
    font-size: .82rem;
    gap: .65rem;
    padding: .75rem .85rem;
}

.login-alert > i {
    font-size: 1.1rem;
    margin-top: .1rem;
}

.login-alert div {
    display: grid;
    gap: .08rem;
}

.login-alert strong {
    font-weight: 800;
}

.login-alert span {
    color: #b04a4a;
    line-height: 1.6;
}

.login-field label {
    color: #484255;
    display: block;
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: .45rem;
}

.login-required {
    color: #d9363e;
    margin-right: .2rem;
}

.login-input-shell {
    align-items: center;
    background: #fbfbfd;
    border: 1px solid #dcd8e5;
    border-radius: 12px;
    display: flex;
    min-height: 52px;
    padding: 0 .9rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-input-shell:focus-within {
    background: #fff;
    border-color: var(--tailor-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tailor-primary) 12%, transparent);
}

.login-input-shell.has-error {
    border-color: #dc3545;
}

.login-input-shell > i {
    color: #958d9f;
    flex: 0 0 auto;
    font-size: 1.05rem;
    transition: color .18s ease;
}

.login-input-shell:focus-within > i {
    color: var(--tailor-primary);
}

.login-input-shell input {
    background: transparent;
    border: 0;
    color: var(--tailor-ink);
    flex: 1 1 auto;
    font-family: var(--tailor-font-family);
    font-size: .88rem;
    height: 50px;
    min-width: 0;
    outline: 0;
    padding: 0 .72rem;
    text-align: right;
}

.login-input-shell input::placeholder {
    color: #aaa4b2;
    opacity: 1;
}

.login-input-shell input:-webkit-autofill {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--tailor-ink);
}

.login-password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #8d8698;
    display: flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
    background: var(--tailor-primary-soft);
    color: var(--tailor-primary);
    outline: 0;
}

.login-field-error {
    align-items: center;
    color: #c52f37;
    display: flex;
    font-size: .74rem;
    gap: .3rem;
    margin: .35rem .15rem 0;
}

.login-submit {
    align-items: center;
    background: linear-gradient(110deg, var(--tailor-primary-strong), var(--tailor-primary));
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--tailor-primary) 26%, transparent);
    color: #fff;
    display: flex;
    font-family: var(--tailor-font-family);
    font-size: .94rem;
    font-weight: 800;
    justify-content: center;
    min-height: 52px;
    padding: .75rem 1rem;
    position: relative;
    transition: box-shadow .18s ease, transform .18s ease;
    width: 100%;
}

.login-submit i {
    left: 1rem;
    position: absolute;
}

.login-submit:hover {
    box-shadow: 0 13px 30px color-mix(in srgb, var(--tailor-primary) 34%, transparent);
    transform: translateY(-1px);
}

.login-submit:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tailor-primary) 18%, transparent), 0 10px 24px color-mix(in srgb, var(--tailor-primary) 26%, transparent);
    outline: 0;
}

.login-submit:active {
    transform: translateY(0);
}

.login-form-divider {
    align-items: center;
    display: flex;
    height: 1px;
    margin: 1.5rem 0 1rem;
}

.login-form-divider span {
    background: #ece9f0;
    height: 1px;
    width: 100%;
}

.login-about-link {
    align-items: center;
    border-radius: 12px;
    color: var(--tailor-muted);
    display: grid;
    gap: .7rem;
    grid-template-columns: 40px 1fr auto;
    padding: .6rem;
    transition: background .18s ease, color .18s ease;
}

.login-about-link:hover,
.login-about-link:focus-visible {
    background: var(--tailor-primary-soft);
    color: var(--tailor-primary-strong);
    outline: 0;
    text-decoration: none;
}

.login-about-icon {
    align-items: center;
    background: var(--tailor-primary-soft);
    border-radius: 10px;
    color: var(--tailor-primary);
    display: flex;
    font-size: 1rem;
    height: 40px;
    justify-content: center;
}

.login-about-link > span:nth-child(2) {
    display: grid;
    gap: .08rem;
}

.login-about-link strong {
    color: var(--tailor-ink);
    font-size: .8rem;
    font-weight: 700;
}

.login-about-link small {
    color: #928b9b;
    font-size: .69rem;
}

.login-about-link > i {
    font-size: .75rem;
}

@media (max-width: 860px) {
    .auth-page-login .auth-content-area {
        align-items: flex-start;
        padding: 1.25rem;
    }

    .login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .login-brand-side {
        padding: 2rem;
    }

    .login-brand-logo {
        height: 76px;
        margin-bottom: 1.35rem;
        width: 76px;
    }

    .login-brand-side h1 {
        font-size: 2rem;
    }

    .login-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 1.35rem;
    }

    .login-benefit-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .login-benefit-item small {
        display: none;
    }

    .login-brand-security {
        margin-top: 1.25rem;
    }

    .login-form-side {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 575.98px) {
    .auth-page-login .auth-content-area {
        padding: .75rem;
    }

    .auth-page-login .company-footer {
        padding: .35rem .75rem .85rem;
    }

    .login-shell {
        border-radius: 20px;
    }

    .login-brand-side {
        padding: 1.5rem;
    }

    .login-brand-logo {
        border-radius: 14px;
        height: 66px;
        margin-bottom: 1.1rem;
        width: 66px;
    }

    .login-brand-eyebrow {
        font-size: .75rem;
    }

    .login-brand-side h1 {
        font-size: 1.65rem;
        margin-bottom: .4rem;
    }

    .login-brand-description {
        font-size: .84rem;
        line-height: 1.75;
    }

    .login-benefits {
        display: none;
    }

    .login-brand-security {
        font-size: .72rem;
        margin-top: 1rem;
    }

    .login-form-side {
        padding: 1.75rem 1.25rem;
    }

    .login-welcome-icon {
        flex-basis: 46px;
        height: 46px;
    }

    .login-form-header h2 {
        font-size: 1.45rem;
    }

    .login-form-intro {
        margin-bottom: 1.3rem;
    }

    .login-input-shell,
    .login-submit {
        min-height: 50px;
    }

    .login-input-shell input {
        height: 48px;
    }
}

@media (max-height: 720px) and (min-width: 861px) {
    .auth-page-login .auth-content-area {
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

    .login-shell {
        min-height: 570px;
    }

    .login-brand-side,
    .login-form-side {
        padding-bottom: 2rem;
        padding-top: 2rem;
    }

    .login-brand-logo {
        height: 78px;
        margin-bottom: 1.15rem;
        width: 78px;
    }

    .login-benefits {
        margin-top: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-input-shell,
    .login-submit,
    .login-about-link {
        transition: none;
    }
}