/**
 * Theme System
 * 
 * Three themes available:
 * - salesforce (default): Classic Salesforce blue/gray/white
 * - retro: Authentic Borland/MS-DOS style
 * - sacred: Terminal aesthetics inspired by sacred.computer
 * 
 * To apply a theme, add the data-theme attribute to the body:
 * <body data-theme="retro">
 */

/* ============================================
   CSS CUSTOM PROPERTIES FOR THEMING
   ============================================ */

:root,
body[data-theme="salesforce"] {
    /* Primary brand colors */
    --oi-color-brand-primary: #0176d3;
    --oi-color-brand-primary-hover: #014486;
    --oi-color-brand-primary-light: #eef4ff;
    --oi-color-brand-secondary: #16325c;
    
    /* Text colors */
    --oi-color-text-default: #181818;
    --oi-color-text-secondary: #3e3e3c;
    --oi-color-text-muted: #706e6b;
    --oi-color-text-placeholder: #939393;
    --oi-color-text-inverse: #ffffff;
    --oi-color-text-link: #0176d3;
    --oi-color-text-link-hover: #014486;
    
    /* Background colors */
    --oi-color-background-default: lightsteelblue;
    --oi-color-background-alt: #b8c8dc;
    --oi-color-background-alt-2: #c8d4e4;
    --oi-color-background-input: #ffffff;
    --oi-color-background-highlight: #f0f7ff;
    --oi-color-background-selected: #eef4ff;
    --oi-color-background-card: #ffffff;
    
    /* Border colors */
    --oi-color-border-default: #dddbda;
    --oi-color-border-input: #d0d7de;
    --oi-color-border-focus: #0176d3;
    --oi-color-border-separator: #d8dde6;
    
    /* Status colors */
    --oi-color-success: #2e844a;
    --oi-color-success-light: #d4edda;
    --oi-color-warning: #fe9339;
    --oi-color-warning-light: #fff3cd;
    --oi-color-error: #ea001e;
    --oi-color-error-light: #fef1ee;
    --oi-color-error-dark: #c23934;
    
    /* Org type badges */
    --oi-color-badge-prod: #c23934;
    --oi-color-badge-sandbox: #fe9339;
    --oi-color-badge-test: #2e844a;
    
    /* Syntax highlighting */
    --oi-syntax-keyword: #8250df;
    --oi-syntax-function: #0550ae;
    --oi-syntax-operator: #cf222e;
    --oi-syntax-string: #0a3069;
    --oi-syntax-number: #0550ae;
    --oi-syntax-field: #116329;
    --oi-syntax-object: #953800;
    --oi-syntax-comment: #6e7781;
    --oi-syntax-caret: #24292e;
    
    /* Header/Navigation */
    --oi-color-header-bg: #16325c;
    --oi-color-header-text: #ffffff;
    --oi-color-tooltip-bg: #16325c;
    
    /* Shadows */
    --oi-shadow-focus: rgba(9, 105, 218, 0.15);
    --oi-shadow-dropdown: rgba(0, 0, 0, 0.1);
    
    /* Tab colors */
    --oi-color-tab-background: rgb(229, 229, 229);
    --oi-color-tab-active: #0176d3;
}

/* ============================================
   RETRO THEME - Authentic Borland/MS-DOS style
   Inspired by Turbo C, Turbo Pascal, Borland C++
   ============================================ */

body[data-theme="retro"] {
    /* Primary brand colors - Borland green for buttons */
    --oi-color-brand-primary: #35f035;
    --oi-color-brand-primary-hover: #00ff00;
    --oi-color-brand-primary-light: #005500;
    --oi-color-brand-secondary: #00aaaa;
    
    /* Text colors - Classic DOS white/yellow on blue */
    --oi-color-text-default: #ffffff;
    --oi-color-text-secondary: #ffff55;
    --oi-color-text-muted: #aaaaaa;
    --oi-color-text-placeholder: #555555;
    --oi-color-text-inverse: #000000;
    --oi-color-text-link: #ffff55;
    --oi-color-text-link-hover: #ffffff;
    
    /* Background colors - DOS blue with gray dialogs */
    --oi-color-background-default: #0000aa;
    --oi-color-background-alt: #000080;
    --oi-color-background-alt-2: #0000aa;
    --oi-color-background-input: #000080;
    --oi-color-background-highlight: #000080;
    --oi-color-background-selected: #00aaaa;
    --oi-color-background-card: #aaaaaa;
    
    /* Border colors - gray/black for 3D effect */
    --oi-color-border-default: #000000;
    --oi-color-border-input: #555555;
    --oi-color-border-focus: #ffffff;
    --oi-color-border-separator: #555555;
    
    /* Status colors - DOS palette */
    --oi-color-success: #00aa00;
    --oi-color-success-light: #005500;
    --oi-color-warning: #ffff55;
    --oi-color-warning-light: #555500;
    --oi-color-error: #ff5555;
    --oi-color-error-light: #550000;
    --oi-color-error-dark: #aa0000;
    
    /* Org type badges */
    --oi-color-badge-prod: #ff5555;
    --oi-color-badge-sandbox: #ffff55;
    --oi-color-badge-test: #00aa00;
    
    /* Syntax highlighting - DOS colors */
    --oi-syntax-keyword: #ffffff;
    --oi-syntax-function: #ffff55;
    --oi-syntax-operator: #ff55ff;
    --oi-syntax-string: #55ff55;
    --oi-syntax-number: #55ffff;
    --oi-syntax-field: #ffff55;
    --oi-syntax-object: #ff5555;
    --oi-syntax-comment: #aaaaaa;
    --oi-syntax-caret: #ffffff;
    
    /* Header/Navigation - cyan menu bar like Turbo C */
    --oi-color-header-bg: #00aaaa;
    --oi-color-header-text: #000000;
    --oi-color-tooltip-bg: #aaaaaa;
    
    /* Shadows - none, we use offset box-shadow for 3D */
    --oi-shadow-focus: transparent;
    --oi-shadow-dropdown: transparent;
    
    /* Tab colors - cyan header bar */
    --oi-color-tab-background: #00aaaa;
    --oi-color-tab-active: #000000;
}

