/* ==========================================================================
   MTC design-system tokens + shared brand primitives.
   Single source of truth for colour / radius / spacing used by the main layout
   and the login/landing page. Feature-page patterns (tables, stat tiles, chips)
   are intentionally NOT defined here yet — they arrive in the page-restyle pass.
   Mirrors ConfigFrontEnd/Theme/MtcTheme.cs.
   ========================================================================== */
:root {
    /* Colour */
    --mtc-navy: #2f5472;        /* lead: sidebar, login banner, brand panels */
    --mtc-navy-deep: #213d54;   /* action-button hover, deep surfaces */
    --mtc-primary: #2b79b5;     /* the single action colour */
    --mtc-orange: #ee8c23;      /* sector bar — graphics only, never text */
    --mtc-green: #76b943;       /* sector bar — graphics only, never text */
    --mtc-text: #1b2a38;
    --mtc-muted: #5f7182;
    --mtc-line: #dde4ea;
    --mtc-bg: #f4f6f8;
    --mtc-surface: #ffffff;
    --mtc-primary-tint: #eaf2f9;
    --mtc-on-navy-muted: #c2d0dc;
    --mtc-success: #2f7a1f;
    --mtc-success-tint: #ebf5e3;
    --mtc-warning: #a85a0c;
    --mtc-warning-tint: #fdf1e3;

    /* Radius */
    --mtc-r-sm: 6px;    /* inputs, buttons, chips */
    --mtc-r-md: 8px;    /* nav items, icon wells */
    --mtc-r-lg: 12px;   /* cards, tables, dialogs */
    --mtc-r-full: 999px;/* pills, avatars */

    /* Spacing */
    --mtc-s-1: 4px;
    --mtc-s-2: 8px;
    --mtc-s-3: 12px;
    --mtc-s-4: 16px;
    --mtc-s-6: 24px;
    --mtc-s-8: 32px;

    /* Elevation (menus / popovers / dialogs only — cards stay flat) */
    --mtc-shadow-pop: 0 8px 24px rgba(33, 61, 84, 0.16);

    /* Type */
    --mtc-font-sans: "Roboto", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mtc-font-ar: "Noto Sans Arabic", Roboto, Tahoma, sans-serif;
}

/* Flat surface card: 1px line border, no shadow, lg radius. */
.mtc-card-flat {
    background: var(--mtc-surface) !important;
    border: 1px solid var(--mtc-line) !important;
    border-radius: var(--mtc-r-lg) !important;
    box-shadow: none !important;
}

/* The single action colour, applied without repointing Palette.Primary. */
.mtc-btn-action {
    background-color: var(--mtc-primary) !important;
    color: #ffffff !important;
}

    .mtc-btn-action:hover {
        background-color: var(--mtc-navy-deep) !important;
    }

/* Overline motif — uppercase, tracked. Never applies to Arabic (RTL guard below). */
.mtc-overline {
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mtc-on-navy-muted);
}

/* Tricolour "sector bar" brand motif (navy / orange / green pills). */
.mtc-sectorbar {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

    .mtc-sectorbar span {
        width: 22px;
        height: 4px;
        border-radius: 2px;
        display: block;
    }

    .mtc-sectorbar .mtc-sb-1 { background: var(--mtc-primary); }
    .mtc-sectorbar .mtc-sb-2 { background: var(--mtc-orange); }
    .mtc-sectorbar .mtc-sb-3 { background: var(--mtc-green); }

/* ---- RTL / Arabic typography guards -------------------------------------
   The design system never uppercases or letter-spaces Arabic script. */
[dir="rtl"] .mtc-overline,
[dir="rtl"] .mud-typography-overline {
    text-transform: none;
    letter-spacing: 0;
}

[dir="rtl"] .mtc-overline {
    font-family: var(--mtc-font-ar);
}