/* ═══════════════════════════════════════════════════════
   AccFlex ERP — Elsa Studio Theme
   Mirrors the AccFlex ERP visual style (flat blue sidebar,
   white AppBar, teal primary accent).
   This file MUST be linked last in _Host.cshtml so it wins
   over all library styles.
   ═══════════════════════════════════════════════════════ */

/* ── MudBlazor CSS Variable Overrides ────────────────────── */
:root {
    /* Primary accent = AccFlex teal */
    --mud-palette-primary:              #00BFD8;
    --mud-palette-primary-darken:       #0099AD;
    --mud-palette-primary-lighten:      #33CCDF;
    --mud-palette-primary-text:         #FFFFFF;

    /* Secondary */
    --mud-palette-secondary:            #00BFD8;
    --mud-palette-secondary-darken:     #0099AD;
    --mud-palette-secondary-lighten:    #33CCDF;
    --mud-palette-secondary-text:       #FFFFFF;

    /* AppBar — white bar at the top */
    --mud-palette-appbar-background:    #FFFFFF;
    --mud-palette-appbar-text:          #333333;

    /* Drawer / Sidebar — flat AccFlex blue */
    --mud-palette-drawer-background:    #5585C5;
    --mud-palette-drawer-text:          #FFFFFF;
    --mud-palette-drawer-icon:          rgba(255, 255, 255, 0.80);

    /* Page background & surfaces */
    --mud-palette-background:           #F5F7FA;
    --mud-palette-surface:              #FFFFFF;

    /* Text */
    --mud-palette-text-primary:         #1F2937;
    --mud-palette-text-secondary:       #6B7280;
    --mud-palette-text-disabled:        #9CA3AF;

    /* Dividers & borders */
    --mud-palette-divider:              #E5E7EB;
    --mud-palette-lines-default:        #E5E7EB;
    --mud-palette-lines-inputs:         #D1D5DB;

    /* Action states */
    --mud-palette-action-default:       rgba(0, 0, 0, 0.54);
    --mud-palette-action-disabled:      rgba(0, 0, 0, 0.26);
}

/* ── Sidebar / Drawer: flat AccFlex blue, no gradient ────── */
.mud-drawer,
.mud-drawer-content,
.mud-drawer .mud-drawer-content {
    background-color: #5585C5 !important;
    background-image: none !important;
}

/* ── Sidebar nav links ────────────────────────────────────── */
.mud-nav-link {
    color: rgba(255, 255, 255, 0.90) !important;
    border-radius: 4px;
    margin: 2px 6px;
}

.mud-nav-link span,
.mud-nav-link .mud-nav-link-text {
    color: rgba(255, 255, 255, 0.90) !important;
}

.mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

.mud-nav-link.active,
.mud-nav-link[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.20) !important;
    color: #FFFFFF !important;
}

/* Sidebar icons */
.mud-nav-link .mud-icon-root,
.mud-drawer .mud-icon-root {
    color: rgba(255, 255, 255, 0.80) !important;
}

.mud-nav-link:hover .mud-icon-root,
.mud-nav-link.active .mud-icon-root {
    color: #FFFFFF !important;
}

/* Sidebar section headers / group labels */
.mud-nav-group .mud-nav-group-title,
.mud-list-subheader {
    color: rgba(255, 255, 255, 0.60) !important;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Sidebar toggle / expand chevron */
.mud-nav-link .mud-icon-root.mud-icon-size-small {
    color: rgba(255, 255, 255, 0.60) !important;
}

/* ── AppBar: white top bar ────────────────────────────────── */
.mud-appbar {
    background-color: #FFFFFF !important;
    color: #333333 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.mud-appbar .mud-icon-root {
    color: #555555 !important;
}

.mud-appbar .mud-button-root {
    color: #333333 !important;
}

.mud-appbar .mud-typography {
    color: #333333 !important;
}

/* ── Primary filled buttons ───────────────────────────────── */
.mud-button-filled-primary {
    background-color: #5585C5 !important;
    color: #FFFFFF !important;
}

.mud-button-filled-primary:hover {
    background-color: #4A78B8 !important;
}

/* ── Outlined buttons (AccFlex soft outline style) ────────── */
.mud-button-outlined {
    border-color: #D0D7DE !important;
    color: #374151 !important;
}

.mud-button-outlined:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* ── Tab / chip primary color ─────────────────────────────── */
.mud-tab-active,
.mud-chip.mud-chip-color-primary {
    color: #00BFD8 !important;
}

/* ── Focus ring ───────────────────────────────────────────── */
.mud-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 191, 216, 0.35) !important;
}

/* ── AppBar: hide 3 toolbar items, keep only dark mode ───────
   Actual DOM structure (from DevTools inspection):
     <button mud-icon-button-edge-start>   ← hamburger   → KEEP
     <div class="flex-grow-1" />           ← spacer
     <a title="Documentation">             ← docs link   → HIDE
     <a title="Source code">              ← GitHub link  → HIDE
     <button aria-pressed="false/true">   ← dark mode    → KEEP (unique: has aria-pressed)
     <button>                             ← info         → HIDE

   Selectors:
     • All <a> icon-buttons in AppBar    → hide (Documentation + GitHub)
     • <button> that is NOT dark mode (aria-pressed) AND NOT hamburger (edge-start) → hide (Info)
   ──────────────────────────────────────────────────────────── */

/* Hide Documentation and GitHub (both are <a> tags) */
.mud-appbar a.mud-icon-button {
    display: none !important;
}

/* Hide Info button: a <button> without aria-pressed and without edge-start class */
.mud-appbar button.mud-icon-button:not([aria-pressed]):not(.mud-icon-button-edge-start) {
    display: none !important;
}

/* ── Replace Elsa brand logo with AccFlex logo ───────────────
   The drawer header (.mud-drawer-header) holds the Elsa owl icon
   and "Elsa 3.5" text. We hide all existing children and inject
   the AccFlex logo via a ::before pseudo-element.
   CSS pseudo-elements survive Blazor re-renders (unlike JS DOM edits).
   ──────────────────────────────────────────────────────────── */

/* Hide ALL existing brand children (icon SVG + "Elsa 3.5" text) */
.mud-drawer .mud-drawer-header > * {
    display: none !important;
}

/* Layout the header as a flex row */
.mud-drawer .mud-drawer-header {
    display: flex !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 10px 16px !important;
    gap: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* Inject AccFlex logo icon */
.mud-drawer .mud-drawer-header::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-image: url('/images/accflex-logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Inject "Accflex Workflows" text beside the logo */
.mud-drawer .mud-drawer-header::after {
    content: 'Accflex Workflows';
    display: block;
    margin-left: 10px;
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Hide Elsa "documentation" alert on the Dashboard ────────
   The Dashboard module renders a MudAlert that links to
   v3.elsaworkflows.io. Target only that element by matching a
   descendant anchor pointing to the Elsa docs domain so no
   other alerts in the app are affected.
   ──────────────────────────────────────────────────────────── */
.mud-alert:has(a[href*="elsaworkflows"]) {
    display: none !important;
}

/* ── Scrollbar (sidebar area) ─────────────────────────────── */
.mud-drawer ::-webkit-scrollbar {
    width: 4px;
}
.mud-drawer ::-webkit-scrollbar-track {
    background: transparent;
}
.mud-drawer ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
}