/* ActiReminder Modern — light-first WhatsApp home + refined Filament dark */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

html.fi-theme-modern,
html.fi-theme-modern body {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif !important;
}

.fi-theme-modern {
    --primary-50: 240, 253, 244;
    --primary-100: 220, 252, 231;
    --primary-200: 187, 247, 208;
    --primary-300: 134, 239, 172;
    --primary-400: 74, 222, 128;
    --primary-500: 34, 197, 94;
    --primary-600: 22, 163, 74;
    --primary-700: 21, 128, 61;
    --primary-800: 22, 101, 52;
    --primary-900: 20, 83, 45;
    --primary-950: 5, 46, 22;

    --acti-ink: #10231c;
    --acti-muted: #5f746b;
    --acti-panel: #ffffff;
    --acti-panel-border: rgba(16, 35, 28, 0.08);
    --acti-chat: #d9fdd3;
    --acti-chat-text: #0b141a;
    --acti-wa: #25d366;
    --acti-wa-dark: #0f8a4b;
    --acti-mist: #f4faf6;
    --acti-line: rgba(16, 35, 28, 0.08);
    --acti-card: #ffffff;
    --acti-card-soft: #f7fbf8;
    --acti-hero-bg: linear-gradient(135deg, #f3fff7 0%, #e8f9ef 42%, #dff7ea 100%);
    --acti-hero-text: #10231c;
    --acti-hero-sub: #5f746b;
    --acti-chat-shell: #ffffff;
    --acti-bubble-in: #f0f2f5;
    --acti-bubble-out: #d9fdd3;
}

/* ── Shell / light ─────────────────────────────────── */
.fi-theme-modern .fi-main,
.fi-theme-modern .fi-main-ctn {
    background:
        radial-gradient(900px 420px at 0% 0%, rgba(37, 211, 102, 0.12), transparent 55%),
        radial-gradient(700px 360px at 100% 0%, rgba(15, 138, 75, 0.06), transparent 50%),
        var(--acti-mist) !important;
}

.fi-theme-modern .fi-sidebar {
    background: var(--acti-panel) !important;
    border-inline-end: 1px solid var(--acti-panel-border);
}

.fi-theme-modern .fi-sidebar-header {
    background: var(--acti-panel) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--acti-panel-border) !important;
}

.fi-theme-modern .fi-sidebar-group-label {
    color: #7a9087 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

.fi-theme-modern .fi-sidebar-item-label,
.fi-theme-modern .fi-sidebar-item-button {
    color: #24362e !important;
}

.fi-theme-modern .fi-sidebar-item-icon,
.fi-theme-modern .fi-sidebar-group-icon {
    color: #6d857b !important;
}

.fi-theme-modern .fi-sidebar-item-button:hover {
    background: rgba(37, 211, 102, 0.08) !important;
}

.fi-theme-modern .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: rgba(37, 211, 102, 0.14) !important;
}

.fi-theme-modern .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-theme-modern .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--acti-wa-dark) !important;
}

.fi-theme-modern .fi-topbar {
    background: rgba(244, 250, 246, 0.9) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--acti-line) !important;
    box-shadow: none !important;
}

.fi-theme-modern .fi-wi-stats-overview-stat,
.fi-theme-modern .fi-section,
.fi-theme-modern .fi-ta-ctn {
    border-radius: 1rem !important;
    border: 1px solid var(--acti-line) !important;
    box-shadow: 0 1px 2px rgba(16, 35, 28, 0.04) !important;
    background: var(--acti-card) !important;
}

.fi-theme-modern .fi-btn {
    border-radius: 999px !important;
    font-weight: 600 !important;
}

.fi-theme-modern .fi-wi:has(.acti-hero),
.fi-theme-modern .fi-wi:has(.acti-section) {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.fi-theme-modern .fi-wi:has(.acti-hero) > .fi-wi-header,
.fi-theme-modern .fi-wi:has(.acti-section) > .fi-wi-header {
    display: none !important;
}

/* ── Dark mode (Filament .dark) — clearer, less muddy ─ */
html.dark.fi-theme-modern {
    --acti-ink: #e8f2ec;
    --acti-muted: #9bb0a5;
    --acti-panel: #121a17;
    --acti-panel-border: rgba(232, 242, 236, 0.08);
    --acti-mist: #0c1210;
    --acti-line: rgba(232, 242, 236, 0.10);
    --acti-card: #171f1c;
    --acti-card-soft: #1c2622;
    --acti-hero-bg: linear-gradient(145deg, #15201b 0%, #183028 45%, #1a3a2c 100%);
    --acti-hero-text: #eef8f1;
    --acti-hero-sub: #a9c0b4;
    --acti-chat-shell: #101815;
    --acti-bubble-in: #24312c;
    --acti-bubble-out: #1f4d39;
    --acti-chat-text: #e8f2ec;
}

html.dark.fi-theme-modern .fi-main,
html.dark.fi-theme-modern .fi-main-ctn {
    background:
        radial-gradient(900px 420px at 0% 0%, rgba(37, 211, 102, 0.10), transparent 55%),
        radial-gradient(700px 360px at 100% 0%, rgba(15, 138, 75, 0.08), transparent 50%),
        var(--acti-mist) !important;
}

html.dark.fi-theme-modern .fi-sidebar {
    background: var(--acti-panel) !important;
}

html.dark.fi-theme-modern .fi-sidebar-header {
    background: var(--acti-panel) !important;
    border-bottom-color: var(--acti-panel-border) !important;
}

html.dark.fi-theme-modern .fi-sidebar-group-label {
    color: #7f968b !important;
}

html.dark.fi-theme-modern .fi-sidebar-item-label,
html.dark.fi-theme-modern .fi-sidebar-item-button {
    color: #d7e6dd !important;
}

html.dark.fi-theme-modern .fi-sidebar-item-icon,
html.dark.fi-theme-modern .fi-sidebar-group-icon {
    color: #8ea79b !important;
}

html.dark.fi-theme-modern .fi-sidebar-item-button:hover {
    background: rgba(37, 211, 102, 0.10) !important;
}

html.dark.fi-theme-modern .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: rgba(37, 211, 102, 0.16) !important;
}

html.dark.fi-theme-modern .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html.dark.fi-theme-modern .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #5ee29a !important;
}

