/* Gemeinsame Klassen der handgebauten Masken unter Views/.
   Vorher standen dieselben Angaben als style="..." in jeder Maske - eine Aenderung der
   Kachelkante oder einer Diagrammhoehe hiess, zwei Dutzend Dateien anzufassen.
   Eingebunden je Maske ueber AssetHelper.Versioned("~/Content/views-common.css"). */

/* ---- Kennzahl-Kachel (Dashboards, Nachkalkulation, Konten) ----
   Die Bootstrap-Karte mit farbiger Kante (border-info, border-success ...); die Kante ist
   doppelt so breit wie die gewoehnliche, damit die Farbe als Ampel lesbar bleibt. */
.card.kpi-card {
    border-width: 2px;
}

/* ---- Diagrammflaeche ----
   Chart.js rechnet mit maintainAspectRatio:false die Groesse aus dem Elternelement - es braucht
   deshalb eine feste Hoehe und position:relative. */
.chart-box {
    position: relative;
}

.chart-box.chart-h-200 { height: 200px; }
.chart-box.chart-h-240 { height: 240px; }
.chart-box.chart-h-260 { height: 260px; }
.chart-box.chart-h-280 { height: 280px; }
.chart-box.chart-h-300 { height: 300px; }
.chart-box.chart-h-320 { height: 320px; }
.chart-box.chart-h-360 { height: 360px; }
.chart-box.chart-h-400 { height: 400px; }

/* ---- Abschnitt Dashboards ---- */

/* Titelblock im Kopf der Auswertungen (Ueberschrift, Untertitel, Filterzusammenfassung):
   darf schrumpfen, damit die Kopf-Filter rechts nicht unter den Titel rutschen. */
.dashboard-title {
    min-width: 0;
}

/* Auswahl im Kopf einer einzelnen Karte (Rasterung der Zeitachse, Gruppierung). */
.dashboard-card-select {
    min-width: 150px;
}

/* ---- Abschnitt Nachkalkulation ---- */
/* Nachkalkulation (Projekt/Fahrzeug, je mit Detailseite), Bauleiter-Vergleich, Kostensaetze. */

/* Auswahl im Kopf einer Karte (Rasterung der Zeitachse). */
.costing-card-select {
    min-width: 150px;
}

/* Listen unter den Diagrammen behalten eine feste Hoehe. gridEnhanced.init (ListToolbar) passt
   eine Liste sonst in den Rest des Bildschirms ein - weit unten auf einer langen Seite blieben ihr
   so nur 200px. Das !important schlaegt die Inline-Hoehe, die resizeGridWrapper setzt. */
.grid-enhanced-wrapper.costing-list-h-400 { max-height: 400px !important; }
.grid-enhanced-wrapper.costing-list-h-460 { max-height: 460px !important; }
.grid-enhanced-wrapper.costing-list-h-520 { max-height: 520px !important; }

/* In der Kartenansicht am Handy rollt die Seite, nicht die Liste. */
@media only screen and (max-width: 767.98px) {
    .grid-enhanced-wrapper.costing-list-h-400,
    .grid-enhanced-wrapper.costing-list-h-460,
    .grid-enhanced-wrapper.costing-list-h-520 {
        max-height: none !important;
    }
}

/* Reiter ueber einer Liste (Nachkalkulation: Projekte / Ohne Kostensatz; Kostensaetze:
   Mitarbeiter / Fahrzeuge / Material) - schlicht unterstrichen in Hausblau, ohne Bootstrap-Kasten. */
.costing-tabs {
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 12px;
}

    .costing-tabs .nav-link {
        color: var(--hpo-primary, #324E76);
        background: none;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        padding: 8px 2px;
        margin-right: 22px;
    }

        .costing-tabs .nav-link.active {
            font-weight: 600;
            border-bottom-color: var(--hpo-primary, #324E76);
        }

/* Steht das Reiterband im Kartenkopf, sitzt es auf dessen Trennlinie - keine zweite Linie. */
.detail-card-header.costing-tab-header {
    padding: 0 18px;
}

    .detail-card-header.costing-tab-header .costing-tabs {
        border-bottom: 0;
        margin-bottom: -1px;
    }

        .detail-card-header.costing-tab-header .costing-tabs .nav-link {
            padding: 12px 2px;
        }

/* Baumgitter der Detailseiten (CostingTreeRenderer, VehicleCostingTreeRenderer): Gruppenzeile
   zum Auf- und Zuklappen. */
.costing-tree-group {
    cursor: pointer;
    background-color: rgba(var(--hpo-primary-rgb, 50, 78, 118), 0.06);
    font-weight: 600;
}

    .costing-tree-group .costing-tree-caret {
        transition: transform .15s ease;
    }

    .costing-tree-group.collapsed .costing-tree-caret {
        transform: rotate(-90deg);
    }

/* ---- Abschnitt Freigaben / Belege / Personal ---- */

/* Mitarbeiterkonto und Kontenuebersicht: vorzeichenbehaftete Werte (Urlaubsrest, Stunden,
   Differenz) - Guthaben gruen, Belastung rot. Der Hintergrund muss !important sein, damit er
   die Zeilenfarbe von .table-hover ueberschreibt. */
.emp-acct-value {
    font-weight: 600;
}

.emp-acct-pos {
    background-color: #e3f4e7 !important;
    color: #1b6e2c;
}

.emp-acct-neg {
    background-color: #fbe6e6 !important;
    color: #b02a2a;
}

/* Mitarbeiterkonto, "Berechnete Tage": die Liste rollt in sich, statt die Seite zu verlaengern. */
.grid-enhanced-wrapper.emp-grid-h-420 {
    max-height: 420px;
}

/* ---- Abschnitt Planung ---- */

/* Aufklappmenue "Filter" der Planungsmasken (Tagesplanung, Projektplanung,
   Abwesenheitskalender): breit genug fuer die Gruppennamen, bei vielen Projekten rollt es in
   sich statt ueber den Bildschirmrand hinaus. */
.planning-filter-menu {
    min-width: 290px;
    max-height: 70vh;
    overflow: auto;
}

/* Aufklappmenue "Ansichten" (gespeicherte Ansichten) derselben Masken. */
.planning-views-menu {
    min-width: 250px;
}

/* ---- Abschnitt Anmeldung (UserLoginView) ---- */
/* Die Hausfarbe des Mandanten (Kopf der Karte, Anmeldeknopf) steht im <style> der Seite - sie
   kommt aus den Einstellungen. Hier steht nur, was fuer jeden Mandanten gleich ist. */

.login-screen {
    height: 100vh;
}

.login-card {
    width: 100%;
    max-width: 355px;
    margin-right: 0;
}

@media (min-width: 992px) {
    .login-card {
        margin-right: 148px;
    }
}

.detail-card.login-panel {
    background: #f0f1f3;
    border: 1px solid #d5d8dc;
}

.detail-card-header.login-header {
    justify-content: center;
    padding: 24px !important;
    border-radius: 8px 8px 0 0;
}

.detail-card-body.login-body {
    padding: 10px 24px 24px 24px;
}

/* Symbolfeld vor Benutzername und Passwort: alle gleich breit, damit die Felder buendig stehen. */
.login-input-icon {
    width: 30px;
}

.login-version {
    font-size: 13px;
    color: #ced4da;
}

.login-hpo-logo {
    position: fixed;
    right: 20px;
    bottom: 16px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #d5d8dc;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    opacity: 0.9;
    transition: opacity 0.15s ease-in-out;
    z-index: 10;
}

    .login-hpo-logo:hover {
        opacity: 1;
    }

    .login-hpo-logo img {
        height: 32px;
        width: auto;
        display: block;
    }

/* Verweis auf die Mitarbeiter-App: gleiche Zurueckhaltung wie die Versionsangabe darueber - er
   soll dem Anmeldevorgang nicht die Aufmerksamkeit nehmen. */
.login-app-link {
    font-size: 13px;
    color: #ced4da;
    text-decoration: none;
}

    .login-app-link:hover,
    .login-app-link:focus {
        color: #fff;
        text-decoration: underline;
    }