/* ═════════════════════════════════════════════════════════════════════════
   NUCLEAR COMPACT MODE
   Reduces spacing by 60-80% globally for extreme data density
   ═════════════════════════════════════════════════════════════════════════ */

/* 1. Reset standard padding classes (0-20) */
.compact-mode [class*="p-4"], 
.compact-mode [class*="p-5"], 
.compact-mode [class*="p-6"], 
.compact-mode [class*="p-8"],
.compact-mode [class*="p-10"], 
.compact-mode [class*="p-12"] { 
    padding: 0.5rem !important; 
}

.compact-mode [class*="py-2"],
.compact-mode [class*="py-2.5"],
.compact-mode [class*="py-3"],
.compact-mode [class*="py-4"], 
.compact-mode [class*="py-5"],
.compact-mode [class*="py-6"], 
.compact-mode [class*="py-8"],
.compact-mode [class*="py-10"], 
.compact-mode [class*="py-12"],
.compact-mode [class*="py-16"], 
.compact-mode [class*="py-20"],
.compact-mode table td,
.compact-mode table th { 
    padding-top: 0.3125rem !important;  /* Change this (e.g., 0.375rem for 6px, 0.5rem for 8px) */
    padding-bottom: 0.3125rem !important; /* Change this (e.g., 0.375rem for 6px, 0.5rem for 8px) */
}

.compact-mode [class*="px-4"], 
.compact-mode [class*="px-5"],
.compact-mode [class*="px-6"], 
.compact-mode [class*="px-8"],
.compact-mode [class*="px-10"], 
.compact-mode [class*="px-12"] { 
    padding-left: 0.5rem !important; 
    padding-right: 0.5rem !important; 
}

/* Preserve left padding for inputs with icon overlays (datepicker, search inputs, etc.) */
.compact-mode input[class*="pl-8"],
.compact-mode input[class*="pl-9"],
.compact-mode input[class*="pl-10"],
.compact-mode input[class*="pl-11"],
.compact-mode input[class*="pl-12"],
.compact-mode input.datepicker,
.compact-mode .datepicker {
    padding-left: 2.375rem !important;
}

.compact-mode input[class*="pl-14"] {
    padding-left: 3.5rem !important;
}
.compact-mode input[class*="pl-16"] {
    padding-left: 4.25rem !important;
}
.compact-mode input[class*="pl-20"] {
    padding-left: 5rem !important;
}

/* 2. Reset margins and gaps */
.compact-mode [class*="mb-4"], 
.compact-mode [class*="mb-5"],
.compact-mode [class*="mb-6"], 
.compact-mode [class*="mb-8"],
.compact-mode [class*="mb-10"] { 
    margin-bottom: 0.375rem !important; 
}

.compact-mode [class*="mt-4"], 
.compact-mode [class*="mt-5"],
.compact-mode [class*="mt-6"], 
.compact-mode [class*="mt-8"] { 
    margin-top: 0.375rem !important; 
}

.compact-mode [class*="gap-4"], 
.compact-mode [class*="gap-5"],
.compact-mode [class*="gap-6"], 
.compact-mode [class*="gap-8"],
.compact-mode [class*="gap-10"] { 
    gap: 0.375rem !important; 
}

/* 3. Space-y utilities */
.compact-mode [class*="space-y-4"] > :not([hidden]) ~ :not([hidden]),
.compact-mode [class*="space-y-6"] > :not([hidden]) ~ :not([hidden]),
.compact-mode [class*="space-y-8"] > :not([hidden]) ~ :not([hidden]) { 
    margin-top: 0.375rem !important; 
}

/* 4. Typography & Radius */
.compact-mode .rounded-2xl, 
.compact-mode .rounded-xl { 
    border-radius: 0.375rem !important; 
}

.compact-mode h1, 
.compact-mode .text-2xl { 
    font-size: 1.375rem !important; 
    line-height: 1.75rem !important; 
}

.compact-mode h3, 
.compact-mode .text-lg { 
    font-size: 1.125rem !important; 
    line-height: 1.5rem !important; 
}

.compact-mode h4, 
.compact-mode .text-sm,
.compact-mode input,
.compact-mode select,
.compact-mode button,
.compact-mode table td,
.compact-mode table th { 
    font-size: 0.875rem !important; 
    line-height: 1.25rem !important; 
}

.compact-mode p, 
.compact-mode .text-xs { 
    font-size: 0.8125rem !important; 
    line-height: 1.125rem !important; 
}

.compact-mode .p-2 { 
    padding: 0.25rem !important; 
} /* shrink icons and small pads */

/* Target SVGs specifically when shrinking .w-5 / .h-5 icons, preserving HTML div knobs */
.compact-mode svg.w-5, 
.compact-mode svg.h-5 { 
    width: 1.125rem !important; 
    height: 1.125rem !important; 
}

/* ═════════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH PROTECTIONS IN COMPACT MODE
   ═════════════════════════════════════════════════════════════════════════ */
.compact-mode .rounded-full {
    border-radius: 9999px !important;
}

.compact-mode .relative > .w-11,
.compact-mode label .w-11,
.compact-mode .w-11.h-6 {
    width: 2.75rem !important;
    height: 1.5rem !important;
    min-width: 2.75rem !important;
    min-height: 1.5rem !important;
    border-radius: 9999px !important;
}

.compact-mode .relative > .h-5.w-5,
.compact-mode label .h-5.w-5,
.compact-mode div.h-5.w-5 {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    border-radius: 9999px !important;
}

.compact-mode div[class*="after:w-5"]::after {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 9999px !important;
}

.compact-mode .mx-auto.max-w-6xl { 
    max-width: 100% !important; 
    padding-left: 1rem !important; 
    padding-right: 1rem !important; 
}

.compact-mode [style*="max-width: 1400px"] { 
    max-width: 100% !important; 
}

/* ═════════════════════════════════════════════════════════════════════════
   SHELL CHROME EXEMPTION
   The sidebar header is height-locked at 68px, so compact crushing must not
   shrink the topbar rows (py-3/py-4 → 5px) — that opened a ~14px gap between
   the sidebar divider and the navbar divider. Restore exact shell spacing
   here. Higher specificity + !important beats the crush rules above.
   ═════════════════════════════════════════════════════════════════════════ */
.compact-mode .erp-sidebar .sidebar-header {
    height: 68px !important;
    min-height: 68px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (min-width: 1024px) {
    .compact-mode header.erp-topbar .header-row,
    .compact-mode header.erp-topbar > div > div:first-child {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    .compact-mode header.erp-topbar > div > div:last-child {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}