/* ============================================
   Temperature Monitor - Theme System
   Based on UptownCSS colors and layout
   ============================================ */

/* Light Theme Variables (Default - matches UptownCSS) */
:root {
    /* Primary Colors */
    --primary-blue: #007ace;
    --primary-blue-hover: #084e8a;
    --text-primary: #1a1a1a;
    --text-secondary: #637381;
    --text-muted: #707070;

    /* Backgrounds */
    --bg-body: #f4f6f8;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-input: #ffffff;
    --bg-filter: #fff;
    --bg-table-header: #f8f9fa;

    /* Borders */
    --border-color: #dfe4e8;
    --border-input: #ced4da;
    --border-table: #ddd;

    /* Button colors */
    --btn-primary: #007bff;
    --btn-primary-hover: #0056b3;
    --btn-secondary: #c4c4c4;
    --btn-secondary-hover: #e9ecef;
    --btn-secondary-active: #007bff;
    --btn-danger: #dc3545;
    --btn-danger-hover: #c82333;

    /* Sort header */
    --sort-header-hover: #f5f5f5;

    /* Shadows */
    --shadow-light: rgba(136, 165, 191, 0.48);
    --shadow-dark: rgba(255, 255, 255, 0.8);
}

/* Dark Theme Variables */
[data-theme="dark"] {
    /* Primary Colors */
    --primary-blue: #4a9eff;
    --primary-blue-hover: #6ab0ff;
    --text-primary: #e4e6eb;
    --text-secondary: #b0b3b8;
    --text-muted: #8a8d93;

    /* Backgrounds */
    --bg-body: #18191a;
    --bg-card: #242526;
    --bg-header: #242526;
    --bg-input: #3a3b3c;
    --bg-filter: #3a3b3c;
    --bg-table-header: #3a3b3c;

    /* Borders */
    --border-color: #3a3b3c;
    --border-input: #3a3b3c;
    --border-table: #3a3b3c;

    /* Button colors */
    --btn-primary: #2d88ff;
    --btn-primary-hover: #1877f2;
    --btn-secondary: #3a3b3c;
    --btn-secondary-hover: #4e4f50;
    --btn-secondary-active: #2d88ff;
    --btn-danger: #dc3545;
    --btn-danger-hover: #c82333;

    /* Sort header */
    --sort-header-hover: #3a3b3c;

    /* Shadows */
    --shadow-light: rgba(0, 0, 0, 0.4);
    --shadow-dark: rgba(0, 0, 0, 0.6);
}

/* Apply theme colors */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p {
    color: var(--text-secondary) !important;
}

em {
    color: var(--text-muted) !important;
}

/* Links */
a {
    color: var(--primary-blue) !important;
}

a:hover, a:focus, a:active {
    color: var(--primary-blue-hover) !important;
}

/* Header */
header {
    background-color: var(--bg-header) !important;
}

/* Cards */
section .card {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-input) !important;
}

select option {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

input::placeholder {
    color: var(--text-muted) !important;
}

label {
    color: var(--text-primary) !important;
}

/* Buttons */
button,
input[type="submit"],
input[type="button"] {
    background-color: var(--btn-primary) !important;
    color: white !important;
}

button:hover,
input[type="submit"]:hover {
    background-color: var(--btn-primary-hover) !important;
}

button.warning,
.button.warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

button.warning:hover,
.button.warning:hover {
    background-color: #e0a800 !important;
}

/* Tables */
table {
    background-color: var(--bg-card) !important;
    border-color: var(--border-table) !important;
}

th {
    background-color: var(--bg-table-header) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-table) !important;
}

td {
    color: var(--text-primary) !important;
    border-color: var(--border-table) !important;
}

/* Only apply background to rows without special classes */
tbody tr:not(.high-temp-row):not(.low-temp-row):not(.normal-temp-row):not(.stale-temp-row) td {
    background-color: var(--bg-card) !important;
}

tbody tr:not(.high-temp-row):not(.low-temp-row):not(.normal-temp-row):not(.stale-temp-row):hover td {
    background-color: var(--bg-table-header) !important;
}

/* Sort headers */
.sort-header:hover {
    background-color: var(--sort-header-hover) !important;
}

/* Filter controls */
.filter-controls {
    background: var(--bg-filter) !important;
    border-color: var(--border-color) !important;
}

.filter-group label {
    color: var(--text-primary) !important;
}

.filter-summary {
    color: var(--text-muted) !important;
}

/* Partner filter buttons */
.partner-filter-btn {
    background: var(--btn-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-table) !important;
}

.partner-filter-btn:hover {
    background: var(--btn-secondary-hover) !important;
}

.partner-filter-btn.active {
    background: var(--btn-secondary-active) !important;
    color: white !important;
    border-color: var(--btn-secondary-active) !important;
}

.partner-filter-btn.active:hover {
    background: var(--btn-primary-hover) !important;
}

/* Clear filters button */
.clear-filters-btn {
    background: var(--btn-danger) !important;
    color: white !important;
}

