html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =============================================
   TICKER HIGHLIGHT
   ============================================= */
.ticker-highlight {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* =============================================
   NOTE CONTENT
   ============================================= */
.note-content {
    white-space: pre-wrap;
    line-height: 1.5;
}

/* =============================================
   CARDS
   ============================================= */
.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

    .card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

.badge {
    cursor: pointer;
}

    .badge:hover {
        opacity: 0.8;
    }

.cardnote {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* =============================================
   DARK THEME TOGGLE BUTTON
   ============================================= */
#themeToggle {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    background-color: #343a40;
    color: #f8f9fa;
}

#themeToggle:hover {
    transform: scale(1.1);
}

/* =============================================
   DARK THEME
   ============================================= */
[data-theme="dark"] {
    --bs-body-bg: #121416;
    --bs-body-color: #dee2e6;
    --bs-card-bg: #1e2124;
    --bs-card-border-color: #2e3338;
    --bs-border-color: #2e3338;
    --bs-table-bg: #1e2124;
    --bs-table-striped-bg: #24282c;
    --bs-table-hover-bg: #2a2f35;
    --bs-table-border-color: #2e3338;
    --bs-input-bg: #2a2f35;
    --bs-input-color: #dee2e6;
    --bs-input-border-color: #3e4449;
    --bs-modal-bg: #1e2124;
    --bs-modal-border-color: #2e3338;
}

/* Body & root */
[data-theme="dark"] body {
    background-color: #121416;
    color: #dee2e6;
}

/* Cards */
[data-theme="dark"] .card {
    background-color: #1e2124;
    border-color: #2e3338;
    color: #dee2e6;
}

[data-theme="dark"] .card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

[data-theme="dark"] .card-header {
    background-color: #24282c;
    border-bottom-color: #2e3338;
    color: #dee2e6;
}

[data-theme="dark"] .card-footer {
    background-color: #24282c;
    border-top-color: #2e3338;
}

/* Tables */
[data-theme="dark"] .table {
    --bs-table-bg: #1e2124;
    --bs-table-striped-bg: #24282c;
    --bs-table-hover-bg: #2a2f35;
    --bs-table-border-color: #2e3338;
    color: #dee2e6;
    border-color: #2e3338;
}

[data-theme="dark"] .table-light {
    --bs-table-bg: #24282c;
    color: #adb5bd;
}

[data-theme="dark"] .table-bordered > :not(caption) > * > * {
    border-color: #2e3338;
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #2a2f35;
    border-color: #3e4449;
    color: #dee2e6;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #2a2f35;
    border-color: #0d6efd;
    color: #dee2e6;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: #6c757d;
}

[data-theme="dark"] .form-text {
    color: #6c757d;
}

/* Buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: #adb5bd;
    border-color: #495057;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary.active {
    background-color: #495057;
    border-color: #495057;
    color: #fff;
}

[data-theme="dark"] .btn-outline-primary {
    color: #6ea8fe;
    border-color: #6ea8fe;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

[data-theme="dark"] .btn-outline-danger {
    color: #ea868f;
    border-color: #ea868f;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

[data-theme="dark"] .btn-secondary {
    background-color: #495057;
    border-color: #495057;
}

/* Modal */
[data-theme="dark"] .modal-content {
    background-color: #1e2124;
    border-color: #2e3338;
    color: #dee2e6;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #2e3338;
}

[data-theme="dark"] .modal-footer {
    border-top-color: #2e3338;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Navbar */
[data-theme="dark"] .navbar {
    background-color: #1a1d20 !important;
    border-bottom: 1px solid #2e3338 !important;
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-link {
    color: #dee2e6 !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link:focus {
    color: #fff !important;
}

[data-theme="dark"] .navbar-toggler {
    border-color: #3e4449;
}

[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* Dropdown menu */
[data-theme="dark"] .dropdown-menu {
    background-color: #24282c;
    border-color: #2e3338;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

[data-theme="dark"] .dropdown-item {
    color: #dee2e6;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: #2e3338;
    color: #fff;
}

[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
    background-color: #0d6efd;
    color: #fff;
}

[data-theme="dark"] .dropdown-item.disabled,
[data-theme="dark"] .dropdown-item:disabled {
    color: #6c757d;
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: #2e3338;
}

[data-theme="dark"] .dropdown-header {
    color: #6c757d;
}

/* Links */
[data-theme="dark"] a:not(.btn) {
    color: #6ea8fe;
}

[data-theme="dark"] a:not(.btn):hover {
    color: #9ec5fe;
}

/* Badges */
[data-theme="dark"] .badge.bg-secondary {
    background-color: #495057 !important;
}

[data-theme="dark"] .badge.bg-primary {
    background-color: #0d6efd !important;
}

/* Ticker highlight (dark-friendly) */
[data-theme="dark"] .ticker-highlight {
    background-color: #3d3000;
    color: #ffd166;
    border-color: #665200;
}

/* Scrollbar (webkit) */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e2124;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3e4449;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #555d65;
}

/* Theme toggle button in dark mode */
[data-theme="dark"] #themeToggle {
    background-color: #f8f9fa;
    color: #212529;
}

/* Text helpers */
[data-theme="dark"] .text-muted {
    color: #6c757d !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #dee2e6;
}