/* ============================================================
   BuhayAhente — Shared Design System
   Phase 4: UI/UX Enhancement (presentation layer only)

   Purpose: a single source of truth for color, spacing, radius,
   shadow, and type tokens, plus small reusable component classes
   (badges, alerts, empty states, skeleton loaders, focus rings).

   This file is ADDITIVE. It does not remove or override any
   existing selector used by app.css / site-theme.css / dashboard.css
   / *-page.css files. Those files continue to work unchanged; they
   are being progressively migrated to reference these tokens
   instead of repeating hardcoded hex values (zero visual diff).

   Load order in every layout:
     1. Bootstrap
     2. Font Awesome
     3. design-system.css   <-- this file (tokens + primitives)
     4. app.css             (existing shared helpers)
     5. page/layout-specific CSS (site-theme.css, dashboard.css, ...)
   ============================================================ */

:root {
    /* ---------- Brand colors (canonical — matches site-theme.css) ---------- */
    --ba-primary:       #e11d2e;
    --ba-primary-dark:  #b5121f;
    --ba-primary-light: #fdecee;
    --ba-navy:          #0f1b2d;   /* canonical dark navy — use this, not #131a2b */
    --ba-navy-soft:     #16233a;

    /* Secondary brand accent used on internal/dashboard chrome (app.css) */
    --ba-accent:        #0d6efd;
    --ba-accent-dark:   #0a58ca;

    /* ---------- Semantic colors ---------- */
    --ba-success:       #1e7e34;
    --ba-success-bg:    #e8f6ec;
    --ba-warning:       #b8860b;
    --ba-warning-bg:    #fff8e6;
    --ba-danger:        #c0392b;
    --ba-danger-bg:     #fdecea;
    --ba-info:          #0a58ca;
    --ba-info-bg:       #eaf2ff;

    /* ---------- Neutral / text scale (consolidates #131a2b, #1f2937,
       #333, #444b57, #6c757d, #94a3b8 scattered across page CSS) ---------- */
    --ba-text-900:      #131a2b;   /* headings on light backgrounds */
    --ba-text-700:      #333333;   /* body copy */
    --ba-text-600:      #444b57;   /* secondary body copy */
    --ba-text-500:      #6c757d;   /* muted / captions */
    --ba-text-400:      #94a3b8;   /* placeholders / disabled */
    --ba-border:        #e2e5ea;
    --ba-border-soft:   #eceef1;
    --ba-surface:       #ffffff;
    --ba-surface-alt:   #f7f8fa;
    --ba-surface-muted: #eef0f3;

    /* ---------- Spacing scale (4px base) ---------- */
    --ba-space-1: 0.25rem;  /* 4px  */
    --ba-space-2: 0.5rem;   /* 8px  */
    --ba-space-3: 0.75rem;  /* 12px */
    --ba-space-4: 1rem;     /* 16px */
    --ba-space-5: 1.5rem;   /* 24px */
    --ba-space-6: 2rem;     /* 32px */
    --ba-space-7: 3rem;     /* 48px */
    --ba-space-8: 4rem;     /* 64px */

    /* ---------- Radius scale ---------- */
    --ba-radius-sm:   0.5rem;
    --ba-radius-md:   0.75rem;
    --ba-radius-lg:   1rem;
    --ba-radius-xl:   1.25rem;
    --ba-radius-pill: 50rem;

    /* ---------- Shadow scale ---------- */
    --ba-shadow-sm: 0 .125rem .375rem rgba(15, 27, 45, .06);
    --ba-shadow-md: 0 .375rem 1rem rgba(15, 27, 45, .08);
    --ba-shadow-lg: 0 .75rem 2rem rgba(15, 27, 45, .12);

    /* ---------- Motion ---------- */
    --ba-transition-fast: .15s ease;
    --ba-transition-base: .2s ease;

    /* ---------- Typography ---------- */
    --ba-font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   Base type rhythm (non-destructive: only sets defaults that
   Bootstrap utility classes / page CSS already override where needed)
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--ba-text-900);
    letter-spacing: -0.01em;
}

/* ============================================================
   Focus visibility — consistent keyboard focus ring app-wide
   (extends the auth-only rule already in app.css to every
   interactive element, without changing any layout/spacing)
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(225, 29, 46, 0.35);
    outline-offset: 2px;
}
body.dashboard-theme a:focus-visible,
body.dashboard-theme button:focus-visible,
.dashboard-wrapper a:focus-visible,
.dashboard-wrapper button:focus-visible,
.dashboard-wrapper input:focus-visible,
.dashboard-wrapper select:focus-visible {
    outline-color: rgba(13, 110, 253, 0.4);
}

/* Skip-to-content link (invisible until focused via Tab) */
.ba-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--ba-navy);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 var(--ba-radius-sm) 0;
    text-decoration: none;
    font-weight: 600;
    font-size: .875rem;
}
.ba-skip-link:focus {
    left: 0;
}

