/* =====================================================================
   Spendora – design system (Bootstrap 5.3.8 + custom tokens)
   ===================================================================== */
:root {
    --sp-primary: #4F46E5;
    --sp-primary-2: #7C3AED;
    --sp-radius: 1rem;
    --sp-sidebar-w: 260px;
    --sp-bottom-h: 64px;
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4F46E5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-bs-theme="light"] { --sp-bg: #F5F6FB; --sp-surface: #FFFFFF; --sp-border: #E7E8F0; --sp-muted: #6B7280; --sp-hover: rgba(79,70,229,.06); }
[data-bs-theme="dark"]  { --sp-bg: #0F1220; --sp-surface: #181C2E; --sp-border: #262B42; --sp-muted: #9CA3AF; --sp-hover: rgba(129,140,248,.10);
                          --bs-link-color: #A5B4FC; --bs-link-color-rgb: 165,180,252; }

body { background: var(--sp-bg); min-height: 100vh; -webkit-tap-highlight-color: transparent; }
.sp-muted { color: var(--sp-muted) !important; }
.min-w-0 { min-width: 0; }
.btn-primary { --bs-btn-bg: var(--sp-primary); --bs-btn-border-color: var(--sp-primary); --bs-btn-hover-bg: #4338CA; --bs-btn-hover-border-color: #4338CA;
               --bs-btn-active-bg: #3730A3; --bs-btn-disabled-bg: var(--sp-primary); --bs-btn-disabled-border-color: var(--sp-primary); }
.btn-outline-primary { --bs-btn-color: var(--sp-primary); --bs-btn-border-color: var(--sp-primary); --bs-btn-hover-bg: var(--sp-primary); --bs-btn-hover-border-color: var(--sp-primary); --bs-btn-active-bg: var(--sp-primary); }
.btn, .form-control, .form-select, .input-group-text { border-radius: .75rem; }
.btn-lg { padding: .8rem 1rem; font-size: 1rem; font-weight: 600; }
.form-control, .form-select { font-size: 16px; padding: .7rem .9rem; }   /* 16px = no iOS zoom on focus */
.form-control:focus, .form-select:focus { border-color: #A5B4FC; box-shadow: 0 0 0 .25rem rgba(79,70,229,.15); }
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.sp-skip { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: var(--sp-surface); padding: .5rem 1rem; border-radius: .5rem; }
:focus-visible { outline: 3px solid rgba(79,70,229,.5); outline-offset: 2px; }

/* ---------------- Shell ---------------- */
.sp-shell { display: flex; min-height: 100vh; }
.sp-sidebar { width: var(--sp-sidebar-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.25rem 1rem;
    background: var(--sp-surface); border-right: 1px solid var(--sp-border); }
.sp-sidebar .nav-link { color: var(--bs-body-color); border-radius: .75rem; padding: .6rem .85rem; display: flex; gap: .7rem; align-items: center; font-weight: 500; }
.sp-sidebar .nav-link:hover { background: var(--sp-hover); }
.sp-sidebar .nav-link.active { background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2)); color: #fff; box-shadow: 0 6px 16px rgba(79,70,229,.3); }
.sp-sidebar .nav-link.disabled { color: var(--sp-muted); opacity: .7; }
.sp-soon { margin-left: auto; font-size: .62rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; background: var(--sp-hover); color: var(--sp-muted); }
.sp-nav-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-muted); margin: 1rem .85rem .25rem; }
.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-topbar { position: sticky; top: 0; z-index: 1020; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .6rem .75rem; padding-top: max(.6rem, env(safe-area-inset-top));
    background: color-mix(in srgb, var(--sp-surface) 85%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sp-border); }
.sp-content { padding: 1rem; padding-bottom: calc(var(--sp-bottom-h) + 2.5rem + env(safe-area-inset-bottom)); flex: 1; }
@media (min-width: 992px) { .sp-content { padding: 1.75rem 2rem 2rem; } .sp-topbar { padding: .9rem 2rem; } }
.sp-alert { border-radius: var(--sp-radius); }

.sp-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; color: var(--bs-body-color); text-decoration: none; }
.sp-logo { width: 38px; height: 38px; border-radius: 11px; display: inline-grid; place-items: center; color: #fff; flex-shrink: 0;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2)); box-shadow: 0 6px 14px rgba(79,70,229,.3); }
.sp-logo-light { background: rgba(255,255,255,.18); box-shadow: none; }
.btn-sp-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; padding: 0;
    background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--bs-body-color); }
