/**
 * Socialy — unified Filament theme (auth + admin shell).
 * Loaded via PanelsRenderHook::HEAD_END.
 */

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
html.fi {
    --socialy-indigo-950: #1e1b4b;
    --socialy-indigo-900: #312e81;
    --socialy-violet-900: #4c1d95;
    --socialy-glow: rgba(129, 140, 248, 0.35);
}

/* -------------------------------------------------------------------------
   Typography (entire panel)
   ------------------------------------------------------------------------- */
html.fi,
html.fi body {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   Auth: login / password reset (simple layout)
   ------------------------------------------------------------------------- */
.fi-simple-layout {
    min-height: 100dvh;
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, var(--socialy-glow), transparent 55%),
        linear-gradient(
            155deg,
            var(--socialy-indigo-950) 0%,
            var(--socialy-indigo-900) 38%,
            var(--socialy-violet-900) 72%,
            var(--socialy-indigo-950) 100%
        );
}

.fi-simple-main-ctn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    min-height: 100dvh;
}

.fi-simple-main {
    width: 100%;
}

.fi-simple-page {
    margin-inline: auto;
    max-width: 26rem;
    width: 100%;
    padding: 2rem 2rem 2.25rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 25px 50px -12px rgba(15, 23, 42, 0.45);
}

.dark .fi-simple-page {
    background: rgba(15, 23, 42, 0.94);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 25px 50px -12px rgba(0, 0, 0, 0.55);
}

.fi-simple-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.fi-simple-header-heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: #0f172a;
}

.dark .fi-simple-header-heading {
    color: #f8fafc;
}

.fi-simple-header-subheading {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #64748b;
}

.dark .fi-simple-header-subheading {
    color: #94a3b8;
}

/* Round app icon on auth screens */
.fi-simple-header .fi-logo img {
    height: 3.5rem !important;
    width: 3.5rem !important;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow: 0 12px 28px -8px rgba(49, 46, 129, 0.45);
}

.socialy-login-tagline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.socialy-login-tagline__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4338ca;
    background: linear-gradient(90deg, rgba(49, 46, 129, 0.12), rgba(76, 29, 149, 0.14));
}

.dark .socialy-login-tagline__pill {
    color: #c7d2fe;
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.15), rgba(167, 139, 250, 0.12));
}

.socialy-login-tagline__text {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
    max-width: 20rem;
}

.dark .socialy-login-tagline__text {
    color: #94a3b8;
}

/* -------------------------------------------------------------------------
   Admin shell: sidebar
   ------------------------------------------------------------------------- */
html.fi .fi-main-sidebar.fi-sidebar {
    background: linear-gradient(
        185deg,
        var(--socialy-indigo-950) 0%,
        var(--socialy-indigo-900) 45%,
        #2e1065 100%
    );
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 24px -8px rgba(15, 23, 42, 0.35);
}

html.fi.dark .fi-main-sidebar.fi-sidebar {
    background: linear-gradient(185deg, #0f172a 0%, var(--socialy-indigo-950) 40%, var(--socialy-indigo-900) 100%);
    border-inline-end-color: rgba(255, 255, 255, 0.06);
}

html.fi .fi-sidebar-header-ctn {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html.fi .fi-sidebar-header-logo-ctn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0.25rem;
}

/* Round logo in sidebar (after login) */
html.fi .fi-sidebar .fi-logo img {
    height: 2.75rem !important;
    width: 2.75rem !important;
    max-width: none;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow:
        0 6px 20px -4px rgba(0, 0, 0, 0.35),
        0 0 0 2px rgba(255, 255, 255, 0.12);
}

/*
 * Sidebar nav — Filament applies strong gray utilities on labels & SVGs; we
 * force light colors on the dark gradient sidebar (light app theme = html.fi:not(.dark)).
 */
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-btn {
    color: rgba(255, 255, 255, 0.92) !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Nested / grouped items under a section */
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-btn,
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-icon,
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-btn .fi-icon,
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-btn svg {
    color: rgba(221, 214, 254, 0.98) !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-btn svg {
    stroke: currentColor !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.95) !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-group-btn {
    color: rgba(255, 255, 255, 0.95) !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-group-btn svg,
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-group-btn .fi-icon {
    color: rgba(196, 181, 253, 1) !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-group-btn svg {
    stroke: currentColor !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-group-collapse-btn {
    color: rgba(255, 255, 255, 0.75) !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn svg {
    color: rgba(221, 214, 254, 0.98) !important;
    stroke: currentColor !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn,
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: rgba(255, 255, 255, 0.14) !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn svg {
    color: #f5e8ff !important;
}

html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Grouped item connector lines — visible on dark bg */
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-grouped-border-part,
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-first,
html.fi:not(.dark) .fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-last {
    background-color: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Dark mode (Filament theme toggle): same readability on tinted sidebar */
html.fi.dark .fi-main-sidebar .fi-sidebar-item-btn,
html.fi.dark .fi-main-sidebar .fi-sidebar-item-label {
    color: rgba(248, 250, 252, 0.94) !important;
}

html.fi.dark .fi-main-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-btn,
html.fi.dark .fi-main-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-label {
    color: rgba(248, 250, 252, 0.9) !important;
}

html.fi.dark .fi-main-sidebar .fi-sidebar-item-icon,
html.fi.dark .fi-main-sidebar .fi-sidebar-item-btn svg,
html.fi.dark .fi-main-sidebar .fi-sidebar-group-btn svg {
    color: rgba(199, 210, 254, 0.95) !important;
    stroke: currentColor !important;
}

html.fi.dark .fi-main-sidebar .fi-sidebar-group-label,
html.fi.dark .fi-main-sidebar .fi-sidebar-group-btn {
    color: rgba(255, 255, 255, 0.92) !important;
}

html.fi.dark .fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: rgba(129, 140, 248, 0.22) !important;
}

html.fi.dark .fi-main-sidebar .fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar footer (user menu) */
html.fi .fi-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------------------
   Topbar
   ------------------------------------------------------------------------- */
html.fi:not(.dark) .fi-topbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(49, 46, 129, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

html.fi.dark .fi-topbar {
    border-bottom: 1px solid rgba(129, 140, 248, 0.15);
}

/* -------------------------------------------------------------------------
   Main content area
   ------------------------------------------------------------------------- */
html.fi:not(.dark) .fi-main {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #eef2ff 100%);
    min-height: 100dvh;
}

html.fi.dark .fi-main {
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 35%, #0f172a 100%);
}

/* Page header strip — subtle brand tint */
html.fi:not(.dark) .fi-header {
    border-bottom: 1px solid rgba(49, 46, 129, 0.08);
}

/* -------------------------------------------------------------------------
   Logo in topbar (if shown)
   ------------------------------------------------------------------------- */
html.fi .fi-topbar .fi-logo img {
    height: 2.25rem !important;
    width: 2.25rem !important;
    border-radius: 50% !important;
    object-fit: cover;
}