/* ============================================
   GLOBAL UTILITY CLASSES
   Shared patterns extracted from component CSS
   ============================================ */

/* ---- KPI Cards ---- */

.kpi-card {
    border-radius: var(--rcm-radius);
    border: 1px solid var(--rcm-border);
    background: rgba(255,255,255,0.92);
    box-shadow: var(--rcm-shadow-sm);
    transition: box-shadow 0.2s ease;
}

.kpi-card:hover {
    box-shadow: var(--rcm-shadow);
}

.kpi-card-primary   { border-left: 4px solid var(--mud-palette-primary); }
.kpi-card-success   { border-left: 4px solid var(--mud-palette-success); }
.kpi-card-info      { border-left: 4px solid var(--mud-palette-info); }
.kpi-card-warn      { border-left: 4px solid var(--mud-palette-warning); }
.kpi-card-error     { border-left: 4px solid var(--mud-palette-error); }
.kpi-card-accent    { border-left: 4px solid #FFC107; }
.kpi-card-red       { border-left: 4px solid var(--rcm-red); }
.kpi-card-black     { border-left: 4px solid var(--rcm-black); }
.kpi-card-gray      { border-left: 4px solid var(--rcm-medium-gray); }

/* ---- KPI Trend Indicators ---- */

.kpi-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 2px;
}

.trend-up, .trend-up span:first-child {
    color: var(--mud-palette-success) !important;
}

.trend-down, .trend-down span:first-child {
    color: var(--mud-palette-error) !important;
}

.trend-flat, .trend-flat span:first-child {
    color: var(--mud-palette-text-secondary) !important;
    opacity: 0.7;
}

/* ---- KPI Icon Container ---- */

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--rcm-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.04);
}

/* ---- Page Toolbars ---- */

.page-toolbar {
    border-radius: var(--rcm-radius);
    overflow: hidden;
}

.page-toolbar-inner {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-toolbar-light {
    background: var(--rcm-light-gray);
}

.page-toolbar-dark {
    background: var(--rcm-black);
    color: var(--rcm-white);
}

/* ---- Section Headers ---- */

.section-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.section-title-sm {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---- Count Badges ---- */

.count-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--rcm-white);
    background: var(--rcm-red);
    padding: 2px 10px;
    border-radius: var(--rcm-radius);
}

/* ---- Shadow Utilities ---- */

.shadow-sm   { box-shadow: var(--rcm-shadow-sm); }
.shadow-soft { box-shadow: var(--rcm-shadow-soft); }
.shadow-md   { box-shadow: var(--rcm-shadow); }
.shadow-hover { box-shadow: var(--rcm-shadow-hover); }