/* ============================================
   SACRED THEME - Terminal aesthetics
   Inspired by sacred.computer - Light theme
   ============================================ */

body[data-theme="sacred"] {
    /* Primary brand colors - black/green for terminal look */
    --oi-color-brand-primary: #000000;
    --oi-color-brand-primary-hover: #333333;
    --oi-color-brand-primary-light: #d4f5d4;
    --oi-color-brand-secondary: #2e7d32;
    
    /* Text colors - Black on white for readability */
    --oi-color-text-default: #000000;
    --oi-color-text-secondary: #333333;
    --oi-color-text-muted: #666666;
    --oi-color-text-placeholder: #999999;
    --oi-color-text-inverse: #ffffff;
    --oi-color-text-link: #000000;
    --oi-color-text-link-hover: #2e7d32;
    
    /* Background colors - White with light green accents */
    --oi-color-background-default: #ffffff;
    --oi-color-background-alt: #e8f5e9;
    --oi-color-background-alt-2: #f1f8e9;
    --oi-color-background-input: #ffffff;
    --oi-color-background-highlight: #c8e6c9;
    --oi-color-background-selected: #a5d6a7;
    --oi-color-background-card: #e8e8e8;
    
    /* Border colors - Black for clean lines */
    --oi-color-border-default: #000000;
    --oi-color-border-input: #000000;
    --oi-color-border-focus: #000000;
    --oi-color-border-separator: #cccccc;
    
    /* Status colors - Green-focused palette */
    --oi-color-success: #2e7d32;
    --oi-color-success-light: #c8e6c9;
    --oi-color-warning: #8a7a40;
    --oi-color-warning-light: #f0e8c8;
    --oi-color-error: #8a4a4a;
    --oi-color-error-light: #f0d4d4;
    --oi-color-error-dark: #6a3a3a;
    
    /* Org type badges */
    --oi-color-badge-prod: #6a3a3a;
    --oi-color-badge-sandbox: #8a7a40;
    --oi-color-badge-test: #2e7d32;
    
    /* Syntax highlighting - Monochrome inspired */
    --oi-syntax-keyword: #000000;
    --oi-syntax-function: #333333;
    --oi-syntax-operator: #000000;
    --oi-syntax-string: #555555;
    --oi-syntax-number: #444444;
    --oi-syntax-field: #333333;
    --oi-syntax-object: #222222;
    --oi-syntax-comment: #888888;
    --oi-syntax-caret: #000000;
    
    /* Header/Navigation - Black bar like sacred.computer dialogs */
    --oi-color-header-bg: #000000;
    --oi-color-header-text: #ffffff;
    --oi-color-tooltip-bg: #000000;
    
    /* Shadows - Subtle depth */
    --oi-shadow-focus: rgba(0, 0, 0, 0.15);
    --oi-shadow-dropdown: rgba(0, 0, 0, 0.2);
    
    /* Tab colors - green accent */
    --oi-color-tab-background: #c8e6c9;
    --oi-color-tab-active: #000000;
}

/* ============================================
   GLOBAL OVERRIDES FOR SLDS COMPONENTS
   ============================================ */

/* Override SLDS brand colors */
body[data-theme="retro"],
body[data-theme="sacred"] {
    /* Override SLDS default backgrounds */
    --slds-g-color-neutral-base-100: var(--oi-color-background-default);
    --slds-g-color-neutral-base-95: var(--oi-color-background-alt);
    --slds-g-color-brand-base-50: var(--oi-color-brand-primary);
    --slds-g-color-brand-base-30: var(--oi-color-brand-primary-hover);
}

