/* ===================================================================
   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: #f4f2ff;
    --cm-white: #ffffff;
    --cm-card: #ffffff;
    --cm-border: #e0dcf8;
    --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,.08), 0 2px 10px rgba(0,0,0,.06);
    --cm-shadow-md: 0 6px 18px rgba(30,20,60,.12), 0 2px 6px rgba(30,20,60,.08);
    --cm-shadow-card: 0 2px 6px rgba(30,20,60,.08), 0 10px 24px rgba(30,20,60,.10);
    --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 ===== */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    overscroll-behavior-x: none;
}
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
    overscroll-behavior-x: none;
}
#container {
    background: var(--cm-bg) !important;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== 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;
}

/* Collapsible nav groups */
.cm-nav-group {
    margin-top: 6px;
}
.cm-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--cm-text-muted);
    text-align: left;
    transition: color .2s;
}
.cm-nav-group-toggle:hover {
    color: var(--cm-text);
}
.cm-nav-group-icon {
    font-size: .85rem;
    width: 16px;
    min-width: 16px;
    text-align: center;
}
.cm-nav-group-chevron {
    margin-left: auto;
    font-size: .65rem;
    transition: transform .2s;
}
.cm-nav-group.open .cm-nav-group-chevron {
    transform: rotate(180deg);
}
.cm-nav-group-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
}
.cm-nav-group.open .cm-nav-group-items {
    max-height: 800px;
}
.cm-nav-group.no-anim .cm-nav-group-items {
    transition: none;
}

/* 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;
}

/* ── Global search (Ctrl+K) ─────────────────────────────────────────────── */
.cm-gsearch-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: var(--cm-bg, #f8f9fb);
    color: var(--cm-text-muted);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
}
.cm-gsearch-trigger:hover {
    border-color: var(--cm-purple);
    color: var(--cm-purple);
}
.cm-gsearch-trigger kbd {
    font-family: inherit;
    font-size: .65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: var(--cm-text-muted);
}
@media (max-width: 768px) {
    .cm-gsearch-trigger-label, .cm-gsearch-trigger kbd { display: none; }
}
.cm-gsearch-overlay[hidden] {
    display: none;
}
.cm-gsearch-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
}
.cm-gsearch-modal {
    width: 100%;
    max-width: 620px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
.cm-gsearch-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f4;
}
.cm-gsearch-input-row > i {
    font-size: 1.05rem;
    color: var(--cm-text-muted);
}
.cm-gsearch-input-row input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 1rem;
    color: var(--cm-text);
    background: transparent;
}
.cm-gsearch-input-row kbd {
    font-family: inherit;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: #f8f9fb;
    border: 1px solid #e2e8f0;
    color: var(--cm-text-muted);
}
.cm-gsearch-results {
    overflow-y: auto;
    padding: 8px;
}
.cm-gsearch-hint {
    padding: 24px;
    text-align: center;
    color: var(--cm-text-muted);
    font-size: .85rem;
}
.cm-gsearch-group {
    padding: 10px 12px 4px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--cm-text-muted);
}
.cm-gsearch-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--cm-text);
}
.cm-gsearch-item:hover,
.cm-gsearch-item.selected {
    background: var(--cm-purple-bg, #f0edff);
    text-decoration: none;
}
.cm-gsearch-label {
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-gsearch-sub {
    font-size: .78rem;
    color: var(--cm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: auto;
    flex-shrink: 1;
}

/* 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: 12px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    margin-left: var(--cm-sidebar-w);
    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;
    /* Django forms.css задаёт height: 0.9375rem (15px) — с нашим padding
       текст обрезается. Возвращаем автоматическую высоту. */
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}
.submit-row a.deletelink:hover {
    background: #dc2626 !important;
}
/* closelink («Закрыть» на readonly-формах) страдает тем же фикс-height */
.submit-row a.closelink {
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !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;
}

/* При узком экране .results даёт горизонтальный скролл (overflow-x: auto выше).
 * Sticky-пиннинг первых колонок намеренно НЕ применяем, чтобы соседний
 * столбец не перекрывал ячейку с индикатором при уменьшении ширины окна. */

/* ===== 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;
}

/* ===== TARIFF INLINE (client tariffs) — карточная раскладка полей ===== */
/* Карточный режим задаётся общим классом .cm-card-inline (см. в конце файла).
   Здесь только ширины конкретных полей тарифа. */
#tariff_rates-group td.field-vehicle_type      { flex: 2 1 220px !important; }
#tariff_rates-group td.field-min_cars,
#tariff_rates-group td.field-max_cars          { flex: 0 0 110px !important; }
#tariff_rates-group td.field-agreed_total_price { flex: 1 1 160px !important; }
/* Когда выбран фикс. тариф — гасим «Авто от/до», чтобы не путали. */
#tariff_rates-group.cm-tariff-fixed td.field-min_cars,
#tariff_rates-group.cm-tariff-fixed td.field-max_cars {
    opacity: .35;
}

/* Подсказка над таблицей тарифов */
.cm-tariff-help {
    margin: 0 0 12px;
    padding: 14px 16px;
    background: rgba(108,92,231,.06);
    border: 1px solid rgba(108,92,231,.18);
    border-radius: 12px;
    font-size: .82rem;
    color: var(--cm-text, #1a1a2e);
    line-height: 1.5;
}
.cm-tariff-help-title {
    font-weight: 700;
    margin-bottom: 6px;
    color: #6c5ce7;
}
.cm-tariff-help-list {
    margin: 0;
    padding-left: 18px;
}
.cm-tariff-help-list li { margin: 2px 0; }
.cm-tariff-help-example {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.cm-tariff-help-example-label {
    font-weight: 600;
    color: var(--cm-text-muted, #6b7280);
}
.cm-tariff-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(108,92,231,.25);
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 600;
    color: #4b3fb8;
}
.cm-tariff-chip i { font-style: italic; color: var(--cm-text-muted, #9ca3af); font-weight: 400; }

.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: 1024px) {
    .cm-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1000;
        display: none;
    }
    .cm-sidebar.open {
        display: flex;
    }
    .cm-sidebar-toggle {
        display: block;
    }
    div.main#main, div.main {
        margin-left: 0 !important;
        max-width: 100% !important;
    }
    .cm-topbar {
        margin-left: 0;
        padding: 10px 8px;
        height: 56px;
    }
    .cm-topbar-left {
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    .cm-topbar-left .cm-sidebar-toggle {
        font-size: 1.5rem;
    }
    .cm-topbar-left a img {
        height: 26px;
        width: auto;
    }
    .cm-topbar-center {
        display: none;
    }
    .cm-topbar-right {
        display: none;
    }
    main#content-start, main.content {
        padding: 6px 8px !important;
    }
    #footer {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 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;
    }

    /* Cards/modules: small margin from screen edges on mobile */
    .module, .card-cm, fieldset, .inline-group {
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .results, .paginator, .pagination, #changelist-filter,
    #cm-unified-toolbar, #changelist .actions {
        border-radius: 0 !important;
    }

    /* Ensure #content-main fills edge-to-edge */
    #content, #content-main {
        padding: 0 !important;
    }

    /* Hide scrollbar on mobile — users scroll by touch */
    html, body {
        scrollbar-width: none;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
    }
}

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

