/* ===================================================================
   CAROMOTO DASHBOARD ADMIN — Design System
   Inspired by Dashboard Portal #4
   =================================================================== */

/* ===== CSS VARIABLES ===== */
:root {
    --cm-purple: #6c5ce7;
    --cm-purple-light: #a29bfe;
    --cm-purple-bg: #f0edff;
    --cm-purple-dark: #5a4bd1;
    --cm-bg: #f5f6fa;
    --cm-white: #ffffff;
    --cm-card: #ffffff;
    --cm-border: #ebebf0;
    --cm-text: #1a1a2e;
    --cm-text-secondary: #6b7280;
    --cm-text-muted: #9ca3af;
    --cm-green: #10b981;
    --cm-green-bg: #ecfdf5;
    --cm-red: #ef4444;
    --cm-red-bg: #fef2f2;
    --cm-blue: #3b82f6;
    --cm-blue-bg: #eff6ff;
    --cm-orange: #f59e0b;
    --cm-orange-bg: #fffbeb;
    --cm-cyan: #06b6d4;
    --cm-cyan-bg: #ecfeff;
    --cm-radius: 14px;
    --cm-radius-sm: 10px;
    --cm-radius-xs: 8px;
    --cm-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
    --cm-shadow-md: 0 4px 16px rgba(0,0,0,.08);
    --cm-shadow-card: 0 2px 8px rgba(0,0,0,.06), 0 0 1px rgba(0,0,0,.08);
    --cm-sidebar-w: 250px;
    --cm-topbar-h: 60px;
    --cm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Override Django dark mode */
    color-scheme: light !important;
}

/* ===== RESET Django dark mode ===== */
html[data-theme="dark"], [data-theme="dark"] body,
html, body {
    color-scheme: light !important;
}

/* ===== GLOBAL RESETS ===== */
body {
    font-family: var(--cm-font) !important;
    background: var(--cm-bg) !important;
    color: var(--cm-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Force light mode overrides */
body, #container, .main, .content,
#content, #header, .module, fieldset,
.form-row, select, input, textarea {
    color-scheme: light !important;
}

/* ===== HIDE DEFAULT DJANGO ELEMENTS ===== */
/* Hide the default Django header completely */
#header {
    display: none !important;
}

/* Hide default Django nav sidebar */
nav.sticky {
    display: none !important;
}

/* Hide default breadcrumbs */
.breadcrumbs, nav[aria-label="Breadcrumbs"] {
    display: none !important;
}

/* Hide skip-to-content link */
.skip-to-content-link {
    display: none !important;
}

/* Hide Django SVGs */
.base-svgs {
    display: none !important;
}

/* ===== LAYOUT: Container ===== */
#container {
    background: var(--cm-bg) !important;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ===== LAYOUT: Main + Content ===== */
div.main#main, div.main {
    display: flex !important;
    flex: 1;
    margin-left: var(--cm-sidebar-w) !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: var(--cm-bg) !important;
}

main#content-start, main.content {
    flex: 1;
    padding: 28px 32px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ===== No-sidebar pages (login, logout) ===== */
body.cm-no-sidebar div.main#main,
body.cm-no-sidebar div.main {
    margin-left: 0 !important;
}
body.cm-no-sidebar .cm-topbar {
    margin-left: 0 !important;
}
body.cm-no-sidebar main#content-start,
body.cm-no-sidebar main.content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 40px 16px !important;
}
/* ===== Login page — override Django login.css completely ===== */
body.login #container {
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: var(--cm-bg) !important;
    border-radius: 0 !important;
    overflow: visible !important;
    height: auto !important;
}
body.cm-no-sidebar #content {
    max-width: 380px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
/* Login form card */
body.cm-no-sidebar #content-main {
    background: var(--cm-card, #fff) !important;
    border-radius: var(--cm-radius, 14px) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
    padding: 32px !important;
}
body.login #content {
    padding: 0 !important;
}
body.login #login-form {
    margin: 0 !important;
    padding: 0 !important;
}
/* Labels */
body.login .form-row label {
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--cm-text-secondary, #6b7280) !important;
    margin-bottom: 4px !important;
}
/* Inputs */
body.login .form-row #id_username,
body.login .form-row #id_password {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border: 1px solid var(--cm-border, #e2e8f0) !important;
    border-radius: 8px !important;
    font-size: .9rem !important;
    background: var(--cm-bg, #f4f6fb) !important;
}
body.login .form-row #id_username:focus,
body.login .form-row #id_password:focus {
    border-color: var(--cm-purple, #6c5ce7) !important;
    box-shadow: 0 0 0 3px rgba(108,92,231,.12) !important;
    background: #fff !important;
    outline: none !important;
}
/* Submit row on login — kill ALL styling from global .submit-row */
body.login .submit-row {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 0 0 !important;
    margin: 0 !important;
    text-align: center !important;
    display: block !important;
    position: static !important;
}
body.login .submit-row input[type="submit"] {
    background: var(--cm-purple, #6c5ce7) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 48px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
    cursor: pointer !important;
    width: auto !important;
}
body.login .submit-row input[type="submit"]:hover {
    background: var(--cm-purple-dark, #5a4bd1) !important;
}

#content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ===== SIDEBAR ===== */
.cm-sidebar {
    width: var(--cm-sidebar-w);
    background: var(--cm-white);
    border-right: none;
    box-shadow: 2px 0 12px rgba(0,0,0,.06);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.cm-sidebar::-webkit-scrollbar {
    width: 4px;
}
.cm-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.cm-sidebar::-webkit-scrollbar-thumb {
    background: var(--cm-border);
    border-radius: 4px;
}

/* Sidebar Brand */
.cm-sidebar-brand {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    text-decoration: none;
    flex-shrink: 0;
}
.cm-sidebar-brand:hover {
    text-decoration: none;
}
.cm-sidebar-brand .logo-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-sidebar-brand .logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cm-sidebar-brand .logo-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cm-text);
    letter-spacing: -0.03em;
}

/* Sidebar sections */
.cm-sidebar-section {
    padding: 20px 16px 6px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--cm-text-muted);
}

/* Sidebar nav */
.cm-sidebar-nav {
    list-style: none;
    padding: 0 10px;
    margin: 0;
}
.cm-sidebar-nav li {
    margin: 1px 0;
}
.cm-sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-radius: var(--cm-radius-sm);
    color: var(--cm-text-secondary);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    transition: all .2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-sidebar-nav li a:hover {
    background: var(--cm-bg);
    color: var(--cm-text);
    text-decoration: none;
}
.cm-sidebar-nav li a.active {
    background: var(--cm-purple-bg);
    color: var(--cm-purple);
}
.cm-sidebar-nav li a i {
    font-size: 1.1rem;
    width: 22px;
    min-width: 22px;
    text-align: center;
}
.cm-sidebar-nav li a .badge-count {
    margin-left: auto;
    background: var(--cm-red);
    color: white;
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    min-width: 20px;
    text-align: center;
}

