/*
 * Marketing Work Hub — modern theme for both Filament panels.
 * Plain CSS loaded after Filament's own stylesheet (no build step, works on shared hosting).
 * Brand colours come from Settings via --hub-brand / --hub-accent.
 * White text only sits on the darkened "strong" gradient so it meets WCAG AA contrast (NFR-12).
 */

:root {
    --hub-brand: #6366f1;
    --hub-accent: #ec4899;
    --hub-gradient: linear-gradient(135deg, var(--hub-brand) 0%, var(--hub-accent) 100%);
    --hub-gradient-strong: linear-gradient(135deg, color-mix(in srgb, var(--hub-brand) 80%, #000) 0%, color-mix(in srgb, var(--hub-accent) 72%, #000) 100%);
    --hub-radius: 1rem;
    --hub-bg: #f5f6fb;
    --hub-surface: #ffffff;
    --hub-glass: rgb(255 255 255 / .72);
    --hub-border: rgb(15 23 42 / .07);
    --hub-muted: rgb(100 116 139);
    --hub-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 10px 28px -16px rgb(15 23 42 / .18);
    --hub-shadow-hover: 0 2px 4px rgb(15 23 42 / .05), 0 18px 36px -16px rgb(15 23 42 / .28);
}

.dark {
    --hub-bg: #0a0d18;
    --hub-surface: rgb(19 24 38 / .82);
    --hub-glass: rgb(12 16 30 / .7);
    --hub-border: rgb(255 255 255 / .08);
    --hub-muted: rgb(148 163 184);
    --hub-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 12px 32px -18px rgb(0 0 0 / .7);
    --hub-shadow-hover: 0 2px 4px rgb(0 0 0 / .4), 0 20px 40px -18px rgb(0 0 0 / .8);
}

/* ---------- Page ---------- */

.fi-body {
    font-family: var(--font-family, 'Plus Jakarta Sans'), 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;
    background:
        radial-gradient(1100px 520px at 105% -8%, color-mix(in srgb, var(--hub-accent) 10%, transparent), transparent 62%),
        radial-gradient(900px 520px at -8% 6%, color-mix(in srgb, var(--hub-brand) 11%, transparent), transparent 62%),
        var(--hub-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

.fi-header-heading {
    font-weight: 800;
    letter-spacing: -.025em;
}

.fi-header-subheading {
    color: var(--hub-muted);
}

/* ---------- Sidebar ---------- */

.fi-sidebar {
    background: var(--hub-glass);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-inline-end: 1px solid var(--hub-border);
}

.fi-sidebar-header {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--hub-border);
}

.fi-sidebar-group-label {
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
}

.fi-sidebar-item-btn {
    border-radius: .8rem;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: color-mix(in srgb, var(--hub-brand) 9%, transparent);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--hub-gradient-strong);
    box-shadow: 0 10px 22px -12px var(--hub-brand);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg {
    color: #fff !important;
}

/* ---------- Top bar ---------- */

.fi-topbar,
.fi-topbar-ctn > nav {
    background: var(--hub-glass) !important;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: none !important;
    border-bottom: 1px solid var(--hub-border);
}

/* ---------- Cards: sections, tables, stats, widgets ---------- */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background: var(--hub-surface);
    border-radius: var(--hub-radius);
    border: 1px solid var(--hub-border);
    box-shadow: var(--hub-shadow);
}

.fi-ta-ctn {
    overflow: hidden;
}

.fi-section-header-heading {
    font-weight: 700;
    letter-spacing: -.01em;
}

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--hub-gradient);
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--hub-shadow-hover);
}

.fi-wi-stats-overview-stat-label {
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 800;
    letter-spacing: -.03em;
}

/* Tables */
.fi-ta-ctn thead tr {
    background: color-mix(in srgb, var(--hub-brand) 4%, transparent);
}

