/* ==========================================================================
   SalesTree CRM – App-Like UI (Desktop + Mobile)
   Target: Django Unfold 0.30 admin theme (Tailwind-based)
   ========================================================================== */

/* ==========================================================================
   A. GLOBAL FOUNDATION – all screen sizes
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    max-width: 100vw !important;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: #f0f2f5 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.dark body {
    background: #0f172a !important;
}

/* Smooth transitions for all interactive elements */
a, button, input, select, textarea, [role="button"] {
    transition: all 0.15s ease-out;
}

/* Prevent anything from overflowing the viewport */
#container,
#content,
#content-main,
#main,
[id="main"],
.container,
main {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   B. DESKTOP STYLES (min-width: 769px)
   ========================================================================== */

/* -------------------------------------------------------
   B1. CONTENT AREA – card-based layout
   ------------------------------------------------------- */
@media (min-width: 769px) {
    #content {
        padding: 16px 24px !important;
    }

    #content-main {
        padding: 0 !important;
    }

    /* Page titles */
    #content h1,
    .content_title,
    #content-main h1 {
        font-size: 24px !important;
        font-weight: 700 !important;
        letter-spacing: -0.4px !important;
        color: #1e293b !important;
        margin-bottom: 12px !important;
    }

    .dark #content h1,
    .dark .content_title {
        color: #f1f5f9 !important;
    }
}

/* -------------------------------------------------------
   B2. INDEX / DASHBOARD – card modules
   ------------------------------------------------------- */
@media (min-width: 769px) {
    /* Each module section = card */
    #content-main .module,
    #content-main .app-crm,
    #content-main > table,
    #content-main > div {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        margin-bottom: 10px !important;
        overflow: hidden !important;
    }

    .dark #content-main .module,
    .dark #content-main .app-crm,
    .dark #content-main > table,
    .dark #content-main > div {
        background: #1e293b !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }

    /* Module caption = section header */
    #content-main caption,
    #content-main .module caption,
    #content-main h2 {
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: #64748b !important;
        padding: 16px 20px 10px !important;
        background: transparent !important;
        border: none !important;
    }

    .dark #content-main caption,
    .dark #content-main h2 {
        color: #94a3b8 !important;
    }

    /* Table cells in modules */
    #content-main table td,
    #content-main table th {
        padding: 10px 20px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .dark #content-main table td,
    .dark #content-main table th {
        border-bottom-color: #334155 !important;
    }

    /* Model links */
    #content-main table a {
        color: #1e293b !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }

    #content-main table a:hover {
        color: #4f46e5 !important;
    }

    .dark #content-main table a {
        color: #e2e8f0 !important;
    }

    .dark #content-main table a:hover {
        color: #a5b4fc !important;
    }

    /* Add/Change links – pill buttons */
    #content-main .changelink,
    #content-main .addlink {
        display: inline-block !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
        padding: 4px 12px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        margin-left: 6px !important;
        text-decoration: none !important;
        transition: background 0.15s ease !important;
    }

    #content-main .changelink:hover,
    #content-main .addlink:hover {
        background: #ddd6fe !important;
    }

    .dark #content-main .changelink,
    .dark #content-main .addlink {
        background: #312e81 !important;
        color: #a5b4fc !important;
    }

    .dark #content-main .changelink:hover,
    .dark #content-main .addlink:hover {
        background: #3730a3 !important;
    }

    /* Recent actions card */
    #recent-actions-module,
    .module.recent-actions {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        overflow: hidden !important;
    }

    .dark #recent-actions-module,
    .dark .module.recent-actions {
        background: #1e293b !important;
    }
}

/* -------------------------------------------------------
   B3. CHANGELIST – list views
   ------------------------------------------------------- */