/* ===== SELECT2 OVERRIDES ===== */
.select2-container { width: 100% !important; }

.select2-container--default .select2-selection--single {
    height: 42px !important;
    border: 1px solid var(--cm-border, #ebebf0) !important;
    border-radius: var(--cm-radius-xs, 8px) !important;
    padding: 6px 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
    padding-left: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !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-container--default .select2-selection--multiple {
    border: 1px solid var(--cm-border, #ebebf0) !important;
    border-radius: var(--cm-radius-xs, 8px) !important;
    padding: 10px 12px !important;
    min-height: 80px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 6px 12px 6px 8px !important;
    margin: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    max-width: calc(100% - 16px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.select2-selection__choice a {
    pointer-events: auto;
}

/* Цвета тегов по статусу автомобиля */
.select2-selection__choice[data-status="FLOATING"] {
    background: linear-gradient(135deg, #2772a8 0%, #1e5a8a 100%) !important;
}
.select2-selection__choice[data-status="IN_PORT"] {
    background: linear-gradient(135deg, #8B0000 0%, #6B0000 100%) !important;
}
.select2-selection__choice[data-status="UNLOADED"] {
    background: linear-gradient(135deg, #239f58 0%, #1a7a43 100%) !important;
}
.select2-selection__choice[data-status="TRANSFERRED"] {
    background: linear-gradient(135deg, #78458c 0%, #5a3369 100%) !important;
}
.select2-selection__choice:not([data-status]) {
    background: var(--cm-purple, #6c5ce7) !important;
}

/* Цвета в выпадающем списке */
.select2-results__option[data-status="FLOATING"] { border-left: 4px solid #2772a8; }
.select2-results__option[data-status="IN_PORT"] { border-left: 4px solid #8B0000; }
.select2-results__option[data-status="UNLOADED"] { border-left: 4px solid #239f58; }
.select2-results__option[data-status="TRANSFERRED"] { border-left: 4px solid #78458c; }

/* Кнопка удаления тега */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255,255,255,0.9) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border: none !important;
    background: rgba(0,0,0,0.15) !important;
    border-radius: 50% !important;
    outline: none !important;
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
    position: relative !important;
    top: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ff6b6b !important;
    background: transparent !important;
    border: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Контейнер тегов: block вместо inline (Select2 default) чтобы дети получали корректную ширину */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Поле поиска всегда на новой строке под тегами */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: block !important;
    width: 100% !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 8px 4px !important;
    font-size: 14px !important;
    height: auto !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.select2-dropdown {
    border: 1px solid var(--cm-border, #ebebf0) !important;
    border-radius: var(--cm-radius-xs, 8px) !important;
    box-shadow: var(--cm-shadow-md) !important;
}
.select2-results__option--highlighted {
    background-color: var(--cm-purple, #6c5ce7) !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: компактные адаптивные колонки (как в реквизитах
   контрагентов). База ~170px, потолок 320px; min-width: fit-content —
   при сужении окна колонка не сжимается уже собственного содержимого,
   контент не обрезается, ряд переносит колонки на следующую строку.
   Страницы со своей раскладкой (карточка авто) переопределяют ширины
   конкретных полей собственными более специфичными правилами. */
.cm-form-main .form-row .form-multiline {
    gap: 8px 16px !important;
    flex-wrap: wrap !important;
}
.cm-form-main .form-row .form-multiline > div {
    flex: 1 1 170px !important;
    min-width: fit-content !important;
    max-width: 320px !important;
}
/* Длинные поля (названия, адреса, почта и т.п.) — шире остальных */
.cm-form-main .form-row .form-multiline > div:has(.field-name),
.cm-form-main .form-row .form-multiline > div:has(.field-brand),
.cm-form-main .form-row .form-multiline > div:has(.field-client),
.cm-form-main .form-row .form-multiline > div:has(.field-address),
.cm-form-main .form-row .form-multiline > div:has(.field-physical_address),
.cm-form-main .form-row .form-multiline > div:has(.field-email),
.cm-form-main .form-row .form-multiline > div:has(.field-general_email),
.cm-form-main .form-row .form-multiline > div:has(.field-contact_person),
.cm-form-main .form-row .form-multiline > div:has(.field-website),
.cm-form-main .form-row .form-multiline > div:has(.field-notes),
.cm-form-main .form-row .form-multiline > div:has(.field-description) {
    flex: 2 1 240px !important;
    max-width: 420px !important;
}
/* «Внутренняя» ширина инпута следует за содержимым (field-sizing) —
   её подхватывает min-width: fit-content колонки. В браузерах без
   поддержки остаётся дефолтный минимум. */
.cm-form-main .form-row input:not([type="checkbox"]):not([type="hidden"]) {
    field-sizing: content;
}

/* 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): не на всю страницу — потолок 480px.
   При более длинном содержимом поле растёт по нему (min-width: fit-content
   сильнее max-width), текст не прячется. */
.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;
    max-width: 480px !important;
    min-width: fit-content !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;
}

/* ===== Реквизиты контрагентов (fieldset.cm-requisites) =====
   «Основная информация» в карточках Client/Company/Warehouse/Line/Carrier:
   подписи НАД полями (как в карточке авто), поля растянуты на всю ширину.
   Класс вешается через fieldsets(..., {"classes": ("cm-requisites",)}). */
fieldset.cm-requisites .form-row {
    overflow: visible !important;
    border-bottom: none !important;
}
/* Ряды из нескольких полей: компактные адаптивные колонки.
   База ~170px с потолком 240px; длинные поля (имя, адрес, почта,
   контактное лицо) — база 240px, потолок 380px. min-width: fit-content
   не даёт колонке сжаться уже собственного содержимого: при сужении
   окна поле не обрезает введённый текст, а переносится на новую строку. */
fieldset.cm-requisites .form-row .form-multiline {
    gap: 8px 16px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}
fieldset.cm-requisites .form-row .form-multiline > div {
    flex: 1 1 170px !important;
    min-width: fit-content !important;
    max-width: 240px !important;
}
fieldset.cm-requisites .form-row .form-multiline > div:has(.field-name),
fieldset.cm-requisites .form-row .form-multiline > div:has(.field-physical_address),
fieldset.cm-requisites .form-row .form-multiline > div:has(.field-general_email),
fieldset.cm-requisites .form-row .form-multiline > div:has(.field-email),
fieldset.cm-requisites .form-row .form-multiline > div:has(.field-contact_person),
fieldset.cm-requisites .form-row .form-multiline > div:has(.field-website) {
    flex: 2 1 240px !important;
    max-width: 380px !important;
}
/* «Внутренняя» (интринсик) ширина инпута следует за содержимым —
   именно её подхватывает min-width: fit-content колонки выше.
   В браузерах без поддержки field-sizing остаётся дефолтный минимум. */
fieldset.cm-requisites .form-row input:not([type="checkbox"]):not([type="hidden"]) {
    field-sizing: content;
}
/* Мобильные экраны: Django responsive.css (<768px) переводит
   .flex-container (в т.ч. .form-multiline) в column — и flex-basis выше
   (170/240px, задуманные как ШИРИНА) начинают работать как ВЫСОТА,
   давая огромные вертикальные пробелы. Сбрасываем basis на auto. */
@media (max-width: 767px) {
    fieldset.cm-requisites .form-row .form-multiline {
        gap: 10px !important;
    }
    /* Второй селектор с :has() — та же специфичность, что у правил
       «широких» полей выше; побеждает за счёт порядка в файле. */
    fieldset.cm-requisites .form-row .form-multiline > div,
    fieldset.cm-requisites .form-row .form-multiline > div:has(.fieldBox) {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    fieldset.cm-requisites .form-row .flex-container:not(.form-multiline) input:not([type="checkbox"]):not([type="hidden"]),
    fieldset.cm-requisites .form-row .flex-container:not(.form-multiline) select {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/* Подпись над полем: flex-контейнер поля в колонку */
fieldset.cm-requisites .form-row .flex-container:not(.form-multiline) {
    flex-direction: column !important;
    align-items: stretch !important;
}
fieldset.cm-requisites .form-row label {
    float: none !important;
    width: auto !important;
    min-width: auto !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    padding: 0 !important;
}
/* Поля заполняют свою колонку целиком */
fieldset.cm-requisites .form-row .fieldBox input,
fieldset.cm-requisites .form-row .fieldBox select {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Однополевые ряды (Название, Сайт): не на всю страницу — потолок 480px,
   но при более длинном содержимом поле растёт по нему (min-width сильнее
   max-width), так что текст не прячется. */
fieldset.cm-requisites .form-row .flex-container:not(.form-multiline) input:not([type="checkbox"]):not([type="hidden"]),
fieldset.cm-requisites .form-row .flex-container:not(.form-multiline) select {
    width: 100% !important;
    max-width: 480px !important;
    min-width: fit-content !important;
    box-sizing: border-box !important;
}
/* URL-виджет «Сайт»: прячем строку «Текущий адрес: …», оставляем input */
fieldset.cm-requisites p.url {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    margin: 0 !important;
}
fieldset.cm-requisites p.url a,
fieldset.cm-requisites p.url br {
    display: none !important;
}
fieldset.cm-requisites p.url input {
    font-size: .88rem !important;
    line-height: normal !important;
    color: var(--cm-text) !important;
}

/* Select2 (автодополняемые Клиент/Склад/Линия/Перевозчик) — приводим к виду
   обычных полей карточки: та же высота/отступы/рамка/шрифт. Django admin
   использует тему `--admin-autocomplete`, поэтому таргетим ЛЮБОЙ select2
   внутри формы (а не только `--default`). Функционал автодополнения не
   трогаем — меняется только оформление контейнера. */
.cm-form-main .select2-container .select2-selection--single {
    height: auto !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    background: var(--cm-white) !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs) !important;
    display: flex !important;
    align-items: center !important;
}
.cm-form-main .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1.4 !important;
    font-size: .88rem !important;
    color: var(--cm-text) !important;
    padding-left: 0 !important;
    padding-right: 18px !important;
}
.cm-form-main .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !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;
}

/* Рамка картинки авто: единый размер и пропорции для ВСЕХ машин независимо
   от исходного PNG (ширина/высота/пропорции у иконок гуляют). object-fit:
   contain внутри фиксированного бокса => всё выглядит одинаково ровно. */
.cm-car-photo-frame {
    float: left;
    width: 520px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 4px 24px 16px 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
    position: relative;
}

/* Кнопка-оверлей «+» для загрузки картинки модели прямо из карточки */
.cm-car-photo-upload {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: rgba(108, 92, 231, .92);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background .15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.cm-car-photo-frame:hover .cm-car-photo-upload {
    opacity: 1;
    pointer-events: auto;
}
.cm-car-photo-upload:hover {
    background: #5a4bd6;
}
.cm-car-photo-upload--busy {
    opacity: 1;
    pointer-events: none;
    cursor: default;
}

.cm-car-photo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.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 — sidebar has its own action buttons */
.cm-form-grid .submit-row,
.cm-form-main .submit-row,
body.model-car .submit-row,
body.model-container .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 */
/* ─────────────────────────────────────────────────────────────────
 * Container change_form: CarInline визуально идентичен обычному
 * fieldset-разделу «Основные данные».
 *
 * Django 5 рендерит inline-collapse как:
 *   <div class="inline-group">
 *     <div class="tabular inline-related">
 *       <fieldset class="module collapse">
 *         <details><summary>
 *           <h2 class="inline-heading">...</h2>
 *         </summary>...</details>
 *       </fieldset>
 *     </div>
 *   </div>
 *
 * У обычного fieldset-а («Основные данные») тех же двух обёрток нет,
 * поэтому гасим их фон/тени/скролл — «карточку» рисует сам
 * fieldset.module, как в регулярных секциях.
 * ────────────────────────────────────────────────────────────────── */
.cm-form-main .inline-group {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 16px 0 !important;
}
.cm-form-main .inline-group .inline-related,
.cm-form-main .inline-group .tabular {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Внутренний fieldset — «карточка» раздела (как у обычного fieldset). */
.cm-form-main .inline-group fieldset.module {
    padding: 24px !important;
    background: var(--cm-card) !important;
    border-radius: var(--cm-radius) !important;
    box-shadow: var(--cm-shadow-card) !important;
    overflow: hidden !important;
}

/* Сброс h2.inline-heading / h2.fieldset-heading ВНУТРИ <summary> —
 * иначе `.inline-group h2` выше накидывает свой фон+padding поверх
 * уже-стилизованного summary, из-за чего шапка Автомобилей визуально
 * выше и с «своим фоном». */
.cm-form-main fieldset.collapse summary .fieldset-heading,
.cm-form-main fieldset.collapse summary .inline-heading,
.cm-form-main .inline-group fieldset.collapse summary > h2 {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--cm-text) !important;
}

/* В свёрнутом состоянии убираем 24px нижнего padding'а fieldset'а,
 * чтобы «шапка» заполняла всю высоту карточки без пустой белой полосы.
 * Одно правило одинаково работает и для «Основные данные», и для
 * «Автомобили», т.к. оба живут внутри fieldset.collapse > details. */
.cm-form-main fieldset.collapse:has(> details:not([open])) {
    padding: 0 !important;
}
.cm-form-main fieldset.collapse:has(> details:not([open])) > details > summary {
    margin: 0 !important;
    border-radius: var(--cm-radius) !important;
    border-bottom: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * Единый стиль заголовков секций в форме контейнера (и других
 * админских формах): ВСЕ ЗАГОЛОВКИ СЕКЦИЙ СТРОГО UPPERCASE, как
 * раньше выглядел только `.inline-heading` у «Автомобилей».
 * Покрываем все варианты разметки:
 *   — обычный <h2> в fieldset.module («Основные данные»),
 *   — <h2 class="fieldset-heading"> в <summary> («Переписка»,
 *     «Фотографии контейнера»),
 *   — <h2 class="inline-heading"> в inline-group («Автомобили»).
 * ────────────────────────────────────────────────────────────── */
.cm-form-main fieldset.module > h2,
.cm-form-main fieldset.module > details > summary > h2,
.cm-form-main fieldset.module > details > summary .fieldset-heading,
.cm-form-main fieldset.module > details > summary .inline-heading,
.cm-form-main .inline-group fieldset.module > details > summary > h2,
.cm-form-main .inline-group h2.inline-heading,
#container-emails-section summary .fieldset-heading,
#container-photos-gallery summary .fieldset-heading {
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}

/* CarInline (#container_cars-group) — унифицированный flex-wrap layout.
 * Поля каждой строки-авто раскладываются как flex-items с min-width;
 * при сужении экрана они по одному переносятся на следующую строку.
 * См. ниже блок `#container_cars-group ...` рядом с концом файла. */

.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;
    }
}

@media (max-width: 1024px) {
    .cm-car-photo-frame {
        float: none;
        width: 100%;
        max-width: 520px;
        margin: 0 auto 14px auto;
    }
    /* На тач-устройствах нет hover — показываем кнопку загрузки всегда */
    .cm-car-photo-upload {
        opacity: .9;
        pointer-events: auto;
    }

    .cm-form-main .form-row .form-multiline {
        flex-direction: column !important;
        gap: 10px !important;
    }
    /* flex-basis сбрасываем на auto: в колонке basis работает как ВЫСОТА,
       и фиксированные ширины (170/240px) дали бы огромные вертикальные
       пробелы. Второй селектор с :has() — специфичность выше, чем у
       десктопных правил «широких» полей, побеждает за счёт порядка. */
    .cm-form-main .form-row .form-multiline > div,
    .cm-form-main .form-row.form-row .form-multiline > div:has(.flex-container) {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .cm-form-main fieldset.module {
        padding: 6px 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .cm-form-main fieldset.module > h2,
    .cm-form-main fieldset.module > .fieldset-heading {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: -6px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .cm-form-main fieldset.collapse > details > summary {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: -6px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .cm-form-main {
        max-width: 100% !important;
    }

    .cm-form-main .form-row {
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .cm-form-main .form-row > div,
    .cm-form-main .form-row .flex-container,
    .cm-form-main .form-row .fieldBox {
        max-width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .cm-form-main .form-row input:not([type="checkbox"]):not([type="hidden"]),
    .cm-form-main .form-row select,
    .cm-form-main .form-row textarea,
    .cm-form-main .form-row .select2-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

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

    .cm-svc-grid {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .cm-svc-card {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex: 1 1 100% !important;
    }

    main#content-start, main.content {
        padding: 6px 8px !important;
    }

    .cm-form-grid {
        gap: 10px !important;
    }

    .cm-sidebar-card {
        margin-bottom: 10px !important;
    }

    .submit-row {
        flex-wrap: wrap !important;
    }
    .submit-row input, .submit-row a, .submit-row button {
        flex: 1 1 auto !important;
        white-space: nowrap !important;
        font-size: .78rem !important;
        padding: 8px 12px !important;
    }

    .cm-sidebar-actions .cm-btn {
        font-size: .82rem !important;
        padding: 10px 14px !important;
    }
}

/* 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;
}

/* ===== Service cards inside car form ===== */
.cm-svc-grid {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cm-svc-card {
    position: relative;
    border: 1px solid var(--cm-border, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 180px;
    max-width: 300px;
    flex: 0 1 auto;
    box-sizing: border-box;
}
.cm-form-main .form-row .flex-container:not(.form-multiline) .cm-svc-card input[type="number"],
.cm-form-main .form-row .cm-svc-card input[type="number"],
.cm-svc-card input[type="number"] {
    width: auto !important;
    max-width: none !important;
    min-width: 60px !important;
    padding: 4px 6px !important;
    border: 1px solid var(--cm-border, #e2e8f0) !important;
    border-radius: 6px !important;
    font-size: .85rem !important;
    box-sizing: border-box !important;
    flex: 1 1 60px !important;
}
.cm-form-main .form-row .flex-container:not(.form-multiline) .cm-svc-card input.cm-svc-markup,
.cm-form-main .form-row .cm-svc-card input.cm-svc-markup,
.cm-svc-card input.cm-svc-markup {
    flex: 1 1 50px !important;
    min-width: 50px !important;
    background: #fffde7 !important;
    border-color: #ffc107 !important;
}
.cm-svc-card .cm-svc-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-svc-card .cm-svc-provider {
    font-size: .72rem;
    color: var(--cm-text-muted, #9ca3af);
    margin-bottom: 2px;
}
.cm-svc-card .cm-svc-name {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 4px;
}
.cm-svc-card .cm-svc-inputs {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}
.cm-svc-card .cm-svc-inputs span {
    color: #10b981;
    font-weight: 700;
    font-size: .85rem;
}

.cm-svc-card--warehouse { background: #dcfce7; }
.cm-svc-card--warehouse-other { background: #fef9c3; }
.cm-svc-card--line { background: #dbeafe; }
.cm-svc-card--carrier { background: #ffedd5; }
.cm-svc-card--company { background: #f3e8ff; }

@media (max-width: 1024px) {
    .cm-svc-card {
        min-width: 0;
        max-width: none;
        flex: 1 1 100%;
    }
}

/* ===== Car form: row 1 (year, brand, vin, vehicle_type, weight_kg, status) =====
   Требования по ширинам (с учётом padding инпута и нативных
   кнопок-спиннеров у `<input type="number">`):
     - год: 110px (4 знака + spinner);
     - марка: 280…320px (≤35 знаков);
     - VIN: 200px фикс (≤20 знаков, помещает 17-знач. VIN);
     - тип ТС: 140px;
     - масса: 130px (≈8 знаков + spinner);
     - статус: 140px (selecte с короткими опциями). */
.cm-form-main .form-row.field-year .form-multiline > div:nth-child(1) {
    flex: 0 0 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
}
.cm-form-main .form-row.field-year .form-multiline > div:nth-child(2) {
    flex: 2 1 280px !important;
    min-width: 280px !important;
    max-width: 320px !important;
}
.cm-form-main .form-row.field-year .form-multiline > div:nth-child(3) {
    flex: 0 0 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}
.cm-form-main .form-row.field-year .form-multiline > div:nth-child(4) {
    flex: 0 0 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
}
.cm-form-main .form-row.field-year .form-multiline > div:nth-child(5) {
    flex: 0 0 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
}
.cm-form-main .form-row.field-year .form-multiline > div:nth-child(6) {
    flex: 0 0 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
}

.cm-form-main .fieldBox.field-year input,
.cm-form-main .fieldBox.field-brand input,
.cm-form-main .fieldBox.field-vin input,
.cm-form-main .fieldBox.field-weight_kg input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.cm-form-main .fieldBox.field-vehicle_type select,
.cm-form-main .fieldBox.field-status select {
    width: 100% !important;
}

/* ===== Car form: row 2 (client, warehouse, unload_site) =====
   Клиент — аналогично марке: ≤35 знаков. */
.cm-form-main .form-row.field-client .form-multiline > div:nth-child(1) {
    flex: 2 1 280px !important;
    min-width: 280px !important;
    max-width: 320px !important;
}
.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 .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;
}

/* ===== FILTER HORIZONTAL WIDGET (M2M selectors for cars etc.) ===== */
.selector {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.selector .selector-available,
.selector .selector-chosen {
    flex: 1 1 45% !important;
    min-width: 280px !important;
    max-width: none !important;
    width: auto !important;
}

.selector select {
    width: 100% !important;
    min-height: 250px !important;
    height: 250px !important;
    font-size: .85rem !important;
    padding: 4px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs) !important;
    box-sizing: border-box !important;
}

.selector .selector-filter {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.selector .selector-filter label {
    white-space: nowrap !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--cm-text-secondary) !important;
}

.selector .selector-filter input[type="text"] {
    flex: 1 !important;
    width: 100% !important;
    min-width: 200px !important;
    padding: 8px 12px !important;
    font-size: .88rem !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs) !important;
    box-sizing: border-box !important;
}

.selector .selector-filter input[type="text"]:focus {
    border-color: var(--cm-purple) !important;
    box-shadow: 0 0 0 3px var(--cm-purple-bg) !important;
    outline: none !important;
}

.selector-chooseall,
.selector-clearall,
.selector .selector-add,
.selector .selector-remove {
    font-size: .82rem !important;
    color: var(--cm-purple) !important;
}

.selector ul.selector-chooser {
    align-self: center !important;
}

/* ===================================================================
 * CarInline (#container_cars-group) — flex-wrap layout.
 *
 * Единая раскладка для всех экранов: поля строки-авто — это flex-items
 * с min-width. При сужении контейнера поля по одному переносятся на
 * следующую строку (delete → has_title → total_price → client → …).
 * Лейбл каждого поля отображается сверху через ::before, поэтому
 * заголовок `<thead>` скрываем (он отображал бы лейблы один раз наверху
 * таблицы и при wrap ломался бы визуально).
 * =================================================================== */

/* Таблицу, thead, colgroup, tbody переводим в блочный поток. */
#container_cars-group .tabular table {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
}
#container_cars-group .tabular thead,
#container_cars-group .tabular colgroup {
    display: none !important;
}
#container_cars-group .tabular tbody {
    display: block !important;
    width: 100% !important;
}

/* Template-строка Django (empty-form, Id -empty) всегда скрыта. */
#container_cars-group .tabular tr:is(.empty-form, .form-row.empty-form) {
    display: none !important;
}

/* Колонка `.original` содержит `__str__(car)` + ссылку «Изменить»
 * (благодаря show_change_link=True в CarInline). Выводим ячейку из
 * flex-потока и «приклеиваем» абсолютно к левому-верхнему углу
 * карточки-строки — чтобы иконка ↗ гарантированно была ВНУТРИ карточки
 * и не зависела от order/gap во внешнем flex-контейнере tr. Сдвиг полей
 * вправо делаем через padding-left у самого tr (см. ниже). */
#container_cars-group .tabular tr td.original {
    position: absolute !important;
    /* top = padding-top карточки (14) + высота лейбла «Год» над input-ом
     * (≈17px: 0.68rem font + margin-bottom 4px + min-height .82rem) —
     * так иконка выравнивается по вертикали с самим input-ом «Год». */
    top: 31px !important;
    left: 14px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    display: block !important;
    flex: initial !important;
    order: 0 !important;
    overflow: hidden !important;
}
#container_cars-group .tabular tr td.original::before {
    display: none !important;
    content: none !important;
}
/* <p> в td.original: Django рендерит туда `__str__(car)` + ссылку.
 * Текст `__str__` прячем (font-size:0 + color:transparent), ссылка ↗
 * сама задаёт себе font-size:18px и остаётся видимой. */
#container_cars-group .tabular tr td.original p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: transparent !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Сама ссылка — квадратная иконка 36×36 со стрелкой ↗. Текст ссылки
 * подменяется JS на символ "↗" (см. change_form.html), а здесь мы
 * задаём размер и цвета. */
#container_cars-group .tabular tr td.original p a.inlinechangelink,
#container_cars-group .tabular tr td.original p a.cm-car-open-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--cm-purple, #6d28d9) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: transform .12s ease, color .12s ease;
    text-indent: 0 !important;
    white-space: nowrap !important;
}
#container_cars-group .tabular tr td.original p a.inlinechangelink:hover,
#container_cars-group .tabular tr td.original p a.cm-car-open-icon:hover {
    background: transparent !important;
    color: var(--cm-purple-dark, #5b21b6) !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

/* У новых (ещё не сохранённых) строк нет сохранённого инстанса → нет
 * <p> со ссылкой. Пустой td.original не занимает место в ряду. */
#container_cars-group .tabular tr td.original:not(:has(a.inlinechangelink)) {
    display: none !important;
}

/* Строка-авто = карточка с flex-wrap полей. Очень лёгкая лавандовая
 * заливка + выраженная объёмная тень — карточка заметно «приподнята». */
#container_cars-group .tabular tbody tr.form-row,
#container_cars-group .tabular tbody tr.dynamic-container_cars {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px 12px;
    margin: 0 0 14px 0 !important;
    /* left-padding увеличен на ширину иконки (36px) + 12px отступ, чтобы
     * поля начинались правее абсолютно спозиционированной ↗-кнопки. */
    padding: 14px 14px 14px 62px !important;
    background: #faf9ff !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-sm, 10px) !important;
    /* Мягкая тень (откат правки «сделать ещё отчётливее»). */
    box-shadow: 0 2px 6px rgba(30,20,60,.08), 0 1px 2px rgba(30,20,60,.05) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
/* У новых (несохранённых) строк иконки нет — возвращаем обычный
 * внутренний отступ слева, чтобы пустой левый край не «висел». */
#container_cars-group .tabular tbody tr.form-row:not(:has(a.inlinechangelink)),
#container_cars-group .tabular tbody tr.dynamic-container_cars:not(:has(a.inlinechangelink)) {
    padding-left: 14px !important;
}
/* Никаких hover-эффектов у карточки — ни смещения, ни смены тени. */

/* Подсветка фона карточки авто по его статусу. Маркер статуса —
 * невидимый <span data-status="..."> в скрытой колонке (CarInline.
 * status_tint); CSS :has() читает его и слегка тонирует фон. Оттенки
 * согласованы со STATUS_COLORS (FLOATING синий, IN_PORT красный,
 * UNLOADED зелёный, TRANSFERRED фиолетовый). */
#container_cars-group .tabular tbody tr td.field-status_tint {
    display: none !important;
}
#container_cars-group .tabular tbody tr.form-row:has([data-status="FLOATING"]) {
    background: #eef5fb !important;
    border-color: #c7ddec !important;
}
#container_cars-group .tabular tbody tr.form-row:has([data-status="IN_PORT"]) {
    background: #fbeeee !important;
    border-color: #ecccc7 !important;
}
#container_cars-group .tabular tbody tr.form-row:has([data-status="UNLOADED"]) {
    background: #eef8f1 !important;
    border-color: #c7e7d3 !important;
}
#container_cars-group .tabular tbody tr.form-row:has([data-status="TRANSFERRED"]) {
    background: #f5eefb !important;
    border-color: #ddc9ec !important;
}

/* Сброс табличной отрисовки ячеек; каждая ячейка = flex-column
 * (лейбл сверху + поле снизу). */
#container_cars-group .tabular tbody tr td {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Flex-basis по полям: сумма min-widths = 80+140+120+170+170+90+50+50
 * = 870px (+ 7 × 12px gap = 954px). До этого порога все влезает в одну
 * строку; ниже — правые поля переносятся по одному. */
#container_cars-group .tabular tbody tr td.field-year         { flex: 0 0 80px; }
#container_cars-group .tabular tbody tr td.field-brand        { flex: 1 1 140px; }
#container_cars-group .tabular tbody tr td.field-vehicle_type { flex: 1 1 120px; }
#container_cars-group .tabular tbody tr td.field-vin          { flex: 2 1 170px; }
#container_cars-group .tabular tbody tr td.field-client       { flex: 2 1 170px; }
#container_cars-group .tabular tbody tr td.field-weight_kg    { flex: 0 0 90px; }
#container_cars-group .tabular tbody tr td.field-total_price  { flex: 0 0 90px; }
#container_cars-group .tabular tbody tr td.field-has_title    { flex: 0 0 60px; }
#container_cars-group .tabular tbody tr td.delete             { flex: 0 0 70px; }

/* Лейблы через ::before. По умолчанию контент пустой; включаем для
 * известных field-* классов ниже. */
#container_cars-group .tabular tbody tr td::before {
    display: block;
    margin: 0 0 4px 2px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cm-text-muted);
    content: "";
    line-height: 1.2;
    min-height: .82rem;
}
#container_cars-group .tabular tbody tr td.field-year::before         { content: "Год"; }
#container_cars-group .tabular tbody tr td.field-brand::before        { content: "Марка"; }
#container_cars-group .tabular tbody tr td.field-vehicle_type::before { content: "Тип ТС"; }
#container_cars-group .tabular tbody tr td.field-vin::before          { content: "VIN"; }
#container_cars-group .tabular tbody tr td.field-client::before       { content: "Клиент"; }
#container_cars-group .tabular tbody tr td.field-weight_kg::before    { content: "Масса (кг)"; }
#container_cars-group .tabular tbody tr td.field-total_price::before  { content: "Цена"; }
#container_cars-group .tabular tbody tr td.field-has_title::before    { content: "T"; }
#container_cars-group .tabular tbody tr td.delete::before             { content: "Уд"; }

/* Поля на всю ширину ячейки. Приводим input/select/textarea/select2
 * к одинаковой высоте 36px и единой рамке. */
#container_cars-group .tabular tbody tr td input[type="text"],
#container_cars-group .tabular tbody tr td input[type="number"],
#container_cars-group .tabular tbody tr td input[type="url"],
#container_cars-group .tabular tbody tr td select {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: .85rem !important;
    padding: 6px 8px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs, 8px) !important;
    box-sizing: border-box !important;
    background: var(--cm-white) !important;
    color: var(--cm-text) !important;
}
#container_cars-group .tabular tbody tr td textarea {
    width: 100% !important;
    min-height: 36px !important;
    max-height: none !important;
    font-size: .85rem !important;
    padding: 6px 8px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs, 8px) !important;
    box-sizing: border-box !important;
    background: var(--cm-white) !important;
    color: var(--cm-text) !important;
    resize: vertical;
}

/* related-widget-wrapper: просто flex-ряд (select2 + возможные кнопки),
 * без своих рамок/фона — иначе двойная обводка вокруг select2. */
#container_cars-group .tabular tbody tr td .related-widget-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    min-width: 0 !important;
}
#container_cars-group .tabular tbody tr td .related-widget-wrapper > .select2-container {
    flex: 1 1 auto !important;
}

/* Select2: убираем собственную рамку/паддинги контейнера,
 * а все визуальные свойства приводим к виду обычного input. */
#container_cars-group .tabular tbody tr td .select2-container {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}
#container_cars-group .tabular tbody tr td .select2-container .select2-selection--single,
#container_cars-group .tabular tbody tr td .select2-container--default .select2-selection--single {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs, 8px) !important;
    background: var(--cm-white) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}
#container_cars-group .tabular tbody tr td .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.3 !important;
    font-size: .85rem !important;
    padding: 0 !important;
    color: var(--cm-text) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#container_cars-group .tabular tbody tr td .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    top: 0 !important;
    right: 4px !important;
    display: flex !important;
    align-items: center !important;
}
#container_cars-group .tabular tbody tr td .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 6px !important;
    color: var(--cm-text-muted) !important;
}

/* Фокус-стиль общий для всех полей. */
#container_cars-group .tabular tbody tr td input:focus,
#container_cars-group .tabular tbody tr td select:focus,
#container_cars-group .tabular tbody tr td textarea:focus,
#container_cars-group .tabular tbody tr td .select2-container--focus .select2-selection--single,
#container_cars-group .tabular tbody tr td .select2-container--open .select2-selection--single {
    border-color: var(--cm-purple) !important;
    box-shadow: 0 0 0 3px var(--cm-purple-bg) !important;
    outline: none !important;
}

/* Цена — readonly <p>, визуально приводим к виду поля (выравнивание по
 * левому краю, как у остальных значений). */
#container_cars-group .tabular tbody tr td.field-total_price p,
#container_cars-group .tabular tbody tr td.field-total_price .readonly {
    margin: 0 !important;
    padding: 7px 8px !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: var(--cm-text) !important;
    text-align: left !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Чекбоксы (Т-титул, Удалить) — компактные, под лейблом. */
#container_cars-group .tabular tbody tr td.field-has_title,
#container_cars-group .tabular tbody tr td.delete {
    align-items: flex-start;
}
#container_cars-group .tabular tbody tr td.field-has_title input[type="checkbox"],
#container_cars-group .tabular tbody tr td.delete input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 8px 0 0 4px !important;
    accent-color: var(--cm-purple);
    flex: 0 0 22px;
}

