/* =============================================================================
 * Industrial Patriotic Theme — Ryse Construction
 * "Veteran-Owned Industrial Americana" — 1996 Early Digital / Win95 Style
 * 
 * LOAD ORDER: Tailwind CDN → dark-mode.css → industrial-patriotic.css (LAST)
 * Fallout easter egg (css/fallout.css) is NOT affected — all rules exclude .fallout-mode
 * ============================================================================= */

/* === CSS Custom Properties (Design Tokens) ================================ */
:root {
    --color-primary: #eb131f;
    --color-primary-dark: #c40f19;
    --color-primary-light: #f04a54;
    --color-primary-pale: #fee2e2;
    --color-bg-page: #f5f5f0;
    --color-bg-card: #fafaf8;
    --color-bg-sidebar: #e8e8e0;
    --color-bg-dark: #2d2d2d;
    --color-bg-dark-page: #1a1a1a;
    --color-bg-dark-card: #2a2a2a;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #6c6c6c;
    --color-text-inverse: #ffffff;
    --color-accent-teal: #008080;
    --color-accent-purple: #800080;
    --color-accent-amber: #ffbf00;
    --color-accent-navy: #000080;
    --color-accent-green: #008000;

    --ryse-red: var(--color-primary);
    --ryse-red-hover: var(--color-primary-dark);
    --ryse-red-light: var(--color-primary-pale);
    --ryse-navy: var(--color-accent-navy);
    --ryse-navy-light: #0010a8;
    --ryse-navy-dark: #00004d;
    --ryse-silver: var(--color-bg-sidebar);
    --ryse-silver-light: #f1f1ea;
    --ryse-silver-dark: #c6c6bc;
    --ryse-yellow: var(--color-accent-amber);
    --ryse-yellow-dark: #d39b00;
    --ryse-white: #ffffff;
    --ryse-black: #000000;
    --ryse-dark-bg: var(--color-bg-dark-page);
    --ryse-dark-card: var(--color-bg-dark-card);
    --ryse-dark-border: #3a3a3a;
    --ryse-dark-surface: #1f1f1f;

    /* Win95 3D Bezel Colors */
    --bevel-light: #ffffff;
    --bevel-dark: #808080;
    --bevel-darker: #404040;
    --bevel-lightest: #dfdfdf;
}

/* === GLOBAL: Zero border-radius everywhere ================================ */
*:not(.fallout-mode *) {
    border-radius: 0 !important;
}

/* === GLOBAL: Kill ALL soft shadows ======================================== */
.shadow-sm:not(.fallout-mode *),
.shadow:not(.fallout-mode *),
.shadow-md:not(.fallout-mode *),
.shadow-lg:not(.fallout-mode *),
.shadow-xl:not(.fallout-mode *),
.shadow-2xl:not(.fallout-mode *) {
    box-shadow: none !important;
}

/* === GLOBAL: No gradients ================================================= */
.bg-gradient-to-r:not(.fallout-mode *),
.bg-gradient-to-l:not(.fallout-mode *),
.bg-gradient-to-t:not(.fallout-mode *),
.bg-gradient-to-b:not(.fallout-mode *),
.bg-gradient-to-br:not(.fallout-mode *),
.bg-gradient-to-bl:not(.fallout-mode *) {
    background-image: none !important;
}

/* ==========================================================================
 * LIGHT MODE — Win95 / Early Digital Retro
 * ========================================================================== */