/* Sidebar sub-items */
.cm-sidebar-subnav {
    list-style: none;
    padding: 0 10px 0 20px;
    margin: 0;
    display: none;
}
.cm-sidebar-subnav.open {
    display: block;
}
.cm-sidebar-nav li.has-subnav > a::after {
    content: '\F282'; /* bi-chevron-down */
    font-family: 'bootstrap-icons';
    font-size: .7rem;
    margin-left: auto;
    transition: transform .2s;
}
.cm-sidebar-nav li.has-subnav.open > a::after {
    transform: rotate(180deg);
}
.cm-sidebar-subnav li a {
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--cm-text-muted);
}
.cm-sidebar-subnav li a:hover {
    color: var(--cm-purple);
    background: transparent;
}
.cm-sidebar-subnav li a.active {
    color: var(--cm-purple);
    background: transparent;
    font-weight: 600;
}

/* Sidebar bottom (user) */
.cm-sidebar-bottom {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid rgba(0,0,0,.06);
    flex-shrink: 0;
}
.cm-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--cm-radius-sm);
    background: var(--cm-bg);
}
.cm-sidebar-user .avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--cm-purple);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}
.cm-sidebar-user .user-info {
    flex: 1;
    overflow: hidden;
}
.cm-sidebar-user .user-name {
    font-size: .82rem;
    font-weight: 700;
    color: var(--cm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-sidebar-user .user-role {
    font-size: .72rem;
    color: var(--cm-text-muted);
}
.cm-sidebar-user .user-actions {
    display: flex;
    gap: 4px;
}
.cm-sidebar-user .user-actions a {
    color: var(--cm-text-muted);
    font-size: .9rem;
    padding: 4px;
    border-radius: 6px;
    transition: all .15s;
    text-decoration: none;
}
.cm-sidebar-user .user-actions a:hover {
    color: var(--cm-purple);
    background: var(--cm-purple-bg);
}

/* ===== TOPBAR ===== */
.cm-topbar {
    background: var(--cm-white);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    margin-left: var(--cm-sidebar-w);
    min-height: var(--cm-topbar-h);
    overflow: visible;
}
.cm-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cm-topbar-left h1 {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
    padding: 0;
    color: var(--cm-text);
}
.cm-topbar-center {
    display: flex;
    align-items: center;
    gap: 14px;
    position: absolute;
    left: calc(50% - 135px);
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: auto;
}
.cm-topbar-center:empty {
    display: none;
}
.cm-topbar-center .cm-page-icon {
    width: 120px;
    height: 120px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
}
.cm-topbar-center span {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--cm-text);
    letter-spacing: -0.03em;
}
.cm-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cm-topbar-right .search-box {
    background: var(--cm-bg);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
}
.cm-topbar-right .search-box input {
    border: none;
    background: none;
    font-size: .85rem;
    color: var(--cm-text);
    outline: none;
    width: 100%;
    font-family: var(--cm-font);
}
.cm-topbar-right .search-box input::placeholder {
    color: var(--cm-text-muted);
}
.cm-topbar-right .icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--cm-radius-sm);
    border: 1px solid var(--cm-border);
    background: var(--cm-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-text-secondary);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    position: relative;
}
.cm-topbar-right .icon-btn:hover {
    background: var(--cm-bg);
    color: var(--cm-text);
}

/* ===== MOBILE SIDEBAR TOGGLE ===== */
.cm-sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--cm-text);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--cm-radius-xs);
}
.cm-sidebar-toggle:hover {
    background: var(--cm-bg);
}

/* ===== PAGE TITLE (inside content) ===== */
/* Title is already shown in the topbar — hide the duplicate inside #content */
#content > h1, #content > .content-title h1,
#content > .content_title h1 {
    display: none !important;
}

/* ===== CARDS / MODULES ===== */
.module, .card-cm {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--cm-shadow-card) !important;
}
.module h2, .module caption {
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--cm-text) !important;
    margin: -24px -24px 16px -24px !important;
    padding: 16px 24px !important;
    background: #fafafc !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    border-radius: var(--cm-radius) var(--cm-radius) 0 0 !important;
    text-align: left !important;
}

/* ===== FIELDSETS ===== */
fieldset {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    padding: 24px !important;
    margin: 0 0 16px 0 !important;
    box-shadow: var(--cm-shadow-card) !important;
}
fieldset h2, fieldset .fieldset-heading {
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--cm-text) !important;
    margin: -24px -24px 16px -24px !important;
    padding: 16px 24px !important;
    background: #fafafc !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    border-radius: var(--cm-radius) var(--cm-radius) 0 0 !important;
}

/* ===== FORM ROWS ===== */
.form-row {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--cm-border) !important;
}
.form-row:last-child {
    border-bottom: none !important;
}
.form-row label {
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--cm-text-secondary) !important;
}

/* ===== FORM INPUTS ===== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
textarea,
select,
.vTextField,
.vIntegerField,
.vDecimalField,
.vURLField {
    font-family: var(--cm-font) !important;
    font-size: .88rem !important;
    color: var(--cm-text) !important;
    background: var(--cm-white) !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs) !important;
    padding: 8px 12px !important;
    transition: border-color .2s, box-shadow .2s !important;
    outline: none !important;
}
input:focus, textarea:focus, select:focus,
.vTextField:focus, .vIntegerField:focus {
    border-color: var(--cm-purple) !important;
    box-shadow: 0 0 0 3px var(--cm-purple-bg) !important;
}

select {
    appearance: auto !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    height: auto !important;
}

/* ===== BUTTONS ===== */
input[type="submit"], button[type="submit"],
.submit-row input, .submit-row a,
.button, a.button {
    font-family: var(--cm-font) !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    padding: 9px 20px !important;
    border-radius: var(--cm-radius-xs) !important;
    cursor: pointer !important;
    transition: all .2s !important;
    border: none !important;
    text-decoration: none !important;
}

/* Primary button (Save) */
input[type="submit"].default, .submit-row input.default,
input[name="_save"], input[name="_continue"], input[name="_addanother"] {
    background: var(--cm-purple) !important;
    color: var(--cm-white) !important;
}
input[type="submit"].default:hover, .submit-row input.default:hover,
input[name="_save"]:hover, input[name="_continue"]:hover, input[name="_addanother"]:hover {
    background: var(--cm-purple-dark) !important;
    box-shadow: var(--cm-shadow-md) !important;
}

/* Secondary buttons */
.submit-row a.deletelink {
    background: var(--cm-red) !important;
    color: var(--cm-white) !important;
    padding: 9px 20px !important;
    border-radius: var(--cm-radius-xs) !important;
}
.submit-row a.deletelink:hover {
    background: #dc2626 !important;
}

