/* Global MudBlazor design overrides — flat, bordered, rounded.
   Ported from the SignageServer design system. The intent is to give the
   whole app a consistent look without per-page styling: kill shadows, use
   1px divider borders for separation, round corners to 8px, and apply
   pill-style chrome to nav links and tabs. */

/* ── Base ── */
html, body {
    /* Suppress horizontal overflow at the document root. Position:fixed
       widgets that use logical inset properties (e.g. GlobalChatWidget's
       `inset-inline-end:Xpx`) are anchored to a different physical edge in
       RTL and can extend past the opposite edge — without this, Arabic
       mode developed a huge horizontal scroll. */
    overflow-x: hidden;
}

body {
    background-color: var(--mud-palette-background);
}

/* ── Kill all shadows ── */
.mud-button-root,
.mud-fab,
.mud-tooltip,
.mud-picker,
.mud-picker-container,
.mud-select,
.mud-alert,
.mud-expansion-panels,
.mud-expansion-panel,
.mud-card,
.mud-paper,
.mud-dialog,
.mud-popover-paper,
.mud-snackbar,
.mud-table,
.mud-drawer {
    box-shadow: none !important;
}

/* ── Consistent border radius ── */
.mud-paper,
.mud-card,
.mud-dialog,
.mud-alert,
.mud-expansion-panel,
.mud-popover-paper,
.mud-snackbar,
.mud-picker-container {
    border-radius: 8px !important;
}

/* ── Borders on containers (not nested children) ── */
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-4 {
    border: 1px solid var(--mud-palette-divider);
}

/* Tables — only when they are the top-level container */
.mud-table:not(.mud-paper .mud-table) {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px !important;
}

/* Tables inside paper — no extra border */
.mud-paper .mud-table {
    border: none;
}

/* Softer table row dividers */
.mud-table .mud-table-row td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.dark-mode .mud-table .mud-table-row td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mud-table .mud-table-row:last-child td {
    border-bottom: none;
}

