/* ==========================================================================
   User side look: "Calm Swiss" (frontend Phase 5, chosen 2026-10-09).
   Loaded by user.layouts.app only, after custom-theme.css; admin is untouched.
   Shape and type only: every colour still comes from the admin's theme
   settings (light / dark / Custom), so nothing here sets a colour of its own.
   ========================================================================== */

/* 1. Type: Inter (self-hosted, css/inter.css); scripts it lacks fall back to the system font. */
:root {
    --bs-font-sans-serif: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-line-height: 1.55;
    --look-radius: 0.5rem;
    --look-border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}

body {
    font-family: var(--bs-body-font-family);
    font-feature-settings: "cv11", "ss01";
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .app-content-header h3 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Prices, dates and counters line up in columns. */
.price, .badge, table, .tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* 2. Header: plain surface with a hairline, no shadow. */
.app-header {
    box-shadow: none;
    border-bottom: var(--look-border);
}

.app-sidebar.shadow {
    box-shadow: none !important;
}

/* The sidebar follows the page theme (no fixed data-bs-theme): AdminLTE only
   recolours it for its own dark mode, so take its text from the theme itself.
   Without this, Custom (Neon) gave dark grey links on a black sidebar.
   ":root" ties AdminLTE's "[data-bs-theme=dark] .app-sidebar" and wins by order. */
:root .app-sidebar {
    --lte-sidebar-color: var(--bs-body-color);
    --lte-sidebar-header-color: var(--bs-secondary-color);
    --lte-sidebar-hover-color: var(--bs-emphasis-color);
    --lte-sidebar-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.08);
    --lte-sidebar-active-color: var(--bs-emphasis-color);
    --lte-sidebar-menu-active-color: var(--bs-emphasis-color);
    --lte-sidebar-menu-active-bg: rgba(var(--bs-primary-rgb), 0.15);
    --lte-sidebar-submenu-color: var(--bs-secondary-color);
    --lte-sidebar-submenu-hover-color: var(--bs-emphasis-color);
    --lte-sidebar-submenu-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.08);
    --lte-sidebar-submenu-active-color: var(--bs-emphasis-color);
    --lte-sidebar-submenu-active-bg: rgba(var(--bs-primary-rgb), 0.15);
}

/* 3. Cards: flat, thin border, no lift on hover. */
.card {
    border: var(--look-border);
    border-radius: var(--look-radius);
    box-shadow: none;
}

.card:hover {
    box-shadow: none;
}

.card.shadow, .card.shadow-sm, .card.shadow-lg {
    box-shadow: none !important;
}

.card-header {
    padding: 0.875rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* 4. Buttons and fields: no drop shadow (their radius is --bs-border-radius, set in custom-theme.css). */
.btn {
    font-weight: 500;
    box-shadow: none;
}

.form-control, .form-select {
    box-shadow: none;
}

/* Bootstrap's shadow utilities use !important; flat means flat here too. */
.btn.shadow, .btn.shadow-sm, .btn-group.shadow-sm, .btn-group.shadow,
.form-control.shadow-sm, .form-select.shadow-sm, .input-group.shadow-sm {
    box-shadow: none !important;
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.375rem;
}

/* 5. Overlays keep a soft shadow (they float), but smaller. */
.dropdown-menu, .modal-content {
    border: var(--look-border);
    border-radius: var(--look-radius);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
}

/* 6. Tables: quiet headings. */
.table > thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border-bottom-width: 1px;
}

/* 7. More room around the page content. */
.app-content {
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}

@media (min-width: 992px) {
    .app-content > .container-fluid,
    .app-content-header > .container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.badge {
    font-weight: 500;
}