/* Generic buttons */
.button, a.button, input[type="submit"] {
    background: var(--cm-bg) !important;
    color: var(--cm-text) !important;
    border: 1px solid var(--cm-border) !important;
}
.button:hover, a.button:hover, input[type="submit"]:hover {
    background: var(--cm-purple-bg) !important;
    color: var(--cm-purple) !important;
    border-color: var(--cm-purple-light) !important;
}

/* Override back to primary for default/save */
input[type="submit"].default, input[name="_save"],
input[name="_continue"], input[name="_addanother"] {
    background: var(--cm-purple) !important;
    color: var(--cm-white) !important;
    border: none !important;
}

/* ===== SUBMIT ROW ===== */
body:not(.login) .submit-row {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    padding: 16px 24px !important;
    margin: 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08), var(--cm-shadow-card) !important;
    overflow: visible !important;
}

/* ===== CHANGELIST (TABLE VIEWS) ===== */
/* In Django DOM: #changelist > #changelist-form + #changelist-filter
   Normal row puts form LEFT, filter RIGHT — exactly what we want */
#changelist {
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    align-items: flex-start !important;
    /* Override .module card styles — children float independently */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* The container + form take all remaining space */
.changelist-form-container {
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
}
#changelist-form {
    background: transparent !important;
}

/* Reset Django's #toolbar wrapper — make it a transparent box so the search card
   floats consistently with actions / results / paginator */
#toolbar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Object tools (Add button) — sits ABOVE #changelist, full width */
.object-tools {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    gap: 8px !important;
    float: none !important;
    clear: both !important;
}
.object-tools li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.object-tools a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--cm-purple) !important;
    color: var(--cm-white) !important;
    padding: 8px 18px !important;
    border-radius: var(--cm-radius-xs) !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all .2s !important;
}
.object-tools a:hover {
    background: var(--cm-purple-dark) !important;
    box-shadow: var(--cm-shadow-md) !important;
}
.object-tools a::before {
    display: none !important;
}

/* Search bar */
#changelist-search {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    padding: 16px 20px !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: var(--cm-shadow-card) !important;
}
#cm-unified-toolbar #changelist-search {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    gap: 8px !important;
}
#changelist-search label {
    display: none !important;
}
#searchbar {
    flex: 1 !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs) !important;
    padding: 9px 14px !important;
    font-size: .88rem !important;
    background: var(--cm-bg) !important;
}
#searchbar:focus {
    border-color: var(--cm-purple) !important;
    box-shadow: 0 0 0 3px var(--cm-purple-bg) !important;
    background: var(--cm-white) !important;
}
#changelist-search input[type="submit"] {
    background: var(--cm-purple) !important;
    color: var(--cm-white) !important;
    border: none !important;
    padding: 9px 18px !important;
    border-radius: var(--cm-radius-xs) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
#cm-unified-toolbar #searchbar {
    padding: 7px 14px !important;
    margin: 0 !important;
    height: auto !important;
    width: auto !important;
}
#cm-unified-toolbar #changelist-search > div {
    max-width: none !important;
}
#cm-unified-toolbar #changelist-search input[type="submit"] {
    padding: 7px 14px !important;
    flex: 0 0 auto !important;
}

/* Results wrapper — the floating card */
/* Override Django's .filtered .results { width: auto } which prevents overflow scroll */
.results,
.change-list .filtered .results,
#changelist-form .results {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-shadow: var(--cm-shadow-card) !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

/* Firefox scrollbar for .results */
.results {
    scrollbar-width: auto !important;
    scrollbar-color: #ececf0 #fafafb !important;
}

/* Results table — inside the .results card */
#result_list, .results table, table#result_list {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    table-layout: auto !important;
}
/* Wide table for car list (many columns) — JS adds min-width/width dynamically */

#result_list thead th, .results table thead th {
    padding: 8px 8px !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: var(--cm-text-muted) !important;
    background: #fafafc !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    white-space: nowrap !important;
}
#result_list thead th a {
    color: var(--cm-text-muted) !important;
    text-decoration: none !important;
}
#result_list thead th a:hover {
    color: var(--cm-purple) !important;
}
#result_list thead th.sorted {
    background: var(--cm-purple-bg) !important;
}
#result_list thead th.sorted a {
    color: var(--cm-purple) !important;
}

#result_list tbody td,
#result_list tbody th,
.results table tbody td,
.results table tbody th {
    padding: 8px 8px !important;
    font-size: .8rem !important;
    border-bottom: 1px solid var(--cm-border) !important;
    color: var(--cm-text-secondary) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    height: 40px !important;
    box-sizing: border-box !important;
}
#result_list tbody tr {
    transition: background .15s !important;
    height: 40px !important;
}
#result_list tbody tr:hover {
    background: #fafaff !important;
}
#result_list tbody tr:last-child td {
    border-bottom: none !important;
}
#result_list tbody td a {
    color: var(--cm-purple) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#result_list tbody td a:hover {
    text-decoration: underline !important;
}

/* Row selection checkbox */
#result_list td.action-checkbox,
#result_list th.action-checkbox-column {
    width: 32px !important;
    padding: 8px 4px !important;
    text-align: center !important;
}
#result_list input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: var(--cm-purple) !important;
}

/* ===== Sticky first columns (checkbox + VIN + Brand) for horizontal scroll ===== */
/* Col 1: Checkbox — left: 0, width: 32px */
#result_list th.action-checkbox-column,
#result_list td.action-checkbox {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: inherit !important;
}
/* Col 2: VIN — left: 32px, fixed width: 160px */
#result_list thead th:nth-child(2),
#result_list tbody th:nth-child(2) {
    position: sticky !important;
    left: 32px !important;
    z-index: 3 !important;
    background: inherit !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
}
/* Col 3: Brand — left: 192px (32 + 160) */
/* In tbody: child(1)=td.checkbox, child(2)=th.VIN, child(3)=td.Brand */
#result_list thead th:nth-child(3),
#result_list tbody td:nth-child(3) {
    position: sticky !important;
    left: 192px !important;
    z-index: 3 !important;
    background: inherit !important;
}
/* Sticky column backgrounds — match zebra striping exactly */
#result_list thead th.action-checkbox-column,
#result_list thead th:nth-child(2),
#result_list thead th:nth-child(3) {
    background: #fafafc !important;
}
/* Odd rows (1st, 3rd, 5th...) — white */
#result_list tbody tr:nth-child(odd) td.action-checkbox,
#result_list tbody tr:nth-child(odd) th:nth-child(2),
#result_list tbody tr:nth-child(odd) td:nth-child(3) {
    background: #fff !important;
}
/* Even rows (2nd, 4th, 6th...) — light gray */
#result_list tbody tr:nth-child(even) td.action-checkbox,
#result_list tbody tr:nth-child(even) th:nth-child(2),
#result_list tbody tr:nth-child(even) td:nth-child(3) {
    background: #f8f8f8 !important;
}
/* Hover — same for both */
#result_list tbody tr:hover td.action-checkbox,
#result_list tbody tr:hover th:nth-child(2),
#result_list tbody tr:hover td:nth-child(3) {
    background: #fafaff !important;
}
/* No visible border between sticky and scrollable columns */
#result_list thead th:nth-child(3),
#result_list tbody td:nth-child(3) {
    box-shadow: none !important;
}