@media (min-width: 769px) {
    /* Search bar rounded */
    #searchbar,
    [type="search"],
    input[name="q"] {
        padding: 10px 16px !important;
        border-radius: 10px !important;
        border: 1px solid #e2e8f0 !important;
        background: #fff !important;
        font-size: 14px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        transition: border-color 0.15s, box-shadow 0.15s !important;
    }

    #searchbar:focus,
    [type="search"]:focus,
    input[name="q"]:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
        outline: none !important;
    }

    .dark #searchbar,
    .dark [type="search"],
    .dark input[name="q"] {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #e2e8f0 !important;
    }

    /* Results wrapper = card */
    .results {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        overflow: hidden !important;
    }

    .dark .results {
        background: #1e293b !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }

    /* Table rows hover */
    #result_list tbody tr {
        transition: background 0.1s ease !important;
    }

    #result_list tbody tr:hover {
        background: #f8fafc !important;
    }

    .dark #result_list tbody tr:hover {
        background: #334155 !important;
    }

    /* Filters card */
    #changelist-filter {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        padding: 16px !important;
    }

    .dark #changelist-filter {
        background: #1e293b !important;
    }

    /* Pagination – pill-style */
    .paginator a,
    .pagination a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
        transition: background 0.15s !important;
    }

    .paginator a:hover,
    .pagination a:hover {
        background: #eef2ff !important;
    }

    /* Actions bar card */
    .actions,
    .changelist-form-container .actions,
    #changelist-form .actions {
        background: #fff !important;
        border-radius: 12px !important;
        padding: 12px 16px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        margin-bottom: 12px !important;
    }

    .dark .actions,
    .dark .changelist-form-container .actions,
    .dark #changelist-form .actions {
        background: #1e293b !important;
    }

    .actions select {
        border-radius: 8px !important;
        padding: 8px 12px !important;
        border: 1px solid #e2e8f0 !important;
    }

    .actions button,
    .actions input[type="submit"] {
        border-radius: 8px !important;
        padding: 8px 16px !important;
        font-weight: 600 !important;
    }
}

/* -------------------------------------------------------
   B4. CHANGE FORM – card fieldsets
   ------------------------------------------------------- */