/* Page background — Win95 Silver desktop */
body:not(.theme-dark):not(.fallout-mode) {
    background-color: var(--color-accent-teal) !important;
    color: var(--color-text-primary) !important;
    font-family: Tahoma, Verdana, Geneva, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body:not(.theme-dark):not(.fallout-mode) h1,
body:not(.theme-dark):not(.fallout-mode) h2,
body:not(.theme-dark):not(.fallout-mode) h3,
body:not(.theme-dark):not(.fallout-mode) .page-title,
body:not(.theme-dark):not(.fallout-mode) .section-title {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

body:not(.theme-dark):not(.fallout-mode) button,
body:not(.theme-dark):not(.fallout-mode) .btn,
body:not(.theme-dark):not(.fallout-mode) label,
body:not(.theme-dark):not(.fallout-mode) .badge {
    font-family: Tahoma, Verdana, sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
}

/* Main content area — Silver */
body:not(.theme-dark):not(.fallout-mode) main,
body:not(.theme-dark):not(.fallout-mode) .bg-gray-50,
body:not(.theme-dark):not(.fallout-mode) .bg-gray-100 {
    background-color: var(--color-bg-page) !important;
}

/* === 3D BEVELED CARDS (Raised) ============================================ */
body:not(.theme-dark):not(.fallout-mode) .bg-white {
    background-color: var(--color-bg-card) !important;
    border-top: 2px solid var(--bevel-light) !important;
    border-left: 2px solid var(--bevel-light) !important;
    border-right: 2px solid var(--bevel-darker) !important;
    border-bottom: 2px solid var(--bevel-darker) !important;
    box-shadow: inset 1px 1px 0 var(--bevel-lightest), inset -1px -1px 0 var(--bevel-dark) !important;
}

/* === NAVY TITLE BARS on card headings ===================================== */
body:not(.theme-dark):not(.fallout-mode) .bg-white > h1:first-child,
body:not(.theme-dark):not(.fallout-mode) .bg-white > h2:first-child,
body:not(.theme-dark):not(.fallout-mode) .bg-white > h3:first-child,
body:not(.theme-dark):not(.fallout-mode) .bg-white > div > h1:first-child,
body:not(.theme-dark):not(.fallout-mode) .bg-white > div > h2:first-child,
body:not(.theme-dark):not(.fallout-mode) .bg-white > div > h3:first-child {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    color: var(--color-text-inverse) !important;
    padding: 3px 6px !important;
    margin: 0 0 8px 0 !important;
    font-size: 0.8125rem !important;
    font-weight: bold !important;
    letter-spacing: 0.02em !important;
}

/* === WIN95 BUTTONS — Raised 3D with press effect ========================== */
body:not(.theme-dark):not(.fallout-mode) button:not(aside button),
body:not(.theme-dark):not(.fallout-mode) .btn,
body:not(.theme-dark):not(.fallout-mode) [type="button"],
body:not(.theme-dark):not(.fallout-mode) [type="submit"],
body:not(.theme-dark):not(.fallout-mode) [type="reset"] {
    background-color: var(--color-bg-sidebar) !important;
    color: var(--color-text-primary) !important;
    border-top: 2px solid var(--bevel-light) !important;
    border-left: 2px solid var(--bevel-light) !important;
    border-right: 2px solid var(--bevel-darker) !important;
    border-bottom: 2px solid var(--bevel-darker) !important;
    box-shadow: inset 1px 1px 0 var(--bevel-lightest), inset -1px -1px 0 var(--bevel-dark) !important;
    padding: 4px 16px !important;
    font-size: 0.8125rem !important;
    min-height: 26px !important;
    cursor: pointer !important;
}

body:not(.theme-dark):not(.fallout-mode) button:not(aside button):active,
body:not(.theme-dark):not(.fallout-mode) .btn:active,
body:not(.theme-dark):not(.fallout-mode) [type="button"]:active,
body:not(.theme-dark):not(.fallout-mode) [type="submit"]:active {
    border-top: 2px solid var(--bevel-darker) !important;
    border-left: 2px solid var(--bevel-darker) !important;
    border-right: 2px solid var(--bevel-light) !important;
    border-bottom: 2px solid var(--bevel-light) !important;
    box-shadow: inset 1px 1px 0 var(--bevel-dark) !important;
    padding: 5px 15px 3px 17px !important;
}

/* Primary action buttons — Red fill with bezel */
body:not(.theme-dark):not(.fallout-mode) .bg-blue-600,
body:not(.theme-dark):not(.fallout-mode) .bg-blue-500,
body:not(.theme-dark):not(.fallout-mode) .bg-red-600,
body:not(.theme-dark):not(.fallout-mode) .bg-red-500 {
    background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    color: var(--color-text-inverse) !important;
    border-top: 2px solid var(--color-primary-light) !important;
    border-left: 2px solid var(--color-primary-light) !important;
    border-right: 2px solid #8b0000 !important;
    border-bottom: 2px solid #8b0000 !important;
    box-shadow: 2px 2px 0 #000 !important;
}

body:not(.theme-dark):not(.fallout-mode) .bg-blue-600:hover,
body:not(.theme-dark):not(.fallout-mode) .bg-blue-500:hover,
body:not(.theme-dark):not(.fallout-mode) .hover\:bg-blue-700:hover,
body:not(.theme-dark):not(.fallout-mode) .hover\:bg-blue-600:hover {
    background-color: var(--color-primary-dark) !important;
}

body:not(.theme-dark):not(.fallout-mode) .btn-primary {
    background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    color: var(--color-text-inverse) !important;
    border: 2px solid #000 !important;
    border-top-color: var(--color-primary-light) !important;
    border-left-color: var(--color-primary-light) !important;
    border-right-color: #8b0000 !important;
    border-bottom-color: #8b0000 !important;
    box-shadow: 2px 2px 0 #000 !important;
    padding: 8px 16px !important;
}

body:not(.theme-dark):not(.fallout-mode) .btn-primary:active {
    box-shadow: 1px 1px 0 #000 !important;
    transform: translate(1px, 1px) !important;
    border-top-color: #8b0000 !important;
    border-left-color: #8b0000 !important;
}

body:not(.theme-dark):not(.fallout-mode) .btn-secondary {
    background: linear-gradient(to bottom, #e8e8e8 0%, #c0c0c0 100%) !important;
    color: var(--color-text-primary) !important;
    border: 2px solid #000 !important;
    border-top-color: #fff !important;
    border-left-color: #fff !important;
    border-right-color: #808080 !important;
    border-bottom-color: #808080 !important;
    box-shadow: 2px 2px 0 #666 !important;
}

body:not(.theme-dark):not(.fallout-mode) .btn-danger {
    background: linear-gradient(to bottom, #dc2626 0%, #b91c1c 100%) !important;
    color: var(--color-text-inverse) !important;
    border: 2px solid #000 !important;
    border-top-color: #f87171 !important;
    border-left-color: #f87171 !important;
    border-right-color: #7f1d1d !important;
    border-bottom-color: #7f1d1d !important;
    box-shadow: 2px 2px 0 #000 !important;
}

/* Secondary buttons — Navy fill with bezel */
body:not(.theme-dark):not(.fallout-mode) .bg-gray-900,
body:not(.theme-dark):not(.fallout-mode) .bg-slate-900 {
    background: linear-gradient(to bottom, #e8e8e8 0%, #c0c0c0 100%) !important;
    color: var(--color-text-primary) !important;
    border: 2px solid #000 !important;
    border-top-color: #fff !important;
    border-left-color: #fff !important;
    border-right-color: #808080 !important;
    border-bottom-color: #808080 !important;
    box-shadow: 2px 2px 0 #666 !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-gray-900:hover,
body:not(.theme-dark):not(.fallout-mode) .hover\:bg-gray-800:hover {
    background-color: #d6d6d0 !important;
}

/* Warning badges — Yellow with bezel */
body:not(.theme-dark):not(.fallout-mode) .bg-yellow-50,
body:not(.theme-dark):not(.fallout-mode) .bg-amber-50 {
    background-color: var(--ryse-yellow) !important;
    color: var(--ryse-black) !important;
    border-top: 1px solid #FFF176 !important;
    border-left: 1px solid #FFF176 !important;
    border-right: 1px solid #B8860B !important;
    border-bottom: 1px solid #B8860B !important;
}

/* === SUNKEN INPUTS — Classic inset look =================================== */
body:not(.theme-dark):not(.fallout-mode) input[type="text"],
body:not(.theme-dark):not(.fallout-mode) input[type="tel"],
body:not(.theme-dark):not(.fallout-mode) input[type="number"],
body:not(.theme-dark):not(.fallout-mode) input[type="email"],
body:not(.theme-dark):not(.fallout-mode) input[type="password"],
body:not(.theme-dark):not(.fallout-mode) input[type="search"],
body:not(.theme-dark):not(.fallout-mode) input[type="date"],
body:not(.theme-dark):not(.fallout-mode) textarea,
body:not(.theme-dark):not(.fallout-mode) select {
    background-color: var(--ryse-white) !important;
    color: var(--color-text-primary) !important;
    border-top: 2px solid var(--bevel-darker) !important;
    border-left: 2px solid var(--bevel-darker) !important;
    border-right: 2px solid var(--bevel-light) !important;
    border-bottom: 2px solid var(--bevel-light) !important;
    box-shadow: inset 1px 1px 0 var(--bevel-dark) !important;
    padding: 3px 4px !important;
    font-size: 0.8125rem !important;
}

body:not(.theme-dark):not(.fallout-mode) input:focus,
body:not(.theme-dark):not(.fallout-mode) textarea:focus,
body:not(.theme-dark):not(.fallout-mode) select:focus {
    outline: 1px dotted var(--ryse-black) !important;
    outline-offset: -1px !important;
}

/* === SIDEBAR — Navy with beveled sections ================================= */
body:not(.theme-dark):not(.fallout-mode) aside,
body:not(.theme-dark):not(.fallout-mode) aside .h-full,
body:not(.theme-dark):not(.fallout-mode) #sidebar > div {
    background-color: var(--color-bg-sidebar) !important;
    border-right: 2px solid var(--bevel-darker) !important;
    box-shadow: none !important;
}

/* Sidebar text */
body:not(.theme-dark):not(.fallout-mode) aside .text-gray-900,
body:not(.theme-dark):not(.fallout-mode) aside .text-gray-800,
body:not(.theme-dark):not(.fallout-mode) aside .text-gray-700,
body:not(.theme-dark):not(.fallout-mode) aside .text-gray-600,
body:not(.theme-dark):not(.fallout-mode) aside .font-bold,
body:not(.theme-dark):not(.fallout-mode) aside .font-semibold {
    color: var(--ryse-black) !important;
}

body:not(.theme-dark):not(.fallout-mode) aside .text-sm,
body:not(.theme-dark):not(.fallout-mode) aside .text-xs {
    color: #333333 !important;
}

/* Sidebar borders */
body:not(.theme-dark):not(.fallout-mode) aside .border-gray-200,
body:not(.theme-dark):not(.fallout-mode) aside .border-gray-300,
body:not(.theme-dark):not(.fallout-mode) aside .border-gray-700 {
    border-color: var(--bevel-dark) !important;
}

/* Sidebar nav links — Win95 list item style */
body:not(.theme-dark):not(.fallout-mode) aside .sidebar-link,
body:not(.theme-dark):not(.fallout-mode) aside .nav-item a,
body:not(.theme-dark):not(.fallout-mode) aside nav a {
    color: var(--ryse-black) !important;
    padding: 4px 8px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

body:not(.theme-dark):not(.fallout-mode) aside .sidebar-link:hover,
body:not(.theme-dark):not(.fallout-mode) aside .nav-item a:hover,
body:not(.theme-dark):not(.fallout-mode) aside nav a:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: 1px solid transparent !important;
}

/* Sidebar active link — Navy highlight (like Win95 selected item) */
body:not(.theme-dark):not(.fallout-mode) aside .sidebar-link.active,
body:not(.theme-dark):not(.fallout-mode) aside a[class*="text-blue-700"],
body:not(.theme-dark):not(.fallout-mode) aside a[class*="bg-blue-50"] {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-left: 3px solid var(--color-accent-navy) !important;
}

/* Sidebar nav group buttons */
body:not(.theme-dark):not(.fallout-mode) aside button[data-group-id] {
    color: var(--ryse-black) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body:not(.theme-dark):not(.fallout-mode) aside button[data-group-id]:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}

/* Sidebar weather widget — sunken panel */
body:not(.theme-dark):not(.fallout-mode) aside #weatherWidget {
    background: var(--color-bg-sidebar) !important;
    border-top: 2px solid var(--bevel-darker) !important;
    border-left: 2px solid var(--bevel-darker) !important;
    border-right: 2px solid var(--bevel-light) !important;
    border-bottom: 2px solid var(--bevel-light) !important;
    box-shadow: inset 1px 1px 0 var(--bevel-dark) !important;
}
body:not(.theme-dark):not(.fallout-mode) aside #weatherWidget .text-gray-800,
body:not(.theme-dark):not(.fallout-mode) aside #weatherWidget .font-bold {
    color: var(--ryse-black) !important;
}
body:not(.theme-dark):not(.fallout-mode) aside #weatherWidget .text-gray-500,
body:not(.theme-dark):not(.fallout-mode) aside #weatherWidget .text-xs {
    color: #333333 !important;
}

/* Sidebar clock — sunken display */
body:not(.theme-dark):not(.fallout-mode) aside #sidebarClock {
    background-color: var(--ryse-white) !important;
    color: var(--ryse-black) !important;
    border-top: 2px solid var(--bevel-darker) !important;
    border-left: 2px solid var(--bevel-darker) !important;
    border-right: 2px solid var(--bevel-light) !important;
    border-bottom: 2px solid var(--bevel-light) !important;
    font-family: "Courier New", monospace !important;
    font-size: 0.75rem !important;
}

/* Sidebar theme toggle — standard Win95 button */
body:not(.theme-dark):not(.fallout-mode) aside button[onclick="toggleTheme()"] {
    background-color: var(--ryse-silver) !important;
    color: var(--ryse-black) !important;
    border-top: 2px solid var(--bevel-light) !important;
    border-left: 2px solid var(--bevel-light) !important;
    border-right: 2px solid var(--bevel-darker) !important;
    border-bottom: 2px solid var(--bevel-darker) !important;
    box-shadow: inset 1px 1px 0 var(--bevel-lightest), inset -1px -1px 0 var(--bevel-dark) !important;
}
body:not(.theme-dark):not(.fallout-mode) aside button[onclick="toggleTheme()"]:hover {
    background-color: var(--bevel-lightest) !important;
}

/* Sidebar profile button — Red beveled */
body:not(.theme-dark):not(.fallout-mode) aside .bg-blue-100,
body:not(.theme-dark):not(.fallout-mode) aside .bg-red-100,
body:not(.theme-dark):not(.fallout-mode) aside .bg-purple-100 {
    background-color: var(--ryse-red) !important;
    color: var(--ryse-white) !important;
}

/* Sidebar profile dropdown — beveled panel */
body:not(.theme-dark):not(.fallout-mode) #unifiedProfileMenu {
    background-color: var(--color-bg-sidebar) !important;
    border-top: 2px solid var(--bevel-light) !important;
    border-left: 2px solid var(--bevel-light) !important;
    border-right: 2px solid var(--bevel-darker) !important;
    border-bottom: 2px solid var(--bevel-darker) !important;
}
body:not(.theme-dark):not(.fallout-mode) #unifiedProfileMenu .bg-gray-50 {
    background-color: var(--color-bg-sidebar) !important;
}

