/* ─────────────────────────────────────────────────────────────────────────────
 * DrivingOS — Theme foundation
 *
 * Identitate: navy + amber, fonts Inter + Plus Jakarta Sans, stil bold-dynamic
 * (Notion/ClickUp). Reutilizat din landing-ul drivingos.ro pentru consistență.
 *
 * Folosit prin variabile CSS (--ds-*) și clase utilitare (.ds-*).
 * Override la nevoie inline cu style="" sau Tailwind utility classes.
 * ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* === Brand colors === */
    --ds-navy-50:  #f0f4fa;
    --ds-navy-100: #dbe4f0;
    --ds-navy-200: #b8c8de;
    --ds-navy-300: #8ea4c2;
    --ds-navy-400: #5d7a9f;
    --ds-navy-500: #1e3a5f;       /* primar */
    --ds-navy-600: #1a3354;
    --ds-navy-700: #16294a;
    --ds-navy-800: #0f1f3a;
    --ds-navy-900: #0a1730;
    --ds-navy-950: #06121f;

    --ds-amber-50:  #fffbeb;
    --ds-amber-100: #fef3c7;
    --ds-amber-200: #fde68a;
    --ds-amber-300: #fcd34d;
    --ds-amber-400: #fbbf24;
    --ds-amber-500: #f59e0b;       /* accent */
    --ds-amber-600: #d97706;
    --ds-amber-700: #b45309;
    --ds-amber-800: #92400e;
    --ds-amber-900: #78350f;

    --ds-gray-50:  #fafafa;
    --ds-gray-100: #f4f4f5;
    --ds-gray-200: #e4e4e7;
    --ds-gray-300: #d4d4d8;
    --ds-gray-400: #a1a1aa;
    --ds-gray-500: #71717a;
    --ds-gray-600: #52525b;
    --ds-gray-700: #3f3f46;
    --ds-gray-800: #27272a;
    --ds-gray-900: #18181b;

    /* === Surface (light mode) === */
    --ds-bg-app:     #f7f8fb;       /* canvas page (gray-tinted, mai cald decât pur alb) */
    --ds-bg-card:    #ffffff;       /* carduri */
    --ds-bg-subtle:  var(--ds-gray-50);
    --ds-bg-muted:   var(--ds-gray-100);

    --ds-border:        var(--ds-gray-200);
    --ds-border-strong: var(--ds-gray-300);

    --ds-text:        var(--ds-navy-900);
    --ds-text-muted:  var(--ds-gray-500);
    --ds-text-subtle: var(--ds-gray-400);
    --ds-text-on-navy:  #ffffff;
    --ds-text-on-amber: #ffffff;

    /* === Sidebar (mereu navy, indiferent de theme) === */
    --ds-sidebar-bg:           var(--ds-navy-700);
    --ds-sidebar-border:       var(--ds-navy-600);
    --ds-sidebar-text:         #cdd6e4;       /* alb cu tentă navy, calm */
    --ds-sidebar-text-muted:   var(--ds-navy-300);
    --ds-sidebar-text-section: var(--ds-navy-300);
    --ds-sidebar-hover:        var(--ds-navy-600);
    --ds-sidebar-active-bg:    var(--ds-amber-500);
    --ds-sidebar-active-text:  #ffffff;
    --ds-sidebar-active-icon:  #ffffff;

    /* === Radius / shadow / motion === */
    --ds-radius-sm: 0.5rem;
    --ds-radius:    0.75rem;        /* default cards, buttons */
    --ds-radius-lg: 1rem;            /* cards mari */
    --ds-radius-xl: 1.25rem;
    --ds-radius-2xl: 1.5rem;

    --ds-shadow-xs: 0 1px 2px rgba(15, 31, 58, 0.04);
    --ds-shadow-sm: 0 1px 3px rgba(15, 31, 58, 0.06), 0 1px 2px rgba(15, 31, 58, 0.04);
    --ds-shadow:    0 4px 12px rgba(15, 31, 58, 0.08), 0 2px 4px rgba(15, 31, 58, 0.04);
    --ds-shadow-lg: 0 10px 30px rgba(15, 31, 58, 0.10), 0 4px 8px rgba(15, 31, 58, 0.06);
    --ds-shadow-xl: 0 20px 40px rgba(15, 31, 58, 0.14);

    --ds-trans:      150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ds-trans-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === Fonts === */
    --ds-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ds-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* === Dark mode === */
