/*
 * PAX CRM production interface, 2026-08-23.
 * Compact, system-font enterprise layer. This stylesheet intentionally does
 * not target the self-contained invoice PDF/template views.
 */

:root {
    --prod-canvas: #f4f6f8;
    --prod-surface: #ffffff;
    --prod-surface-muted: #f8fafc;
    --prod-border: #dfe4ea;
    --prod-border-strong: #cbd3dd;
    --prod-text: #172033;
    --prod-text-muted: #657184;
    --prod-navy: #111a2b;
    --prod-navy-soft: #1a263b;
    --prod-blue: #2358d4;
    --prod-blue-hover: #1949b7;
    --prod-blue-soft: #edf3ff;
    --prod-green: #087a55;
    --prod-amber: #9a5b08;
    --prod-red: #b42331;
    --prod-radius: 9px;
    --prod-radius-sm: 7px;
    --prod-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    --prod-motion-fast: 140ms;
    --prod-motion-base: 190ms;
    --prod-motion-slow: 240ms;
    --prod-motion-ease: cubic-bezier(.2, .75, .25, 1);
    --mx-sidebar-w: 216px;
    --mx-sidebar-collapsed-w: 64px;
    --mx-topbar-h: 56px;
    --mx-gap: 14px;
    --mx-pad-card: 14px;
    --mx-control-h: 34px;
    --mx-control-h-sm: 30px;
    --mx-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --mx-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --mx-font-data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html[data-crm-theme="dark"] {
    --prod-canvas: #0c111b;
    --prod-surface: #131a26;
    --prod-surface-muted: #182130;
    --prod-border: #273346;
    --prod-border-strong: #37455a;
    --prod-text: #edf1f7;
    --prod-text-muted: #9aa7ba;
    --prod-navy: #080c14;
    --prod-navy-soft: #121c2b;
    --prod-blue: #7898ff;
    --prod-blue-hover: #95adff;
    --prod-blue-soft: rgba(120, 152, 255, .14);
}

html {
    color-scheme: light;
    font-size: 13px;
}

html[data-crm-theme="dark"] { color-scheme: dark; }

body.crm-app-body,
body.crm-auth-body {
    margin: 0;
    background: var(--prod-canvas) !important;
    color: var(--prod-text) !important;
    font-family: var(--mx-font-body) !important;
    font-size: 13px;
    letter-spacing: 0;
}

body.crm-app-body h1,
body.crm-app-body h2,
body.crm-app-body h3,
.crm-page-title,
.mx-display {
    font-family: var(--mx-font-body) !important;
    letter-spacing: -.015em !important;
}

*:focus-visible {
    outline: 2px solid var(--prod-blue) !important;
    outline-offset: 2px !important;
}

.crm-shell { --crm-sidebar-width: var(--mx-sidebar-w) !important; }
html[data-crm-sidebar="collapsed"] .crm-shell { --crm-sidebar-width: var(--mx-sidebar-collapsed-w) !important; }

/* Application rail */
.crm-sidebar,
.crm-sidebar-v3 {
    width: var(--crm-sidebar-width) !important;
    background: var(--prod-navy) !important;
    border-right: 1px solid rgba(255, 255, 255, .07) !important;
    color: #d8dfeb !important;
    box-shadow: none !important;
}

.crm-sidebar::after { display: none !important; }

.crm-sidebar-brandbar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 10px 0 12px !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
}

