/*
 * Global styles. The palette itself lives in Components/Layout/VivelTheme.cs (single source of truth);
 * only tokens that MudBlazor does not model are defined here.
 */
:root {
    --vivel-red: #e20d14;
    --vivel-red-dark: #b30a10;
    --vivel-black: #111111;
    --vivel-focus-ring: #111111;
    --vivel-focus-gap: #ffffff;
    --vivel-error-bg: #fdecec;
    --vivel-error-text: #8c0a0f;
    --vivel-warning-bg: #fff4e0;
    --vivel-warning-text: #8a5300;
    --vivel-success-bg: #e7f4ea;
    --vivel-success-text: #1b7f3b;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ---------- Keyboard focus: visible on white, on red and on the black sidebar ---------- */
:focus-visible {
    outline: 2px solid var(--vivel-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--vivel-focus-gap);
}

.mud-button-filled-primary:focus-visible {
    outline-color: #ffffff;
    box-shadow: 0 0 0 4px #111111;
}

.mud-theme-dark :focus-visible,
.mud-dark-theme :focus-visible {
    --vivel-focus-ring: #ffffff;
    --vivel-focus-gap: #111111;
}

/* ---------- Sidebar: light, active item marked by a red bar (never by color alone: bold + bar) ---------- */
.mud-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.mud-nav-link {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-left: 4px solid transparent;
    border-radius: 0 !important;
}

.mud-navmenu .mud-nav-link:hover {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-drawer-text) !important;
    font-weight: 600;
    border-left-color: var(--vivel-red);
    background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

.vivel-nav-section {
    color: var(--mud-palette-drawer-text);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 16px 4px 20px;
}

/* ---------- App bar ---------- */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* No-JS user menu used on statically rendered pages (Account/*) */
.vivel-static-menu {
    position: relative;
}

.vivel-static-menu > summary {
    list-style: none;
    cursor: pointer;
}

.vivel-static-menu > summary::-webkit-details-marker {
    display: none;
}

.vivel-static-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    padding: 8px 0;
    z-index: 1300;
}

.vivel-global-search {
    width: min(420px, 38vw);
}

/* ---------- Content width: fluid up to 1600px (tables need the room) ---------- */
.vivel-content {
    max-width: 1600px;
    margin-inline: auto;
    padding-top: 16px;
    padding-bottom: 48px;
}

/* ---------- Semantic blocks: icon + text + tint, never a solid red fill ---------- */
.vivel-error-text {
    color: var(--vivel-error-text);
}

.mud-theme-dark .vivel-error-text,
.mud-dark-theme .vivel-error-text {
    color: #ff8084;
}

/* ---------- Privacy mode (values hidden) ---------- */
.vivel-privacy .vivel-sensitive,
.vivel-privacy .vivel-money,
.vivel-privacy .vivel-kpi-value,
.vivel-privacy .vivel-kpi-sub,
.vivel-privacy .fin-bar-value {
    filter: blur(7px);
    user-select: none;
    pointer-events: none;
}

/* ---------- Money ---------- */
.vivel-money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vivel-money-income {
    color: var(--mud-palette-success);
}

.vivel-money-expense {
    color: var(--mud-palette-text-primary);
}

/* ---------- Tables ---------- */
.vivel-row-clickable {
    cursor: pointer;
}

.vivel-selection-bar {
    position: sticky;
    top: 56px;
    z-index: 5;
}

/* ---------- Editor footer stays visible while the form scrolls ---------- */
.vivel-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 12px 0;
    margin-top: 16px;
}

/* ---------- Right-side drawer dialog (new/edit entry) ---------- */
/* the padding that keeps the dialog away from the edge lives on the positioned container */
.mud-dialog-container.mud-dialog-centerright {
    padding: 0 !important;
}

.vivel-drawer-dialog.mud-dialog {
    margin: 0 !important;
    width: min(600px, 100vw) !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
}

.vivel-drawer-dialog.mud-dialog .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Small screens ---------- */
@media (max-width: 960px) {
    .vivel-global-search {
        display: none;
    }
}

/* ---------- Status chips: tinted background + border of the semantic color, text always high contrast ---------- */
.vivel-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 2px 6px;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    border: 1px solid transparent;
}

.vivel-chip .mud-icon-root {
    font-size: 1.1rem;
}

.vivel-chip-success {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-success) 55%, transparent);
}

.vivel-chip-success .mud-icon-root { color: var(--mud-palette-success); }

.vivel-chip-warning {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
}

.vivel-chip-warning .mud-icon-root { color: var(--mud-palette-warning); }

.vivel-chip-error {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-error) 60%, transparent);
    font-weight: 500;
}

.vivel-chip-error .mud-icon-root { color: var(--mud-palette-error); }

/* ---------- KPI cards ---------- */
.vivel-kpi {
    border-left: 4px solid var(--mud-palette-lines-inputs);
}

.vivel-kpi-success { border-left-color: var(--mud-palette-success); }
.vivel-kpi-warning { border-left-color: var(--mud-palette-warning); }
.vivel-kpi-danger { border-left-color: var(--mud-palette-error); }

.vivel-kpi-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.vivel-kpi-link:hover .vivel-kpi-title span {
    text-decoration: underline;
}

.vivel-kpi-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.vivel-kpi-success .vivel-kpi-icon { color: var(--mud-palette-success); }
.vivel-kpi-warning .vivel-kpi-icon { color: var(--mud-palette-warning); }
.vivel-kpi-danger .vivel-kpi-icon { color: var(--mud-palette-error); }

.vivel-kpi-value {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.vivel-kpi-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Empty state ---------- */
.vivel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 16px;
}

.vivel-empty-icon {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

/* ---------- Month picker ---------- */
.vivel-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    min-width: 17rem;
}

/* ---------- Filter bar ---------- */
.vivel-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.vivel-filterbar .vivel-grow {
    flex: 1 1 260px;
}

/* ---------- Skeleton rows ---------- */
.vivel-skeleton-row {
    padding: 10px 16px;
}

.vivel-chip-neutral {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, var(--mud-palette-surface));
    border-color: var(--mud-palette-lines-inputs);
}

.vivel-chip-neutral .mud-icon-root { color: var(--mud-palette-text-secondary); }