.dark {
    --ds-bg-app:     var(--ds-navy-950);
    --ds-bg-card:    var(--ds-navy-900);
    --ds-bg-subtle:  var(--ds-navy-800);
    --ds-bg-muted:   var(--ds-navy-800);

    --ds-border:        rgba(255, 255, 255, 0.08);
    --ds-border-strong: rgba(255, 255, 255, 0.16);

    --ds-text:        #f1f5fb;
    --ds-text-muted:  var(--ds-navy-300);
    --ds-text-subtle: var(--ds-navy-400);

    --ds-sidebar-bg:     var(--ds-navy-900);
    --ds-sidebar-border: var(--ds-navy-800);
}

/* ─── Base typography ─── */

html, body {
    font-family: var(--ds-font-body);
    background: var(--ds-bg-app);
    color: var(--ds-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.ds-display {
    font-family: var(--ds-font-display);
    letter-spacing: -0.01em;
}

/* ─── BUTTONS ─── */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border-radius: var(--ds-radius);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--ds-trans), color var(--ds-trans), border-color var(--ds-trans), box-shadow var(--ds-trans), transform var(--ds-trans);
    border: 1px solid transparent;
    white-space: nowrap;
}
.ds-btn:disabled, .ds-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary — amber CTA (same as landing hero CTA) */
.ds-btn-primary {
    background: var(--ds-amber-500);
    color: #ffffff;
    box-shadow: var(--ds-shadow-sm);
}
.ds-btn-primary:hover:not(:disabled) {
    background: var(--ds-amber-600);
    box-shadow: var(--ds-shadow);
    transform: translateY(-1px);
}
.ds-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    background: var(--ds-amber-700);
}

/* Secondary — navy outline */
.ds-btn-secondary {
    background: var(--ds-bg-card);
    color: var(--ds-navy-700);
    border-color: var(--ds-border-strong);
}
.ds-btn-secondary:hover:not(:disabled) {
    background: var(--ds-navy-50);
    border-color: var(--ds-navy-500);
    color: var(--ds-navy-900);
}
.dark .ds-btn-secondary {
    background: var(--ds-navy-800);
    color: #f1f5fb;
    border-color: var(--ds-navy-700);
}
.dark .ds-btn-secondary:hover:not(:disabled) {
    background: var(--ds-navy-700);
}

/* Solid navy (alternativa primary cu identitate brand) */
.ds-btn-navy {
    background: var(--ds-navy-700);
    color: #ffffff;
}
.ds-btn-navy:hover:not(:disabled) {
    background: var(--ds-navy-800);
    box-shadow: var(--ds-shadow);
    transform: translateY(-1px);
}

/* Ghost — fără background, pentru toolbar */
.ds-btn-ghost {
    background: transparent;
    color: var(--ds-text-muted);
}
.ds-btn-ghost:hover:not(:disabled) {
    background: var(--ds-bg-muted);
    color: var(--ds-text);
}

/* Danger */
.ds-btn-danger {
    background: #dc2626;
    color: #ffffff;
}
.ds-btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}

/* Sizes */
.ds-btn-sm { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
.ds-btn-lg { padding: 0.875rem 1.5rem; font-size: 0.9375rem; }
.ds-btn-icon { padding: 0.5rem; width: 2.25rem; height: 2.25rem; }

/* ─── CARDS ─── */

.ds-card {
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs);
    transition: box-shadow var(--ds-trans), transform var(--ds-trans);
}
.ds-card-hover:hover {
    box-shadow: var(--ds-shadow);
    transform: translateY(-2px);
}
.ds-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ds-card-body { padding: 1.25rem; }
.ds-card-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-bg-subtle);
}

