:root {
    --bg-page: #070d16;
    --bg-panel: rgba(12, 20, 31, 0.82);
    --bg-panel-alt: #101a28;
    --border-soft: #233248;
    --border-strong: #2e4b73;
    --text-main: #f3f6fb;
    --text-muted: #97a7bd;
    --text-dim: #6f819a;
    --accent: #2b85ff;
    --accent-soft: rgba(43, 133, 255, 0.14);
    --ok: #17a673;
    --warn: #f5b942;
    --radius-lg: 18px;
    --radius-md: 12px;
}

* {
    box-sizing: border-box;
}

body.theme-dark {
    font-family: "Manrope", "Segoe UI", sans-serif;
    background:
        radial-gradient(1000px 500px at 12% -8%, rgba(47, 122, 225, 0.2), transparent 65%),
        radial-gradient(800px 420px at 92% 10%, rgba(16, 78, 147, 0.2), transparent 70%),
        linear-gradient(180deg, #070d16 0%, #050912 100%);
    color: var(--text-main);
    min-height: 100vh;
    letter-spacing: 0.01em;
}

.module-shell {
    max-width: 1280px;
}

.app-header {
    padding: 0.25rem 0 0.75rem;
}

.app-title {
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.015em;
}

.app-subtitle {
    color: var(--text-muted);
    font-size: 0.97rem;
    margin-bottom: 0;
}

.panel-card {
    background: linear-gradient(165deg, rgba(13, 21, 33, 0.94), rgba(8, 14, 24, 0.92));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(6px);
}

.panel-card .card-body {
    padding: clamp(1rem, 2.2vw, 1.5rem);
}

.section-headline {
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
}

.section-note {
    color: var(--text-dim);
    font-size: 0.92rem;
    margin-bottom: 0;
}

.section-anchor {
    scroll-margin-top: 1rem;
}

.btn,
.form-control,
.form-select {
    border-radius: 10px;
}

.btn {
    font-weight: 700;
}

.btn-sm {
    padding-inline: 0.85rem;
}

.btn-outline-light {
    border-color: #3a4f6f;
    color: #d8e3f2;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    background: rgba(218, 230, 245, 0.09);
    border-color: #6a87b1;
    color: #f4f8ff;
}

.btn-primary {
    background: linear-gradient(180deg, #3996ff, #2577dd);
    border-color: #2b85ff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: linear-gradient(180deg, #4ca2ff, #2d83ef);
    border-color: #4ca2ff;
}

.btn-success {
    background: linear-gradient(180deg, #21b07b, #179364);
    border-color: #1ea571;
}

.btn-warning,
.btn-outline-warning {
    color: #ffdc8b;
    border-color: #85631c;
    background-color: rgba(255, 194, 51, 0.08);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
    color: #15120a;
    background-color: #ffdc8b;
    border-color: #ffdc8b;
}

.form-label {
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: #334860;
    color: var(--text-main);
}

.form-control::placeholder {
    color: #6e8199;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.23rem var(--accent-soft);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
}

.form-check-input {
    border-color: #426182;
    background-color: rgba(255, 255, 255, 0.03);
}

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

.text-secondary {
    color: var(--text-muted) !important;
}

.alert {
    border-radius: var(--radius-md);
    border-width: 1px;
}

.alert-danger {
    background-color: rgba(207, 74, 92, 0.17);
    color: #ffd7dd;
    border-color: rgba(207, 74, 92, 0.44);
}

.alert-success {
    background-color: rgba(21, 128, 91, 0.18);
    color: #cfffe9;
    border-color: rgba(21, 128, 91, 0.45);
}

.alert-warning {
    background-color: rgba(255, 195, 11, 0.16);
    color: #fff4cf;
    border-color: rgba(255, 195, 11, 0.45);
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid #3a5273;
    background: rgba(26, 44, 67, 0.5);
    border-radius: 999px;
    font-size: 0.8rem;
    color: #c2d2e7;
}

.review-entry-list {
    display: grid;
    gap: 0.75rem;
}

.review-entry {
    border: 1px solid #2f425a;
    background: linear-gradient(180deg, rgba(18, 28, 43, 0.84), rgba(15, 24, 37, 0.84));
    border-radius: var(--radius-md);
    padding: 0.85rem 0.95rem;
}

.review-entry-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.review-entry-index {
    font-family: "JetBrains Mono", monospace;
    color: #95b9ee;
    font-size: 0.8rem;
}

.review-entry-count {
    font-size: 0.76rem;
    color: #7594b7;
}

.review-entry-body {
    color: #e7effb;
    font-size: 0.93rem;
    line-height: 1.68;
    white-space: pre-wrap;
    word-break: break-word;
}

.report-textarea {
    min-height: 340px;
    line-height: 1.55;
    font-size: 0.9rem;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #0a131f;
}

.form-control[readonly] {
    background-color: #0a131f;
}

@media (max-width: 991px) {
    .app-header {
        gap: 0.9rem;
    }

    .panel-card .card-body {
        padding: 1rem;
    }
}

.order-subsection {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7f95b4;
    font-weight: 700;
    padding-top: 0.25rem;
    margin-bottom: -0.2rem;
}

.order-tracker-shell {
    max-width: 1540px;
}

.order-hero .card-body {
    padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2vw, 1.5rem);
}

.order-new-card,
.order-table-card {
    overflow: hidden;
}

.order-new-card .card-body {
    padding: 1rem 1rem 1.1rem;
}

.order-divider {
    border-color: #2b3f5b;
    margin: 0.7rem 0 1rem;
}

.order-table-card .card-body {
    padding: 0;
}

.order-table-wrap {
    border-width: 1px 0 0;
    border-radius: 0;
}

.order-form-layout .form-control,
.order-form-layout .form-select {
    min-height: 42px;
}

.order-remarks {
    min-height: 84px;
}

.order-table-wrap {
    border: 1px solid #2a3a52;
    border-radius: 12px;
    overflow: auto;
    background: rgba(8, 14, 23, 0.68);
}

.order-table {
    margin-bottom: 0;
    table-layout: fixed;
    min-width: 1700px;
}

.order-table thead th {
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #aec0d9;
    background: #1a2637;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #334861;
    vertical-align: middle;
}

.order-table tbody td {
    font-size: 0.9rem;
    color: #e4edf9;
    border-color: #25364d;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-table .col-rn {
    width: 80px;
}

.order-table .col-name {
    width: 160px;
}

.order-table .col-status-summary {
    width: 116px;
}

.order-table .col-actions {
    width: 78px;
}

.order-table .col-phone {
    width: 120px;
}

.order-table .col-email {
    width: 180px;
}

.order-table .col-model {
    width: 88px;
}

.order-table .col-trim {
    width: 190px;
}

.order-table .col-exterior {
    width: 150px;
}

.order-table .col-interior {
    width: 130px;
}

.order-table .col-wheel {
    width: 80px;
}

.order-table .col-category {
    width: 90px;
}

.order-table .col-date {
    width: 112px;
}

.order-table .col-price {
    width: 110px;
}

.order-table .col-remarks {
    width: 260px;
}

.order-table .col-status {
    width: 76px;
}

.order-table .col-saved {
    width: 132px;
}

.status-chip {
    border: 1px solid #3a516e;
    background: rgba(24, 39, 59, 0.65);
    color: #dce8f8;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.55rem;
    line-height: 1.2;
}

.status-chip-pending {
    border-color: #7e6740;
    background: rgba(126, 103, 64, 0.2);
    color: #ffdfaa;
}

.status-chip-complete {
    border-color: #237a5d;
    background: rgba(35, 122, 93, 0.22);
    color: #d0ffe9;
}

.status-popover-ui {
    --bs-popover-bg: #0f1b2b;
    --bs-popover-border-color: #36527a;
    --bs-popover-body-color: #deebfb;
    --bs-popover-max-width: 220px;
}

.status-popover-grid {
    display: grid;
    gap: 0.4rem;
}

.status-popover-grid > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.83rem;
}

.status-popover-grid > div span {
    color: #a9bdd8;
}

.status-popover-grid > div strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f2f7ff;
}

