/*
 * app.css — Saldo Sereno application styles
 *
 * Layers: tokens.css → components.css → this file
 * This file handles Bootstrap 5 compatibility shims, accessibility rules,
 * HTMX indicators, and page-specific layouts.
 */

/* ---------------------------------------------------------------------------
 * Logo mode switching — used across layouts
 * --------------------------------------------------------------------------- */
[data-mode="dark"]  .logo-light { display: none !important; }
[data-mode="light"] .logo-dark  { display: none !important; }

/* ---------------------------------------------------------------------------
 * Accessibility — skip-to-content (WCAG 2.4.1)
 * --------------------------------------------------------------------------- */
.visually-hidden-focusable:focus {
    z-index: 10000;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 0.5rem 1rem;
    border-radius: var(--r-sm);
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------------
 * Focus ring (WCAG 2.4.7)
 * --------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
    box-shadow: none;
}

:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Bootstrap 5 — component overrides to match design tokens
 * --------------------------------------------------------------------------- */
.navbar { display: none !important; }  /* sidebar replaces navbar */

.form-control,
.form-select {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    font-size: var(--fs-md);
    border-radius: var(--r-md);
    height: 44px;
    padding: 0 14px;
    font-family: var(--font-sans);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ink);
    box-shadow: none;
    background: var(--surface);
    color: var(--ink);
}
.form-control::placeholder { color: var(--ink-faint); }

.form-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}

.form-label.required::after {
    content: " *";
    color: var(--negative);
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
}

.card-header {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
    font-weight: 500;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    padding: 14px 20px;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--r-md);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.06);
    color: var(--accent-ink);
}

.btn-secondary {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--r-md);
}
.btn-secondary:hover {
    border-color: var(--line-strong);
    background: var(--surface-raised);
    color: var(--ink);
}

.btn-outline-secondary {
    border-color: var(--line);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    border-radius: var(--r-md);
}
.btn-outline-secondary:hover {
    background: var(--bg-alt);
    border-color: var(--line-strong);
    color: var(--ink);
}

.table th {
    font-weight: 500;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
    border-color: var(--line);
}
.table td { border-color: var(--line); color: var(--ink); font-size: var(--fs-sm); }
.table-hover tbody tr:hover { background: var(--bg-alt); }

.badge { font-family: var(--font-sans); }

.alert {
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    border-width: 1px;
}
.alert-success {
    background: var(--positive-soft);
    border-color: var(--positive);
    color: var(--positive);
}
.alert-danger {
    background: var(--negative-soft);
    border-color: var(--negative);
    color: var(--negative);
}
.alert-warning {
    background: var(--warning-soft);
    border-color: var(--warning);
    color: var(--warning);
}

.dropdown-menu {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-sm);
}
.dropdown-item {
    color: var(--ink-soft);
    padding: 8px 14px;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--bg-alt);
    color: var(--ink);
}
.dropdown-divider { border-color: var(--line); }

/* ---------------------------------------------------------------------------
 * HTMX indicators — FR-054
 * --------------------------------------------------------------------------- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: flex; }

/* Global top loading bar shown during any HTMX request */
#htmx-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
}
#htmx-loading-bar .htmx-loading-bar-inner {
    width: 0;
    height: 100%;
    background: var(--accent, #4f46e5);
    animation: htmx-loading-progress 1.5s ease-in-out infinite;
}
@keyframes htmx-loading-progress {
    0%   { width: 0;    margin-left: 0; }
    50%  { width: 70%;  margin-left: 15%; }
    100% { width: 0;    margin-left: 100%; }
}

/* ---------------------------------------------------------------------------
 * Toast container (Bootstrap 5 toast — kept for HTMX error handling)
 * --------------------------------------------------------------------------- */
#toast-container { z-index: 1090; }

/* ---------------------------------------------------------------------------
 * Dashboard metric tiles (Bootstrap-grid layouts)
 * --------------------------------------------------------------------------- */
.ss-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
}
.ss-metric-grid-item {
    padding: 20px 24px;
    border-right: 1px solid var(--line);
}
.ss-metric-grid-item:last-child { border-right: none; }

/* ---------------------------------------------------------------------------
 * Transaction type badges
 * --------------------------------------------------------------------------- */
.badge-income   { background: var(--positive-soft); color: var(--positive); border: none; }
.badge-expense  { background: var(--negative-soft); color: var(--negative); border: none; }
.badge-transfer { background: var(--info-soft);     color: var(--info);     border: none; }

/* ---------------------------------------------------------------------------
 * Reduced motion (WCAG 2.3.3)
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
 * High-contrast mode (Windows HCM)
 * --------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .ss-btn-accent,
    .btn-primary {
        forced-color-adjust: none;
        background-color: ButtonText;
        color: ButtonFace;
    }
}

/* ---------------------------------------------------------------------------
 * Responsive — hide sidebar, show tab bar on small screens
 * --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ss-sidebar {
        display: none;
    }
    .ss-topbar {
        padding: 0 16px;
    }
    .ss-content {
        padding: 16px;
        padding-bottom: 80px;
    }
    .ss-search-wrap {
        display: none;
    }
    .ss-tab-bar {
        display: flex;
    }
    .ss-metric-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ss-metric-grid-item:nth-child(2) {
        border-right: none;
    }
    /* KPI row: 4 → 2 cols on mobile */
    .ss-kpi-row {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Two-column grids → single column on mobile */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 300px"],
    [style*="grid-template-columns: 1fr 300px"] {
        grid-template-columns: 1fr !important;
    }
    /* Stepper labels hide on small screens */
    .ss-step-label { display: none; }
}