/* ==========================================================================
   PREMIUM LAYER  -  loaded after style.css
   --------------------------------------------------------------------------
   1. Refined design tokens (depth, hairlines, focus, type)
   2. Shell: sidebar, header, content
   3. Components: cards, KPI tiles, buttons, forms, tabs, chips, tables, badges, modals
   4. Responsive system: desktop > tablet (drawer) > phone (compact, sheets, swipe rows)
   Keep this file additive: it only refines / overrides, it never removes behaviour.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. TOKENS */
:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
    --hairline: 1px solid var(--border-color);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --gutter: 24px;
}

:root, [data-theme="dark"] {
    --surface-raise: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 60%);
    --surface-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.55);
    --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 40px -14px rgba(0, 0, 0, 0.65);
    --scroll-thumb: rgba(255, 255, 255, 0.14);
}

[data-theme="light"] {
    --surface-raise: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
    --surface-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 28px -14px rgba(16, 24, 40, 0.18);
    --shadow-card-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 18px 38px -16px rgba(16, 24, 40, 0.26);
    --scroll-thumb: rgba(16, 24, 40, 0.18);
}

html { -webkit-text-size-adjust: 100%; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
}

/* numbers line up in KPIs and tables */
.stat-value, .data-table td, .badge, .kpi-value { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { letter-spacing: -0.012em; }

::selection { background: color-mix(in srgb, var(--color-primary) 35%, transparent); color: var(--text-primary); }

/* slim, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-primary) 55%, transparent); background-clip: content-box; border: 3px solid transparent; }

/* one consistent keyboard focus ring */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* guard: nothing may push the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }
.app-content-wrapper, .app-main-content, .sub-view { min-width: 0; }
.app-main-content img, .app-main-content video, .app-main-content canvas { max-width: 100%; }

/* ------------------------------------------------------------------ 2. SHELL */
.app-layout {
    background:
        radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 70%),
        radial-gradient(700px 380px at -5% 105%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 70%),
        var(--bg-app);
}

.app-content-wrapper { min-width: 0; }

/* Sidebar */
.app-sidebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 96%, #fff 4%) 0%, var(--bg-surface) 100%);
    border-right: var(--hairline);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.02), 8px 0 30px -18px rgba(0, 0, 0, 0.5);
}

.sidebar-menu { padding: 12px 12px 16px; gap: 2px; }

.nav-item {
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background var(--transition-normal), color var(--transition-fast), transform var(--transition-fast);
}

.nav-item i { transition: transform var(--transition-normal), color var(--transition-fast); }
.nav-item:hover { background: var(--bg-surface-active); color: var(--text-primary); }
.nav-item:hover i { transform: translateX(1px) scale(1.06); }

.nav-item.active {
    color: var(--color-primary);
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-primary) 5%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.sidebar-footer {
    border-top: var(--hairline);
    background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
}

/* Header: sticky frosted glass with a hairline */
.app-header {
    position: sticky;
    top: 0;
    padding: 0 var(--gutter);
    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 24px -22px rgba(0, 0, 0, 0.6);
}

.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-left h2 { font-size: 19px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.icon-btn {
    border-radius: 12px;
    transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover { background: var(--bg-surface-active); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(0.96); }

.app-main-content {
    padding: var(--gutter);
    padding-bottom: calc(var(--gutter) + var(--safe-bottom));
    scroll-behavior: smooth;
}

/* hamburger: hidden on desktop (see responsive block) */
.sidebar-hamburger-btn { display: none; }

/* ------------------------------------------------------------------ 3. COMPONENTS */

/* Cards */
.card {
    background-image: var(--surface-raise);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}
.card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-color-strong); }