/* Строка «+ Добавить ещё один Автомобиль» — полноразмерная
 * пунктирная «карточка-призыв». При наведении рамка становится
 * сплошной фиолетовой, появляется мягкая заливка и лёгкий lift. */
#container_cars-group .tabular tbody tr.add-row {
    display: block !important;
    border: 2px dashed var(--cm-border) !important;
    border-radius: var(--cm-radius-sm, 10px) !important;
    background: linear-gradient(180deg, rgba(108,92,231,.02), rgba(108,92,231,.04)) !important;
    padding: 0 !important;
    margin: 14px 0 4px 0 !important;
    text-align: center;
    box-shadow: none !important;
    transition: border-color .15s ease, background .15s ease,
                transform .15s ease, box-shadow .15s ease !important;
    cursor: pointer;
}
#container_cars-group .tabular tbody tr.add-row:hover {
    border-color: var(--cm-purple, #6c5ce7) !important;
    border-style: dashed !important;
    background: linear-gradient(180deg, rgba(108,92,231,.06), rgba(108,92,231,.10)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108,92,231,.12), 0 1px 3px rgba(108,92,231,.08) !important;
}
#container_cars-group .tabular tbody tr.add-row td {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}
#container_cars-group .tabular tbody tr.add-row td::before {
    display: none !important;
    content: none !important;
}
/* Сама ссылка — flex-ряд на всю ширину, кружок-плюс слева + текст. */
#container_cars-group .tabular tbody tr.add-row a,
#container_cars-group .tabular tbody tr.add-row td.add a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: var(--cm-purple, #6c5ce7) !important;
    text-decoration: none !important;
    letter-spacing: .2px;
    line-height: 1 !important;
    /* Убираем Django'шный background-image иконки «+», мы рисуем свой. */
    background-image: none !important;
    background: transparent !important;
    padding-left: 20px !important;
    text-indent: 0 !important;
    transition: color .15s ease !important;
}
#container_cars-group .tabular tbody tr.add-row a::before {
    /* Плюс рисуем SVG'шкой, а не символом «+», — так он гарантированно
     * окажется строго по геометрическому центру кружка (у текстового
     * глифа центрирование зависит от метрик шрифта и визуально всегда
     * чуть смещено).
     * ВАЖНО: не используем rotate() на hover — при вращении SVG-подложки
     * браузер пересэмплирует линии, и из-за суб-пиксельного сглаживания
     * плюс визуально кажется чуть смещённым. Поэтому на hover меняем
     * только цвет и тень, геометрию не трогаем. */
    content: '';
    display: inline-block !important;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--cm-purple, #6c5ce7);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(108,92,231,.25);
    transition: box-shadow .15s ease, background-color .15s ease !important;
}
#container_cars-group .tabular tbody tr.add-row:hover a {
    color: var(--cm-purple-dark, #5b21b6) !important;
}
#container_cars-group .tabular tbody tr.add-row:hover a::before {
    background-color: var(--cm-purple-dark, #5b21b6);
    box-shadow: 0 4px 12px rgba(108,92,231,.40);
}

