/* ===========================================
   DarkHorse Dark Mode Styles
   For app pages (master.html templates)
   =========================================== */

/* ===========================================
   Header Navigation Button Normalization
   (Applies in both light and dark modes)
   =========================================== */
#masterMenu a.ui.compact.small.black.button,
#masterMenu button.ui.compact.small.black.button {
    box-sizing: border-box;
    line-height: 1;
    font-family: inherit;
    font-size: 12px;
    vertical-align: middle;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Cursor pointer for all header nav buttons */
#masterMenu .ui.button,
#masterMenu .ui.tertiary.button,
#masterMenu a.ui.button,
#masterMenu .ui.button *,
#masterMenu .ui.dropdown,
#masterMenu .ui.dropdown .text,
#masterMenu .ui.dropdown .icon {
    cursor: pointer !important;
}

/* ===========================================
   Light Mode Variables (Default)
   =========================================== */
:root,
[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f4f6;
    --bg-elevated: #ffffff;
    
    /* Text */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    
    /* Headers (matching existing) */
    --header-color: #6b7280;
    --header2-color: #6b7280;
    
    /* Borders */
    --border-color: #e5e7eb;
    --border-color-light: #f3f4f6;
    
    /* Accents */
    --accent: #41b5ff;
    --accent-hover: #2196f3;
    --accent-bg: rgba(65, 181, 255, 0.1);
    
    /* Semantic */
    --success: #10b981;
    --success-bg: #d1fae5;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --error: #ef4444;
    --error-bg: #fee2e2;
    --info: #3b82f6;
    --info-bg: #dbeafe;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Component-specific */
    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --button-secondary-bg: #ffffff;
    --card-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --tooltip-bg: #1f2937;
    --tooltip-text: #ffffff;
    
    /* Fomantic UI specific */
    --fomantic-segment-bg: #ffffff;
    --fomantic-menu-bg: #ffffff;
    
    /* Mouseover colors (existing) */
    --mouseover-color1: #bfc1c4;
    --mouseover-color2: #375656;
}

/* ===========================================
   Dark Mode Variables
   =========================================== */
:root[data-theme="dark"],
html[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f2e;
    --bg-tertiary: #242b3d;
    --bg-elevated: #2d3548;
    
    /* Text */
    --text-primary: #e7e9ea;
    --text-secondary: #8b98a5;
    --text-muted: #9ca3af;
    --text-inverse: #0f1419;
    
    /* Headers */
    --header-color: #a8b3cf;
    --header2-color: #8b98a5;
    
    /* Borders - brighter for visibility */
    --border-color: #4f5b66;
    --border-color-light: #3d4752;
    
    /* Accents - slightly brighter for dark backgrounds */
    --accent: #5eb5f7;
    --accent-hover: #8ecdf8;
    --accent-bg: rgba(94, 181, 247, 0.15);
    
    /* Semantic - brighter for dark backgrounds */
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.15);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.15);
    --error: #f87171;
    --error-bg: rgba(248, 113, 113, 0.15);
    --info: #60a5fa;
    --info-bg: rgba(96, 165, 250, 0.15);
    
    /* Shadows - more subtle in dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    
    /* Component-specific */
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --input-bg: #1a1f2e;
    --input-border: #38444d;
    --button-secondary-bg: #242b3d;
    --card-bg: #1a1f2e;
    --dropdown-bg: #1a1f2e;
    --tooltip-bg: #e7e9ea;
    --tooltip-text: #0f1419;
    
    /* Fomantic UI specific */
    --fomantic-segment-bg: #1a1f2e;
    --fomantic-menu-bg: #1a1f2e;
    
    /* Mouseover colors */
    --mouseover-color1: #3d4654;
    --mouseover-color2: #4a6565;
    
    /* Remap existing variables used in master.html */
    --primary-color: #e7e9ea;
    --secondary-color: #0f1419;
    --tiertiary-color: #5eb5f7;
}

/* ===========================================
   Base Element Overrides
   =========================================== */