/* KPI tiles: fluid grid (no orphan slot), soft glow on hover */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.stat-card {
    position: relative;
    overflow: hidden;
    background-image: var(--surface-raise);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px 90px at 100% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.stat-card:hover::after { opacity: 1; }
.stat-card h3 { letter-spacing: 0.08em; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.stat-value { font-weight: 700; letter-spacing: -0.02em; }
.stat-icon { border-radius: 14px; box-shadow: var(--surface-sheen); }

/* Buttons */
.btn {
    border-radius: 12px;
    transition: transform var(--transition-fast), box-shadow var(--transition-normal), background var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn-primary {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 92%, #fff 8%), var(--color-primary));
    box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--color-primary) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

.btn-secondary {
    background-image: var(--surface-raise);
    border: var(--hairline);
}
.btn-secondary:hover { border-color: var(--border-color-strong); transform: translateY(-1px); }

/* Forms */
.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
select, textarea {
    border-radius: 12px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.form-control:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):focus,
select:focus, textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--ring);
    outline: none;
}

/* Tabs / segmented controls / chips */
.tabs-btn-group, .pipeline-switch-btn-group, .source-chips-row {
    scrollbar-width: none;
}
.tabs-btn-group::-webkit-scrollbar, .pipeline-switch-btn-group::-webkit-scrollbar, .source-chips-row::-webkit-scrollbar { display: none; }

.tab-btn, .filter-tab, .source-chip-btn, .settings-tab-btn {
    border-radius: 999px;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.tab-btn:active, .filter-tab:active, .source-chip-btn:active { transform: scale(0.97); }

/* Badges */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; }

/* Tables */
.data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    letter-spacing: 0.07em;
    font-size: 11.5px;
    font-weight: 650;
    color: var(--text-muted);
}
.data-table tbody tr { transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Modals */
.modal-backdrop, .modal-overlay {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.modal, .modal-dialog {
    border-radius: var(--radius-xl);
    border: var(--hairline);
    box-shadow: var(--shadow-lg);
    background-image: var(--surface-raise);
}

/* Dropdown & toast surfaces */
.notification-dropdown {
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: var(--hairline);
}

/* Empty states read as intentional, not broken */
.empty-state {
    color: var(--text-muted);
    padding: 28px 16px;
    text-align: center;
}

/* Kanban lanes: calmer, with rounded lanes */
.kanban-column, .kanban-col {
    border-radius: var(--radius-lg);
}

/* Skeleton shimmer helper for any element that opts in */
@keyframes premium-shimmer { to { background-position: -200% 0; } }
.is-loading-shimmer {
    background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.07) 50%, transparent 75%) 0 0 / 200% 100%;
    animation: premium-shimmer 1.4s linear infinite;
}

/* ------------------------------------------------------------------ 4. RESPONSIVE */

/* ---- Tablet & phone: the sidebar becomes a slide-over drawer (<= 1024px) ---- */
@media (max-width: 1024px) {
    :root { --gutter: 16px; --header-height: 62px; }

    /* undo the legacy "icon strip" layout from style.css */
    body { overflow: hidden; }
    .app-layout {
        flex-direction: row !important;
        height: 100dvh;
        overflow: hidden;
    }
    .app-content-wrapper {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        width: 100%;
        height: 100dvh;
        min-width: 0;
    }
    .app-header { order: 0; width: 100%; padding: 0 12px calc(0px); padding-top: var(--safe-top); height: calc(var(--header-height) + var(--safe-top)); }
    .app-main-content { order: 0; flex: 1; width: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--gutter); padding-bottom: calc(var(--gutter) + var(--safe-bottom)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

    .app-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0;
        order: 0;
        width: min(84vw, 320px) !important;
        height: 100dvh !important;
        flex-direction: column !important;
        align-items: stretch !important;
        border-right: var(--hairline) !important;
        border-bottom: none !important;
        transform: translateX(-102%) !important;
        transition: transform 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out);
        z-index: 1200;
        padding-top: var(--safe-top);
        box-shadow: none;
    }
    .app-layout.sidebar-open .app-sidebar { transform: translateX(0) !important; box-shadow: 24px 0 60px -10px rgba(0, 0, 0, 0.6); }

    .sidebar-brand { border-right: none !important; padding: 12px 18px !important; }
    .sidebar-brand-sub { display: block !important; }
    .sidebar-menu {
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 10px 12px 16px !important;
        gap: 2px !important;
        flex: 1;
    }
    .nav-item { flex-direction: row !important; padding: 12px 14px !important; gap: 12px !important; min-height: 46px; }
    .nav-item span { display: inline !important; }
    .nav-item i { font-size: 17px !important; }
    .nav-item.active::before { display: block !important; }
    .sidebar-footer { display: flex !important; padding-bottom: calc(14px + var(--safe-bottom)); }

    .sidebar-overlay {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 1190;
        background: rgba(5, 8, 16, 0.55);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .app-layout.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

    /* hamburger lives in the header (moved there in index.html) */
    .sidebar-hamburger-btn {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        position: static;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        border: var(--hairline);
        background: var(--surface-raise), var(--bg-surface);
        cursor: pointer;
        transition: background var(--transition-fast), transform var(--transition-fast);
    }
    .sidebar-hamburger-btn:active { transform: scale(0.94); }
    .sidebar-hamburger-btn span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--text-primary);
        transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
    }
    .app-layout.sidebar-open .sidebar-hamburger-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .app-layout.sidebar-open .sidebar-hamburger-btn span:nth-child(2) { opacity: 0; }
    .app-layout.sidebar-open .sidebar-hamburger-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* the simulator button collapses to an icon */
    #toggle-sim-panel-btn .btn-label-text { display: none !important; }
    #toggle-sim-panel-btn { padding: 0 !important; width: 42px !important; min-width: 42px !important; height: 42px; flex-shrink: 0; }
    .header-right { gap: 8px; }

    /* wide controls scroll sideways (swipe) instead of overflowing the page */
    .tabs-btn-group, .pipeline-switch-btn-group:not(.d-none), .source-chips-row, .filter-tabs, .view-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 6px;
    }
    .tabs-btn-group > *, .pipeline-switch-btn-group > *, .source-chips-row > *, .filter-tabs > *, .view-tabs > * { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }
    .source-chips-row > span { flex-shrink: 0; }

    .view-header-row { flex-wrap: wrap; gap: 10px; }
    .view-header-row > div { display: flex; flex-wrap: wrap; gap: 8px; }

    .dashboard-charts-row { flex-direction: column; }
    .chart-card { width: 100% !important; min-width: 0 !important; }
}