/* Убираем горизонтальный скролл на всех уровнях контейнера CarInline —
 * он нужен был для старой fixed-table верстки. Новая flex-wrap раскладка
 * сама корректно переносит поля на узких экранах, а глобальные правила
 * `.inline-group { overflow-x: auto }` (logist2_custom_admin.css) и
 * `.inline-group .tabular { overflow-x: auto }` (блок выше в этом файле)
 * иначе показывают полосу «в пустоту» из-за box-shadow/padding карточки.
 *
 * ВАЖНО: реальным скроллером в браузере оказывается сам `<table>` внутри
 * .inline-related.tabular (computed `overflow-x: scroll`), поэтому overflow
 * принудительно гасим на ВСЕХ уровнях, включая .inline-related, table, tbody
 * и tr — иначе на широких экранах остаётся полоса прокрутки «в пустоту»
 * из-за того, что отдельные <input> (например, длинное имя бренда) имеют
 * scrollWidth больше, чем своя td, что увеличивает scrollWidth всей строки. */
#container_cars-group,
#container_cars-group .inline-related,
#container_cars-group .tabular,
#container_cars-group fieldset.module,
#container_cars-group .tabular table,
#container_cars-group .tabular tbody,
#container_cars-group .tabular tbody tr {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Специально для очень узких экранов (< 520px): все поля строго по
 * одному на строку. */