/* ===== Changelist column width hints ===== */
/* Boolean/checkbox columns (has_title "Т") — narrow, centered */
#result_list th.column-has_title {
    width: 50px !important;
    text-align: center !important;
}
/* Compact numeric columns */
#result_list th.column-markup_display {
    width: 55px !important;
}
#result_list th.column-days_display {
    width: 70px !important;
}
#result_list th.column-storage_cost_display {
    width: 70px !important;
}
#result_list th.column-total_price_display {
    width: 70px !important;
}
#result_list th.column-year_display {
    width: 55px !important;
}
/* Last column: extra right padding so checkbox doesn't hug the edge */
#result_list thead th:last-child,
#result_list tbody td:last-child {
    text-align: center !important;
    padding-right: 12px !important;
}

/* Pagination */
.paginator, .pagination {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    padding: 12px 20px !important;
    margin: 16px 0 0 0 !important;
    font-size: .85rem !important;
    color: var(--cm-text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: var(--cm-shadow-card) !important;
}
.paginator a {
    color: var(--cm-purple) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    transition: all .15s !important;
}
.paginator a:hover {
    background: var(--cm-purple-bg) !important;
}

/* Actions bar (dropdown + button) — floating card */
#changelist .actions,
.actions {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    padding: 12px 20px !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: var(--cm-shadow-card) !important;
}
#cm-unified-toolbar .actions {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    gap: 8px !important;
}
.actions label {
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--cm-text-secondary) !important;
}
#cm-unified-toolbar .actions label {
    font-size: 0 !important;
    color: transparent !important;
    display: flex !important;
    align-items: stretch !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#cm-unified-toolbar .actions label select {
    font-size: .88rem !important;
    color: #1e293b !important;
}
.actions select {
    min-width: 120px !important;
    max-width: 100% !important;
}
.actions .button {
    background: var(--cm-purple) !important;
    color: var(--cm-white) !important;
    border: none !important;
}

/* ===== CHANGELIST FILTERS (right sidebar) ===== */
#changelist-filter {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    padding: 16px !important;
    margin: 0 !important;
    box-shadow: var(--cm-shadow-card) !important;
    position: sticky !important;
    top: calc(var(--cm-topbar-h) + 16px) !important;
    float: none !important;
    width: 220px !important;
    min-width: 220px !important;
    flex: 0 0 220px !important;
    max-height: calc(100vh - var(--cm-topbar-h) - 40px) !important;
    overflow-y: auto !important;
    order: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}
#changelist-filter > h2 {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--cm-text-muted) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 10px 0 !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid var(--cm-border) !important;
    border-radius: 0 !important;
}
#changelist-filter h3 {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: var(--cm-text) !important;
    margin: 12px 0 4px !important;
    padding: 0 !important;
}
#changelist-filter ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#changelist-filter li {
    margin: 2px 0 !important;
}
#changelist-filter li a {
    display: block !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    color: var(--cm-text-secondary) !important;
    text-decoration: none !important;
    font-size: .78rem !important;
    transition: all .15s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#changelist-filter li a:hover {
    background: var(--cm-bg) !important;
    color: var(--cm-text) !important;
}
#changelist-filter li.selected a {
    background: var(--cm-purple-bg) !important;
    color: var(--cm-purple) !important;
    font-weight: 600 !important;
}
/* Filter scrollbar */
#changelist-filter::-webkit-scrollbar { width: 4px; }
#changelist-filter::-webkit-scrollbar-track { background: transparent; }
#changelist-filter::-webkit-scrollbar-thumb { background: var(--cm-border); border-radius: 4px; }

/* ===== MESSAGES ===== */
ul.messagelist {
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    list-style: none !important;
}
ul.messagelist li {
    padding: 12px 20px !important;
    border-radius: var(--cm-radius) !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
ul.messagelist li.success {
    background: var(--cm-green-bg) !important;
    color: var(--cm-green) !important;
    border: 1px solid #86efac !important;
}
ul.messagelist li.warning {
    background: var(--cm-orange-bg) !important;
    color: var(--cm-orange) !important;
    border: 1px solid #fcd34d !important;
}
ul.messagelist li.error {
    background: var(--cm-red-bg) !important;
    color: var(--cm-red) !important;
    border: 1px solid #fca5a5 !important;
}
ul.messagelist li.info {
    background: var(--cm-blue-bg) !important;
    color: var(--cm-blue) !important;
    border: 1px solid #93c5fd !important;
}

/* ===== STATUS BADGES ===== */
.cm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}
.cm-badge-purple { background: var(--cm-purple-bg); color: var(--cm-purple); }
.cm-badge-green { background: var(--cm-green-bg); color: var(--cm-green); }
.cm-badge-red { background: var(--cm-red-bg); color: var(--cm-red); }
.cm-badge-blue { background: var(--cm-blue-bg); color: var(--cm-blue); }
.cm-badge-orange { background: var(--cm-orange-bg); color: var(--cm-orange); }
.cm-badge-cyan { background: var(--cm-cyan-bg); color: var(--cm-cyan); }

/* Status colors matching existing project */
.status-highlight {
    padding: 4px 12px !important;
    border-radius: 100px !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
}
.status-floating { background: var(--cm-blue-bg) !important; color: var(--cm-blue) !important; }
.status-in_port { background: var(--cm-orange-bg) !important; color: var(--cm-orange) !important; }
.status-unloaded { background: var(--cm-green-bg) !important; color: var(--cm-green) !important; }
.status-transferred { background: var(--cm-purple-bg) !important; color: var(--cm-purple) !important; }

/* ===== KPI CARDS ===== */
.cm-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.cm-kpi-card {
    background: var(--cm-card);
    border: none;
    border-radius: var(--cm-radius);
    padding: 20px;
    box-shadow: var(--cm-shadow-card);
    transition: all .2s;
}
.cm-kpi-card:hover { box-shadow: var(--cm-shadow-md); }
.cm-kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.cm-kpi-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--cm-text-secondary);
}
.cm-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--cm-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.cm-kpi-value {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--cm-text);
}
.cm-kpi-change {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .75rem;
    font-weight: 700;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
}
.cm-kpi-change.up { background: var(--cm-green-bg); color: var(--cm-green); }
.cm-kpi-change.down { background: var(--cm-red-bg); color: var(--cm-red); }