.crm-brand-lockup { min-width: 0; gap: 9px !important; }
.crm-brand-lockup:hover { opacity: 1 !important; }
.crm-brand-logo {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 7px !important;
    background: var(--prod-blue) !important;
    color: #fff !important;
    font-size: 11px !important;
    transform: none !important;
}
.crm-brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px !important; }
.crm-brand-kicker { color: #7f8ba0 !important; font-size: 7px !important; letter-spacing: .12em !important; }
.crm-brand-title,
.crm-brand-title-dark { max-width: 132px; color: #f4f7fb !important; font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-sidebar-collapse {
    width: 26px !important;
    height: 26px !important;
    border-color: rgba(255, 255, 255, .11) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #9da9bb !important;
}
.crm-sidebar-collapse:hover { color: #fff !important; background: rgba(255,255,255,.10) !important; }

.crm-sidebar-workspace {
    margin: 9px 9px 7px !important;
    padding: 8px 9px !important;
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.035) !important;
}
.crm-sidebar-workspace:hover { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; }
.crm-workspace-mark { width: 25px !important; height: 25px !important; border: 0 !important; background: rgba(255,255,255,.07) !important; color: #aeb9ca !important; }
.crm-workspace-copy span { color: #75839a !important; font-size: 7px !important; }
.crm-workspace-copy strong { color: #e6ebf3 !important; font-size: 10px !important; }
.crm-workspace-status { width: 6px !important; height: 6px !important; animation: none !important; }

.crm-sidebar-quick-actions { padding: 0 9px 8px !important; }
.crm-sidebar-create {
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    background: var(--prod-blue) !important;
    font-size: 11px !important;
    box-shadow: none !important;
    transform: none !important;
}
.crm-sidebar-create::before { display: none !important; }
.crm-sidebar-create:hover { background: var(--prod-blue-hover) !important; transform: none !important; box-shadow: none !important; }

.sidebar-scroll { padding: 2px 8px 9px !important; scrollbar-color: #36445c transparent; }
.crm-nav-group { margin-bottom: 10px !important; }
.sidebar-section-label { margin: 0 !important; padding: 7px 8px 4px !important; color: #718096 !important; font-size: 7.5px !important; letter-spacing: .13em !important; }
.crm-nav-items { gap: 1px !important; }
.sidebar-link,
.crm-nav-items > a {
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    gap: 9px !important;
    border-radius: 6px !important;
    color: #aeb9ca !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    transform: none !important;
}
.sidebar-link::before,
.crm-nav-items > a::before { display: none !important; }
.sidebar-link:hover,
.crm-nav-items > a:hover { padding-left: 9px !important; background: rgba(255,255,255,.06) !important; color: #f5f7fb !important; }
.sidebar-link.active,
.sidebar-link[aria-current="page"],
.crm-nav-items > a.active,
.crm-nav-items > a[aria-current="page"] {
    padding-left: 9px !important;
    background: var(--prod-navy-soft) !important;
    color: #fff !important;
    box-shadow: inset 2px 0 0 #6f91ff !important;
}
.sidebar-link svg,
.crm-nav-items > a svg { width: 15px !important; height: 15px !important; color: #8997ab !important; opacity: 1 !important; transform: none !important; }
.sidebar-link.active svg,
.crm-nav-items > a.active svg { color: #8eabff !important; }

.sidebar-footer { padding: 8px !important; background: var(--prod-navy) !important; border-top-color: rgba(255,255,255,.08) !important; }
.crm-sidebar-account { padding: 6px !important; gap: 8px !important; border: 0 !important; background: rgba(255,255,255,.035) !important; }
.crm-sidebar-account:hover { background: rgba(255,255,255,.06) !important; }
.crm-sidebar-account-avatar { width: 27px !important; height: 27px !important; background: #263755 !important; font-size: 9px !important; }
.crm-sidebar-account-name { color: #eff3f8 !important; font-size: 10px !important; }
.crm-sidebar-account-role { color: #7f8ca1 !important; font-size: 8px !important; }
.crm-sidebar-security { color: #748198 !important; font-size: 7.5px !important; }
.crm-sidebar-security span { animation: none !important; }

/* Fixed desktop toolbar */
.crm-main {
    width: calc(100% - var(--crm-sidebar-width)) !important;
    margin-left: var(--crm-sidebar-width) !important;
    padding-top: 56px !important;
    background: var(--prod-canvas) !important;
}
.crm-topbar {
    inset: 0 0 auto var(--crm-sidebar-width) !important;
    height: 56px !important;
    min-height: 56px !important;
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid var(--prod-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
}
html[data-crm-theme="dark"] .crm-topbar { background: rgba(19,26,38,.97) !important; }
.crm-topbar-inner { height: 56px !important; min-height: 56px !important; padding: 0 15px !important; gap: 10px !important; }
.crm-title-zone { min-width: 126px !important; flex: 1 1 auto !important; }
.crm-page-heading { min-width: 0 !important; }
.crm-title-zone { gap: 8px !important; }
.crm-page-breadcrumb { color: var(--prod-text-muted) !important; font-size: 8px !important; letter-spacing: .08em !important; }
.crm-page-title { max-width: min(36vw, 460px); color: var(--prod-text) !important; font-size: 14px !important; font-weight: 650 !important; }
.crm-scope-pill { min-height: 22px !important; padding: 0 7px !important; border-color: var(--prod-border) !important; background: var(--prod-surface-muted) !important; color: var(--prod-text-muted) !important; font-size: 9px !important; }
.crm-topbar-actions { min-width: 0 !important; flex: 0 1 auto !important; gap: 5px !important; }
.crm-topbar-search-wrap { width: min(240px, 21vw) !important; min-width: 150px !important; }
.crm-topbar-search { width: 100% !important; height: 32px !important; border-color: var(--prod-border) !important; border-radius: 7px !important; background: var(--prod-surface-muted) !important; color: var(--prod-text) !important; font-size: 11px !important; }
.crm-topbar-search:focus { border-color: var(--prod-blue) !important; background: var(--prod-surface) !important; box-shadow: 0 0 0 3px rgba(35,88,212,.11) !important; }
.crm-icon-button,
.crm-preferences-button,
.crm-mobile-menu-button { width: 32px !important; height: 32px !important; min-width: 32px !important; border-color: var(--prod-border) !important; border-radius: 7px !important; background: var(--prod-surface) !important; color: var(--prod-text-muted) !important; }
.crm-topbar-primary-action { height: 32px !important; min-height: 32px !important; padding: 0 10px !important; border-radius: 7px !important; background: var(--prod-blue) !important; font-size: 10.5px !important; box-shadow: none !important; transform: none !important; }
.crm-topbar-primary-action:hover { background: var(--prod-blue-hover) !important; transform: none !important; }
.crm-user-card { min-height: 32px !important; padding-left: 6px !important; }
.crm-user-name { font-size: 10.5px !important; }
.crm-user-detail { font-size: 8.5px !important; }
.crm-user-avatar { width: 28px !important; height: 28px !important; border-radius: 7px !important; font-size: 9px !important; }
.crm-topbar-clock #crmUkTime { font-size: 10px !important; }
.crm-topbar-clock small { font-size: 7px !important; }

@media (max-width: 1399px) and (min-width: 1024px) {
    .crm-command-button span,
    .crm-command-button kbd,
    .crm-topbar-clock,
    .crm-user-copy { display: none !important; }
    .crm-command-button { width: 32px !important; height: 32px !important; padding: 0 !important; justify-content: center !important; border-radius: 7px !important; }
    .crm-topbar-search-wrap { width: min(210px, 19vw) !important; }
    .crm-user-card { width: 32px !important; min-width: 32px !important; padding: 2px !important; border: 0 !important; }
    .crm-user-chevron { display: none !important; }
    .crm-page-title { max-width: min(24vw, 300px) !important; }
}

/* Information-dense page canvas */
.page-wrapper,
.invoice-page-padding,
.crm-page-wrapper {
    width: 100%;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 14px 16px 24px !important;
}
.crm-page-content { max-width: 100% !important; }
.crm-page-content .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 11px !important; }
.crm-page-content .gap-8 { gap: 14px !important; }
.crm-page-content .gap-6 { gap: 12px !important; }
.crm-page-content .gap-5 { gap: 11px !important; }
.crm-page-content .gap-4 { gap: 9px !important; }
.crm-page-content .p-8 { padding: 16px !important; }
.crm-page-content .p-7,
.crm-page-content .p-6 { padding: 14px !important; }
.crm-page-content .p-5,
.crm-page-content .p-4 { padding: 12px !important; }
.crm-page-content .px-6 { padding-left: 13px !important; padding-right: 13px !important; }
.crm-page-content .py-5,
.crm-page-content .py-4 { padding-top: 11px !important; padding-bottom: 11px !important; }
.crm-page-content .rounded-3xl,
.crm-page-content .rounded-2xl,
.crm-page-content .rounded-xl { border-radius: var(--prod-radius) !important; }

.crm-app-body .bg-white,
.crm-app-body .crm-card,
.crm-app-body .crm-v4-panel,
.crm-app-body .crm-v4-chart-card,
.crm-app-body .ent-card,
.crm-app-body .mx-card {
    background: var(--prod-surface) !important;
    color: var(--prod-text) !important;
    border-color: var(--prod-border) !important;
    border-radius: var(--prod-radius) !important;
    box-shadow: var(--prod-shadow) !important;
    transform: none !important;
}
.crm-app-body .crm-v4-panel:hover,
.crm-app-body .crm-v4-chart-card:hover,
.crm-app-body .ent-card:hover { border-color: var(--prod-border-strong) !important; box-shadow: var(--prod-shadow) !important; transform: none !important; }
.crm-v4-panel-head { padding: 10px 12px !important; border-bottom-color: var(--prod-border) !important; }
.crm-v4-eyebrow { font-size: 7.5px !important; letter-spacing: .12em !important; }

.ui-page-intro,
.ent-hero,
.crm-v4-dashboard-head {
    min-height: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--prod-border) !important;
    border-radius: var(--prod-radius) !important;
    background: var(--prod-surface) !important;
    box-shadow: var(--prod-shadow) !important;
}
.ui-page-intro::before,
.ui-page-intro::after,
.ent-hero::before,
.ent-hero::after { display: none !important; }
.crm-page-content h1 { font-size: 18px !important; }
.crm-page-content h2 { font-size: 15px !important; }
.crm-page-content h3 { font-size: 13px !important; }
.crm-page-content p { color: var(--prod-text-muted) !important; }

.crm-v4-kpi-grid { gap: 9px !important; }
.crm-v4-kpi {
    min-height: 88px !important;
    padding: 11px !important;
    gap: 9px !important;
    border-color: var(--prod-border) !important;
    border-radius: var(--prod-radius) !important;
    background: var(--prod-surface) !important;
    box-shadow: var(--prod-shadow) !important;
    transform: none !important;
}
.crm-v4-kpi::before { display: none !important; }
.crm-v4-kpi:hover { border-color: var(--prod-border-strong) !important; transform: none !important; box-shadow: var(--prod-shadow) !important; }
.crm-v4-kpi-icon { width: 30px !important; height: 30px !important; flex-basis: 30px !important; border: 0 !important; border-radius: 7px !important; background: var(--prod-blue-soft) !important; color: var(--prod-blue) !important; transform: none !important; }
.crm-v4-kpi strong,
.crm-v4-stat strong { color: var(--prod-text) !important; font-size: 20px !important; font-family: var(--mx-font-body) !important; font-weight: 650 !important; }
.crm-v4-kpi small { font-size: 9px !important; }

/* Tables and forms */
.crm-app-body table { width: 100%; font-size: 11.5px !important; }
.crm-app-body thead th,
.crm-app-body .bg-slate-50 th {
    height: 34px !important;
    padding: 7px 10px !important;
    background: var(--prod-surface-muted) !important;
    color: var(--prod-text-muted) !important;
    border-bottom: 1px solid var(--prod-border) !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
}
.crm-app-body tbody td { padding: 8px 10px !important; border-bottom-color: var(--prod-border) !important; color: var(--prod-text) !important; vertical-align: middle; }
.crm-app-body tbody tr:hover { background: var(--prod-surface-muted) !important; }

.crm-page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.crm-page-content select,
.crm-page-content textarea {
    min-height: 34px !important;
    height: 34px;
    padding: 6px 9px !important;
    border: 1px solid var(--prod-border) !important;
    border-radius: 7px !important;
    background: var(--prod-surface) !important;
    color: var(--prod-text) !important;
    font-size: 11.5px !important;
    box-shadow: none !important;
}
.crm-page-content textarea { height: auto; min-height: 88px !important; resize: vertical; }
.crm-page-content input:focus,
.crm-page-content select:focus,
.crm-page-content textarea:focus { border-color: var(--prod-blue) !important; box-shadow: 0 0 0 3px rgba(35,88,212,.10) !important; outline: 0 !important; }
.crm-page-content label { font-size: 10.5px; }
.crm-page-content button,
.crm-page-content a[role="button"] { border-radius: 7px !important; }
.crm-page-content button[class*="bg-indigo-600"],
.crm-page-content a[class*="bg-indigo-600"],
.crm-page-content .ent-btn-primary { background: var(--prod-blue) !important; border-color: var(--prod-blue) !important; color: #fff !important; box-shadow: none !important; }
.crm-page-content button[class*="bg-indigo-600"]:hover,
.crm-page-content a[class*="bg-indigo-600"]:hover,
.crm-page-content .ent-btn-primary:hover { background: var(--prod-blue-hover) !important; }
.crm-modal,
.crm-modal-panel,
.crm-drawer,
dialog { border-color: var(--prod-border) !important; border-radius: 10px !important; background: var(--prod-surface) !important; color: var(--prod-text) !important; box-shadow: 0 18px 50px rgba(15,23,42,.18) !important; }

/* Restrained motion system: one quiet page entrance plus functional feedback.
   Decorative drift, staggered lists and perpetual pulses stay disabled. */
@keyframes prod-enter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes prod-auth-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.crm-app-body .crm-topbar,
.crm-app-body .crm-sidebar,
.crm-app-body .crm-nav-group,
.crm-app-body .crm-sidebar-workspace,
.crm-app-body .crm-sidebar-quick-actions,
.crm-app-body .crm-page-content > * > *,
.crm-app-body .crm-v4-kpi,
.crm-app-body tbody tr[data-mx-row] {
    animation: none !important;
}

.crm-app-body .crm-page-content {
    animation: prod-enter var(--prod-motion-slow) var(--prod-motion-ease) both;
}

.mx-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--prod-motion-slow) var(--prod-motion-ease), transform var(--prod-motion-slow) var(--prod-motion-ease) !important;
}

.crm-workspace-status,
.crm-sidebar-security span,
.crm-auth-brand::before,
.crm-auth-brand::after,
.crm-auth-brand-grid,
.crm-auth-badge {
    animation: none !important;
}

.crm-app-body a,
.crm-app-body button,
.crm-app-body input,
.crm-app-body select,
.crm-app-body textarea,
.crm-app-body tbody tr,
.crm-sidebar,
.crm-topbar {
    transition-duration: var(--prod-motion-fast) !important;
    transition-timing-function: var(--prod-motion-ease) !important;
}

.crm-page-content button:active,
.crm-topbar-primary-action:active,
.crm-sidebar-create:active,
.crm-auth-submit:active {
    transform: translateY(1px) !important;
}

.mx-toast { animation-duration: var(--prod-motion-slow) !important; }
.mx-toast.is-leaving { animation-duration: var(--prod-motion-base) !important; }
.mx-keys,
.mx-keys__panel,
.mx-to-top { transition-duration: var(--prod-motion-base) !important; }

/* Professional authentication screens */
body.crm-auth-body { background: var(--prod-surface) !important; }
.crm-auth-v4 { grid-template-columns: minmax(380px, .88fr) minmax(440px, 1.12fr) !important; background: var(--prod-surface) !important; }
.crm-auth-brand {
    padding: clamp(30px, 4vw, 56px) !important;
    background: var(--prod-navy) !important;
}
.crm-auth-brand::before,
.crm-auth-brand::after { opacity: .14 !important; animation: none !important; }
.crm-auth-brand-grid { opacity: .45; animation: none !important; background-size: 56px 56px !important; }
.crm-auth-capability,
.crm-auth-field { animation: none !important; }
.crm-auth-logo-row { animation: prod-auth-enter 260ms var(--prod-motion-ease) both !important; }
.crm-auth-story { animation: prod-auth-enter 280ms 35ms var(--prod-motion-ease) both !important; }
.crm-auth-form-shell { animation: prod-auth-enter 280ms 60ms var(--prod-motion-ease) both !important; }
.crm-auth-alert { animation: prod-enter var(--prod-motion-base) var(--prod-motion-ease) both !important; }
.crm-auth-story { max-width: 520px; padding-block: 36px !important; }
.crm-auth-story h1,
.crm-auth-story h2 { max-width: 500px; font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.08 !important; }
.crm-auth-story > p { margin-top: 14px !important; font-size: 13px !important; line-height: 1.65 !important; }
.crm-auth-capabilities { margin-top: 24px !important; gap: 8px !important; }
.crm-auth-capability { padding: 11px !important; border-radius: 8px !important; transform: none !important; }
.crm-auth-capability:hover { transform: none !important; }
.crm-auth-form-area { min-height: 100dvh; padding: 28px !important; background: var(--prod-surface) !important; }
.crm-auth-form-shell { width: min(380px, 100%) !important; max-width: 380px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.crm-auth-form-head h1,
.crm-auth-form-head h2 { color: var(--prod-text) !important; font-size: 24px !important; }
.crm-auth-form { margin-top: 22px !important; gap: 14px !important; }
.crm-auth-input {
    height: 42px !important;
    padding: 0 42px !important;
    border-color: var(--prod-border) !important;
    border-radius: 8px !important;
    background: var(--prod-surface) !important;
    color: var(--prod-text) !important;
    font-size: 12.5px !important;
}
.crm-auth-input:focus { border-color: var(--prod-blue) !important; box-shadow: 0 0 0 3px rgba(35,88,212,.11) !important; }
.crm-auth-submit { height: 42px !important; border-radius: 8px !important; background: var(--prod-blue) !important; box-shadow: none !important; transform: none !important; transition: background-color var(--prod-motion-fast) var(--prod-motion-ease), transform var(--prod-motion-fast) var(--prod-motion-ease) !important; }
.crm-auth-submit::before,
.crm-auth-submit::after { display: none !important; }
.crm-auth-submit:hover { background: var(--prod-blue-hover) !important; box-shadow: none !important; transform: none !important; }
.crm-auth-security { border-color: var(--prod-border) !important; border-radius: 8px !important; background: var(--prod-surface-muted) !important; }

/* Tablet and mobile */
@media (max-width: 1023px) {
    .crm-sidebar-v3 { width: min(282px, 88vw) !important; max-width: 88vw !important; }
    .crm-main { width: 100% !important; margin-left: 0 !important; padding-top: 0 !important; }
    .crm-topbar { position: sticky !important; inset: 0 !important; width: 100% !important; height: 56px !important; min-height: 56px !important; }
    .crm-topbar-inner { height: 56px !important; min-height: 56px !important; padding: 0 12px !important; }
    .crm-mobile-menu-button { display: inline-flex !important; min-width: 40px !important; min-height: 40px !important; }
    .crm-page-wrapper { padding: 12px !important; }
    .crm-auth-v4 { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
    html { font-size: 13px; }
    .crm-topbar { height: 54px !important; min-height: 54px !important; }
    .crm-topbar-inner { min-height: 54px !important; height: 54px !important; padding: 0 9px !important; gap: 7px !important; }
    .crm-page-breadcrumb,
    .crm-scope-pill,
    .crm-topbar-clock,
    .crm-user-copy { display: none !important; }
    .crm-page-title { max-width: 40vw !important; font-size: 13px !important; }
    .crm-icon-button,
    .crm-preferences-button,
    .crm-mobile-menu-button,
    .crm-topbar-primary-action { min-width: 40px !important; min-height: 40px !important; height: 40px !important; }
    .crm-user-card { min-width: 40px !important; min-height: 40px !important; padding: 4px !important; }
    .crm-user-avatar { width: 32px !important; height: 32px !important; }
    .crm-page-wrapper { padding: 9px !important; }
    .ui-page-intro,
    .ent-hero,
    .crm-v4-dashboard-head { padding: 12px !important; }
    .crm-v4-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
    .crm-v4-kpi { min-height: 82px !important; padding: 10px !important; }
    .crm-v4-kpi strong,
    .crm-v4-stat strong { font-size: 18px !important; }
    .crm-page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .crm-page-content select,
    .crm-page-content button,
    .crm-page-content a[role="button"] { min-height: 42px !important; height: auto; }
    .crm-responsive-table tr { margin-bottom: 8px !important; padding: 5px 10px !important; border-color: var(--prod-border) !important; border-radius: 9px !important; background: var(--prod-surface) !important; box-shadow: none !important; }
    .crm-responsive-table td { padding: 8px 0 !important; border-bottom-color: var(--prod-border) !important; color: var(--prod-text) !important; }
    .crm-responsive-table td::before { color: var(--prod-text-muted) !important; font-size: 8.5px !important; }
    .crm-auth-form-area { padding: 18px 14px !important; }
}

@media (max-width: 479px) {
    .crm-v4-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .crm-page-title { max-width: 34vw !important; }
    .crm-auth-form-area { align-items: flex-start !important; padding: 12px !important; }
    .crm-auth-form-shell { margin-top: 8px !important; padding: 16px !important; border: 1px solid var(--prod-border) !important; border-radius: 10px !important; background: var(--prod-surface) !important; }
    .crm-auth-form-head h1,
    .crm-auth-form-head h2 { font-size: 22px !important; }
}

@media (max-width: 339px) {
    .crm-v4-kpi-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .crm-app-body .crm-page-content,
    .crm-auth-logo-row,
    .crm-auth-story,
    .crm-auth-form-shell,
    .crm-auth-alert { animation: none !important; opacity: 1 !important; transform: none !important; }
    .mx-reveal { opacity: 1 !important; transform: none !important; }
}