/* Hero card (gradient navy → amber, pentru dashboards) */
.ds-card-hero {
    background: linear-gradient(135deg, var(--ds-navy-700) 0%, var(--ds-navy-900) 50%, var(--ds-amber-700) 200%);
    color: #ffffff;
    border: none;
    border-radius: var(--ds-radius-2xl);
    padding: 1.75rem;
    box-shadow: var(--ds-shadow-lg);
    position: relative;
    overflow: hidden;
}
.ds-card-hero::before {
    /* blob amber subtle în colț */
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--ds-amber-500) 0%, transparent 70%);
    opacity: 0.18;
    top: -120px;
    right: -120px;
    pointer-events: none;
}

/* ─── INPUTS / FORMS ─── */

.ds-input,
.ds-select,
.ds-textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius);
    font-size: 0.875rem;
    color: var(--ds-text);
    transition: border-color var(--ds-trans), box-shadow var(--ds-trans);
}
.ds-input::placeholder,
.ds-textarea::placeholder {
    color: var(--ds-text-subtle);
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    outline: none;
    border-color: var(--ds-amber-500);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled {
    background: var(--ds-bg-muted);
    cursor: not-allowed;
}
.ds-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text);
    margin-bottom: 0.375rem;
}
.ds-help {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    margin-top: 0.25rem;
}

/* ─── BADGES ─── */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ds-badge-amber   { background: var(--ds-amber-100); color: var(--ds-amber-800); }
.ds-badge-navy    { background: var(--ds-navy-100); color: var(--ds-navy-700); }
.ds-badge-green   { background: #d1fae5; color: #065f46; }
.ds-badge-red     { background: #fee2e2; color: #991b1b; }
.ds-badge-gray    { background: var(--ds-gray-100); color: var(--ds-gray-700); }

/* ─── TABLES ─── */

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.ds-table thead {
    background: var(--ds-navy-50);
}
.ds-table thead th {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ds-navy-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ds-border);
}
.dark .ds-table thead {
    background: var(--ds-navy-800);
}
.dark .ds-table thead th {
    color: var(--ds-navy-200);
}
.ds-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text);
}
.ds-table tbody tr:hover {
    background: var(--ds-amber-50);
}
.dark .ds-table tbody tr:hover {
    background: rgba(245, 158, 11, 0.08);
}
.ds-table tbody tr:last-child td { border-bottom: none; }

/* ─── LINKS ─── */

.ds-link {
    color: var(--ds-amber-700);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--ds-trans);
}
.ds-link:hover { color: var(--ds-amber-800); text-decoration: underline; }

/* ─── SCROLLBAR (subtle, nu dispare ca scrollbar-none) ─── */

.ds-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.ds-scroll::-webkit-scrollbar-track { background: transparent; }
.ds-scroll::-webkit-scrollbar-thumb {
    background: var(--ds-border-strong);
    border-radius: 3px;
}
.ds-scroll::-webkit-scrollbar-thumb:hover { background: var(--ds-text-muted); }

/* ─── UTILITY: gradient text (titluri impactante) ─── */

