:root {
    --brand-red: #e31b23;
    --brand-blue: #153b9e;
    --brand-blue-2: #0b5ed7;
    --app-bg: #f5f7fb;
    --app-surface: #ffffff;
    --app-text: #172033;
    --app-muted: #718096;
    --app-border: #e7ebf1;
    --app-shadow: 0 8px 28px rgba(25, 42, 70, .07);
    --app-shadow-hover: 0 14px 34px rgba(25, 42, 70, .11);
}

html { min-height: 100%; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--app-text);
    background:
        radial-gradient(circle at 90% 0%, rgba(21,59,158,.055), transparent 28%),
        var(--app-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.app-container { max-width: 1680px; }
.app-main { padding-top: 26px; padding-bottom: 52px; }

/* ===== Brand header ===== */
.app-navbar {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #e9edf3;
    box-shadow: 0 5px 20px rgba(18, 38, 63, .055);
    padding: 8px 0;
}
.app-brand {
    color: var(--app-text) !important;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 4px 8px 4px 0 !important;
    margin-right: 28px;
}
.brand-logo {
    width: 285px;
    height: auto;
    display: block;
}
.brand-section {
    color: var(--brand-blue-2);
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
    padding-left: 15px;
    border-left: 1px solid #dce3ee;
}
.app-navbar .navbar-toggler {
    border: 1px solid #d9e0ea;
    border-radius: 10px;
    padding: 7px 9px;
}
.app-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .18rem rgba(13,110,253,.12); }
.app-nav-links .nav-link,
.profile-link,
.nav-logout {
    color: #344054 !important;
    border-radius: 10px;
    margin: 3px 2px;
    padding: 10px 12px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    font-weight: 650;
    transition: .16s ease;
}
.app-nav-links .nav-link i,
.profile-link > .nav-avatar i,
.nav-logout i { color: #64748b; }
.app-nav-links .nav-link:hover,
.profile-link:hover,
.nav-logout:hover {
    color: var(--brand-blue-2) !important;
    background: #f1f5ff;
}
.app-nav-links .nav-link:hover i,
.nav-logout:hover i { color: var(--brand-blue-2); }
.profile-link small { display:block; font-size:.68rem; color:#8490a3; }
.nav-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef3ff;
    display: grid;
    place-items: center;
}
.nav-logout { cursor: pointer; }

/* ===== General UI ===== */
.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
}
.page-heading h1 {
    margin: 0;
    font-size: clamp(1.65rem, 2.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.035em;
}
.page-heading h1 i { color: var(--brand-blue-2); margin-right: 8px; }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .68rem;
    font-weight: 800;
    color: var(--brand-blue-2);
    margin-bottom: 5px;
}
.card {
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: var(--app-shadow);
}
.card-header {
    border-bottom-color: var(--app-border);
    background: #fbfcfe;
}
.form-control, .form-select {
    border-color: #d9e1eb;
    border-radius: 10px;
    min-height: 42px;
}
.form-control:focus, .form-select:focus {
    border-color: #8aaef8;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.10);
}
.btn { border-radius: 10px; font-weight: 650; }
.btn-primary { background: var(--brand-blue-2); border-color: var(--brand-blue-2); }
.btn-primary:hover { background:#084db6; border-color:#084db6; }
.badge { font-weight: 650; }
.app-alert { border: 0; border-radius: 12px; box-shadow: 0 6px 20px rgba(15,23,42,.05); }

/* ===== Order dashboard ===== */
.order-stats .card {
    min-height: 112px;
    transition: transform .16s ease, box-shadow .16s ease;
}
.order-stats .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-hover);
}
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    right:-48px;
    bottom:-55px;
    border-radius:50%;
    background: currentColor;
    opacity:.055;
}
.stat-card .card-body { position:relative; z-index:1; padding:18px 20px; }
.stat-label {
    color:#667085;
    font-size:.79rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:7px;
}
.stat-icon {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#eef4ff;
    color:var(--brand-blue-2);
}
.stat-value {
    font-size:1.85rem;
    line-height:1;
    font-weight:850;
    letter-spacing:-.04em;
}
.stat-active { color:#2563eb; }
.stat-today { color:#0f766e; }
.stat-overdue { color:#dc2626; }
.stat-completed { color:#475569; }

/* Statistics values: restore distinct accent colors in light theme. */
.order-stats .stat-active .stat-value { color:#2563eb !important; }
.order-stats .stat-today .stat-value { color:#0f8a72 !important; }
.order-stats .stat-overdue .stat-value { color:#dc2626 !important; }
.order-stats .stat-completed .stat-value { color:#3f5f86 !important; }


/* ===== Filters ===== */
.filters-toolbar {
    background: #fff !important;
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
    padding: 7px 10px;
}
.filters-inner {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.filters-title {
    flex:0 0 auto;
    color:#1f2937;
    font-size:.9rem;
    font-weight:800;
    padding:9px 7px;
    white-space:nowrap;
}
.filters-title i { color:var(--brand-blue-2); }
.filters-content {
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
}
.filter-nav { flex-wrap:wrap; }
.filters-toolbar .filters-title {
    color:#1f2937 !important;
    font-size:.9rem;
    font-weight:800;
    margin-right: 8px;
}
.filters-toolbar .filters-title i { color:var(--brand-blue-2); }
.filters-toolbar .nav-link {
    color:#344054 !important;
    border-radius:9px;
    padding:9px 11px !important;
    font-weight:650;
}
.filters-toolbar .nav-link:hover,
.filters-toolbar .nav-link:focus { background:#f1f5ff; color:var(--brand-blue-2) !important; }
.filters-toolbar .dropdown-menu {
    border:1px solid var(--app-border);
    border-radius:12px;
    box-shadow:0 14px 35px rgba(15,23,42,.12);
    padding:7px;
}
.filters-toolbar .dropdown-item {
    border-radius:8px;
    padding:8px 10px;
}
.filters-toolbar .dropdown-item:hover { background:#f1f5ff; }
.filters-toolbar .dropdown-item.active { background:#eaf1ff; color:#0b5ed7; }
.filters-toolbar .date-filter-wrapper,
.date-filter-wrapper-mobile {
    position:relative;
    display:flex;
    align-items:center;
}
.filters-toolbar .date-filter {
    border:1px solid #d9e1eb;
    border-radius:9px;
    min-height:38px;
    width:154px;
    padding:7px 10px 7px 36px;
    background:#fff;
    color:#344054;
    cursor:pointer;
}
.filters-toolbar .date-filter:focus {
    border-color:#86b7fe;
    box-shadow:0 0 0 .18rem rgba(13,110,253,.12);
    outline:0;
}
.filters-toolbar .date-filter-icon {
    position:absolute;
    left:12px;
    z-index:2;
    color:#667085;
    pointer-events:none;
}
.filters-toolbar .date-filter::-webkit-calendar-picker-indicator {
    opacity:1;
    cursor:pointer;
}
.filters-toolbar .btn-outline-light {
    color:#475467;
    border-color:#d9e1eb;
    background:#fff;
}
.filters-toolbar .btn-outline-light:hover {
    color:#0b5ed7;
    background:#f1f5ff;
    border-color:#c6d7fa;
}
.filters-toolbar > .container-fluid { padding-left:2px; padding-right:2px; }
.filters-toolbar .navbar-nav { align-items:center; }
.filters-toolbar .nav-item { flex:0 0 auto; }

/* Search in filter bar */
.filters-toolbar input[name="search"] {
    min-height:38px;
    border-radius:9px;
    background:#f8fafc;
}


@media (max-width: 991.98px) {
    .filters-inner { align-items:flex-start; flex-wrap:wrap; }
    .filters-content { width:100%; }
}
/* ===== Orders table ===== */
.orders-table-wrap {
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background:#fff;
    box-shadow:var(--app-shadow);
    overflow:auto;
}
.orders-table-wrap .table {
    margin:0;
    min-width:1100px;
}
.orders-table-wrap .table thead th {
    border-top:0;
    border-bottom:1px solid #e2e7ef;
    color:#667085;
    background:#f8fafc;
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.055em;
    white-space:nowrap;
    padding:13px 10px;
}
.orders-table-wrap .table tbody td {
    border-color:#edf0f4;
    padding:12px 10px;
    color:#344054;
    vertical-align:middle;
}
.orders-table-wrap .table tbody tr {
    transition:background .14s ease;
}
.orders-table-wrap .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color:#fff;
}
.orders-table-wrap .table-hover > tbody > tr:hover > * {
    background-color:#f7faff;
}
.orders-table-wrap .table tbody td:first-child strong { color:#182230; }
.orders-table-wrap .btn-outline-primary {
    border-color:#cbdcff;
    color:#0b5ed7;
    background:#fff;
    width:36px;
    height:34px;
    padding:0;
    display:inline-grid;
    place-items:center;
}
.orders-table-wrap .btn-outline-primary:hover { background:#edf4ff; border-color:#9ebeff; }


@media (min-width: 768px) {
    .orders-table-wrap .orders-data-table thead th:nth-child(7) {
        padding-left:20px !important;
        padding-right:20px !important;
        overflow:visible !important;
        text-overflow:clip !important;
        white-space:nowrap !important;
    }
}

/* ===== Pagination ===== */
.pagination .page-link {
    border-color:#e1e7ef;
    color:#344054;
    border-radius:9px !important;
    margin:0 2px;
}
.pagination .page-item.active .page-link {
    background:#0d6efd;
    border-color:#0d6efd;
}

/* ===== Chat ===== */
.chat-shell { background:var(--app-surface); }
.chat-header { background:linear-gradient(135deg,#f8fbff,#fff); border-bottom:1px solid var(--app-border); }
.chat-avatar { width:42px;height:42px;border-radius:13px;background:#e8f0ff;color:var(--brand-blue-2);display:grid;place-items:center; }
.chat-messages { height:min(62vh,650px); min-height:400px; overflow-y:auto; background:linear-gradient(#f8fafc,#f4f7fb); }
.message { max-width:900px; margin-left:auto; margin-right:auto; }
.message-content { white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 2px 8px rgba(15,23,42,.035); }
.chat-compose { display:flex; gap:10px; align-items:flex-end; }
.chat-compose textarea { flex:1; resize:none; min-height:46px; max-height:180px; }
.chat-send { width:46px; height:46px; padding:0; flex:0 0 46px; }
.chat-status-online { background:#dcfce7; color:#166534; }
.chat-status-pending { background:#fef3c7; color:#92400e; }
.chat-status-error { background:#fee2e2; color:#991b1b; }
.empty-icon { width:64px;height:64px;border-radius:20px;background:#edf2ff;color:var(--brand-blue-2);display:inline-grid;place-items:center;font-size:1.5rem; }
.chat-messages::-webkit-scrollbar { width:8px; }
.chat-messages::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; }

/* ===== Login ===== */
.login-page { min-height:calc(100vh - 130px); display:grid; place-items:center; padding:30px 12px; }
.login-card { width:min(100%,470px); padding:34px; border-radius:22px; }
.login-brand { display:flex; align-items:center; gap:16px; }
.login-logo { width:58px;height:58px;border-radius:17px;background:#f0f4ff;display:grid;place-items:center; }
.login-logo img { width:44px;height:auto;object-fit:contain; }
.login-note { padding:11px 13px; border-radius:10px; background:#f8fafc; color:#64748b; font-size:.85rem; }

/* ===== Mobile ===== */
@media (max-width: 991.98px) {
    .app-navbar { padding:6px 0; }
    .brand-logo { width:245px; }
    .brand-section { display:none; }
    .app-nav-links .nav-link { margin-left:0; }
}
@media (max-width: 768px) {
    .app-main { padding-top:18px; }
    .page-heading { align-items:flex-start; flex-direction:column; }
    .page-heading > div:last-child { width:100%; display:flex; flex-wrap:wrap; }
    .brand-logo { width:215px; }
    .orders-table-wrap { border-radius:13px; }
    .chat-messages { min-height:360px; height:55vh; }
}

/* ===== Order filters: explicit light-toolbar controls ===== */
.filters-toolbar .btn-outline-light,
.filters-toolbar .btn-outline-light:visited {
    color: #0b5ed7 !important;
    background: #eef4ff !important;
    border: 1px solid #c9dafb !important;
    font-weight: 700;
}
.filters-toolbar .btn-outline-light:hover,
.filters-toolbar .btn-outline-light:focus,
.filters-toolbar .btn-outline-light:active {
    color: #084db6 !important;
    background: #dfeaff !important;
    border-color: #a9c5f5 !important;
}
.filters-toolbar .nav-link {
    color: #344054 !important;
}
.filters-toolbar .nav-link i {
    color: #0b5ed7 !important;
}
.filters-toolbar .form-control {
    color: #344054;
    background: #f8fafc;
    border: 1px solid #d9e1eb;
}
.filters-toolbar .form-control::placeholder { color: #98a2b3; }

/* Keep the white application header separate from the filter toolbar. */
.app-navbar .nav-link {
    color: #344054 !important;
}
.app-navbar .nav-link:hover {
    color: var(--brand-blue-2) !important;
}

/* Chat delivery states */
.message-pending .message-content { opacity: .78; }
.message-pending-long .message-content { border-style: dashed !important; }
.message-failed .message-content { border-color: #dc2626 !important; }

/* ===== Refined, darker visual language ===== */
:root {
    --app-bg: #eef2f7;
    --app-surface: #fbfdff;
    --app-text: #182233;
    --app-muted: #667085;
    --app-border: #d7dee8;
    --app-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    --app-shadow-hover: 0 14px 34px rgba(15, 23, 42, .13);
    --control-bg: #eef2f6;
    --control-hover: #e3e9f1;
    --control-text: #273449;
}

body {
    background:
        radial-gradient(circle at 90% 0%, rgba(21,59,158,.045), transparent 28%),
        var(--app-bg);
}

.app-navbar {
    background: #f7f9fc;
    border-bottom-color: #cfd7e2;
    box-shadow: 0 4px 18px rgba(15,23,42,.08);
}

.app-navbar .navbar-toggler { background: #e9edf3; }
.card, .orders-table-wrap { background: var(--app-surface); }
.card-header { background: #eef2f6; }
.form-control, .form-select { background: var(--control-bg); color: var(--control-text); border-color: #cbd5e1; }
.form-control::placeholder { color: #8994a5; }

/* ===== Filters: one row on desktop, no overlapping controls ===== */
.filters-toolbar {
    background: #e3e8ef !important;
    border-color: #cbd4df;
    padding: 8px 10px;
}
.filters-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.filters-content { min-width: 0; display:flex; align-items:center; }
.filter-nav {
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    gap:2px;
    min-width:0;
}
.filters-toolbar .nav-item { flex: 0 0 auto; }
.filters-toolbar .nav-link {
    color:#273449 !important;
    padding:8px 10px !important;
    white-space:nowrap;
}
.filters-toolbar .nav-link:hover,
.filters-toolbar .nav-link:focus {
    background:#d9e2ef;
    color:#0b5ed7 !important;
}
.filters-toolbar .dropdown-menu { background:#f7f9fb; }
.filters-toolbar .date-filter {
    background:#eef2f6;
    color:#273449;
    border-color:#c7d0dc;
}
.filters-toolbar .date-filter-wrapper { flex:0 0 auto; }
.filters-toolbar .btn-outline-light {
    background:#dce7f6 !important;
    border-color:#bdcde2 !important;
    color:#0b5ed7 !important;
}
.filters-toolbar .btn-outline-light:hover {
    background:#cbdcf2 !important;
    color:#084db6 !important;
}
.filter-reset {
    color:#b42318 !important;
    background:#fff1f0 !important;
    border:1px solid #f2b8b5 !important;
    font-weight:800 !important;
}
.filter-reset:hover,
.filter-reset:focus {
    color:#8f1712 !important;
    background:#dc2626 !important;
    border-color:#dc2626 !important;
    box-shadow:0 4px 12px rgba(220,38,38,.22);
}

@media (max-width: 1100px) and (min-width: 992px) {
    .filters-toolbar .nav-link { padding-left:7px !important; padding-right:7px !important; }
    .filters-toolbar input[name="search"] { width:145px !important; }
    .filters-toolbar .date-filter { width:140px; }
}
@media (max-width: 991.98px) and (min-width: 768px) {
    .filters-inner { grid-template-columns:auto minmax(0,1fr); }
    .filters-content { min-width:0; }
    .filter-nav { overflow-x:auto; scrollbar-width:thin; }
    .filters-toolbar .d-md-flex.ms-auto { grid-column:1 / -1; }
}

/* ===== Cleaner chat ===== */
.chat-shell {
    border:1px solid #d4dce7 !important;
    border-radius:20px !important;
    background:var(--app-surface);
    box-shadow:0 14px 38px rgba(15,23,42,.09) !important;
}
.chat-header {
    background:#e9eef5;
    border-bottom:1px solid #d4dce7;
    padding:18px 22px !important;
}
.chat-header h5 { font-size:1.05rem; font-weight:800; color:#172033; }
.chat-header small { color:#667085 !important; }
.chat-avatar {
    width:44px; height:44px; border-radius:13px;
    background:#dbe7fb; color:#0b5ed7;
}
.chat-messages {
    height:min(64vh,680px); min-height:420px;
    padding:22px 24px !important;
    background:#e8edf3;
}
.message {
    max-width:860px;
    margin:0 auto 14px;
}
.message-head {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 4px 5px;
}
.message-head .message-author { color:#0b5ed7; font-weight:800; }
.message-head .message-time { color:#7b8798; font-size:.75rem; }
.message-head .message-role { margin-left:auto; }
.message-content {
    border:1px solid #d4dce7 !important;
    border-radius:14px !important;
    background:#f8fafc !important;
    color:#263246;
    padding:12px 15px !important;
    box-shadow:0 3px 10px rgba(15,23,42,.05);
    line-height:1.5;
}
.message-own .message-head { justify-content:flex-end; }
.message-own .message-author { color:#146c43; }
.message-own .message-content {
    background:#dbeafe !important;
    border-color:#bfd6f7 !important;
}
.message-pending .message-content { opacity:.7; }
.chat-input {
    background:#f1f4f7;
    border-top-color:#d4dce7 !important;
    padding:16px 20px !important;
}
.chat-compose { background:#e7ebf0; border:1px solid #cbd5e1; border-radius:15px; padding:5px; }
.chat-compose textarea {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    min-height:46px;
    padding:10px 12px;
}
.chat-send { border-radius:11px; width:44px; height:44px; }
.chat-status { border:1px solid transparent; padding:.42rem .65rem; }
.chat-status-online { background:#d8f3e4; color:#166534; border-color:#b9e5cb; }
.chat-status-pending { background:#f8e9bd; color:#7a4f01; border-color:#ecd58e; }
.chat-status-error { background:#f9d9d7; color:#8f1712; border-color:#efb5b1; }

/* ===== Theme toggle ===== */
.theme-toggle {
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:38px;
    padding:7px 11px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#e8edf3;
    color:#344054;
    font-weight:700;
    cursor:pointer;
    transition:.18s ease;
}
.theme-toggle:hover { background:#dbe3ed; color:#0b5ed7; border-color:#b8c6d8; }
.theme-toggle i { font-size:.9rem; }

/* ===== Full dark theme ===== */
html[data-theme="dark"] {
    --app-bg:#111827;
    --app-surface:#18212f;
    --app-text:#e6edf7;
    --app-muted:#9aa8bb;
    --app-border:#2b3748;
    --app-shadow:0 10px 28px rgba(0,0,0,.25);
    --app-shadow-hover:0 16px 36px rgba(0,0,0,.34);
    --control-bg:#202b3a;
    --control-hover:#293647;
    --control-text:#e6edf7;
}
html[data-theme="dark"] body {
    color:var(--app-text);
    background:radial-gradient(circle at 90% 0%, rgba(46,91,180,.16), transparent 30%), var(--app-bg);
}
html[data-theme="dark"] .app-navbar { background:#151d2a; border-bottom-color:#2b3748; }
html[data-theme="dark"] .app-navbar .nav-link,
html[data-theme="dark"] .profile-link,
html[data-theme="dark"] .nav-logout { color:#d7e0ed !important; }
html[data-theme="dark"] .app-nav-links .nav-link i,
html[data-theme="dark"] .profile-link > .nav-avatar i,
html[data-theme="dark"] .nav-logout i { color:#9aabc1; }
html[data-theme="dark"] .app-nav-links .nav-link:hover,
html[data-theme="dark"] .profile-link:hover,
html[data-theme="dark"] .nav-logout:hover { background:#202b3a; color:#72a5ff !important; }
html[data-theme="dark"] .brand-section { border-left-color:#39475a; }
html[data-theme="dark"] .nav-avatar { background:#223047; }
html[data-theme="dark"] .theme-toggle { background:#202b3a; border-color:#35445a; color:#d7e0ed; }
html[data-theme="dark"] .theme-toggle:hover { background:#293647; color:#8cb5ff; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .orders-table-wrap { background:#18212f; border-color:#2b3748; }
html[data-theme="dark"] .card-header { background:#1d2837; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background:#202b3a; border-color:#35445a; color:#e6edf7; }
html[data-theme="dark"] .form-control::placeholder { color:#77869a; }
html[data-theme="dark"] .filters-toolbar { background:#1c2634 !important; border-color:#334154; }
html[data-theme="dark"] .filters-title,
html[data-theme="dark"] .filters-toolbar .filters-title,
html[data-theme="dark"] .filters-toolbar .nav-link { color:#d7e0ed !important; }
html[data-theme="dark"] .filters-toolbar .nav-link:hover,
html[data-theme="dark"] .filters-toolbar .nav-link:focus { background:#293647; color:#8cb5ff !important; }
html[data-theme="dark"] .filters-toolbar .dropdown-menu { background:#1c2634; border-color:#35445a; }
html[data-theme="dark"] .filters-toolbar .dropdown-item { color:#d7e0ed; }
html[data-theme="dark"] .filters-toolbar .dropdown-item:hover { background:#293647; }
html[data-theme="dark"] .filters-toolbar .dropdown-item.active { background:#263b61; color:#8cb5ff; }
html[data-theme="dark"] .filters-toolbar .date-filter { background:#202b3a; color:#e6edf7; border-color:#35445a; }
html[data-theme="dark"] .filters-toolbar .btn-outline-light { background:#263b61 !important; border-color:#3d5b8c !important; color:#8cb5ff !important; }
html[data-theme="dark"] .filter-reset { background:#421f21 !important; border-color:#783332 !important; color:#ff8b86 !important; }
html[data-theme="dark"] .filter-reset:hover { background:#b42318 !important; color:#fff !important; }
html[data-theme="dark"] .orders-table-wrap .table thead th { background:#1d2837; color:#aab7c9; border-color:#2b3748; }
html[data-theme="dark"] .orders-table-wrap .table tbody td { color:#d7e0ed; border-color:#2b3748; }
html[data-theme="dark"] .orders-table-wrap .table-hover > tbody > tr:hover > * { background:#202b3a; }
html[data-theme="dark"] .orders-table-wrap .table-striped > tbody > tr:nth-of-type(odd) > * { background:#18212f; }
html[data-theme="dark"] .chat-header { background:#1c2634; border-color:#2b3748; }
html[data-theme="dark"] .chat-header h5 { color:#e6edf7; }
html[data-theme="dark"] .chat-header small { color:#9aa8bb !important; }
html[data-theme="dark"] .chat-messages { background:#121a25; }
html[data-theme="dark"] .message-head .message-time { color:#8c9aae; }
html[data-theme="dark"] .message-content { background:#1e2938 !important; border-color:#344256 !important; color:#dce5f1; }
html[data-theme="dark"] .message-own .message-content { background:#1e3a5f !important; border-color:#315b8e !important; }
html[data-theme="dark"] .chat-input { background:#1a2431; border-color:#2b3748 !important; }
html[data-theme="dark"] .chat-compose { background:#202b3a; border-color:#35445a; }
html[data-theme="dark"] .chat-compose textarea { color:#e6edf7; }
html[data-theme="dark"] .app-alert { background:#202b3a; color:#dce5f1; }
html[data-theme="dark"] .text-muted { color:#9aa8bb !important; }
html[data-theme="dark"] .empty-icon { background:#223047; }

@media (max-width: 767.98px) {
    .theme-toggle-label { display:none; }
    .theme-toggle { width:40px; justify-content:center; padding:7px; }
    .filters-inner { display:flex; flex-wrap:wrap; }
    .filters-content { width:100%; }
    .filter-nav { width:100%; overflow-x:auto; }
}


/* =========================================================
   FINAL ORDERS UI POLISH
   - one border around the orders table
   - matching header / filter bar surface
   - horizontal filter controls on desktop
   ========================================================= */

:root {
    --toolbar-bg: #e5eaf2;
    --toolbar-border: #cbd5e1;
    --toolbar-text: #26354a;
}

/* Header and filters use the same surface */
.app-navbar {
    background: var(--toolbar-bg) !important;
    border-bottom: 1px solid var(--toolbar-border) !important;
    box-shadow: 0 4px 18px rgba(18, 38, 63, .06);
}

/* Keep the filter bar as one horizontal flex row on desktop.
   Bootstrap's .navbar-nav defaults to column; override it explicitly. */
.filters-toolbar {
    background: var(--toolbar-bg) !important;
    border: 1px solid var(--toolbar-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(18, 38, 63, .055);
    padding: 8px 12px !important;
}

.filters-toolbar .filters-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-width: 0;
}

.filters-toolbar .filters-title {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 9px 6px !important;
}

.filters-toolbar .filters-content {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    gap: 10px !important;
}

.filters-toolbar .filter-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 2px !important;
}

.filters-toolbar .filter-nav > .nav-item {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
}

.filters-toolbar .filter-nav .nav-link {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px;
}

.filters-toolbar .date-filter-wrapper {
    flex: 0 0 auto !important;
}

.filters-toolbar #desktop-date-form {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.filters-toolbar .d-md-flex.ms-auto {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Reset button: clearly red */
.filters-toolbar .filter-reset {
    color: #b42318 !important;
    background: #fff0ee !important;
    border: 1px solid #f0b7b2 !important;
    border-radius: 9px !important;
    font-weight: 800 !important;
}
.filters-toolbar .filter-reset:hover,
.filters-toolbar .filter-reset:focus-visible {
    color: #fff !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 4px 12px rgba(220,38,38,.25);
}

/* One border only around the table */
.orders-table-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.orders-table-card > .card-body {
    padding: 0 !important;
}
.orders-table-wrap {
    border: 1px solid var(--app-border) !important;
    border-radius: 16px !important;
    overflow: auto;
}

/* Matching surfaces in dark mode */
html[data-theme="dark"] {
    --toolbar-bg: #1c2634;
    --toolbar-border: #334154;
}
html[data-theme="dark"] .app-navbar {
    background: var(--toolbar-bg) !important;
    border-bottom-color: var(--toolbar-border) !important;
}
html[data-theme="dark"] .filters-toolbar {
    background: var(--toolbar-bg) !important;
    border-color: var(--toolbar-border) !important;
}
html[data-theme="dark"] .orders-table-wrap {
    border-color: var(--app-border) !important;
}

/* At narrower widths allow the filter row to scroll instead of stacking
   controls on top of each other. */
@media (max-width: 1199.98px) and (min-width: 768px) {
    .filters-toolbar .filters-inner {
        overflow: hidden;
    }
    .filters-toolbar .filters-content {
        overflow: hidden;
    }
    .filters-toolbar .filter-nav {
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }
    .filters-toolbar .d-md-flex.ms-auto {
        flex: 0 0 auto !important;
    }
    .filters-toolbar input[name="search"] {
        width: 155px !important;
    }
}

@media (max-width: 767.98px) {
    .filters-toolbar .filters-inner {
        flex-wrap: wrap !important;
    }
    .filters-toolbar .filters-content {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .filters-toolbar .filter-nav {
        width: 100% !important;
        overflow-x: auto;
    }
}

/* =========================================================
   MOBILE ORDERS / FINAL MICRO-POLISH
   ========================================================= */

/* One extra pixel between filter icons and their labels. */
.filters-toolbar .filter-nav .nav-link {
    gap: 1px !important;
}

/* The filter title is a semantic button on mobile, but remains plain on desktop. */
.filters-mobile-toggle {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.filters-mobile-toggle > span {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.filters-mobile-chevron {
    display: none;
    color: #64748b !important;
    transition: transform .18s ease;
}

/* Mobile header actions: theme + clear menu icon. */
.mobile-header-actions {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.mobile-header-actions .mobile-theme-toggle {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
}
.mobile-header-actions .navbar-toggler {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    color: #334155;
    background: #e9edf3;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
}
.mobile-header-actions .navbar-toggler i {
    font-size: 1.05rem;
}

/* Mobile cards should breathe and have softer corners. */
.order-card {
    border-radius: 17px !important;
    overflow: hidden;
}

/* Mobile date search: same visual language as the main date control. */
.date-filter-wrapper-mobile {
    min-height: 46px !important;
    border: 1px solid #c7d3e2;
    border-radius: 11px;
    background: #eef2f6;
    overflow: hidden;
}
.date-filter-wrapper-mobile .date-filter {
    width: 100% !important;
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-left: 38px !important;
    padding-right: 38px !important;
}
.date-filter-wrapper-mobile .date-filter-icon {
    left: 12px;
    color: #0b5ed7;
}
#mobile-date-form > .btn-primary {
    min-width: 46px;
    min-height: 46px;
    border-radius: 11px;
}

/* Mobile filter panel is a collapsible control group. */
@media (max-width: 767.98px) {
    .mobile-header-actions {
        display: inline-flex;
    }

    .app-navbar .container-fluid {
        min-height: 52px;
    }

    .app-navbar .app-brand {
        min-width: 0;
        margin-right: 8px;
        padding-right: 0 !important;
    }
    .app-navbar .brand-logo {
        width: min(215px, calc(100vw - 145px));
        max-width: 215px;
    }

    .filters-toolbar {
        padding: 7px !important;
        border-radius: 14px !important;
    }
    .filters-toolbar .filters-inner {
        display: block !important;
    }
    .filters-toolbar .filters-title {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 !important;
        padding: 8px 10px !important;
        border-radius: 10px;
        color: #1f2937 !important;
    }
    .filters-toolbar .filters-title:active,
    .filters-toolbar .filters-title:focus-visible {
        outline: 0;
        background: #dce6f3;
    }
    .filters-mobile-chevron {
        display: block;
    }
    .filters-toolbar .filters-content {
        display: none !important;
        width: 100% !important;
        margin-top: 6px;
        padding: 5px;
        border-top: 1px solid #ccd6e3;
    }
    .filters-toolbar.filters-open .filters-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .filters-toolbar.filters-open .filters-mobile-chevron {
        transform: rotate(180deg);
    }

    .filters-toolbar .filter-nav {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important;
        overflow: visible !important;
    }
    .filters-toolbar .filter-nav > .nav-item {
        width: 100% !important;
    }
    .filters-toolbar .filter-nav .nav-link {
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
        padding: 9px 11px !important;
        border: 1px solid #d1dbe8;
        background: #f4f7fa;
        border-radius: 10px;
    }
    .filters-toolbar .filter-nav .dropdown-toggle::after {
        margin-left: auto;
    }
    .filters-toolbar .filter-nav .filter-reset {
        justify-content: center;
        color: #b42318 !important;
        background: #fff0ee !important;
    }

    .filters-toolbar .date-filter-wrapper {
        width: 100%;
    }
    .filters-toolbar #desktop-date-form {
        width: 100%;
        display: flex !important;
    }
    .filters-toolbar #desktop-date-form .date-filter-wrapper {
        flex: 1 1 auto;
    }
    .filters-toolbar #desktop-date-form .btn {
        min-width: 44px;
    }

    .filters-toolbar .d-md-flex.ms-auto {
        width: 100%;
        margin-left: 0 !important;
        margin-top: 5px;
    }
    .filters-toolbar #desktop-search-form {
        width: 100%;
    }
    .filters-toolbar #desktop-search-form input[name="search"] {
        width: 100% !important;
        flex: 1;
    }

    /* Put create-order action beside the mobile page title. */
    .orders-heading {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .orders-heading > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }
    .orders-heading > div:last-child {
        width: auto !important;
        flex: 0 0 auto;
    }
    .orders-heading .order-create-btn {
        white-space: nowrap;
        padding: 9px 11px;
        font-size: .82rem;
        border-radius: 10px;
    }
    .orders-heading .order-create-btn .create-order-label {
        display: inline;
    }
    .orders-heading h1 {
        font-size: clamp(1.35rem, 6vw, 1.7rem);
    }
}

/* Dark theme equivalents for the mobile additions. */
html[data-theme="dark"] .mobile-header-actions .navbar-toggler {
    background: #202b3a;
    border-color: #35445a;
    color: #d7e0ed;
}
html[data-theme="dark"] .filters-mobile-chevron {
    color: #9aa8bb !important;
}
html[data-theme="dark"] .filters-toolbar .filters-title:active,
html[data-theme="dark"] .filters-toolbar .filters-title:focus-visible {
    background: #293647;
}
html[data-theme="dark"] .filters-toolbar .filters-content {
    border-top-color: #35445a;
}
html[data-theme="dark"] .filters-toolbar .filter-nav .nav-link {
    background: #202b3a;
    border-color: #35445a;
    color: #d7e0ed !important;
}
html[data-theme="dark"] .date-filter-wrapper-mobile {
    background: #202b3a;
    border-color: #35445a;
}


/* =========================================================
   MOBILE DATE FILTER — clean standalone control
   The date selector inside the collapsible filters is intentionally
   hidden on phones; the dedicated date search below remains.
   ========================================================= */
@media (max-width: 767.98px) {
    /* Do not duplicate the date control inside the Filters drawer. */
    .filters-toolbar .date-filter-nav-item {
        display: none !important;
    }

    /* Standalone mobile date search */
    .mobile-date-search-card {
        padding: 10px !important;
        border: 1px solid #d1dbe8 !important;
        border-radius: 16px !important;
        background: #f8fafc !important;
        box-shadow: 0 5px 16px rgba(15, 23, 42, .06) !important;
    }

    .mobile-date-search-form {
        width: 100%;
        min-height: 56px;
        gap: 8px !important;
    }

    .mobile-date-search-card .date-filter-wrapper-mobile {
        min-height: 50px !important;
        height: 50px;
        flex: 1 1 auto;
        border: 1px solid #cbd7e6 !important;
        border-radius: 12px !important;
        background: #eef3f8 !important;
        box-shadow: inset 0 1px 1px rgba(15, 23, 42, .03);
    }

    .mobile-date-search-card .date-filter-wrapper-mobile .date-filter {
        min-height: 50px !important;
        height: 50px;
        width: 100% !important;
        padding: 8px 42px 8px 42px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #24344d !important;
        font-size: .9rem;
        font-weight: 650;
    }

    .mobile-date-search-card .date-filter-wrapper-mobile .date-filter-icon {
        left: 13px;
        color: #0b5ed7 !important;
        font-size: .95rem;
        z-index: 2;
    }

    .mobile-date-search-card .date-filter-wrapper-mobile .date-filter::-webkit-calendar-picker-indicator {
        opacity: 1;
        width: 18px;
        height: 18px;
        margin-right: 10px;
        cursor: pointer;
    }

    .mobile-date-search-button,
    .mobile-date-clear {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 12px !important;
    }

    .mobile-date-search-button {
        border: 1px solid #0b5ed7 !important;
        background: #0b5ed7 !important;
        box-shadow: 0 4px 10px rgba(11, 94, 215, .18);
    }

    .mobile-date-search-button:hover {
        background: #084db6 !important;
        border-color: #084db6 !important;
    }

    .mobile-date-clear {
        flex-basis: 44px;
        width: 44px;
        color: #b42318 !important;
        background: #fff1f0 !important;
        border: 1px solid #f2b8b5 !important;
    }
}

html[data-theme="dark"] .mobile-date-search-card {
    background: #202b3a !important;
    border-color: #35445a !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"] .mobile-date-search-card .date-filter-wrapper-mobile {
    background: #182230 !important;
    border-color: #35445a !important;
}

html[data-theme="dark"] .mobile-date-search-card .date-filter {
    color: #e5edf7 !important;
}


/* =========================================================
   MOBILE DATE FILTER — v10 hard override
   The date control inside the collapsible Filters drawer is
   desktop-only. Mobile uses the dedicated date card below.
   ========================================================= */
@media (max-width: 767.98px) {
    .filters-toolbar .mobile-date-hidden,
    .filters-toolbar .date-filter-nav-item {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .mobile-date-search-card {
        margin-top: 14px !important;
        padding: 12px !important;
        border: 1px solid #cbd7e6 !important;
        border-radius: 18px !important;
        background: #f4f7fb !important;
        box-shadow: 0 8px 20px rgba(20, 40, 70, .07) !important;
    }

    .mobile-date-search-form {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .mobile-date-search-card .date-filter-wrapper-mobile {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-height: 56px !important;
        height: 56px !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        border: 1px solid #c6d5e8 !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03) !important;
    }

    .mobile-date-search-card .date-filter-wrapper-mobile .date-filter-icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #0b5ed7 !important;
        font-size: 1rem !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }

    .mobile-date-search-card .date-filter-wrapper-mobile .date-filter {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 48px 0 42px !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 14px !important;
        background: transparent !important;
        color: #1f3048 !important;
        font-size: .92rem !important;
        font-weight: 650 !important;
        appearance: auto !important;
    }

    /* Hide the browser's black glyph but keep the input clickable. */
    .mobile-date-search-card .date-filter-wrapper-mobile .date-filter::-webkit-calendar-picker-indicator {
        opacity: 0 !important;
        width: 42px !important;
        height: 56px !important;
        cursor: pointer !important;
    }

    .mobile-date-picker-icon-right {
        position: absolute !important;
        right: 13px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #18324f !important;
        font-size: .95rem !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .mobile-date-search-button {
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        border: 1px solid #0b5ed7 !important;
        background: #0b5ed7 !important;
        box-shadow: 0 5px 12px rgba(11, 94, 215, .20) !important;
    }

    .mobile-date-search-button:hover,
    .mobile-date-search-button:focus {
        background: #084db6 !important;
        border-color: #084db6 !important;
    }
}

html[data-theme="dark"] .mobile-date-search-card {
    background: #1c2634 !important;
    border-color: #35445a !important;
}
html[data-theme="dark"] .mobile-date-search-card .date-filter-wrapper-mobile {
    background: #202b3a !important;
    border-color: #40516a !important;
}
html[data-theme="dark"] .mobile-date-search-card .date-filter-wrapper-mobile .date-filter {
    color: #e6edf7 !important;
}
html[data-theme="dark"] .mobile-date-picker-icon-right {
    color: #d7e0ed !important;
}

/* =========================================================
   FILTERS — v11 visual refinement
   ========================================================= */
.filters-toolbar .filter-nav .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

/* Active filters use a fresh lime-green accent instead of checkmarks. */
.filters-toolbar .filter-nav .nav-link.active-filter {
    color: #23340b !important;
    background: #c7df4a !important;
    border-color: #b2ce35 !important;
    box-shadow: 0 3px 10px rgba(156, 181, 35, .18);
}
.filters-toolbar .filter-nav .nav-link.active-filter:hover,
.filters-toolbar .filter-nav .nav-link.active-filter:focus {
    color: #1d2b08 !important;
    background: #b9d73a !important;
    border-color: #a8c92e !important;
}
.filters-toolbar .filter-nav .nav-link.active-filter::after {
    border-top-color: currentColor !important;
}

/* Reset action: quiet, integrated with the toolbar rather than a warning button. */
.filters-toolbar .filter-nav .filter-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #64748b !important;
    background: #eef2f6 !important;
    border: 1px solid #d5dee9 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.filters-toolbar .filter-nav .filter-reset i {
    color: #ef6b6b !important;
}
.filters-toolbar .filter-nav .filter-reset:hover,
.filters-toolbar .filter-nav .filter-reset:focus {
    color: #334155 !important;
    background: #e4eaf1 !important;
    border-color: #c5d0dd !important;
}
.filters-toolbar .filter-nav .filter-reset:hover i {
    color: #dc3f3f !important;
}

/* Search should consume the available width. */
.filters-toolbar #desktop-search-form {
    width: min(100%, 360px) !important;
}
.filters-toolbar #desktop-search-form input[name="search"] {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Any date target opens the native picker. */
.date-picker-click-target {
    cursor: pointer !important;
}

/* Dark theme */
html[data-theme="dark"] .filters-toolbar .filter-nav .nav-link.active-filter {
    color: #1c2908 !important;
    background: #b8d83d !important;
    border-color: #a9c82f !important;
}
html[data-theme="dark"] .filters-toolbar .filter-nav .filter-reset {
    color: #d7e0ed !important;
    background: #283445 !important;
    border-color: #3b4b60 !important;
}
html[data-theme="dark"] .filters-toolbar .filter-nav .filter-reset i {
    color: #ff8585 !important;
}
html[data-theme="dark"] .filters-toolbar .filter-nav .filter-reset:hover {
    color: #f3f7fb !important;
    background: #334155 !important;
    border-color: #4a5b72 !important;
}

/* Mobile: active controls stay clearly highlighted; search uses full row. */
@media (max-width: 767.98px) {
    .filters-toolbar .filter-nav .nav-link {
        gap: 9px !important;
    }

    .filters-toolbar .filter-nav .nav-link.active-filter {
        border-color: #b2ce35 !important;
        box-shadow: inset 0 0 0 1px rgba(178, 206, 53, .18);
    }

    .filters-toolbar .filter-nav .filter-reset {
        min-height: 44px !important;
        width: 100% !important;
        margin-top: 2px !important;
        border-radius: 10px !important;
        background: #f1f4f7 !important;
    }

    .filters-toolbar .filters-content > .navbar-nav.d-md-none {
        width: 100% !important;
        margin: 8px 0 0 !important;
    }
    .filters-toolbar #mobile-search-form {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 8px !important;
    }
    .filters-toolbar #mobile-search-form input[name="search"] {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        height: 44px !important;
        border-radius: 10px !important;
    }
    .filters-toolbar #mobile-search-form button {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 10px !important;
    }

    .mobile-date-search-card .date-filter-wrapper-mobile {
        cursor: pointer !important;
        touch-action: manipulation;
    }
    .mobile-date-search-card .date-filter-wrapper-mobile .date-filter {
        cursor: pointer !important;
    }
}

html[data-theme="dark"] .mobile-date-search-card .date-filter-wrapper-mobile {
    background: #202b3a !important;
    border-color: #40516a !important;
}
html[data-theme="dark"] .mobile-date-search-card .date-filter-wrapper-mobile .date-filter {
    color: #e6edf7 !important;
}


/* =========================================================
   FINAL FILTER UI FIX — v12
   ========================================================= */
.filters-toolbar .filter-nav .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    position: relative !important;
}

/* No checkmarks / generated symbols on the filter controls. */
.filters-toolbar .filter-nav .nav-link::before,
.filters-toolbar .filter-nav .nav-link::after {
    content: none !important;
}
.filters-toolbar .filter-nav .nav-link.dropdown-toggle::after {
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: auto !important;
    border-top: .35em solid currentColor !important;
    border-right: .35em solid transparent !important;
    border-left: .35em solid transparent !important;
    border-bottom: 0 !important;
}

/* Active filters: highlight the whole control, never append a check. */
.filters-toolbar .filter-nav .nav-link.active-filter,
html[data-theme="dark"] .filters-toolbar .filter-nav .nav-link.active-filter {
    color: #203108 !important;
    background: #c9e84a !important;
    border: 1px solid #b2d335 !important;
    box-shadow: 0 3px 10px rgba(142, 174, 35, .18) !important;
}
.filters-toolbar .filter-nav .nav-link.active-filter:hover,
.filters-toolbar .filter-nav .nav-link.active-filter:focus {
    color: #182705 !important;
    background: #b9dd32 !important;
    border-color: #9fc52b !important;
}

/* Reset: quiet, compact, part of the filter language. */
.filters-toolbar .filter-nav .filter-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    color: #475569 !important;
    background: #eef2f6 !important;
    border: 1px solid #d2dbe7 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.filters-toolbar .filter-nav .filter-reset i {
    color: #64748b !important;
}
.filters-toolbar .filter-nav .filter-reset:hover,
.filters-toolbar .filter-nav .filter-reset:focus-visible {
    color: #334155 !important;
    background: #e3e9f0 !important;
    border-color: #c3cedb !important;
    box-shadow: 0 3px 9px rgba(18,38,63,.08) !important;
}
.filters-toolbar .filter-nav .filter-reset:hover i {
    color: #dc4c4c !important;
}
html[data-theme="dark"] .filters-toolbar .filter-nav .filter-reset {
    color: #d7e0ed !important;
    background: #273343 !important;
    border-color: #3b4b60 !important;
}
html[data-theme="dark"] .filters-toolbar .filter-nav .filter-reset:hover,
html[data-theme="dark"] .filters-toolbar .filter-nav .filter-reset:focus-visible {
    background: #334155 !important;
    border-color: #4b5c72 !important;
    color: #f3f7fb !important;
}

/* Search fills the available row on mobile. */
@media (max-width: 767.98px) {
    .filters-toolbar .filter-nav .nav-link { gap: 10px !important; }
    .filters-toolbar .filter-nav .filter-reset {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 11px !important;
        margin-top: 2px !important;
    }
    .filters-toolbar #mobile-search-form {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
        margin: 8px 0 0 !important;
    }
    .filters-toolbar #mobile-search-form input[name="search"] {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        height: 44px !important;
        margin: 0 !important;
        border-radius: 11px !important;
    }
    .filters-toolbar #mobile-search-form button {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 44px !important;
        border-radius: 11px !important;
    }
}

/* The entire date control is one click target. */
.mobile-date-search-card .date-filter-wrapper-mobile {
    position: relative !important;
    cursor: pointer !important;
    overflow: hidden !important;
}
.mobile-date-search-card .date-filter-wrapper-mobile .date-filter {
    cursor: pointer !important;
    pointer-events: none !important;
}
.mobile-date-search-card .date-filter-wrapper-mobile > * {
    pointer-events: none !important;
}
.mobile-date-search-card .date-filter-wrapper-mobile .date-filter {
    pointer-events: none !important;
}


/* =========================================================
   FINAL FILTER MICRO-FIX — v13
   ========================================================= */

/* Sorting is never visually marked as an active filter. */
.filters-toolbar .filter-nav #sortDropdown.active-filter {
    color: inherit !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.filters-toolbar .filter-nav #sortDropdown.active-filter:hover,
.filters-toolbar .filter-nav #sortDropdown.active-filter:focus {
    color: inherit !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* More breathing room between desktop filter controls. */
@media (min-width: 768px) {
    .filters-toolbar .filter-nav {
        gap: 8px !important;
    }
    .filters-toolbar .filter-nav > .nav-item {
        margin-right: 0 !important;
    }
}

/* Mobile search: the search field spans the full width of the filter panel. */
@media (max-width: 767.98px) {
    .filters-toolbar .filters-content > ul.navbar-nav.d-md-none {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 8px 0 0 !important;
    }
    .filters-toolbar .filters-content > ul.navbar-nav.d-md-none > li.nav-item {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .filters-toolbar #mobile-search-form {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
    }
    .filters-toolbar #mobile-search-form input[name="search"] {
        display: block !important;
        flex: 1 1 auto !important;
        width: 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .filters-toolbar #mobile-search-form button {
        flex: 0 0 48px !important;
        width: 48px !important;
        margin: 0 !important;
    }
}


/* =========================================================
   ORDERS UI — v14
   ========================================================= */

/* Mobile filter rhythm: every control gets the same vertical spacing. */
@media (max-width: 767.98px) {
    .filters-toolbar .filter-nav {
        gap: 8px !important;
    }
}

/* Desktop date picker: one large click target, visually matching
   the standalone mobile date control. */
@media (min-width: 768px) {
    .filters-toolbar #desktop-date-form {
        gap: 8px !important;
    }

    .filters-toolbar #desktop-date-form .date-filter-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 170px !important;
        min-width: 170px !important;
        height: 46px !important;
        border: 1px solid #c6d5e8 !important;
        border-radius: 12px !important;
        background: #eef3f8 !important;
        overflow: hidden !important;
        cursor: pointer !important;
    }

    .filters-toolbar #desktop-date-form .date-filter {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 42px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #24344d !important;
        font-size: .9rem !important;
        font-weight: 650 !important;
        cursor: pointer !important;
        pointer-events: none !important;
        outline: 0 !important;
    }

    .filters-toolbar #desktop-date-form .date-filter-icon {
        left: 13px !important;
        color: #0b5ed7 !important;
        font-size: .95rem !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }

    .desktop-date-picker-icon-right {
        position: absolute !important;
        right: 13px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #18324f !important;
        font-size: .9rem !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }

    .filters-toolbar #desktop-date-form .date-filter::-webkit-calendar-picker-indicator {
        opacity: 0 !important;
        width: 42px !important;
        height: 46px !important;
    }

    .filters-toolbar #desktop-date-form > .btn {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }
}

html[data-theme="dark"] .filters-toolbar #desktop-date-form .date-filter-wrapper {
    background: #202b3a !important;
    border-color: #40516a !important;
}
html[data-theme="dark"] .filters-toolbar #desktop-date-form .date-filter {
    color: #e6edf7 !important;
}
html[data-theme="dark"] .desktop-date-picker-icon-right {
    color: #d7e0ed !important;
}

/* Desktop orders table: predictable column widths and generous,
   consistent cell padding so content never hugs the edges. */
@media (min-width: 768px) {
    .orders-table-wrap .orders-data-table {
        table-layout: fixed !important;
        min-width: 1200px !important;
        width: 100% !important;
    }

    .orders-data-table .col-creator { width: 14%; }
    .orders-data-table .col-document { width: 11%; }
    .orders-data-table .col-city { width: 12%; }
    .orders-data-table .col-client { width: 13%; }
    .orders-data-table .col-phone { width: 14%; }
    .orders-data-table .col-car { width: 10%; }
    .orders-data-table .col-status { width: 9%; }
    .orders-data-table .col-date { width: 10%; }
    .orders-data-table .col-actions { width: 7%; }

    .orders-table-wrap .orders-data-table thead th,
    .orders-table-wrap .orders-data-table tbody td {
        padding-left: 16px !important;
        padding-right: 16px !important;
        vertical-align: middle !important;
    }

    .orders-table-wrap .orders-data-table thead th {
        height: 46px;
        line-height: 1.2;
    }

    .orders-table-wrap .orders-data-table tbody td {
        height: 58px;
        line-height: 1.35;
    }

    .orders-data-table th:last-child,
    .orders-data-table td:last-child {
        text-align: center !important;
    }

    .orders-data-table td:nth-child(1),
    .orders-data-table td:nth-child(2),
    .orders-data-table td:nth-child(3),
    .orders-data-table td:nth-child(4),
    .orders-data-table td:nth-child(5),
    .orders-data-table td:nth-child(6),
    .orders-data-table td:nth-child(7),
    .orders-data-table td:nth-child(8) {
        text-align: left !important;
    }

    .orders-data-table td:nth-child(5) a {
        white-space: nowrap;
    }

    .orders-data-table td:nth-child(6),
    .orders-data-table td:nth-child(7),
    .orders-data-table td:nth-child(8) {
        white-space: nowrap;
    }

    .orders-data-table td .badge {
        max-width: 100%;
        vertical-align: middle;
    }
}

html[data-theme="dark"] .filters-toolbar #desktop-date-form .date-filter-wrapper {
    box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}


/* =========================================================
   FINAL ORDERS UI FIX — v15
   ========================================================= */

/* Mobile: give the three filter controls a visibly equal vertical rhythm. */
@media (max-width: 767.98px) {
    .filters-toolbar .filter-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        row-gap: 12px !important;
        column-gap: 0 !important;
    }

    .filters-toolbar .filter-nav > .nav-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .filters-toolbar .filter-nav > .nav-item + .nav-item {
        margin-top: 0 !important;
    }

    .filters-toolbar .filter-nav .nav-link {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Desktop date field: enough room for the complete DD.MM.YYYY value. */
@media (min-width: 768px) {
    .filters-toolbar #desktop-date-form .date-filter-wrapper {
        width: 196px !important;
        min-width: 196px !important;
    }

    .filters-toolbar #desktop-date-form .date-filter {
        min-width: 0 !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    .filters-toolbar #desktop-date-form .date-filter::-webkit-datetime-edit {
        min-width: 120px !important;
    }
}

/* Orders table: a real outer frame around the complete table, not just its header. */
.orders-table-wrap {
    border: 2px solid #1f2937 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.orders-table-wrap .orders-data-table {
    border: 0 !important;
    margin: 0 !important;
}

.orders-table-wrap .orders-data-table thead th:first-child {
    border-left: 0 !important;
}

.orders-table-wrap .orders-data-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Manual page jump control. */
.pagination-page-jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.pagination-page-jump label {
    margin: 0;
    color: #64748b;
    font-size: .84rem;
    font-weight: 700;
}

.pagination-page-jump input {
    width: 74px;
    height: 38px;
    padding: 6px 9px;
    text-align: center;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #f8fafc;
    color: #1e293b;
    font-weight: 700;
}

.pagination-page-jump button {
    height: 38px;
    padding: 6px 12px;
    border: 1px solid #0d6efd;
    border-radius: 9px;
    background: #0d6efd;
    color: #fff;
    font-weight: 700;
}

.pagination-page-jump button:hover {
    background: #0b5ed7;
    border-color: #0b5ed7;
}

html[data-theme="dark"] .pagination-page-jump label {
    color: #aab8ca;
}

html[data-theme="dark"] .pagination-page-jump input {
    background: #202b3a;
    border-color: #40516a;
    color: #e6edf7;
}

html[data-theme="dark"] .pagination-page-jump button {
    background: #0d6efd;
    border-color: #0d6efd;
}

@media (max-width: 767.98px) {
    .pagination-page-jump {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 12px;
    }
}


/* =========================================================
   FINAL MOBILE FILTER SPACING — v17
   ========================================================= */
/*
   Bootstrap/flex gap rules from earlier revisions were competing
   with the mobile nav item margins. Use explicit item spacing here:
   every button-to-button distance is exactly 12px.
*/
@media (max-width: 767.98px) {
    .filters-toolbar.filters-open .filter-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        row-gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .filters-toolbar.filters-open .filter-nav > .nav-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .filters-toolbar.filters-open .filter-nav > .nav-item + .nav-item {
        margin-top: 12px !important;
    }

    .filters-toolbar.filters-open .filter-nav > .nav-item > .nav-link {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
    }
}


/* ===== Compact chat layout ===== */
.chat-page {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 2px 0 10px;
}
.chat-shell {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}
.chat-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.chat-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #172033;
}
.chat-message-total {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.chat-message-total-label {
    color: #667085;
    font-size: .84rem;
    font-weight: 700;
}
.chat-input-spacer {
    height: 0;
}
.chat-input .chat-compose {
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .chat-page {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .chat-header-main {
        gap: 10px;
    }
    .chat-title {
        font-size: 1.05rem;
    }
    .chat-message-total-label {
        display: none;
    }
}
html[data-theme="dark"] .chat-title { color:#e6edf7; }
html[data-theme="dark"] .chat-message-total-label { color:#9aa8bb; }


/* =========================================================
   CHAT REDESIGN — v22
   Compact centered chat, message bubbles, responsive layout
   ========================================================= */
.chat-page.chat-page {
    width: min(100% - 24px, 900px) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 8px 0 18px !important;
}
.chat-page .chat-shell {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    border: 1px solid #cfd8e5 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: var(--app-surface);
    box-shadow: 0 18px 44px rgba(15,23,42,.12) !important;
}
.chat-page .chat-header {
    background: linear-gradient(135deg,#f7faff 0%,#eaf0f7 100%) !important;
    border-bottom: 1px solid #d4deea !important;
    padding: 16px 20px !important;
}
.chat-page .chat-header-main {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
}
.chat-page .chat-title {
    font-size:1.15rem !important;
    font-weight:800 !important;
    color:#172033 !important;
    letter-spacing:-.01em;
}
.chat-page .chat-avatar {
    width:42px !important;
    height:42px !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    background:#e1ebff !important;
    color:#0b5ed7 !important;
}
.chat-page .chat-message-total {
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    white-space:nowrap;
}
.chat-page .chat-message-total-label {
    color:#64748b !important;
    font-size:.82rem !important;
    font-weight:700;
}
.chat-page .chat-messages {
    height:520px !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding:20px 22px !important;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.05), transparent 34%),
        linear-gradient(180deg,#eef3f8 0%,#e8edf3 100%) !important;
}
.chat-page .message {
    width:min(78%,720px) !important;
    max-width:720px !important;
    margin:0 0 16px !important;
}
.chat-page .message:not(.message-own) {
    margin-left:0 !important;
    margin-right:auto !important;
}
.chat-page .message.message-own {
    margin-left:auto !important;
    margin-right:0 !important;
}
.chat-page .message-head {
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    margin:0 5px 6px !important;
    min-height:20px !important;
}
.chat-page .message-head .message-author {
    color:#0b5ed7 !important;
    font-weight:800 !important;
}
.chat-page .message-head .message-time {
    color:#7b8798 !important;
    font-size:.72rem !important;
}
.chat-page .message-head .message-role {
    margin-left:auto !important;
    font-size:.7rem !important;
}
.chat-page .message-own .message-head {
    justify-content:flex-end !important;
}
.chat-page .message-own .message-author {
    color:#157347 !important;
}
.chat-page .message-content {
    border:1px solid #d2dce8 !important;
    border-radius:16px !important;
    background:#fff !important;
    color:#233044 !important;
    padding:12px 15px !important;
    box-shadow:0 5px 14px rgba(15,23,42,.06) !important;
    line-height:1.5 !important;
    overflow-wrap:anywhere !important;
}
.chat-page .message:not(.message-own) .message-content {
    border-top-left-radius:7px !important;
}
.chat-page .message-own .message-content {
    background:#dceaff !important;
    border-color:#bdd4f5 !important;
    border-top-right-radius:7px !important;
}
.chat-page .chat-input {
    background:#f7f9fb !important;
    border-top:1px solid #d4deea !important;
    padding:14px 16px !important;
}
.chat-page .chat-compose {
    display:flex !important;
    align-items:flex-end !important;
    gap:8px !important;
    background:#fff !important;
    border:1px solid #cbd7e5 !important;
    border-radius:15px !important;
    padding:5px !important;
    box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
}
.chat-page .chat-compose textarea {
    flex:1 !important;
    min-height:44px !important;
    max-height:150px !important;
    resize:none !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:10px 11px !important;
}
.chat-page .chat-compose textarea:focus { outline:none !important; }
.chat-page .chat-send {
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    padding:0 !important;
    border-radius:11px !important;
}
.chat-page .chat-messages::-webkit-scrollbar { width:8px; }
.chat-page .chat-messages::-webkit-scrollbar-track { background:transparent; }
.chat-page .chat-messages::-webkit-scrollbar-thumb { background:#c5d0dc; border-radius:8px; }

@media (max-width: 991.98px) {
    .chat-page.chat-page {
        width:min(100% - 16px, 820px) !important;
        max-width:820px !important;
    }
    .chat-page .chat-shell { max-width:820px !important; }
    .chat-page .chat-messages {
        height:56vh !important;
        min-height:360px !important;
    }
}
@media (max-width: 600px) {
    .chat-page.chat-page {
        width:100% !important;
        max-width:none !important;
        padding:0 !important;
    }
    .chat-page .chat-shell {
        width:100% !important;
        max-width:none !important;
        border-radius:16px !important;
    }
    .chat-page .chat-header { padding:13px 14px !important; }
    .chat-page .chat-title { font-size:1.02rem !important; }
    .chat-page .chat-avatar { width:38px !important; height:38px !important; border-radius:11px !important; }
    .chat-page .chat-messages {
        height:56vh !important;
        padding:14px 12px !important;
    }
    .chat-page .message {
        width:90% !important;
        max-width:90% !important;
        margin-bottom:12px !important;
    }
    .chat-page .message-head { margin-left:3px !important; margin-right:3px !important; }
    .chat-page .message-content {
        padding:10px 12px !important;
        border-radius:13px !important;
    }
    .chat-page .chat-input { padding:10px !important; }
}

html[data-theme="dark"] .chat-page .chat-header {
    background:linear-gradient(135deg,#1b2534 0%,#18212f 100%) !important;
    border-bottom-color:#2b3748 !important;
}
html[data-theme="dark"] .chat-page .chat-title { color:#e6edf7 !important; }
html[data-theme="dark"] .chat-page .chat-message-total-label { color:#a7b3c4 !important; }
html[data-theme="dark"] .chat-page .chat-messages {
    background:
        radial-gradient(circle at top left, rgba(59,130,246,.08), transparent 34%),
        linear-gradient(180deg,#18212f 0%,#141c28 100%) !important;
}
html[data-theme="dark"] .chat-page .message-content {
    background:#202b3a !important;
    border-color:#334154 !important;
    color:#e6edf7 !important;
}
html[data-theme="dark"] .chat-page .message-own .message-content {
    background:#203a5f !important;
    border-color:#315985 !important;
}
html[data-theme="dark"] .chat-page .chat-input {
    background:#151d29 !important;
    border-top-color:#2b3748 !important;
}
html[data-theme="dark"] .chat-page .chat-compose {
    background:#202b3a !important;
    border-color:#344255 !important;
}
html[data-theme="dark"] .chat-page .chat-compose textarea { color:#e6edf7 !important; }

/* =========================================================
   GLOBAL DESIGN SYSTEM — v23
   Unified surfaces, typography, radii and complete dark theme
   ========================================================= */
:root {
    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 18px;
    --ui-radius-xl: 22px;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-blue: #1769e0;
    --ui-blue-strong: #0f57c7;
    --ui-green: #179b68;
    --ui-green-strong: #118457;
    --ui-red: #d94b4b;
    --ui-amber: #c58a19;
    --ui-bg: #e8edf3;
    --ui-surface: #f8fafc;
    --ui-surface-2: #eef2f6;
    --ui-surface-3: #e3e9f1;
    --ui-border: #ccd6e2;
    --ui-border-strong: #b8c5d4;
    --ui-text: #1b2b3f;
    --ui-text-soft: #53657c;
    --ui-text-muted: #748399;
    --ui-shadow-soft: 0 8px 24px rgba(20, 34, 52, .07);
    --ui-shadow: 0 12px 30px rgba(20, 34, 52, .09);
    --ui-shadow-hover: 0 16px 36px rgba(20, 34, 52, .13);
    --bs-body-color: var(--ui-text);
    --bs-body-bg: var(--ui-bg);
    --bs-border-color: var(--ui-border);
}

html,
body {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ui-text);
    background: var(--ui-bg);
}

body {
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.page-heading h1,
.card-title {
    color: var(--ui-text);
    font-weight: 800;
    letter-spacing: -.02em;
}

p, label, .form-label, .form-text, .small {
    color: var(--ui-text-soft);
}

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

/* Shared geometry */
.card,
.orders-table-wrap,
.filters-toolbar,
.alert,
.modal-content,
.dropdown-menu,
.list-group,
.list-group-item,
.input-group,
.login-card,
.chat-shell,
.chat-input,
.mobile-date-search-card,
.pagination-page-jump,
.table-responsive {
    border-radius: var(--ui-radius-md);
}

.card {
    border: 1px solid var(--ui-border) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-soft) !important;
    overflow: hidden;
}
.card:hover { box-shadow: var(--ui-shadow) !important; }
.card-header {
    background: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    padding: 14px 18px;
}
.card-body { color: var(--ui-text); }

.form-label {
    font-weight: 700;
    margin-bottom: 6px;
}
.form-control,
.form-select,
.input-group-text {
    min-height: 42px;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
}
.form-control::placeholder { color: var(--ui-text-muted) !important; }
.form-control:focus,
.form-select:focus {
    border-color: #75a5eb !important;
    box-shadow: 0 0 0 .18rem rgba(23, 105, 224, .12) !important;
}
.form-check-input {
    border-color: var(--ui-border-strong);
    background-color: var(--ui-surface-2);
}
.form-check-input:checked { background-color: var(--ui-blue); border-color: var(--ui-blue); }

.btn {
    border-radius: 12px !important;
    font-weight: 700;
    letter-spacing: -.01em;
    min-height: 40px;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: var(--ui-blue) !important;
    border-color: var(--ui-blue) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(23, 105, 224, .16);
}
.btn-primary:hover { background: var(--ui-blue-strong) !important; border-color: var(--ui-blue-strong) !important; }
.btn-success { background: var(--ui-green) !important; border-color: var(--ui-green) !important; color: #fff !important; }
.btn-success:hover { background: var(--ui-green-strong) !important; border-color: var(--ui-green-strong) !important; }
.btn-danger { background: var(--ui-red) !important; border-color: var(--ui-red) !important; color: #fff !important; }
.btn-warning { background: #c9972b !important; border-color: #c9972b !important; color: #fff !important; }
.btn-secondary { background: #64748b !important; border-color: #64748b !important; color: #fff !important; }
.btn-outline-primary { color: var(--ui-blue) !important; border-color: #9cbceb !important; background: transparent !important; }
.btn-outline-primary:hover { color: #fff !important; background: var(--ui-blue) !important; border-color: var(--ui-blue) !important; }
.btn-outline-secondary { color: var(--ui-text-soft) !important; border-color: var(--ui-border-strong) !important; }
.btn-outline-secondary:hover { color: var(--ui-text) !important; background: var(--ui-surface-3) !important; }
.btn-outline-danger { color: #c83f45 !important; border-color: #e2a8ac !important; }
.btn-outline-danger:hover { color: #fff !important; background: var(--ui-red) !important; border-color: var(--ui-red) !important; }

.badge {
    border-radius: 8px !important;
    padding: .42em .65em;
    font-weight: 750;
}
.bg-primary { background-color: var(--ui-blue) !important; }
.bg-success { background-color: var(--ui-green) !important; }
.bg-danger { background-color: var(--ui-red) !important; }
.bg-warning { background-color: #c9972b !important; color: #fff !important; }
.bg-info { background-color: #2d84a8 !important; }
.bg-secondary { background-color: #64748b !important; }
.bg-dark { background-color: #334155 !important; }
.bg-light,
.bg-white { background-color: var(--ui-surface) !important; }

.alert {
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-soft);
    padding: 12px 16px;
}
.alert-success { background: #edf9f3 !important; border-color: #bfe7d0 !important; color: #166a45 !important; }
.alert-danger { background: #fff1f1 !important; border-color: #edc4c6 !important; color: #a63238 !important; }
.alert-warning { background: #fff8e7 !important; border-color: #ecd7a5 !important; color: #7f5d13 !important; }
.alert-info { background: #eef6fb !important; border-color: #bfd8e8 !important; color: #275d7a !important; }

.dropdown-menu {
    border: 1px solid var(--ui-border) !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .12) !important;
    padding: 7px !important;
}
.dropdown-item {
    color: var(--ui-text) !important;
    border-radius: 9px;
    padding: 8px 10px;
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--ui-surface-3) !important; color: var(--ui-text) !important; }

.modal-content {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .20) !important;
}
.modal-header,
.modal-footer { border-color: var(--ui-border) !important; }
.modal-header { background: var(--ui-surface-2); }
.modal-title { color: var(--ui-text) !important; font-weight: 800; }
.btn-close { filter: none; }

.list-group-item {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}
.list-group-item + .list-group-item { border-top-width: 1px; }

.table {
    --bs-table-color: var(--ui-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ui-border);
    color: var(--ui-text);
}
.table thead th {
    color: var(--ui-text-soft);
    background: var(--ui-surface-2);
    border-bottom-color: var(--ui-border-strong) !important;
    font-weight: 800;
}
.table tbody td { color: var(--ui-text); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(148, 163, 184, .07); }
.table-hover > tbody > tr:hover > * { background: rgba(23, 105, 224, .055); }

.progress {
    height: 10px !important;
    border-radius: 99px !important;
    background: var(--ui-surface-3) !important;
    overflow: hidden;
}
.progress-bar { border-radius: 99px; }

.pagination .page-link {
    min-width: 38px;
    min-height: 38px;
    display: inline-grid;
    place-items: center;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}
.pagination .page-link:hover { background: var(--ui-surface-3) !important; }
.pagination .page-item.active .page-link { background: var(--ui-blue) !important; color: #fff !important; border-color: var(--ui-blue) !important; }
.pagination-page-jump { background: var(--ui-surface-2); border: 1px solid var(--ui-border); padding: 8px 10px; }

/* Consistent page shell */
.app-main { max-width: 1700px; }
.page-heading { margin-bottom: 20px; }
.page-heading h1 { color: var(--ui-text) !important; }
.eyebrow { color: var(--ui-blue) !important; }

/* Navbar */
.app-navbar {
    background: var(--ui-surface-2) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
}
.app-navbar .nav-link,
.app-navbar .profile-link,
.app-navbar .nav-logout {
    color: var(--ui-text) !important;
}
.app-navbar .nav-link i,
.app-navbar .profile-link > .nav-avatar i,
.app-navbar .nav-logout i { color: #5f7692 !important; }
.app-navbar .nav-link:hover,
.app-navbar .profile-link:hover,
.app-navbar .nav-logout:hover {
    background: var(--ui-surface-3) !important;
    color: var(--ui-blue) !important;
}
.app-navbar .brand-section { color: var(--ui-blue) !important; }
.nav-avatar { background: #e4ecfb !important; }

/* Shared section spacing */
.section-card { margin-bottom: 18px; }

/* Orders table — one calm frame and consistent cell rhythm */
.orders-table-wrap {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}
.orders-table-wrap .orders-data-table thead th {
    background: var(--ui-surface-2) !important;
    color: var(--ui-text-soft) !important;
}
.orders-table-wrap .orders-data-table tbody td {
    color: var(--ui-text) !important;
}

/* Inputs/cards used in create/edit screens */
.autocomplete-item,
.search-result-item,
.client-search-result,
#modal-clients-list > * {
    border-radius: 10px;
}

/* Chat final language — works with the compact V22 markup */
.chat-page { width: min(100%, 920px) !important; margin: 0 auto !important; }
.chat-shell { border-radius: var(--ui-radius-xl) !important; border: 1px solid var(--ui-border) !important; background: var(--ui-surface) !important; box-shadow: var(--ui-shadow) !important; }
.chat-header { background: linear-gradient(135deg, var(--ui-surface-2), var(--ui-surface)) !important; border-bottom: 1px solid var(--ui-border) !important; }
.chat-title { color: var(--ui-text) !important; }
.chat-message-total-label { color: var(--ui-text-muted) !important; }
.chat-messages { background: linear-gradient(180deg, var(--ui-surface-2), var(--ui-bg)) !important; }
.chat-input { background: var(--ui-surface-2) !important; border-top: 1px solid var(--ui-border) !important; }
.chat-compose { background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: 16px !important; padding: 6px !important; }
.chat-compose textarea { background: transparent !important; color: var(--ui-text) !important; border: 0 !important; }
.chat-compose textarea::placeholder { color: var(--ui-text-muted) !important; }
.chat-send { border-radius: 12px !important; }
.message-content { border-radius: 13px !important; border: 1px solid var(--ui-border) !important; background: var(--ui-surface) !important; color: var(--ui-text) !important; }
.message-own .message-content { background: #e5efff !important; border-color: #bfd3f4 !important; }
.message-head .message-author { color: var(--ui-blue) !important; }
.message-head .message-time { color: var(--ui-text-muted) !important; }
.message-role { background: #64748b !important; }

/* Dark theme — full system, not just the dashboard */
html[data-theme="dark"] {
    color-scheme: dark;
    --ui-bg: #101823;
    --ui-surface: #182330;
    --ui-surface-2: #202d3c;
    --ui-surface-3: #293848;
    --ui-border: #344355;
    --ui-border-strong: #45566c;
    --ui-text: #edf3f8;
    --ui-text-soft: #c1cbd7;
    --ui-text-muted: #93a3b6;
    --ui-shadow-soft: 0 8px 24px rgba(0,0,0,.22);
    --ui-shadow: 0 12px 30px rgba(0,0,0,.28);
    --ui-shadow-hover: 0 18px 42px rgba(0,0,0,.34);
    --bs-body-color: var(--ui-text);
    --bs-body-bg: var(--ui-bg);
    --bs-border-color: var(--ui-border);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: radial-gradient(circle at 90% 0%, rgba(44, 92, 178, .13), transparent 28%), var(--ui-bg) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] article,
html[data-theme="dark"] .app-main { color: var(--ui-text) !important; }

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black { color: var(--ui-text) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] small,
html[data-theme="dark"] .form-text { color: var(--ui-text-muted) !important; }
html[data-theme="dark"] .text-white { color: #fff !important; }

html[data-theme="dark"] .app-navbar,
html[data-theme="dark"] .filters-toolbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .orders-table-wrap,
html[data-theme="dark"] .chat-shell,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .mobile-date-search-card,
html[data-theme="dark"] .pagination-page-jump {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}
html[data-theme="dark"] .app-navbar { background: var(--ui-surface-2) !important; }
html[data-theme="dark"] .card-header { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .app-navbar .nav-link,
html[data-theme="dark"] .app-navbar .profile-link,
html[data-theme="dark"] .app-navbar .nav-logout { color: var(--ui-text) !important; }
html[data-theme="dark"] .app-navbar .nav-link i,
html[data-theme="dark"] .app-navbar .profile-link > .nav-avatar i,
html[data-theme="dark"] .app-navbar .nav-logout i { color: #a9bad0 !important; }
html[data-theme="dark"] .app-navbar .nav-link:hover,
html[data-theme="dark"] .app-navbar .profile-link:hover,
html[data-theme="dark"] .app-navbar .nav-logout:hover { background: var(--ui-surface-3) !important; color: #8db6ff !important; }
html[data-theme="dark"] .brand-section { color: #8db6ff !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .nav-avatar { background: #2b3a4d !important; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-check-input {
    background: var(--ui-surface-2) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: #8798ad !important; }
html[data-theme="dark"] select option { background: var(--ui-surface-2); color: var(--ui-text); }
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-content {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background: var(--ui-surface-3) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .modal-header { background: var(--ui-surface-2) !important; }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

html[data-theme="dark"] .table,
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th { color: var(--ui-text) !important; }
html[data-theme="dark"] .table thead th { background: var(--ui-surface-2) !important; color: var(--ui-text-soft) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(148,163,184,.055) !important; }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: rgba(93, 145, 227, .12) !important; }

/* Bootstrap contextual blocks become quieter and readable in dark mode. */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .bg-dark { background: #293748 !important; color: #f7fbff !important; }
html[data-theme="dark"] .bg-warning { background: #6b5422 !important; color: #fff4d6 !important; }
html[data-theme="dark"] .bg-info { background: #21536e !important; color: #dff6ff !important; }
html[data-theme="dark"] .bg-primary { background: #2157ad !important; color: #fff !important; }
html[data-theme="dark"] .bg-success { background: #1d6a4d !important; color: #effff6 !important; }
html[data-theme="dark"] .bg-danger { background: #7f3138 !important; color: #fff2f3 !important; }
html[data-theme="dark"] .bg-secondary { background: #405065 !important; color: #f4f7fa !important; }
html[data-theme="dark"] .alert-success { background: #1b3d31 !important; border-color: #2e6854 !important; color: #c8f5df !important; }
html[data-theme="dark"] .alert-danger { background: #4d262b !important; border-color: #7c3f46 !important; color: #ffd7da !important; }
html[data-theme="dark"] .alert-warning { background: #4b3d1d !important; border-color: #735d2b !important; color: #ffeeb8 !important; }
html[data-theme="dark"] .alert-info { background: #1c384a !important; border-color: #315f76 !important; color: #d6efff !important; }

/* Neutralise legacy inline white/light styles used by older pages. */
html[data-theme="dark"] [style*="background-color: #f8f9fa"],
html[data-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: black"] {
    color: var(--ui-text) !important;
    background: var(--ui-surface-2) !important;
}

html[data-theme="dark"] .filters-toolbar .nav-link,
html[data-theme="dark"] .filters-title,
html[data-theme="dark"] .filters-toolbar .filters-title { color: var(--ui-text) !important; }
html[data-theme="dark"] .filters-toolbar .nav-link:hover,
html[data-theme="dark"] .filters-toolbar .nav-link:focus { background: var(--ui-surface-3) !important; color: #8db6ff !important; }
html[data-theme="dark"] .filters-toolbar .filter-nav .nav-link.active-filter { background: #6d861e !important; color: #f4ffd3 !important; border-color: #8da52f !important; }
html[data-theme="dark"] .filters-toolbar .filter-nav .filter-reset { background: #293541 !important; color: #dbe5ef !important; border-color: #445568 !important; }
html[data-theme="dark"] .filters-toolbar .filter-nav .filter-reset i { color: #ff8585 !important; }
html[data-theme="dark"] .filters-toolbar .filter-nav .filter-reset:hover { background: #39495b !important; color: #fff !important; }

html[data-theme="dark"] .orders-table-wrap { border-color: #4a596b !important; }
html[data-theme="dark"] .orders-table-wrap .orders-data-table thead th { background: var(--ui-surface-2) !important; color: var(--ui-text-soft) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .orders-table-wrap .orders-data-table tbody td { color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .orders-table-wrap .table tbody td:first-child strong { color: #f3f7fb !important; }

html[data-theme="dark"] .chat-header { background: linear-gradient(135deg, var(--ui-surface-2), var(--ui-surface)) !important; }
html[data-theme="dark"] .chat-messages { background: linear-gradient(180deg, #111a26, #101823) !important; }
html[data-theme="dark"] .chat-input { background: var(--ui-surface-2) !important; }
html[data-theme="dark"] .chat-compose { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .message-content { background: #1d2a39 !important; border-color: #3c4e62 !important; color: #eff4f9 !important; }
html[data-theme="dark"] .message-own .message-content { background: #203d62 !important; border-color: #3b6291 !important; color: #f3f8ff !important; }
html[data-theme="dark"] .message-head .message-author { color: #8db6ff !important; }
html[data-theme="dark"] .message-head .message-time { color: #94a5b8 !important; }

/* Common empty states */
html[data-theme="dark"] .empty-icon,
html[data-theme="dark"] .login-logo,
html[data-theme="dark"] .stat-icon { background: #28384b !important; color: #8db6ff !important; }

/* Mobile: slightly denser but same rhythm */
@media (max-width: 767.98px) {
    .app-main { padding-top: 14px; padding-bottom: 32px; }
    .card { border-radius: 16px !important; }
    .card-header { padding: 12px 14px; }
    .card-body { padding: 14px !important; }
    .page-heading h1 { font-size: 1.45rem; }
    .btn { min-height: 42px; }
    .form-control, .form-select { min-height: 44px; }
    .chat-page { width: 100% !important; }
    .chat-shell { border-radius: 16px !important; }
}


/* Dark theme: keep statistic accents vivid and readable. */
html[data-theme="dark"] .order-stats .stat-active .stat-value { color:#6ea8fe !important; }
html[data-theme="dark"] .order-stats .stat-today .stat-value { color:#42d3b6 !important; }
html[data-theme="dark"] .order-stats .stat-overdue .stat-value { color:#ff6b6b !important; }
html[data-theme="dark"] .order-stats .stat-completed .stat-value { color:#9bb7d7 !important; }

/* =========================================================
   v25 — stronger light theme, table frames, polished buttons
   and backup status cards
   ========================================================= */
:root {
    --ui-blue: #1463e8;
    --ui-blue-strong: #0d55c9;
    --ui-green: #159b63;
    --ui-green-strong: #0d7f50;
    --ui-red: #dc3f45;
    --ui-amber: #d39a21;
    --ui-bg: #e3e9f1;
    --ui-surface: #ffffff;
    --ui-surface-2: #f0f4f8;
    --ui-surface-3: #e4ebf3;
    --ui-border: #bcc8d6;
    --ui-border-strong: #aab9ca;
    --ui-text: #18263a;
    --ui-text-soft: #4f6279;
    --ui-text-muted: #6d8097;
}

/* Buttons: consistent size, spacing and hierarchy. */
.btn {
    border-radius: 11px !important;
    min-height: 40px;
    padding: 9px 15px !important;
    font-weight: 750;
    letter-spacing: -.01em;
    border-width: 1px !important;
    box-shadow: 0 3px 9px rgba(20, 34, 52, .08);
}
.btn i { margin-right: 5px; }
.btn:hover { box-shadow: 0 6px 14px rgba(20, 34, 52, .12); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(20, 99, 232, .18), 0 5px 12px rgba(20, 34, 52, .10) !important; }
.btn-primary { box-shadow: 0 5px 12px rgba(20, 99, 232, .20); }
.btn-success { box-shadow: 0 5px 12px rgba(21, 155, 99, .18); }
.btn-danger { box-shadow: 0 5px 12px rgba(220, 63, 69, .16); }
.btn-warning { box-shadow: 0 5px 12px rgba(211, 154, 33, .16); }
.btn-outline-primary,
.btn-outline-info,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning {
    background: var(--ui-surface) !important;
    box-shadow: 0 3px 8px rgba(20,34,52,.05);
}
.btn-outline-info { color: #0b79a8 !important; border-color: #8ec8e2 !important; }
.btn-outline-info:hover { color: #fff !important; background: #1592bf !important; border-color: #1592bf !important; }

/* Black, consistent outer border for every project table. */
table.table,
.table-responsive table,
.orders-table-wrap .orders-data-table {
    border: 1px solid #111827 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
}
table.table thead th,
.table-responsive table thead th {
    border-top: 0 !important;
}
table.table tbody tr:first-child td,
.table-responsive table tbody tr:first-child td {
    border-top: 0 !important;
}
table.table tr:last-child td,
.table-responsive table tr:last-child td {
    border-bottom: 0 !important;
}
.orders-table-wrap {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Backup summary cards: bright light-theme colors with white typography. */
.backup-stats .backup-stat-card {
    border: 0 !important;
    color: #fff !important;
    overflow: hidden;
    min-height: 112px;
    border-radius: 16px !important;
    box-shadow: 0 10px 22px rgba(25,42,70,.12) !important;
}
.backup-stats .backup-stat-card .card-body,
.backup-stats .backup-stat-card h4,
.backup-stats .backup-stat-card p,
.backup-stats .backup-stat-card i {
    color: #fff !important;
}
.backup-stats .backup-stat-users { background: linear-gradient(135deg,#1769ee,#3a82f5) !important; }
.backup-stats .backup-stat-active { background: linear-gradient(135deg,#0e9f69,#22b97b) !important; }
.backup-stats .backup-stat-online { background: linear-gradient(135deg,#1384b4,#25a8d4) !important; }
.backup-stats .backup-stat-staff { background: linear-gradient(135deg,#d89a19,#ebb33b) !important; }

/* Backup status pill — polished and readable. */
.backup-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: 0 4px 10px rgba(20,34,52,.07);
}
.backup-status-pill.backup-danger {
    color: #a51f29 !important;
    background: #ffe8e8 !important;
    border: 1px solid #f2a8ad !important;
}
.backup-status-pill.backup-warning {
    color: #8a5d08 !important;
    background: #fff4d5 !important;
    border: 1px solid #e8ca75 !important;
}
.backup-status-pill.backup-success {
    color: #087243 !important;
    background: #dff8ec !important;
    border: 1px solid #8bd6ae !important;
}

html[data-theme="dark"] {
    --ui-blue: #4d93ff;
    --ui-blue-strong: #337de8;
    --ui-green: #28c27f;
    --ui-green-strong: #18a968;
    --ui-red: #ff656d;
    --ui-amber: #e6b648;
}
html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-info,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-success,
html[data-theme="dark"] .btn-outline-danger,
html[data-theme="dark"] .btn-outline-warning {
    background: var(--ui-surface) !important;
    color: var(--ui-text-soft) !important;
}
html[data-theme="dark"] table.table,
html[data-theme="dark"] .table-responsive table,
html[data-theme="dark"] .orders-table-wrap .orders-data-table {
    border-color: #000 !important;
}
html[data-theme="dark"] .backup-stats .backup-stat-users { background: linear-gradient(135deg,#1f6fe5,#3c8cff) !important; }
html[data-theme="dark"] .backup-stats .backup-stat-active { background: linear-gradient(135deg,#159864,#29be7e) !important; }
html[data-theme="dark"] .backup-stats .backup-stat-online { background: linear-gradient(135deg,#177ca7,#259dca) !important; }
html[data-theme="dark"] .backup-stats .backup-stat-staff { background: linear-gradient(135deg,#b87f13,#dca52e) !important; }
html[data-theme="dark"] .backup-status-pill.backup-danger {
    color: #ffd8db !important; background: #54272c !important; border-color: #8f4b52 !important;
}
html[data-theme="dark"] .backup-status-pill.backup-warning {
    color: #ffe9a8 !important; background: #4c3b19 !important; border-color: #7d6225 !important;
}
html[data-theme="dark"] .backup-status-pill.backup-success {
    color: #c9ffe2 !important; background: #194634 !important; border-color: #2b8059 !important;
}



/* =========================================================
   v26 — tables, action buttons, profile borders, dark text parity
   ========================================================= */

/* One clean 1px frame around every table. The responsive wrapper must
   not add a second border, so the table itself owns the perimeter. */
.table-responsive {
    border: 0 !important;
    background: transparent !important;
    overflow-x: auto;
    overflow-y: visible;
}

.table,
.table-responsive > table,
.table-responsive > .table,
.orders-table-wrap .orders-data-table {
    border: 1px solid #111827 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.table thead th:first-child,
.table-responsive > table thead th:first-child,
.table-responsive > .table thead th:first-child {
    border-top-left-radius: 11px !important;
}
.table thead th:last-child,
.table-responsive > table thead th:last-child,
.table-responsive > .table thead th:last-child {
    border-top-right-radius: 11px !important;
}
.table tbody tr:last-child td:first-child,
.table-responsive > table tbody tr:last-child td:first-child,
.table-responsive > .table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px !important;
}
.table tbody tr:last-child td:last-child,
.table-responsive > table tbody tr:last-child td:last-child,
.table-responsive > .table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px !important;
}

/* The orders wrapper is only a layout container; the table owns the frame. */
.orders-table-wrap {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
}
.orders-table-wrap .orders-data-table {
    border: 1px solid #111827 !important;
}

/* Profile's compact information table: keep a crisp 1px perimeter. */
.profile-info-table {
    border-width: 1px !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Polished icon-only action buttons used in tables/lists. */
/* Icon-only sizing is opt-in via .btn-icon-action.
   Do not infer icon-only buttons from :has(> i:only-child):
   text nodes are ignored by :only-child, which shrinks text buttons too. */
.btn-icon-action {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 11px !important;
}

.btn-icon-action i {
    margin: 0 !important;
    font-size: 0.95rem;
}

.btn-group.btn-group-sm,
.btn-group { gap: 6px; }
.btn-group > .btn,
.btn-group > a.btn,
.btn-group > button.btn { border-radius: 11px !important; }

/* Outline action colours stay semantic in BOTH themes. */
.btn-outline-primary { color: var(--ui-blue) !important; border-color: #91b5ee !important; background: var(--ui-surface) !important; }
.btn-outline-info { color: #0b79a8 !important; border-color: #86c2de !important; background: var(--ui-surface) !important; }
.btn-outline-success { color: var(--ui-green-strong) !important; border-color: #8bd4b2 !important; background: var(--ui-surface) !important; }
.btn-outline-warning { color: #b77a05 !important; border-color: #e0bd65 !important; background: var(--ui-surface) !important; }
.btn-outline-danger { color: #c83f45 !important; border-color: #e5a2a7 !important; background: var(--ui-surface) !important; }
.btn-outline-secondary { color: var(--ui-text-soft) !important; border-color: var(--ui-border-strong) !important; background: var(--ui-surface) !important; }

.btn-outline-primary:hover { color:#fff !important; background:var(--ui-blue) !important; border-color:var(--ui-blue) !important; }
.btn-outline-info:hover { color:#fff !important; background:#1592bf !important; border-color:#1592bf !important; }
.btn-outline-success:hover { color:#fff !important; background:var(--ui-green) !important; border-color:var(--ui-green) !important; }
.btn-outline-warning:hover { color:#fff !important; background:#c98d16 !important; border-color:#c98d16 !important; }
.btn-outline-danger:hover { color:#fff !important; background:var(--ui-red) !important; border-color:var(--ui-red) !important; }
.btn-outline-secondary:hover { color:var(--ui-text) !important; background:var(--ui-surface-3) !important; border-color:var(--ui-border-strong) !important; }

/* Dark theme: keep button text colours identical to light theme. */
html[data-theme="dark"] .btn-outline-primary { color: #4d93ff !important; border-color: #5577a8 !important; background: var(--ui-surface) !important; }
html[data-theme="dark"] .btn-outline-info { color: #55b7e1 !important; border-color: #4f829b !important; background: var(--ui-surface) !important; }
html[data-theme="dark"] .btn-outline-success { color: #4bd897 !important; border-color: #4e8f75 !important; background: var(--ui-surface) !important; }
html[data-theme="dark"] .btn-outline-warning { color: #e6b648 !important; border-color: #8e6f2e !important; background: var(--ui-surface) !important; }
html[data-theme="dark"] .btn-outline-danger { color: #ff656d !important; border-color: #925258 !important; background: var(--ui-surface) !important; }
html[data-theme="dark"] .btn-outline-secondary { color: #91a0b3 !important; border-color: #526277 !important; background: var(--ui-surface) !important; }

/* Same semantic hover treatment in dark mode. */
html[data-theme="dark"] .btn-outline-primary:hover { color:#fff !important; background:#337de8 !important; border-color:#337de8 !important; }
html[data-theme="dark"] .btn-outline-info:hover { color:#fff !important; background:#238bb5 !important; border-color:#238bb5 !important; }
html[data-theme="dark"] .btn-outline-success:hover { color:#fff !important; background:#1da36a !important; border-color:#1da36a !important; }
html[data-theme="dark"] .btn-outline-warning:hover { color:#fff !important; background:#b78318 !important; border-color:#b78318 !important; }
html[data-theme="dark"] .btn-outline-danger:hover { color:#fff !important; background:#d94d57 !important; border-color:#d94d57 !important; }
html[data-theme="dark"] .btn-outline-secondary:hover { color:#f4f7fa !important; background:var(--ui-surface-3) !important; border-color:#65758b !important; }

/* Dark tables retain the same 1px black perimeter without becoming heavy. */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table-responsive > table,
html[data-theme="dark"] .table-responsive > .table,
html[data-theme="dark"] .orders-table-wrap .orders-data-table {
    border-width: 1px !important;
    border-color: #000 !important;
}

/* =========================================================
   v28 — restore v26 button sizing + explicit button roles
   ========================================================= */

/* Base/full-size buttons: restore the v26 visual size and weight. */
.btn {
    border-radius: 11px !important;
    min-height: 40px;
    padding: 9px 15px !important;
    font-weight: 750;
    letter-spacing: -.01em;
    border-width: 1px !important;
    box-shadow: 0 3px 9px rgba(20, 34, 52, .08);
}
.btn i { margin-right: 5px; }
.btn:hover { box-shadow: 0 6px 14px rgba(20, 34, 52, .12); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(20, 99, 232, .18), 0 5px 12px rgba(20, 34, 52, .10) !important; }
.btn-primary { box-shadow: 0 5px 12px rgba(20, 99, 232, .20); }
.btn-success { box-shadow: 0 5px 12px rgba(21, 155, 99, .18); }
.btn-danger { box-shadow: 0 5px 12px rgba(220, 63, 69, .16); }
.btn-warning { box-shadow: 0 5px 12px rgba(211, 154, 33, .16); }

/* Small/textual controls are intentionally separate from full-size buttons. */
.btn-compact,
.btn.btn-sm,
.btn-group-sm > .btn {
    min-height: 34px !important;
    padding: 6px 11px !important;
    font-size: .875rem !important;
    line-height: 1.25 !important;
    border-radius: 10px !important;
}

/* Large/hero controls have their own class and never inherit compact sizing. */
.btn-large,
.btn.btn-lg,
.btn-group-lg > .btn {
    min-height: 50px !important;
    padding: 12px 22px !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    border-radius: 13px !important;
}

/* Icon-only table/list actions are independent from both text buttons and large CTAs. */
.btn-icon-action {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 11px !important;
}

.btn-icon-action i {
    margin: 0 !important;
    font-size: .95rem;
}

@media (max-width: 767.98px) {
    .btn-icon-action {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 10px !important;
    }
}

/* Profile → Main information: exactly one 1px outer frame,
   with no extra bottom border from the last row. */
.profile-info-table {
    width: 100%;
    border: 1px solid #111827 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    outline: none !important;
    box-shadow: none !important;
}

.profile-info-table > tbody > tr > th,
.profile-info-table > tbody > tr > td {
    border-left: 0 !important;
    border-right: 0 !important;
}

.profile-info-table > tbody > tr:first-child > th,
.profile-info-table > tbody > tr:first-child > td {
    border-top: 0 !important;
}

.profile-info-table > tbody > tr:last-child > th,
.profile-info-table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

.profile-info-table > tbody > tr:first-child > th:first-child {
    border-top-left-radius: 11px !important;
}

.profile-info-table > tbody > tr:first-child > td:last-child {
    border-top-right-radius: 11px !important;
}

.profile-info-table > tbody > tr:last-child > th:first-child {
    border-bottom-left-radius: 11px !important;
}

.profile-info-table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 11px !important;
}

html[data-theme="dark"] .profile-info-table {
    border-color: #000 !important;
}


/* =========================================================
   v29 — explicit text-button role
   Text + icon buttons must never inherit icon-only sizing.
   ========================================================= */
.btn-action {
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 9px 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
    white-space: nowrap;
}

.btn-action i {
    margin: 0 !important;
    flex: 0 0 auto;
}

.btn-action.btn-sm,
.btn-group-sm > .btn-action {
    min-height: 34px !important;
    padding: 6px 11px !important;
    font-size: .875rem !important;
}

.btn-action.btn-lg,
.btn-group-lg > .btn-action {
    min-height: 50px !important;
    padding: 12px 22px !important;
    font-size: 1.05rem !important;
}

@media (max-width: 767.98px) {
    .btn-action {
        min-height: 40px !important;
        padding: 8px 13px !important;
    }

    .btn-action.btn-sm,
    .btn-group-sm > .btn-action {
        min-height: 34px !important;
        padding: 6px 10px !important;
    }
}


/* v30 — explicit action-button roles. Text buttons are allowed to keep their full label. */
.btn-action {
    width: auto !important;
    min-width: max-content !important;
    max-width: 100%;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.btn-action.btn-sm,
.btn-group-sm > .btn-action {
    min-height: 34px !important;
    padding: 6px 11px !important;
    font-size: .875rem !important;
}

.btn-action.btn-lg,
.btn-group-lg > .btn-action {
    min-height: 50px !important;
    padding: 12px 22px !important;
    font-size: 1.05rem !important;
}

.btn-group > .btn-action {
    flex: 0 0 auto !important;
}

@media (max-width: 767.98px) {
    .btn-action {
        min-width: max-content !important;
        white-space: nowrap !important;
    }
}

/* v30 cache/version marker */


/* =========================================================
   v34 — order detail cards and client picker hover
   ========================================================= */
.order-client-info-card,
.order-info-card {
    border: 0 !important;
    outline: 0 !important;
}

.autocomplete-item:hover,
.modal-client-item:hover {
    background: var(--ui-surface-3) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .autocomplete-item:hover,
html[data-theme="dark"] .modal-client-item:hover {
    background: #253449 !important;
    color: #f4f7fb !important;
}

html[data-theme="dark"] #show-all-clients:hover,
html[data-theme="dark"] #show-all-clients:focus,
html[data-theme="dark"] #show-all-clients:active {
    background: #1c2736 !important;
    color: #8db6ff !important;
    border-color: #5b81b8 !important;
}

/* =========================================================
   v35 — order detail: remove inner table frames, restore picker hover
   ========================================================= */
.order-client-info-card > .card-body > table,
.order-info-card > .card-body > .order-info-table {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.order-client-info-card > .card-body > table,
.order-info-table {
    --bs-table-border-color: var(--ui-border) !important;
}

.order-client-info-card > .card-body > table > tbody > tr > td,
.order-info-table > tbody > tr > th,
.order-info-table > tbody > tr > td {
    border-left: 0 !important;
    border-right: 0 !important;
}

.order-client-info-card > .card-body > table > tbody > tr:first-child > td,
.order-info-table > tbody > tr:first-child > th,
.order-info-table > tbody > tr:first-child > td {
    border-top: 0 !important;
}

.order-client-info-card > .card-body > table > tbody > tr:last-child > td,
.order-info-table > tbody > tr:last-child > th,
.order-info-table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

.order-client-info-card > .card-body > table > tbody > tr + tr > td,
.order-info-table > tbody > tr + tr > th,
.order-info-table > tbody > tr + tr > td {
    border-top: 1px solid var(--ui-border) !important;
}

/* Restore a visible, theme-safe hover for client suggestions / modal rows. */
.autocomplete-item:hover,
.autocomplete-item:focus,
.modal-client-item:hover,
.modal-client-item:focus {
    background: #e8f1ff !important;
    color: #153a67 !important;
}

.autocomplete-item:hover .client-info,
.autocomplete-item:hover .client-stats,
.modal-client-item:hover .client-info,
.modal-client-item:hover .client-stats {
    color: #153a67 !important;
}

html[data-theme="dark"] .autocomplete-item:hover,
html[data-theme="dark"] .autocomplete-item:focus,
html[data-theme="dark"] .modal-client-item:hover,
html[data-theme="dark"] .modal-client-item:focus {
    background: #263d5d !important;
    color: #f3f7fc !important;
}

html[data-theme="dark"] .autocomplete-item:hover .client-info,
html[data-theme="dark"] .autocomplete-item:hover .client-stats,
html[data-theme="dark"] .modal-client-item:hover .client-info,
html[data-theme="dark"] .modal-client-item:hover .client-stats {
    color: #f3f7fc !important;
}

html[data-theme="dark"] .order-client-info-card > .card-body > table,
html[data-theme="dark"] .order-info-card > .card-body > .order-info-table {
    background: transparent !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .order-client-info-card > .card-body > table > tbody > tr + tr > td,
html[data-theme="dark"] .order-info-table > tbody > tr + tr > th,
html[data-theme="dark"] .order-info-table > tbody > tr + tr > td {
    border-top-color: var(--ui-border) !important;
}



/* =========================================================
   V37 — page-specific UX fixes
   ========================================================= */

/* Machine active checkbox: visible in both themes. */
input[name="is_active"].form-check-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 19px !important;
    height: 19px !important;
    min-height: 19px !important;
    margin-top: .15rem;
    border: 2px solid #8ea0b7 !important;
    border-radius: 5px !important;
    background: var(--ui-surface-2) !important;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
}
input[name="is_active"].form-check-input:checked {
    background: var(--ui-blue) !important;
    border-color: var(--ui-blue) !important;
}
input[name="is_active"].form-check-input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
html[data-theme="dark"] input[name="is_active"].form-check-input {
    background: #283646 !important;
    border-color: #6e8098 !important;
}
html[data-theme="dark"] input[name="is_active"].form-check-input:checked {
    background: #3f82f0 !important;
    border-color: #3f82f0 !important;
}

/* Client search controls share one baseline. */
.client-search-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.client-search-toolbar .client-search-field {
    flex: 1 1 320px;
    min-width: 220px;
}
.client-search-toolbar .client-search-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}
.client-search-toolbar .client-search-actions .btn {
    width: auto !important;
    min-width: 108px;
    margin: 0 !important;
}
@media (max-width: 767.98px) {
    .client-search-toolbar .client-search-field,
    .client-search-toolbar .client-search-actions {
        width: 100%;
        flex-basis: 100%;
    }
    .client-search-toolbar .client-search-actions .btn {
        flex: 1 1 0;
    }
}

/* Confirmation pages: centered card and medium-width actions. */
.confirmation-page {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}
.confirmation-page .confirmation-card {
    width: min(100%, 560px);
}
.confirmation-page .confirmation-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.confirmation-page .confirmation-actions .btn {
    width: auto !important;
    min-width: 150px;
}

/* User/car related pagination follows the archive/order pagination rhythm. */
.compact-pagination {
    margin-top: 16px;
}
.compact-pagination .pagination {
    justify-content: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.compact-pagination .pagination .page-link {
    margin: 0 2px;
    border-radius: 9px;
}
.compact-pagination .pagination-summary {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--ui-text-muted);
    font-size: .82rem;
    text-align: center;
}
.compact-pagination .pagination-summary strong { color: var(--ui-text); }

/* Profile/action button groups stay compact and centered. */
.user-profile-actions .btn { min-width: 150px; }

/* Table action icons are centered consistently. */
.table td:last-child .btn-group,
.table td:last-child > .btn,
.table td:last-child > a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Backups: top-right action is enough. */
.backup-page-header-actions .btn { min-width: 120px; }

/* ===== Pagination refinement v38 ===== */
.pagination .page-link {
    min-height: 38px !important;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0.45rem 0.75rem !important;
}
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    min-width: 88px;
}
.pagination-summary strong { display:none !important; }

html[data-theme="dark"] .pagination .page-link {
    background:#182536;
    border-color:#344860;
    color:#dbe7f5;
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background:#2f7cf6;
    border-color:#2f7cf6;
    color:#fff;
}
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background:#151e2c;
    border-color:#2b394c;
    color:#718197;
}

/* ===== Backups page dark-theme and action alignment v38 ===== */
.backup-page-header-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}
.backup-page-header-actions .backup-run-btn {
    background:#198754 !important;
    border-color:#198754 !important;
    color:#fff !important;
}
.backup-page-header-actions .backup-run-btn:hover,
.backup-page-header-actions .backup-run-btn:focus-visible {
    background:#157347 !important;
    border-color:#157347 !important;
    color:#fff !important;
}
.backup-page-header-actions .backup-run-btn:disabled {
    opacity:.72;
    background:#198754 !important;
    border-color:#198754 !important;
    color:#fff !important;
}
.backup-info-pre {
    background:#f1f5f9;
    border:1px solid #cbd5e1;
    color:#1f2937;
    overflow:auto;
}
.backup-actions {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.backup-table td:last-child,
.backup-table th:last-child {
    text-align:center !important;
}
.backup-table .backup-actions .btn {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 2px;
}
html[data-theme="dark"] .backup-info-pre {
    background:#202b3a !important;
    border-color:#3b4b61 !important;
    color:#e7eef8 !important;
}
html[data-theme="dark"] .backup-info-pre code {
    color:#e7eef8 !important;
}
html[data-theme="dark"] .backup-page-header-actions .backup-run-btn {
    background:#198754 !important;
    border-color:#198754 !important;
    color:#fff !important;
}
html[data-theme="dark"] .backup-page-header-actions .backup-run-btn:hover,
html[data-theme="dark"] .backup-page-header-actions .backup-run-btn:focus-visible {
    background:#157347 !important;
    border-color:#157347 !important;
    color:#fff !important;
}
html[data-theme="dark"] .backup-table td:last-child .btn-outline-info {
    background:#1b3b59 !important;
    border-color:#3e8ed0 !important;
    color:#80c4ff !important;
}
html[data-theme="dark"] .backup-table td:last-child .btn-outline-info:hover {
    background:#244d71 !important;
    color:#dff2ff !important;
}
html[data-theme="dark"] .backup-table td:last-child .btn-outline-danger {
    background:#4b2024 !important;
    border-color:#b35a62 !important;
    color:#ff9ea5 !important;
}
html[data-theme="dark"] .backup-table td:last-child .btn-outline-danger:hover {
    background:#633035 !important;
    color:#ffd9dc !important;
}

@media (max-width: 767.98px) {
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        min-width: 72px;
    }
    .backup-page-header {
        gap:12px;
        align-items:flex-start !important;
        flex-direction:column;
    }
    .backup-page-header-actions {
        width:100%;
        justify-content:flex-end;
    }
}

/* ===== Pagination + action alignment refinement v39 ===== */
.pagination .page-link {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Numeric pages stay square and equal in both order and user-order pagination. */
.pagination .page-item.active .page-link,
.pagination .page-item:not(.disabled) .page-link:not(:has(.fa-chevron-left)):not(:has(.fa-chevron-right)) {
    width: 38px !important;
    min-width: 38px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Previous/next retain text width but exactly match numeric-page height. */
.pagination .page-item .page-link .fa-chevron-left,
.pagination .page-item .page-link .fa-chevron-right {
    flex: 0 0 auto;
    line-height: 1 !important;
    transform: translateY(1px);
}

.pagination .page-item .page-link .fa-chevron-left { margin-right: 6px !important; }
.pagination .page-item .page-link .fa-chevron-right { margin-left: 6px !important; }

/* The user-order pagination uses the same rhythm. */
.compact-pagination .pagination .page-link {
    height: 38px !important;
    min-height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.compact-pagination .pagination .page-item.active .page-link,
.compact-pagination .pagination .page-item:not(.disabled) .page-link:not(:has(.fa-chevron-left)):not(:has(.fa-chevron-right)) {
    width: 38px !important;
    min-width: 38px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Backup action buttons: icon sits exactly in the visual center. */
.backup-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    vertical-align: middle !important;
}

.backup-actions .btn,
.backup-actions .btn-icon-action,
.backup-actions a,
.backup-actions button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    flex: 0 0 42px !important;
}

.backup-actions .btn i,
.backup-actions a i,
.backup-actions button i {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Give the car-number cell a little breathing room on the right. */
.orders-table-wrap .orders-data-table td:nth-child(6),
.orders-table-wrap .orders-data-table th:nth-child(6) {
    padding-right: 22px !important;
}

.orders-table-wrap .orders-data-table td:nth-child(6) .badge {
    margin-right: 5px !important;
}

/* Keep arrow labels vertically aligned with the text. */
.pagination .page-link {
    gap: 0 !important;
}

html[data-theme="dark"] .pagination .page-link:hover {
    color: var(--ui-text) !important;
}


/* =========================================================
   v40 — table corner frame + profile info cleanup + order car column
   ========================================================= */

/* All regular project tables get a continuous 1px perimeter.
   A spread shadow closes the rounded corners even when Bootstrap
   table borders collapse/override a cell border. */
table.table:not(.orders-data-table):not(.profile-info-table):not(.table-borderless),
.table-responsive > table.table:not(.orders-data-table):not(.profile-info-table):not(.table-borderless) {
    border: 1px solid transparent !important;
    box-shadow: 0 0 0 1px #111827 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* The first two information tables on a user profile live inside a
   bordered card, so they must not create a second outer frame. */
.user-detail-info-table {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
    margin-bottom: 0 !important;
}

.user-detail-info-table > tbody > tr:first-child > th,
.user-detail-info-table > tbody > tr:first-child > td {
    border-top: 0 !important;
}
.user-detail-info-table > tbody > tr:last-child > th,
.user-detail-info-table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

/* Desktop orders: make the compact columns more proportional and give
   the text-heavy columns the saved horizontal space. */
@media (min-width: 768px) {
    .orders-data-table .col-creator { width: 15% !important; }
    .orders-data-table .col-document { width: 12% !important; }
    .orders-data-table .col-city { width: 13% !important; }
    .orders-data-table .col-client { width: 15% !important; }
    .orders-data-table .col-phone { width: 13.5% !important; }
    .orders-data-table .col-car { width: 9% !important; }
    .orders-data-table .col-status { width: 7% !important; }
    .orders-data-table .col-date { width: 8.5% !important; }
    .orders-data-table .col-actions { width: 7% !important; }

    .orders-table-wrap .orders-data-table td:nth-child(6),
    .orders-table-wrap .orders-data-table th:nth-child(6) {
        padding-left: 12px !important;
        padding-right: 18px !important;
        overflow: visible !important;
    }

    .orders-table-wrap .orders-data-table td:nth-child(6) .badge {
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

html[data-theme="dark"] table.table:not(.orders-data-table):not(.profile-info-table):not(.table-borderless),
html[data-theme="dark"] .table-responsive > table.table:not(.orders-data-table):not(.profile-info-table):not(.table-borderless) {
    box-shadow: 0 0 0 1px #000 !important;
}


/* =========================================================
   v41 — search width + table frames/separators refinement
   ========================================================= */

/* Orders desktop search: wider field with stronger text. */
@media (min-width: 768px) {
    .filters-toolbar #desktop-search-form input[name="search"] {
        width: 360px !important;
        min-width: 360px !important;
        font-weight: 600 !important;
    }
}

/* Generic responsive tables: the wrapper owns one continuous frame,
   while the table provides clean horizontal row separators. */
.table-responsive:not(.orders-table-wrap) {
    border: 1px solid #111827 !important;
    border-radius: 12px !important;
    overflow: auto !important;
    box-shadow: none !important;
    background: transparent !important;
}
.table-responsive:not(.orders-table-wrap) > table.table {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.table-responsive:not(.orders-table-wrap) > table.table thead th {
    border-top: 0 !important;
}
.table-responsive:not(.orders-table-wrap) > table.table tbody tr + tr > * {
    border-top: 1px solid #c9d3df !important;
}
.table-responsive:not(.orders-table-wrap) > table.table tbody tr:last-child > * {
    border-bottom: 0 !important;
}

/* User profile detail tables: keep the card's frame only, but restore
   the thin separators between each information row. */
.user-detail-info-table > tbody > tr + tr > th,
.user-detail-info-table > tbody > tr + tr > td {
    border-top: 1px solid #c9d3df !important;
}
.user-detail-info-table > tbody > tr:first-child > th,
.user-detail-info-table > tbody > tr:first-child > td {
    border-top: 0 !important;
}
.user-detail-info-table > tbody > tr:last-child > th,
.user-detail-info-table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

html[data-theme="dark"] .table-responsive:not(.orders-table-wrap) {
    border-color: #000 !important;
}
html[data-theme="dark"] .table-responsive:not(.orders-table-wrap) > table.table tbody tr + tr > *,
html[data-theme="dark"] .user-detail-info-table > tbody > tr + tr > th,
html[data-theme="dark"] .user-detail-info-table > tbody > tr + tr > td {
    border-top-color: #344256 !important;
}
html[data-theme="dark"] .filters-toolbar #desktop-search-form input[name="search"] {
    font-weight: 600 !important;
}

/* =========================================================
   FINAL v42 — Orders navbar/filter surface + column balance
   ========================================================= */

/* In the light theme the top navbar and filters toolbar use the exact same surface. */
:root {
    --toolbar-bg: #e5eaf2;
    --toolbar-border: #cbd5e1;
}
.app-navbar,
.filters-toolbar {
    background: var(--toolbar-bg) !important;
}

/* Rebalance order-list columns: phone needs less room, status needs more. */
@media (min-width: 768px) {
    .orders-data-table .col-creator { width: 15% !important; }
    .orders-data-table .col-document { width: 12% !important; }
    .orders-data-table .col-city { width: 13% !important; }
    .orders-data-table .col-client { width: 15% !important; }
    .orders-data-table .col-phone { width: 11% !important; }
    .orders-data-table .col-car { width: 9% !important; }
    .orders-data-table .col-status { width: 9.5% !important; }
    .orders-data-table .col-date { width: 8.5% !important; }
    .orders-data-table .col-actions { width: 7% !important; }

    .orders-table-wrap .orders-data-table td:nth-child(5),
    .orders-table-wrap .orders-data-table th:nth-child(5) {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .orders-table-wrap .orders-data-table td:nth-child(7),
    .orders-table-wrap .orders-data-table th:nth-child(7) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .orders-table-wrap .orders-data-table td:nth-child(7) .badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        min-width: max-content !important;
    }
}

/* Keep the same toolbar surface in dark mode as the filter bar. */
html[data-theme="dark"] {
    --toolbar-bg: #1c2634;
    --toolbar-border: #334154;
}
html[data-theme="dark"] .app-navbar,
html[data-theme="dark"] .filters-toolbar {
    background: var(--toolbar-bg) !important;
    border-bottom-color: var(--toolbar-border) !important;
}

/* FINAL v44 — align Status header with status badges on the orders list. */
@media (min-width: 768px) {
    .orders-table-wrap .orders-data-table td:nth-child(7),
    .orders-table-wrap .orders-data-table th:nth-child(7) {
        padding-left: 28px !important;
        padding-right: 18px !important;
    }

    .orders-table-wrap .orders-data-table td:nth-child(7) {
        text-align: left !important;
    }

    .orders-table-wrap .orders-data-table th:nth-child(7) {
        text-align: left !important;
        padding-left: 36px !important;
        padding-right: 18px !important;
    }
}


/* =========================================================
   v45 — final action/confirmation/order-header refinements
   ========================================================= */

/* Orders table: move the Manager header without shifting the column. */
@media (min-width: 768px) {
    .orders-table-wrap .orders-data-table th.orders-manager-header {
        position: relative !important;
        left: 4px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
}

/* Car edit actions: compact, balanced buttons like the Add Car action. */
.car-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.car-edit-actions .btn-action {
    min-height: 40px !important;
    padding: 8px 14px !important;
    width: auto !important;
}
@media (max-width: 767.98px) {
    .car-edit-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .car-edit-actions .btn-action {
        width: 100% !important;
    }
}

/* Deletion confirmation pages use one consistent compact action row. */
.confirmation-actions .btn-action {
    min-height: 40px !important;
    padding: 8px 16px !important;
    min-width: 150px !important;
}

/* Keep the order deletion screen visually identical to client/user deletion. */
.confirmation-card .card-body {
    padding: 28px !important;
}

/* Prevent action links in car/client page headers from leaving an empty flex gap. */
@media (min-width: 768px) {
    .page-heading > .d-flex:empty,
    .d-flex.justify-content-between.align-items-center.mb-4 > .d-flex:empty {
        display: none !important;
    }
}


/* =========================================================
   v46 — order status header alignment + restored delete details
   ========================================================= */
@media (min-width: 768px) {
    /* Move only the word "Статус" inside its existing cell; do not change column width. */
    .orders-table-wrap .orders-data-table th.orders-status-header {
        text-indent: 18px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }
}

.confirmation-details {
    max-width: 560px;
    margin: 0 auto 24px;
    padding: 0;
    border: 1px solid #c9d3df;
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    background: rgba(255,255,255,.6);
}
.confirmation-details > div {
    padding: 10px 14px;
    border-bottom: 1px solid #c9d3df;
    line-height: 1.35;
}
.confirmation-details > div:last-child { border-bottom: 0; }
.confirmation-details strong { margin-right: 6px; }
html[data-theme="dark"] .confirmation-details {
    background: #172231;
    border-color: #3a4a60;
}
html[data-theme="dark"] .confirmation-details > div {
    border-bottom-color: #314055;
    color: #e7eef7;
}

/* v48 — desktop theme toggle is available to anonymous users too. */
@media (min-width: 992px) {
    .nav-theme-toggle {
        min-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}


/* v49 — password visibility toggle on login. */
.password-toggle-wrap {
    position: relative;
}
.password-toggle-input {
    padding-right: 48px !important;
}
.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    cursor: pointer;
    z-index: 3;
}
.password-toggle-btn:hover {
    background: #edf3fb;
    border-color: #d8e2ef;
    color: #0b5ed7;
}
.password-toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11,94,215,.16);
}
html[data-theme="dark"] .password-toggle-btn {
    color: #aebbd0;
}
html[data-theme="dark"] .password-toggle-btn:hover {
    background: #243247;
    border-color: #3a4a60;
    color: #8cb5ff;
}
html[data-theme="dark"] .password-toggle-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(140,181,255,.18);
}

/* v50 — visible Active checkboxes in both themes */
input.form-check-input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid #64748b;
    background-color: #ffffff;
    accent-color: var(--ui-blue, #1769e0);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04);
}
input.form-check-input[type="checkbox"]:checked {
    background-color: var(--ui-blue, #1769e0);
    border-color: var(--ui-blue, #1769e0);
}
html[data-theme="dark"] input.form-check-input[type="checkbox"] {
    background-color: #172235;
    border-color: #8da2bf;
}
html[data-theme="dark"] input.form-check-input[type="checkbox"]:checked {
    background-color: var(--ui-blue, #4f8df7);
    border-color: var(--ui-blue, #4f8df7);
}


/* v54 — manager order-edit layout: read-only summary matches admin visual language */
.manager-readonly-info {
    padding: 1rem 1.1rem;
    border: 0;
    border-radius: var(--ui-radius, 14px);
    background: var(--ui-surface-2, #f5f7fb);
    color: var(--ui-text, #1f2937);
}
.manager-readonly-info .card-title {
    margin-bottom: .9rem;
}
.manager-readonly-info strong {
    font-weight: 700;
}
html[data-theme="dark"] .manager-readonly-info {
    background: var(--ui-surface-2, #1c2430);
    color: var(--ui-text, #e8edf5);
}

/* v55 — center the order-list search icon button */
@media (min-width: 768px) {
    .filters-toolbar #desktop-search-form > button[type="submit"] {
        width:42px !important; height:42px !important; min-width:42px !important;
        padding:0 !important; display:inline-flex !important; align-items:center !important;
        justify-content:center !important; line-height:1 !important; flex:0 0 42px !important;
    }
}

@media (max-width: 767.98px) {
    .filters-toolbar #mobile-search-form > button[type="submit"] {
        display:inline-flex !important; align-items:center !important; justify-content:center !important;
        padding:0 !important; line-height:1 !important;
    }
}

/* =========================================================
   MOBILE FILTER LAYOUT — v60
   Hard-isolate desktop calendar from the mobile filter stack.
   The mobile filter stack is intentionally laid out as explicit
   rows so hidden desktop controls can never create phantom space.
   ========================================================= */
@media (max-width: 767.98px) {
    .filters-toolbar.filters-open .filter-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
        row-gap: 12px !important;
        column-gap: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* The desktop date control is a real grid item in the DOM.
       Remove it from layout completely on mobile. */
    .filters-toolbar.filters-open .filter-nav > li.date-filter-nav-item,
    .filters-toolbar .filter-nav > li.mobile-date-hidden {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .filters-toolbar.filters-open .filter-nav > .nav-item {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: stretch !important;
    }

    .filters-toolbar.filters-open .filter-nav > .nav-item > .nav-link {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 9px 11px !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    /* Keep the mobile standalone calendar below the filter stack,
       never as part of the dropdown's vertical rhythm. */
    .mobile-date-search-card {
        margin-top: 12px !important;
    }
}

/* =========================================================
   MOBILE FILTER LAYOUT — extra-small devices
   ========================================================= */
@media (max-width: 420px) {
    .filters-toolbar.filters-open .filter-nav {
        row-gap: 10px !important;
    }
}


/* =========================================================
   v61 — order client label + chat input alignment cleanup
   ========================================================= */
.chat-page .chat-input {
    border-top: 0 !important;
    box-shadow: none !important;
    padding: 12px 16px 14px !important;
}
.chat-page .chat-compose {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}
.chat-page .chat-compose textarea {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    align-self: center !important;
    min-height: 44px !important;
    max-height: 150px !important;
    line-height: 1.45 !important;
}
.chat-page .chat-send {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}
.chat-page .chat-input-spacer { display: none !important; }

html[data-theme="dark"] .chat-page .chat-input {
    border-top: 0 !important;
    background: #151d29 !important;
}
html[data-theme="dark"] .chat-page .chat-compose {
    background: #202b3a !important;
    border-color: #344255 !important;
}


/* =========================================================
   v62 — compact chat composer
   ========================================================= */
.chat-page .chat-input {
    padding: 10px 12px 12px !important;
}
.chat-page .chat-compose {
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    gap: 10px !important;
    padding: 5px !important;
}
.chat-page .chat-compose textarea {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 120px !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    line-height: 1.35 !important;
    overflow-y: auto !important;
}
.chat-page .chat-send {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 12px !important;
}
@media (max-width: 767.98px) {
    .chat-page .chat-compose {
        width: 100% !important;
    }
}