html.dark.fi-theme-modern .fi-topbar {
    background: rgba(12, 18, 16, 0.88) !important;
    border-bottom-color: var(--acti-line) !important;
}

html.dark.fi-theme-modern .fi-wi-stats-overview-stat,
html.dark.fi-theme-modern .fi-section,
html.dark.fi-theme-modern .fi-ta-ctn {
    background: var(--acti-card) !important;
    border-color: var(--acti-line) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html.dark.fi-theme-modern .fi-ta-header-cell,
html.dark.fi-theme-modern .fi-ta-cell,
html.dark.fi-theme-modern .fi-section-header-heading,
html.dark.fi-theme-modern .fi-header-heading {
    color: var(--acti-ink) !important;
}

/* ── Hero ─────────────────────────────────────────── */
.acti-hero {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: var(--acti-hero-bg);
    color: var(--acti-hero-text);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--acti-line);
    box-shadow: 0 10px 30px rgba(16, 35, 28, 0.06);
}

.acti-hero::after {
    content: '';
    position: absolute;
    inset: auto -15% -45% 45%;
    height: 280px;
    background: radial-gradient(circle, rgba(37, 211, 102, 0.22), transparent 65%);
    pointer-events: none;
}

.acti-hero__copy { position: relative; z-index: 1; }
.acti-hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--acti-wa-dark);
    font-weight: 700;
    margin: 0 0 0.5rem;
}
html.dark.fi-theme-modern .acti-hero__eyebrow { color: #5ee29a; }

.acti-hero__title {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 0.6rem;
    font-weight: 700;
    color: var(--acti-hero-text);
}
.acti-hero__subtitle {
    margin: 0 0 1.1rem;
    color: var(--acti-hero-sub);
    max-width: 36rem;
    font-size: 0.98rem;
}

.acti-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.15rem;
}

