/* DS Admin — Detailing Street Brand Theme
   Primary: #E02020 (DS Red)
   Dark:    #1C1C1C (DS Black)
*/

/* ── Variables ───────────────────────────── */
:root {
    --ds-red:    #E02020;
    --ds-red-dk: #c41a1a;
    --ds-dark:   #1C1C1C;
    --ds-bg:     #f4f6f9;
}

body {
    background-color: var(--ds-bg) !important;
}

/* ── Primary button override ─────────────── */
.btn-primary {
    background-color: var(--ds-red) !important;
    border-color:     var(--ds-red) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--ds-red-dk) !important;
    border-color:     var(--ds-red-dk) !important;
    box-shadow: 0 4px 12px rgba(224,32,32,0.35) !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #e07070 !important;
    border-color:     #e07070 !important;
    cursor: not-allowed;
}
.btn-outline-primary {
    color: var(--ds-red) !important;
    border-color: var(--ds-red) !important;
}
.btn-outline-primary:hover {
    background-color: var(--ds-red) !important;
    color: #fff !important;
}

/* ── Nav header (logo bar) ───────────────── */
.nav-header {
    background-color: var(--ds-dark) !important;
    border-right: none !important;
}
.nav-header .brand-title {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
}
.hamburger .line {
    background: #ffffff !important;
}
.nav-control .hamburger:hover .line {
    background: var(--ds-red) !important;
}

/* ── Sidebar ─────────────────────────────── */
[data-sidebar-style="full"][data-layout="vertical"] .dlabnav .metismenu > li > a:before {
    background: var(--ds-red) !important;
}
[data-sidebar-style="full"][data-layout="vertical"] .dlabnav .metismenu > li.mm-active > a,
[data-sidebar-style="full"][data-layout="vertical"] .dlabnav .metismenu > li.mm-active > a i {
    color: var(--ds-red) !important;
}
.dlabnav {
    background-color: var(--ds-dark) !important;
    border-right: none !important;
    box-shadow: 4px 0 15px rgba(0,0,0,0.15) !important;
}
.dlabnav .dlabnav-scroll {
    background: transparent !important;
}

/* Top-level nav links */
.dlabnav .metismenu > li > a {
    color: #9aa0ac !important;
    border-radius: 8px;
    margin: 2px 12px;
    padding: 12px 16px !important;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}
.dlabnav .metismenu > li > a:hover {
    color: #ffffff !important;
    background: rgba(224,32,32,0.12) !important;
    border-left-color: var(--ds-red) !important;
}
.dlabnav .metismenu > li.mm-active > a {
    color: #ffffff !important;
    background: rgba(224,32,32,0.18) !important;
    border-left-color: var(--ds-red) !important;
}
.dlabnav .metismenu > li > a i,
.dlabnav .metismenu > li > a .material-icons {
    color: #6c757d !important;
    font-size: 20px !important;
    min-width: 28px;
    transition: color 0.2s;
}
.dlabnav .metismenu > li > a:hover i,
.dlabnav .metismenu > li > a:hover .material-icons,
.dlabnav .metismenu > li.mm-active > a i,
.dlabnav .metismenu > li.mm-active > a .material-icons {
    color: var(--ds-red) !important;
}

/* Sub-menu */
.dlabnav .metismenu ul {
    background: rgba(0,0,0,0.2) !important;
    border-radius: 8px;
    margin: 0 12px 4px;
    padding: 4px 0;
}
.dlabnav .metismenu ul a {
    color: #8a8f9a !important;
    padding: 9px 16px 9px 44px !important;
    font-size: 0.85rem;
    transition: all 0.15s;
}
.dlabnav .metismenu ul a:hover,
.dlabnav .metismenu ul li.mm-active > a {
    color: var(--ds-red) !important;
    background: transparent !important;
}

