/* ============================================================
   GLOBAL THEME — applies to both light and dark modes
   ============================================================ */

.navbar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.navbar-brand {
    font-size: 1.25rem;
    letter-spacing: -0.5px;
}

.nav-link {
    transition: color 0.2s ease-in-out;
}

#theme-switcher.nav-link {
    color: inherit !important;
}

/* Theme toggle button — needs to be visible in both modes */
#theme-toggle-btn {
    color: var(--bs-body-color);
}
#theme-toggle-btn:hover {
    color: var(--bs-emphasis-color);
}

/* Make .text-info readable in BOTH modes
   Dark mode keeps the bright cyan with subtle glow,
   light mode uses a darker, eye-friendly teal. */
[data-bs-theme="dark"] .text-info {
    color: #38bdf8 !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}
[data-bs-theme="light"] .text-info {
    color: #0a6c7e !important;
    text-shadow: none;
}

/* ============================================================
   DARK MODE — custom overrides
   ============================================================ */

[data-bs-theme="dark"] .form-control[readonly] {
    background-color: #1a1d21;
    border-color: #373b3e;
    color: #e3e6e8;
    opacity: 1;
    cursor: not-allowed;
}

[data-bs-theme="dark"] .text-muted-rut {
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .custom-total-row {
    background-color: rgba(30, 41, 59, 0.7);
    color: #f8fafc;
    border-top: 2px solid #334155;
}

[data-bs-theme="dark"] #total_productos_calc {
    box-shadow: none;
    outline: none;
    text-align: right;
    padding-right: 0;
}

[data-bs-theme="dark"] #theme-icon.bi-sun {
    color: #ffc107;
}

/* ============================================================
   LIGHT MODE — custom overrides (eye-friendly defaults)
   ============================================================ */

/* Soft warm-gray body to reduce glare */
[data-bs-theme="light"] body {
    background-color: #f4f6f8;
    color: #1f2937;
}

/* Subtle, lower-contrast borders in light mode */
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .navbar,
[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .list-group-item {
    border-color: #d8dde2;
}

/* Card backgrounds pop gently on the off-white body */
[data-bs-theme="light"] .card {
    background-color: #ffffff;
    box-shadow: 0 .125rem .25rem rgba(15, 23, 42, .06) !important;
}

[data-bs-theme="light"] .form-control[readonly] {
    background-color: #f1f3f5;
    border-color: #d8dde2;
    color: #495057;
    opacity: 1;
    cursor: not-allowed;
}

[data-bs-theme="light"] .text-muted-rut {
    color: #6c757d !important;
}

[data-bs-theme="light"] .custom-total-row {
    background-color: #eef2f6;
    color: #1f2937;
    border-top: 2px solid #cbd5e1;
}

[data-bs-theme="light"] #total_productos_calc {
    box-shadow: none;
    outline: none;
    text-align: right;
    padding-right: 0;
}

[data-bs-theme="light"] #theme-icon.bi-moon-stars {
    color: #5856d6;
}

/* Make Bootstrap's bg-dark-subtle in cards/headers lighter and warmer in light mode */
[data-bs-theme="light"] .bg-dark-subtle {
    background-color: #eef2f6 !important;
}

/* Lighten the harshness of bg-body-tertiary slightly */
[data-bs-theme="light"] .bg-body-tertiary {
    background-color: #eaeef2 !important;
}

/* ============================================================
   RESPONSIVE — small-screen action buttons
   ============================================================ */

@media (max-width: 576px) {
    .col-barcode {
        display: none;
    }

    .btn-edit-sm,
    .btn-del-sm {
        padding: 4px 7px;
        font-size: 0.75rem;
    }
}