@media (max-width: 520px) {
    #container_cars-group .tabular tbody tr td.field-year,
    #container_cars-group .tabular tbody tr td.field-brand,
    #container_cars-group .tabular tbody tr td.field-vehicle_type,
    #container_cars-group .tabular tbody tr td.field-vin,
    #container_cars-group .tabular tbody tr td.field-client,
    #container_cars-group .tabular tbody tr td.field-weight_kg,
    #container_cars-group .tabular tbody tr td.field-total_price {
        flex: 1 1 100% !important;
    }
    #container_cars-group .tabular tbody tr td.field-has_title,
    #container_cars-group .tabular tbody tr td.delete {
        flex: 1 1 calc(50% - 6px) !important;
    }
    #container_cars-group fieldset.module {
        padding: 12px !important;
    }
}

/* ============================================================
   REUSABLE CARD INLINE — .cm-card-inline
   Превращает любой TabularInline в список «карточек-строк» (как авто в
   карточке контейнера): каждая строка = скруглённая карточка с полями
   во flex-раскладке и подписью колонки над каждым полем. Подписи колонок
   проставляет JS (см. base_site.html) из заголовков таблицы → атрибут
   data-label. Класс вешается на <fieldset class="module cm-card-inline">
   через InlineModelAdmin.classes, поэтому селекторы используют
   `.cm-card-inline.module ...` для нужной специфичности (перебить общие
   правила `.inline-group .tabular ...`).
   ============================================================ */
