/* ============================================================
   EasyErgo — Theme enforcement layer (Light Theme)
   Loads LAST in App.razor — wins the cascade.
   Uses html+body prefix (0,2,1) > Bootstrap (0,1,0)
   ============================================================ */

/* ── Spin animation for refresh icons ───────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .7s linear infinite; }

/* ── Buttons ─────────────────────────────────────────────── */
html body .btn-outline-secondary {
    background: #fff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
}

html body .btn-outline-secondary:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

html body .btn-outline-secondary.active,
html body .btn-outline-secondary:active {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}

html body .btn-secondary {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

html body .btn-secondary:hover {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

html body .btn-dark {
    background: #1e293b !important;
    border: 1.5px solid #1e293b !important;
    color: #fff !important;
}

html body .btn-dark:hover {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #fff !important;
}

html body .btn-outline-dark {
    background: transparent !important;
    border: 1.5px solid #334155 !important;
    color: #334155 !important;
}

html body .btn-outline-dark:hover {
    background: #334155 !important;
    color: #fff !important;
}

/* ── Core surface & text ─────────────────────────────────── */
html body,
html body .page-section,
html body .page-section.bg-white,
html body .page-section.bg-light,
html body article.content > *,
html body article.content {
    background-color: transparent;
    color: #1e293b;
}

html body .page-section {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.65rem !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.07) !important;
    color: #1e293b !important;
}

/* ── Bootstrap bg utility overrides ─────────────────────── */
html body .bg-white    { background-color: #ffffff !important; color: #1e293b !important; }
html body .bg-light    { background-color: #f8fafc !important; color: #1e293b !important; }
html body .bg-body-secondary,
html body .bg-secondary-subtle { background-color: #f8fafc !important; color: #64748b !important; }

/* ── Text utilities ──────────────────────────────────────── */
html body .text-muted  { color: #64748b !important; }
html body .text-dark   { color: #1e293b !important; }
html body .text-body   { color: #1e293b !important; }
html body .form-text   { color: #64748b !important; }
html body small,
html body .small        { color: inherit; }

/* ── Cards ───────────────────────────────────────────────── */
html body .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

html body .card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

html body .card-body  { color: #1e293b !important; }
html body .card-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

html body .modal-header.bg-primary {
    background: #2563eb !important;
    color: #fff !important;
}

/* ── Tables ──────────────────────────────────────────────── */
html body table        { color: #1e293b !important; }
html body th           {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}
html body td           {
    background: transparent !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html body tbody tr:nth-child(even) td { background: #fafbfc !important; }
html body tbody tr:hover td { background: #eff6ff !important; color: #1e293b !important; }

/* Bootstrap contextual rows */
html body tr.table-primary   > * { background: #dbeafe !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
html body tr.table-secondary > * { background: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0 !important; }
html body tr.table-success   > * { background: #dcfce7 !important; color: #15803d !important; border-color: #bbf7d0 !important; }
html body tr.table-warning   > * { background: #fef9c3 !important; color: #a16207 !important; border-color: #fde68a !important; }
html body tr.table-danger    > * { background: #fee2e2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
html body tr.table-info      > * { background: #cffafe !important; color: #0e7490 !important; border-color: #a5f3fc !important; }

html body .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #1e293b !important;
    border-bottom-color: #e2e8f0 !important;
    box-shadow: none !important;
}

/* ── Forms ───────────────────────────────────────────────── */
html body .form-control,
html body .form-select,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="search"],
html body input[type="date"],
html body textarea {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
}

/* Select arrow — prevent tiling */
html body .form-select,
html body select.form-select,
html body select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
}

html body select option {
    background: #ffffff !important;
    color: #1e293b !important;
}

html body .form-control:focus,
html body .form-select:focus,
html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="password"]:focus,
html body input[type="number"]:focus,
html body input[type="date"]:focus,
html body textarea:focus {
    background-color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
    color: #1e293b !important;
}

html body .form-control::placeholder,
html body input::placeholder { color: #94a3b8 !important; }

html body .form-control:disabled,
html body .form-control[readonly] {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
}

html body .form-label { color: #64748b; }
html body .input-group-text {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}

/* ── Modals ──────────────────────────────────────────────── */
html body .modal-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}
html body .modal-header { background: #f8fafc !important; border-bottom-color: #e2e8f0 !important; }
html body .modal-title  { color: #1e293b !important; }
html body .modal-body   { color: #1e293b !important; }
html body .modal-footer { background: #ffffff !important; border-top-color: #e2e8f0 !important; }

/* ── Alerts ──────────────────────────────────────────────── */
html body .alert-danger  { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }
html body .alert-success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #14532d !important; }
html body .alert-info    { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af !important; }
html body .alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #78350f !important; }

/* ── Badges ──────────────────────────────────────────────── */
html body .badge.bg-primary   { background: #dbeafe !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
html body .badge.bg-success   { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
html body .badge.bg-danger    { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }
html body .badge.bg-warning   { background: #fef9c3 !important; color: #a16207 !important; border: 1px solid #fde68a !important; }
html body .badge.bg-info      { background: #cffafe !important; color: #0e7490 !important; border: 1px solid #a5f3fc !important; }
html body .badge.bg-secondary { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }

/* metric-icon circles */
html body .metric-icon.bg-primary   { background: rgba(37, 99,235,.12) !important; border: none !important; }
html body .metric-icon.bg-success   { background: rgba(22,163, 74,.12) !important; border: none !important; }
html body .metric-icon.bg-warning   { background: rgba(217,119,  6,.12) !important; border: none !important; }
html body .metric-icon.bg-danger    { background: rgba(220, 38, 38,.12) !important; border: none !important; }
html body .metric-icon.bg-info      { background: rgba(  8,145,178,.12) !important; border: none !important; }
html body .metric-icon.bg-secondary { background: rgba(100,116,139,.10) !important; border: none !important; }

/* ── Preview areas ───────────────────────────────────────── */
html body .border.rounded-3.bg-light,
html body .bg-light.rounded-3,
html body .bg-light.p-3 {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* ── Headings inside page sections ──────────────────────── */
html body .page-section h1,
html body .page-section h2,
html body .page-section h3,
html body .page-section h4,
html body .page-section h5,
html body .page-section h6,
html body .card h1,
html body .card h2,
html body .card h3,
html body .card h4,
html body .card h5,
html body .card h6 { color: #1e293b; }

/* ── Pagination ──────────────────────────────────────────── */
html body .page-link {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #2563eb !important;
}
html body .page-link:hover { background: #eff6ff !important; color: #1d4ed8 !important; }
html body .page-item.active .page-link { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
html body .page-item.disabled .page-link { color: #94a3b8 !important; }

/* ── List groups ─────────────────────────────────────────── */
html body .list-group-item {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* ── Borders ─────────────────────────────────────────────── */
html body .border,
html body .border-top,
html body .border-bottom,
html body .border-start,
html body .border-end { border-color: #e2e8f0 !important; }
html body .border-light-subtle { border-color: #e2e8f0 !important; }
html body hr { border-color: #e2e8f0 !important; opacity: 1; }
html body .border-bottom.pb-1 { border-color: #e2e8f0 !important; }

/* ── Dropdown ────────────────────────────────────────────── */
html body .dropdown-menu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html body .dropdown-item { color: #1e293b !important; }
html body .dropdown-item:hover { background: #eff6ff !important; color: #2563eb !important; }

/* ── Mobile overrides ────────────────────────────────────── */
@media (max-width: 640px) {
    html body .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down) {
        margin: 0.75rem auto !important;
        max-width: calc(100vw - 1.5rem) !important;
    }

    html body .modal-fullscreen-sm-down {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        margin: 0 !important;
    }
    html body .modal-fullscreen-sm-down .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }

    html body .page-section .table-responsive {
        border-radius: 0 !important;
    }
}