/* Client file Activity Log — design-only styles */

.al-page {
    --al-navy: #262646;
    --al-teal: #3fd6d4;
    --al-teal-soft: #e8faf9;
    --al-text: #1a1f36;
    --al-muted: #8aa0af;
    --al-border: #e6ecf2;
    --al-bg: #f4f6f8;
    --al-orange: #c9922a;
    --al-orange-soft: #faf3e6;
    --al-purple-soft: #f0ebfa;
    --al-purple: #7c5cbf;
    --al-green-soft: #e8f5ee;
    --al-green: #1f7a43;
    --al-blue-soft: #e8f2fa;
    --al-blue: #2b6cb0;
    --al-gray-soft: #eef2f5;
    --al-gray: #6b7f90;
    --al-amber: #b45309;
    --al-amber-soft: #fef3e2;
    --al-sans: Inter, "Segoe UI", system-ui, sans-serif;
    font-family: var(--al-sans);
    color: var(--al-text);
}

/* material-dashboard sets h1–h6 to Roboto Slab — keep Activity Log on Inter */
.al-page h1,
.al-page h2,
.al-page h3,
.al-page h4,
.al-page h5,
.al-page h6,
.al-page .h1,
.al-page .h2,
.al-page .h3,
.al-page .h4,
.al-page .h5,
.al-page .h6 {
    font-family: var(--al-sans) !important;
    letter-spacing: normal;
}

.al-page *,
.al-page *::before,
.al-page *::after {
    box-sizing: border-box;
}

/* ——— Client header ——— */
.al-client-header {
    background: var(--al-navy);
    border-radius: 14px 14px 0 0;
    padding: 22px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.al-client-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.al-client-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--al-teal);
    color: var(--al-navy);
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.al-client-copy h1 {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
}

.al-client-copy p {
    margin: 6px 0 0;
    color: #a9bfce;
    font-size: 13px;
    line-height: 1.45;
}

.al-client-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.al-meta-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ——— Shell card ——— */
.al-shell {
    background: #fff;
    border: 1px solid var(--al-border);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.al-design-banner {
    background: var(--al-teal-soft);
    border-bottom: 1px solid #b8ecea;
    color: #0f5c5a;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 20px;
    text-align: center;
}

/* ——— Apply flow tabs (inside shell) ——— */
.al-flow-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 12px;
    background: #fff;
    overflow-x: auto;
}

.al-flow-tab {
    display: inline-block;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.15s;
}

.al-flow-tab:hover {
    color: var(--al-navy);
}

.al-flow-tab.active {
    color: var(--al-navy);
    border-bottom-color: var(--al-teal);
}

/* ——— Filter bar ——— */
.al-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid var(--al-border);
    background: #fff;
}

.al-filter-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.al-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--al-muted);
    margin-right: 4px;
}

.al-filter-pill {
    border: 1px solid var(--al-border);
    background: #fff;
    color: var(--al-text);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.al-filter-pill:hover {
    border-color: #cbd5e1;
}

.al-filter-pill.active {
    border-color: var(--al-navy);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--al-navy);
}

.al-filter-pill.auditor.active {
    background: var(--al-purple-soft);
    border-color: var(--al-purple);
    box-shadow: inset 0 0 0 1px var(--al-purple);
}

.al-event-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--al-muted);
    white-space: nowrap;
}

/* ——— Feed ——— */
.al-feed {
    padding: 8px 24px 28px;
    background: #fff;
    min-height: 420px;
}

.al-date-group {
    margin-top: 20px;
}

.al-date-group:first-child {
    margin-top: 8px;
}

.al-date-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--al-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.al-event-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--al-border);
}

.al-event-row:last-child {
    border-bottom: none;
}

.al-event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 7px;
    flex-shrink: 0;
}

.al-event-dot.teal { background: #2ab7ca; }
.al-event-dot.purple { background: #9b7cd4; }
.al-event-dot.gray { background: #cbd5e1; }
.al-event-dot.amber { background: var(--al-amber); }

.al-event-body {
    min-width: 0;
}

.al-event-headline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.al-event-title {
    margin: 0;
    font-family: var(--al-sans) !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--al-text);
    line-height: 1.4;
    letter-spacing: normal;
}

.al-event-title .suffix {
    font-weight: 600;
    color: #475569;
}

.al-event-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--al-muted);
    white-space: nowrap;
}

.al-event-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.al-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
}