.cm-card-inline.module > table,
.cm-card-inline.module table { width: 100% !important; table-layout: auto !important; display: block !important; }
.cm-card-inline.module thead { display: none !important; }
.cm-card-inline.module tbody { display: block !important; }

/* Строка = карточка */
.cm-card-inline.module tbody tr.form-row {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px 12px;
    margin: 0 0 14px 0 !important;
    padding: 14px !important;
    background: #faf9ff !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-sm, 10px) !important;
    box-shadow: 0 2px 6px rgba(30,20,60,.08), 0 1px 2px rgba(30,20,60,.05) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Ячейка = колонка (лейбл сверху + поле снизу) */
.cm-card-inline.module tbody tr td {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    min-width: 0 !important;
    flex: 1 1 150px;
    box-sizing: border-box;
    font-size: .85rem !important;
}
.cm-card-inline.module thead th.original,
.cm-card-inline.module tbody tr td.original { display: none !important; }

/* Подпись колонки вставляет JS (элемент .cm-col-label), поэтому штатный
   ::before не используем. */
.cm-card-inline.module tbody tr td::before { content: none !important; }
.cm-card-inline.module tbody tr td .cm-col-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 4px 2px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cm-text-muted);
    line-height: 1.2;
    min-height: .82rem;
    /* Подпись всегда в одну строку — иначе при переносе на 2 строки
       соседние поля «съезжают» по высоте. */
    white-space: nowrap;
}
/* «?»-бейдж с подсказкой (по наведению — нативный тултип через title) */
.cm-card-inline.module tbody tr td .cm-col-label .cm-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cm-purple-bg, #efeafe);
    color: var(--cm-purple, #6c5ce7);
    border: 1px solid rgba(108,92,231,.35);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    cursor: help;
    flex: 0 0 14px;
}
.cm-card-inline.module tbody tr td .cm-col-label .cm-help:hover,
.cm-card-inline.module tbody tr td .cm-col-label .cm-help:focus {
    background: var(--cm-purple, #6c5ce7);
    color: #fff;
    outline: none;
}

/* Колонки-чекбоксы: подпись и сам чекбокс по центру друг над другом.
   Ячейка ужимается по ширине подписи (flex:0 0 auto), поэтому центрирование
   ставит галочку строго под её названием. */
.cm-card-inline.module tbody tr td:has(input[type="checkbox"]) {
    flex: 0 0 auto;
    /* Ширина ячейки не меньше её подписи — иначе длинная подпись
       («По умолч.») вылезает за пределы узкой ячейки и налезает на соседнюю. */
    min-width: max-content !important;
    align-items: center !important;
    text-align: center !important;
}
.cm-card-inline.module tbody tr td:has(input[type="checkbox"]) .cm-col-label {
    margin-left: 0;
    justify-content: center;
}

/* Текстовые поля услуг: «Услуга»/«Опис.» получают больше места и сильнее
   растягиваются, чтобы длинное название было видно целиком. */
.cm-card-inline.module tbody tr td.field-name,
.cm-card-inline.module tbody tr td.field-description { flex: 3 1 200px; }
.cm-card-inline.module tbody tr td.field-short_name { flex: 2 1 150px; }

/* Поля на всю ширину ячейки, единая высота/рамка */
.cm-card-inline.module tbody tr td input[type="text"],
.cm-card-inline.module tbody tr td input[type="number"],
.cm-card-inline.module tbody tr td input[type="url"],
.cm-card-inline.module tbody tr td input[type="email"],
.cm-card-inline.module tbody tr td select {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: .85rem !important;
    padding: 6px 8px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs, 8px) !important;
    box-sizing: border-box !important;
    background: var(--cm-white, #fff) !important;
    color: var(--cm-text) !important;
}
.cm-card-inline.module tbody tr td textarea {
    width: 100% !important;
    min-height: 36px !important;
    font-size: .85rem !important;
    padding: 6px 8px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-xs, 8px) !important;
    box-sizing: border-box !important;
    background: var(--cm-white, #fff) !important;
    color: var(--cm-text) !important;
    resize: vertical;
}
.cm-card-inline.module tbody tr td input:focus,
.cm-card-inline.module tbody tr td select:focus,
.cm-card-inline.module tbody tr td textarea:focus {
    border-color: var(--cm-purple) !important;
    box-shadow: 0 0 0 3px var(--cm-purple-bg) !important;
    outline: none !important;
}

/* readonly-значение приводим к виду поля */
.cm-card-inline.module tbody tr td .readonly,
.cm-card-inline.module tbody tr td p {
    margin: 0 !important;
    padding: 7px 8px !important;
    font-size: .85rem !important;
    color: var(--cm-text) !important;
    min-height: 36px;
    display: flex;
    align-items: center;
}

/* select2 (автодополнение FK) — к виду обычного поля */
.cm-card-inline.module tbody tr td .related-widget-wrapper {
    display: flex !important; align-items: center; gap: 4px;
    width: 100% !important; border: none !important; background: transparent !important;
    padding: 0 !important; min-width: 0 !important;
}
.cm-card-inline.module tbody tr td .select2-container { width: 100% !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border: none !important; background: transparent !important; box-sizing: border-box !important; }
.cm-card-inline.module tbody tr td .select2-container--default .select2-selection--single {
    height: 36px !important; min-height: 36px !important; padding: 0 8px !important;
    border: 1px solid var(--cm-border) !important; border-radius: var(--cm-radius-xs, 8px) !important;
    background: var(--cm-white, #fff) !important; box-sizing: border-box !important;
    display: flex !important; align-items: center !important;
}
.cm-card-inline.module tbody tr td .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.3 !important; font-size: .85rem !important; padding: 0 !important; color: var(--cm-text) !important; }
.cm-card-inline.module tbody tr td .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; top: 0 !important; right: 4px !important; }