/* Arrow color */
.dlabnav .metismenu .has-arrow::after {
    border-color: #6c757d !important;
}
.dlabnav .metismenu > li.mm-active .has-arrow::after,
.dlabnav .metismenu > li > a:hover .has-arrow::after {
    border-color: #fff !important;
}

/* ── Header ──────────────────────────────── */
.header {
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
    border-bottom: 1px solid #f0f0f0;
}
.header .dashboard_bar {
    color: var(--ds-dark) !important;
    font-weight: 700;
    font-size: 1.25rem;
}

/* ── Cards ───────────────────────────────── */
.card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f2f5 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1rem 1.5rem !important;
}
.card-title {
    font-weight: 700 !important;
    color: var(--ds-dark) !important;
    font-size: 1rem;
}

/* ── Stat cards (dashboard) ──────────────── */
.ds-stat-card {
    background: #ffffff;
    border-radius: 14px !important;
    border: none !important;
    padding: 1.4rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.ds-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
    text-decoration: none;
    color: inherit;
}
.ds-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 26px;
}
.ds-stat-icon.ic-red    { background: linear-gradient(135deg, #E02020, #c41a1a); color: #fff; }
.ds-stat-icon.ic-green  { background: linear-gradient(135deg, #28a745, #1e7e34); color: #fff; }
.ds-stat-icon.ic-orange { background: linear-gradient(135deg, #fd7e14, #d96700); color: #fff; }
.ds-stat-icon.ic-dark   { background: linear-gradient(135deg, #343a40, #1C1C1C); color: #fff; }
.ds-stat-body {
    flex: 1;
}
.ds-stat-label {
    font-size: 0.72rem;
    color: #9a9ea7;
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.ds-stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--ds-dark);
    margin: 0;
    line-height: 1.1;
}
.ds-stat-sub {
    font-size: 0.75rem;
    color: #9a9ea7;
    margin: 3px 0 0;
}

/* ── Login page ──────────────────────────── */
.authincation {
    background: linear-gradient(135deg, #1C1C1C 0%, #3a0000 50%, #E02020 100%) !important;
}
.authincation-content {
    background: rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.45) !important;
    border-radius: 18px !important;
}
.auth-form {
    border-radius: 16px !important;
    padding: 2rem !important;
}
.auth-form .btn.bg-white {
    background: var(--ds-red) !important;
    color: #fff !important;
    border: none;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.2s;
}
.auth-form .btn.bg-white:hover {
    background: var(--ds-red-dk) !important;
}
.auth-form .form-control {
    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: 8px !important;
}
.auth-form .form-control:focus {
    background: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 3px rgba(224,32,32,0.35) !important;
}

/* ── Password toggle ─────────────────────── */
.pass-toggle-wrap {
    position: relative;
}
.pass-toggle-wrap input {
    padding-right: 42px;
}
.pass-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: #9a9ea7;
    padding: 0;
    line-height: 1;
}
.pass-toggle-btn:hover {
    color: var(--ds-red);
}

/* ── Delete confirm modal ────────────────── */
#dsDeleteModal .modal-header {
    background: var(--ds-dark);
    color: #fff;
    border-radius: 12px 12px 0 0;
}
#dsDeleteModal .modal-header .close {
    color: #fff;
    opacity: 0.8;
}
#dsDeleteModal .modal-title {
    font-weight: 700;
}
#dsDeleteModal .btn-danger {
    background: var(--ds-red);
    border-color: var(--ds-red);
}
#dsDeleteModal .btn-danger:hover {
    background: var(--ds-red-dk);
    border-color: var(--ds-red-dk);
}

/* ── Tables ──────────────────────────────── */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ds-red) !important;
    border-color: var(--ds-red) !important;
    color: #fff !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(224,32,32,0.1) !important;
    border-color: transparent !important;
    color: var(--ds-red) !important;
    border-radius: 6px;
}

/* ── Form focus states ───────────────────── */
.form-control:focus {
    border-color: var(--ds-red) !important;
    box-shadow: 0 0 0 0.2rem rgba(224,32,32,0.15) !important;
}