/* Mobile header — Navy taskbar */
body:not(.theme-dark):not(.fallout-mode) header.lg\:hidden {
    background-color: var(--ryse-silver) !important;
    border-bottom: 2px solid var(--bevel-darker) !important;
    box-shadow: inset 0 -1px 0 var(--bevel-light) !important;
}
body:not(.theme-dark):not(.fallout-mode) header.lg\:hidden .text-gray-900,
body:not(.theme-dark):not(.fallout-mode) header.lg\:hidden .font-semibold {
    color: var(--ryse-black) !important;
}
body:not(.theme-dark):not(.fallout-mode) header.lg\:hidden .text-gray-600,
body:not(.theme-dark):not(.fallout-mode) header.lg\:hidden .text-xs {
    color: #333333 !important;
}
body:not(.theme-dark):not(.fallout-mode) header.lg\:hidden button {
    color: var(--ryse-black) !important;
}

/* === CARD BORDERS — Hard gray ============================================= */
body:not(.fallout-mode) .border-gray-100 {
    border-color: var(--bevel-dark) !important;
}
body:not(.theme-dark):not(.fallout-mode) .border-gray-200 {
    border-color: var(--bevel-dark) !important;
}
body:not(.theme-dark):not(.fallout-mode) .border-gray-300 {
    border-color: var(--bevel-darker) !important;
}