@media (min-width: 769px) {
    /* Each fieldset = card */
    fieldset,
    .module,
    .inline-group {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        margin-bottom: 10px !important;
        padding: 16px 20px !important;
        border: none !important;
    }

    /* Collapse empty fieldsets (read-only with no visible fields) */
    fieldset:not(:has(.form-row)):not(:has(table)):not(:has(.inline-related)) {
        padding: 12px 20px !important;
        margin-bottom: 8px !important;
    }

    .dark fieldset,
    .dark .module,
    .dark .inline-group {
        background: #1e293b !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }

    /* Fieldset legends / headings = section title */
    fieldset h2,
    fieldset legend,
    .inline-group h2 {
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: #64748b !important;
        margin-bottom: 12px !important;
        margin-top: 0 !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .dark fieldset h2,
    .dark fieldset legend,
    .dark .inline-group h2 {
        color: #94a3b8 !important;
        border-bottom-color: #334155 !important;
    }

    /* Labels */
    .form-row label,
    .field-box label {
        font-weight: 600;
        font-size: 13px !important;
        color: #475569 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }

    .dark .form-row label,
    .dark .field-box label {
        color: #94a3b8 !important;
    }

    /* Inputs – rounded with consistent styling */
    .form-row input[type="text"],
    .form-row input[type="email"],
    .form-row input[type="url"],
    .form-row input[type="number"],
    .form-row input[type="tel"],
    .form-row input[type="date"],
    .form-row input[type="datetime-local"],
    .form-row textarea,
    .form-row select,
    .vTextField,
    .vURLField,
    .vIntegerField,
    .vDateField {
        padding: 9px 14px !important;
        border-radius: 10px !important;
        border: 1px solid #d1d5db !important;
        background: #f9fafb !important;
        font-size: 14px !important;
        transition: border-color 0.15s, box-shadow 0.15s !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .dark .form-row input,
    .dark .form-row select,
    .dark .form-row textarea,
    .dark .vTextField,
    .dark .vURLField {
        background: #0f172a !important;
        border-color: #334155 !important;
        color: #e2e8f0 !important;
    }

    /* Focus ring – subtle */
    .form-row input:focus,
    .form-row select:focus,
    .form-row textarea:focus,
    .vTextField:focus,
    .vURLField:focus {
        outline: none !important;
        border-color: #818cf8 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08) !important;
    }

    /* Form rows spacing */
    .form-row {
        margin-bottom: 10px !important;
    }

    /* Help text */
    .help {
        font-size: 12px !important;
        color: #94a3b8 !important;
        margin-top: 4px;
    }

    /* Read-only fields */
    .readonly,
    .form-row .readonly {
        background: #f1f5f9 !important;
        padding: 9px 14px !important;
        border-radius: 10px !important;
        border: 1px solid #e2e8f0 !important;
        font-size: 14px !important;
    }

    .dark .readonly,
    .dark .form-row .readonly {
        background: #0f172a !important;
        border-color: #334155 !important;
    }

    /* Select2 / Autocomplete */
    .select2-container,
    .select2-container--default {
        max-width: 100% !important;
    }

    /* FK selects (Account Manager etc) – full width */
    .form-row select,
    .related-widget-wrapper select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Related widget wrapper – keep icons inline */
    .related-widget-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .related-widget-wrapper select {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Override Unfold's max-w-2xl on FK select wrapper so it fills the row */
    .related-widget-wrapper > div,
    .related-widget-wrapper .grow {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Ensure the outer wrapper of FK fields is full width */
    .flex-col.items-center.w-full,
    div[data-model-ref] {
        width: 100% !important;
    }
}

/* -------------------------------------------------------
   B5. SUBMIT ROW – styled action bar
   ------------------------------------------------------- */
@media (min-width: 769px) {
    .submit-row,
    [class*="submit-row"] {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        padding: 16px 24px !important;
        gap: 10px !important;
    }

    .dark .submit-row,
    .dark [class*="submit-row"] {
        background: #1e293b !important;
    }

    .submit-row input[type="submit"],
    .submit-row button {
        padding: 10px 24px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        border: none !important;
        font-size: 14px !important;
        transition: all 0.15s ease !important;
    }

    /* Save = indigo */
    .submit-row input[name="_save"],
    .submit-row input.default {
        background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25) !important;
    }

    .submit-row input[name="_save"]:hover,
    .submit-row input.default:hover {
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
        transform: translateY(-1px) !important;
    }

    .submit-row input[name="_save"]:active,
    .submit-row input.default:active {
        transform: translateY(0) scale(0.98) !important;
    }

    /* Secondary buttons – outline */
    .submit-row input[name="_continue"],
    .submit-row input[name="_addanother"] {
        background: #fff !important;
        color: #4f46e5 !important;
        border: 1.5px solid #c7d2fe !important;
    }

    .submit-row input[name="_continue"]:hover,
    .submit-row input[name="_addanother"]:hover {
        background: #eef2ff !important;
    }

    .dark .submit-row input[name="_continue"],
    .dark .submit-row input[name="_addanother"] {
        background: #0f172a !important;
        color: #a5b4fc !important;
        border-color: #4338ca !important;
    }

    /* Delete button – red */
    .submit-row .deletelink,
    .submit-row a.deletelink {
        background: #fef2f2 !important;
        color: #dc2626 !important;
        border: 1.5px solid #fecaca !important;
        padding: 10px 20px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
    }

    .submit-row .deletelink:hover {
        background: #fee2e2 !important;
    }

    .dark .submit-row .deletelink {
        background: #450a0a !important;
        color: #fca5a5 !important;
        border-color: #7f1d1d !important;
    }

    /* Object tools (History, View on site) */
    .object-tools a {
        border-radius: 8px !important;
        padding: 8px 14px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
    }

    .object-tools a:hover {
        transform: translateY(-1px) !important;
    }
}

/* -------------------------------------------------------
   B6. DESKTOP INLINE TABLES – styled
   ------------------------------------------------------- */
@media (min-width: 769px) {
    .inline-group .tabular {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }

    .inline-group .tabular table {
        width: 100% !important;
        table-layout: auto !important;
    }

    .inline-group .tabular th {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #64748b !important;
        padding: 10px 12px !important;
        background: #f8fafc !important;
        border-bottom: 2px solid #e2e8f0 !important;
        white-space: nowrap !important;
    }

    .dark .inline-group .tabular th {
        background: #0f172a !important;
        color: #94a3b8 !important;
        border-bottom-color: #334155 !important;
    }

    .inline-group .tabular td {
        padding: 8px 12px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 14px !important;
    }

    .dark .inline-group .tabular td {
        border-bottom-color: #334155 !important;
    }

    .inline-group .tabular tbody tr:hover {
        background: #f8fafc !important;
    }

    .dark .inline-group .tabular tbody tr:hover {
        background: #334155 !important;
    }

    .inline-group .tabular td input,
    .inline-group .tabular td select,
    .inline-group .tabular td textarea {
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        padding: 6px 10px !important;
        font-size: 14px !important;
        background: #f9fafb !important;
        transition: border-color 0.15s, box-shadow 0.15s !important;
    }

    .inline-group .tabular td input:focus,
    .inline-group .tabular td select:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12) !important;
        outline: none !important;
    }

    /* Add row – accent button */
    .inline-group .add-row a {
        display: inline-block !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
        padding: 8px 20px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        text-decoration: none !important;
        transition: background 0.15s !important;
    }

    .inline-group .add-row a:hover {
        background: #ddd6fe !important;
    }

    .dark .inline-group .add-row a {
        background: #312e81 !important;
        color: #a5b4fc !important;
    }
}

/* -------------------------------------------------------
   B7. DESKTOP MESSAGES – toast style
   ------------------------------------------------------- */
@media (min-width: 769px) {
    .messagelist li,
    ul.messagelist li {
        border-radius: 10px !important;
        padding: 12px 20px !important;
        font-weight: 500 !important;
        margin-bottom: 8px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    }

    .messagelist .success {
        background: #ecfdf5 !important;
        color: #065f46 !important;
        border-left: 4px solid #10b981 !important;
    }

    .dark .messagelist .success {
        background: #064e3b !important;
        color: #6ee7b7 !important;
    }

    .messagelist .error {
        background: #fef2f2 !important;
        color: #991b1b !important;
        border-left: 4px solid #ef4444 !important;
    }

    .messagelist .warning {
        background: #fffbeb !important;
        color: #92400e !important;
        border-left: 4px solid #f59e0b !important;
    }

    .messagelist .info {
        background: #eff6ff !important;
        color: #1e40af !important;
        border-left: 4px solid #3b82f6 !important;
    }
}

/* -------------------------------------------------------
   B8. DESKTOP BREADCRUMBS
   ------------------------------------------------------- */
@media (min-width: 769px) {
    .breadcrumbs a,
    nav[aria-label="breadcrumb"] a {
        color: #6366f1 !important;
        text-decoration: none !important;
    }

    .breadcrumbs a:hover,
    nav[aria-label="breadcrumb"] a:hover {
        color: #4338ca !important;
        text-decoration: underline !important;
    }
}

/* -------------------------------------------------------
   B9. DESKTOP SELECT2
   ------------------------------------------------------- */
@media (min-width: 769px) {
    .select2-dropdown {
        border-radius: 10px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid #e2e8f0 !important;
        overflow: hidden !important;
    }

    .select2-results__option {
        padding: 10px 14px !important;
    }

    .select2-results__option--highlighted {
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }
}

/* ==========================================================================
   B10. BADGES – pill style (all sizes)
   ========================================================================== */
.type-badge,
.status-badge,
span[class*="badge"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
    border-radius: 12px !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   C. SIDEBAR NAVIGATION – app-like styling
   ========================================================================== */

/* Sidebar background */
#nav-sidebar,
#nav-sidebar-inner {
    background: #f8fafc !important;
}

.dark #nav-sidebar,
.dark #nav-sidebar-inner {
    background: #0f172a !important;
}

/* App group headers – clean section labels */
#nav-sidebar-apps h2,
#nav-sidebar h2 {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #64748b !important;
    background: transparent !important;
    padding: 10px 16px 6px !important;
    margin: 4px 0 2px !important;
    border: none !important;
}

.dark #nav-sidebar-apps h2,
.dark #nav-sidebar h2 {
    color: #94a3b8 !important;
}