.fi-ta-header-cell {
    text-transform: uppercase;
    font-size: .7rem !important;
    letter-spacing: .06em;
}

.fi-ta-ctn tbody tr {
    transition: background-color .12s ease;
}

.fi-ta-ctn tbody tr:hover {
    background-color: color-mix(in srgb, var(--hub-brand) 4%, transparent);
}

/* ---------- Controls ---------- */

.fi-btn {
    border-radius: .75rem;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled) {
    background-image: var(--hub-gradient-strong);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px -10px var(--hub-brand);
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.fi-badge {
    border-radius: 999px;
}

.fi-input-wrp {
    border-radius: .75rem;
}

.fi-modal-window {
    border-radius: 1.25rem;
}

.fi-dropdown-panel {
    border-radius: 1rem;
    box-shadow: var(--hub-shadow-hover);
}

/* ---------- Brand mark (logo) ---------- */

.hub-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    max-width: 100%;
}

.hub-brand-mark {
    flex: none;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: .8rem;
    display: grid;
    place-items: center;
    background: var(--hub-gradient-strong);
    color: #fff;
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: .02em;
    box-shadow: 0 8px 16px -8px var(--hub-brand);
}

.hub-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.hub-brand-name {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-brand-suffix {
    font-size: .66rem;
    font-weight: 700;
    color: var(--hub-muted);
    text-transform: uppercase;
    letter-spacing: .09em;
}

.hub-brand-img {
    height: 2.3rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}

/* ---------- Sign-in page ---------- */

.fi-simple-layout {
    background:
        radial-gradient(700px 480px at 8% 12%, color-mix(in srgb, var(--hub-brand) 60%, transparent), transparent 62%),
        radial-gradient(640px 460px at 92% 88%, color-mix(in srgb, var(--hub-accent) 50%, transparent), transparent 62%),
        radial-gradient(500px 360px at 70% 8%, color-mix(in srgb, var(--hub-accent) 22%, transparent), transparent 70%),
        #0b1020;
    background-attachment: fixed;
}

.fi-simple-main {
    border-radius: 1.5rem;
    background: rgb(255 255 255 / .94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgb(255 255 255 / .6);
    box-shadow: 0 40px 90px -30px rgb(0 0 0 / .6);
}

.dark .fi-simple-main {
    background: rgb(17 22 38 / .88);
    border-color: rgb(255 255 255 / .08);
}

.fi-simple-header-heading {
    font-weight: 800;
    letter-spacing: -.025em;
}

.hub-login-intro {
    text-align: center;
    margin: -.25rem 0 .5rem;
}

.hub-login-tagline {
    font-size: .9rem;
    color: var(--hub-muted);
}

.hub-login-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-top: .75rem;
}

.hub-login-chip {
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--hub-brand) 75%, #000);
    background: color-mix(in srgb, var(--hub-brand) 10%, transparent);
}

.dark .hub-login-chip {
    color: color-mix(in srgb, var(--hub-brand) 40%, #fff);
}

/* ---------- Dashboard welcome banner ---------- */

.hub-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    padding: 1.5rem 1.6rem;
    color: #fff;
    background: var(--hub-gradient-strong);
    box-shadow: 0 24px 48px -28px var(--hub-brand);
}

.hub-hero::before,
.hub-hero::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: rgb(255 255 255 / .1);
    pointer-events: none;
}

.hub-hero::before {
    width: 22rem;
    height: 22rem;
    right: -6rem;
    top: -10rem;
}

.hub-hero::after {
    width: 12rem;
    height: 12rem;
    right: 10rem;
    bottom: -8rem;
    background: rgb(255 255 255 / .07);
}

.hub-hero > * {
    position: relative;
}

.hub-hero-kicker {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}

.hub-hero-title {
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.03em;
    margin-top: .2rem;
}

.hub-hero-text {
    margin-top: .3rem;
    font-size: .95rem;
    opacity: .92;
    max-width: 46rem;
}