.order-table .sticky-right-1,
.order-table .sticky-right-2,
.order-table .sticky-right-3,
.order-table .sticky-right-4,
.order-table .sticky-right-5 {
    position: sticky;
    z-index: 2;
    background-color: var(--order-sticky-bg, #1f2a38);
}

.order-table thead .sticky-right-1,
.order-table thead .sticky-right-2,
.order-table thead .sticky-right-3,
.order-table thead .sticky-right-4,
.order-table thead .sticky-right-5 {
    z-index: 5;
    background: #1a2637;
}

.order-table tbody tr {
    --order-sticky-bg: #1f2a38;
}

.order-table.table-hover > tbody > tr:hover {
    --order-sticky-bg: #353c43;
}

.order-table .sticky-right-1 {
    right: 0;
}

.order-table .sticky-right-2 {
    right: 78px;
}

.order-table .sticky-right-3 {
    right: 154px;
}

.order-table .sticky-right-4 {
    right: 230px;
}

.order-table .sticky-right-5 {
    right: 306px;
    box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.55);
}

.order-remarks-cell {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.remarks-chip {
    border: 1px solid #446080;
    background: rgba(35, 54, 78, 0.55);
    color: #d7e7fb;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 0.25rem 0.6rem;
}

.remarks-chip:hover,
.remarks-chip:focus-visible {
    background: rgba(52, 82, 120, 0.7);
    border-color: #5f88bb;
    color: #f3f8ff;
}

.remarks-popover-ui {
    --bs-popover-bg: #0f1b2b;
    --bs-popover-border-color: #36527a;
    --bs-popover-body-color: #deebfb;
    --bs-popover-max-width: 360px;
}

.remarks-popover-ui .popover-body {
    font-size: 0.83rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.order-table .form-check-input {
    margin: 0;
}

@media (max-width: 1199px) {
    .order-new-card .collapse:not(.show) {
        display: none;
    }
}

.orderx-page {
    height: 100vh;
    overflow: hidden;
    font-family: "Roboto Condensed", "Segoe UI", sans-serif;
    background:
        radial-gradient(850px 520px at 0% -12%, rgba(0, 164, 199, 0.18), transparent 60%),
        linear-gradient(180deg, #050d18 0%, #040b15 100%);
}

.orderx-navbar {
    height: 70px;
    position: sticky;
    top: 0;
    z-index: 1000;
    border: 1px solid #1a2b3f;
    border-bottom-color: #203449;
    background: rgba(11, 20, 33, 0.95);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

.orderx-navbar-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.orderx-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #f2f8ff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.orderx-brand-mark {
    width: 24px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(135deg, #18e6f2 0%, #0dc9dd 100%);
    clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%, 8% 50%);
}

.orderx-links {
    display: flex;
    align-items: center;
    gap: 1.9rem;
}

.orderx-links a {
    color: #8ea4bf;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    font-weight: 700;
    padding: 0.45rem 0;
    border-bottom: 2px solid transparent;
}

.orderx-links a.active {
    color: #1de6f2;
    border-bottom-color: #1de6f2;
}

.orderx-navbar-right {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.orderx-search-wrap {
    width: min(320px, 36vw);
}

.orderx-page .orderx-search {
    background: rgba(4, 11, 22, 0.65);
    border-color: #223a56;
    color: #d7e5f8;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.74rem;
}

.orderx-page .orderx-search::placeholder {
    color: #6882a3;
}

.orderx-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe6c8, #f0d0aa);
    color: #263649;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
}

.orderx-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: calc(100vh - 70px);
    min-height: 0;
}

.orderx-sidebar {
    border-left: 1px solid #1a2b3f;
    border-right: 1px solid #1a2b3f;
    border-bottom: 1px solid #1a2b3f;
    background: rgba(10, 20, 33, 0.88);
    padding: 1rem 1rem 1.2rem;
    height: calc(100vh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
}

.orderx-sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #1d3249;
}

.orderx-sidebar-title {
    color: #f3fbff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 1.05rem;
    font-weight: 800;
}

.orderx-toggle {
    border: 1px solid #385772;
    background: rgba(16, 34, 56, 0.7);
    color: #c8d9ee;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
}

.orderx-main {
    padding: 1.4rem 1.5rem 1.2rem;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

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

.orderx-main-title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(1.8rem, 2.9vw, 2.7rem);
    line-height: 1.02;
    text-transform: uppercase;
    color: #f5fbff;
}

.orderx-main-subtitle {
    margin: 0.5rem 0 0;
    color: #6f8ead;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.76rem;
    font-weight: 700;
}

.orderx-main-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.orderx-cta-btn.btn.btn-primary,
.orderx-open-drawer.btn.btn-primary,
.orderx-save-btn.btn.btn-primary {
    border-color: #16d9e7;
    background: linear-gradient(180deg, #1ad9e6, #0ec7d7);
    color: #f5fcff;
    font-weight: 800;
}

.orderx-cta-btn.btn.btn-primary:hover,
.orderx-open-drawer.btn.btn-primary:hover,
.orderx-save-btn.btn.btn-primary:hover,
.orderx-cta-btn.btn.btn-primary:focus-visible,
.orderx-open-drawer.btn.btn-primary:focus-visible,
.orderx-save-btn.btn.btn-primary:focus-visible {
    background: linear-gradient(180deg, #27e6f2, #14d2df);
    border-color: #27e6f2;
}

.orderx-load-card {
    border: 1px solid #20364c;
    background: rgba(12, 25, 41, 0.82);
    border-radius: 8px;
    min-width: 130px;
    padding: 0.6rem 0.7rem;
}

.orderx-load-label {
    color: #758eab;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.orderx-load-value {
    color: #f5fcff;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 800;
    margin-top: 0.3rem;
}

.orderx-back-btn.btn.btn-outline-light {
    border-color: #35516d;
    background: rgba(14, 28, 44, 0.72);
    color: #d7e7f8;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.55rem 1rem;
}

.orderx-table-card {
    border: 1px solid #1f334b;
    border-radius: 0 !important;
    background: rgba(8, 17, 29, 0.78);
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.orderx-page .order-table-card,
.orderx-page .order-table-card .card-body,
.orderx-page .order-table-wrap,
.orderx-page .order-table {
    border-radius: 0 !important;
}

.orderx-page .order-table-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.orderx-table-head {
    padding: 1rem 1rem 0.95rem;
    border-bottom: 1px solid #23384f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.orderx-table-title-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
}

.orderx-table-title {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.19em;
    font-size: 0.95rem;
    font-weight: 800;
    color: #eff7ff;
}

.orderx-table-count {
    color: #667f9d;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.orderx-table-tools {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.orderx-search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: min(820px, 100%);
}

.orderx-search-form .form-control {
    min-width: 260px;
    background: rgba(6, 14, 26, 0.9);
    border-color: #28445f;
    color: #d6e6f9;
}

.orderx-search-form .form-control:focus {
    border-color: #20ddeb;
    box-shadow: 0 0 0 0.17rem rgba(24, 218, 234, 0.14);
}

.orderx-search-form .btn {
    white-space: nowrap;
}

.orderx-filter-drawer {
    width: min(460px, 92vw) !important;
    border-left: 1px solid #1d3450;
    background: #091523;
}

.orderx-filter-drawer .form-label {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7391b1 !important;
}

.orderx-filter-drawer .form-control,
.orderx-filter-drawer .form-select {
    background: rgba(6, 14, 26, 0.9);
    border-color: #28445f;
    color: #d6e6f9;
    min-height: 33px;
    border-radius: 6px;
}

.orderx-filter-drawer .form-control:focus,
.orderx-filter-drawer .form-select:focus {
    border-color: #20ddeb;
    box-shadow: 0 0 0 0.17rem rgba(24, 218, 234, 0.14);
}

.orderx-tool-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #274261;
    background: rgba(5, 18, 31, 0.86);
    color: #b8cce3;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

.orderx-page .order-subsection {
    font-size: 1.03rem;
    letter-spacing: 0.09em;
    color: #f4fbff;
    border-left: 3px solid #15ddec;
    padding: 0 0 0 0.7rem;
    margin-bottom: 0.35rem;
}

.orderx-page .form-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7f97b3 !important;
    margin-bottom: 0.35rem;
}

.orderx-page .order-form-layout .form-control,
.orderx-page .order-form-layout .form-select {
    min-height: 36px;
    border-radius: 6px;
    background: rgba(3, 11, 22, 0.85);
    border-color: #22405f;
    color: #eaf6ff;
    font-family: "Roboto Mono", ui-monospace, monospace;
}

.orderx-page .order-form-layout .form-control:focus,
.orderx-page .order-form-layout .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(24, 218, 234, 0.15);
    border-color: #20ddeb;
    background: rgba(4, 14, 26, 0.98);
}

.orderx-page .order-remarks {
    min-height: 78px;
}

.orderx-save-btn.btn.btn-primary {
    width: 100%;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.orderx-page .order-table-wrap {
    border: 0;
    border-radius: 0 !important;
    background: rgba(5, 15, 26, 0.86);
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: auto;
}

.orderx-page .order-table {
    min-width: 1880px;
    margin-bottom: 0;
    font-family: "Roboto Condensed", "Segoe UI", sans-serif;
}

.orderx-page .order-table thead th {
    background: #122235;
    color: #7692af;
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    font-weight: 700;
    border-bottom-color: #25425f;
}

.orderx-page .order-table tbody td {
    background: rgba(5, 15, 26, 0.9);
    color: #d7e7fa;
    border-color: #1b3349;
    font-size: 0.95rem;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

.orderx-page .order-table .col-rn {
    width: 130px;
}

.orderx-page .order-table .col-email {
    width: 280px;
}

.orderx-page .order-table .col-trim {
    width: 280px;
}

.orderx-page .order-table .col-rn,
.orderx-page .order-table .col-email,
.orderx-page .order-table .col-trim {
    white-space: nowrap;
}

.orderx-rn {
    color: #17e8f7;
    font-weight: 700;
    font-family: "Roboto Mono", ui-monospace, monospace;
}

.orderx-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.orderx-name-avatar {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid #1c6b7d;
    background: rgba(11, 95, 112, 0.26);
    color: #15e1ee;
    font-family: "Roboto Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
}

.orderx-name-text {
    font-weight: 700;
    color: #dce9f8;
}

.orderx-model-text {
    font-weight: 700;
    color: #dbe8f8;
}

.orderx-exterior-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.orderx-exterior-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.orderx-page .order-table tbody tr {
    --order-sticky-bg: #081827;
}

.orderx-page .order-table.table-hover > tbody > tr:hover {
    --order-sticky-bg: #122336;
}

.orderx-page .order-table .sticky-right-1,
.orderx-page .order-table .sticky-right-2,
.orderx-page .order-table .sticky-right-3,
.orderx-page .order-table .sticky-right-4,
.orderx-page .order-table .sticky-right-5 {
    background: var(--order-sticky-bg);
}

.orderx-page .order-table thead .sticky-right-1,
.orderx-page .order-table thead .sticky-right-2,
.orderx-page .order-table thead .sticky-right-3,
.orderx-page .order-table thead .sticky-right-4,
.orderx-page .order-table thead .sticky-right-5 {
    background: #122235;
}

.orderx-page .status-chip {
    border-color: #1ea8b4;
    background: rgba(8, 86, 96, 0.3);
    color: #22e5f2;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: "Roboto Mono", ui-monospace, monospace;
}

.orderx-page .status-chip-complete {
    border-color: #1ea8b4;
    background: rgba(8, 86, 96, 0.3);
    color: #22e5f2;
}

.orderx-page .status-chip-pending {
    border-color: #b78338;
    background: rgba(160, 109, 35, 0.16);
    color: #ffc475;
}

.orderx-page .remarks-chip {
    border-color: #355d85;
    background: rgba(18, 43, 70, 0.65);
    color: #d3e7ff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.68rem;
}

.orderx-page .btn-outline-light.order-edit-btn {
    border-color: #3b5f88;
    color: #d8e9ff;
    background: rgba(16, 34, 56, 0.68);
}

.orderx-drawer {
    width: min(760px, 82vw) !important;
    border-right: 1px solid #1d3450;
    background: #091523;
}

.orderx-edit-drawer {
    width: min(760px, 82vw) !important;
}

.orderx-drawer .offcanvas-header,
.orderx-drawer .offcanvas-body,
.orderx-drawer .offcanvas-footer {
    padding-inline: 1rem;
}

.orderx-drawer-head {
    border-bottom: 1px solid #20364f;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.orderx-drawer-title {
    color: #f0f8ff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.05rem;
    font-weight: 800;
}

.orderx-drawer-subtitle {
    color: #7f97b2;
    font-size: 0.8rem;
}

.orderx-drawer-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.orderx-drawer-footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid #20364f;
    background: rgba(9, 21, 35, 0.96);
    backdrop-filter: blur(3px);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.offcanvas-backdrop.show {
    opacity: 0.72;
    background-color: #02070f;
}

.custom-scrollbar::-webkit-scrollbar {
    height: 7px;
    width: 7px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(7, 17, 29, 0.75);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #2f4868;
    border-radius: 999px;
}

.orderx-pagination-bar {
    border-top: 1px solid #23384f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    background: rgba(7, 15, 27, 0.9);
    flex-shrink: 0;
}

.orderx-pagination-meta {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #5d7592;
    font-family: "Roboto Mono", ui-monospace, monospace;
}

.orderx-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.orderx-page-btn {
    min-width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #29425f;
    background: rgba(9, 22, 38, 0.92);
    color: #9bb1ca;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
}

.orderx-page-btn.active {
    background: #18ddeb;
    border-color: #18ddeb;
    color: #062030;
}

.orderx-page-btn.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.portal-main {
    padding: 1.4rem 1.5rem 1.2rem;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    overflow: auto;
}

.portal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.portal-title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    line-height: 1.02;
    text-transform: uppercase;
    color: #f5fbff;
}

.portal-subtitle {
    margin: 0.45rem 0 0;
    color: #6f8ead;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    font-weight: 700;
}

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

.portal-kpis-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-kpi-card {
    border: 1px solid #22384f;
    background: rgba(10, 20, 34, 0.84);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
}

.portal-kpi-label {
    display: block;
    color: #7590ad;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.62rem;
    font-weight: 700;
}

.portal-kpi-value {
    display: block;
    margin-top: 0.35rem;
    color: #f5fcff;
    font-size: 1.55rem;
    line-height: 1.1;
    font-weight: 800;
}

.portal-kpi-value-sm {
    font-size: 0.95rem;
    line-height: 1.35;
}

.portal-table-card {
    min-height: 0;
}

.portal-main-fill {
    flex: 1 1 auto;
    min-height: 0;
}

.portal-main-fill .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.portal-coe-card .card-body {
    padding: 0.95rem 1rem;
}

.portal-coe-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.portal-coe-title {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e8f3ff;
    font-weight: 800;
}

.portal-coe-subtitle {
    margin: 0.3rem 0 0;
    color: #7f9abb;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.portal-coe-grid {
    margin-top: 0.85rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.portal-coe-tile {
    border: 1px solid #22384f;
    border-radius: 10px;
    background: rgba(7, 15, 27, 0.86);
    padding: 0.7rem 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.portal-coe-tile.is-updated {
    border-color: #38a1ff;
    box-shadow: 0 0 0 1px rgba(56, 161, 255, 0.28), 0 0 18px rgba(56, 161, 255, 0.2);
    background: rgba(9, 23, 39, 0.95);
}

.portal-coe-cat {
    display: block;
    color: #89a6c7;
    font-size: 0.67rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

.portal-coe-price {
    display: block;
    margin-top: 0.35rem;
    color: #f3fbff;
    font-size: 1.35rem;
    line-height: 1.05;
    font-weight: 800;
}

.portal-coe-desc {
    display: block;
    margin-top: 0.35rem;
    color: #86a2bf;
    font-size: 0.7rem;
    min-height: 2.2em;
}

.portal-coe-meta-row {
    margin-top: 0.45rem;
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    color: #88a2bf;
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.portal-coe-meta-row strong {
    color: #dcecff;
    font-weight: 700;
}

.portal-toolbar {
    border-bottom: 1px solid #23384f;
    background: rgba(7, 15, 27, 0.9);
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.portal-module-table thead th,
.portal-message-table thead th {
    background: #122235;
    color: #7692af;
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    font-weight: 700;
}

.portal-module-table tbody td,
.portal-message-table tbody td {
    background: rgba(5, 15, 26, 0.9);
    border-color: #1b3349;
    color: #d7e7fa;
}

.portal-module-name {
    color: #dce9f8;
    font-weight: 700;
}

.portal-message-body {
    white-space: pre-wrap;
    word-break: break-word;
}

.car-info-body {
    padding: 0 !important;
}

.car-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.9rem;
}

.car-info-card {
    border: 1px solid #22384f;
    border-radius: 10px;
    background: rgba(8, 18, 30, 0.88);
    padding: 0.8rem;
}

.car-info-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.car-info-card-head h3 {
    margin: 0;
    color: #f0f8ff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
    font-weight: 800;
}

.car-info-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #2f5177;
    background: rgba(22, 45, 71, 0.58);
    color: #a8c5e6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.63rem;
    padding: 0.2rem 0.45rem;
    font-weight: 700;
}

.car-info-tagline {
    margin: 0.45rem 0 0;
    color: #8fa8c4;
    font-size: 0.82rem;
    line-height: 1.45;
}

.car-info-spec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.55rem;
    margin: 0.75rem 0 0;
}

.car-info-spec-list div {
    border: 1px solid #243a52;
    background: rgba(7, 16, 28, 0.82);
    border-radius: 8px;
    padding: 0.45rem 0.5rem;
}

.car-info-spec-list dt {
    margin: 0;
    color: #6f8cab;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.62rem;
    font-weight: 700;
}

.car-info-spec-list dd {
    margin: 0.3rem 0 0;
    color: #d9e9fb;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}

.car-info-coe-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.9rem;
    border-bottom: 1px solid #23384f;
}

.car-info-coe-item {
    border: 1px solid #2b4460;
    border-radius: 10px;
    background: rgba(8, 18, 30, 0.9);
    padding: 0.75rem 0.8rem;
}

.car-info-coe-cat {
    display: block;
    color: #90afd1;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.66rem;
    font-weight: 700;
}

.car-info-coe-price {
    display: block;
    margin-top: 0.35rem;
    color: #f0f8ff;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 800;
}

.car-info-coe-eligibility {
    margin: 0.45rem 0 0;
    color: #7f9bbc;
    font-size: 0.74rem;
}

.car-info-coe-models {
    margin: 0.35rem 0 0;
    color: #d6e7fa;
    font-size: 0.78rem;
    font-weight: 700;
}

.portal-toast-stack {
    position: fixed;
    top: 82px;
    right: 18px;
    z-index: 1300;
    display: grid;
    gap: 0.6rem;
    width: min(360px, calc(100vw - 24px));
}

.portal-toast {
    border: 1px solid #294663;
    border-radius: 8px;
    backdrop-filter: blur(6px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
}

.portal-toast .toast-header {
    background: rgba(6, 13, 24, 0.78);
    color: #dce8f8;
    border-bottom: 1px solid #27435f;
}

.portal-toast.text-bg-success {
    background: rgba(22, 122, 89, 0.86) !important;
    color: #e9fff6 !important;
}

.portal-toast.text-bg-danger {
    background: rgba(165, 48, 66, 0.9) !important;
    color: #ffe6ea !important;
}

.portal-toast.text-bg-warning {
    background: rgba(149, 108, 20, 0.9) !important;
    color: #fff5de !important;
}

.loginx-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(850px 520px at 0% -12%, rgba(0, 164, 199, 0.16), transparent 60%),
        linear-gradient(180deg, #050d18 0%, #040b15 100%);
}

.loginx-topbar {
    height: 70px;
    border: 1px solid #1a2b3f;
    border-bottom-color: #203449;
    background: rgba(11, 20, 33, 0.95);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.loginx-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #f2f8ff;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.loginx-topbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #8ea4bf;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.7rem;
    font-weight: 700;
}

.loginx-lock {
    line-height: 1;
    transform: translateY(-1px);
}

.loginx-main {
    flex: 1 1 auto;
    display: grid;
    align-items: center;
    padding: 1.25rem;
}

.loginx-grid {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.loginx-intro {
    border: 1px solid #1f334b;
    background: rgba(8, 17, 29, 0.7);
    padding: clamp(1.2rem, 3vw, 2rem);
}

.loginx-kicker {
    margin: 0 0 0.6rem;
    color: #6f8ead;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    font-weight: 700;
}

.loginx-title {
    margin: 0;
    color: #f5fcff;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
}

.loginx-subtitle {
    margin: 0.8rem 0 0;
    color: #9ab0c9;
    font-size: 0.98rem;
    max-width: 38ch;
}

.loginx-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.15rem;
}

.loginx-chip {
    border: 1px solid #2c4966;
    background: rgba(11, 35, 53, 0.68);
    color: #cce4fd;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.loginx-card {
    max-width: 560px;
    justify-self: end;
}

.loginx-card-title {
    margin: 0;
    color: #f5fcff;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-weight: 800;
}

.loginx-card-subtitle {
    margin: 0.45rem 0 1rem;
    color: #86a0be;
}

.loginx-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    font-size: 0.88rem;
}

.loginx-form-note {
    color: #6f8ead;
    font-size: 0.8rem;
}

@media (max-width: 1200px) {
    .orderx-links {
        display: none;
    }

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

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

    .car-info-grid,
    .car-info-coe-grid {
        grid-template-columns: 1fr;
    }

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

    .loginx-card {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .orderx-page {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .orderx-workspace {
        height: auto;
        min-height: calc(100vh - 70px);
    }

    .orderx-navbar {
        padding: 0 0.75rem;
    }

    .orderx-search-wrap {
        width: 44vw;
    }

    .orderx-main {
        padding: 1rem 0.75rem 0.9rem;
        height: auto;
        overflow: visible;
    }

    .orderx-main-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .orderx-main-actions {
        width: 100%;
        justify-content: space-between;
    }

    .portal-main {
        padding: 1rem 0.75rem 0.9rem;
        grid-template-rows: auto auto auto auto;
        overflow: visible;
        height: auto;
    }

    .portal-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .portal-kpis {
        grid-template-columns: 1fr;
    }

    .portal-coe-grid {
        grid-template-columns: 1fr;
    }

    .car-info-spec-list {
        grid-template-columns: 1fr;
    }

    .loginx-main {
        padding: 0.75rem;
    }

    .loginx-topbar {
        padding: 0 0.75rem;
    }

    .loginx-title {
        font-size: 1.75rem;
    }

    .portal-toast-stack {
        right: 10px;
        left: 10px;
        width: auto;
    }

    .orderx-search-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .orderx-search-form .form-control {
        min-width: 0;
        width: 100%;
    }

    .orderx-load-card {
        min-width: 110px;
    }
}