/* =========================
   MOD HOB CORE PALETTE
   ========================= */
:root {
    /* Brand Colors */
    --mh-terracotta: #AE360E;
    --mh-terracotta-dark: #992F0C;
    --mh-terracotta-deep: #7F290A;
    --mh-teal: #1A5A67;
    --mh-teal-dark: #164B56;
    --mh-forest: #4B6B3B;
    --mh-moss: #8BAA79;
    --mh-clay: #B36A4E;
    --mh-orange: #E55D28;
    --mh-gold: #D89B2C;
    --mh-turquoise: #60A2B3;
    --mh-yellow: #F3D87C;
    --mh-cream: #F6ECD4;
    --mh-offwhite: #F6F1E8;
    --mh-charcoal: #3B2B1F;
    --mh-slate: #556368;
    --mh-stone: #7A7A7A;
    --mh-radius: 10px;
}

/* =========================
   THEME VARIABLE MAPPINGS
   ========================= */

/* 1. Default and Light Themes */
[data-theme-light], :root:not([data-theme]) {
    --color-main-background: var(--mh-offwhite) !important;
    --color-main-background-rgb: 246, 241, 232;
    --color-main-text: var(--mh-charcoal);
    --color-text-light: var(--mh-slate);
    --color-primary: var(--mh-terracotta) !important;
    --color-primary-element: var(--mh-terracotta) !important;
    --color-primary-hover: var(--mh-terracotta-dark) !important;
}

/* 2. Dark Theme */
[data-theme-dark] {
    --color-main-background: var(--mh-charcoal) !important;
    --color-main-background-rgb: 59, 43, 31;
    --color-main-text: var(--mh-offwhite);
    --color-text-light: var(--mh-moss);
    --color-primary: var(--mh-turquoise) !important;
    --color-primary-text: #000000;
    --color-border: var(--mh-slate);
}

/* 3. Dark High-Contrast */
[data-theme-dark-highcontrast] {
    --color-main-background: #000000 !important;
    --color-main-background-rgb: 0, 0, 0;
    --color-main-text: #ffffff !important;
    --color-primary: var(--mh-yellow) !important;
    --color-primary-text: #000000;
    --color-border: #ffffff;
}

/* 4. Light High-Contrast */
[data-theme-light-highcontrast] {
    --color-main-background: #ffffff !important;
    --color-main-background-rgb: 255, 255, 255;
    --color-main-text: #000000 !important;
    --color-primary: var(--mh-terracotta-deep) !important;
    --color-primary-text: #ffffff;
}

/* 5. OpenDyslexic Theme Mapping */
[data-theme-opendyslexic] {
    --font-face: "OpenDyslexic", "Barlow", sans-serif !important;
    --color-main-background: var(--mh-offwhite);
    --color-main-text: var(--mh-charcoal);
}

/* =========================
   TYPOGRAPHY & ACCESSIBILITY
   ========================= */

body {
    font-family: 'Barlow', system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'National Park', sans-serif;
}
#app-dashboard>h2 {
    color: var(--mh-offwhite)!important;
}

/* Scoped Header Colors */
[data-theme-light] h1, [data-theme-light] h2, :root:not([data-theme]) h1, :root:not([data-theme]) h2 { color: var(--mh-teal); }
[data-theme-light] h3 { color: var(--mh-terracotta); }
[data-theme-light] h4 { color: var(--mh-charcoal); }

[data-theme-dark] h1, [data-theme-dark] h2, [data-theme-dark-highcontrast] h1, [data-theme-dark-highcontrast] h2 { color: var(--mh-turquoise) !important; }
[data-theme-dark] h3, [data-theme-dark-highcontrast] h3 { color: var(--mh-clay) !important; }
[data-theme-dark] h4, [data-theme-dark-highcontrast] h4 { color: var(--mh-offwhite) !important; }

/* Sidebar Captions */
.app-navigation-caption {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}
[data-theme-dark] .app-navigation-caption, 
[data-theme-dark-highcontrast] .app-navigation-caption {
    color: var(--mh-moss) !important;
}

/* =========================
   BRAND ACTION ACCENTS
   ========================= */

