/* =========================================================================
   RootBudget Theme Layer
   -------------------------------------------------------------------------
   Single source of truth for app-wide theming. Aliases MudBlazor's palette
   CSS variables into semantic --rb-* tokens, then overrides Bootstrap 5.1
   defaults so cards / inputs / buttons / tables / dialogs flip with the
   rest of the app when MudThemeProvider's IsDarkMode toggles.

   Loaded AFTER bootstrap.min.css, MudBlazor.min.css, and app.css, so these
   rules win without needing !important for most selectors.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SECTION A — Design tokens
   ------------------------------------------------------------------------- */
:root {
    /* Surfaces — fallbacks cover the bootstrap window before MudBlazor
       emits --mud-palette-* vars, so elements rendered during the
       Blazor loading screen still look correct. */
    --rb-bg:              var(--mud-palette-background, #ffffff);
    --rb-surface:         var(--mud-palette-surface, #ffffff);
    --rb-surface-alt:     var(--mud-palette-background-gray, #f5f5f5);
    --rb-surface-raised:  var(--mud-palette-gray-lighter, #f9f9f9);

    /* Text */
    --rb-text:            var(--mud-palette-text-primary, #212529);
    --rb-text-muted:      var(--mud-palette-text-secondary, #6c757d);
    --rb-text-disabled:   var(--mud-palette-text-disabled, #adb5bd);

    /* Borders / lines */
    --rb-border:          var(--mud-palette-lines-default, #dee2e6);
    --rb-divider:         var(--mud-palette-divider, #dee2e6);
    --rb-table-lines:     var(--mud-palette-table-lines, #dee2e6);

    /* Brand + status */
    --rb-primary:         var(--mud-palette-primary, #2e7d32);
    --rb-primary-text:    var(--mud-palette-primary-text, #ffffff);
    --rb-success:         var(--mud-palette-success, #2e7d32);
    --rb-danger:          var(--mud-palette-error, #dc3545);
    --rb-warning:         var(--mud-palette-warning, #ffc107);
    --rb-info:            var(--mud-palette-info, #0dcaf0);

    /* Component tokens */
    --rb-card-bg:         var(--rb-surface);
    --rb-card-header-bg:  color-mix(in srgb, var(--rb-primary) 12%, var(--rb-surface));
    --rb-input-bg:        var(--rb-surface);
    --rb-input-border:    var(--rb-border);
    --rb-input-focus:     var(--rb-primary);
    --rb-input-placeholder: var(--rb-text-muted);
    --rb-table-stripe:    color-mix(in srgb, var(--rb-surface) 94%, var(--rb-primary) 6%);
    --rb-table-hover:     color-mix(in srgb, var(--rb-surface) 86%, var(--rb-primary) 14%);
    --rb-modal-overlay:   rgba(0, 0, 0, 0.55);
    --rb-scrollbar-track: var(--rb-surface-alt);
    --rb-scrollbar-thumb: var(--mud-palette-action-default);

    /* Focus ring (2-stop, modern look) */
    --rb-focus-ring:      0 0 0 0.2rem color-mix(in srgb, var(--rb-primary) 35%, transparent);

    /* Form-select arrow — medium gray readable on both light and dark bg.
       (Hardcoded because CSS vars can't live inside url() data URIs cleanly.) */
    --rb-select-arrow-url: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a8a95' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* -------------------------------------------------------------------------
   SECTION B — Page body + base elements
   ------------------------------------------------------------------------- */
body {
    background-color: var(--rb-bg);
    color: var(--rb-text);
}

hr {
    border: 0;
    border-top: 1px solid var(--rb-divider);
    opacity: 1; /* Bootstrap sets hr opacity: 0.25 which kills visibility in dark */
}

a {
    color: var(--rb-primary);
}
a:hover {
    color: color-mix(in srgb, var(--rb-primary) 80%, var(--rb-text));
}

/* -------------------------------------------------------------------------
   SECTION C — Bootstrap Card overrides
   ------------------------------------------------------------------------- */
.card {
    background-color: var(--rb-card-bg);
    color: var(--rb-text);
    border: 1px solid var(--rb-border);
}

.card-header {
    background-color: var(--rb-card-header-bg);
    border-bottom: 1px solid var(--rb-border);
    color: var(--rb-text);
}

.card-footer {
    background-color: var(--rb-card-header-bg);
    border-top: 1px solid var(--rb-border);
    color: var(--rb-text);
}

.card-body {
    color: var(--rb-text);
}

.login-card {
    border: 1px solid var(--rb-border);
    border-top: 4px solid var(--rb-primary);
    border-radius: 0.75rem;
    box-shadow: 0 10px 36px rgba(46, 125, 50, 0.18);
}

.login-card h2 {
    color: var(--rb-primary);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* -------------------------------------------------------------------------
   SECTION D — Inputs and selects
   ------------------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: var(--rb-input-bg);
    color: var(--rb-text);
    border: 1px solid var(--rb-input-border);
}

.form-control::placeholder {
    color: var(--rb-input-placeholder);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--rb-input-bg);
    color: var(--rb-text);
    border-color: var(--rb-input-focus);
    box-shadow: var(--rb-focus-ring);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--rb-surface-alt);
    color: var(--rb-text-muted);
    border-color: var(--rb-border);
    opacity: 1;
}

/* Bootstrap's default arrow is a dark SVG; swap for theme-neutral gray */
.form-select {
    background-image: var(--rb-select-arrow-url);
}

.form-label {
    color: var(--rb-text);
}

/* Native <input type="checkbox"> / <input type="radio"> */
.form-check-input {
    background-color: var(--rb-input-bg);
    border: 1px solid var(--rb-input-border);
}
.form-check-input:checked {
    background-color: var(--rb-primary);
    border-color: var(--rb-primary);
}
.form-check-input:focus {
    border-color: var(--rb-input-focus);
    box-shadow: var(--rb-focus-ring);
}
.form-check-label {
    color: var(--rb-text);
}

/* File input (used in Import dialog) */
.form-control[type="file"]::-webkit-file-upload-button,
.form-control[type="file"]::file-selector-button {
    background-color: var(--rb-surface-alt);
    color: var(--rb-text);
    border: 0;
    border-right: 1px solid var(--rb-border);
}

/* -------------------------------------------------------------------------
   SECTION E — Buttons
   ------------------------------------------------------------------------- */
.progress-bar {
    background-color: var(--rb-primary);
}

.btn-primary {
    background-color: var(--rb-primary);
    border-color: var(--rb-primary);
    color: var(--rb-primary-text);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: color-mix(in srgb, var(--rb-primary) 85%, black);
    border-color: color-mix(in srgb, var(--rb-primary) 85%, black);
    color: var(--rb-primary-text);
    box-shadow: var(--rb-focus-ring);
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: color-mix(in srgb, var(--rb-primary) 55%, var(--rb-surface));
    border-color: color-mix(in srgb, var(--rb-primary) 55%, var(--rb-surface));
    color: var(--rb-primary-text);
    opacity: 0.75;
}

.btn-outline-primary {
    color: var(--rb-primary);
    border-color: var(--rb-primary);
}
.btn-outline-primary:hover {
    background-color: var(--rb-primary);
    border-color: var(--rb-primary);
    color: var(--rb-primary-text);
}

.btn-danger {
    background-color: var(--rb-danger);
    border-color: var(--rb-danger);
    color: #fff;
}

.btn-secondary {
    background-color: var(--rb-surface-alt);
    border-color: var(--rb-border);
    color: var(--rb-text);
}
.btn-secondary:hover {
    background-color: var(--rb-border);
    border-color: var(--rb-border);
    color: var(--rb-text);
}

/* -------------------------------------------------------------------------
   SECTION F — Tables
   ------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--rb-text);
    --bs-table-border-color: var(--rb-table-lines);
    --bs-table-striped-bg: var(--rb-table-stripe);
    --bs-table-striped-color: var(--rb-text);
    --bs-table-hover-bg: var(--rb-table-hover);
    --bs-table-hover-color: var(--rb-text);
    color: var(--rb-text);
    border-color: var(--rb-table-lines);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--rb-text);
    border-bottom-color: var(--rb-table-lines);
}
.table-borderless > :not(caption) > * > * {
    border-bottom: 0;
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--rb-table-hover);
    color: var(--rb-text);
}

/* -------------------------------------------------------------------------
   SECTION G — Bootstrap utility color overrides for theme consistency
   ------------------------------------------------------------------------- */
.text-primary { color: var(--rb-primary) !important; }
.text-success { color: var(--rb-success) !important; }
.text-danger  { color: var(--rb-danger)  !important; }
.text-warning { color: var(--rb-warning) !important; }
.text-info    { color: var(--rb-info)    !important; }
.text-muted   { color: var(--rb-text-muted) !important; }

.bg-primary   { background-color: var(--rb-primary) !important; color: var(--rb-primary-text) !important; }
.bg-success   { background-color: var(--rb-success) !important; }
.bg-danger    { background-color: var(--rb-danger)  !important; }
.bg-warning   { background-color: var(--rb-warning) !important; }
.bg-info      { background-color: var(--rb-info)    !important; }

/* -------------------------------------------------------------------------
   SECTION H — Alerts (used in login flow + elsewhere)
   ------------------------------------------------------------------------- */
.alert-info {
    background-color: color-mix(in srgb, var(--rb-info) 14%, var(--rb-surface));
    border-color: color-mix(in srgb, var(--rb-info) 40%, transparent);
    color: var(--rb-text);
}
.alert-danger {
    background-color: color-mix(in srgb, var(--rb-danger) 14%, var(--rb-surface));
    border-color: color-mix(in srgb, var(--rb-danger) 40%, transparent);
    color: var(--rb-text);
}
.alert-warning {
    background-color: color-mix(in srgb, var(--rb-warning) 18%, var(--rb-surface));
    border-color: color-mix(in srgb, var(--rb-warning) 45%, transparent);
    color: var(--rb-text);
}
.alert-success {
    background-color: color-mix(in srgb, var(--rb-success) 14%, var(--rb-surface));
    border-color: color-mix(in srgb, var(--rb-success) 40%, transparent);
    color: var(--rb-text);
}

/* -------------------------------------------------------------------------
   SECTION I — Scrollbar polish
   ------------------------------------------------------------------------- */
* {
    scrollbar-color: var(--rb-scrollbar-thumb) var(--rb-scrollbar-track);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background-color: var(--rb-scrollbar-track);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--rb-scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid var(--rb-scrollbar-track);
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--rb-primary);
}