.clear-filters-btn:hover {
    background: var(--btn-danger-hover) !important;
}

/* Geocoding status */
.geocoding-status {
    color: var(--text-secondary) !important;
}

/* Footer */
footer {
    background-color: var(--bg-header) !important;
    border-top-color: var(--border-color) !important;
}

footer p {
    color: var(--text-secondary) !important;
}

/* Temperature rows - preserve flashing animation in both themes */
/* Light theme uses inline styles for high-temp-row and low-temp-row */
/* But we need to ensure the td backgrounds don't override the row colors */

.high-temp-row td,
.low-temp-row td {
    background-color: transparent !important;
}

.normal-temp-row td {
    background-color: rgba(255, 255, 255, 1) !important;
}

.stale-temp-row td {
    background-color: rgb(255, 255, 255) !important;
}

/* Dark theme - adjust colors but keep animation */
[data-theme="dark"] .high-temp-row {
    background-color: rgba(220, 53, 69, 0.4) !important;
    animation: flash 2s infinite;
}

[data-theme="dark"] .high-temp-row td {
    background-color: transparent !important;
}

[data-theme="dark"] .low-temp-row {
    background-color: rgba(0, 123, 255, 0.4) !important;
    animation: flash 2s infinite;
}

[data-theme="dark"] .low-temp-row td {
    background-color: transparent !important;
}

[data-theme="dark"] .normal-temp-row {
    background-color: var(--bg-card) !important;
    animation: none;
}

[data-theme="dark"] .normal-temp-row td {
    background-color: transparent !important;
}

[data-theme="dark"] .stale-temp-row {
    background-color: var(--bg-card) !important;
    opacity: 0.7;
    animation: none;
}

[data-theme="dark"] .stale-temp-row td {
    background-color: transparent !important;
}

/* Theme Switcher Button */
.theme-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    background-color: var(--bg-input);
}

.theme-icon {
    font-size: 20px;
    line-height: 1;
}

/* Mobile adjustments for theme switcher */
@media (max-width: 575px) {
    .theme-switcher {
        top: 10px;
        right: 10px;
    }

    .theme-toggle {
        padding: 8px 14px;
        font-size: 12px;
    }

    .theme-icon {
        font-size: 18px;
    }
}

/* Scrollbar theming */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-body);
}

/* ============================================
   Responsive Design
   ============================================ */

/* Mobile (< 576px) */
@media (max-width: 575px) {
    header .two {
        position: relative !important;
        left: 0 !important;
    }

    header .two img {
        width: 80px !important;
        height: 80px !important;
    }

    header .ten img {
        width: 280px !important;
        height: 70px !important;
    }

    .side-elements {
        flex-direction: column;
    }

    .side-elements input {
        width: 100% !important;
        margin: 5px 0 !important;
    }

    .side-elements button {
        width: 100%;
        margin-top: 10px;
    }

    .filter-controls {
        padding: 10px;
    }

    .filter-group {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    .partner-filter-btn {
        font-size: 12px;
        padding: 5px 10px;
    }

    table {
        font-size: 11px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    th, td {
        padding: 6px 4px !important;
        font-size: 11px !important;
    }
}

/* Tablet (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    header .two {
        position: relative !important;
        left: 2% !important;
    }

    header .two img {
        width: 90px !important;
        height: 90px !important;
    }

    header .ten img {
        width: 320px !important;
        height: 80px !important;
    }

    th, td {
        padding: 8px 6px !important;
        font-size: 12px !important;
    }
}

/* Desktop adjustments */
@media (min-width: 768px) {
    header .two {
        left: 5% !important;
    }
}

/* ============================================
   Additional Styles for dardinitive.html
   ============================================ */

/* Tab buttons */
.tab-button {
    background: var(--bg-filter) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.tab-button.active {
    background: var(--bg-card) !important;
    border-top-color: var(--btn-secondary-active) !important;
}

.tab-buttons {
    border-bottom-color: var(--border-color) !important;
}

/* Braga trackers table */
.braga-trackers-table {
    background-color: var(--bg-card) !important;
}

.braga-trackers-table th,
.braga-trackers-table td {
    border-color: var(--border-table) !important;
    color: var(--text-primary) !important;
}

.braga-trackers-table th {
    background-color: var(--bg-table-header) !important;
}

.braga-trackers-table td {
    background-color: transparent !important;
}

/* Keep temperature row classes working for braga table */
.braga-trackers-table .high-temp-row td,
.braga-trackers-table .low-temp-row td {
    background-color: transparent !important;
}

.braga-trackers-table .normal-temp-row td,
.braga-trackers-table .stale-temp-row td {
    background-color: transparent !important;
}

/* Loading state */
.loading-braga {
    color: var(--text-secondary) !important;
}

/* Icon preview links */
.icon-preview::before {
    content: "👁";
}

a.secondary {
    color: var(--text-secondary) !important;
}

a.secondary:hover {
    color: var(--text-primary) !important;
}