/* ===== GRID HELPERS ===== */
.cm-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.cm-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.cm-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* ===== INLINE GROUPS (related objects) ===== */
.inline-group {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    margin: 16px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-shadow: var(--cm-shadow-card) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.inline-group h2 {
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--cm-text) !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    background: #ededf2 !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
/* Compact inline table cells */
.inline-group .tabular td, .inline-group .tabular th {
    padding: 7px 6px !important;
    font-size: .82rem !important;
    border-bottom: 1px solid var(--cm-border) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inline-group .tabular th {
    background: var(--cm-bg) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: var(--cm-text-muted) !important;
}

/* Hide the "original" column globally (verbose object name) */
.inline-group .tabular th.original,
.inline-group .tabular td.original {
    display: none !important;
}

/* Table: scrollable wrapper, auto layout for natural column sizing */
.inline-group .tabular {
    overflow-x: auto;
}
.inline-group .tabular table {
    width: 100% !important;
    table-layout: auto;
}

/* Reduce fieldset padding inside all inline groups */
.inline-group fieldset.module {
    padding: 6px !important;
}
.inline-group fieldset.module > h2 {
    margin: -6px -6px 6px -6px !important;
    padding: 12px 10px !important;
}

/* Inputs/selects inside inlines: fill cell, compact */
.inline-group .tabular td input[type="text"],
.inline-group .tabular td input[type="number"],
.inline-group .tabular td input[type="url"] {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: .82rem !important;
    padding: 5px 6px !important;
}
.inline-group .tabular td select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: .82rem !important;
    padding: 5px 6px !important;
    height: auto !important;
}
.inline-group .tabular td textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: .82rem !important;
    padding: 5px 6px !important;
    min-height: 30px !important;
    resize: vertical;
}

/* Related widget wrapper in inlines: no wrap */
.inline-group .tabular td .related-widget-wrapper {
    flex-wrap: nowrap !important;
    gap: 2px !important;
}
.inline-group .tabular td .related-widget-wrapper select {
    flex: 1;
    min-width: 0;
}

/* Delete checkbox column: compact */
.inline-group .tabular td.delete,
.inline-group .tabular th:last-child {
    text-align: center !important;
    width: 4% !important;
}

/* Boolean/checkbox columns: narrow */
.inline-group .tabular th.column-is_active,
.inline-group .tabular td.field-is_active,
.inline-group .tabular th.column-add_by_default,
.inline-group .tabular td.field-add_by_default,
.inline-group .tabular th.column-has_title,
.inline-group .tabular td.field-has_title,
.inline-group .tabular th.column-is_public,
.inline-group .tabular td.field-is_public,
.inline-group .tabular th.column-is_active_driver,
.inline-group .tabular td.field-is_active_driver,
.inline-group .tabular th.column-notification_enabled,
.inline-group .tabular td.field-notification_enabled {
    width: 5% !important;
    text-align: center !important;
}

/* Numeric/price columns */
.inline-group .tabular th.column-default_price,
.inline-group .tabular td.field-default_price,
.inline-group .tabular th.column-default_markup,
.inline-group .tabular td.field-default_markup,
.inline-group .tabular th.column-coefficient,
.inline-group .tabular td.field-coefficient,
.inline-group .tabular th.column-agreed_total_price,
.inline-group .tabular td.field-agreed_total_price,
.inline-group .tabular th.column-total_price,
.inline-group .tabular td.field-total_price,
.inline-group .tabular th.column-min_cars,
.inline-group .tabular td.field-min_cars,
.inline-group .tabular th.column-max_cars,
.inline-group .tabular td.field-max_cars {
    width: 8% !important;
}

/* Short name / short text columns */
.inline-group .tabular th.column-short_name,
.inline-group .tabular td.field-short_name {
    width: 10% !important;
}
.inline-related {
    border: none !important;
    margin: 0 !important;
}
.inline-related h3 {
    background: var(--cm-bg) !important;
    border-bottom: 1px solid var(--cm-border) !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    color: var(--cm-text) !important;
    font-size: .88rem !important;
}

/* ===== RELATED WIDGET WRAPPER ===== */
.related-widget-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ===== DELETE CONFIRMATION ===== */
.delete-confirmation {
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    padding: 24px !important;
    box-shadow: var(--cm-shadow-card) !important;
}

/* ===== CALENDAR & DATE WIDGETS ===== */
.calendarbox, .clockbox {
    border-radius: var(--cm-radius-xs) !important;
    border: 1px solid var(--cm-border) !important;
    box-shadow: var(--cm-shadow-md) !important;
}

/* ===== HELP TEXT ===== */
.help, p.help {
    font-size: .78rem !important;
    color: var(--cm-text-muted) !important;
    font-style: normal !important;
}

/* ===== ERRORS ===== */
.errornote {
    background: var(--cm-red-bg) !important;
    color: var(--cm-red) !important;
    border: 1px solid #fca5a5 !important;
    border-radius: var(--cm-radius) !important;
    padding: 12px 20px !important;
    font-size: .88rem !important;
}
.errorlist li {
    color: var(--cm-red) !important;
    font-size: .82rem !important;
}

/* ===== FOOTER ===== */
#footer {
    margin-left: var(--cm-sidebar-w) !important;
    padding: 16px 32px !important;
    background: transparent !important;
    color: var(--cm-text-muted) !important;
    font-size: .78rem !important;
    border: none !important;
}

/* ===== LINKS ===== */
a {
    color: var(--cm-purple);
    transition: color .15s;
}
a:hover {
    color: var(--cm-purple-dark);
}

/* ===== DASHBOARD-SPECIFIC (admin/index.html) ===== */
/* App list on dashboard */
#content-main .app-core.module {
    background: var(--cm-card) !important;
    border-radius: var(--cm-radius) !important;
}
#content-main .app-core.module caption {
    border-radius: var(--cm-radius) var(--cm-radius) 0 0 !important;
}
#content-main table th, #content-main table td {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--cm-border) !important;
}
#content-main table th a {
    color: var(--cm-text) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#content-main table th a:hover {
    color: var(--cm-purple) !important;
}

/* Recent actions sidebar on dashboard */
#content-related {
    background: transparent !important;
}
#content-related .module {
    background: var(--cm-card) !important;
}

/* ===== POPUP OVERRIDE ===== */
body.popup #container {
    padding: 16px !important;
}
body.popup div.main#main, body.popup div.main {
    margin-left: 0 !important;
}
body.popup .cm-sidebar,
body.popup .cm-topbar {
    display: none !important;
}
body.popup #footer {
    margin-left: 0 !important;
}

/* ===== RESPONSIVE ===== */