/* ============================================================
   Badges — standardized status pill, replaces one-off inline
   `style="background:..."` badges scattered in views
   ============================================================ */
.ba-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: var(--ba-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.ba-badge-success { background: var(--ba-success-bg); color: var(--ba-success); }
.ba-badge-warning { background: var(--ba-warning-bg); color: var(--ba-warning); }
.ba-badge-danger  { background: var(--ba-danger-bg);  color: var(--ba-danger); }
.ba-badge-info    { background: var(--ba-info-bg);    color: var(--ba-info); }
.ba-badge-neutral { background: var(--ba-surface-muted); color: var(--ba-text-600); }
.ba-badge-trial   { background: linear-gradient(135deg, #f6d365, #fda085); color: #3a2a12; }
.ba-badge-premium { background: linear-gradient(135deg, #f6d365, #fda085); color: #3a2a12; }
.ba-badge-sm {
    font-size: .6rem;
    padding: .15rem .5rem;
}

/* ============================================================
   Universal button spinner — unlike .auth-spinner (app.css, hardcoded
   white, meant for solid colored buttons), this uses currentColor so
   it stays visible on outline/light buttons too (used across dashboard
   and admin action forms: suspend/unsuspend/delete/approve, etc).
   ============================================================ */
.ba-btn-spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.5em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .85;
    animation: auth-spin 0.7s linear infinite;
}

/* ============================================================
   Dark gradient banner — trial/promo banners repeated verbatim
   (identical inline styles) across dashboard, subscription, and
   admin views. Consolidated here so the color only lives in one
   place.
   ============================================================ */
.ba-banner-dark {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    color: #fff;
}
.ba-banner-dark h1,
.ba-banner-dark h2,
.ba-banner-dark h3,
.ba-banner-dark h4,
.ba-banner-dark h5,
.ba-banner-dark h6 {
    color: #fff;
}
.ba-btn-navy {
    background: #0f3460;
    border-color: #0f3460;
    color: #fff;
}
.ba-btn-navy:hover {
    background: #0c2a4e;
    border-color: #0c2a4e;
    color: #fff;
}
.ba-text-trial-gold {
    color: #f6a821;
}

/* ============================================================
   Stat cards (dashboard overview widgets) — icon + value + label,
   with color-accent modifiers so each metric is scannable at a
   glance instead of four identical plain-number cards.
   ============================================================ */
.ba-stat-card {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3);
    height: 100%;
}
.ba-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--ba-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.ba-stat-card.is-primary .ba-stat-icon { background: var(--ba-info-bg);    color: var(--ba-accent); }
.ba-stat-card.is-success .ba-stat-icon { background: var(--ba-success-bg); color: var(--ba-success); }
.ba-stat-card.is-warning .ba-stat-icon { background: var(--ba-warning-bg); color: var(--ba-warning); }
.ba-stat-card.is-danger  .ba-stat-icon { background: var(--ba-danger-bg);  color: var(--ba-danger); }
.ba-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ba-text-900);
}
.ba-stat-label {
    font-size: .8rem;
    color: var(--ba-text-500);
}

/* ============================================================
   Required-field indicator — app-wide, zero markup changes.
   Every form in the app follows the same pattern (a `.form-label`
   immediately followed by its input/select/textarea), so a single
   :has() rule covers every required field consistently instead of
   hand-adding an asterisk to each of the ~25 form views.
   Supported in all current evergreen browsers (Chrome/Edge/Firefox/
   Safari 2023+); on any older browser this simply has no effect —
   the field is still marked required, just without the visual cue.
   ============================================================ */
.form-label:has(+ input[required])::after,
.form-label:has(+ select[required])::after,
.form-label:has(+ textarea[required])::after,
.form-label:has(+ .auth-input-wrap input[required])::after {
    content: " *";
    color: var(--ba-danger, #c0392b);
    font-weight: 700;
}

/* ============================================================
   Alerts — consistent icon + text alignment on top of Bootstrap's
   .alert (keeps existing .alert-* color classes as-is)
   ============================================================ */
.ba-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border-radius: var(--ba-radius-md);
    border: 1px solid transparent;
}
.ba-alert i:first-child {
    margin-top: .15rem;
    flex-shrink: 0;
}

/* ============================================================
   Empty states — used across dashboard tables/lists that have
   zero rows (vehicles, leads, quotations, promotions, testimonials)
   ============================================================ */
.ba-empty-state {
    text-align: center;
    padding: var(--ba-space-7) var(--ba-space-4);
    color: var(--ba-text-500);
}
.ba-empty-state .ba-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ba-space-3);
    border-radius: 50%;
    background: var(--ba-surface-muted);
    color: var(--ba-text-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.ba-empty-state h6 {
    color: var(--ba-text-700);
    margin-bottom: .35rem;
}
.ba-empty-state p {
    font-size: .875rem;
    max-width: 360px;
    margin: 0 auto var(--ba-space-3);
}

/* ============================================================
   Skeleton loaders — for tables/cards while data is fetched
   client-side (e.g. notification bell, async widgets)
   ============================================================ */
.ba-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--ba-surface-muted);
    border-radius: var(--ba-radius-sm);
}
.ba-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: ba-skeleton-shimmer 1.4s infinite;
}
@keyframes ba-skeleton-shimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .ba-skeleton::after { animation: none; }
}