/* === DASHBOARD APP CARDS — Beveled tiles ================================== */
body:not(.theme-dark):not(.fallout-mode) #dashboardGrid > a {
    background-color: var(--color-bg-card) !important;
    border-top: 2px solid var(--bevel-light) !important;
    border-left: 2px solid var(--bevel-light) !important;
    border-right: 2px solid var(--bevel-darker) !important;
    border-bottom: 2px solid var(--bevel-darker) !important;
    box-shadow: inset 1px 1px 0 var(--bevel-lightest), inset -1px -1px 0 var(--bevel-dark) !important;
    transition: none !important;
}
body:not(.theme-dark):not(.fallout-mode) #dashboardGrid > a:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}
body:not(.theme-dark):not(.fallout-mode) #dashboardGrid > a:hover * {
    color: var(--ryse-white) !important;
}
body:not(.theme-dark):not(.fallout-mode) #dashboardGrid > a:active {
    border-top: 2px solid var(--bevel-darker) !important;
    border-left: 2px solid var(--bevel-darker) !important;
    border-right: 2px solid var(--bevel-light) !important;
    border-bottom: 2px solid var(--bevel-light) !important;
    box-shadow: inset 1px 1px 0 var(--bevel-dark) !important;
}

/* Dashboard stat cards — beveled with color fills */
body:not(.theme-dark):not(.fallout-mode) .bg-blue-50 {
    background-color: var(--color-primary-pale) !important;
    border-top: 1px solid var(--bevel-light) !important;
    border-left: 1px solid var(--bevel-light) !important;
    border-right: 1px solid var(--color-primary-dark) !important;
    border-bottom: 1px solid var(--color-primary-dark) !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-amber-50 {
    border-top: 1px solid #FFF176 !important;
    border-left: 1px solid #FFF176 !important;
    border-right: 1px solid #B8860B !important;
    border-bottom: 1px solid #B8860B !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-red-50 {
    background-color: var(--color-primary-pale) !important;
    border-top: 1px solid var(--color-primary-light) !important;
    border-left: 1px solid var(--color-primary-light) !important;
    border-right: 1px solid var(--color-primary) !important;
    border-bottom: 1px solid var(--color-primary) !important;
}

/* === TABLES — Industrial grid with navy headers =========================== */
body:not(.fallout-mode) table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
body:not(.fallout-mode) th {
    background: linear-gradient(to bottom, #d4d4d4 0%, #b8b8b8 100%) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid #666 !important;
    border-bottom: 2px solid #000 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.05em !important;
    padding: 8px !important;
    text-align: left !important;
}
body:not(.theme-dark):not(.fallout-mode) td {
    border: 1px solid #a0a0a0 !important;
    padding: 8px !important;
    font-size: 0.8125rem !important;
    background-color: #ffffff !important;
}
body:not(.theme-dark):not(.fallout-mode) tr:nth-child(even) td {
    background-color: #ffffff !important;
}
body:not(.theme-dark):not(.fallout-mode) tr:nth-child(odd) td {
    background-color: #fffff0 !important;
}
body:not(.theme-dark):not(.fallout-mode) tr:hover td {
    background-color: #fffacd !important;
}

body:not(.theme-dark):not(.fallout-mode) .badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: 2px solid #000 !important;
    box-shadow: 1px 1px 0 #666 !important;
}
body:not(.theme-dark):not(.fallout-mode) .badge-in-progress {
    background: linear-gradient(to bottom, #ffd700, #daa520) !important;
    color: #000 !important;
}
body:not(.theme-dark):not(.fallout-mode) .badge-complete {
    background: linear-gradient(to bottom, #32cd32, #228b22) !important;
    color: #fff !important;
}
body:not(.theme-dark):not(.fallout-mode) .badge-overdue {
    background: linear-gradient(to bottom, #ff6347, #dc143c) !important;
    color: #fff !important;
}
/* === STATUS BADGES — Solid with beveled borders =========================== */
body:not(.fallout-mode) .bg-green-100,
body:not(.fallout-mode) .bg-green-50 {
    background-color: #90EE90 !important;
    color: #003300 !important;
    border-top: 1px solid #AAFFAA !important;
    border-left: 1px solid #AAFFAA !important;
    border-right: 1px solid #006600 !important;
    border-bottom: 1px solid #006600 !important;
    font-weight: bold !important;
    font-size: 0.75rem !important;
}
body:not(.fallout-mode) .bg-red-100 {
    background-color: #FF6B6B !important;
    color: var(--ryse-white) !important;
    border-top: 1px solid #FF9999 !important;
    border-left: 1px solid #FF9999 !important;
    border-right: 1px solid #8B0000 !important;
    border-bottom: 1px solid #8B0000 !important;
    font-weight: bold !important;
    font-size: 0.75rem !important;
}
body:not(.fallout-mode) .bg-yellow-100 {
    background-color: var(--ryse-yellow) !important;
    color: var(--ryse-black) !important;
    border-top: 1px solid #FFF176 !important;
    border-left: 1px solid #FFF176 !important;
    border-right: 1px solid #B8860B !important;
    border-bottom: 1px solid #B8860B !important;
    font-weight: bold !important;
    font-size: 0.75rem !important;
}

/* === PURPLE DEVELOPER SECTION — Navy treatment ============================ */
body:not(.theme-dark):not(.fallout-mode) .bg-purple-50 {
    background-color: var(--color-primary-pale) !important;
    border-color: var(--color-primary-dark) !important;
}
body:not(.theme-dark):not(.fallout-mode) .border-purple-200 {
    border-color: var(--color-primary-dark) !important;
}
body:not(.theme-dark):not(.fallout-mode) .text-purple-900 {
    color: var(--color-primary-dark) !important;
}
body:not(.theme-dark):not(.fallout-mode) .text-purple-700 {
    color: var(--color-primary) !important;
}
body:not(.theme-dark):not(.fallout-mode) .text-purple-600 {
    color: var(--color-primary) !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-purple-100 {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}
body:not(.theme-dark):not(.fallout-mode) .border-purple-700 {
    border-color: var(--color-primary-dark) !important;
}

/* === TEXT COLOR OVERRIDES — Darker for readability on silver =============== */
body:not(.theme-dark):not(.fallout-mode) .text-gray-500,
body:not(.theme-dark):not(.fallout-mode) .text-gray-400 {
    color: #555555 !important;
}
body:not(.theme-dark):not(.fallout-mode) .text-gray-600 {
    color: #333333 !important;
}
body:not(.theme-dark):not(.fallout-mode) .text-blue-600,
body:not(.theme-dark):not(.fallout-mode) .text-blue-700 {
    color: var(--color-primary) !important;
}
body:not(.theme-dark):not(.fallout-mode) .text-blue-500 {
    color: var(--color-primary-dark) !important;
}

/* ==========================================================================
 * DARK MODE — Industrial Dark (Beveled variant)
 * ========================================================================== */

/* Page background — deep black-blue */
body.theme-dark:not(.fallout-mode) {
    background-color: var(--color-bg-dark-page) !important;
    color: #e2e8f0 !important;
    font-family: Tahoma, Verdana, Geneva, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Dark mode main area */
body.theme-dark:not(.fallout-mode) main,
body.theme-dark:not(.fallout-mode) .bg-gray-50,
body.theme-dark:not(.fallout-mode) .bg-gray-900,
body.theme-dark:not(.fallout-mode) .dark\:bg-gray-900 {
    background-color: #1f1f1f !important;
}

/* Dark mode cards — beveled with dark palette */
body.theme-dark:not(.fallout-mode) .bg-white,
body.theme-dark:not(.fallout-mode) .dark\:bg-gray-800 {
    background-color: var(--color-bg-dark-card) !important;
    border-top: 2px solid #4a4a4a !important;
    border-left: 2px solid #4a4a4a !important;
    border-right: 2px solid #0a0a0a !important;
    border-bottom: 2px solid #0a0a0a !important;
    box-shadow: inset 1px 1px 0 #3a3a3a, inset -1px -1px 0 #1a1a1a !important;
}

/* Dark mode headings — title bars */
body.theme-dark:not(.fallout-mode) .bg-white > h1:first-child,
body.theme-dark:not(.fallout-mode) .bg-white > h2:first-child,
body.theme-dark:not(.fallout-mode) .bg-white > h3:first-child,
body.theme-dark:not(.fallout-mode) .bg-white > div > h1:first-child,
body.theme-dark:not(.fallout-mode) .bg-white > div > h2:first-child,
body.theme-dark:not(.fallout-mode) .bg-white > div > h3:first-child {
    background: linear-gradient(90deg, var(--color-primary-dark) 0%, #6a0b12 100%) !important;
    color: var(--color-text-inverse) !important;
    padding: 3px 6px !important;
    margin: 0 0 8px 0 !important;
    font-size: 0.8125rem !important;
    font-weight: bold !important;
}

/* Dark mode buttons — beveled dark */
body.theme-dark:not(.fallout-mode) button:not(aside button),
body.theme-dark:not(.fallout-mode) .btn,
body.theme-dark:not(.fallout-mode) [type="button"],
body.theme-dark:not(.fallout-mode) [type="submit"] {
    background-color: #3a3a4e !important;
    color: #E2E8F0 !important;
    border-top: 2px solid #5a5a6e !important;
    border-left: 2px solid #5a5a6e !important;
    border-right: 2px solid #1a1a2e !important;
    border-bottom: 2px solid #1a1a2e !important;
    box-shadow: inset 1px 1px 0 #4a4a5e, inset -1px -1px 0 #2a2a3e !important;
    padding: 4px 16px !important;
    font-size: 0.8125rem !important;
}

body.theme-dark:not(.fallout-mode) button:not(aside button):active,
body.theme-dark:not(.fallout-mode) .btn:active {
    border-top: 2px solid #1a1a2e !important;
    border-left: 2px solid #1a1a2e !important;
    border-right: 2px solid #5a5a6e !important;
    border-bottom: 2px solid #5a5a6e !important;
    box-shadow: inset 1px 1px 0 #2a2a3e !important;
}

/* Dark primary buttons — Red */
body.theme-dark:not(.fallout-mode) .bg-blue-600,
body.theme-dark:not(.fallout-mode) .bg-blue-500,
body.theme-dark:not(.fallout-mode) .bg-red-600 {
    background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    color: var(--color-text-inverse) !important;
    border-top: 2px solid var(--color-primary-light) !important;
    border-left: 2px solid var(--color-primary-light) !important;
    border-right: 2px solid #8b0000 !important;
    border-bottom: 2px solid #8b0000 !important;
}

/* Dark mode sidebar — dark silver */
body.theme-dark:not(.fallout-mode) aside,
body.theme-dark:not(.fallout-mode) aside .h-full,
body.theme-dark:not(.fallout-mode) #sidebar > div {
    background-color: #2a2a3e !important;
    border-right: 2px solid #0a0a1e !important;
}

/* Dark sidebar text */
body.theme-dark:not(.fallout-mode) aside .text-white,
body.theme-dark:not(.fallout-mode) aside .dark\:text-white {
    color: var(--ryse-white) !important;
}
body.theme-dark:not(.fallout-mode) aside .dark\:text-gray-400,
body.theme-dark:not(.fallout-mode) aside .dark\:text-gray-300 {
    color: var(--ryse-silver) !important;
}

/* Dark sidebar links */
body.theme-dark:not(.fallout-mode) aside .sidebar-link,
body.theme-dark:not(.fallout-mode) aside .nav-item a,
body.theme-dark:not(.fallout-mode) aside nav a {
    color: var(--ryse-silver-light) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
body.theme-dark:not(.fallout-mode) aside .sidebar-link:hover,
body.theme-dark:not(.fallout-mode) aside .nav-item a:hover,
body.theme-dark:not(.fallout-mode) aside nav a:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}

/* Dark sidebar active */
body.theme-dark:not(.fallout-mode) aside .sidebar-link.active {
    background-color: var(--color-primary) !important;
    border-left: 3px solid var(--color-accent-navy) !important;
    color: var(--color-text-inverse) !important;
}

/* Dark sidebar borders */
body.theme-dark:not(.fallout-mode) aside .dark\:border-gray-700,
body.theme-dark:not(.fallout-mode) aside .dark\:border-gray-600 {
    border-color: #3a3a4e !important;
}

/* Dark sidebar weather — sunken */
body.theme-dark:not(.fallout-mode) aside #weatherWidget {
    background: #1a1a2e !important;
    border-top: 2px solid #0a0a1e !important;
    border-left: 2px solid #0a0a1e !important;
    border-right: 2px solid #4a4a5e !important;
    border-bottom: 2px solid #4a4a5e !important;
}

/* Dark sidebar clock — sunken monospace */
body.theme-dark:not(.fallout-mode) aside #sidebarClock {
    background-color: #0a0a1e !important;
    color: #00FF00 !important;
    border-top: 2px solid #000 !important;
    border-left: 2px solid #000 !important;
    border-right: 2px solid #3a3a4e !important;
    border-bottom: 2px solid #3a3a4e !important;
    font-family: "Courier New", monospace !important;
    font-size: 0.75rem !important;
}

/* Dark sidebar theme toggle */
body.theme-dark:not(.fallout-mode) aside button[onclick="toggleTheme()"] {
    background-color: #3a3a4e !important;
    color: var(--ryse-silver-light) !important;
    border-top: 2px solid #5a5a6e !important;
    border-left: 2px solid #5a5a6e !important;
    border-right: 2px solid #1a1a2e !important;
    border-bottom: 2px solid #1a1a2e !important;
}

/* Dark sidebar nav group buttons */
body.theme-dark:not(.fallout-mode) aside button[data-group-id] {
    color: var(--ryse-silver-dark) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.theme-dark:not(.fallout-mode) aside button[data-group-id]:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}

/* Dark mode borders */
body.theme-dark:not(.fallout-mode) .dark\:border-gray-700 {
    border-color: #3a3a4e !important;
}
body.theme-dark:not(.fallout-mode) .border-gray-100,
body.theme-dark:not(.fallout-mode) .border-gray-200 {
    border-color: #3a3a4e !important;
}

/* Dark mode mobile header */
body.theme-dark:not(.fallout-mode) header.lg\:hidden {
    background-color: #2a2a3e !important;
    border-bottom: 2px solid #0a0a1e !important;
}

/* Dark mode inputs — sunken */
body.theme-dark:not(.fallout-mode) input[type="text"],
body.theme-dark:not(.fallout-mode) input[type="tel"],
body.theme-dark:not(.fallout-mode) input[type="number"],
body.theme-dark:not(.fallout-mode) input[type="email"],
body.theme-dark:not(.fallout-mode) input[type="password"],
body.theme-dark:not(.fallout-mode) input[type="search"],
body.theme-dark:not(.fallout-mode) input[type="date"],
body.theme-dark:not(.fallout-mode) textarea,
body.theme-dark:not(.fallout-mode) select {
    background-color: #0a0a1e !important;
    color: #E2E8F0 !important;
    border-top: 2px solid #000 !important;
    border-left: 2px solid #000 !important;
    border-right: 2px solid #4a4a5e !important;
    border-bottom: 2px solid #4a4a5e !important;
    box-shadow: inset 1px 1px 0 #1a1a2e !important;
}

body.theme-dark:not(.fallout-mode) input:focus,
body.theme-dark:not(.fallout-mode) textarea:focus,
body.theme-dark:not(.fallout-mode) select:focus {
    outline: 1px dotted var(--color-primary) !important;
    outline-offset: -1px !important;
}

/* Dark mode tables */
body.theme-dark:not(.fallout-mode) td {
    border: 1px solid #3a3a3a !important;
    background-color: #1f1f1f !important;
}
body.theme-dark:not(.fallout-mode) tr:nth-child(even) td {
    background-color: #262626 !important;
}

body:not(.fallout-mode) .text-blue-600,
body:not(.fallout-mode) .text-blue-700,
body:not(.fallout-mode) .hover\:text-blue-600:hover,
body:not(.fallout-mode) .hover\:text-blue-700:hover {
    color: var(--color-primary) !important;
}

body:not(.fallout-mode) .bg-blue-50,
body:not(.fallout-mode) .hover\:bg-blue-50:hover {
    background-color: var(--color-primary-pale) !important;
}

body:not(.fallout-mode) .hover\:bg-blue-100:hover {
    background-color: #fbd5d8 !important;
}

@media print {
    body:not(.fallout-mode) {
        background: #ffffff !important;
        color: #000000 !important;
    }

    body:not(.fallout-mode) * {
        box-shadow: none !important;
        text-shadow: none !important;
        background-image: none !important;
    }

    body:not(.fallout-mode) button,
    body:not(.fallout-mode) .btn,
    body:not(.fallout-mode) .badge {
        border: 1px solid #000 !important;
        box-shadow: none !important;
        text-transform: none !important;
    }
}

/* Dark mode dashboard cards — beveled tiles */
body.theme-dark:not(.fallout-mode) #dashboardGrid > a {
    background-color: #2a2a3e !important;
    border-top: 2px solid #4a4a5e !important;
    border-left: 2px solid #4a4a5e !important;
    border-right: 2px solid #0a0a1e !important;
    border-bottom: 2px solid #0a0a1e !important;
    transition: none !important;
}
body.theme-dark:not(.fallout-mode) #dashboardGrid > a:hover {
    background-color: var(--color-primary) !important;
}
body.theme-dark:not(.fallout-mode) #dashboardGrid > a:hover * {
    color: var(--ryse-white) !important;
}

/* Dark mode stat cards */
body.theme-dark:not(.fallout-mode) .dark\:bg-blue-900\/20 {
    background-color: rgba(235, 19, 31, 0.25) !important;
    border: 1px solid var(--color-primary) !important;
}
body.theme-dark:not(.fallout-mode) .dark\:bg-amber-900\/20 {
    background-color: rgba(255, 215, 0, 0.1) !important;
    border: 1px solid var(--ryse-yellow-dark) !important;
}
body.theme-dark:not(.fallout-mode) .dark\:bg-red-900\/20 {
    background-color: rgba(210, 18, 46, 0.15) !important;
    border: 1px solid var(--ryse-red) !important;
}

/* Dark mode profile menu — beveled */
body.theme-dark:not(.fallout-mode) #unifiedProfileMenu {
    background-color: #2a2a3e !important;
    border-top: 2px solid #4a4a5e !important;
    border-left: 2px solid #4a4a5e !important;
    border-right: 2px solid #0a0a1e !important;
    border-bottom: 2px solid #0a0a1e !important;
}
body.theme-dark:not(.fallout-mode) #unifiedProfileMenu .dark\:bg-gray-700 {
    background-color: #1a1a2e !important;
}