.hub-hero-chips {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-top: 1.15rem;
}

.hub-hero-chip {
    display: block;
    padding: .7rem .85rem;
    border-radius: .9rem;
    background: rgb(255 255 255 / .14);
    border: 1px solid rgb(255 255 255 / .18);
    backdrop-filter: blur(6px);
    color: #fff;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}

a.hub-hero-chip:hover {
    background: rgb(255 255 255 / .22);
    transform: translateY(-1px);
}

.hub-hero-chip-value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.hub-hero-chip-label {
    font-size: .76rem;
    opacity: .9;
}

/* ---------- Client roadmap ---------- */

.hub-muted-text { color: var(--hub-muted); font-size: .9rem; }

.hub-bar { height: .5rem; border-radius: 999px; background: rgb(148 163 184 / .22); overflow: hidden; flex: 1; }
.hub-bar-fill { height: 100%; border-radius: 999px; background: var(--hub-gradient); transition: width .4s ease; }

.hub-roadmap-summary { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.hub-roadmap-stat { background: var(--hub-surface); border: 1px solid var(--hub-border); border-radius: var(--hub-radius); box-shadow: var(--hub-shadow); padding: .9rem 1rem; }
.hub-roadmap-stat-wide { grid-column: span 2; }
@media (max-width: 640px) { .hub-roadmap-stat-wide { grid-column: auto; } }
.hub-roadmap-stat-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.hub-roadmap-stat-label { font-size: .78rem; color: var(--hub-muted); }

.hub-roadmap { list-style: none; margin: .5rem 0 0; padding: 0; position: relative; }
.hub-roadmap::before { content: ''; position: absolute; left: 1.15rem; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(var(--hub-brand), color-mix(in srgb, var(--hub-accent) 40%, transparent)); opacity: .35; }
.hub-roadmap-step { position: relative; display: flex; gap: 1rem; padding-bottom: 1rem; }
.hub-roadmap-dot { position: relative; z-index: 1; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--hub-surface); border: 2px solid rgb(148 163 184 / .5); color: var(--hub-muted); }
.hub-roadmap-done .hub-roadmap-dot { background: rgb(22 163 74); border-color: rgb(22 163 74); color: #fff; }
.hub-roadmap-now .hub-roadmap-dot { background: var(--hub-gradient-strong); border-color: transparent; color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--hub-brand) 18%, transparent); }