/* Table header — subtle separation */
.mud-table .mud-table-head th {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Progress bar — match container rounding */
.mud-progress-linear {
    border-radius: 6px !important;
}

/* ── Layout ── */

/* AppBar — subtle bottom border + translucent blur */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

/* AppBar honors the org's AppbarBackground from the theme but renders at
   80% opacity with a backdrop blur for the translucent flat-design feel.
   color-mix lets us reuse the theme variable directly so customised
   branding flows through automatically (light + dark modes both). */
.appbar-blur {
    background-color: color-mix(in srgb,
                                var(--mud-palette-appbar-background) 80%,
                                transparent) !important;
    color: var(--mud-palette-appbar-text) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Drawer — no border by default. overflow-x:hidden prevents the
   horizontal scrollbar that otherwise appears when the vertical
   scrollbar's gutter eats ~16px from a nav-link sized at width:100%
   by MudBlazor. */
.mud-drawer {
    border-right: none !important;
    overflow-x: hidden;
}

/* Right (AI / conversation) drawer: subtle 1px divider on BOTH inline edges
   so it reads as separated from the main canvas regardless of language
   direction. Targets `.right-pane-drawer` (custom class on the MudDrawer
   in MainLayout) → `.mud-drawer-content` (the inner content surface).
   We can't key off `.mud-drawer-pos-right` because Anchor.End flips that
   class to `.mud-drawer-pos-left` in RTL — the custom class is stable. */
.right-pane-drawer .mud-drawer-content {
    border-left:  1px solid var(--mud-palette-divider) !important;
    border-right: 1px solid var(--mud-palette-divider) !important;
}

/* GlobalChatWidget bottom bar — position uses `inset-inline-end` inline
   so it anchors to the inline-end edge (right in LTR, left in RTL).
   Static layout lives here. */
.global-chat-widget__bar {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding-inline-end: 4px;
}
/* ── Overlays ── */
.mud-dialog {
    border: 1px solid var(--mud-palette-divider);
}

.mud-popover-paper,
.mud-popover,
.mud-popover.mud-paper {
    border: 1px solid var(--mud-palette-divider) !important;
}

/* MudSelect double-scrollbar fix: when the option list overflows, both the
   popover paper and the inner .mud-list show a scrollbar (two side-by-side
   scrollbars). Clip the paper and let only the inner list scroll, leaving a
   single scrollbar. Scoped via PopoverClass so other dropdowns are untouched. */
.logs-single-scroll-popover {
    overflow-y: hidden !important;
}

.logs-single-scroll-popover .mud-list {
    overflow-y: auto !important;
}

.mud-snackbar {
    border: 1px solid var(--mud-palette-divider);
}

.mud-tooltip {
    border: 1px solid var(--mud-palette-divider);
}

.mud-picker-container {
    border: 1px solid var(--mud-palette-divider);
}

/* ── Components ── */

/* Tabs — pill style like nav menu */
.mud-tabs-tabbar,
.mud-tabs-tabbar-inner,
.mud-tabs-header {
    border-bottom: none !important;
    background-color: transparent !important;
}

.mud-tab {
    border-radius: 8px !important;
    margin: 0;
    min-height: unset !important;
    padding: 8px 16px !important;
    text-transform: none !important;
    font-weight: 400;
    letter-spacing: normal !important;
    transition: background-color 0.15s;
}

.mud-tab.mud-tab-active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

.mud-tab:hover:not(.mud-tab-active) {
    background-color: var(--mud-palette-action-default-hover, rgba(0,0,0,0.04)) !important;
}

.mud-tabs-tabbar .mud-tooltip-root.mud-tooltip-inline {
    margin: 4px 6px;
}

.mud-tabs-tabbar .mud-tooltip-root.mud-tooltip-inline:first-child {
    margin-left: 0;
}

.mud-tabs-tabbar .mud-tooltip-root.mud-tooltip-inline:last-of-type {
    margin-right: 0;
}

/* Hide the default slider */
.mud-tab-slider {
    display: none !important;
}

/* Chips */
.mud-chip {
    border: 1px solid var(--mud-palette-divider);
}

/* Alert */
.mud-alert {
    border: 1px solid var(--mud-palette-divider);
}

/* Card */
.mud-card {
    border: 1px solid var(--mud-palette-divider);
}

/* Expansion panels */
.mud-expansion-panels {
    border: 1px solid var(--mud-palette-divider);
}

.mud-expansion-panel {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-expansion-panel:last-child {
    border-bottom: none;
}

/* ── Nav menu ── */
.mud-nav-link {
    margin: 4px 8px;
    border-radius: 8px !important;
    transition: background-color 0.15s;
}

.mud-nav-link.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

.mud-nav-link:hover:not(.active) {
    background-color: var(--mud-palette-action-default-hover, rgba(0,0,0,0.04)) !important;
}

/* ── Mobile responsiveness ── */
@media (max-width: 599px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

/* Responsive page headers */
.mud-typography-h3 {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
}

.mud-typography-h4 {
    font-size: clamp(1.3rem, 3.5vw, 2rem) !important;
}

.mud-typography-h5 {
    font-size: clamp(1.15rem, 3vw, 1.5rem) !important;
}

.mud-typography-h6 {
    font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
}

/* Hide redundant table toolbar labels on mobile */
@media (max-width: 599px) {
    .mud-table-toolbar .mud-typography {
        display: none;
    }
}

/* ── Dark mode logo invert ── */
.dark-mode .appbar-logo,
.dark-mode .banner-image {
    filter: invert(1) brightness(2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Home dashboard (role-aware landing) — "energy SaaS" accent layer.

   Every accent is mixed against --mud-palette-text-primary so foreground marks
   (icons, deltas, chart strokes) stay legible in BOTH light and dark themes
   without hard-coding two palettes. Surfaces/borders reuse the app's own
   --mud-palette-* tokens, so the org's brand theme still flows through. This is
   the same theme-following technique the .appbar-blur rule already uses.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --ef-emerald: color-mix(in srgb, #10b981 70%, var(--mud-palette-text-primary));
    --ef-teal:    color-mix(in srgb, #14b8a6 70%, var(--mud-palette-text-primary));
    --ef-amber:   color-mix(in srgb, #f59e0b 74%, var(--mud-palette-text-primary));
    --ef-red:     color-mix(in srgb, #ef4444 74%, var(--mud-palette-text-primary));
    --ef-violet:  color-mix(in srgb, #8b5cf6 72%, var(--mud-palette-text-primary));
    --ef-sky:     color-mix(in srgb, #0ea5e9 72%, var(--mud-palette-text-primary));
    --ef-primary: var(--mud-palette-primary);
}

.ef-dashboard { padding-bottom: 24px; }

/* Accent selector: sets the local --ef-accent consumed by chips/strips/tags. */
.ef-accent-emerald { --ef-accent: var(--ef-emerald); }
.ef-accent-teal    { --ef-accent: var(--ef-teal); }
.ef-accent-amber   { --ef-accent: var(--ef-amber); }
.ef-accent-red     { --ef-accent: var(--ef-red); }
.ef-accent-violet  { --ef-accent: var(--ef-violet); }
.ef-accent-sky     { --ef-accent: var(--ef-sky); }
.ef-accent-primary { --ef-accent: var(--mud-palette-primary); }

/* ── Greeting header ── */
.ef-header {
    border-radius: 14px;
    padding: 20px 24px;
    border: 1px solid var(--mud-palette-divider);
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)) 0%,
        var(--mud-palette-surface) 62%);
}
.ef-header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ef-header__lead { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ef-header__icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ef-accent);
    background: color-mix(in srgb, var(--ef-accent) 16%, transparent);
}
.ef-header__title { font-weight: 700; }
.ef-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Chips / pills / tags ── */
.ef-role-chip {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
    color: var(--ef-accent);
    background: color-mix(in srgb, var(--ef-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ef-accent) 32%, transparent);
}
.ef-pill {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--mud-palette-divider);
}
.ef-pill--ok    { color: var(--ef-emerald); background: color-mix(in srgb, var(--ef-emerald) 12%, transparent); border-color: color-mix(in srgb, var(--ef-emerald) 30%, transparent); }
.ef-pill--info  { color: var(--ef-sky);     background: color-mix(in srgb, var(--ef-sky) 12%, transparent);     border-color: color-mix(in srgb, var(--ef-sky) 30%, transparent); }
.ef-pill--warn  { color: var(--ef-amber);   background: color-mix(in srgb, var(--ef-amber) 12%, transparent);   border-color: color-mix(in srgb, var(--ef-amber) 30%, transparent); }
.ef-pill--error { color: var(--ef-red);     background: color-mix(in srgb, var(--ef-red) 12%, transparent);     border-color: color-mix(in srgb, var(--ef-red) 30%, transparent); }

/* ── Metric card ── */
.ef-metric { position: relative; overflow: hidden; height: 100%; }
.ef-metric__accent {
    position: absolute; top: 0; inset-inline: 0; height: 3px;
    background: linear-gradient(90deg, var(--ef-accent), color-mix(in srgb, var(--ef-accent) 30%, transparent));
}
.ef-metric__value {
    font-size: 1.9rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary);
}
.ef-chip {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ef-accent);
    background: color-mix(in srgb, var(--ef-accent) 15%, transparent);
}
.ef-chip--sm { width: 32px; height: 32px; border-radius: 8px; }
.ef-chip .mud-icon-root { color: var(--ef-accent); }
.ef-chip-skeleton { border-radius: 10px !important; }

/* ── Delta (trend) indicator ── */
.ef-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: 0.8rem; white-space: nowrap; color: var(--mud-palette-text-secondary); }
.ef-delta .mud-icon-root { font-size: 1rem; }
.ef-delta--up   { color: var(--ef-emerald); }
.ef-delta--down { color: var(--ef-red); }

/* ── Panels ── */
.ef-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ef-panel__title { font-weight: 600; }

/* Data-table polish (uppercase, muted headers) */
.ef-table .mud-table-head th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

/* Empty state (no rows to show) */
.ef-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 32px 16px; text-align: center; color: var(--mud-palette-text-secondary);
}
.ef-empty .mud-icon-root { color: var(--mud-palette-text-disabled); }

/* ── Status dots + tags (system health) ── */
.ef-health-list { padding: 0; }
.ef-health { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mud-palette-divider); }
.ef-health:last-child { border-bottom: none; }
.ef-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ef-dot--ok   { background: var(--ef-emerald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ef-emerald) 20%, transparent); }
.ef-dot--warn { background: var(--ef-amber);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--ef-amber) 20%, transparent); }
.ef-dot--down { background: var(--ef-red);     box-shadow: 0 0 0 3px color-mix(in srgb, var(--ef-red) 20%, transparent); }
.ef-dot--pulse { animation: ef-pulse 1.8s ease-out infinite; }
@keyframes ef-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ef-emerald) 45%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .ef-dot--pulse { animation: none; } }
/* The status tag reuses the dot modifier for its colour only — strip the dot geometry. */
.ef-status-tag { font-size: 0.7rem; font-weight: 700; flex-shrink: 0; width: auto; height: auto; background: none !important; box-shadow: none !important; }
.ef-status-tag.ef-dot--ok   { color: var(--ef-emerald); }
.ef-status-tag.ef-dot--warn { color: var(--ef-amber); }
.ef-status-tag.ef-dot--down { color: var(--ef-red); }

