/* =====================================================================
   Meesenburg Corporate Design – MudBlazor Ergänzungen
   Basiert auf meesenburg_design_guide.md
   ===================================================================== */
@import url("jobs.css");
@import url("status-pages.css");
:root {
    /* Primärfarben */
    --meesenburg-primary: #24366e;
    --meesenburg-primary-dark: #131c38;
    --meesenburg-primary-light: #3a5299;
    --meesenburg-primary-lighter: #eceef5;

    /* Akzentfarben */
    --meesenburg-accent: #e74011;
    --meesenburg-accent-hover: #ff5525;
    --meesenburg-link: #1b88ff;

    /* Graustufen */
    --meesenburg-bg: #ffffff;
    --meesenburg-bg-secondary: #f6f7f9;
    --meesenburg-bg-tertiary: #e7eaee;
    --meesenburg-text: #131c38;
    --meesenburg-text-secondary: #565656;
    --meesenburg-text-muted: #8f8f8f;

    /* Status */
    --meesenburg-success: #1b8f1b;
    --meesenburg-warning: #ffaa00;
    --meesenburg-error: #e24312;
    --meesenburg-info: #1a99e6;

    /* Layout */
    --meesenburg-radius-sm: 4px;
    --meesenburg-radius-md: 8px;
    --meesenburg-radius-lg: 12px;
    --meesenburg-shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.1);
    --meesenburg-shadow-md: 0px 3px 6px rgba(0, 0, 0, 0.15);
    --meesenburg-shadow-lg: 0px 6px 12px rgba(0, 0, 0, 0.2);

    /* Typografie */
    --meesenburg-font-heading: 'Rubik', Tahoma, sans-serif;
    --meesenburg-font-body: 'Roboto', Arial, sans-serif;

    /* Hervorhebung (Header-Linie, aktiver Menüpunkt, Fokus) */
    --meesenburg-highlight: #1b88ff;
}

/* Dark-Theme Marken-Variablen */
.mud-theme-dark {
    --meesenburg-primary: #3a5299;
    --meesenburg-primary-light: #5b7cc5;
    --meesenburg-accent: #f05a2a;
    --meesenburg-accent-hover: #ff6b3d;
    --meesenburg-bg: #0f1420;
    --meesenburg-bg-secondary: #161b2e;
    --meesenburg-text: #e8eaf0;
    --meesenburg-text-secondary: #9ba3b5;
}

html, body {
    font-family: var(--meesenburg-font-body);
}

/* Überschriften stets in der Marken-Schrift */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--meesenburg-font-heading);
}


/* Job-/Werke-Kacheln: sanfter Hover im Corporate Look */
.mee-tile {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border-top: 3px solid var(--meesenburg-primary);
}

.mee-tile:hover {
    box-shadow: var(--meesenburg-shadow-lg);
    transform: translateY(-2px);
}

/* Akzent-Button (CTA) */
.mee-cta.mud-button-filled {
    background-color: var(--meesenburg-accent);
    color: #ffffff;
}

.mee-cta.mud-button-filled:hover {
    background-color: var(--meesenburg-accent-hover);
}

/* dezente Trennlinie für Kachel-Vorschau */
.mee-preview-line {
    font-size: 0.78rem;
    line-height: 1.35;
}

.mee-brand-accent {
    color: var(--meesenburg-accent);
}


/* =====================================================================
   LAYOUT: AppBar, Marke, Drawer, Profilmenü
   ===================================================================== */

/* Logo-Komponente */
.mee-logo-img { display:block; }
.mee-logo-fluid { max-width:100%; max-height:100%; width:auto; height:auto; }
.mee-logo { max-height:124px; max-width:100%; width:auto; height:auto; display:block; } /* Startseite */

/* AppBar: schlank, mit Akzentlinie in Markenorange */
.mee-appbar { box-shadow: inset 0 -2px 0 var(--meesenburg-highlight) !important; }
.mud-theme-dark .mee-appbar,
.mee-appbar.mud-appbar { backdrop-filter: saturate(1.2); }