.acti-pill {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    text-decoration: none !important;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(15, 138, 75, 0.08);
    color: var(--acti-ink);
}
.acti-pill--ok { background: rgba(37, 211, 102, 0.16); color: #0b5c34; }
.acti-pill--warn { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.acti-pill--muted { background: rgba(16, 35, 28, 0.06); color: var(--acti-muted); }

html.dark.fi-theme-modern .acti-pill--ok { color: #baf7d0; background: rgba(37, 211, 102, 0.18); }
html.dark.fi-theme-modern .acti-pill--warn { color: #fde68a; background: rgba(245, 158, 11, 0.18); }
html.dark.fi-theme-modern .acti-pill--muted { color: #a9c0b4; background: rgba(255,255,255,0.06); }

.acti-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.acti-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    font-weight: 650;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.acti-btn:hover { transform: translateY(-1px); }
.acti-btn--whatsapp,
.acti-btn--primary {
    background: var(--acti-wa);
    color: #073b24 !important;
}
.acti-btn--ghost {
    background: transparent;
    color: var(--acti-ink) !important;
    border: 1px solid var(--acti-line);
}
html.dark.fi-theme-modern .acti-btn--ghost {
    color: var(--acti-ink) !important;
    border-color: rgba(232, 242, 236, 0.14);
    background: rgba(255, 255, 255, 0.03);
}

.acti-hero__chat { position: relative; z-index: 1; display: flex; align-items: end; }
.acti-chat {
    width: 100%;
    min-height: 220px;
    border-radius: 1.25rem;
    padding: 1rem;
    background: var(--acti-chat-shell);
    border: 1px solid var(--acti-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    justify-content: end;
}
html.dark.fi-theme-modern .acti-chat {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.acti-chat__bubble {
    max-width: 88%;
    padding: 0.65rem 0.8rem;
    border-radius: 0.85rem;
    font-size: 0.86rem;
    line-height: 1.35;
    color: var(--acti-chat-text);
}
.acti-chat__bubble--in {
    align-self: flex-start;
    background: var(--acti-bubble-in);
    border-top-left-radius: 0.25rem;
}
.acti-chat__bubble--out {
    align-self: flex-end;
    background: var(--acti-bubble-out);
    border-top-right-radius: 0.25rem;
}
.acti-chat__bubble--soft { opacity: 0.95; }

/* ── Sections ─────────────────────────────────────── */
.acti-section {
    background: var(--acti-card);
    border: 1px solid var(--acti-line);
    border-radius: 1.25rem;
    padding: 1.15rem 1.25rem 1.25rem;
    box-shadow: 0 1px 2px rgba(16, 35, 28, 0.04);
}
.acti-section__head { margin-bottom: 1rem; }
.acti-section__head--row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}
.acti-section__title {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--acti-ink);
}
.acti-section__hint {
    margin: 0.25rem 0 0;
    color: var(--acti-muted);
    font-size: 0.88rem;
}
.acti-link {
    color: var(--acti-wa-dark) !important;
    font-weight: 650;
    font-size: 0.88rem;
    text-decoration: none !important;
    white-space: nowrap;
}
html.dark.fi-theme-modern .acti-link { color: #5ee29a !important; }

.acti-empty {
    border: 1px dashed var(--acti-line);
    border-radius: 1rem;
    padding: 1.25rem;
    color: var(--acti-muted);
    background: var(--acti-card-soft);
}

/* Quick actions */
.acti-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.acti-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--acti-line);
    background: var(--acti-card-soft);
    text-decoration: none !important;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.acti-action:hover {
    border-color: rgba(15, 138, 75, 0.35);
    transform: translateY(-1px);
}
.acti-action__icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.8rem;
    background: rgba(37, 211, 102, 0.14);
    position: relative;
    flex: 0 0 auto;
}
.acti-action__icon::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--acti-wa-dark);
    opacity: 0.85;
}
.acti-action__icon--credits::before { border-radius: 0.2rem; }
.acti-action__icon--calendar::before { width: 0.95rem; height: 0.85rem; border-radius: 0.15rem; }
.acti-action__label {
    display: block;
    color: var(--acti-ink);
    font-weight: 650;
    font-size: 0.92rem;
}
.acti-action__hint {
    display: block;
    color: var(--acti-muted);
    font-size: 0.8rem;
    margin-top: 0.1rem;
}
.acti-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    margin-left: auto;
}
.acti-dot--ok { background: var(--acti-wa); }
.acti-dot--off { background: #c5cdd3; }
html.dark.fi-theme-modern .acti-dot--off { background: #4b5d55; }

/* Timeline */
.acti-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.acti-timeline__item {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: 0.75rem;
}
.acti-timeline__rail {
    width: 0.55rem;
    border-radius: 999px;
    background: #d7e5dd;
    margin: 0.35rem 0;
}
html.dark.fi-theme-modern .acti-timeline__rail { background: #2a3a33; }
.acti-timeline__item.is-soon .acti-timeline__rail { background: var(--acti-wa); }
.acti-timeline__card {
    border: 1px solid var(--acti-line);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: var(--acti-card-soft);
}
.acti-timeline__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    color: var(--acti-muted);
}
.acti-timeline__subject {
    color: var(--acti-ink) !important;
    font-weight: 650;
    text-decoration: none !important;
    font-size: 0.98rem;
}

/* Admin metrics */
.acti-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
a.acti-metric {
    display: block;
    text-decoration: none !important;
    color: inherit;
}
.acti-metric {
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid var(--acti-line);
    background: var(--acti-card);
}
.acti-metric--teal { background: linear-gradient(180deg, rgba(37,211,102,0.10), var(--acti-card)); }
.acti-metric--amber { background: linear-gradient(180deg, rgba(245,158,11,0.10), var(--acti-card)); }
.acti-metric--rose { background: linear-gradient(180deg, rgba(244,63,94,0.08), var(--acti-card)); }
.acti-metric--slate { background: linear-gradient(180deg, rgba(100,116,139,0.08), var(--acti-card)); }
.acti-metric__label {
    margin: 0;
    color: var(--acti-muted);
    font-size: 0.78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.acti-metric__value {
    margin: 0.35rem 0 0.2rem;
    font-size: 1.55rem;
    letter-spacing: -0.03em;
    color: var(--acti-ink);
    font-weight: 750;
}
.acti-metric__hint {
    margin: 0;
    color: var(--acti-muted);
    font-size: 0.8rem;
}

/* Attention people */
.acti-people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.acti-person {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--acti-line);
    background: var(--acti-card-soft);
    text-decoration: none !important;
}
.acti-person:hover { border-color: rgba(15, 138, 75, 0.35); }
.acti-person__phone {
    display: block;
    color: var(--acti-ink);
    font-weight: 700;
}
.acti-person__meta {
    display: block;
    color: var(--acti-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}
.acti-person__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.acti-tag {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.14);
    color: #0f5132;
    font-weight: 650;
}
html.dark.fi-theme-modern .acti-tag {
    color: #baf7d0;
    background: rgba(37, 211, 102, 0.16);
}

@media (max-width: 1024px) {
    .acti-hero { grid-template-columns: 1fr; }
    .acti-actions,
    .acti-metrics,
    .acti-people { grid-template-columns: 1fr; }
}