/* Dashboard shell: tab strip (sits outside .fs-dashboard, so uses literal colors). */
.fs-tab-nav {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 24px;
}

.fs-tab {
    padding: 16px 20px;
    color: #6B7280;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    font-size: 14px;
}

.fs-tab:hover { color: #1F2937; }

.fs-tab-active {
    color: #FF6B35;
    border-bottom-color: #FF6B35;
}

.fs-tab-spacer { flex: 1 1 auto; }

.fs-tab-manage {
    padding: 12px 16px;
    color: #6B7280;
    cursor: pointer;
}
.fs-tab-manage:hover { color: #FF6B35; }

/* FinnlyS dashboard primitives — scoped under .fs-dashboard to avoid leaking into the rest of the app. */
.fs-dashboard {
    --fs-orange: #FF6B35;
    --fs-dark: #1F2937;
    --fs-gray: #6B7280;
    --fs-bg: #F0F2F5;
    --fs-white: #FFFFFF;
    --fs-green: #10B981;
    --fs-red: #EF4444;
    --fs-yellow: #F59E0B;
    --fs-blue: #3B82F6;
    --fs-light: #F3F4F6;
    --fs-border: #E5E7EB;

    background: var(--fs-bg);
    color: var(--fs-dark);
    font-size: 14px;
    line-height: 1.5;
    padding: 24px;
}

/* KPI grid */
.fs-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.fs-kpi-card {
    background: var(--fs-white);
    border-radius: 10px;
    padding: 20px 22px;
    border-top: 3px solid var(--fs-orange);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s, transform 0.15s;
}

.fs-kpi-card.fs-clickable { cursor: pointer; }
.fs-kpi-card.fs-clickable:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.fs-kpi-card.fs-green  { border-top-color: var(--fs-green); }
.fs-kpi-card.fs-blue   { border-top-color: var(--fs-blue); }
.fs-kpi-card.fs-yellow { border-top-color: var(--fs-yellow); }
.fs-kpi-card.fs-dark   { border-top-color: var(--fs-dark); }
.fs-kpi-card.fs-red    { border-top-color: var(--fs-red); }

.fs-kpi-label {
    font-size: 11px;
    color: var(--fs-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 8px;
}

.fs-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--fs-dark);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.fs-kpi-sub {
    font-size: 11px;
    color: var(--fs-gray);
    margin-top: 6px;
}

/* Pills */
.fs-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.fs-pill-green  { background: #D1FAE5; color: #065F46; }
.fs-pill-red    { background: #FEE2E2; color: #991B1B; }
.fs-pill-orange { background: #FFF0EB; color: #C2440A; }
.fs-pill-gray   { background: #F3F4F6; color: #6B7280; }
.fs-pill-blue   { background: #DBEAFE; color: #1D4ED8; }
.fs-pill-yellow { background: #FEF3C7; color: #92400E; }

/* Chart cards */
.fs-chart-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}
.fs-chart-grid.fs-two  { grid-template-columns: 2fr 1fr; }
.fs-chart-grid.fs-even { grid-template-columns: 1fr 1fr; }

.fs-chart-card {
    background: var(--fs-white);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.fs-chart-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fs-dark);
    margin-bottom: 4px;
}

.fs-chart-subtitle {
    font-size: 12px;
    color: var(--fs-gray);
    margin-bottom: 18px;
}

/* Highlight cards */
.fs-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.fs-highlight {
    background: var(--fs-white);
    border-left: 4px solid var(--fs-orange);
    padding: 18px 22px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.fs-highlight.fs-green  { border-left-color: var(--fs-green); }
.fs-highlight.fs-blue   { border-left-color: var(--fs-blue); }
.fs-highlight.fs-yellow { border-left-color: var(--fs-yellow); }
.fs-highlight.fs-red    { border-left-color: var(--fs-red); }

.fs-highlight-title {
    font-size: 12px;
    color: var(--fs-gray);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.fs-highlight-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--fs-dark);
    margin-bottom: 4px;
}

.fs-highlight-text {
    font-size: 12px;
    color: var(--fs-gray);
    line-height: 1.5;
}