/* Primary Action Buttons */
.primary, #controls .button, .action-button.primary, button.primary, .button.primary {
    background-color: var(--mh-terracotta) !important;
    border-color: var(--mh-terracotta-dark) !important;
    color: #ffffff !important;
    border-radius: var(--mh-radius) !important;
}

/* Checkbox Styling */
input.checkbox:checked + label:before,
input[type='checkbox']:checked + label:before {
    background-color: var(--mh-teal) !important;
    border-color: var(--mh-teal-dark) !important;
}

/* Sidebar Active Indicator */
#app-navigation ul li.active, 
#app-navigation ul li.active a {
    background-color: var(--mh-cream) !important;
    color: var(--mh-charcoal) !important;
}

/* =========================
   LOGO & HEADER RECOVERY
   ========================= */
#header #nextcloud {
    width: 140px !important;
    min-width: 140px !important;
    display: flex !important;
    align-items: center !important;
}

#header .logo.logo-icon {
    width: 120px !important;
    max-width: 120px !important;
    margin: 2px 16px;
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}

/* =========================
   ICON CONTRAST FIX
   ========================= */

/* Darken icons for Light themes */
[data-theme-light] [class^="icon-"], 
[data-theme-light] [class*=" icon-"],
:root:not([data-theme]) [class^="icon-"], 
:root:not([data-theme]) [class*=" icon-"],
[data-theme-light] .action, 
:root:not([data-theme]) .action {
    filter: brightness(0) opacity(0.7) !important;
}

/* Ensure icons remain visible in Dark modes */
[data-theme-dark] [class^="icon-"],
[data-theme-dark] [class*=" icon-"],
[data-theme-dark-highcontrast] [class^="icon-"],
[data-theme-dark-highcontrast] [class*=" icon-"] {
    filter: none !important;
    opacity: 1 !important;
}

/* Handle top navigation icons */
[data-theme-light] #appmenu li a, 
:root:not([data-theme]) #appmenu li a {
    filter: brightness(0) opacity(0.8);
}

[data-theme-dark] #appmenu li a,
[data-theme-dark-highcontrast] #appmenu li a {
    filter: none;
    opacity: 1 !important;
}
/* =========================
   LIGHT & DEFAULT THEME FIX
   ========================= */

/* 1. Target both Light Theme AND Default (no attribute) */
[data-theme-light], :root:not([data-theme]) {
    --color-main-background: var(--mh-offwhite) !important;
    --color-primary: var(--mh-terracotta) !important;
}

/* 2. Icon Definaton Fix */
/* Uses a combination of invert and brightness to ensure crisp dark icons */
[data-theme-light] [class^="icon-"], 
[data-theme-light] [class*=" icon-"],
:root:not([data-theme]) [class^="icon-"], 
:root:not([data-theme]) [class*=" icon-"],
[data-theme-light] .action, 
:root:not([data-theme]) .action {
    filter: invert(1) brightness(0.2) opacity(0.6) !important;
}

/* 3. Sidebar "Active" Highlighting */
/* Switched to a clean Teal tint with a solid left-edge indicator */
[data-theme-light] #app-navigation ul li.active, 
[data-theme-light] #app-navigation ul li.active a,
:root:not([data-theme]) #app-navigation ul li.active, 
:root:not([data-theme]) #app-navigation ul li.active a {
    background-color: rgba(26, 90, 103, 0.12) !important; /* Soft Teal tint */
    border-left: 4px solid var(--mh-teal) !important;
    color: var(--mh-teal) !important;
    border-radius: 0 var(--mh-radius) var(--mh-radius) 0 !important;
}

/* Ensure active icons are high-contrast */
[data-theme-light] #app-navigation ul li.active [class^="icon-"],
:root:not([data-theme]) #app-navigation ul li.active [class^="icon-"] {
    filter: invert(1) brightness(0) opacity(1) !important;
}

/* 4. Top Header Icons Recovery */
[data-theme-light] #appmenu li a, 
:root:not([data-theme]) #appmenu li a {
    filter: invert(1) brightness(0.4);
    opacity: 0.8;
}

/* 5. Dark/High-Contrast Reset (Prevents breakage in other modes) */
[data-theme-dark] [class^="icon-"],
[data-theme-dark-highcontrast] [class^="icon-"],
[data-theme-dark] #appmenu li a {
    filter: none !important;
    opacity: 1 !important;
}