/*
    REM Nutrition – Theme override CSS
    The @media(prefers-color-scheme:light) block has been intentionally removed
    so that base.css brand variables (#90DEFF) are preserved for all light-mode users.

    Dark-mode variables (only activated when user clicks the toggle: data-theme="dark").
    Healthcare mandate: white background is the default, dark mode is off by default.
*/

/* Keep dark-mode available as a user-activated option, but it won't auto-activate */
html[data-theme="dark"] {
    --primary:       #79aec8;
    --secondary:     #417690;
    --accent:        #f5dd5d;
    --primary-fg:    #fff;

    --body-fg:            #e8e8e8;
    --body-bg:            #1a1a1a;
    --body-quiet-color:   #aaa;
    --body-loud-color:    #fff;

    --header-color:           #ffc;
    --header-branding-color:  #f5dd5d;
    --header-bg:              #2a2a2a;
    --header-link-color:      #fff;

    --breadcrumbs-fg:       #c4dce8;
    --breadcrumbs-link-fg:  #90DEFF;
    --breadcrumbs-bg:       #222;

    --link-fg:           #90DEFF;
    --link-hover-color:  #5bc4f7;
    --link-selected-fg:  #5bc4f7;

    --hairline-color: #333;
    --border-color:   #444;

    --error-fg: #e05c5c;
    --all-good:  #50c878;

    --message-success-bg: #1a3326;
    --message-warning-bg: #3a3010;
    --message-error-bg:   #3a1a1a;

    --darkened-bg:  #222;
    --selected-bg:  #1f3340;
    --selected-row: #1f3340;

    --button-fg:               #fff;
    --button-bg:               #417690;
    --button-hover-bg:         #205067;
    --default-button-bg:       #417690;
    --default-button-hover-bg: #205067;
    --close-button-bg:         #747474;
    --close-button-hover-bg:   #333;
    --delete-button-bg:        #ba2121;
    --delete-button-hover-bg:  #a41515;

    --object-tools-fg:       #fff;
    --object-tools-bg:       #747474;
    --object-tools-hover-bg: #333;
}

/* ===== THEME TOGGLE BUTTON ===== */

.theme-toggle {
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
    vertical-align: middle;
    margin-inline-start: 8px;
    margin-top: -1px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.theme-toggle:hover {
    opacity: 1;
}

.theme-toggle svg {
    vertical-align: middle;
    height: 1.1rem;
    width: 1.1rem;
    display: none;
}

.theme-toggle .visually-hidden {
    display: none;
}

html[data-theme="auto"]  .theme-toggle .theme-label-when-auto  { display: block; }
html[data-theme="dark"]  .theme-toggle .theme-label-when-dark  { display: block; }
html[data-theme="light"] .theme-toggle .theme-label-when-light { display: block; }

/* ===== THEME ICONS ===== */

.theme-toggle svg.theme-icon-when-light,
.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark {
    fill: currentColor;
    color: var(--header-color, #2c3e50);
}

html[data-theme="auto"]  .theme-toggle svg.theme-icon-when-auto  { display: block; }
html[data-theme="dark"]  .theme-toggle svg.theme-icon-when-dark  { display: block; }
html[data-theme="light"] .theme-toggle svg.theme-icon-when-light { display: block; }

/* ===== ACCESSIBILITY HELPER ===== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}