/* ============================================================
   Table wrapper — consistent responsive scroll + hover +
   spacing envelope for every dashboard/admin table
   ============================================================ */
.ba-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ba-table-wrapper table.table {
    margin-bottom: 0;
}
.ba-table-wrapper table.table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ba-text-500);
    border-bottom-width: 1px;
    white-space: nowrap;
}
.ba-table-wrapper table.table tbody tr {
    transition: background var(--ba-transition-fast);
}

/* ============================================================
   Cards — subtle standardized hover lift, opt-in via .ba-card
   (does not alter existing .card usage elsewhere)
   ============================================================ */
.ba-card {
    border: 1px solid var(--ba-border-soft);
    border-radius: var(--ba-radius-lg);
    box-shadow: var(--ba-shadow-sm);
    transition: transform var(--ba-transition-base), box-shadow var(--ba-transition-base);
}

/* ============================================================
   Responsive utility helpers
   ============================================================ */
.ba-stack-sm {
    display: flex;
    gap: var(--ba-space-3);
}
@media (max-width: 575.98px) {
    .ba-stack-sm { flex-direction: column; }
}

/* Prevent any element from forcing horizontal scroll on narrow phones */
@media (max-width: 375px) {
    .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

/* Larger, consistent tap targets on touch devices app-wide */
@media (max-width: 480px) {
    .ba-badge { font-size: .7rem; }
}

/* ============================================================
   Notification bell dropdown
   Bootstrap's default .dropdown-item has white-space: nowrap,
   which stops long notification titles/messages from wrapping
   inside the 300px menu width — the text just keeps going and
   pushes the whole dropdown past the right edge of the viewport.
   Scoped to #notifList only, so other dropdowns in the app keep
   their normal single-line behavior.
   ============================================================ */
#notifList.dropdown-menu {
    max-width: min(300px, calc(100vw - 2rem));
}
#notifList.dropdown-menu .dropdown-item {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================================
   Notification list rows (dropdown + full /dashboard/notifications
   page) — compact single-line layout instead of tall wrapping text,
   closer to a social-media notification feed.
   ============================================================ */
.ba-notif-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
}
.ba-notif-unread {
    background: var(--ba-primary-light);
}
.ba-notif-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 auto;
    min-width: 0; /* required for text-overflow to work inside a flex child */
    text-decoration: none;
    color: inherit;
}
.ba-notif-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ba-primary-light);
    color: var(--ba-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}
.ba-notif-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.ba-notif-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ba-notif-message {
    display: block;
    font-size: .78rem;
    color: var(--ba-text-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ba-notif-time {
    flex-shrink: 0;
    font-size: .72rem;
    color: var(--ba-text-500);
    padding-left: .5rem;
}
.ba-notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ba-primary);
    flex-shrink: 0;
}
.ba-notif-delete {
    flex-shrink: 0;
    min-width: 2.5rem;
    min-height: 2.5rem;
}

/* Mobile: tighter row padding/gaps and a smaller icon so the row still
   fits comfortably at phone widths without the text getting squeezed
   to just a couple of characters before the ellipsis kicks in. */
@media (max-width: 480px) {
    .ba-notif-row {
        padding: .55rem .6rem;
        gap: .55rem;
    }
    .ba-notif-icon {
        width: 30px;
        height: 30px;
        font-size: .72rem;
    }
    .ba-notif-time {
        padding-left: .35rem;
        font-size: .68rem;
    }
}