.mee-brand {
    display:flex; align-items:center; gap:.85rem;
    margin-left:.5rem; color:inherit; text-decoration:none;
    height:100%;
}
.mee-brand-logo { height:30px; width:auto; }
.mee-brand-divider { width:1px; height:24px; background:currentColor; opacity:.35; }
.mee-brand-title {
    font-family: var(--meesenburg-font-heading);
    font-size:1.05rem; font-weight:500; letter-spacing:.3px; white-space:nowrap; opacity:.95;
}
@media (max-width: 600px) { .mee-brand-divider, .mee-brand-title { display:none; } }

/* Inaktiver Umschalt-Button: dezentes Grau, beim Hover heller */
.mee-btn-inactive { color: var(--mud-palette-text-secondary) !important; }
.mee-btn-inactive:hover { color: var(--mud-palette-text-primary) !important; }

/* Profil-Button in der AppBar */
.mee-profile-btn {
    display:flex; align-items:center; gap:.5rem;
    margin-left:.25rem; padding:4px 6px 4px 12px;
    background:transparent; border:1px solid transparent; border-radius:999px;
    color:inherit; font:inherit; cursor:pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.mee-profile-btn:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.20); }
.mee-profile-btn:focus-visible { outline:2px solid var(--meesenburg-highlight); outline-offset:2px; }
.mee-profile-name { font-size:.875rem; font-weight:500; }
.mee-avatar-initials { background:rgba(255,255,255,.18) !important; color:#fff !important; font-size:.8rem !important; font-weight:600; }

.mee-profile-popover { min-width:280px; }
.mee-profile-head { display:flex; align-items:center; gap:.85rem; padding:1rem 1rem .85rem; }
.mee-profile-head-text { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.mee-profile-head-text span { font-size:.8rem; color:var(--mud-palette-text-secondary);
                              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Drawer / Navigation */
.mee-drawer { border-right:1px solid rgba(255,255,255,.06); }
.mee-nav { display:flex; flex-direction:column; height:100%; padding-top:.5rem; }
.mee-nav-menu { flex:1; overflow-y:auto; }
.mee-nav-section {
    padding:1rem 1.25rem .35rem; font-size:.7rem; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; opacity:.55;
}

/* Menütext beim Auf-/Zuklappen nicht umbrechen */
.mee-drawer .mud-nav-link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Eingeklappte Navigation: nur Icons ---------- */
.mee-nav-mini .mud-nav-link {
    margin: 2px 8px;
    padding: 10px 0 !important;
    justify-content: center;
}
.mee-nav-mini .mud-nav-link-text { display: none; }
.mee-nav-mini .mud-nav-link-icon { margin: 0 !important; }

/* Aktiver Eintrag: kein Balken links, nur Fläche und farbiges Icon */
.mee-nav-mini .mud-nav-link.active { box-shadow: none; }

/* Trenner zwischen den Bereichen statt Überschriften */
.mee-nav-mini .mee-nav-sep {
    height: 1px; margin: 8px 14px;
    background: currentColor; opacity: .15;
}

.mee-drawer .mud-nav-link { margin:1px 8px; border-radius:6px; }
.mee-drawer .mud-nav-link:hover { background:rgba(255,255,255,.08); }
.mee-drawer .mud-nav-link.active {
    background:rgba(255,255,255,.12) !important;
    box-shadow: inset 3px 0 0 var(--meesenburg-highlight);
    color: var(--mud-palette-drawer-text) !important;
    font-weight:500;
}
.mee-drawer .mud-nav-link.active .mud-nav-link-icon { color:var(--meesenburg-highlight) !important; }
.mee-nav-footer {
    display:flex; flex-direction:column; gap:2px; padding:.85rem 1.25rem;
    font-size:.7rem; opacity:.55; border-top:1px solid rgba(255,255,255,.10);
}

/* Hauptbereich */
.mee-main { background: var(--mud-palette-background-gray); min-height:100vh; }

/* =====================================================================
   SEITENRAHMEN (MeePage, MeeKpi, MeeEmptyState) – Stil der Bestandsübersicht
   ===================================================================== */
.mee-page { display:flex; flex-direction:column; }

.mee-page-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:48px; }
.mee-page-heading { display:flex; align-items:center; gap:.75rem; min-width:0; }
.mee-page-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:8px; flex-shrink:0;
    background: var(--meesenburg-primary-lighter); color: var(--meesenburg-primary);
}
.mud-theme-dark .mee-page-icon { background: rgba(91,124,197,.18); color: var(--meesenburg-primary-light); }
.mee-page-titles { min-width:0; }
.mee-page-title {
    margin:0; font-family:var(--meesenburg-font-heading); font-size:1.3rem; font-weight:500; line-height:1.2;
    color: var(--mud-palette-text-primary);
}
.mee-page-subtitle { font-size:.83rem; color:var(--mud-palette-text-secondary); margin-top:2px; }
.mee-page-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.mee-page-stamp { font-size:.75rem; color:var(--mud-palette-text-secondary); }
.mee-page-progress { margin:.5rem 0 .75rem; }
.mee-invisible { visibility:hidden; }

/* Status-Kacheln */
.mee-kpis { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.mee-kpi {
    position:relative; display:flex; align-items:baseline; gap:8px;
    padding:8px 16px 8px 18px; overflow:hidden;
    background:var(--mud-palette-surface); color:inherit; font:inherit;
    border:1px solid var(--mud-palette-lines-default); border-radius:8px;
}
.mee-kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--mee-kpi-color); }
.mee-kpi-clickable { cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.mee-kpi-clickable:hover { border-color:var(--mud-palette-primary); }
.mee-kpi-clickable:focus-visible { outline:2px solid var(--mud-palette-primary); outline-offset:2px; }
.mee-kpi-active { border-color:var(--mud-palette-primary); box-shadow:inset 0 0 0 1px var(--mud-palette-primary); }
.mee-kpi-value { font-size:1.2rem; font-weight:600; font-variant-numeric:tabular-nums; }
.mee-kpi-label { font-size:.8rem; color:var(--mud-palette-text-secondary); }

/* Toolbar */
.mee-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.mee-toolbar .mud-input-control { margin-top:0 !important; flex:0 1 auto; }
.mee-search { width:320px; max-width:100%; }
.mee-spacer { flex:1; }

/* Tabellen */
.mee-table.mud-table-outlined { background:var(--mud-palette-surface); }
.mee-table .mud-table-head .mud-table-cell {
    font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
    color:var(--mud-palette-text-secondary); background:var(--mud-palette-surface);
}
.mee-num { text-align:right !important; font-variant-numeric:tabular-nums; white-space:nowrap; }
/*.mee-muted { color:var(--mud-palette-text-disabled); }*/
.mee-muted { color: var(--mud-palette-text-secondary); }

/* Leerzustand */
.mee-empty {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:3rem 1rem; background:var(--mud-palette-surface);
    border:1px dashed var(--mud-palette-lines-inputs); border-radius:8px;
}
.mee-empty-icon { font-size:2.5rem !important; color:var(--mud-palette-text-disabled); margin-bottom:.5rem; }
.mee-empty-title { font-family:var(--meesenburg-font-heading); font-weight:500; font-size:1rem; }
.mee-empty-text { font-size:.85rem; color:var(--mud-palette-text-secondary); max-width:420px; margin-top:.25rem; }

/* Sanfter Übergang beim Wechsel Hell/Dunkel */
@media (prefers-reduced-motion: no-preference) {
    .mud-layout, .mud-appbar, .mud-drawer, .mud-paper, .mee-kpi, .mee-main {
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }
}