/* ═══════════════════════════════════════════════════════════════
    GMBhelper – Main Stylesheet
   Bootstrap 5.3 base + custom overrides + dark mode
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ──────────────────────────────────────── */
:root {
    --sidebar-width: 240px;
    --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
    --topbar-height: 56px;
    --primary:       #5B6EF5;
    --primary-dark:  #4558E0;
    --secondary:     #22C55E;
    --neutral:       #374151;
    --muted:         #6B7280;
    --background:    #F9FAFB;
    --surface:       #FFFFFF;
    --border:        #E5E7EB;
    --sidebar-bg:    #111827;
    --sidebar-text:  #9CA3AF;
    --sidebar-active-bg:   rgba(91, 110, 245, 0.18);
    --sidebar-active-text: #818CF8;
    --sidebar-hover-bg:    rgba(255, 255, 255, 0.06);
    --brand-gradient: linear-gradient(135deg, #5B6EF5 0%, #818CF8 100%);
    --card-radius: 12px;
    --transition: all .2s ease;
}

/* ── Dark Mode Variables ─────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg:     #0F172A;
    --bs-card-bg:     #1E293B;
    --bs-border-color: rgba(255,255,255,.07);
    --background:     #0F172A;
    --surface:        #1E293B;
    --sidebar-bg:     #0a0f1e;
    --sidebar-text:   #94A3B8;
    --sidebar-active-bg:   rgba(91, 110, 245, 0.22);
    --sidebar-active-text: #818CF8;
    --sidebar-hover-bg:    rgba(255,255,255,.05);
}

/* ── Global ──────────────────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--neutral);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── App Wrapper ────────────────────────────────────────────────── */
.app-wrapper {
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-brand {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-link {
    color: var(--sidebar-text);
    transition: var(--transition);
    font-size: .875rem;
    font-family: var(--font-sans);
}

.sidebar-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--primary);
}

.sidebar-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

.sidebar-link.active i {
    color: var(--sidebar-active-text);
}

/* ── Main Content ────────────────────────────────────────────────── */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left .25s cubic-bezier(.4,0,.2,1);
    background: var(--background);
    border-left: 1px solid var(--border);
}

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--bs-body-bg);
    height: var(--topbar-height);
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
    border-radius: var(--card-radius) !important;
    transition: var(--transition);
    background: var(--surface);
    color: var(--neutral);
    border-color: var(--border) !important;
}

.card:hover {
    transform: translateY(-1px);
}

/* ── Credit Widget ───────────────────────────────────────────────── */
.credit-widget {
    background: rgba(251, 191, 36, .08);
    border-color: rgba(251, 191, 36, .3) !important;
    cursor: pointer;
    transition: var(--transition);
}
.credit-widget:hover { background: rgba(251, 191, 36, .14); }

/* ── Rank Grid ───────────────────────────────────────────────────── */
.rank-grid-cell {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.rank-grid-cell:hover { transform: scale(1.1); z-index: 5; }
    .rank-grid-cell.rank-1-3    { background: #5B6EF5; color: #fff; border-color: #4558E0; }
    .rank-grid-cell.rank-4-10   { background: #22C55E; color: #fff; border-color: #16a34a; }
.rank-grid-cell.rank-11-20  { background: #ffc107; color: #000; border-color: #ffca2c; }
.rank-grid-cell.rank-none   { background: #dc3545; color: #fff; border-color: #bb2d3b; }
.rank-grid-cell.rank-loading { background: #6c757d; color: #fff; animation: pulse 1s infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* ── Health Score Ring ────────────────────────────────────────────── */
.health-ring-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.health-ring-text {
    position: absolute;
    font-size: 1.4rem;
    font-weight: 800;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-ghost {
    background: transparent;
    border: none;
    color: inherit;
}

.btn-xs {
    padding: .125rem .375rem;
    font-size: .75rem;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
    font-weight: 500;
    letter-spacing: .02em;
}

/* ── Review Card ─────────────────────────────────────────────────── */
.review-card {
    border-left: 4px solid transparent;
    transition: var(--transition);
}
    .review-card.positive { border-left-color: #22C55E; }
    .review-card.negative { border-left-color: #F87171; }
    .review-card.neutral  { border-left-color: #94A3B8; }

/* ── Auth Page ───────────────────────────────────────────────────── */
.auth-body { background: linear-gradient(135deg, #5B6EF511 0%, #818CF822 100%); }

/* ── Responsive: collapse sidebar on mobile ─────────────────────── */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.show {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0,0,0,.4);
    }
    .main-content {
        margin-left: 0 !important;
    }
}

/* ── Scrollbar Styling ───────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(128,128,128,.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.5); }

/* ── Table ───────────────────────────────────────────────────────── */
.table > :not(caption) > * > * {
    padding: .6rem .75rem;
}

/* ── Utilities ───────────────────────────────────────────────────── */
.bg-purple-subtle { background: rgba(139, 92, 246, .1); }
.text-purple       { color: #8b5cf6; }
.cursor-pointer    { cursor: pointer; }
.transition        { transition: var(--transition); }

/* Modern SaaS Font and Heading/Button Styles using Manrope */
h1, .fs-1, .hero-headline { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.01em; }
h2, .fs-2 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; }
h3, .fs-3 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; }
h4, .fs-4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

/* Buttons */
.btn, .btn-sm, .btn-lg, .btn-primary, .btn-outline-primary, .btn-secondary, .btn-outline-secondary {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.01em;
}