.btn-sp-icon:hover { background: var(--sp-hover); }

/* ---------------- Avatar + user menu ---------------- */
.sp-avatar-btn { padding: 0; border: 0; border-radius: 50%; }
.sp-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff;
    background: linear-gradient(135deg, #0EA5E9, var(--sp-primary)); }
.sp-user-menu { min-width: 240px; border-radius: var(--sp-radius); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--sp-primary); border-radius: var(--sp-radius); }

/* ---------------- Workspace switcher ---------------- */
.sp-ws-btn { width: 100%; display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; text-align: left;
    background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: .85rem; color: var(--bs-body-color); font-weight: 600; }
.sp-ws-btn:hover, .sp-ws-btn[aria-expanded="true"] { border-color: #A5B4FC; background: var(--sp-hover); }
.sp-ws-compact { width: auto; max-width: 52vw; padding: .4rem .65rem; font-size: .9rem; }
.sp-ws-name { flex: 1; min-width: 0; }
.sp-ws-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 8%, transparent); }
.sp-ws-menu { width: min(320px, 92vw); padding: .4rem; }
.sp-ws-item { display: flex; align-items: center; gap: .7rem; border-radius: .75rem; padding: .55rem .6rem; white-space: normal; }
.sp-ws-item.active { background: var(--sp-hover); color: var(--bs-body-color); }
.sp-ws-item.active .sp-muted { color: var(--sp-muted) !important; }
.sp-ws-avatar { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; }
.sp-ws-avatar-lg { width: 48px; height: 48px; border-radius: 14px; font-size: 1.2rem; }

/* ---------------- Notifications ---------------- */
.sp-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: #EF4444; color: #fff; font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid var(--sp-surface); }
.sp-badge.sp-bump { animation: spBump .5s ease; }
@keyframes spBump { 30% { transform: scale(1.35); } 100% { transform: scale(1); } }
.sp-notif-menu { width: min(380px, 94vw); overflow: hidden; }
.sp-notif-list { max-height: min(60vh, 420px); overflow-y: auto; }
.sp-notif-item, .sp-notif-row { display: flex; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--sp-border); color: var(--bs-body-color); text-decoration: none; position: relative; }
.sp-notif-item:hover { background: var(--sp-hover); }
.sp-notif-item.unread::before, .sp-notif-row.unread::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-primary); transform: translateY(-50%); }
.sp-notif-row.unread { background: color-mix(in srgb, var(--sp-primary) 4%, transparent); }
.sp-notif-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.sp-notif-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------- Cards ---------------- */
.sp-hero { position: relative; overflow: hidden; border-radius: var(--sp-radius); padding: 1.5rem; color: #fff;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2)); box-shadow: 0 14px 30px rgba(79,70,229,.25); }
.sp-hero-icon { font-size: 6rem; opacity: .15; position: absolute; right: 1rem; bottom: -1.5rem; }
.sp-card { display: block; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 1rem; height: 100%;
    transition: transform .15s ease, box-shadow .15s ease; }
.sp-card-link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,18,32,.08); }
.sp-card-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: .6rem; flex-shrink: 0; }
.sp-card-label { font-size: .8rem; color: var(--sp-muted); }
.sp-card-value { font-size: 1.35rem; font-weight: 700; }
.sp-placeholder { padding: 2.5rem 1rem; border-style: dashed; }
.sp-placeholder > i, .sp-empty > i { font-size: 2.5rem; color: var(--sp-primary); opacity: .6; }
.sp-empty { text-align: center; padding: 3rem 1rem; background: var(--sp-surface); border: 1px dashed var(--sp-border); border-radius: var(--sp-radius); }
.sp-list .list-group-item { display: flex; align-items: center; gap: .85rem; padding: .95rem 1.1rem; background: transparent; color: var(--bs-body-color); border-color: var(--sp-border); }
.sp-list .list-group-item i { font-size: 1.15rem; width: 1.3rem; text-align: center; }

