/* CSS Variables for Themes */
:root {
    --primary-color: #26a69a;
    --secondary-color: #80cbc4;
    --bg-color: #f4f4f4;
    --text-color: #333;
    --card-bg: #fff;
    --nav-bg: #26a69a;
    --msg-success-bg: #c8e6c9;
    --msg-success-text: #1b5e20;
}

/* Theme Definitions */
.theme-cool {
    --primary-color: #26a69a;
    --nav-bg: #26a69a;
    --bg-color: #f4f4f4;
}

.theme-dark {
    --primary-color: #212121;
    --nav-bg: #212121;
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #333;
}

.theme-avocado {
    --primary-color: #558b2f;
    --nav-bg: #558b2f;
    --bg-color: #f1f8e9;
}

.theme-peach {
    --primary-color: #ff8a65;
    --nav-bg: #ff8a65;
    --bg-color: #fbe9e7;
}

.theme-gold {
    --primary-color: #d4af37;
    --nav-bg: #d4af37;
    --bg-color: #fff9e6;
    --text-color: #333;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

nav,
nav .nav-content {
    background-color: var(--nav-bg) !important;
}

nav .brand-logo,
nav ul a {
    color: #fff !important;
}

.card {
    background-color: var(--card-bg);
    color: var(--text-color);
}

.card .card-title {
    color: var(--primary-color);
}

/* Theme-aware Message Boxes */
.msg-box {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 2px;
}

.msg-success {
    background-color: var(--msg-success-bg);
    color: var(--msg-success-text);
}

.msg-error {
    background-color: var(--msg-error-bg);
    color: var(--msg-error-text);
}

.msg-warning {
    background-color: var(--msg-warning-bg);
    color: var(--msg-warning-text);
}

/* Table Styles for Dark Mode */
.theme-dark table.highlight>tbody>tr:hover {
    background-color: #424242;
}

.theme-dark table.striped>tbody>tr:nth-child(odd) {
    background-color: #424242;
}

/* Input Fields for Dark Mode */
.theme-dark input {
    color: #fff;
}

.theme-dark .input-field label {
    color: #9e9e9e;
}

.theme-dark .input-field input[type=text]:focus+label,
.theme-dark .input-field input[type=number]:focus+label {
    color: #fff;
}

.theme-dark .input-field input[type=text]:focus,
.theme-dark .input-field input[type=number]:focus {
    border-bottom: 1px solid #fff;
    box-shadow: 0 1px 0 0 #fff;
}

/* Modal Styles for Dark Mode */
.theme-dark .modal {
    background-color: #333;
    color: #e0e0e0;
}

.theme-dark .modal .modal-footer {
    background-color: #333;
}

/* Collection Styles for Dark Mode */
.theme-dark .collection {
    border: 1px solid #424242;
}

.theme-dark .collection .collection-item {
    background-color: #333;
    border-bottom: 1px solid #424242;
}

/* UI Fix: Table Overflow */
.step-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    /* Keep numbers on one line */
}

/* Print Styles */
@media print {

    /* Hide Input Section */
    #inputSection {
        display: none !important;
    }

    /* Fix Cut-off Text & Overflow */
    .step-table {
        display: table !important;
        /* Restore table display for print */
        overflow: visible !important;
        white-space: normal !important;
        /* Allow wrapping */
        width: 100% !important;
    }

    /* Ensure good page breaks */
    img,
    table,
    blockquote,
    pre,
    .card {
        page-break-inside: avoid;
    }

    /* Hide Modal Overlays and unnecessary elements */
    .modal-overlay,
    .modal-footer,
    button,
    .btn,
    .btn-small,
    .btn-flat,
    nav {
        display: none !important;
    }

    /* Reset background and colors for print */
    body {
        background-color: white !important;
        color: black !important;
        font-size: 10pt;
        /* Scale down slightly to fit */
    }
}

/* Fix Dropdown Color - ADDED */
.dropdown-content li>a,
.dropdown-content li>span {
    color: #444 !important;
    /* Dark grey for visibility */
}

.dropdown-content {
    background-color: #fff !important;
}