/* =====================================================================
   Social Publisher Pro — modern theme (loads after app.css, overrides it)
   ===================================================================== */
:root {
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sp-radius: 16px;
    --sp-radius-sm: 11px;
    --sp-ring: 0 0 0 4px color-mix(in srgb, var(--sp-primary) 16%, transparent);
    --sp-shadow-xs: 0 1px 2px rgba(17, 24, 39, .05);
    --sp-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 12px -4px rgba(17, 24, 39, .08);
    --sp-shadow-md: 0 8px 24px -8px rgba(17, 24, 39, .14);
    --sp-shadow-lg: 0 20px 48px -16px rgba(17, 24, 39, .28);
    /* Sidebar fallbacks (used if no data-bs-theme is set; themes override). */
    --sp-sidebar-brand-fg: #ffffff;
    --sp-sidebar-active-fg: #ffffff;
    --sp-sidebar-hover-bg: rgba(255, 255, 255, .06);
    --sp-sidebar-border: rgba(255, 255, 255, .05);
    --sp-sidebar-muted: rgba(255, 255, 255, .42);
    --sp-sidebar-input-bg: rgba(255, 255, 255, .05);
    --sp-sidebar-input-border: rgba(255, 255, 255, .08);
    --sp-sidebar-input-fg: #ffffff;
    --sp-sidebar-bar: #ffffff;
    --sp-sidebar-glow: 30%;
    --sp-sidebar-cancel-filter: invert(1) opacity(.5);
}
[data-bs-theme="light"] {
    --sp-bg: #f5f6fb;
    --sp-surface: #ffffff;
    --sp-surface-2: #fbfcfe;
    --sp-border: #e9ebf3;
    --bs-body-color: #1f2430;
    --bs-secondary-color: #6b7280;
    /* Light sidebar */
    --sp-sidebar-bg: #ffffff;
    --sp-sidebar-fg: #5a6172;
    --sp-sidebar-brand-fg: #1f2430;
    --sp-sidebar-active-fg: #ffffff;
    --sp-sidebar-hover-bg: rgba(17, 24, 39, .05);
    --sp-sidebar-border: var(--sp-border);
    --sp-sidebar-muted: #98a1b3;
    --sp-sidebar-input-bg: #f3f4f8;
    --sp-sidebar-input-border: #e4e6ef;
    --sp-sidebar-input-fg: #1f2430;
    --sp-sidebar-bar: var(--sp-primary);
    --sp-sidebar-glow: 7%;
    --sp-sidebar-cancel-filter: none;
}
[data-bs-theme="dark"] {
    --sp-bg: #0b0d16;
    --sp-surface: #14161f;
    --sp-surface-2: #181b26;
    --sp-border: #262a39;
    --bs-body-color: #e6e8f0;
    /* Dark sidebar */
    --sp-sidebar-bg: #0c0e18;
    --sp-sidebar-fg: #a9accb;
    --sp-sidebar-brand-fg: #ffffff;
    --sp-sidebar-active-fg: #ffffff;
    --sp-sidebar-hover-bg: rgba(255, 255, 255, .06);
    --sp-sidebar-border: rgba(255, 255, 255, .05);
    --sp-sidebar-muted: rgba(255, 255, 255, .42);
    --sp-sidebar-input-bg: rgba(255, 255, 255, .05);
    --sp-sidebar-input-border: rgba(255, 255, 255, .08);
    --sp-sidebar-input-fg: #ffffff;
    --sp-sidebar-bar: #ffffff;
    --sp-sidebar-glow: 30%;
    --sp-sidebar-cancel-filter: invert(1) opacity(.5);
}

html, body { font-family: var(--bs-body-font-family); }
body { font-size: .94rem; letter-spacing: -.005em; background: var(--sp-bg); color: var(--bs-body-color); }
::selection { background: color-mix(in srgb, var(--sp-primary) 26%, transparent); }

/* Subtle custom scrollbar */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--bs-body-color) 22%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bs-body-color) 18%, transparent); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--bs-body-color) 32%, transparent); background-clip: content-box; }