/* Model links – clean rounded items */
#nav-sidebar-apps ol a,
#nav-sidebar ol a {
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin: 1px 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.12s ease !important;
}

#nav-sidebar-apps ol a:hover,
#nav-sidebar ol a:hover {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.dark #nav-sidebar-apps ol a,
.dark #nav-sidebar ol a {
    color: #cbd5e1 !important;
}

.dark #nav-sidebar-apps ol a:hover,
.dark #nav-sidebar ol a:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #a5b4fc !important;
}

/* Active link */
#nav-sidebar-apps ol a.active,
#nav-sidebar ol a.active,
#nav-sidebar-apps ol a[class*="active"],
#nav-sidebar ol a[class*="active"] {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    font-weight: 600 !important;
}

.dark #nav-sidebar-apps ol a.active,
.dark #nav-sidebar ol a.active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
}

/* Search input in sidebar */
#nav-sidebar #nav-filter,
#nav-sidebar input[type="search"],
#nav-sidebar [name="s"] {
    border-radius: 10px !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
}

/* Sidebar border & separator lines */
#nav-sidebar {
    border-right: 1px solid #e2e8f0 !important;
}

.dark #nav-sidebar {
    border-right-color: #1e293b !important;
}

#nav-sidebar-apps hr {
    border-color: #e2e8f0 !important;
    margin: 6px 16px !important;
}

.dark #nav-sidebar-apps hr {
    border-color: #1e293b !important;
}

/* Chevron icon in group headers */
#nav-sidebar-apps h2 .material-symbols-outlined,
#nav-sidebar h2 .material-symbols-outlined {
    color: #94a3b8 !important;
    font-size: 18px !important;
}

/* Nav item icons */
#nav-sidebar-apps ol a .material-symbols-outlined,
#nav-sidebar ol a .material-symbols-outlined {
    font-size: 18px !important;
    color: #94a3b8 !important;
}

#nav-sidebar-apps ol a:hover .material-symbols-outlined,
#nav-sidebar ol a:hover .material-symbols-outlined,
#nav-sidebar-apps ol a.active .material-symbols-outlined,
#nav-sidebar ol a.active .material-symbols-outlined {
    color: #6366f1 !important;
}

/* Sidebar user section at bottom */
#nav-sidebar-inner > div:last-child {
    border-top: 1px solid #e2e8f0 !important;
}

