/* ============================================================================
   LIGHT THEME — VimaxV4.0
   ============================================================================
   White core with soft accent colors. All backgrounds are white/near-white.
   Branch accent colors are preserved via var(--branch-color).
   ============================================================================ */


/* ═══════════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (:root)
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {

    /* ── Core surfaces ────────────────────────────────────────────────────── */
    --blazor-load-background-color: #ffffff;
    --index-background-color: #f9fafb;
    --surface: #ffffff;
    --background-tint-color: #fbfdff;

    /* ── Typography ───────────────────────────────────────────────────────── */
    --app-text-color: #000000;
    --app-text-muted: #6b7280;

    /* ── Accent palette ───────────────────────────────────────────────────── */
    --primary: #93c5fd;
    --primary-700: #60a5fa;
    --secondary: #bbf7d0;
    --accent: #ffd9b6;
    --accent-700: #ffb68a;

    /* ── Top bar ──────────────────────────────────────────────────────────── */
    --top-bar-background-color: #ffffff;
    --top-bar-text-color: var(--app-text-color);
    --top-bar-border-color: rgba(99,102,241,0.08);

    /* ── Navigation menu ──────────────────────────────────────────────────── */
    --navmenu-container-background: #ffffff;
    --navbar-background-color: #ffffff;
    --navbar-text-color: var(--app-text-color);
    --navbar-sub_item-menu_name-hover-color: var(--primary-700);
    --navlink-hover-background-color: rgba(99,102,241,0.06);
    --navlink-hover-text-color: var(--primary-700);
    --navlink-active-background-color: rgba(147,197,253,0.12);
    --navlink-active-text-color: var(--primary-700);

    /* ── Buttons ──────────────────────────────────────────────────────────── */
    --button-background-color: #eef6ff;
    --button-text-color: var(--app-text-color);
    --button-hover-background-color: #e0f2ff;
    --button-hover-text-color: var(--app-text-color);
    --button-outline-color: rgba(99,102,241,0.12);

    /* ── Table ────────────────────────────────────────────────────────────── */
    --table-border-color: #eef4fb;
    --table-text-color: var(--app-text-color);
    --table-hover-background-color: #fbfeff;
    --table-edit-icon: var(--primary-700);

    /* ── Dialog / Paper containers ────────────────────────────────────────── */
    --dialog-background-color: #ffffff;
    --dialog-text-color: var(--app-text-color);
    --paper-container-background: #ffffff;
    --paper-container-border: #f0f6fb;
    --navigation-panel-background: #ffffff;
    --navigation-panel-border: #f0f6fb;
    --boton-activo-background: rgba(99,102,241,0.06);
    --boton-inactivo-background: #fbfdff;
    --boton-hover-background: rgb(177 177 177 / 60%);
    --content-section-background: #ffffff;
    --content-section-border: #f3f7fb;
    --content-section-text: var(--app-text-color);

    /* ── Cards ────────────────────────────────────────────────────────────── */
    --card-shadow: 0 6px 18px rgba(15,23,42,0.04);
    --card-radius: 12px;
    --card-bg-color: #ffffff;
    --card-text-color: black;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   2. BASE — html, body, links
   ═══════════════════════════════════════════════════════════════════════════════ */
html, body {
    height: 100%;
    background: var(--index-background-color);
    color: var(--app-text-color);
}
a { color: var(--primary-700); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════════════
   3. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */
.btn {
    background: var(--button-background-color);
    color: var(--button-text-color);
    border: 1px solid transparent;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(99,102,241,0.04);
    transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--button-hover-background-color); transform: translateY(-1px); }
.btn-outline { background: transparent; border: 1px solid var(--button-outline-color); }


/* ═══════════════════════════════════════════════════════════════════════════════
   4. CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.card {
    background: var(--paper-container-background);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 14px;
    border: 1px solid var(--paper-container-border);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   5. TABLES
   ═══════════════════════════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; color: var(--table-text-color); }
thead th { background: var(--table-header-background-color); color: var(--app-text-color); padding: 10px 12px; text-align: left; }
tbody tr { border-bottom: 1px solid var(--table-border-color); }
tbody tr:hover { background: var(--table-hover-background-color); }


/* ═══════════════════════════════════════════════════════════════════════════════
   6. INPUTS
   ═══════════════════════════════════════════════════════════════════════════════ */
input, select, textarea {
    background: #fff;
    border: 1px solid #eef6ff;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--app-text-color);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary-700);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   7. BADGE / MISC
   ═══════════════════════════════════════════════════════════════════════════════ */
.badge { background: var(--accent); color: #000000; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.muted { color: var(--app-text-muted); }


/* ═══════════════════════════════════════════════════════════════════════════════
   8. TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════════ */
* { transition: background-color .12s ease, color .12s ease, border-color .12s ease; }


/* ═══════════════════════════════════════════════════════════════════════════════
   9. TOPBAR / HEADER / NAV / FOOTER — Force black text for legibility
   ═══════════════════════════════════════════════════════════════════════════════ */
header, .top-bar, .topbar, .navbar, nav, .mud-appbar, .mud-navmenu, .mud-drawer, footer, .footer {
    color: #000000 !important;
}
header a, .top-bar a, .navbar a, nav a, footer a, .footer a {
    color: #000000 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   10. FOOTER BAR PLATE
   ═══════════════════════════════════════════════════════════════════════════════ */
.footerbar-plate {
    color: #000000 !important;
    border-color: rgba(0,0,0,0.08) !important;
    background: transparent !important;
    border: 1px solid rgb(0 0 0 / 95%) !important;
}
.footerbar-plate .footerbar-label,
.footerbar-plate .footerbar-icon {
    color: #000000 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   11. TABS — Light tab bar background
   ═══════════════════════════════════════════════════════════════════════════════ */
.mud-tabs-tabbar {
    background-color: var(--paper-container-background) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   12. UO TABLES (Module 813) — Purple accent buttons
   ═══════════════════════════════════════════════════════════════════════════════ */
.uo-filterbar button,
.uo-filterbar button:hover,
.uo-dialog .save-button,
.uo-dialog .save-button:hover {
    background-color: #594ae2 !important;
    color: white !important;
}