:root {
    --faham-primary: #3864d2;
    --faham-primary-dark: #1a1e3a;
    --faham-primary-tint: #e8edfb;
    --faham-ink: #101828;
    --faham-muted: #64748b;
    --faham-border: #e2e8f0;
    --faham-bg: #f4f6fb;
    --faham-surface: #ffffff;
    --faham-success: #16a34a;
    --faham-success-tint: #dcfce7;
    --faham-danger: #dc2626;
    --faham-danger-tint: #fee2e2;
    --faham-radius: 10px;
    --faham-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --faham-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

    --faham-font-display: 'Sora', sans-serif;
    --faham-font-body: 'Inter', sans-serif;
}

.mud-palette-dark {
    --faham-ink: #e8ecf5;
    --faham-muted: #94a3b8;
    --faham-border: #2a3148;
    --faham-bg: #0f1322;
    --faham-surface: #171d30;
    --faham-primary-tint: rgba(56, 100, 210, 0.15);
}

body {
    font-family: var(--faham-font-body);
    background: var(--faham-bg);
}

h1, h2, h3, h4, h5, h6, .faham-display {
    font-family: var(--faham-font-display);
    letter-spacing: -0.01em;
}

/* ---------- Shared "premium" card/table system used across every module page ---------- */

.faham-premium-card {
    background: var(--faham-surface);
    border-radius: var(--faham-radius);
    box-shadow: var(--faham-shadow);
    border: 1px solid var(--faham-border);
    padding: 20px 0;
}

.faham-add-btn {
    background: var(--faham-primary) !important;
    color: #fff !important;
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    box-shadow: none !important;
}
    .faham-add-btn:hover { background: var(--faham-primary-dark) !important; }

.faham-search-input {
    background: var(--faham-bg);
    border-radius: 8px;
    padding: 4px 12px;
}

.faham-premium-table {
    background: transparent;
}
    .faham-premium-table .mud-table-head {
        background: var(--faham-bg);
    }
    .faham-premium-table .mud-table-head th {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 700;
        color: var(--faham-muted);
        border-bottom: 1px solid var(--faham-border);
    }
    .faham-premium-table .mud-table-row {
        border-bottom: 1px solid var(--faham-border);
        transition: background 0.15s ease;
    }
    .faham-premium-table .mud-table-row:hover {
        background: var(--faham-bg) !important;
    }
    .faham-premium-table td {
        font-family: var(--faham-font-body);
        color: var(--faham-ink);
    }

.faham-text-bold { color: var(--faham-ink); font-weight: 600; }
.faham-text-muted { color: var(--faham-muted); }

.faham-chip {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.faham-chip.active-chip {
    background: var(--faham-success-tint) !important;
    color: var(--faham-success) !important;
}
.faham-chip.inactive-chip {
    background: var(--faham-danger-tint) !important;
    color: var(--faham-danger) !important;
}

.faham-edit-btn { color: var(--faham-primary) !important; background: var(--faham-primary-tint) !important; }
.faham-delete-btn { color: var(--faham-danger) !important; background: var(--faham-danger-tint) !important; }
.faham-edit-btn, .faham-delete-btn { border-radius: 8px !important; }

.faham-dialog-cancel-btn { background: var(--faham-bg) !important; color: var(--faham-ink) !important; box-shadow: none !important; text-transform: none !important; }
.faham-dialog-update-btn { background: var(--faham-primary) !important; color: #fff !important; box-shadow: none !important; text-transform: none !important; }

/* ---------- App shell ---------- */

.faham-shell-sidebar {
    background: var(--faham-primary-dark) !important;
}
.faham-sidebar-logo {
    font-family: var(--faham-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: #fff;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.faham-page-header {
    background: var(--faham-surface);
    border-bottom: 1px solid var(--faham-border);
    padding: 20px 28px;
}
.faham-page-title {
    font-family: var(--faham-font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--faham-ink);
}

.faham-stat-card {
    background: var(--faham-surface);
    border: 1px solid var(--faham-border);
    border-radius: var(--faham-radius);
    padding: 20px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
    .faham-stat-card:hover {
        box-shadow: var(--faham-shadow-md);
        transform: translateY(-2px);
    }
.faham-stat-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 6px;
    color: #fff;
}
.faham-stat-value {
    font-family: var(--faham-font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--faham-ink);
    margin-top: 12px;
}

.faham-survey-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--faham-border) !important;
    border-radius: var(--faham-radius) !important;
    overflow: hidden;
}
    .faham-survey-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--faham-shadow-md) !important;
    }
.faham-survey-header {
    background: linear-gradient(135deg, var(--faham-primary) 0%, #7e57c2 100%);
    cursor: pointer;
}

.faham-segment-control {
    display: flex;
    border-radius: 8px;
    border: 1px solid var(--faham-border);
    overflow: hidden;
    width: fit-content;
}
.faham-segment-btn {
    padding: 10px 22px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--faham-border);
    color: var(--faham-primary);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
    .faham-segment-btn:last-child { border-right: none; }
    .faham-segment-btn:hover:not(.active) { background: var(--faham-bg); }
    .faham-segment-btn.active { background: var(--faham-primary); color: #fff; }

@media (max-width: 768px) {
    .faham-segment-control { flex-direction: column; width: 100%; }
    .faham-segment-btn { border-right: none; border-bottom: 1px solid var(--faham-border); }
    .faham-page-header { padding: 16px 20px; }
}