/* ============================================
   Habits screen — dark palette
   ============================================

   page/habits paints itself from --habit-* tokens, each of which reads an
   --oi-habit-* override first. Those overrides have to be set here rather than
   in the component stylesheet: the theme lives on <body>, the component sits
   in a native shadow root, and a custom property is the only thing that
   crosses that boundary (a [data-theme] ancestor selector written inside the
   component would never match). Both themes are dark, so both take Apple's
   dark system values; only the tint colour differs. */
body[data-theme="retro"],
body[data-theme="sacred"] {
    --oi-habit-bg: #000000;
    --oi-habit-card: #1c1c1e;
    --oi-habit-label: #ffffff;
    --oi-habit-label-2: rgba(235, 235, 245, 0.62);
    --oi-habit-label-3: rgba(235, 235, 245, 0.32);
    --oi-habit-sep: rgba(235, 235, 245, 0.12);
    --oi-habit-fill: rgba(118, 118, 128, 0.28);
    --oi-habit-fill-2: rgba(118, 118, 128, 0.16);
    --oi-habit-thumb: #636366;
    --oi-habit-shadow: none;
    --oi-habit-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);

    --oi-habit-green: #30d158;
    --oi-habit-red: #ff453a;

    --oi-habit-band-good: #30d158;
    --oi-habit-band-good-fill: rgba(48, 209, 88, 0.24);
    --oi-habit-band-good-ink: #4be06e;
    --oi-habit-band-ok: #e0bc00;
    --oi-habit-band-ok-fill: rgba(255, 214, 10, 0.24);
    --oi-habit-band-ok-ink: #ffd60a;
    --oi-habit-band-warn: #ff9f0a;
    --oi-habit-band-warn-fill: rgba(255, 159, 10, 0.24);
    --oi-habit-band-warn-ink: #ffb340;
    --oi-habit-band-bad: #ff7a28;
    --oi-habit-band-bad-fill: rgba(255, 122, 40, 0.24);
    --oi-habit-band-bad-ink: #ff9052;
    --oi-habit-band-worst: #ff453a;
    --oi-habit-band-worst-fill: rgba(255, 69, 58, 0.24);
    --oi-habit-band-worst-ink: #ff6961;
}

/* The tint that carries today's ring, the edit button and the primary action
   follows each theme's own accent rather than iOS blue. */
body[data-theme="retro"] {
    --oi-habit-blue: #35f035;
}

body[data-theme="sacred"] {
    --oi-habit-blue: #d8b45a;
}

