/* ClinuCloud Admin — platform console theme (distinct from clinic teal) */

:root {
    --ta-primary: #6366f1;
    --ta-primary-dark: #4f46e5;
    --ta-primary-light: #818cf8;
    --ta-accent: #a855f7;
    --ta-accent-soft: #c4b5fd;

    --ta-sidebar-bg: #0f0a1e;
    --ta-sidebar-bg-mid: #1a1333;
    --ta-sidebar-text: #e8e4f5;
    --ta-sidebar-muted: #9d94b8;
    --ta-sidebar-border: rgba(255, 255, 255, 0.08);
    --ta-nav-active-bg: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --ta-nav-hover-bg: rgba(99, 102, 241, 0.14);
    --ta-brand-mark-bg: linear-gradient(145deg, #6366f1 0%, #8b5cf6 100%);
    --ta-brand-sub: #c4b5fd;

    --ta-bg: #f0f2f8;
    --ta-surface: #ffffff;
    --ta-text: #1e1b4b;
    --ta-muted: #64748b;
    --ta-border: #e2e8f0;
    --ta-topbar-bg: #ffffff;
    --ta-topbar-border: #e8ecf4;

    --ta-success-bg: #ecfdf5;
    --ta-success-text: #047857;
    --ta-danger-bg: #fef2f2;
    --ta-danger-text: #b91c1c;
    --ta-warning-bg: #fffbeb;
    --ta-warning-text: #b45309;

    --ta-radius: 16px;
    --ta-radius-sm: 12px;
    --ta-shadow: 0 4px 24px rgba(30, 27, 75, 0.08);
    --ta-font: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

    /* Map legacy mf-* tokens used by shared panel CSS */
    --mf-navy: var(--ta-sidebar-bg);
    --mf-navy-deep: #07040f;
    --mf-teal: var(--ta-primary);
    --mf-teal-dark: var(--ta-primary-dark);
    --mf-bg: var(--ta-bg);
    --mf-surface: var(--ta-surface);
    --mf-text: var(--ta-text);
    --mf-muted: var(--ta-muted);
    --mf-border: var(--ta-border);
    --mf-success-bg: var(--ta-success-bg);
    --mf-success-text: var(--ta-success-text);
    --mf-warning-bg: var(--ta-warning-bg);
    --mf-warning-text: var(--ta-warning-text);
    --mf-radius: var(--ta-radius);
    --mf-radius-sm: var(--ta-radius-sm);
    --mf-shadow: var(--ta-shadow);
    --mf-font: var(--ta-font);
}

.mf-shell--rtl {
    font-family: "Cairo", "Plus Jakarta Sans", Tahoma, sans-serif;
}

body {
    font-family: var(--ta-font);
    background: var(--ta-bg);
    color: var(--ta-text);
}

/* Shell & sidebar */
.mf-shell {
    background: var(--ta-bg);
}

.mf-sidebar {
    background: linear-gradient(180deg, var(--ta-sidebar-bg) 0%, var(--ta-sidebar-bg-mid) 100%);
    color: var(--ta-sidebar-text);
}

.mf-main-wrap {
    background: var(--ta-bg);
}

.mf-topbar {
    background: var(--ta-topbar-bg);
    border-bottom-color: var(--ta-topbar-border);
    box-shadow: 0 1px 0 rgba(99, 102, 241, 0.06);
}

.mf-page-title {
    color: var(--ta-text);
}

.mf-page-kicker {
    color: var(--ta-muted);
}

.mf-menu-btn {
    color: var(--ta-primary-dark);
}

.mf-menu-btn:hover {
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.18);
}

.mf-lang-item--active {
    background: #eef2ff !important;
    color: var(--ta-primary-dark) !important;
}

.mf-avatar-btn {
    border-color: rgba(99, 102, 241, 0.45) !important;
    background: linear-gradient(160deg, #fff 0%, #eef2ff 100%) !important;
    color: var(--ta-primary-dark) !important;
}

.mf-topbar-back {
    color: var(--ta-primary-dark);
}

.mf-topbar-back:hover {
    color: var(--ta-primary);
}

/* Nav overrides (scoped NavMenu + global) */
.mf-sidebar .mf-brand-mark {
    background: var(--ta-brand-mark-bg);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45);
}

.mf-sidebar .mf-brand-sub {
    color: var(--ta-brand-sub);
}

.mf-sidebar nav a.mf-nav-link {
    color: var(--ta-sidebar-muted);
}

.mf-sidebar nav a.mf-nav-link:hover {
    background: var(--ta-nav-hover-bg);
    color: var(--ta-sidebar-text);
}

.mf-sidebar nav a.mf-nav-link.active {
    background: var(--ta-nav-active-bg);
    color: #fff;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
}

.mf-sidebar nav a.mf-nav-link .mf-nav-ico {
    color: #8b83a8;
}

.mf-sidebar nav a.mf-nav-link:hover .mf-nav-ico,
.mf-sidebar nav a.mf-nav-link.active .mf-nav-ico {
    color: #fff;
}

.mf-sidebar .mf-brand {
    border-bottom-color: var(--ta-sidebar-border);
}

/* Cards & tables */
.tc-admin-card,
.mf-panel-lite {
    border-color: var(--ta-border);
    box-shadow: var(--ta-shadow);
}

.badge-active {
    background: var(--ta-success-bg);
    color: var(--ta-success-text);
}