.dark #nav-sidebar-inner > div:last-child {
    border-top-color: #1e293b !important;
}

/* ==========================================================================
   C3. MODERN REFRESH LAYER (safe overrides)
   ========================================================================== */

:root {
    --st-accent: #0f6fec;
    --st-accent-2: #14b8a6;
    --st-card-radius: 16px;
    --st-card-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(15, 23, 42, 0.04);
}

body {
    background:
        radial-gradient(1200px 500px at 0% -10%, rgba(20, 184, 166, 0.08), transparent 60%),
        radial-gradient(900px 380px at 100% -20%, rgba(15, 111, 236, 0.08), transparent 58%),
        #eef2f7 !important;
}

.dark body {
    background:
        radial-gradient(1000px 450px at 0% -10%, rgba(20, 184, 166, 0.14), transparent 60%),
        radial-gradient(800px 320px at 100% -20%, rgba(37, 99, 235, 0.18), transparent 58%),
        #0b1220 !important;
}

/* Make major containers feel less flat */
fieldset,
.module,
.inline-group,
.results,
.actions,
#changelist-filter,
.submit-row,
#recent-actions-module {
    border-radius: var(--st-card-radius) !important;
    box-shadow: var(--st-card-shadow) !important;
}

/* Better depth hierarchy for the header area */
#header,
header {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Premium interaction feel */
.module,
fieldset,
.inline-group,
.results {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.module:hover,
fieldset:hover,
.inline-group:hover,
.results:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09), 0 1px 0 rgba(15, 23, 42, 0.05) !important;
}

/* Stronger primary action styling */
.submit-row input[name="_save"],
.submit-row input.default,
.button.default,
button[type="submit"] {
    background: linear-gradient(135deg, var(--st-accent), #2563eb 52%, var(--st-accent-2)) !important;
    color: #fff !important;
    border: none !important;
}

/* Sticky table headers improve large forms and changelists */
.results thead th,
.inline-group .tabular thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Softer inputs with better contrast */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="number"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row textarea,
.form-row select,
.vTextField,
.vURLField,
.vIntegerField,
.vDateField {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
}

.dark .form-row input,
.dark .form-row textarea,
.dark .form-row select,
.dark .vTextField,
.dark .vURLField,
.dark .vIntegerField,
.dark .vDateField {
    background: #0f172a !important;
    border-color: #334155 !important;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.vTextField:focus,
.vURLField:focus {
    border-color: var(--st-accent) !important;
    box-shadow: 0 0 0 3px rgba(15, 111, 236, 0.14) !important;
}

/* Nicer scrollbar for desktop */
@media (min-width: 769px) {
    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    *::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    .dark *::-webkit-scrollbar-thumb {
        background: #475569;
        background-clip: content-box;
    }
}

/* Respect reduced motion settings */
@media (prefers-reduced-motion: reduce) {
    .module,
    fieldset,
    .inline-group,
    .results,
    a,
    button,
    input,
    select,
    textarea {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   C2. HORIZONTAL SCROLL – data tables (all sizes)
   ========================================================================== */
.results,
#result_list,
[class*="overflow-x"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
}

/* ==========================================================================
   D. MOBILE STYLES (max-width: 768px)
   ========================================================================== */

/* -------------------------------------------------------
   D1. SIDEBAR – mobile layout
   ------------------------------------------------------- */
@media (max-width: 1279px) {
    /* Mobile sidebar: ensure proper z-index when open */
    #nav-sidebar {
        z-index: 60 !important;
    }

    #main,
    [id="main"] {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Single column on tablet too */
    .form-row,
    fieldset .form-row,
    .field-box {
        display: block !important;
        width: 100% !important;
    }

    .form-row input[type="text"],
    .form-row input[type="email"],
    .form-row input[type="url"],
    .form-row input[type="number"],
    .form-row input[type="tel"],
    .form-row input[type="date"],
    .form-row input[type="datetime-local"],
    .form-row textarea,
    .form-row select,
    .vTextField,
    .vURLField,
    .vIntegerField,
    .vDateField {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .select2-container,
    .select2-container--default {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Unfold grid columns → single column */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    [class*="md:grid-cols-2"],
    [class*="md:grid-cols-3"],
    [class*="lg:grid-cols-2"],
    [class*="lg:grid-cols-3"] {
        grid-template-columns: 1fr !important;
    }

    /* Actions bar wrap */
    .actions,
    .changelist-form-container .actions,
    #changelist-form .actions {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    #result_list th,
    #result_list td,
    .results table th,
    .results table td {
        padding: 8px 10px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
}

/* -------------------------------------------------------
   D2. MOBILE HEADER – sticky with blur
   ------------------------------------------------------- */
@media (max-width: 768px) {
    #header,
    [id="header"],
    header,
    .border-b {
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        backdrop-filter: blur(12px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        padding: 8px 12px !important;
    }

    .dark #header,
    .dark [id="header"],
    .dark header,
    .dark .border-b {
        background: rgba(15, 23, 42, 0.92) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    header .flex,
    .border-b .flex {
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }

    #language-switcher,
    select[name="language"] {
        font-size: 12px !important;
        padding: 4px 8px !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
    }

    #user-tools,
    .flex.items-center.ml-auto {
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 13px !important;
    }
}

/* -------------------------------------------------------
   D3. MOBILE BREADCRUMBS
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .breadcrumbs,
    nav[aria-label="breadcrumb"] {
        font-size: 11px !important;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 6px 14px !important;
        background: transparent !important;
        border: none !important;
    }
}

/* -------------------------------------------------------
   D4. MOBILE PAGE TITLE
   ------------------------------------------------------- */
@media (max-width: 768px) {
    #content h1,
    .content_title,
    #content-main h1 {
        font-size: 22px !important;
        font-weight: 700 !important;
        letter-spacing: -0.3px !important;
        word-break: break-word;
        padding: 0 14px !important;
        margin: 8px 0 4px !important;
    }
}

/* -------------------------------------------------------
   D5. MOBILE INDEX / DASHBOARD
   ------------------------------------------------------- */
@media (max-width: 768px) {
    #content-main {
        padding: 8px !important;
    }

    #content-main .module,
    #content-main .app-crm,
    #content-main > table,
    #content-main > div {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .dark #content-main .module,
    .dark #content-main .app-crm,
    .dark #content-main > table,
    .dark #content-main > div {
        background: #1e293b !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }

    #content-main caption,
    #content-main .module caption,
    #content-main h2 {
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: #64748b !important;
        padding: 14px 16px 8px !important;
        background: transparent !important;
        border: none !important;
    }

    .dark #content-main caption,
    .dark #content-main h2 {
        color: #94a3b8 !important;
    }

    #content-main table {
        table-layout: auto !important;
        width: 100% !important;
    }

    #content-main table td,
    #content-main table th {
        white-space: normal !important;
        word-break: break-word !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .dark #content-main table td,
    .dark #content-main table th {
        border-bottom-color: #334155 !important;
    }

    #content-main table a {
        white-space: nowrap !important;
        color: #1e293b !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }

    .dark #content-main table a {
        color: #e2e8f0 !important;
    }

    #content-main table td a:not(:first-child),
    #content-main .changelink,
    #content-main .addlink {
        display: inline-block !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        margin-left: 4px !important;
    }

    .dark #content-main table td a:not(:first-child),
    .dark #content-main .changelink,
    .dark #content-main .addlink {
        background: #312e81 !important;
        color: #a5b4fc !important;
    }

    #recent-actions-module,
    .module.recent-actions {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        overflow: hidden !important;
    }

    .dark #recent-actions-module,
    .dark .module.recent-actions {
        background: #1e293b !important;
    }
}