.hub-roadmap-card { flex: 1; min-width: 0; background: var(--hub-surface); border: 1px solid var(--hub-border); border-radius: var(--hub-radius); box-shadow: var(--hub-shadow); padding: 1rem 1.1rem; }
.hub-roadmap-now .hub-roadmap-card { border-color: color-mix(in srgb, var(--hub-brand) 45%, transparent); box-shadow: 0 18px 40px -24px var(--hub-brand); }
.hub-roadmap-done .hub-roadmap-card { opacity: .88; }
.hub-roadmap-head { all: unset; display: flex; justify-content: space-between; gap: .75rem; width: 100%; cursor: pointer; }
.hub-roadmap-head:focus-visible { outline: 2px solid var(--hub-brand); outline-offset: 4px; border-radius: .5rem; }
.hub-roadmap-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hub-muted); }
.hub-roadmap-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; margin-top: .1rem; }
.hub-roadmap-head-end { display: flex; align-items: flex-start; gap: .5rem; flex: none; }
.hub-roadmap-badge { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; background: rgb(148 163 184 / .16); color: var(--hub-muted); white-space: nowrap; }
.hub-roadmap-done .hub-roadmap-badge { background: rgb(22 163 74 / .14); color: rgb(21 128 61); }
.dark .hub-roadmap-done .hub-roadmap-badge { color: rgb(74 222 128); }
.hub-roadmap-now .hub-roadmap-badge { background: var(--hub-gradient-strong); color: #fff; }
.hub-roadmap-chevron { font-size: 1.1rem; line-height: 1; color: var(--hub-muted); transition: transform .2s ease; }
.hub-roadmap-chevron.is-open { transform: rotate(180deg); }

.hub-roadmap-progress { display: flex; align-items: center; gap: .75rem; margin-top: .7rem; font-size: .78rem; color: var(--hub-muted); white-space: nowrap; }
.hub-roadmap-why { display: grid; gap: .75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: .9rem; padding: .8rem .9rem; border-radius: .8rem; background: color-mix(in srgb, var(--hub-brand) 6%, transparent); font-size: .88rem; }
.hub-roadmap-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--hub-brand) 75%, #000); margin-bottom: .15rem; }
.dark .hub-roadmap-label { color: color-mix(in srgb, var(--hub-brand) 45%, #fff); }

.hub-roadmap-tasks { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .1rem; }
.hub-roadmap-tasks li { display: flex; align-items: baseline; gap: .6rem; padding: .45rem .3rem; border-top: 1px solid var(--hub-border); font-size: .9rem; }
.hub-task-icon { flex: none; width: 1.1rem; text-align: center; font-weight: 800; }
.hub-task-title { flex: 1; min-width: 0; font-weight: 500; }
.hub-task-title:hover { text-decoration: underline; }
.hub-task-title.is-done { color: var(--hub-muted); }
.hub-task-meta { flex: none; font-size: .76rem; color: var(--hub-muted); white-space: nowrap; }
@media (max-width: 640px) { .hub-roadmap-tasks li { flex-wrap: wrap; } .hub-task-meta { width: 100%; padding-left: 1.7rem; } }

/* ---------- Client results ---------- */

.hub-filter-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.hub-pill { all: unset; cursor: pointer; font-size: .82rem; font-weight: 600; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--hub-border); background: var(--hub-surface); }
.hub-pill:hover { border-color: color-mix(in srgb, var(--hub-brand) 40%, transparent); }
.hub-pill:focus-visible { outline: 2px solid var(--hub-brand); outline-offset: 2px; }
.hub-pill.is-active { background: var(--hub-gradient-strong); color: #fff; border-color: transparent; }

.hub-results-channel { margin-top: 1.5rem; }
.hub-results-channel-head { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.05rem; margin-bottom: .75rem; }
.hub-results-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.hub-result { background: var(--hub-surface); border: 1px solid var(--hub-border); border-radius: var(--hub-radius); box-shadow: var(--hub-shadow); padding: 1.05rem 1.15rem; }
.hub-result-name { font-weight: 700; }
.hub-result-desc { font-size: .8rem; color: var(--hub-muted); margin-top: .1rem; }
.hub-result-value { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.hub-result-sub { font-size: .76rem; color: var(--hub-muted); }
.hub-result-chart { margin-top: .75rem; }
.hub-result-chart text { font-size: 10px; fill: var(--hub-muted); }
.hub-result-table { width: 100%; font-size: .82rem; border-collapse: collapse; margin-top: .5rem; }
.hub-result-table td { padding: .3rem .2rem; border-top: 1px solid var(--hub-border); }
.hub-result-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hub-link-btn { all: unset; cursor: pointer; font-size: .78rem; font-weight: 600; color: color-mix(in srgb, var(--hub-brand) 80%, #000); margin-top: .6rem; display: inline-block; }
.dark .hub-link-btn { color: color-mix(in srgb, var(--hub-brand) 45%, #fff); }
.hub-link-btn:hover { text-decoration: underline; }

/* ---------- Misc ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--hub-brand) 30%, transparent) transparent;
}

::selection {
    background: color-mix(in srgb, var(--hub-brand) 25%, transparent);
}

@media (max-width: 640px) {
    .hub-hero {
        padding: 1.2rem;
    }

    .hub-hero::before {
        width: 14rem;
        height: 14rem;
        right: -5rem;
        top: -7rem;
    }
}

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