/* ---- Tablet only (769 - 1024): keep two-column grids comfortable ---- */
@media (min-width: 769px) and (max-width: 1024px) {
    .analytics-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .header-left h2 { font-size: 18px; }
}

/* ---- Phone (<= 768) ---- */
@media (max-width: 768px) {
    .header-left h2 { font-size: 17px; }

    /* the pipeline <select> replaces the segmented switch on phones */
    .pipeline-switch-btn-group { display: none !important; }

    /* an odd last KPI tile spans the row instead of leaving a hole */
    .analytics-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* KPI tiles: two across, compact */
    .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card { padding: 14px 12px; gap: 10px; align-items: center; }
    .stat-card h3 { font-size: 10.5px; letter-spacing: 0.06em; }
    .stat-value { font-size: 22px; }
    .stat-icon { width: 38px; height: 38px; flex-shrink: 0; }

    .card { padding: 14px; border-radius: 16px; }
    .card:hover { transform: none; }
    .stat-card:hover { transform: none; }

    /* forms stack */
    .form-row, .form-grid, .grid-2, .grid-3, .row { grid-template-columns: 1fr !important; }
    .form-row { flex-direction: column; }

    /* modals become bottom sheets with a grab handle */
    .modal-overlay, .modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
    .modal, .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 94dvh;
        border-radius: 22px 22px 0 0;
        padding-bottom: var(--safe-bottom);
        animation: sheet-up 0.34s var(--ease-out);
    }
    .modal::before, .modal-dialog::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 4px;
        background: var(--border-color-strong);
        margin: 8px auto 0;
    }
    @keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }

    /* tables: keep columns readable, scroll inside the card */
    .table-responsive { border-radius: 14px; }
    .data-table th, .data-table td { white-space: nowrap; padding: 10px 12px; }

    /* notification panel fits the screen */
    .notification-dropdown { position: fixed; left: 12px; right: 12px; top: calc(var(--header-height) + var(--safe-top) + 6px); width: auto; max-width: none; }

    /* inbox goes edge-to-edge: cancel exactly the content gutter */
    #view-inbox.sub-view {
        margin: calc(-1 * var(--gutter)) !important;
        width: calc(100% + 2 * var(--gutter)) !important;
        max-width: none;
        box-sizing: border-box;
    }
    .inbox-left, .inbox-layout { box-sizing: border-box; max-width: 100%; }
    .inbox-left input, .inbox-left .search-box, .inbox-left .inbox-search { max-width: 100%; box-sizing: border-box; }
    .inbox-channel-tabs, .inbox-filters-tabs, .inbox-left .filter-tabs { max-width: 100%; box-sizing: border-box; padding-inline: 10px; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; }
    .inbox-channel-tabs::-webkit-scrollbar, .inbox-filters-tabs::-webkit-scrollbar, .inbox-left .filter-tabs::-webkit-scrollbar { display: none; }
    .inbox-channel-tabs > *, .inbox-filters-tabs > *, .inbox-left .filter-tabs > * { flex-shrink: 0; }

    /* settings sub-navigation scrolls horizontally */
    .settings-nav-pane { gap: 6px; scrollbar-width: none; }
    .settings-nav-pane::-webkit-scrollbar { display: none; }
}