.al-tag.actor-adviser { background: var(--al-teal-soft); color: #0f5c5a; }
.al-tag.actor-admin { background: var(--al-blue-soft); color: var(--al-blue); }
.al-tag.actor-client { background: var(--al-green-soft); color: var(--al-green); }
.al-tag.actor-auditor { background: var(--al-orange-soft); color: var(--al-orange); }
.al-tag.actor-system { background: var(--al-gray-soft); color: var(--al-gray); }

.al-tag.kind-started { background: var(--al-purple-soft); color: var(--al-purple); }
.al-tag.kind-completed { background: var(--al-green-soft); color: var(--al-green); }
.al-tag.kind-saved { background: var(--al-blue-soft); color: var(--al-blue); }
.al-tag.kind-signed { background: var(--al-green-soft); color: var(--al-green); }
.al-tag.kind-sent { background: var(--al-blue-soft); color: var(--al-blue); }
.al-tag.kind-field { background: var(--al-orange-soft); color: var(--al-orange); }
.al-tag.kind-stage { background: var(--al-purple-soft); color: var(--al-purple); }
.al-tag.kind-audit { background: var(--al-orange-soft); color: var(--al-orange); }
.al-tag.kind-created { background: var(--al-purple-soft); color: var(--al-purple); }
.al-tag.kind-default { background: var(--al-gray-soft); color: var(--al-gray); }
.al-tag.kind-reviewed { background: #ede9fe; color: #6d28d9; }
.al-tag.kind-added { background: var(--al-gray-soft); color: var(--al-gray); }
.al-tag.kind-access { background: #ffedd5; color: #c2410c; }

.al-tag.area-profile { background: #ede9fe; color: #6d28d9; }
.al-tag.area-application { background: #fee2e2; color: #b91c1c; }
.al-tag.area-mortgage { background: #dcfce7; color: #15803d; }
.al-tag.area-insurance { background: #dbeafe; color: #1d4ed8; }
.al-tag.area-kiwisaver { background: #ffedd5; color: #c2410c; }
.al-tag.area-documents { background: var(--al-gray-soft); color: var(--al-gray); }
.al-tag.area-quicknotes { background: #dbeafe; color: #1d4ed8; }
.al-tag.area-annual { background: #ede9fe; color: #6d28d9; }
.al-tag.area-default { background: var(--al-gray-soft); color: var(--al-gray); }

.al-section-path {
    font-size: 12px;
    font-weight: 500;
    color: var(--al-muted);
}

.al-event-summary {
    margin: 8px 0 0;
    font-size: 12px;
    font-style: italic;
    color: var(--al-muted);
    line-height: 1.45;
}

.al-diff-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.al-diff-line {
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}

.al-diff-label {
    font-weight: 600;
    color: var(--al-text);
}

.al-diff-old {
    text-decoration: line-through;
    color: var(--al-muted);
}

.al-diff-arrow {
    color: var(--al-muted);
    margin: 0 4px;
}

.al-diff-new {
    font-weight: 700;
    color: #0f5c5a;
}

.al-diff-new.status-met {
    color: #0f5c5a;
}

.al-diff-add {
    color: #0f5c5a;
    font-weight: 600;
}

.al-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--al-muted);
    font-size: 14px;
}

@media (max-width: 768px) {
    .al-client-header {
        padding: 18px 16px;
    }

    .al-filter-bar,
    .al-feed,
    .cal-feed {
        padding-left: 16px;
        padding-right: 16px;
    }

    .al-event-headline {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cal-filter-row-actor {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ——— Client-record Activity Log (sidebar view) ——— */
.cal-page {
    max-width: 960px;
}

.cal-design-banner {
    background: var(--al-teal-soft);
    border: 1px solid #b8ecea;
    border-radius: 10px;
    color: #0f5c5a;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 16px;
    margin-bottom: 20px;
    text-align: center;
}

.cal-intro {
    margin-bottom: 20px;
}

.cal-title {
    margin: 0 0 10px;
    font-family: var(--al-sans) !important;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--al-navy);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
}

.cal-description {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
    max-width: 820px;
}

.cal-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cal-meta-pill {
    background: #fff;
    border: 1px solid var(--al-border);
    border-radius: 999px;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
}

.cal-shell {
    background: #fff;
    border: 1px solid var(--al-border);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.cal-filter-panel {
    padding: 18px 24px;
    border-bottom: 1px solid var(--al-border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cal-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.cal-filter-row-actor {
    justify-content: space-between;
    align-items: center;
}

.cal-filter-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.cal-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--al-muted);
    padding-top: 8px;
    min-width: 36px;
}

.cal-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.cal-filter-pill {
    border: 1px solid var(--al-border);
    background: #fff;
    color: var(--al-text);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.cal-filter-pill:hover {
    border-color: #cbd5e1;
}

.cal-filter-pill.active {
    border-color: var(--al-navy);
    box-shadow: inset 0 0 0 1px var(--al-navy);
}

.cal-event-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--al-muted);
    white-space: nowrap;
}

.cal-feed {
    padding: 8px 24px 28px;
}

.cal-event-row .al-event-tags {
    gap: 8px;
}

.cal-event-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0f5c5a;
    text-decoration: none;
}

.cal-event-link:hover {
    text-decoration: underline;
}

/* Sidebar BETA badge */
.bm-client-nav-link .cal-nav-new {
    margin-left: auto;
    background: #fff;
    color: var(--al-navy, #262646);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
}

#sidenav-main.bm-client-sidenav .bm-client-nav-link.active .cal-nav-new {
    background: var(--al-navy, #262646);
    color: #fff;
}

#sidenav-main.bm-client-sidenav .bm-client-nav-link:has(.cal-nav-new) > span:not(.material-icons):not(.cal-nav-new) {
    flex: 1;
    min-width: 0;
}

.al-beta-tag {
    display: inline-block;
    margin-left: 8px;
    background: var(--al-navy, #262646);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
    vertical-align: middle;
}

.al-tab-with-beta {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}