/* ── Booking & Query page tables ─────────── */
.card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: .5rem;
}
.card-header .card-title { margin: 0 !important; }

/* Search bar */
.dataTables_filter label,
.dataTables_length label {
    color: #555 !important;
    font-size: .85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.dataTables_filter input[type="search"],
#searchTodayIn,
#searchAllIn {
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: .85rem !important;
    outline: none !important;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
    color: #333;
    min-width: 200px;
}
.dataTables_filter input[type="search"]:focus,
#searchTodayIn:focus,
#searchAllIn:focus {
    border-color: var(--ds-red) !important;
    box-shadow: 0 0 0 3px rgba(224,32,32,.1) !important;
}
#searchTodayBtn, #searchAllBtn {
    background: var(--ds-red) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    font-size: .85rem;
    transition: background .2s;
}
#searchTodayBtn:hover, #searchAllBtn:hover {
    background: var(--ds-red-dk) !important;
}

/* Query sort/filter bar */
#sort_div {
    background: #f8f9fa;
    border-radius: 10px;
    padding: .75rem 1rem !important;
    gap: .5rem;
}
#sort_div select {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .83rem;
    color: #333;
}
#filter_link {
    font-size: .83rem;
    color: var(--ds-red) !important;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
#sort {
    font-size: .83rem !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
}
#all_table_filter {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
#all_table_filter label {
    margin: 0;
    font-weight: 600;
    color: #555;
    font-size: .83rem;
}
#all_epackage {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .83rem;
    color: #333;
}