/* ---------------- FAB + bottom nav ---------------- */
.sp-fab { position: fixed; right: 1.25rem; bottom: calc(var(--sp-bottom-h) + 1rem + env(safe-area-inset-bottom)); z-index: 1040;
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2)); box-shadow: 0 10px 24px rgba(79,70,229,.45); }
.sp-fab-disabled { opacity: .35; cursor: not-allowed; }
@media (min-width: 992px) { .sp-fab { bottom: 2rem; right: 2rem; } }
.sp-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; height: calc(var(--sp-bottom-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: space-around; align-items: center;
    background: var(--sp-surface); border-top: 1px solid var(--sp-border); }
.sp-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .7rem; color: var(--sp-muted); text-decoration: none; padding: .3rem 0; }
.sp-bottom-nav a i { font-size: 1.3rem; }
.sp-bottom-nav a.active { color: var(--sp-primary); font-weight: 600; }
.sp-bottom-gap { flex: 1; }

/* ---------------- Idle modal ---------------- */
.sp-idle { border-radius: 1.25rem; }
.sp-ring { position: relative; width: 112px; height: 112px; }
.sp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sp-ring circle { fill: none; stroke-width: 8; }
.sp-ring-bg { stroke: var(--sp-border); }
.sp-ring-fg { stroke: var(--sp-primary); stroke-linecap: round; stroke-dasharray: 276.46; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .3s; }
.sp-ring.sp-urgent .sp-ring-fg { stroke: #EF4444; }
.sp-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------------- Auth pages ---------------- */
.sp-auth-body { background: var(--sp-bg); }
.sp-auth { display: flex; min-height: 100vh; min-height: 100dvh; }
.sp-auth-hero { position: relative; overflow: hidden; flex: 0 0 46%; color: #fff; padding: 3rem; align-items: center;
    background: linear-gradient(150deg, #312E81 0%, var(--sp-primary) 45%, var(--sp-primary-2) 100%); }
.sp-auth-hero-inner { position: relative; z-index: 1; max-width: 460px; }
.sp-auth-points li { display: flex; gap: .75rem; align-items: center; margin-bottom: .9rem; font-weight: 500; }
.sp-auth-points i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.15); }
.sp-auth-blob { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .35; }
.sp-auth-blob-1 { width: 380px; height: 380px; background: #22D3EE; right: -120px; top: -100px; }
.sp-auth-blob-2 { width: 300px; height: 300px; background: #F472B6; left: -100px; bottom: -120px; }
.sp-auth-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: max(1.5rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom)); }
.sp-auth-card { width: 100%; max-width: 440px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 1.5rem;
    padding: 2rem 1.5rem; box-shadow: 0 20px 50px rgba(15,18,32,.08); }
@media (min-width: 576px) { .sp-auth-card { padding: 2.5rem; } }
@media (max-width: 575.98px) { .sp-auth-main { justify-content: flex-start; padding-top: 2rem; } .sp-auth-card { border: 0; box-shadow: none; background: transparent; padding: .5rem .25rem; } }
.sp-input-group .input-group-text { background: var(--sp-bg); border-color: var(--bs-border-color); color: var(--sp-muted); min-width: 46px; justify-content: center; }
.sp-input-group .form-control { border-left: 0; }
.sp-input-group > .input-group-text { border-right: 0; }
.sp-input-group .sp-eye { border: 1px solid var(--bs-border-color); border-left: 0; background: var(--bs-body-bg); color: var(--sp-muted); }
.sp-input-group:focus-within .input-group-text, .sp-input-group:focus-within .sp-eye { border-color: #A5B4FC; }
.sp-input-group .form-control:not(:last-child) { border-right: 0; }
.sp-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sp-meter span { height: 5px; border-radius: 3px; background: var(--sp-border); transition: background .2s; }
.sp-meter[data-score="1"] span:nth-child(-n+1) { background: #EF4444; }
.sp-meter[data-score="2"] span:nth-child(-n+2) { background: #F59E0B; }
.sp-meter[data-score="3"] span:nth-child(-n+3) { background: #84CC16; }
.sp-meter[data-score="4"] span { background: #22C55E; }
.sp-rules li { color: var(--sp-muted); }
.sp-rules li.ok { color: #16A34A; }
.sp-rules li.ok i::before { content: "\F26B"; } /* bi-check-circle-fill */
.sp-success-icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 2rem; color: var(--sp-primary);
    background: color-mix(in srgb, var(--sp-primary) 12%, transparent); }
.sp-success-icon.sp-danger { color: #DC2626; background: rgba(220,38,38,.1); }
.sp-icon-badge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2)); flex-shrink: 0; }
.sp-quote { border-left: 3px solid var(--sp-primary); padding-left: .75rem; font-style: italic; color: var(--sp-muted); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }