/* Personalisierung (siehe UserPrefRest/applyUserPrefs()) - Variablen mit den bisherigen
   Werten als Default, damit ein Benutzer ohne eigene Einstellungen exakt das bisherige
   Erscheinungsbild sieht. */
:root {
    --mh-list-font-size: 0.85rem;
    --mh-edit-font-size: 1rem;
    --mh-list-bg: #ffffff;
    --mh-edit-bg: #ffffff;
}
body {
    background-color: #eceff1;
}
/* 3D-Logo-Bildwelt (marketing/bildwelt) als Hintergrund fuer Login- und Startseite - rechts
   das Logo-Rendering, links ein dunkler Verlauf fuer genug Textkontrast unabhaengig von der
   Fensterbreite (siehe #home-container/#login-container weiter unten). */
.mh-bildwelt-bg {
    background-image: linear-gradient(90deg, rgba(10, 10, 12, 0.75) 0%, rgba(10, 10, 12, 0.35) 40%, rgba(10, 10, 12, 0) 65%),
        url('/marketing/bildwelt/05-makohub-3d-anthrazit.jpg');
    background-size: cover, cover;
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
}
#login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#login-card {
    width: 100%;
    max-width: 380px;
}
/* Als fixe Fusszeile statt direkt unter der (horizontal zentrierten) Login-Karte platziert -
   sonst landet der Text je nach Fensterbreite ueber dem rechts positionierten 3D-Logo im
   Hintergrund und ueberdeckt es. */
#login-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 24px;
    text-align: center;
    background: rgba(6, 10, 15, 0.55);
}
#login-footer a {
    color: #fff;
    opacity: 0.85;
    text-decoration: none;
    margin: 0 14px;
    font-size: 0.9rem;
}
#login-footer a:hover {
    opacity: 1;
    text-decoration: underline;
}
#home-container {
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40px;
}
#home-container h5,
#home-container p {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    max-width: 480px;
}
nav.brand-nav {
    background-color: #0a3d62;
}
/* Materialize positioniert .brand-logo standardmaessig absolut, was mit dem
   sidenav-trigger ueberlappt. Erzwinge normalen Fluss per Flexbox. */