/* DataTable row hover */
table.dataTable tbody tr:hover {
    background: rgba(224,32,32,.04) !important;
}
table.dataTable thead th {
    font-size: .8rem !important;
    font-weight: 700 !important;
    color: #555 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid #f0f0f0 !important;
    padding: 12px 10px !important;
}
table.dataTable tbody td {
    font-size: .88rem !important;
    color: #333 !important;
    vertical-align: middle !important;
    padding: 12px 10px !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

/* Action buttons in table */
.btn-info { background-color: var(--ds-red) !important; border-color: var(--ds-red) !important; color: #fff !important; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--ds-red-dk) !important; border-color: var(--ds-red-dk) !important; box-shadow: 0 4px 12px rgba(224,32,32,0.35) !important; }
.btn-outline-info { border-color: var(--ds-red) !important; color: var(--ds-red) !important; }
.btn-outline-info:hover { background-color: var(--ds-red) !important; color: #fff !important; }
.btn-outline-warning { border-color: #f0a500 !important; color: #f0a500 !important; }
.btn-outline-danger { border-color: var(--ds-red) !important; color: var(--ds-red) !important; }
.btn-rounded { border-radius: 8px !important; }
.btn-rounded:hover { opacity: .85; }

/* ── Table toolbar (booking list search) ─── */
.ds-table-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    justify-content: flex-end;
}
.ds-table-toolbar .form-control {
    max-width: 280px;
    height: 38px;
    font-size: 0.875rem;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
}
.ds-table-toolbar .btn {
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px !important;
}

/* ── Compact action buttons ──────────────── */
.ds-actions-wrap {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}
.ds-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1.5px solid;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none !important;
    flex-shrink: 0;
}
.ds-btn-view   { border-color: var(--ds-red); color: var(--ds-red); background: transparent; }
.ds-btn-view:hover   { background: var(--ds-red); color: #fff; }
.ds-btn-edit   { border-color: #f0a500; color: #f0a500; background: transparent; }
.ds-btn-edit:hover   { background: #f0a500; color: #fff; }
.ds-btn-delete { border-color: #E02020; color: #E02020; background: transparent; }
.ds-btn-delete:hover { background: #E02020; color: #fff; }
.ds-btn-sms    { border-color: #6f42c1; color: #6f42c1; background: transparent; }
.ds-btn-sms:hover    { background: #6f42c1; color: #fff; }

/* ── Booking create form ─────────────────── */
.ds-form-section {
    max-width: 860px;
    padding: 1.5rem 2rem 0.25rem;
}
.ds-form-group {
    margin-bottom: 1.1rem;
}
.ds-form-group > label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ds-form-group > label .req { color: var(--ds-red); margin-left: 2px; }
.ds-form-group .form-control {
    height: 42px;
    font-size: 0.875rem;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    color: #333 !important;
    background: #fff !important;
}
.ds-form-group .form-control:focus {
    border-color: var(--ds-red) !important;
    box-shadow: 0 0 0 3px rgba(224,32,32,0.1) !important;
}
.ds-form-group .text-danger {
    font-size: 0.77rem;
    margin-top: 0.25rem;
}
.ds-booking-id-banner {
    background: linear-gradient(135deg, #1c1c1c 0%, #3a0a0a 100%);
    color: #fff;
    padding: 12px 2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ds-booking-id-banner .id-val {
    background: var(--ds-red);
    padding: 2px 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}
.ds-tab-bar { border-bottom: 2px solid #f0f0f0; }
.ds-tab-bar .nav-tabs { border-bottom: none; padding: 0.75rem 1.5rem 0; gap: 4px; }
.ds-tab-bar .nav-link {
    color: #6c757d;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 22px;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent !important;
    background: transparent;
}
.ds-tab-bar .nav-link.active {
    color: var(--ds-red) !important;
    border-color: #e0e0e0 #e0e0e0 #fff !important;
    background: #fff !important;
}

/* ── Global: custom pagination ──────────── */
.dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 0 0.75rem !important;
    flex-wrap: wrap;
    gap: 4px;
}
.dataTables_paginate > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}
.dataTables_paginate .paginate_button {
    min-width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 0 12px !important;
    border: 1.5px solid #e0e0e0 !important;
    background: #fff !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: all 0.15s !important;
    box-sizing: border-box !important;
}
.dataTables_paginate .paginate_button:hover {
    background: rgba(224,32,32,0.07) !important;
    border-color: var(--ds-red) !important;
    color: var(--ds-red) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--ds-red) !important;
    border-color: var(--ds-red) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(224,32,32,0.25) !important;
}
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    padding: 0 16px !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    color: #ccc !important;
    cursor: not-allowed !important;
    background: #fafafa !important;
    border-color: #e8e8e8 !important;
}
.dataTables_paginate .ellipsis {
    color: #aaa;
    padding: 0 4px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    height: 36px;
}

/* ── Global: show-entries + dataTables info ─ */
.dataTables_length label,
.dataTables_info {
    font-size: 0.82rem !important;
    color: #666 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap;
}
.dataTables_length select,
.dataTables_wrapper select.default-select {
    height: 32px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 0 8px !important;
    font-size: 0.82rem !important;
    color: #333 !important;
    background: #fff !important;
}
#today_table_info, #all_table_info {
    font-size: 0.82rem;
    color: #666;
    margin-top: 0.5rem;
}

/* ── DataTables wrapper toolbar row ─────── */
.dataTables_wrapper > .dataTables_length,
.dataTables_wrapper > .dataTables_filter,
.dataTables_wrapper > #today_table_filter,
.dataTables_wrapper > #all_table_filter {
    display: inline-flex !important;
    align-items: center !important;
}
.dataTables_wrapper > .dataTables_length {
    float: left;
}
.dataTables_wrapper > .dataTables_filter,
.dataTables_wrapper > #today_table_filter,
.dataTables_wrapper > #all_table_filter {
    float: right;
}
.dataTables_wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* ── Global: DataTables filter row ─────── */
.dataTables_filter {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.dataTables_filter label {
    font-size: 0.82rem !important;
    color: #555 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap;
}
.dataTables_filter input[type="search"] {
    height: 36px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    font-size: 0.85rem !important;
    color: #333 !important;
    background: #fff !important;
    outline: none !important;
    min-width: 200px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dataTables_filter input[type="search"]:focus {
    border-color: var(--ds-red) !important;
    box-shadow: 0 0 0 3px rgba(224,32,32,0.1) !important;
}
.dataTables_filter .btn,
#searchTodayBtn, #searchAllBtn {
    height: 36px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: var(--ds-red) !important;
    color: #fff !important;
    border: none !important;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.dataTables_filter .btn:hover,
#searchTodayBtn:hover, #searchAllBtn:hover {
    background: var(--ds-red-dk) !important;
}
.dataTables_filter select.default-select,
.dataTables_filter select.form-control-sm,
#all_epackage, #epackage {
    height: 36px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
    font-size: 0.82rem !important;
    color: #333 !important;
    background: #fff !important;
}

/* ── Global: sort bar (#sort_div) ───────── */
#sort_div {
    background: #f8f9fa !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    margin-bottom: 1rem !important;
}
#sort_div select,
#sort_type, #column {
    height: 34px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    font-size: 0.82rem !important;
    color: #333 !important;
    background: #fff !important;
}
#filter_link {
    font-size: 0.82rem !important;
    color: var(--ds-red) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
#sort {
    height: 34px !important;
    padding: 0 16px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ── Global: all table action buttons ───── */
table tbody td .row {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    gap: 4px !important;
    width: auto !important;
}
table tbody td .row > [class*="col-"] {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
}
table tbody td .btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    transition: background 0.15s, color 0.15s !important;
}
table tbody td .btn-outline-info { border: 1.5px solid var(--ds-red) !important; color: var(--ds-red) !important; background: transparent !important; }
table tbody td .btn-outline-info:hover { background: var(--ds-red) !important; color: #fff !important; }
table tbody td .btn-outline-warning { border: 1.5px solid #f0a500 !important; color: #f0a500 !important; background: transparent !important; }
table tbody td .btn-outline-warning:hover { background: #f0a500 !important; color: #fff !important; }
table tbody td .btn-outline-danger { border: 1.5px solid #E02020 !important; color: #E02020 !important; background: transparent !important; }
table tbody td .btn-outline-danger:hover { background: #E02020 !important; color: #fff !important; }
table tbody td .btn:not([class*="btn-outline"]):not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-dark) {
    border: 1.5px solid #6c757d !important;
    color: #6c757d !important;
    background: transparent !important;
}
table tbody td .btn:not([class*="btn-outline"]):not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-dark):hover {
    background: #6c757d !important;
    color: #fff !important;
}

/* ── Card header: Create New / action btns ─ */
.card-header .btn-rounded.btn-primary {
    font-size: 0.82rem !important;
    padding: 6px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ── Empty state ─────────────────────────── */
.ds-empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: #9a9ea7;
}
.ds-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: #d0d3da;
}
.ds-empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* ══════════════════════════════════════════
   PRECISION REPAIRS — UI Audit Round 3
   ══════════════════════════════════════════ */

/* Fix 1: d-none must HIDE paginate buttons even with our inline-flex rule */
.dataTables_paginate .paginate_button.d-none {
    display: none !important;
}

/* Fix 2: Status badge spans (Open/Closed) — compact pill, not full-width btn */
table tbody td span.btn.btn-rounded {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 3px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    cursor: default !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.3px;
}

/* Fix 3: Action buttons that carry a col-* class directly on <a>/<button> */
table tbody td a.btn[class*="col-"],
table tbody td button.btn[class*="col-"] {
    flex: none !important;
    flex-basis: auto !important;
    max-width: none !important;
    width: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Fix 4: btn-rounded inside table td must not be a pill (higher specificity) */
table tbody td .btn.btn-rounded {
    border-radius: 8px !important;
}

/* ── Bootstrap Select normalization (all create forms) ─ */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select.btn-group > .dropdown-toggle {
    height: 42px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    color: #333 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    padding: 0 14px !important;
}
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.btn-group > .dropdown-toggle:focus {
    outline: none !important;
    border-color: var(--ds-red) !important;
    box-shadow: 0 0 0 3px rgba(224,32,32,0.1) !important;
}
.bootstrap-select .dropdown-menu {
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    padding: 4px 0 !important;
    margin-top: 2px !important;
}
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active {
    background-color: var(--ds-red) !important;
    color: #fff !important;
}
.bootstrap-select .dropdown-item:hover:not(.active) {
    background-color: rgba(224,32,32,0.07) !important;
    color: var(--ds-red) !important;
}
.filter-option-inner-inner {
    color: #333 !important;
}

/* ── Download button color ─ */
.ds-btn-download { border-color: var(--ds-red); color: var(--ds-red); background: transparent; }
.ds-btn-download:hover { background: var(--ds-red); color: #fff; }
.ds-btn-green { border-color: #28a745; color: #28a745; background: transparent; }
.ds-btn-green:hover { background: #28a745; color: #fff; }

/* ── Settings: User / Branch cards ─────────── */
.ds-settings-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 576px) {
    .ds-settings-card-grid { grid-template-columns: 1fr; }
}
.ds-user-card {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08) !important;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    margin: 0 !important;
    position: relative;
}
.ds-user-card::before {
    content: '';
    display: block;
    height: 6px;
    background: linear-gradient(90deg, var(--ds-red) 0%, #ff6b6b 100%);
}
.ds-user-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 12px 32px rgba(224,32,32,0.12) !important;
    transform: translateY(-3px);
}
.ds-user-card .card-body {
    padding: 1.4rem 1.25rem !important;
}
.ds-user-card .card-footer {
    background: #fafafa !important;
    border-top: 1px solid #f0f0f0 !important;
    padding: 0.75rem 1.25rem !important;
}
.ds-user-name {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--ds-dark);
    margin-bottom: 4px;
}
.ds-user-sub {
    font-size: 0.81rem;
    color: #888;
    margin-bottom: 2px;
    word-break: break-all;
}
.ds-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.ds-status-active   { background: rgba(26,188,156,0.12); color: #0e9e77; }
.ds-status-inactive { background: rgba(224,32,32,0.10);  color: #c41a1a; }
.ds-status-pending  { background: rgba(240,165,0,0.12);  color: #b57800; }

/* ── Create / form page layout ─────────────── */
.ds-create-card .card-header {
    background: #fff !important;
}
.ds-create-card .card-body {
    padding: 1.75rem 2rem !important;
}
.ds-create-card .card-footer {
    background: #fafafa !important;
    border-top: 1px solid #f0f0f0 !important;
    padding: 1rem 2rem !important;
}
.ds-form-search-bar {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.ds-form-search-bar .ds-form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 220px;
}
.ds-form-search-bar .btn {
    height: 42px;
    padding: 0 20px;
    border-radius: 8px !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* ── Report/Maintenance search bar ─ */
.ds-search-row {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.ds-search-row select,
.ds-search-row input {
    height: 40px;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    color: #333 !important;
    padding: 0 12px !important;
    background: #fff !important;
}
.ds-search-row .btn {
    height: 40px;
    padding: 0 20px;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
}

/* ── Override toastr (style.css uses #2953E8 blue for success/info) ─ */
.toast-success { background-color: var(--ds-red) !important; }
.toast-info    { background-color: #c77700 !important; }
#toast-container > .toast-success { background-color: var(--ds-red) !important; }
#toast-container > .toast-info    { background-color: #c77700 !important; }

/* ── Override paginate_button text color (style.css spec 0,3,0 with !important) ─ */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #555 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--ds-red) !important;
}

/* ── Override any remaining Bootstrap info utilities ─ */
.text-info { color: var(--ds-red) !important; }
.bg-info { background-color: var(--ds-red) !important; }
.border-info { border-color: var(--ds-red) !important; }