/* Dark mode developer section */
body.theme-dark:not(.fallout-mode) .dark\:bg-purple-900\/20 {
    background-color: rgba(235, 19, 31, 0.2) !important;
    border-color: var(--color-primary) !important;
}

/* Dark mode profile button colors */
body.theme-dark:not(.fallout-mode) aside .bg-blue-100,
body.theme-dark:not(.fallout-mode) aside .bg-red-100,
body.theme-dark:not(.fallout-mode) aside .bg-purple-100 {
    background-color: var(--ryse-red) !important;
    color: var(--ryse-white) !important;
}

/* ==========================================================================
 * MOBILE COMPATIBILITY
 * ========================================================================== */

/* Ensure touch targets remain ≥44px */
@media (max-width: 1024px) {
    body:not(.fallout-mode) aside .sidebar-link,
    body:not(.fallout-mode) aside .nav-item a,
    body:not(.fallout-mode) aside nav a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    body:not(.fallout-mode) button,
    body:not(.fallout-mode) [type="button"],
    body:not(.fallout-mode) [type="submit"] {
        min-height: 44px !important;
    }
}

/* Mobile sidebar overlay — darker for industrial feel */
@media (max-width: 1024px) {
    #mobileSidebarOverlay {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }
}

/* ==========================================================================
 * SCROLLBAR — Win95 Beveled (wide, blocky)
 * ========================================================================== */