[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] b,
[data-theme="dark"] div.title,
[data-theme="dark"] div.ui.header,
[data-theme="dark"] div.header {
    color: var(--text-primary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2 {
    color: var(--header-color) !important;
}

[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: var(--header2-color) !important;
}

[data-theme="dark"] a {
    color: var(--accent);
}

[data-theme="dark"] a:hover {
    color: var(--accent-hover);
}

/* ===========================================
   Override Hardcoded Dark Colors
   These catch inline styles with dark colors
   =========================================== */

/* Override hardcoded #333, #666, #888, black, grey text */
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:black"] {
    color: var(--text-primary) !important;
}

[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: grey"],
[data-theme="dark"] [style*="color:grey"],
[data-theme="dark"] [style*="color: gray"],
[data-theme="dark"] [style*="color:gray"] {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] [style*="color: #888"],
[data-theme="dark"] [style*="color:#888"],
[data-theme="dark"] [style*="color: #777"],
[data-theme="dark"] [style*="color:#777"] {
    color: var(--text-muted) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] label {
    color: var(--text-primary);
}

/* Form labels and text */
[data-theme="dark"] .ui.input,
[data-theme="dark"] .ui.form .field {
    color: var(--text-primary) !important;
}

[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* ===========================================
   Form Elements
   =========================================== */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-bg) !important;
}

[data-theme="dark"] input[type="checkbox"] {
    accent-color: var(--accent);
}

[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled {
    background-color: var(--bg-tertiary) !important;
    opacity: 0.6;
}

/* ===========================================
   Fomantic UI Dark Mode Overrides
   =========================================== */

/* --- Segments --- */
[data-theme="dark"] .ui.segment {
    background: var(--fomantic-segment-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
}

[data-theme="dark"] .ui.raised.segment {
    box-shadow: var(--shadow-md) !important;
}

/* --- Cards --- */
[data-theme="dark"] .ui.card,
[data-theme="dark"] .ui.cards > .card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .ui.card > .content,
[data-theme="dark"] .ui.cards > .card > .content {
    border-color: var(--border-color) !important;
    background: transparent !important;
}

[data-theme="dark"] .ui.card > .content > .header,
[data-theme="dark"] .ui.cards > .card > .content > .header {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.card > .content > .meta,
[data-theme="dark"] .ui.cards > .card > .content > .meta {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.card > .content > .meta a,
[data-theme="dark"] .ui.cards > .card > .content > .meta a,
[data-theme="dark"] .ui.card .content .meta a,
[data-theme="dark"] .ui.cards .card .content .meta a,
[data-theme="dark"] .ui.horizontal.card .content .meta a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.card > .content > .description,
[data-theme="dark"] .ui.cards > .card > .content > .description {
    color: var(--text-secondary) !important;
}

/* Card content general text and links */
[data-theme="dark"] .ui.card .content,
[data-theme="dark"] .ui.cards .card .content,
[data-theme="dark"] .ui.horizontal.card .content {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.card .content a,
[data-theme="dark"] .ui.cards .card .content a,
[data-theme="dark"] .ui.horizontal.card .content a {
    color: var(--accent) !important;
}

[data-theme="dark"] .ui.card .content span,
[data-theme="dark"] .ui.cards .card .content span {
    color: inherit;
}

/* Horizontal cards - meta text specifically */
[data-theme="dark"] .ui.horizontal.card .meta,
[data-theme="dark"] .ui.horizontal.card .meta a,
[data-theme="dark"] .ui.horizontal.card .description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.horizontal.card .header {
    color: var(--text-primary) !important;
}

/* Horizontal card borders for visibility */
[data-theme="dark"] .ui.horizontal.card {
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
    border-radius: 0.28571429rem !important; /* Match Fomantic UI's rounded image radius */
}

[data-theme="dark"] .ui.card > .extra,
[data-theme="dark"] .ui.cards > .card > .extra {
    border-color: var(--border-color) !important;
    background: var(--bg-tertiary) !important;
}

/* --- Modals --- */
[data-theme="dark"] .ui.modal {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.modal > .header {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.modal > .content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.modal > .actions {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modals.dimmer,
[data-theme="dark"] .ui.dimmer {
    background-color: var(--modal-backdrop) !important;
}

[data-theme="dark"] .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
    background-color: var(--bg-secondary) !important;
    border: solid 1px var(--border-color) !important;
}

/* --- Dropdowns --- */
[data-theme="dark"] .ui.dropdown .menu {
    background: var(--dropdown-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

[data-theme="dark"] .ui.dropdown .menu > .item {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.dropdown .menu > .item:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Selected/Active dropdown items */
[data-theme="dark"] .ui.dropdown .menu > .item.selected,
[data-theme="dark"] .ui.dropdown .menu > .item.active,
[data-theme="dark"] .ui.dropdown .menu > .item.selected.active,
[data-theme="dark"] .ui.selection.dropdown .menu > .item.selected,
[data-theme="dark"] .ui.selection.dropdown .menu > .item.active {
    background: var(--accent) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .ui.dropdown .menu > .item.selected:hover,
[data-theme="dark"] .ui.dropdown .menu > .item.active:hover {
    background: var(--accent-hover) !important;
    color: var(--text-inverse) !important;
}

/* List selection states */
[data-theme="dark"] .ui.list .item.active,
[data-theme="dark"] .ui.list .item.selected {
    background: var(--accent) !important;
    color: var(--text-inverse) !important;
}

/* Tab menu active states */
[data-theme="dark"] .ui.tabular.menu .active.item {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Search selection */
[data-theme="dark"] .ui.search > .results .result.active {
    background: var(--accent) !important;
}

[data-theme="dark"] .ui.search > .results .result.active .title,
[data-theme="dark"] .ui.search > .results .result.active .description {
    color: var(--text-inverse) !important;
}

/* Pagination active */
[data-theme="dark"] .ui.pagination.menu .active.item {
    background: var(--accent) !important;
    color: var(--text-inverse) !important;
}

/* Fix menu item links/anchors */
[data-theme="dark"] .ui.dropdown .menu .item a,
[data-theme="dark"] .ui.dropdown .menu .item .menuItem,
[data-theme="dark"] .ui.dropdown .menu a.menuItem {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.dropdown .menu .item:hover a,
[data-theme="dark"] .ui.dropdown .menu .item:hover .menuItem {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.dropdown .menu > .header {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.dropdown .menu > .divider {
    border-color: var(--border-color) !important;
}

/* Pointing dropdown arrow - match dropdown background */
[data-theme="dark"] .ui.pointing.dropdown > .menu::after,
[data-theme="dark"] .ui.pointing.dropdown > .menu:not(.hidden)::after,
[data-theme="dark"] .ui.top.pointing.dropdown > .menu::after,
[data-theme="dark"] .ui.top.left.pointing.dropdown > .menu::after {
    background: var(--dropdown-bg) !important;
    box-shadow: -1px -1px 0 0 var(--border-color) !important;
}

[data-theme="dark"] .ui.selection.dropdown {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.selection.dropdown:hover {
    border-color: var(--accent) !important;
}

[data-theme="dark"] .ui.dropdown > .text,
[data-theme="dark"] .ui.dropdown .menu > .item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.fluid.dropdown > .dropdown.icon,
[data-theme="dark"] .ui.selection.dropdown > .dropdown.icon,
[data-theme="dark"] .ui.selection.visible.dropdown > .text:not(.default) {
    color: var(--text-primary) !important;
}

/* --- Buttons --- */
/* Buttons with inline styles use CSS variables that are remapped in dark mode */
/* Only add styles for buttons WITHOUT inline styles */
[data-theme="dark"] .ui.button:not([style*="background-color"]):not([style*="border"]):not([style*="color"]) {
    background: var(--button-secondary-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .ui.button:not([style*="background-color"]):not([style*="border"]):not([style*="color"]):hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .ui.primary.button {
    background: var(--accent) !important;
    color: var(--text-inverse) !important;
    border-color: var(--accent) !important;
}

[data-theme="dark"] .ui.primary.button:hover {
    background: var(--accent-hover) !important;
}

[data-theme="dark"] .ui.secondary.button {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Removed .ui.black.button override - let inline styles handle header nav buttons */

[data-theme="dark"] .ui.tertiary.button {
    background: transparent !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.tertiary.button:hover {
    background: transparent !important;
    border-bottom: 1px solid var(--text-primary) !important;
}

[data-theme="dark"] .ui.basic.button {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .ui.basic.button:hover {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .ui.positive.button,
[data-theme="dark"] .ui.green.button {
    background: var(--success) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .ui.negative.button,
[data-theme="dark"] .ui.red.button {
    background: var(--error) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .ui.orange.button {
    background: var(--warning) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] .ui.blue.button {
    background: var(--info) !important;
    color: var(--text-inverse) !important;
}

/* --- Forms --- */
[data-theme="dark"] .ui.form input:not([type]),
[data-theme="dark"] .ui.form input[type="color"],
[data-theme="dark"] .ui.form input[type="date"],
[data-theme="dark"] .ui.form input[type="datetime-local"],
[data-theme="dark"] .ui.form input[type="email"],
[data-theme="dark"] .ui.form input[type="file"],
[data-theme="dark"] .ui.form input[type="month"],
[data-theme="dark"] .ui.form input[type="number"],
[data-theme="dark"] .ui.form input[type="password"],
[data-theme="dark"] .ui.form input[type="search"],
[data-theme="dark"] .ui.form input[type="tel"],
[data-theme="dark"] .ui.form input[type="text"],
[data-theme="dark"] .ui.form input[type="time"],
[data-theme="dark"] .ui.form input[type="url"],
[data-theme="dark"] .ui.form input[type="week"],
[data-theme="dark"] .ui.form textarea {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.form .field > label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.form .field > .ui.input {
    background: transparent !important;
}

[data-theme="dark"] .ui.input {
    background: transparent !important;
}

[data-theme="dark"] .ui.input > input {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* --- Tables --- */
[data-theme="dark"] .ui.table {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.table thead th {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.table tbody tr {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.table tbody tr:hover {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .ui.table tbody td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.striped.table tbody tr:nth-child(2n) {
    background: var(--bg-tertiary) !important;
}

/* --- Labels --- */
[data-theme="dark"] .ui.label {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.basic.label {
    background: transparent !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.basic.label.detailLabel {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    border: solid 1px var(--border-color) !important;
}

[data-theme="dark"] .ui.ribbon.label {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
}

/* --- Accordion --- */
[data-theme="dark"] .ui.accordion .title,
[data-theme="dark"] .ui.accordion .accordion > .title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.accordion .content,
[data-theme="dark"] .ui.accordion .accordion > .content {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.styled.accordion,
[data-theme="dark"] .ui.styled.accordion .accordion {
    background: var(--bg-secondary) !important;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.3), 0 0 0 1px var(--border-color) !important;
}

[data-theme="dark"] .ui.basic.styled.accordion,
[data-theme="dark"] .ui.basic.styled.accordion .accordion {
    background: transparent !important;
    box-shadow: none !important;
}

[data-theme="dark"] .ui.styled.accordion .title,
[data-theme="dark"] .ui.styled.accordion .accordion .title,
[data-theme="dark"] .ui.styled.accordion > .title,
[data-theme="dark"] .ui.styled.accordion .accordion > .title {
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.basic.styled.accordion > .title,
[data-theme="dark"] .ui.basic.styled.accordion > .title:hover,
[data-theme="dark"] .ui.basic.styled.accordion .active.title {
    color: var(--text-primary) !important;
}

/* Accordion title boxes - only add borders to titles that already have inline border styles */
/* Don't add borders to Filters and other clean accordions */

/* Override inline border-color: black on accordion titles */
[data-theme="dark"] .ui.accordion .title[style*="border-color: black"],
[data-theme="dark"] .ui.accordion .title[style*="border-color:black"] {
    border-color: var(--border-color) !important;
}

/* General override for any element with inline border-color: black */
[data-theme="dark"] [style*="border-color: black"],
[data-theme="dark"] [style*="border-color:black"] {
    border-color: var(--border-color) !important;
}

/* --- Comments --- */
[data-theme="dark"] .ui.comments .comment .text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.comments .comment a.author {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.comments .comment a.author:hover {
    color: var(--accent) !important;
}

[data-theme="dark"] .ui.comments .comment .metadata {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.comments .comment .actions a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ui.comments .comment .actions a:hover {
    color: var(--accent) !important;
}

[data-theme="dark"] .ui.comments .reply.form textarea {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* --- Flyout/Sidebar --- */
[data-theme="dark"] .ui.flyout > .header,
[data-theme="dark"] .ui.flyout > .content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.visible.overlay.flyout {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .pushable > .pusher:not(.overflowing) {
    background-color: var(--bg-primary) !important;
}

/* --- Dividers --- */
[data-theme="dark"] .ui.divider {
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .ui.divider:not(.vertical):not(.horizontal) {
    border-top-color: var(--border-color) !important;
    border-bottom-color: transparent !important;
}

/* --- Messages --- */
[data-theme="dark"] .ui.message {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .ui.message .header {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.positive.message,
[data-theme="dark"] .ui.success.message {
    background: var(--success-bg) !important;
    color: var(--success) !important;
    border-color: var(--success) !important;
}

[data-theme="dark"] .ui.negative.message,
[data-theme="dark"] .ui.error.message {
    background: var(--error-bg) !important;
    color: var(--error) !important;
    border-color: var(--error) !important;
}

[data-theme="dark"] .ui.warning.message {
    background: var(--warning-bg) !important;
    color: var(--warning) !important;
    border-color: var(--warning) !important;
}

[data-theme="dark"] .ui.info.message {
    background: var(--info-bg) !important;
    color: var(--info) !important;
    border-color: var(--info) !important;
}

/* Nag */
[data-theme="dark"] .ui.nag {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.orange.nag {
    background: var(--warning-bg) !important;
    color: var(--warning) !important;
}

/* --- Menu --- */
[data-theme="dark"] .ui.menu {
    background: var(--fomantic-menu-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.menu .item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.menu .item:hover {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .ui.menu .active.item {
    background: var(--bg-tertiary) !important;
}

/* --- Popup/Tooltip --- */
[data-theme="dark"] .ui.popup {
    background: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

[data-theme="dark"] .ui.popup::before {
    background: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui.popup .content {
    color: var(--text-primary) !important;
}

[data-theme="dark"] [data-tooltip]::after {
    background: var(--tooltip-bg) !important;
    color: var(--tooltip-text) !important;
}

/* --- Progress --- */
[data-theme="dark"] .ui.progress {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .ui.progress .bar {
    background: var(--accent) !important;
}

[data-theme="dark"] .ui.progress .bar > .progress {
    color: var(--text-inverse) !important;
}

/* --- List --- */
[data-theme="dark"] .ui.list .item,
[data-theme="dark"] .ui.list .item .content {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.list .item .header {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.list .item .description {
    color: var(--text-secondary) !important;
}

/* --- Icon --- */
[data-theme="dark"] i.icon {
    color: var(--text-primary);
}

[data-theme="dark"] i.icon.close::before {
    color: var(--text-primary) !important;
}

/* --- Preserve Fomantic UI Semantic Color Text Classes --- */
[data-theme="dark"] .ui.pink.text {
    color: #e03997 !important;
}

[data-theme="dark"] .ui.red.text {
    color: #db2828 !important;
}

[data-theme="dark"] .ui.orange.text {
    color: #f2711c !important;
}

[data-theme="dark"] .ui.yellow.text {
    color: #fbbd08 !important;
}

[data-theme="dark"] .ui.green.text {
    color: #21ba45 !important;
}

[data-theme="dark"] .ui.blue.text {
    color: #2185d0 !important;
}

[data-theme="dark"] .ui.purple.text {
    color: #a333c8 !important;
}

[data-theme="dark"] .ui.teal.text {
    color: #00b5ad !important;
}

[data-theme="dark"] i.black.icon {
    color: var(--text-primary) !important;
}

/* ===========================================
   Custom DarkHorse Component Overrides  
   =========================================== */

/* Header */
[data-theme="dark"] .header {
    background-color: transparent;
}

/* Dark mode text colors for header tertiary buttons (About, Products, Pricing) */
[data-theme="dark"] #masterMenu .ui.tertiary.button,
[data-theme="dark"] #masterMenu .ui.tertiary.button > span {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.tertiary.button {
    background: transparent !important;
    border: none !important;
}

/* DarkHorse title text */
[data-theme="dark"] header.header a[href="/"] {
    color: var(--text-primary) !important;
}

[data-theme="dark"] header.header a[style*="font-size: 32px"] {
    color: var(--text-primary) !important;
}

/* Header nav buttons - let inline styles + CSS variable remapping handle colors */
/* --primary-color and --secondary-color are remapped in dark mode, so inline styles work automatically */

/* Superscript text */
[data-theme="dark"] #superscriptText {
    color: var(--text-secondary) !important;
}

/* Outline buttons - colors handled by CSS variable remapping */
/* Buttons use var(--primary-color) in their inline styles, which is remapped in dark mode */

/* Filled action buttons (account page, etc.) */
[data-theme="dark"] .action-btn-filled {
    background-color: var(--accent) !important;
    color: var(--text-inverse) !important;
    border-color: var(--accent) !important;
}

[data-theme="dark"] .action-btn-filled:hover {
    background-color: var(--accent-hover) !important;
    color: var(--text-inverse) !important;
}

/* Transparent inputs (org name, etc.) */
[data-theme="dark"] .ui.transparent.input input,
[data-theme="dark"] .ui.transparent.input > input {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
}

/* Org invite label - muted blue in dark mode */
[data-theme="dark"] .ui.blue.label,
[data-theme="dark"] .ui.blue.image.label {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.blue.label .detail,
[data-theme="dark"] .ui.blue.image.label .detail {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.blue.label input,
[data-theme="dark"] .ui.blue.image.label input {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui.blue.label input::placeholder,
[data-theme="dark"] .ui.blue.image.label input::placeholder {
    color: var(--text-muted) !important;
}

/* Container backgrounds */
[data-theme="dark"] .container,
[data-theme="dark"] .container-main,
[data-theme="dark"] .container-text {
    background-color: transparent;
}

/* Custom buttons - fillButton class */
[data-theme="dark"] .fillButton {
    background-color: var(--text-primary) !important;
    color: var(--bg-primary) !important;
}

[data-theme="dark"] .fillButton:hover {
    background-color: var(--text-secondary) !important;
}

/* Tooltips */
[data-theme="dark"] .tooltip {
    background-color: var(--tooltip-bg) !important;
    color: var(--tooltip-text) !important;
}

/* Dialog/Popup */
[data-theme="dark"] dialog {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] dialog::backdrop {
    background: var(--modal-backdrop) !important;
}

/* Custom card class from master.html */
[data-theme="dark"] .card-container .card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Results list */
[data-theme="dark"] ul.results-list {
    color: var(--text-primary) !important;
}

/* Menu items */
[data-theme="dark"] .menuItem {
    color: var(--text-primary) !important;
}

/* Product button */
[data-theme="dark"] #productButton {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Input title and item title */
[data-theme="dark"] .input-title,
[data-theme="dark"] .itemTitle {
    color: var(--text-primary) !important;
}

/* Left/right content */
[data-theme="dark"] .left-content,
[data-theme="dark"] .right-content {
    color: var(--text-primary) !important;
}

/* Logout warning */
[data-theme="dark"] #logout-warning {
    background: var(--error-bg) !important;
    color: var(--error) !important;
    border: 1px solid var(--error) !important;
}

/* ===========================================
   Logo Handling
   =========================================== */

[data-theme="light"] .logo-dark-mode {
    display: none !important;
}

[data-theme="dark"] .logo-light-mode {
    display: none !important;
}

[data-theme="light"] .logo-light-mode {
    display: inline-block !important;
}

[data-theme="dark"] .logo-dark-mode {
    display: inline-block !important;
}

/* ===========================================
   Transitions
   =========================================== */

body,
.ui.segment,
.ui.card,
.ui.modal,
.ui.button,
.ui.dropdown .menu,
.ui.message,
input,
textarea,
select,
a {
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
}

/* ===========================================
   Theme Toggle Button
   =========================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: 10px;
}

.theme-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
}

.theme-toggle i {
    font-size: 16px;
    color: var(--text-primary);
    margin: 0;
}

/* Show/hide icons based on theme */
[data-theme="light"] .theme-toggle .bi-sun-fill {
    display: none;
}

[data-theme="light"] .theme-toggle .bi-moon-fill {
    display: inline-block;
}

[data-theme="dark"] .theme-toggle .bi-sun-fill {
    display: inline-block;
}

[data-theme="dark"] .theme-toggle .bi-moon-fill {
    display: none;
}

/* ===========================================
   Scrollbar Styling (Dark Mode)
   =========================================== */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===========================================
   Print Styles - Always Light
   =========================================== */

@media print {
    [data-theme="dark"] body {
        background: white !important;
        color: black !important;
    }
    
    [data-theme="dark"] * {
        background: transparent !important;
        color: black !important;
        border-color: #ccc !important;
    }
}