/* =====================================================================
   Modern UI overlay for Bootstrap 5.3 (Bootswatch)
   ---------------------------------------------------------------------
   Loaded AFTER the themed Bootstrap CSS in the layouts. It modernizes
   the whole app by overriding Bootstrap's own design tokens (--bs-*),
   which its components already consume.

   THEME-AGNOSTIC: every accent colour is derived from the active
   theme's --bs-primary via color-mix(), so the admin theme-switcher
   keeps working on light AND dark Bootswatch themes.
   ===================================================================== */

:root {
    /* ---- Softer, larger radii (modern feel, propagates app-wide) ---- */
    --bs-border-radius:      .65rem;
    --bs-border-radius-sm:   .45rem;
    --bs-border-radius-lg:   .9rem;
    --bs-border-radius-xl:   1.15rem;
    --bs-border-radius-xxl:  1.5rem;

    /* ---- Layered, soft shadows (replace Bootstrap's flatter defaults) ---- */
    --bs-box-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .07);
    --bs-box-shadow:    0 4px 12px -2px rgba(15, 23, 42, .10), 0 2px 6px -2px rgba(15, 23, 42, .08);
    --bs-box-shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, .22), 0 8px 18px -10px rgba(15, 23, 42, .14);

    /* ---- Accent tints derived from the theme primary ---- */
    --ui-accent-soft:   color-mix(in srgb, var(--bs-primary) 12%, transparent);
    --ui-accent-softer: color-mix(in srgb, var(--bs-primary) 7%, transparent);
    --ui-focus-ring:    color-mix(in srgb, var(--bs-primary) 22%, transparent);
    --ui-hairline:      color-mix(in srgb, var(--bs-body-color) 9%, transparent);

    /* ---- Easing ---- */
    --ui-ease:        cubic-bezier(.4, 0, .2, 1);
    --ui-ease-spring: cubic-bezier(.22, 1, .36, 1);

    /* Refined focus-ring colour for components that use it */
    --bs-focus-ring-color: var(--ui-focus-ring);
}

/* ---- Typography ---- */
body {
    font-family: 'Figtree', system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .1px;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -.012em;
    font-weight: 700;
}

/* ---- Buttons: subtle depth + springy micro-interaction ---- */
.btn {
    font-weight: 600;
    transition: transform .15s var(--ui-ease-spring),
                box-shadow .15s var(--ui-ease),
                background-color .15s var(--ui-ease),
                border-color .15s var(--ui-ease),
                color .15s var(--ui-ease);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Tinted elevation for solid (filled) button variants only */
.btn-primary, .btn-secondary, .btn-success,
.btn-danger,  .btn-warning,   .btn-info, .btn-dark {
    box-shadow: 0 6px 16px -9px color-mix(in srgb, var(--bs-btn-bg, var(--bs-primary)) 85%, transparent);
}
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover,
.btn-danger:hover,  .btn-warning:hover,   .btn-info:hover, .btn-dark:hover {
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--bs-btn-bg, var(--bs-primary)) 90%, transparent);
}

/* ---- Form controls: smoother focus ---- */
.form-control,
.form-select {
    transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .22rem var(--ui-focus-ring);
}

/* ---- Cards: gentle depth, hairline border ---- */
.card {
    --bs-card-border-color: var(--ui-hairline);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
}

/* ---- Modals & dropdowns: borderless, rounded, soft shadow ---- */
.modal {
    --bs-modal-border-radius: var(--bs-border-radius-xl);
    --bs-modal-box-shadow: var(--bs-box-shadow-lg);
    --bs-modal-border-width: 0;
}
.dropdown-menu {
    --bs-dropdown-border-radius: var(--bs-border-radius-lg);
    --bs-dropdown-border-color: var(--ui-hairline);
    --bs-dropdown-box-shadow: var(--bs-box-shadow);
    padding: .35rem;
}
.dropdown-item {
    border-radius: var(--bs-border-radius-sm);
    transition: background-color .12s var(--ui-ease), color .12s var(--ui-ease);
}

/* ---- Badges, alerts, tables ---- */
.badge {
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 50rem;
}
.alert { border: 0; }
.table {
    --bs-table-border-color: var(--ui-hairline);
}

/* ---- Nav micro-transitions ---- */
.nav-link, .navbar-brand, .page-link {
    transition: color .15s var(--ui-ease), background-color .15s var(--ui-ease),
                opacity .15s var(--ui-ease);
}

/* ---- Slimmer, themed scrollbars ---- */
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--bs-body-color) 22%, transparent);
    border-radius: 50rem;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--bs-body-color) 36%, transparent);
    background-clip: content-box;
}

/* ---- Motion safety: honour reduced-motion ---- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .form-control, .form-select, .card,
    .nav-link, .navbar-brand, .page-link, .dropdown-item {
        transition: none !important;
    }
    .btn:hover { transform: none; }
}