body:not(.fallout-mode)::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
body:not(.fallout-mode)::-webkit-scrollbar-track {
    background-color: var(--ryse-silver-light);
    border: 1px solid var(--bevel-dark);
}
body:not(.fallout-mode)::-webkit-scrollbar-thumb {
    background-color: var(--ryse-silver);
    border-top: 2px solid var(--bevel-light);
    border-left: 2px solid var(--bevel-light);
    border-right: 2px solid var(--bevel-darker);
    border-bottom: 2px solid var(--bevel-darker);
}
body:not(.fallout-mode)::-webkit-scrollbar-button {
    background-color: var(--ryse-silver);
    border-top: 2px solid var(--bevel-light);
    border-left: 2px solid var(--bevel-light);
    border-right: 2px solid var(--bevel-darker);
    border-bottom: 2px solid var(--bevel-darker);
    display: block;
    height: 16px;
    width: 16px;
}

/* Dark mode scrollbar */
body.theme-dark:not(.fallout-mode)::-webkit-scrollbar-track {
    background-color: #1a1a2e;
    border: 1px solid #0a0a1e;
}
body.theme-dark:not(.fallout-mode)::-webkit-scrollbar-thumb {
    background-color: #3a3a4e;
    border-top: 2px solid #5a5a6e;
    border-left: 2px solid #5a5a6e;
    border-right: 2px solid #1a1a2e;
    border-bottom: 2px solid #1a1a2e;
}
body.theme-dark:not(.fallout-mode)::-webkit-scrollbar-button {
    background-color: #3a3a4e;
    border-top: 2px solid #5a5a6e;
    border-left: 2px solid #5a5a6e;
    border-right: 2px solid #1a1a2e;
    border-bottom: 2px solid #1a1a2e;
    display: block;
    height: 16px;
    width: 16px;
}