@media (max-width: 1200px) {
    .cm-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .cm-grid-3 { grid-template-columns: 1fr; }
    .cm-grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Stack filter below table on narrow screens */
    #changelist {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .changelist-form-container {
        width: 100% !important;
    }
    #changelist-filter {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        position: static !important;
        top: auto !important;
        max-height: none !important;
        order: 2 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 768px) {
    .cm-sidebar {
        transform: translateX(-100%);
        transition: transform .3s ease;
    }
    .cm-sidebar.open {
        transform: translateX(0);
    }
    .cm-sidebar-toggle {
        display: block;
    }
    div.main#main, div.main {
        margin-left: 0 !important;
    }
    .cm-topbar {
        margin-left: 0;
        padding: 14px 16px;
    }
    .cm-topbar-center {
        display: none;
    }
    main#content-start, main.content {
        padding: 16px !important;
    }
    #footer {
        margin-left: 0 !important;
    }
    .cm-kpi-row { grid-template-columns: 1fr; }
    .cm-grid-2 { grid-template-columns: 1fr; }
    .cm-grid-4 { grid-template-columns: 1fr; }

    /* Sidebar overlay */
    .cm-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.3);
        z-index: 999;
    }
    .cm-sidebar-overlay.active {
        display: block;
    }
}

/* ===== STACKED INLINE ===== */
.inline-group .stacked {
    padding: 16px 24px !important;
}

/* ===== SELECT2 OVERRIDES (if used) ===== */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs) !important;
    height: 38px !important;
    padding: 4px 8px !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--cm-purple) !important;
    box-shadow: 0 0 0 3px var(--cm-purple-bg) !important;
}
.select2-dropdown {
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs) !important;
    box-shadow: var(--cm-shadow-md) !important;
}
.select2-results__option--highlighted {
    background: var(--cm-purple) !important;
}

/* ===== TABULAR INLINE IMPROVEMENTS ===== */
.inline-group table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Misc DJANGO ADMIN OVERRIDES ===== */
/* Ensure the content column stretches — override Django colMS 2-column layout */
#content.colM { max-width: none !important; }
#content.colMS {
    max-width: none !important;
}
#content-main {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Django puts content-related as a separate right column in colMS —
   we don't need it since #changelist-filter is inside #changelist as flex child */
#content.colMS #content-related {
    display: none !important;
}

/* Remove old breadcrumb hiding from logist2_custom_admin.css */
.breadcrumbs { display: none !important; }

/* Action checkbox column header */
#action-toggle {
    accent-color: var(--cm-purple);
}

/* Date hierarchy */
.xfull { width: 100% !important; }

/* "Add another" links in inlines */
.inline-group .add-row a {
    color: var(--cm-purple) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 10px 24px !important;
    display: inline-block !important;
}
.inline-group .add-row a:hover {
    text-decoration: underline !important;
}

/* History page */
#change-history table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--cm-card) !important;
    border: none !important;
    border-radius: var(--cm-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--cm-shadow-card) !important;
}
#change-history table th {
    background: #fafafc !important;
    padding: 12px 16px !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--cm-text-muted) !important;
}
#change-history table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--cm-border) !important;
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--cm-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--cm-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #d0d0d8;
}

/* Override global scrollbar for .results — must be AFTER global rules */
.results::-webkit-scrollbar {
    height: 12px !important;
}
.results::-webkit-scrollbar-track {
    background: #fafafb !important;
    border-radius: 6px !important;
}
.results::-webkit-scrollbar-thumb {
    background: #ececf0 !important;
    border-radius: 6px !important;
    border: 2px solid #fafafb !important;
}
.results::-webkit-scrollbar-thumb:hover {
    background: #efeff2 !important;
}
.results::-webkit-scrollbar-thumb:active {
    background: #ebebee !important;
}

/* ===== ALL CHANGE FORMS — full-width layout ===== */
/* Override Django's float: left on #content-main which can constrain width */
#content-main {
    float: none !important;
}

/* All admin forms: full width (except changelist — handled by flex layout) */
#content-main form:not(#changelist-form) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* The <div> wrapper inside form (contains fieldsets + inlines + submit-row) */
#content-main form:not(#changelist-form) > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Changelist form: respect flex layout, don't force 100% width */
#changelist-form {
    min-width: 0 !important;
    flex: 1 1 0 !important;
}

/* ===== CONTAINER FORM COMPAT (from logist2_custom_admin) ===== */
#container_form {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* Hide ForeignKey add/change/delete/view icons globally */
.related-widget-wrapper-link {
    display: none !important;
}

/* ===== Form field layout inside cm-form-main (Car, Container, etc.) ===== */

/* Remove overflow:hidden and border separators from form rows */
.cm-form-main .form-row {
    overflow: visible !important;
    border-bottom: none !important;
}

/* Multi-field rows: add gap and size field wrappers evenly */
.cm-form-main .form-row .form-multiline {
    gap: 8px 16px !important;
}
.cm-form-main .form-row .form-multiline > div {
    flex: 1 1 0 !important;
    min-width: 120px !important;
}

/* Stack label ABOVE input (override Django flex-direction: row on flex-container) */
/* Exclude .form-multiline — it should stay horizontal to display fields in a row */
.cm-form-main .form-row .flex-container:not(.form-multiline) {
    flex-direction: column !important;
    align-items: stretch !important;
}
/* Exception: checkboxes stay horizontal (checkbox + label side by side) */
.cm-form-main .form-row .checkbox-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Labels: override Django .aligned defaults — proper spacing above fields */
.cm-form-main .form-row label {
    width: auto !important;
    min-width: auto !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    padding: 0 !important;
}

/* Inputs/selects/readonly: full width inside field containers */
.cm-form-main .form-row .fieldBox input,
.cm-form-main .form-row .fieldBox select,
.cm-form-main .form-row .fieldBox .readonly,
.cm-form-main .form-row .fieldBox .related-widget-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Single-field rows (no .fieldBox): also full width inputs */
.cm-form-main .form-row .flex-container:not(.form-multiline) input:not([type="checkbox"]):not([type="hidden"]),
.cm-form-main .form-row .flex-container:not(.form-multiline) select,
.cm-form-main .form-row .flex-container:not(.form-multiline) .related-widget-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Hide "Currently: URL" text but keep the input inside p.url */
.cm-form-main p.url {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}
.cm-form-main p.url a {
    display: none !important;
}
.cm-form-main p.url br {
    display: none !important;
}
.cm-form-main p.url input {
    font-size: .88rem !important;
    line-height: normal !important;
    color: var(--cm-text) !important;
}

/* Hide help text in form grid */
.cm-form-main .help {
    display: none !important;
}

/* Fix select clipping inside fieldBox — ensure wrapper doesn't constrain height */
.cm-form-main .form-row .fieldBox .related-widget-wrapper {
    overflow: visible !important;
}
.cm-form-main .form-row .fieldBox select {
    height: auto !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
}

/* Container/Car detail cards */
.container-details, .car-details {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: var(--cm-card);
    width: 100%;
    box-sizing: border-box;
    box-shadow: var(--cm-shadow);
}
.container-details .field-container,
.car-details .field-container {
    width: 280px;
    display: inline-block;
    margin-bottom: 10px;
}

/* Hide History link from object-tools */
.object-tools a[href$="/history/"] {
    display: none !important;
}

/* Form checkboxes inside grid layout */
.cm-form-main input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--cm-purple);
}