/* -------------------------------------------------------
   D6. MOBILE CHANGELIST
   ------------------------------------------------------- */
@media (max-width: 768px) {
    #toolbar {
        padding: 8px 12px !important;
    }

    #searchbar,
    [type="search"],
    input[name="q"] {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
    }

    .dark #searchbar,
    .dark [type="search"],
    .dark input[name="q"] {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #e2e8f0 !important;
    }

    #changelist-filter {
        width: 100% !important;
        margin: 0 0 16px !important;
        background: #fff !important;
        border-radius: 14px !important;
        padding: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box !important;
    }

    .dark #changelist-filter {
        background: #1e293b !important;
    }

    .results,
    #result_list {
        background: #fff !important;
        border-radius: 14px !important;
        margin: 0 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        overflow: hidden !important;
    }

    .dark .results,
    .dark #result_list {
        background: #1e293b !important;
    }

    #result_list,
    .results table {
        font-size: 13px;
    }

    .paginator,
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        font-size: 13px !important;
        padding: 12px !important;
    }

    .paginator a,
    .pagination a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        font-weight: 500 !important;
    }

    .xfull,
    .date-hierarchy {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* -------------------------------------------------------
   D7. MOBILE CHANGE FORM
   ------------------------------------------------------- */
@media (max-width: 768px) {
    #content {
        padding: 8px !important;
    }

    fieldset,
    .module,
    .inline-group {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06),
                    0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        margin-bottom: 12px !important;
        padding: 16px !important;
        border: none !important;
        overflow: hidden !important;
    }

    .dark fieldset,
    .dark .module,
    .dark .inline-group {
        background: #1e293b !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }

    fieldset h2,
    fieldset legend,
    .inline-group h2 {
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: #64748b !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .dark fieldset h2,
    .dark fieldset legend,
    .dark .inline-group h2 {
        color: #94a3b8 !important;
        border-bottom-color: #334155 !important;
    }

    .form-row label,
    .field-box label {
        display: block !important;
        margin-bottom: 6px;
        font-weight: 600;
        font-size: 13px !important;
        color: #475569 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }

    .dark .form-row label,
    .dark .field-box label {
        color: #94a3b8 !important;
    }

    .form-row input[type="text"],
    .form-row input[type="email"],
    .form-row input[type="url"],
    .form-row input[type="number"],
    .form-row input[type="tel"],
    .form-row input[type="date"],
    .form-row input[type="datetime-local"],
    .form-row input,
    .form-row select,
    .form-row textarea {
        min-height: 44px;
        font-size: 16px !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        border: 1px solid #d1d5db !important;
        background: #f9fafb !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
    }

    .dark .form-row input,
    .dark .form-row select,
    .dark .form-row textarea {
        background: #0f172a !important;
        border-color: #334155 !important;
        color: #e2e8f0 !important;
    }

    .form-row input:focus,
    .form-row select:focus,
    .form-row textarea:focus {
        outline: none !important;
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    }

    .form-row {
        margin-bottom: 14px !important;
        padding: 0 !important;
        border: none !important;
    }

    .help {
        font-size: 12px !important;
        color: #94a3b8 !important;
        word-break: break-word;
        margin-top: 4px;
    }

    .readonly,
    .form-row .readonly {
        background: #f1f5f9 !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        border: 1px solid #e2e8f0 !important;
        font-size: 15px !important;
    }

    .dark .readonly,
    .dark .form-row .readonly {
        background: #1e293b !important;
        border-color: #334155 !important;
    }
}

/* -------------------------------------------------------
   D8. MOBILE SUBMIT ROW – floating bottom bar
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .submit-row,
    [class*="submit-row"] {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 998 !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        margin: 0 -8px !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important;
    }

    .dark .submit-row,
    .dark [class*="submit-row"] {
        background: rgba(15, 23, 42, 0.95) !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
    }

    .submit-row input[type="submit"],
    .submit-row button {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        border: none !important;
        cursor: pointer !important;
    }

    .submit-row input[name="_save"],
    .submit-row input.default {
        background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
    }

    .submit-row input[name="_save"]:active,
    .submit-row input.default:active {
        transform: scale(0.98) !important;
    }

    .submit-row input[name="_continue"],
    .submit-row input[name="_addanother"] {
        background: #fff !important;
        color: #4f46e5 !important;
        border: 1.5px solid #c7d2fe !important;
    }

    .dark .submit-row input[name="_continue"],
    .dark .submit-row input[name="_addanother"] {
        background: #1e293b !important;
        color: #a5b4fc !important;
        border-color: #4338ca !important;
    }

    .submit-row .deletelink,
    .submit-row a.deletelink {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        background: #fef2f2 !important;
        color: #dc2626 !important;
        border: 1.5px solid #fecaca !important;
    }

    .dark .submit-row .deletelink {
        background: #450a0a !important;
        color: #fca5a5 !important;
        border-color: #7f1d1d !important;
    }

    .object-tools {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 14px 8px !important;
    }

    .object-tools li {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .object-tools a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 8px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
        background: #f1f5f9 !important;
        color: #475569 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    .dark .object-tools a {
        background: #334155 !important;
        color: #cbd5e1 !important;
    }
}

/* -------------------------------------------------------
   D9. MOBILE TABULAR INLINES – card layout
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .inline-group .tabular,
    .inline-group .tabular table,
    .inline-group .tabular thead,
    .inline-group .tabular tbody,
    .inline-group .tabular tr,
    .inline-group .tabular th,
    .inline-group .tabular td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .inline-group .tabular {
        padding: 0 !important;
    }

    .inline-group .tabular thead {
        display: none !important;
    }

    .inline-group .tabular tbody tr {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 12px 16px !important;
        margin: 8px 12px 12px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }

    .dark .inline-group .tabular tbody tr {
        background: #0f172a !important;
        border-color: #334155 !important;
    }

    .inline-group .tabular td {
        display: flex !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 15px !important;
        text-align: left !important;
        position: static !important;
        padding-left: 0 !important;
    }

    .dark .inline-group .tabular td {
        border-bottom-color: #1e293b !important;
    }

    .inline-group .tabular td:last-child {
        border-bottom: none !important;
    }

    .inline-group .tabular td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 100px;
        flex-shrink: 0;
        margin-right: 12px;
        position: static !important;
        width: auto !important;
    }

    .dark .inline-group .tabular td::before {
        color: #94a3b8;
    }

    .inline-group .tabular td:not([data-label])::before,
    .inline-group .tabular td[data-label=""]::before {
        display: none !important;
    }

    .inline-group .tabular td.original {
        display: none !important;
    }

    .inline-group .tabular td.delete {
        justify-content: center !important;
        padding-top: 10px !important;
        border-bottom: none !important;
    }

    .inline-group .tabular td.delete::before {
        display: none !important;
    }

    .inline-group .tabular td input,
    .inline-group .tabular td select,
    .inline-group .tabular td textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        padding: 8px 10px !important;
    }

    .inline-group .add-row,
    .inline-group .tabular .add-row {
        text-align: center !important;
        padding: 14px 12px !important;
    }

    .inline-group .add-row a,
    .inline-group .tabular .add-row a {
        display: inline-block !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
        padding: 10px 24px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }

    .dark .inline-group .add-row a {
        background: #312e81 !important;
        color: #a5b4fc !important;
    }
}

/* -------------------------------------------------------
   D10. MOBILE BADGES
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .type-badge,
    .status-badge,
    span[class*="badge"] {
        font-size: 11px !important;
        padding: 3px 10px !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
    }
}

/* -------------------------------------------------------
   D11. MOBILE MODALS
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .popup #container {
        width: 100% !important;
        padding: 8px !important;
    }

    .select2-dropdown {
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        border: none !important;
        overflow: hidden !important;
    }

    .select2-results__option {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }
}

/* -------------------------------------------------------
   D12. MOBILE ACTIONS BAR
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .actions,
    .changelist-form-container .actions,
    #changelist-form .actions {
        background: #fff !important;
        border-radius: 12px !important;
        padding: 12px !important;
        margin: 8px 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .dark .actions,
    .dark .changelist-form-container .actions,
    .dark #changelist-form .actions {
        background: #1e293b !important;
    }

    .actions select {
        border-radius: 8px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    .actions button,
    .actions input[type="submit"] {
        border-radius: 10px !important;
        padding: 10px 16px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }
}

/* -------------------------------------------------------
   D13. MOBILE MESSAGES – toast style
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .messagelist,
    ul.messagelist {
        padding: 0 8px !important;
        margin: 8px 0 !important;
    }

    .messagelist li,
    ul.messagelist li {
        border-radius: 12px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        margin-bottom: 8px !important;
    }

    .messagelist .success {
        background: #ecfdf5 !important;
        color: #065f46 !important;
        border-left: 4px solid #10b981 !important;
    }

    .dark .messagelist .success {
        background: #064e3b !important;
        color: #6ee7b7 !important;
    }

    .messagelist .error {
        background: #fef2f2 !important;
        color: #991b1b !important;
        border-left: 4px solid #ef4444 !important;
    }

    .messagelist .warning {
        background: #fffbeb !important;
        color: #92400e !important;
        border-left: 4px solid #f59e0b !important;
    }

    .messagelist .info {
        background: #eff6ff !important;
        color: #1e40af !important;
        border-left: 4px solid #3b82f6 !important;
    }
}

/* ==========================================================================
   E. ACCESSIBILITY – touch targets (touch devices)
   ========================================================================== */
@media (pointer: coarse) {
    a, button, [role="button"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    #result_list input[type="checkbox"],
    .action-select {
        transform: scale(1.3);
        margin: 6px;
    }
}

/* ==========================================================================
   F. SAFE AREAS (notch devices / iOS)
   ========================================================================== */
@supports (padding: env(safe-area-inset-left)) {
    @media (max-width: 768px) {
        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            padding-bottom: env(safe-area-inset-bottom);
        }

        .submit-row,
        [class*="submit-row"] {
            padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ==========================================================================
   G. ANIMATIONS – subtle feedback (all sizes)
   ========================================================================== */

/* Card press on mobile */
@media (max-width: 768px) {
    .inline-group .tabular tbody tr:active,
    #content-main table tr:active {
        transform: scale(0.99);
        transition: transform 0.1s ease-out;
    }

    .submit-row input:active,
    .submit-row button:active,
    .object-tools a:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s ease-out !important;
    }

    #content-main table a:active {
        opacity: 0.6;
    }
}

/* ==========================================================================
   H. PRINT
   ========================================================================== */
@media print {
    nav, aside, .sidebar,
    .object-tools, .submit-row,
    .breadcrumbs, #toolbar,
    .actions, .paginator {
        display: none !important;
    }

    body { font-size: 12pt; background: #fff; color: #000; }
    #main, #content, .results { width: 100% !important; margin: 0 !important; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }
}