/* Apply theme to body background */
body {
    background-color: var(--oi-color-background-default, #ffffff);
    color: var(--oi-color-text-default, #181818);
}

/* Override common SLDS classes for theming */
.slds-theme_default {
    background-color: var(--oi-color-background-default) !important;
    color: var(--oi-color-text-default) !important;
}

.slds-theme_shade {
    background-color: var(--oi-color-background-alt) !important;
}

/* Links */
body a {
    color: var(--oi-color-text-link);
}

body a:hover {
    color: var(--oi-color-text-link-hover);
}

/* SLDS Box component */
.slds-box {
    background-color: var(--oi-color-background-default);
    border-color: var(--oi-color-border-default);
}

/* SLDS Card component */
.slds-card {
    background-color: var(--oi-color-background-default);
}

/* SLDS Input fields */
.slds-input,
.slds-textarea,
.slds-select,
.slds-combobox__input {
    background-color: var(--oi-color-background-input);
    border-color: var(--oi-color-border-input);
    color: var(--oi-color-text-default);
}

.slds-input:focus,
.slds-textarea:focus,
.slds-select:focus {
    border-color: var(--oi-color-border-focus);
    box-shadow: 0 0 0 3px var(--oi-shadow-focus);
}

/* SLDS Text colors */
.slds-text-color_weak,
.slds-text-color_inverse-weak {
    color: var(--oi-color-text-muted) !important;
}

/* SLDS Button */
.slds-button_brand {
    background-color: var(--oi-color-brand-primary);
    border-color: var(--oi-color-brand-primary);
}

.slds-button_brand:hover {
    background-color: var(--oi-color-brand-primary-hover);
    border-color: var(--oi-color-brand-primary-hover);
}

/* SLDS Table */
.slds-table thead th {
    background-color: var(--oi-color-background-alt);
}

.slds-table tbody tr:hover td {
    background-color: var(--oi-color-background-highlight);
}

/* Tabs */
.slds-tabs_default__link {
    color: var(--oi-color-text-secondary);
}

.slds-tabs_default__item.slds-is-active .slds-tabs_default__link {
    color: var(--oi-color-brand-primary);
    border-bottom-color: var(--oi-color-brand-primary);
}

/* Navigation bar overrides for retro theme */
body[data-theme="retro"] .slds-global-header,
body[data-theme="retro"] .slds-context-bar {
    background-color: var(--oi-color-header-bg);
}

body[data-theme="retro"] .slds-context-bar__item .slds-context-bar__label-action {
    color: var(--oi-color-header-text);
}

/* ============================================
   RETRO THEME - Authentic Borland/MS-DOS style
   ============================================ */

/* Monospace font for authentic DOS look */
body[data-theme="retro"] {
    font-family: 'Perfect DOS VGA 437', 'Fixedsys', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 0;
}

/* DOS-style header bar - cyan background with black text like Turbo C menu */
body[data-theme="retro"] .slds-context-bar {
    background-color: #00aaaa !important;
    border: none;
    border-bottom: 2px solid #005555;
}

body[data-theme="retro"] .slds-context-bar__item:not(.slds-is-active) .slds-context-bar__label-action {
    color: #000000 !important;
    font-weight: normal;
}

/* Active menu item - red highlight like Turbo C */
body[data-theme="retro"] .slds-context-bar__item.slds-is-active {
    background-color: #aa0000 !important;
    border: none;
}

body[data-theme="retro"] .slds-context-bar__item.slds-is-active .slds-context-bar__label-action {
    color: #ffffff !important;
    font-weight: normal;
}

/* Borland-style dialog boxes with gray background and 3D shadow */
body[data-theme="retro"] .slds-box,
body[data-theme="retro"] .slds-card {
    background-color: #aaaaaa;
    border: 2px solid #ffffff;
    border-right-color: #555555;
    border-bottom-color: #555555;
    box-shadow: 3px 3px 0 #000000;
    color: #000000;
}

/* Card body text should be dark on gray */
body[data-theme="retro"] .slds-box *,
body[data-theme="retro"] .slds-card * {
    color: #000000;
}

/* But keep links yellow/highlighted */
body[data-theme="retro"] .slds-box a,
body[data-theme="retro"] .slds-card a {
    color: #0000aa;
}

body[data-theme="retro"] .slds-box a:hover,
body[data-theme="retro"] .slds-card a:hover {
    color: #000080;
    text-decoration: underline;
}

/* DOS-style buttons - 3D raised effect */
body[data-theme="retro"] .slds-button {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: normal;
}

/* Primary button - Green like Turbo Pascal OK button */
body[data-theme="retro"] .slds-button_brand {
    background-color: #00aa00;
    border: 2px solid #55ff55;
    border-right-color: #005500;
    border-bottom-color: #005500;
    color: #ffffff;
    box-shadow: 2px 2px 0 #000000;
}

body[data-theme="retro"] .slds-button_brand:hover {
    background-color: #00cc00;
    border-color: #55ff55;
    border-right-color: #005500;
    border-bottom-color: #005500;
    color: #ffffff;
}

body[data-theme="retro"] .slds-button_brand:active {
    background-color: #008800;
    border: 2px solid #005500;
    border-right-color: #55ff55;
    border-bottom-color: #55ff55;
    box-shadow: none;
    transform: translate(2px, 2px);
}

/* Neutral button - Gray 3D style */
body[data-theme="retro"] .slds-button_neutral {
    background-color: #aaaaaa;
    border: 2px solid #ffffff;
    border-right-color: #555555;
    border-bottom-color: #555555;
    color: #000000;
    box-shadow: 2px 2px 0 #000000;
}

body[data-theme="retro"] .slds-button_neutral:hover {
    background-color: #cccccc;
    color: #000000;
}

body[data-theme="retro"] .slds-button_neutral:active {
    background-color: #888888;
    border: 2px solid #555555;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    box-shadow: none;
    transform: translate(2px, 2px);
}

/* DOS-style inputs - dark blue with bright text */
body[data-theme="retro"] .slds-input,
body[data-theme="retro"] .slds-textarea,
body[data-theme="retro"] .slds-select {
    border: 2px solid #555555;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    background-color: #000080;
    color: #ffff55;
}

body[data-theme="retro"] .slds-input:focus,
body[data-theme="retro"] .slds-textarea:focus,
body[data-theme="retro"] .slds-select:focus {
    border-color: #ffff55;
    box-shadow: none;
    outline: none;
}

body[data-theme="retro"] .slds-input::placeholder,
body[data-theme="retro"] .slds-textarea::placeholder {
    color: #5555aa;
}

/* DOS-style select dropdown */
body[data-theme="retro"] .slds-select {
    background-image: none;
}

/* DOS-style tables */
body[data-theme="retro"] .slds-table {
    border: 2px solid #555555;
    background-color: #000080;
}

body[data-theme="retro"] .slds-table thead th {
    background-color: #00aaaa;
    color: #000000 !important;
    border: none;
    font-weight: normal;
    border-bottom: 2px solid #005555;
}

/* Ensure ALL text in table headers is black */
body[data-theme="retro"] .slds-table thead th *,
body[data-theme="retro"] .slds-table thead th span,
body[data-theme="retro"] .slds-table thead th div,
body[data-theme="retro"] .slds-table thead th a {
    color: #000000 !important;
}

body[data-theme="retro"] .slds-table tbody td {
    border-color: #005555;
    color: #55ffff !important;
    background-color: #000080;
}

/* Ensure ALL text in table cells is bright cyan for readability */
body[data-theme="retro"] .slds-table tbody td *,
body[data-theme="retro"] .slds-table tbody td span,
body[data-theme="retro"] .slds-table tbody td div {
    color: #55ffff !important;
}

/* Links in table cells - bright yellow */
body[data-theme="retro"] .slds-table tbody td a {
    color: #ffff55 !important;
}

body[data-theme="retro"] .slds-table tbody td a:hover {
    color: #ffffff !important;
}

body[data-theme="retro"] .slds-table tbody tr:hover td {
    background-color: #0000aa;
    color: #ffffff !important;
}

body[data-theme="retro"] .slds-table tbody tr:hover td *,
body[data-theme="retro"] .slds-table tbody tr:hover td span,
body[data-theme="retro"] .slds-table tbody tr:hover td div {
    color: #ffffff !important;
}

body[data-theme="retro"] .slds-table tbody tr:hover td a {
    color: #ffff55 !important;
}

/* DOS-style tabs - cyan bar with active highlight */
body[data-theme="retro"] .slds-tabs_default__nav {
    background-color: #00aaaa;
    border: none;
    border-bottom: 2px solid #005555;
}

body[data-theme="retro"] .slds-tabs_default__item .slds-tabs_default__link {
    color: #000000;
    border: none;
    font-weight: normal;
    padding: 8px 16px;
}

body[data-theme="retro"] .slds-tabs_default__item:hover .slds-tabs_default__link {
    background-color: #55ffff;
}

body[data-theme="retro"] .slds-tabs_default__item.slds-is-active .slds-tabs_default__link {
    background-color: #aa0000;
    color: #ffffff;
    border: none;
}

/* Remove all rounded corners for authentic blocky look */
body[data-theme="retro"] * {
    border-radius: 0 !important;
}

/* 3D shadow for modals and dialogs */
body[data-theme="retro"] .slds-modal__container {
    background-color: #aaaaaa;
    border: 2px solid #ffffff;
    border-right-color: #555555;
    border-bottom-color: #555555;
    box-shadow: 4px 4px 0 #000000;
    color: #000000;
}

/* Checkbox styling for DOS look */
body[data-theme="retro"] .slds-checkbox_faux {
    background-color: #000080;
    border: 2px solid #555555;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

body[data-theme="retro"] .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux {
    background-color: #00aa00;
    border-color: #00ff00;
}

/* Form labels on gray background */
body[data-theme="retro"] .slds-form-element__label {
    color: #000000;
}

body[data-theme="retro"] .slds-form-element__help {
    color: #333333;
}

/* Combobox/Picklist styling */
body[data-theme="retro"] .slds-combobox__input {
    background-color: #000080;
    color: #ffff55;
    border: 2px solid #555555;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

body[data-theme="retro"] .slds-listbox {
    background-color: #000080;
    border: 2px solid #00aaaa;
}

body[data-theme="retro"] .slds-listbox__option {
    color: #ffffff;
}

body[data-theme="retro"] .slds-listbox__option:hover,
body[data-theme="retro"] .slds-listbox__option[aria-selected="true"] {
    background-color: #00aaaa;
    color: #000000;
}

/* ============================================
   SACRED THEME - Terminal aesthetics
   Inspired by sacred.computer - Light theme
   ============================================ */

/* Monospace font for authentic terminal look */
body[data-theme="sacred"] {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1.5;
}

/* Clean header bar - black like sacred.computer dialog headers */
body[data-theme="sacred"] .slds-context-bar {
    background-color: #000000 !important;
    border: none;
    border-bottom: 2px solid #000000;
}

body[data-theme="sacred"] .slds-context-bar__item:not(.slds-is-active) .slds-context-bar__label-action {
    color: #ffffff !important;
    font-weight: 400;
}

/* Active menu item - inverted */
body[data-theme="sacred"] .slds-context-bar__item.slds-is-active {
    background-color: #ffffff !important;
}

body[data-theme="sacred"] .slds-context-bar__item.slds-is-active .slds-context-bar__label-action {
    color: #000000 !important;
    font-weight: 500;
}

body[data-theme="sacred"] .slds-context-bar__item:hover:not(.slds-is-active) {
    background-color: #333333 !important;
}

/* Card and box styling - light gray like sacred.computer */
body[data-theme="sacred"] .slds-box,
body[data-theme="sacred"] .slds-card {
    background-color: #e8e8e8;
    border: 2px solid #000000;
    box-shadow: 4px 4px 0 #888888;
    color: #000000;
}

/* Card body text */
body[data-theme="sacred"] .slds-box *,
body[data-theme="sacred"] .slds-card * {
    color: #000000;
}

/* Links - black, underline on hover */
body[data-theme="sacred"] .slds-box a,
body[data-theme="sacred"] .slds-card a {
    color: #000000;
    text-decoration: underline;
}

body[data-theme="sacred"] .slds-box a:hover,
body[data-theme="sacred"] .slds-card a:hover {
    color: #555555;
}

/* Buttons - clean blocky design like sacred.computer */
body[data-theme="sacred"] .slds-button {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* Primary button - Black */
body[data-theme="sacred"] .slds-button_brand {
    background-color: #000000;
    border: 2px solid #000000;
    color: #ffffff;
    box-shadow: none;
}

body[data-theme="sacred"] .slds-button_brand:hover {
    background-color: #333333;
    border-color: #333333;
    color: #ffffff;
}

body[data-theme="sacred"] .slds-button_brand:active {
    background-color: #555555;
}

/* Neutral button - White with black border */
body[data-theme="sacred"] .slds-button_neutral {
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    box-shadow: none;
}

body[data-theme="sacred"] .slds-button_neutral:hover {
    background-color: #e8e8e8;
    color: #000000;
    border-color: #000000;
}

body[data-theme="sacred"] .slds-button_neutral:active {
    background-color: #d0d0d0;
}

/* Inputs - white with black border */
body[data-theme="sacred"] .slds-input,
body[data-theme="sacred"] .slds-textarea,
body[data-theme="sacred"] .slds-select {
    border: 2px solid #000000;
    background-color: #ffffff;
    color: #000000;
}

body[data-theme="sacred"] .slds-input:focus,
body[data-theme="sacred"] .slds-textarea:focus,
body[data-theme="sacred"] .slds-select:focus {
    border-color: #000000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    outline: none;
}

body[data-theme="sacred"] .slds-input::placeholder,
body[data-theme="sacred"] .slds-textarea::placeholder {
    color: #888888;
}

/* Tables - clean with black borders */
body[data-theme="sacred"] .slds-table {
    border: 2px solid #000000;
    background-color: #ffffff;
}

body[data-theme="sacred"] .slds-table thead th {
    background-color: #a5d6a7;
    color: #000000 !important;
    border: none;
    font-weight: 600;
    border-bottom: 2px solid #000000;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* Table headers text */
body[data-theme="sacred"] .slds-table thead th *,
body[data-theme="sacred"] .slds-table thead th span,
body[data-theme="sacred"] .slds-table thead th div,
body[data-theme="sacred"] .slds-table thead th a {
    color: #000000 !important;
}

body[data-theme="sacred"] .slds-table tbody td {
    border-color: #cccccc;
    color: #000000 !important;
    background-color: #ffffff;
}

/* Table cells text */
body[data-theme="sacred"] .slds-table tbody td *,
body[data-theme="sacred"] .slds-table tbody td span,
body[data-theme="sacred"] .slds-table tbody td div {
    color: #000000 !important;
}

/* Links in table cells */
body[data-theme="sacred"] .slds-table tbody td a {
    color: #000000 !important;
    text-decoration: underline;
}

body[data-theme="sacred"] .slds-table tbody td a:hover {
    color: #555555 !important;
}

body[data-theme="sacred"] .slds-table tbody tr:hover td {
    background-color: #a5d6a7;
}

body[data-theme="sacred"] .slds-table tbody tr:hover td *,
body[data-theme="sacred"] .slds-table tbody tr:hover td span,
body[data-theme="sacred"] .slds-table tbody tr:hover td div {
    color: #000000 !important;
}

/* Alternating row colors like sacred.computer tables - green accent */
body[data-theme="sacred"] .slds-table tbody tr:nth-child(odd) td {
    background-color: #f5f5f5;
}

body[data-theme="sacred"] .slds-table tbody tr:nth-child(even) td {
    background-color: #ffffff;
}

/* Tabs - underline style with green accents */
body[data-theme="sacred"] .slds-tabs_default__nav {
    background-color: #e8f5e9;
    border: none;
    border-bottom: 2px solid #000000;
}

body[data-theme="sacred"] .slds-tabs_default__item .slds-tabs_default__link {
    color: #555555;
    border: none;
    font-weight: 500;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

body[data-theme="sacred"] .slds-tabs_default__item:hover .slds-tabs_default__link {
    color: #000000;
    background-color: #c8e6c9;
}

body[data-theme="sacred"] .slds-tabs_default__item.slds-is-active .slds-tabs_default__link {
    color: #ffffff;
    background-color: #000000;
    border: none;
}

/* No rounded corners for blocky terminal look */
body[data-theme="sacred"] * {
    border-radius: 0 !important;
}

/* Modal styling - like sacred.computer dialogs */
body[data-theme="sacred"] .slds-modal__container {
    background-color: #e8e8e8;
    border: 2px solid #000000;
    box-shadow: 6px 6px 0 #888888;
    color: #000000;
}

body[data-theme="sacred"] .slds-modal__header {
    background-color: #000000;
    color: #ffffff;
    border: none;
}

body[data-theme="sacred"] .slds-modal__header * {
    color: #ffffff !important;
}

/* Checkbox styling */
body[data-theme="sacred"] .slds-checkbox_faux {
    background-color: #ffffff;
    border: 2px solid #000000;
}

body[data-theme="sacred"] .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux {
    background-color: #000000;
    border-color: #000000;
}

/* Form labels */
body[data-theme="sacred"] .slds-form-element__label {
    color: #000000;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

body[data-theme="sacred"] .slds-form-element__help {
    color: #555555;
}

/* Combobox/Picklist styling */
body[data-theme="sacred"] .slds-combobox__input {
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #000000;
}

body[data-theme="sacred"] .slds-listbox {
    background-color: #ffffff;
    border: 2px solid #000000;
    box-shadow: 4px 4px 0 #888888;
}

body[data-theme="sacred"] .slds-listbox__option {
    color: #000000;
}

body[data-theme="sacred"] .slds-listbox__option:hover,
body[data-theme="sacred"] .slds-listbox__option[aria-selected="true"] {
    background-color: #000000;
    color: #ffffff;
}

/* ============================================
   THEME SWITCHER COMPONENT STYLES
   ============================================ */

.theme-switcher {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-switcher select {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--oi-color-border-default);
    background-color: var(--oi-color-background-input);
    color: var(--oi-color-text-default);
    cursor: pointer;
}

/* Theme switcher component overrides */
body[data-theme="retro"] my-theme-switcher select {
    background-color: #000080;
    color: #ffff55;
    border: 2px solid #555555;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    border-radius: 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

body[data-theme="retro"] my-theme-switcher select:hover,
body[data-theme="retro"] my-theme-switcher select:focus {
    border-color: #ffff55;
    box-shadow: none;
}

body[data-theme="sacred"] my-theme-switcher select {
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 0;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

body[data-theme="sacred"] my-theme-switcher select:hover,
body[data-theme="sacred"] my-theme-switcher select:focus {
    border-color: #000000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* ============================================
   SALESFORCE THEME - Events fixes
   ============================================ */

body[data-theme="salesforce"] my-events .entry {
    line-height: 22px;
}

/* ============================================
   RETRO THEME - Events/Birthday list fixes
   ============================================ */

body[data-theme="retro"] my-events .entry {
    color: #ffffff !important;
}

body[data-theme="retro"] my-events .entry div,
body[data-theme="retro"] my-events .entry .item {
    color: #ffffff !important;
}

body[data-theme="retro"] my-events .entry.past div {
    color: #aaaaaa !important;
}

body[data-theme="retro"] my-events .entry.now {
    background-color: #aa0000 !important;
    color: #ffffff !important;
}

body[data-theme="retro"] my-events .entry.now div {
    color: #ffffff !important;
}

body[data-theme="retro"] my-events .entry.next {
    background-color: #00aaaa !important;
    color: #000000 !important;
}

body[data-theme="retro"] my-events .entry.next div {
    color: #000000 !important;
}

/* ============================================
   RETRO THEME - Subscriptions table fixes
   ============================================ */

/* Current year columns - use dark blue instead of yellow */
body[data-theme="retro"] my-subscriptions .month-header.current-year {
    background-color: #0000aa !important;
    color: #55ffff !important;
}

body[data-theme="retro"] my-subscriptions .month-header.current-month {
    background-color: #aa0000 !important;
    color: #ffffff !important;
}

body[data-theme="retro"] my-subscriptions .month-cell.current-year {
    background-color: #000080 !important;
    color: #55ffff !important;
}

body[data-theme="retro"] my-subscriptions .totals-row .totals-cell.current-year {
    background-color: #0000aa !important;
    color: #55ffff !important;
}

/* Summary cards */
body[data-theme="retro"] my-subscriptions .summary-card {
    background: #aaaaaa !important;
    color: #000000 !important;
    border: 2px solid #ffffff;
    border-right-color: #555555;
    border-bottom-color: #555555;
}

body[data-theme="retro"] my-subscriptions .summary-card.highlight {
    background: #aa0000 !important;
    color: #ffffff !important;
}

body[data-theme="retro"] my-subscriptions .summary-card .summary-label,
body[data-theme="retro"] my-subscriptions .summary-card .summary-value {
    color: inherit !important;
}

/* Table wrapper */
body[data-theme="retro"] my-subscriptions .table-wrapper {
    border: 2px solid #00aaaa;
}

/* Sticky columns background */
body[data-theme="retro"] my-subscriptions .sticky-col {
    background-color: #000080 !important;
}

body[data-theme="retro"] my-subscriptions thead .sticky-col {
    background-color: #00aaaa !important;
    color: #000000 !important;
}

body[data-theme="retro"] my-subscriptions .totals-row {
    background-color: #005555 !important;
}

body[data-theme="retro"] my-subscriptions .totals-row td {
    background-color: #005555 !important;
    color: #55ffff !important;
}

body[data-theme="retro"] my-subscriptions .totals-row .sticky-col {
    background-color: #005555 !important;
}

/* Provider links */
body[data-theme="retro"] my-subscriptions .provider-link,
body[data-theme="retro"] my-subscriptions .provider-name {
    color: #ffff55 !important;
}

body[data-theme="retro"] my-subscriptions .provider-link:hover,
body[data-theme="retro"] my-subscriptions .provider-name:hover {
    color: #ffffff !important;
}

/* YTD column */
body[data-theme="retro"] my-subscriptions .col-ytd {
    color: #55ff55 !important;
}

/* Category badges */
body[data-theme="retro"] my-subscriptions .category-badge {
    background: #555555 !important;
    color: #ffffff !important;
}

/* Add row */
body[data-theme="retro"] my-subscriptions .add-row td {
    background-color: #000080 !important;
}

body[data-theme="retro"] my-subscriptions .add-button {
    background: #000080 !important;
    border: 2px dashed #00aaaa !important;
    color: #55ffff !important;
}

body[data-theme="retro"] my-subscriptions .add-button:hover {
    background: #0000aa !important;
    border-color: #55ffff !important;
    color: #ffffff !important;
}

body[data-theme="retro"] my-subscriptions .action-link {
    color: #aaaaaa !important;
}

body[data-theme="retro"] my-subscriptions .action-link:hover {
    color: #ffff55 !important;
}

/* ============================================
   Note editor lists

   SLDS's global reset `ol, ul { list-style: none }` leaks into the note
   editor's synthetic shadow, and execCommand-created <ul>/<ol> carry no
   component scope token — so a component-scoped rule can't reach them.
   A global rule (higher specificity than the SLDS reset) restores markers.
   ============================================ */
my-note .note-editor ul {
    list-style: disc outside;
    margin: 0.25em 0;
    padding-left: 1.5em;
}

my-note .note-editor ol {
    list-style: decimal outside;
    margin: 0.25em 0;
    padding-left: 1.5em;
}

my-note .note-editor li {
    display: list-item;
}

/* ============================================
   Eat screen — dark palette
   ============================================

   page/eat paints itself from --eat-* tokens, each of which reads an
   --oi-eat-* override first. Those overrides have to be set here rather than in
   the component stylesheet, for the same reason as the habits block above: the
   theme lives on <body>, the component sits in a shadow root, and a custom
   property is the only thing that crosses that boundary.

   The design canvas is light-only, so this palette is derived, not drawn. The
   two hues that carry meaning are kept and only lightened for a dark ground:
   the plum accent stays on hue 330, the over-target red stays on hue 28, so a
   bar that reads "over your target" keeps reading that way in either theme.
   The greys invert. Both themes are dark, so both take the same values. */
body[data-theme="retro"],
body[data-theme="sacred"] {
    --oi-eat-accent: oklch(0.74 0.12 330);
    --oi-eat-accent-tint: oklch(0.30 0.06 330);
    --oi-eat-over: oklch(0.70 0.17 28);
    --oi-eat-over-tint: oklch(0.30 0.07 28);
    --oi-eat-warn: oklch(0.78 0.13 70);
    --oi-eat-page: #000000;
    --oi-eat-card: #1c1c1e;
    --oi-eat-ink: #ffffff;
    --oi-eat-secondary: rgba(235, 235, 245, 0.62);
    --oi-eat-muted: rgba(235, 235, 245, 0.62);
    --oi-eat-faint: rgba(235, 235, 245, 0.32);
    --oi-eat-track: rgba(235, 235, 245, 0.18);
    --oi-eat-bar-empty: rgba(235, 235, 245, 0.22);
    --oi-eat-ring-track: rgba(235, 235, 245, 0.18);
    --oi-eat-hairline: rgba(235, 235, 245, 0.12);
    --oi-eat-destructive: #ff453a;
    /* The composer's Go. Lifted and slightly desaturated like every other
       colour in this block, so it reads as the same green on black that
       oklch(0.58 0.14 150) reads as on white. */
    --oi-eat-go: oklch(0.72 0.15 150);
    --oi-eat-go-ink: #000000;
    /* The canvas's white-at-90% disc would turn a light-on-dark photo into a
       murky grey smear and (worse) go nearly invisible over anything already
       dark. A dark frosted disc, matching --oi-eat-card's surface, keeps the
       white chevron legible against arbitrary photo content in either theme. */
    --oi-eat-overlay: rgba(28, 28, 30, 0.82);
}