/* Filter checkboxes */
#changelist-filter input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 6px;
    accent-color: var(--cm-purple);
}

/* ===== FORM GRID LAYOUT (Car, Container, etc. change_form) ===== */
.cm-form-grid {
    display: grid;
    grid-template-columns: 1fr 270px;
    gap: 16px;
    align-items: start;
}

.cm-form-main {
    min-width: 0;
    overflow: visible;
}

.cm-car-photo {
    float: left;
    width: 380px;
    height: 190px;
    object-fit: contain;
    margin: 4px 24px 16px 0;
    border-radius: 10px;
    flex-shrink: 0;
}

.cm-form-main fieldset.module::after {
    content: '';
    display: table;
    clear: both;
}

.cm-form-main .form-row.field-has_title {
    clear: left;
}

/* Hide object-tools inside grid form (History etc.) */
.cm-form-main .object-tools {
    display: none !important;
}

/* Reset form centering/padding when inside grid layout */
.cm-form-main form {
    padding: 0;
}

/* Hide submit row when sidebar is visible */
.cm-form-grid .submit-row {
    display: none !important;
}

/* ===== Hide default Django page title on custom change forms ===== */
body.model-car.change-form #content > h1,
body.model-car.change-form #content > h2,
body.model-container.change-form #content > h1,
body.model-container.change-form #content > h2,
body.model-autotransport.change-form #content > h1,
body.model-autotransport.change-form #content > h2,
body.model-newinvoice.change-form #content > h1,
body.model-newinvoice.change-form #content > h2 {
    display: none !important;
}

/* ===== Fieldset headers in form grid ===== */
.cm-form-main fieldset > h2,
.cm-form-main fieldset > .fieldset-heading {
    background: #ededf2 !important;
}

/* Collapsible fieldset: make <summary> look like regular fieldset header */
.cm-form-main fieldset.collapse > details > summary {
    background: #ededf2 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    border-radius: var(--cm-radius) var(--cm-radius) 0 0 !important;
    margin: -24px -24px 16px -24px !important;
    padding: 16px 24px !important;
    cursor: pointer !important;
    list-style: none !important;
}

/* Hide default disclosure triangle */
.cm-form-main fieldset.collapse > details > summary::-webkit-details-marker {
    display: none !important;
}
.cm-form-main fieldset.collapse > details > summary::marker {
    display: none !important;
    content: "" !important;
}

/* Collapse summary: flex column to place chevron below title */
.cm-form-main fieldset.collapse > details > summary {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Chevron indicator below title */
.cm-form-main fieldset.collapse > details > summary::after {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid var(--cm-text-muted, #9ca3af) !important;
    border-bottom: 2px solid var(--cm-text-muted, #9ca3af) !important;
    transform: rotate(45deg) !important;
    transition: transform .25s ease, border-color .25s ease !important;
    margin-top: 4px !important;
}

/* Rotate chevron up when expanded */
.cm-form-main fieldset.collapse > details[open] > summary::after {
    transform: rotate(-135deg) !important;
    margin-top: 8px !important;
    border-color: var(--cm-purple, #6c5ce7) !important;
}

/* Collapsed state: round all corners, no bottom border */
.cm-form-main fieldset.collapse > details:not([open]) > summary {
    border-bottom: none !important;
    border-radius: var(--cm-radius) !important;
    margin-bottom: 0 !important;
}

/* h2 inside summary: match regular fieldset heading */
.cm-form-main fieldset.collapse summary .fieldset-heading {
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--cm-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
}

/* ===== Select fields in form grid: prevent truncation ===== */
.cm-form-main .form-row .related-widget-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
}

.cm-form-main .form-row .related-widget-wrapper select {
    flex: 1 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.cm-form-main .form-row select {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ===== CarInline inside Container form: fixed layout with specific column widths ===== */

/* Reduce fieldset padding inside inline groups in form grid */
.cm-form-main .inline-group fieldset.module {
    padding: 6px !important;
}

.cm-form-main .inline-group fieldset.module > h2,
.cm-form-main .inline-group .inline-heading {
    margin: -6px -6px 6px -6px !important;
    padding: 12px 10px !important;
}

/* CarInline: fixed layout for predictable column widths */
.cm-form-main .inline-group .tabular table {
    table-layout: fixed;
}

/* CarInline column widths */
.cm-form-main .inline-group .tabular th.column-year,
.cm-form-main .inline-group .tabular td.field-year { width: 7%; }

.cm-form-main .inline-group .tabular th.column-brand,
.cm-form-main .inline-group .tabular td.field-brand { width: 13%; }

.cm-form-main .inline-group .tabular th.column-vehicle_type,
.cm-form-main .inline-group .tabular td.field-vehicle_type { width: 14%; }

.cm-form-main .inline-group .tabular th.column-vin,
.cm-form-main .inline-group .tabular td.field-vin { width: 22%; }

.cm-form-main .inline-group .tabular th.column-client,
.cm-form-main .inline-group .tabular td.field-client { width: 22%; }

.cm-form-main .inline-group .tabular th.column-total_price,
.cm-form-main .inline-group .tabular td.field-total_price { width: 9%; }

.cm-form-main .inline-group .tabular th.column-has_title,
.cm-form-main .inline-group .tabular td.field-has_title { width: 5%; text-align: center; }

.cm-form-main .inline-group .tabular td.delete,
.cm-form-main .inline-group .tabular th:last-child { width: 5%; text-align: center; }

.cm-form-sidebar-col {
    position: sticky;
    top: 16px;
}

/* Page header for change_form */
.cm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.cm-page-header h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cm-text);
    margin: 0;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cm-page-icon {
    width: 120px;
    height: 120px;
    object-fit: contain;
    flex-shrink: 0;
}

.cm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cm-text-secondary);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    padding: 8px 16px;
    background: var(--cm-card);
    border-radius: var(--cm-radius-xs);
    box-shadow: var(--cm-shadow-card);
    transition: all .15s;
}

.cm-back-link:hover {
    color: var(--cm-purple);
    background: var(--cm-purple-bg);
    text-decoration: none;
}

/* Sidebar card */
.cm-sidebar-card {
    background: var(--cm-card);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow-card);
    overflow: hidden;
    margin-bottom: 16px;
}

.cm-sidebar-card-header {
    padding: 14px 20px;
    background: #fafafc;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cm-sidebar-card-header h3 {
    font-size: .88rem;
    font-weight: 700;
    color: var(--cm-text);
    margin: 0;
}

.cm-sidebar-card-body {
    padding: 20px;
}

/* Sidebar info rows */
.cm-sidebar-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--cm-border);
    font-size: .85rem;
}

.cm-sidebar-info-row:last-child {
    border-bottom: none;
}

.cm-sidebar-info-label {
    color: var(--cm-text-secondary);
    font-weight: 500;
}

.cm-sidebar-info-value {
    color: var(--cm-text);
    font-weight: 700;
    text-align: right;
}