/* Чекбоксы (is_active, is_primary и т.п.) — компактные */
.cm-card-inline.module tbody tr td input[type="checkbox"] {
    width: 22px !important; height: 22px !important; min-height: 0 !important;
    padding: 0 !important; margin: 6px auto 0 !important; accent-color: var(--cm-purple); flex: 0 0 22px;
}

/* Колонка «Удалить»: красный крестик вместо чекбокса, без подписи.
   Сам DELETE-чекбокс скрыт (но остаётся в форме — отметка применяется при
   сохранении), штатную ссылку Django заменяем своим крестиком. */
.cm-card-inline.module tbody tr td.delete {
    flex: 0 0 auto;
    align-items: center !important;
    justify-content: flex-start;
}
.cm-card-inline.module tbody tr td.delete .cm-col-label { display: none !important; }
.cm-card-inline.module tbody tr td.delete input[type="checkbox"] { display: none !important; }
.cm-card-inline.module .inline-deletelink { display: none !important; }
.cm-card-inline.module tbody tr td.delete .cm-del-btn {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fdecec;
    color: #e03131;
    transition: background .15s ease, color .15s ease, transform .1s ease;
    /* Сдвигаем вниз на высоту подписи поля, чтобы крестик встал на уровень инпутов */
    margin-top: calc(0.82rem + 8px);
}
.cm-card-inline.module tbody tr td.delete .cm-del-btn::before {
    content: '×';
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}
.cm-card-inline.module tbody tr td.delete .cm-del-btn:hover { background: #e03131; color: #fff; }
.cm-card-inline.module tbody tr td.delete .cm-del-btn:active { transform: scale(.92); }

/* Плавное удаление карточки: строка схлопывается (высота, отступы, рамка и
   прозрачность → 0), а карточки ниже мягко поднимаются на её место.
   max-height задаётся из JS перед стартом, чтобы переход анимировался. */
.cm-card-inline.module tbody tr.form-row.cm-removing {
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateY(-6px) scale(.98);
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    transition: max-height .3s cubic-bezier(.4, 0, .2, 1),
                opacity .22s ease,
                transform .3s cubic-bezier(.4, 0, .2, 1),
                margin .3s cubic-bezier(.4, 0, .2, 1),
                padding .3s cubic-bezier(.4, 0, .2, 1) !important;
}

/* Кнопка «+ Добавить ещё один …» — пунктирная карточка-призыв */
.cm-card-inline.module tbody tr.add-row {
    display: block !important;
    border: 2px dashed var(--cm-border) !important;
    border-radius: var(--cm-radius-sm, 10px) !important;
    background: linear-gradient(180deg, rgba(108,92,231,.02), rgba(108,92,231,.04)) !important;
    padding: 0 !important; margin: 14px 0 4px 0 !important; text-align: center;
    box-shadow: none !important; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
.cm-card-inline.module tbody tr.add-row:hover {
    border-color: var(--cm-purple, #6c5ce7) !important;
    background: linear-gradient(180deg, rgba(108,92,231,.06), rgba(108,92,231,.10)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108,92,231,.12), 0 1px 3px rgba(108,92,231,.08) !important;
}
.cm-card-inline.module tbody tr.add-row td { display: block !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; }
.cm-card-inline.module tbody tr.add-row td::before { display: none !important; content: none !important; }
.cm-card-inline.module tbody tr.add-row a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 12px !important; width: 100% !important; padding: 16px 20px !important;
    font-size: .92rem !important; font-weight: 600 !important; color: var(--cm-purple, #6c5ce7) !important;
    text-decoration: none !important; background-image: none !important; background: transparent !important;
}
.cm-card-inline.module tbody tr.add-row a::before {
    content: ''; display: inline-block !important; width: 26px; height: 26px; border-radius: 50%;
    background-color: var(--cm-purple, #6c5ce7);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
    flex-shrink: 0; box-shadow: 0 2px 6px rgba(108,92,231,.25);
}

/* Гасим горизонтальный скролл «в пустоту» на уровне таблицы, но НЕ на самой
   строке-карточке — иначе подпись у правого края («По умолч.») обрезается. */
.cm-card-inline.module,
.cm-card-inline.module table,
.cm-card-inline.module tbody { overflow-x: clip !important; overflow-y: visible !important; }
.cm-card-inline.module tbody tr.form-row { overflow: visible !important; }

/* Убираем разделительные полосы под каждым полем (наследие table-вёрстки).
   Нужен #content-main, иначе побеждает ID-правило #content-main table td. */
#content-main .cm-card-inline.module tbody tr.form-row td { border-bottom: 0 !important; }

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