/* Sidebar scrollbar — narrower but still beveled */
body:not(.fallout-mode) aside::-webkit-scrollbar,
body:not(.fallout-mode) aside *::-webkit-scrollbar {
    width: 12px;
}
body:not(.fallout-mode) aside::-webkit-scrollbar-track,
body:not(.fallout-mode) aside *::-webkit-scrollbar-track {
    background: var(--ryse-silver-dark);
}
body:not(.fallout-mode) aside::-webkit-scrollbar-thumb,
body:not(.fallout-mode) aside *::-webkit-scrollbar-thumb {
    background-color: var(--ryse-silver);
    border-top: 1px solid var(--bevel-light);
    border-left: 1px solid var(--bevel-light);
    border-right: 1px solid var(--bevel-darker);
    border-bottom: 1px solid var(--bevel-darker);
}

/* ==========================================================================
 * TRANSITION OVERRIDES — Instant, no animation (retro feel)
 * ========================================================================== */
body:not(.fallout-mode) .transition-all,
body:not(.fallout-mode) .transition-colors,
body:not(.fallout-mode) .transition {
    transition-duration: 0ms !important;
}

/* Kill hover scale effects */
body:not(.fallout-mode) .group-hover\:scale-110 {
    transform: none !important;
}
body:not(.fallout-mode) .hover\:shadow-md:hover {
    box-shadow: none !important;
}