.cm-sidebar-info-value a {
    text-decoration: none;
}

/* Large status badge */
.cm-status-badge-lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: .85rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
}

.cm-status-badge-lg:hover {
    color: white;
}

/* Sidebar highlight block (finance totals etc.) */
.cm-sidebar-highlight {
    background: linear-gradient(135deg, var(--cm-purple) 0%, var(--cm-purple-dark) 100%);
    color: white;
    padding: 20px;
    border-radius: var(--cm-radius-sm);
    text-align: center;
    margin-bottom: 16px;
}

.cm-sidebar-highlight .cm-hl-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .8;
    margin-bottom: 4px;
}

.cm-sidebar-highlight .cm-hl-value {
    font-size: 1.5rem;
    font-weight: 800;
}

/* Sidebar actions */
.cm-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--cm-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    width: 100%;
    box-sizing: border-box;
    transition: all .2s;
    font-family: var(--cm-font);
    line-height: 1.4;
}

.cm-btn-save {
    background: var(--cm-purple) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

.cm-btn-save:hover {
    background: var(--cm-purple-dark) !important;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
    color: white !important;
}

.cm-btn-outline-action {
    background: var(--cm-card) !important;
    color: var(--cm-text-secondary) !important;
    border: 2px solid var(--cm-border) !important;
}

.cm-btn-outline-action:hover {
    border-color: var(--cm-purple-light) !important;
    color: var(--cm-purple) !important;
    background: var(--cm-purple-bg) !important;
}

.cm-btn-delete {
    background: var(--cm-red) !important;
    color: white !important;
    font-size: .82rem;
    padding: 9px 16px;
}

.cm-btn-delete:hover {
    background: #dc2626 !important;
    color: white !important;
}

.cm-sidebar-divider {
    height: 1px;
    background: var(--cm-border);
    margin: 6px 0;
}

/* Photo badge in sidebar */
.cm-photos-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: .82rem;
    font-weight: 600;
}

.cm-photos-badge.has-photos {
    background: var(--cm-green-bg);
    color: var(--cm-green);
}

.cm-photos-badge.no-photos {
    background: var(--cm-bg);
    color: var(--cm-text-muted);
}

/* Google Drive sync button (sidebar version) */
.cm-gdrive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--cm-purple);
    border: none;
    color: white;
    padding: 9px 16px;
    border-radius: var(--cm-radius-xs);
    font-family: var(--cm-font);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    box-sizing: border-box;
}

.cm-gdrive-btn:hover {
    background: var(--cm-purple-dark);
    box-shadow: var(--cm-shadow-md);
}

.cm-gdrive-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Title section (has_title + title_notes) — Car change form ===== */
/*
 * DOM: .form-row > .form-multiline > div(no class) > .fieldBox.checkbox-row
 * The classless <div> wrapper gets flex:1 from .form-multiline > div rule,
 * causing the checkbox to take 50% width. Override it here.
 */

/* Checkbox wrapper div: shrink to content */
.cm-form-main .form-row.field-has_title .form-multiline > div:first-child {
    flex: 0 0 auto !important;
    min-width: auto !important;
}

/* Checkbox-row: tight horizontal layout */
.cm-form-main .form-row.field-has_title .checkbox-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Checkbox label: no extra spacing */
.cm-form-main .form-row.field-has_title .checkbox-row label {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Checkbox input: proper size, no extra margin */
.cm-form-main .form-row.field-has_title .checkbox-row input[type="checkbox"] {
    margin: 0 !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex-shrink: 0 !important;
}

/* Notes wrapper div: fill remaining space */
.cm-form-main .form-row.field-has_title .form-multiline > div:last-child {
    flex: 1 1 0 !important;
}

/* Notes label: hidden (placeholder replaces it) */
.cm-form-main .form-row.field-has_title .fieldBox.field-title_notes label {
    display: none !important;
}

/* Notes input: full width */
.cm-form-main .form-row.field-has_title .fieldBox.field-title_notes input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive for form grid */
@media (max-width: 1100px) {
    .cm-form-grid {
        grid-template-columns: 1fr;
    }
    .cm-form-sidebar-col {
        position: static;
    }
}

/* Popup mode: hide form grid sidebar */
body.popup .cm-form-grid {
    display: block;
}

body.popup .cm-form-sidebar-col {
    display: none;
}

body.popup .cm-page-header {
    display: none;
}

body.popup .cm-form-grid .submit-row {
    display: flex !important;
}

/* ===== Car form: row 1 (year, brand, vin, vehicle_type) ===== */
.cm-form-main .form-row.field-year .form-multiline > div:nth-child(1) {
    flex: 0 0 100px !important;
    min-width: 0 !important;
}
.cm-form-main .form-row.field-year .form-multiline > div:nth-child(4) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.cm-form-main .fieldBox.field-year input {
    width: 100px !important;
}
.cm-form-main .fieldBox.field-vehicle_type select {
    width: auto !important;
}

/* ===== Car form: row 2 (client, warehouse, unload_site, status) ===== */
.cm-form-main .form-row.field-client .form-multiline > div:nth-child(2) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}
.cm-form-main .form-row.field-client .form-multiline > div:nth-child(3) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}
.cm-form-main .form-row.field-client .form-multiline > div:nth-child(4) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.cm-form-main .fieldBox.field-status select,
.cm-form-main .fieldBox.field-warehouse select,
.cm-form-main .fieldBox.field-unload_site select {
    width: auto !important;
}

/* ===== Container form: compact fields row ===== */
/* Order: 1=number, 2=line, 3=ths, 4=ths_payer, 5=warehouse, 6=unload_site, 7=status */
.cm-form-main .form-row.field-number .form-multiline > div:nth-child(1) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}
.cm-form-main .form-row.field-number .form-multiline > div:nth-child(2) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}
.cm-form-main .form-row.field-number .form-multiline > div:nth-child(3) {
    flex: 0 0 140px !important;
    min-width: 0 !important;
}
.cm-form-main .form-row.field-number .form-multiline > div:nth-child(4) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}
.cm-form-main .form-row.field-number .form-multiline > div:nth-child(5) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}
.cm-form-main .form-row.field-number .form-multiline > div:nth-child(6) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}
.cm-form-main .form-row.field-number .form-multiline > div:nth-child(7) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.cm-form-main .fieldBox.field-number input {
    width: auto !important;
}
.cm-form-main .fieldBox.field-ths input {
    width: 130px !important;
}
.cm-form-main .fieldBox.field-status select,
.cm-form-main .fieldBox.field-ths_payer select,
.cm-form-main .fieldBox.field-line select,
.cm-form-main .fieldBox.field-warehouse select,
.cm-form-main .fieldBox.field-unload_site select {
    width: auto !important;
}

/* ===== TRANSITION ===== */
*, *::before, *::after {
    /* Disable transitions during page load */
}
body.loaded * {
    transition-duration: inherit;
}