/* ── Mini SVG chart ── */
.ef-chart { width: 100%; }
.ef-chart--empty { display: flex; align-items: center; justify-content: center; }
.ef-chart__labels { display: grid; margin-top: 6px; gap: 2px; }
.ef-chart__labels span { font-size: 0.62rem; color: var(--mud-palette-text-secondary); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── AI insights ── */
.ef-ai { background: linear-gradient(160deg, color-mix(in srgb, var(--ef-violet) 8%, var(--mud-palette-surface)), var(--mud-palette-surface)); }
.ef-ai__icon { color: var(--ef-violet); }
.ef-insight { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 8px; margin-bottom: 8px; background: var(--mud-palette-background); border: 1px solid var(--mud-palette-divider); }
.ef-insight:last-of-type { margin-bottom: 0; }
.ef-insight__icon { margin-top: 1px; flex-shrink: 0; }
.ef-insight--info .ef-insight__icon     { color: var(--ef-sky); }
.ef-insight--positive .ef-insight__icon { color: var(--ef-emerald); }
.ef-insight--warning .ef-insight__icon  { color: var(--ef-amber); }

/* ── Operator: alerts + protocol cards ── */
.ef-alerts { display: flex; flex-direction: column; }
.ef-alert { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--mud-palette-divider); }
.ef-alert:last-child { border-bottom: none; }
.ef-alert__icon { flex-shrink: 0; }
.ef-alert--critical { background: color-mix(in srgb, var(--ef-red) 7%, transparent); }
.ef-alert--critical .ef-alert__icon { color: var(--ef-red); }
.ef-alert--warning .ef-alert__icon  { color: var(--ef-amber); }
.ef-alert--info .ef-alert__icon     { color: var(--ef-sky); }
.ef-proto { border: 1px solid var(--mud-palette-divider); border-radius: 10px; padding: 12px; height: 100%; }
.ef-proto__row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.85rem; }
.ef-proto__row > span:not(.ef-dot) { flex: 1; color: var(--mud-palette-text-secondary); }
.ef-proto__row > b { font-variant-numeric: tabular-nums; }

/* ── Customer: balance hero + usage ── */
.ef-balance { position: relative; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--ef-emerald) 14%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 70%); }
.ef-balance--overdue { background: linear-gradient(150deg, color-mix(in srgb, var(--ef-red) 14%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 70%); }
.ef-balance__icon { color: var(--ef-emerald); }
.ef-balance--overdue .ef-balance__icon { color: var(--ef-red); }
.ef-balance__amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.ef-usage { border: 1px solid var(--mud-palette-divider); border-radius: 10px; padding: 12px; height: 100%; }
.ef-text-red { color: var(--ef-red) !important; }

/* Stack the header actions under the greeting on very small screens. */
@media (max-width: 599px) {
    .ef-header__actions { width: 100%; justify-content: space-between; }
    .ef-metric__value { font-size: 1.6rem; }
    .ef-balance__amount { font-size: 2.1rem; }
}