/* === LINKS — Classic blue underlined ====================================== */
body:not(.theme-dark):not(.fallout-mode) a:not(aside a):not(#dashboardGrid a):not(nav a) {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}
body:not(.theme-dark):not(.fallout-mode) a:not(aside a):not(#dashboardGrid a):not(nav a):hover {
    color: var(--ryse-red) !important;
}
body:not(.theme-dark):not(.fallout-mode) a:not(aside a):not(#dashboardGrid a):not(nav a):visited {
    color: #551A8B !important;
}

/* === SELECTION — Navy highlight =========================================== */
body:not(.fallout-mode) ::selection {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}

/* === FOCUS RING — Dotted outline (classic) ================================ */
body:not(.fallout-mode) *:focus-visible {
    outline: 1px dotted var(--ryse-black) !important;
    outline-offset: -1px !important;
}
body.theme-dark:not(.fallout-mode) *:focus-visible {
    outline: 1px dotted var(--ryse-white) !important;
    outline-offset: -1px !important;
}

/* === HR / DIVIDERS — Beveled groove ======================================= */
body:not(.theme-dark):not(.fallout-mode) hr {
    border: none !important;
    border-top: 1px solid var(--bevel-dark) !important;
    border-bottom: 1px solid var(--bevel-light) !important;
    height: 2px !important;
}
body.theme-dark:not(.fallout-mode) hr {
    border: none !important;
    border-top: 1px solid #1a1a2e !important;
    border-bottom: 1px solid #4a4a5e !important;
    height: 2px !important;
}

/* ==========================================================================
 * GLOBAL: Kill ALL remaining pastel backgrounds
 * ========================================================================== */
body:not(.theme-dark):not(.fallout-mode) .bg-blue-100,
body:not(.theme-dark):not(.fallout-mode) .bg-indigo-100,
body:not(.theme-dark):not(.fallout-mode) .bg-indigo-50 {
    background-color: var(--color-primary-pale) !important;
    color: var(--color-text-primary) !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-green-100 {
    background-color: #90EE90 !important;
    color: #003300 !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-purple-100 {
    background-color: var(--color-accent-purple) !important;
    color: var(--color-text-inverse) !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-gray-200 {
    background-color: var(--ryse-silver) !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-gray-300 {
    background-color: var(--ryse-silver-dark) !important;
}

/* Pastel -50 overrides — replace with industrial flat colors */
body:not(.theme-dark):not(.fallout-mode) .bg-blue-50 {
    background-color: var(--color-primary-pale) !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-green-50 {
    background-color: #C8F0C8 !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-red-50 {
    background-color: #F0C8C8 !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-yellow-50 {
    background-color: #F0E8C0 !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-amber-50 {
    background-color: #F0E0B0 !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-rose-50 {
    background-color: #F0C8C8 !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-purple-50,
body:not(.theme-dark):not(.fallout-mode) .bg-violet-50 {
    background-color: #D6D0E8 !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-slate-50 {
    background-color: var(--color-bg-card) !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-slate-900 {
    background-color: #2d2d2d !important;
}

/* Override slate/dark buttons to navy beveled */
body:not(.fallout-mode) .bg-slate-900,
body:not(.fallout-mode) .bg-slate-800 {
    background-color: #2d2d2d !important;
    color: #FFF !important;
    border-top: 2px solid #4a4a4a !important;
    border-left: 2px solid #4a4a4a !important;
    border-right: 2px solid #0a0a0a !important;
    border-bottom: 2px solid #0a0a0a !important;
}
body:not(.fallout-mode) .hover\:bg-slate-800:hover {
    background-color: #3a3a3a !important;
}

/* Bevel red/danger buttons */
body:not(.fallout-mode) .bg-red-600,
body:not(.fallout-mode) .bg-red-500 {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-top: 2px solid var(--color-primary-light) !important;
    border-left: 2px solid var(--color-primary-light) !important;
    border-right: 2px solid #8b0000 !important;
    border-bottom: 2px solid #8b0000 !important;
    box-shadow: 2px 2px 0 #000 !important;
}
body:not(.fallout-mode) .hover\:bg-red-700:hover,
body:not(.fallout-mode) .hover\:bg-red-600:hover {
    background-color: var(--color-primary-dark) !important;
}

/* Bevel blue/primary buttons */
body:not(.fallout-mode) .bg-blue-600,
body:not(.fallout-mode) .bg-blue-500 {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-top: 2px solid var(--color-primary-light) !important;
    border-left: 2px solid var(--color-primary-light) !important;
    border-right: 2px solid #8b0000 !important;
    border-bottom: 2px solid #8b0000 !important;
}
body:not(.fallout-mode) .hover\:bg-blue-700:hover {
    background-color: var(--color-primary-dark) !important;
}

/* Pastel hover overrides — keep them flat */
body:not(.theme-dark):not(.fallout-mode) .hover\:bg-slate-50:hover {
    background-color: #D4D4D4 !important;
}
body:not(.theme-dark):not(.fallout-mode) .hover\:bg-red-100:hover {
    background-color: #fbd5d8 !important;
}
body:not(.theme-dark):not(.fallout-mode) .hover\:bg-blue-100:hover {
    background-color: #fbd5d8 !important;
}
body:not(.theme-dark):not(.fallout-mode) .hover\:bg-gray-100:hover {
    background-color: #D4D4D4 !important;
}
body:not(.theme-dark):not(.fallout-mode) .hover\:bg-gray-50:hover {
    background-color: #D4D4D4 !important;
}

/* ==========================================================================
 * GLOBAL: Bevel ALL green/success buttons
 * ========================================================================== */
body:not(.fallout-mode) .bg-green-600,
body:not(.fallout-mode) .bg-green-500,
body:not(.fallout-mode) .bg-emerald-600,
body:not(.fallout-mode) .bg-emerald-500 {
    background-color: #006600 !important;
    color: #FFF !important;
    border-top: 2px solid #00AA00 !important;
    border-left: 2px solid #00AA00 !important;
    border-right: 2px solid #003300 !important;
    border-bottom: 2px solid #003300 !important;
    box-shadow: inset 1px 1px 0 #00CC00, inset -1px -1px 0 #004400 !important;
}
body:not(.fallout-mode) .bg-green-600:hover,
body:not(.fallout-mode) .bg-green-500:hover,
body:not(.fallout-mode) .hover\:bg-green-700:hover {
    background-color: #005500 !important;
}

/* ==========================================================================
 * GLOBAL: Bevel ALL remaining gray/outline buttons
 * ========================================================================== */
body:not(.theme-dark):not(.fallout-mode) .bg-gray-100:not(aside .bg-gray-100):not(tr .bg-gray-100) {
    background-color: var(--ryse-silver) !important;
}
body:not(.theme-dark):not(.fallout-mode) .bg-gray-200:not(aside .bg-gray-200) {
    background-color: var(--ryse-silver) !important;
}

/* ==========================================================================
 * FOOTER: High contrast on teal background
 * ========================================================================== */
body:not(.theme-dark):not(.fallout-mode) footer,
body:not(.theme-dark):not(.fallout-mode) .footer {
    background-color: var(--ryse-silver) !important;
    color: #000 !important;
    border-top: 2px solid var(--bevel-light) !important;
    box-shadow: inset 0 1px 0 var(--bevel-lightest) !important;
    padding: 4px 12px !important;
    font-size: 0.75rem !important;
}
body:not(.theme-dark):not(.fallout-mode) footer a,
body:not(.theme-dark):not(.fallout-mode) .footer a {
    color: var(--color-primary) !important;
}
body:not(.theme-dark):not(.fallout-mode) footer .text-gray-500,
body:not(.theme-dark):not(.fallout-mode) footer .text-gray-400,
body:not(.theme-dark):not(.fallout-mode) footer .text-gray-600 {
    color: #333 !important;
}

body.theme-dark:not(.fallout-mode) footer,
body.theme-dark:not(.fallout-mode) .footer {
    background-color: #2a2a3e !important;
    color: #C0C0C0 !important;
    border-top: 2px solid #4a4a5e !important;
    padding: 4px 12px !important;
    font-size: 0.75rem !important;
}

/* ==========================================================================
 * WIN95 STATUS BAR — Bottom of page
 * ========================================================================== */
.ryse-status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: var(--ryse-silver);
    border-top: 2px solid var(--bevel-light);
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.6875rem;
    color: #333;
    z-index: 9998;
    box-shadow: inset 0 1px 0 var(--bevel-lightest);
}

.ryse-status-bar__section {
    padding: 0 8px;
    border-top: 1px solid var(--bevel-darker);
    border-left: 1px solid var(--bevel-darker);
    border-right: 1px solid var(--bevel-light);
    border-bottom: 1px solid var(--bevel-light);
    height: 18px;
    display: flex;
    align-items: center;
    margin-right: 4px;
}

body.theme-dark .ryse-status-bar {
    background: #2a2a3e;
    border-top: 2px solid #4a4a5e;
    color: #C0C0C0;
    box-shadow: none;
}

body.theme-dark .ryse-status-bar__section {
    border-top-color: #0a0a1e;
    border-left-color: #0a0a1e;
    border-right-color: #4a4a5e;
    border-bottom-color: #4a4a5e;
}

/* Add bottom padding to body so content doesn't hide behind status bar */
body:not(.fallout-mode) {
    padding-bottom: 28px !important;
}

/* ==========================================================================
 * GLOBAL: Kill ALL remaining rounded-full on non-fallout elements
 * ========================================================================== */
body:not(.fallout-mode) .rounded-full {
    border-radius: 0 !important;
}

/* ==========================================================================
 * GLOBAL: Override ring/focus utilities to dotted
 * ========================================================================== */
body:not(.fallout-mode) .ring-2,
body:not(.fallout-mode) .ring-1,
body:not(.fallout-mode) .ring {
    box-shadow: none !important;
    outline: 1px dotted #000 !important;
}
body.theme-dark:not(.fallout-mode) .ring-2,
body.theme-dark:not(.fallout-mode) .ring-1,
body.theme-dark:not(.fallout-mode) .ring {
    outline-color: #FFF !important;
}