/* ---- Small phones (<= 400) ---- */
@media (max-width: 400px) {
    :root { --gutter: 12px; }
    .analytics-grid { gap: 8px; }
    .stat-card { padding: 12px 10px; }
    .stat-value { font-size: 20px; }
    .header-left h2 { font-size: 16px; }
    .btn { padding-left: 14px; padding-right: 14px; }
}

/* ---- Large desktops: let content breathe but stay readable ---- */
@media (min-width: 1600px) {
    :root { --gutter: 32px; }
    .app-main-content > .sub-view { max-width: 1680px; margin-inline: auto; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .app-sidebar, .sidebar-overlay, .stat-card, .card, .btn, .nav-item, .modal, .modal-dialog { transition: none !important; animation: none !important; }
}

/* Print: clean output */
@media print {
    .app-sidebar, .app-header, .sidebar-hamburger-btn, .sidebar-overlay { display: none !important; }
    .app-main-content { overflow: visible !important; padding: 0 !important; }
}

/* ---------------------------------------------------------------- SELECT CHEVRON
   Several legacy rules reset `background`/`padding` on selects (modals, inline styles), which dropped the
   arrow and made dropdowns look like plain boxes. Draw it again, last, so every dropdown reads as one. */
select.form-control,
select.form-select,
.app-main-content select:not([multiple]):not([size]),
.modal select:not([multiple]):not([size]),
.modal-body select:not([multiple]):not([size]) {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
    cursor: pointer;
}

/* ---------------------------------------------------------------- AD PLATFORM CARDS */
.ad-platform-card .btn { white-space: nowrap; }
.ad-platform-card > div:last-child { flex-wrap: wrap; row-gap: 10px; }
.ad-platform-card code { font-size: 11px; word-break: break-word; }
.ad-platform-card details summary { list-style: none; }
.ad-platform-card details summary::-webkit-details-marker { display: none; }
.ad-platform-card details[open] summary { color: var(--text-primary); }

/* Outline buttons (delivery actions and others): quiet until hovered, coloured by their meaning. */
.btn-outline-secondary,
.btn-outline-warning,
.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--border-color-strong);
    color: var(--text-secondary);
}
.btn-outline-warning { border-color: color-mix(in srgb, var(--color-warning) 55%, transparent); color: var(--color-warning); }
.btn-outline-danger { border-color: color-mix(in srgb, var(--color-danger) 55%, transparent); color: var(--color-danger); }
.btn-outline-secondary:hover { background: var(--surface-raise); color: var(--text-primary); }
.btn-outline-warning:hover { background: color-mix(in srgb, var(--color-warning) 14%, transparent); }
.btn-outline-danger:hover { background: color-mix(in srgb, var(--color-danger) 14%, transparent); }

/* Delivery board cards: the action row wraps neatly on narrow columns. */
.kanban-card-delivery .btn { padding: 4px 10px; font-size: 12px; }
.lead-delivery-block { padding: 10px 12px; border: var(--hairline); border-radius: 12px; background: var(--surface-raise); }

/* Order lines editor (Mark as Order, Edit order details of CRM orders). */
.order-item-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px 88px 78px 24px; gap: 6px; align-items: center; margin-bottom: 6px; }
.order-item-head { margin-bottom: 4px; }
.order-item-total { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
    .order-item-row { grid-template-columns: minmax(0, 1fr) 54px 80px 24px; }
    .order-item-row .order-item-total, .order-item-head span:nth-child(4) { display: none; }
}
.order-item-row .form-control { padding-left: 10px; padding-right: 8px; min-width: 0; }