nav.brand-nav .nav-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
}
nav.brand-nav .nav-wrapper .brand-logo {
    position: static;
    transform: none;
    font-size: 1.6rem;
}
nav.brand-nav .nav-wrapper .sidenav-trigger {
    margin: 0;
}
nav.brand-nav .nav-wrapper ul.right {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.sidenav li > a > i.material-icons {
    margin-right: 20px;
}
/* Aufklappbare Menuegruppe (z.B. "Customizing") - Titel in einer Flucht mit den anderen
   Top-Level-Eintraegen (gleiches Icon-Layout), Klick klappt die Untereintraege auf/zu. */
.mh-menu-group-toggle {
    display: flex !important;
    align-items: center;
}
.mh-menu-chevron {
    margin-left: auto !important;
    margin-right: 0 !important;
    color: #90a4ae;
}
ul.mh-menu-subgroup {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.mh-menu-subgroup li a {
    padding-left: 48px;
    font-size: 0.92rem;
}
table.dataTable {
    font-size: var(--mh-list-font-size);
    background-color: var(--mh-list-bg);
}
.dialog-body {
    background-color: var(--mh-edit-bg);
}
.dialog-body input, .dialog-body textarea, .dialog-body select, .dialog-body .select-wrapper input {
    font-size: var(--mh-edit-font-size);
}
/* Einzelne Zahlen immer rechtsbuendig - in Listen (via .dt-right) und in der Detailpflege. */
td.dt-right, th.dt-right {
    text-align: right !important;
}
input[type="number"] {
    text-align: right;
}
.jsPanel-content {
    overflow: auto;
    padding: 0 !important;
}
/* iframe ist ein "replaced inline element" - ohne display:block bleibt darunter die
   Basisliniel-Luecke eines Inline-Elements (~4-6px), wodurch .jsPanel-content minimal
   ueberläuft und selbst bei voellig leerem/kurzem Seiteninhalt dauerhaft einen Scrollbalken
   zeigt. Gilt global, da jede ui/*.php-Seite per <iframe style="width:100%;height:100%">
   in ein jsPanel eingebettet wird (siehe index.php/help.php/cluster.php). */
.jsPanel-content iframe {
    display: block;
}
.dialog-body {
    padding: 8px 20px 10px;
}
.dialog-actions {
    padding: 0 20px 10px;
}
/* Materialize's Default-.row{margin-bottom:20px} ist fuer die kompakten Pflegedialoge zu
   grosszuegig - global auf weniger vertikalen Platz pro Zeile reduzieren. */
.dialog-body .row {
    margin-bottom: 2px;
}
.dialog-body .input-field {
    margin-top: 0.35rem;
    margin-bottom: 0;
}
/* Die aufgeklappte Optionsliste eines Materialize-Selects (.dropdown-content, per JS an
   <body> angehaengt, daher nicht auf .dialog-body scopebar) hat als Default min-height:50px
   und 14px vertikales Padding je Option - bei Feldern mit mehreren Optionen (Status, Cluster,
   Marktpartner, ...) wirkte die aufgeklappte Liste dadurch unnoetig lang/weit auseinander-
   gezogen. Die Select-Box selbst (Feldgroesse/Zeilenabstand im Formular) ist bewusst NICHT
   angefasst - nur die Liste der Optionen beim Aufklappen. */
ul.select-dropdown li {
    min-height: 32px;
}
ul.select-dropdown li > span {
    padding: 6px 16px;
    line-height: 1.3rem;
}
/* Lange Feld-Labels (z.B. "Ordner fuer versendete E-Mails (leer = Graph-Standard ...)")
   nicht umbrechen/ueberlaufen lassen, sondern mit Ellipsis abschneiden - den vollen Text
   liefert CrudDialog.openEditPanel() als title-Attribut per Mouseover nach. Gilt fuer alle
   Editfelder gleichermassen (keine Einzelfall-Anpassung je Formular noetig). */
.dialog-body .input-field > label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dialog-body h6 {
    margin: 10px 0 6px;
}
.dialog-body p {
    margin: 4px 0;
}
/* Materialize-Tableiste kompakter (Default ~48px) - spart Platz in Dialogen mit mehreren Reitern. */
.dialog-body ul.tabs {
    height: 38px;
}
/* Materialize's Tab-Default ist Rot (Indikator-Linie + aktiver/hover-Text) - durchgaengig
   auf ein dunkleres Grau umgestellt, passend zum Rest der (blaugrauen) MAKOHub-Palette. */
ul.tabs .tab a {
    color: #78909c;
}
ul.tabs .tab a:hover,
ul.tabs .tab a.active {
    color: #37474f;
}
ul.tabs .tab a:focus,
ul.tabs .tab a:focus.active {
    background-color: rgba(69, 90, 100, 0.08);
}
ul.tabs .indicator {
    background-color: #455a64;
}
/* Kompaktes MAKOHub-Feld<->Excel-Spalte-Mapping (caseupload.php): normale Tabellenzeile je
   Feld (label | select), aber als DataTable(dom:'t', compact) gerendert statt als <table
   class="striped"> - die 4px-Zellenpolsterung von .compact greift, zusaetzlich wird hier noch
   die Materialize-Select-Box selbst (sonst ~3rem hoch) auf Zeilenhoehe reduziert. */
.mh-mapping-table td {
    vertical-align: middle;
}
.mh-mapping-table .select-wrapper {
    margin: 0;
}
.mh-mapping-table .select-wrapper input.select-dropdown {
    height: 26px;
    line-height: 26px;
    font-size: 0.82rem;
    margin: 0;
    border-bottom: none;
}
.dialog-body ul.tabs .tab {
    height: 38px;
    line-height: 38px;
}
.dialog-body ul.tabs .tab a {
    font-size: 0.82rem;
}
.status-offen { color: #2e7d32; font-weight: 600; }
.status-geschlossen { color: #616161; }
.status-storno { color: #c62828; text-decoration: line-through; }

/* 3D-Rahmen fuer alle jsPanel-Fenster (Liste + Pflegedialoge) */
.jsPanel {
    border: 1px solid #8d97a1;
    border-radius: 6px;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.65),
        inset -1px -1px 0 rgba(0,0,0,0.2),
        0 10px 28px rgba(0,0,0,0.4);
}
.jsPanel .jsPanel-headerbar {
    border-bottom: 1px solid rgba(0,0,0,0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.jsPanel.jsPanel-active {
    border-color: #0a3d62;
}

/* Ausgewaehlte Tabellenzeile */
table.dataTable tbody tr {
    cursor: pointer;
}
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td {
    background-color: #c8e6ff !important;
}

/* Seitenkopf: Ueberschrift + "Neu"-Button nebeneinander */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.page-header h5 { margin: 0; }

/* DataTables-Toolbar: Zeilen-Auswahl + Icon-Buttons links, kompaktes Suchfeld rechts
   (angelehnt an die DataTables Buttons-Extension: Spalten/Kopieren/Filter-zuruecksetzen/Filtern) */
div.dt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
div.dt-toolbar-left {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
div.dt-toolbar-left .dataTables_length select {
    display: inline-block;
    width: auto;
    height: 24px;
    padding: 0 20px 0 6px;
    margin: 0 0 0 4px;
    font-size: 0.8rem;
}
div.dt-toolbar-left .dataTables_length label {
    font-size: 0.78rem;
    color: #607d8b;
    margin: 0;
}
.dt-buttons {
    display: flex;
    gap: 3px;
}
/* Klassen-Selektor ohne Tag-Einschraenkung: DataTables rendert Buttons je nach Version/
   Konfiguration als <button>, nicht als <a> - eine auf "a." eingeschraenkte Regel traf sie
   gar nicht, wodurch nur DataTables' eigenes (groesseres) Default-Styling griff. */
.dt-button.dt-icon-btn {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background: #f5f6f7;
    color: #455a64;
}
.dt-button.dt-icon-btn:hover {
    background: #e3e7ea;
}
.dt-button.dt-icon-btn-primary {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}
.dt-button.dt-icon-btn-primary:hover {
    background: #256427;
}
.dt-button.dt-icon-btn .material-icons {
    font-size: 17px;
}
.dt-button.dt-icon-btn .fad {
    font-size: 15px;
}
.dt-search-box {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid #9e9e9e;
    padding: 2px 4px;
}
.dt-search-box .material-icons.tiny {
    font-size: 16px;
    color: #78909c;
}
.dt-search-box input.dt-search-input {
    border: none;
    outline: none;
    width: 130px;
    font-size: 0.85rem;
    height: 22px;
    box-shadow: none;
}
/* Materialize legt auf JEDEN input[type=text]:focus einen gruenen Fokus-Rahmen/Schatten,
   obwohl dieses Suchfeld kein .input-field ist - sonst erscheint beim Klick eine
   zusaetzliche gruene Linie unter dem Suchfeld. */
.dt-search-box input.dt-search-input:focus,
.dt-search-box input.dt-search-input:focus:not([readonly]) {
    border-bottom: none !important;
    box-shadow: none !important;
}
/* DataTables' eigenes Default-Suchfeld (.dataTables_filter, z.B. Kommunikations-Tab im
   Fall-Dialog per dom:'ft') hat einen grauen Kasten-Rahmen mit abgerundeten Ecken - passte
   nicht zum sonst durchgaengig reinen Materialize-Unterstrich-Look (.dt-search-box). Auf
   dasselbe schlichte Erscheinungsbild umgestellt. */
.dataTables_filter input {
    border: none !important;
    border-bottom: 1px solid #9e9e9e !important;
    border-radius: 0 !important;
    padding: 2px 4px !important;
    margin-left: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.85rem;
}
.dataTables_filter input:focus {
    border-bottom: 1px solid #9e9e9e !important;
    box-shadow: none !important;
}
div.dt-toolbar-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #607d8b;
    margin-top: 6px;
}
/* Sammelmenue (z.B. Spaltenauswahl) der Buttons-Extension */
div.dt-button-collection {
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    background: #fff;
    padding: 4px 0;
}

/* TinyMCE WYSIWYG - der Editor bekommt selbst seinen Rahmen, hier nur Abstand */
.tox-tinymce { margin-top: 4px; }

/* Aenderungs-/Verlaufstabellen im Case-Dialog */
table.striped tbody tr:nth-child(odd) {
    background-color: #f5f6f7;
}