.ds-gradient-text {
    background: linear-gradient(135deg, var(--ds-navy-700) 0%, var(--ds-amber-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ─── SIDEBAR NAV LINKS ─── */

.ds-nav-link {
    color: var(--ds-sidebar-text);
    background: transparent;
    background-color: transparent;
    transition: background-color var(--ds-trans), color var(--ds-trans);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;   /* fără highlight albăstrui pe touch */
}

/* Focus & active state-uri default: NU schimbă fundalul (doar hover real & active class) */
.ds-nav-link:focus,
.ds-nav-link:focus-visible,
.ds-nav-link:active {
    outline: none;
}

/* Hover real (mouse over) — doar pe link-uri NEACTIVE */
@media (hover: hover) {
    .ds-nav-link:hover:not(.ds-nav-link--active):not(.ds-nav-link--locked) {
        background-color: var(--ds-sidebar-hover) !important;
        color: #ffffff !important;
    }
}

/* Active link (URL match) — amber */
.ds-nav-link--active,
.ds-nav-link--active:hover,
.ds-nav-link--active:focus,
.ds-nav-link--active:active {
    background-color: var(--ds-sidebar-active-bg) !important;
    color: var(--ds-sidebar-active-text) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
.ds-nav-link--active i { color: var(--ds-sidebar-active-icon) !important; }

/* Locked links (feature gating) — palid, hover amber subtle */
.ds-nav-link--locked {
    color: var(--ds-sidebar-text-muted) !important;
    opacity: 0.7;
}
@media (hover: hover) {
    .ds-nav-link--locked:hover {
        background-color: rgba(245, 158, 11, 0.10) !important;
        color: var(--ds-sidebar-text) !important;
        opacity: 1;
    }
}

/* Defensive — sidebar nav links non-active sunt mereu transparent dacă nu hover real */
#sidebar-desktop .ds-nav-link:not(.ds-nav-link--active):not(:hover),
#mobile-sidebar .ds-nav-link:not(.ds-nav-link--active):not(:hover) {
    background-color: transparent !important;
}

/* Sidebar search input — placeholder color în navy */
#sidebar-search::placeholder { color: var(--ds-sidebar-text-muted); }

/* ─── TOPBAR ─── */
.ds-topbar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--ds-border);
}
.dark .ds-topbar {
    background: rgba(15, 31, 58, 0.85);
}

/* ─── PAGE TITLE ─── */
.ds-page-title {
    font-family: var(--ds-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: -0.015em;
}
.ds-page-subtitle {
    font-size: 0.875rem;
    color: var(--ds-text-muted);
    margin-top: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Global overrides — aplică DrivingOS look la pattern-urile Tailwind comune
 * din templates existente, fără a edita fiecare fișier.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Cards Tailwind (bg-white rounded-2xl border) — soft shadow consistent */
.bg-white.rounded-2xl,
.bg-white.rounded-xl {
    box-shadow: var(--ds-shadow-xs);
    transition: box-shadow var(--ds-trans), border-color var(--ds-trans);
}
.bg-white.rounded-2xl[class*="hover:border"]:hover,
.bg-white.rounded-xl[class*="hover:border"]:hover {
    box-shadow: var(--ds-shadow-sm);
    border-color: var(--ds-amber-300) !important;
}

/* Background app — gri cald în loc de alb pur (mai puțin clinic) */
body { background: var(--ds-bg-app); }
.dark body { background: var(--ds-bg-app); }

/* Card border default mai delicat */
.border-gray-200 { border-color: var(--ds-border) !important; }
.dark .dark\:border-gray-800 { border-color: var(--ds-border) !important; }

/* Gradient buttons existente (gray-900 / amber) → folosesc paleta noastră */
.bg-gray-900,
button.bg-gray-900 {
    background-color: var(--ds-navy-700) !important;
}
.bg-gray-900:hover,
button.bg-gray-900:hover,
.hover\:bg-gray-700:hover,
.hover\:bg-gray-800:hover {
    background-color: var(--ds-navy-800) !important;
}
.dark .dark\:bg-white {
    background-color: var(--ds-amber-500) !important;
    color: #fff !important;
}
.dark .dark\:bg-white:hover {
    background-color: var(--ds-amber-600) !important;
}

/* Butoane primary amber (deja folosit în câteva locuri) */
.bg-amber-500 { background-color: var(--ds-amber-500) !important; }
.bg-amber-600 { background-color: var(--ds-amber-600) !important; }
.hover\:bg-amber-500:hover { background-color: var(--ds-amber-500) !important; }
.hover\:bg-amber-600:hover { background-color: var(--ds-amber-600) !important; }
.text-amber-500 { color: var(--ds-amber-500) !important; }
.text-amber-600 { color: var(--ds-amber-600) !important; }
.text-amber-700 { color: var(--ds-amber-700) !important; }

/* Status badges color tweaks */
.bg-emerald-100 { background-color: #d1fae5 !important; }
.text-emerald-700 { color: #065f46 !important; }
.bg-amber-100 { background-color: var(--ds-amber-100) !important; }
.text-amber-700 { color: var(--ds-amber-700) !important; }
.text-amber-800 { color: var(--ds-amber-800) !important; }

/* Hover row în table-uri folosite pe pagini cu bg-white */
table tr:hover td {
    background-color: var(--ds-amber-50);
}
.dark table tr:hover td {
    background-color: rgba(245, 158, 11, 0.06);
}

/* Modal backdrop — navy în loc de negru */
.bg-black\/40 { background-color: rgba(15, 31, 58, 0.55) !important; }
.bg-black\/30 { background-color: rgba(15, 31, 58, 0.45) !important; }
.bg-black\/50 { background-color: rgba(15, 31, 58, 0.65) !important; }

/* Headings — folosim font display */
h1, h2, h3, h4 {
    font-family: var(--ds-font-display);
    color: var(--ds-text);
}

/* Active link în pagini interne (ex: tabs) — accent amber */
.text-gray-900.font-medium,
.dark .dark\:text-white.font-medium {
    /* nu schimbăm aici — context dependent */
}

/* Focus ring global (links, butoane Tailwind) */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ds-amber-500);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm);
}

/* Page title — mai mare și brand font */
.text-2xl.font-bold,
h1.text-xl,
h2.text-xl {
    font-family: var(--ds-font-display);
    letter-spacing: -0.015em;
}

/* Sectiuni cu titlu — accent amber pe icon containerul rotunjit */
.bg-gray-100.rounded-lg.flex.items-center.justify-center i,
.bg-gray-100.rounded-xl.flex.items-center.justify-center i {
    color: var(--ds-amber-600);
}

/* Border-l accent (notificări necitite, alerte) → amber */
.border-l-gray-900 { border-left-color: var(--ds-amber-500) !important; }
.dark .dark\:border-l-white { border-left-color: var(--ds-amber-500) !important; }


/* ─── Stepper (folosit în onboarding wizard, viitor și signup) ───────── */
.ds-stepper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 768px) {
    .ds-stepper {
        flex-direction: row;
        gap: 0;
        align-items: center;
        justify-content: space-between;
    }
}
.ds-stepper-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0.45;
    transition: opacity 0.4s ease;
    flex: 1;
    position: relative;
}
.ds-stepper-row--active { opacity: 1; }
.ds-stepper-row--done { opacity: 1; }
.ds-stepper-dot {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.25);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ds-stepper-row--active .ds-stepper-dot {
    background: linear-gradient(135deg, var(--ds-amber-500), var(--ds-amber-600));
    border-color: var(--ds-amber-500);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.18);
    animation: ds-pulse-amber 2s ease-in-out infinite;
}
.ds-stepper-row--done .ds-stepper-dot {
    background: #10b981;
    border-color: #10b981;
}
.ds-stepper-row--done .ds-stepper-dot::after {
    content: "✓";
    font-size: 1rem;
}
.ds-stepper-row--done .ds-stepper-dot-label { display: none; }
.ds-stepper-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.01em;
}
.ds-stepper-connector {
    display: none;
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.2);
    margin: 0 0.5rem;
    border-radius: 1px;
}
@media (min-width: 768px) {
    .ds-stepper-connector { display: block; }
    .ds-stepper-row--done + .ds-stepper-connector,
    .ds-stepper-row--active + .ds-stepper-connector { background: var(--ds-amber-500); }
}
@keyframes ds-pulse-amber {
    0%, 100% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.18); }
    50% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0.08); }
}