/* ---- Sidebar (themeable: dark by default, light in the light theme) ---- */
.app-sidebar {
    background:
        radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--sp-primary) var(--sp-sidebar-glow, 30%), transparent) 0%, transparent 55%),
        var(--sp-sidebar-bg);
    border-right: 1px solid var(--sp-sidebar-border);
    color: var(--sp-sidebar-fg);
}
.sidebar-brand { padding: 1.05rem 1.15rem; gap: .7rem; border-bottom: 1px solid var(--sp-sidebar-border); color: var(--sp-sidebar-brand-fg); }
.brand-mark { border-radius: 11px; background: linear-gradient(135deg, var(--sp-primary), color-mix(in srgb, var(--sp-primary) 40%, #ec4899)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--sp-primary) 80%, transparent); }
.brand-text { font-weight: 700; letter-spacing: -.01em; }
.sidebar-search { position: relative; padding: .25rem .9rem .2rem; }
.sidebar-search i { position: absolute; left: 1.55rem; top: 50%; transform: translateY(-50%); font-size: .82rem; color: var(--sp-sidebar-muted); pointer-events: none; }
.sidebar-search input { width: 100%; border: 1px solid var(--sp-sidebar-input-border); background: var(--sp-sidebar-input-bg); color: var(--sp-sidebar-input-fg); border-radius: 10px; padding: .42rem .6rem .42rem 2rem; font-size: .82rem; outline: none; }
.sidebar-search input::placeholder { color: var(--sp-sidebar-muted); }
.sidebar-search input:focus { border-color: color-mix(in srgb, var(--sp-primary) 60%, transparent); }
.sidebar-search input::-webkit-search-cancel-button { filter: var(--sp-sidebar-cancel-filter, none); opacity: .6; cursor: pointer; }
.sidebar-nav-empty { display: none; color: var(--sp-sidebar-muted); font-size: .82rem; padding: .8rem .9rem; }
.nav-section { font-size: .66rem; letter-spacing: .1em; color: var(--sp-sidebar-muted); opacity: .9; padding: 1.05rem .8rem .35rem; }
.sidebar-nav { padding: .4rem .7rem 2.5rem; }
.sidebar-nav .nav-link { color: var(--sp-sidebar-fg); padding: .55rem .7rem; border-radius: 10px; font-size: .885rem; font-weight: 500; }
.sidebar-nav .nav-link i { font-size: 1.02rem; opacity: .85; }
.sidebar-nav .nav-link:hover { background: var(--sp-sidebar-hover-bg); color: var(--sp-sidebar-brand-fg); }
.sidebar-nav .nav-link.active { color: var(--sp-sidebar-active-fg); font-weight: 600; }
.sidebar-nav .nav-link.active i { opacity: 1; }
.sidebar-nav .nav-link.active::before { background: var(--sp-sidebar-bar); }

/* Rounded select controls (all sizes) + their inline styles */
.form-select, .form-select-sm, .form-select-lg, select.form-control { border-radius: var(--sp-radius-sm); }

/* ---- Topbar ---- */
.app-topbar {
    padding: .7rem 1.4rem; gap: .6rem; border-bottom: 1px solid var(--sp-border);
    background: color-mix(in srgb, var(--sp-surface) 80%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
}
.app-content { padding: 1.75rem; }
.workspace-switcher > .btn { border: 1px solid var(--sp-border); background: var(--sp-surface); border-radius: 11px; padding: .4rem .7rem; box-shadow: var(--sp-shadow-xs); }
.workspace-switcher > .btn:hover { background: var(--sp-surface-2); }
.user-chip { border-radius: 11px; border-color: var(--sp-border); }
.btn-icon { border-radius: 10px; color: var(--bs-secondary-color); }
.btn-icon:hover { background: var(--sp-bg); color: var(--bs-body-color); }

/* ---- Cards ---- */
.card { border: 1px solid var(--sp-border); border-radius: var(--sp-radius); background: var(--sp-surface); box-shadow: var(--sp-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--sp-border); padding: .9rem 1.15rem; font-weight: 650; font-size: .92rem; }
.card-body { padding: 1.15rem; }
.card.stat-card { background: linear-gradient(180deg, var(--sp-surface) 0%, var(--sp-surface-2) 100%); }
.stat-card:hover, .account-card:hover, .post-row:hover, .media-card:hover { box-shadow: var(--sp-shadow-md); transform: translateY(-2px); }
.stat-icon { width: 48px; height: 48px; border-radius: 13px; font-size: 1.25rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.stat-value { font-size: 1.6rem; font-weight: 750; letter-spacing: -.03em; }
.stat-label { font-size: .78rem; font-weight: 500; }

/* ---- Buttons ---- */
.btn { --bs-btn-border-radius: 10px; font-weight: 600; padding: .5rem .95rem; letter-spacing: -.01em; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.btn-sm { --bs-btn-border-radius: 8px; padding: .35rem .7rem; }
.btn-lg { --bs-btn-border-radius: 12px; }
.btn-primary { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--sp-primary) 65%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--sp-primary) 70%, transparent); }
.btn-light { background: var(--sp-surface); border-color: var(--sp-border); }
.btn-light:hover { background: var(--sp-bg); }
.btn-outline-secondary { --bs-btn-border-color: var(--sp-border); --bs-btn-color: var(--bs-body-color); --bs-btn-hover-bg: var(--sp-bg); --bs-btn-hover-border-color: var(--sp-border); --bs-btn-hover-color: var(--bs-body-color); }

/* ---- Forms ---- */
.form-control, .form-select { border-radius: var(--sp-radius-sm); border-color: var(--sp-border); background: var(--sp-surface); padding: .55rem .8rem; font-size: .9rem; transition: border-color .15s, box-shadow .15s; }
.form-control:hover, .form-select:hover { border-color: color-mix(in srgb, var(--bs-body-color) 22%, var(--sp-border)); }
.form-control:focus, .form-select:focus { box-shadow: var(--sp-ring); }
.form-control::placeholder { color: color-mix(in srgb, var(--bs-secondary-color) 70%, transparent); }
.form-label { font-weight: 550; font-size: .85rem; margin-bottom: .35rem; }
.input-group-text { border-radius: var(--sp-radius-sm); border-color: var(--sp-border); background: var(--sp-bg); }
.form-control-color { padding: .25rem; height: calc(2.4rem + 2px); }

/* ---- Badges, tables ---- */
.badge { font-weight: 600; border-radius: 7px; padding: .34em .6em; letter-spacing: .01em; }
.table > thead th { font-size: .7rem; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 650; border-color: var(--sp-border); }
.table > tbody > tr { border-color: var(--sp-border); }
.table > tbody > tr:hover > * { background: color-mix(in srgb, var(--sp-primary) 4%, transparent); }

/* ---- Dropdowns / modals / alerts ---- */
.dropdown-menu { border: 1px solid var(--sp-border); border-radius: 14px; box-shadow: var(--sp-shadow-lg); padding: .4rem; }
.dropdown-item { border-radius: 9px; padding: .5rem .65rem; font-size: .9rem; font-weight: 500; }
.dropdown-item.active, .dropdown-item:active { background: var(--sp-primary); }
.dropdown-header { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.modal-content { border: none; border-radius: 18px; box-shadow: var(--sp-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--sp-border); padding: 1rem 1.25rem; }
.alert { border: 1px solid var(--sp-border); border-radius: 13px; }
.alert-success { background: color-mix(in srgb, var(--bs-success) 9%, var(--sp-surface)); border-color: color-mix(in srgb, var(--bs-success) 25%, var(--sp-border)); }
.alert-danger { background: color-mix(in srgb, var(--bs-danger) 8%, var(--sp-surface)); border-color: color-mix(in srgb, var(--bs-danger) 25%, var(--sp-border)); }
.alert-info { background: color-mix(in srgb, var(--sp-primary) 7%, var(--sp-surface)); border-color: color-mix(in srgb, var(--sp-primary) 22%, var(--sp-border)); color: var(--bs-body-color); }
.alert-warning { background: color-mix(in srgb, var(--bs-warning) 12%, var(--sp-surface)); border-color: color-mix(in srgb, var(--bs-warning) 30%, var(--sp-border)); }

/* ---- Headings & misc ---- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { letter-spacing: -.025em; font-weight: 700; }
.text-muted { color: var(--bs-secondary-color) !important; }
.platform-chip { border-radius: 11px; }
.empty-state i { background: linear-gradient(135deg, color-mix(in srgb, var(--sp-primary) 16%, transparent), color-mix(in srgb, var(--sp-primary) 4%, transparent)); width: 72px; height: 72px; }

/* ---- Auth / login ---- */
.auth-card { border-radius: 22px; box-shadow: var(--sp-shadow-lg); border: 1px solid rgba(255, 255, 255, .5); }
.auth-card .card-body { padding: 2.5rem 2.25rem; }
.auth-brand .brand-mark-lg { box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
.auth-body { background-attachment: fixed; }
.auth-card .btn-primary { padding: .65rem; font-size: .98rem; }

/* Content entrance */
.app-content > * { animation: spFade .25s ease both; }
@keyframes spFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-content > * { animation: none; } }