/* ==========================================================================
   HAKO Premium - Feinschliff fuer das Backend

   Diese Datei wird als LETZTES Stylesheet geladen und liegt damit hinter
   site.css, siteColorPalette.css und HskProject.css. Sie braucht deshalb
   kaum !important: bei gleicher Spezifitaet gewinnt sie ohnehin.

   Sie aendert keine Struktur, nur Flaechen, Linien, Abstaende und Typografie
   der Bausteine, die im Backend ueberall vorkommen: .box als Karte, das
   Kendo-Grid, TabStrip, Formulare, Badges und Fenster. Alles haengt an
   body.backend-shell, damit die oeffentlichen Seiten unberuehrt bleiben.
   ========================================================================== */

body.backend-shell {
    --premium-radius: 10px;
    --premium-radius-sm: 6px;
    --premium-line: #e6e9f0;
    --premium-line-soft: #eef1f6;
    --premium-shadow: 0 1px 2px rgba(16, 30, 54, 0.04), 0 8px 24px rgba(16, 30, 54, 0.06);
    --premium-row-hover: rgba(23, 66, 140, 0.045);
}

/* --------------------------------------------------------------------------
   Seitenrhythmus
   -------------------------------------------------------------------------- */
body.backend-shell .page {
    padding-block: 0.25rem 1.5rem;
}

/* Die Abstandshalter werden ruhiger: 25px sind zwischen Karten zu viel */
body.backend-shell .page .element-separator {
    height: 1.15rem;
}

body.backend-shell .page .small-element-separator {
    height: 0.7rem;
}

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */
/* Kein overflow:hidden - sonst schneidet die Karte Filterfenster und Popups ab,
   die absolut positioniert aus ihr herausragen. */
body.backend-shell .page .box,
body.backend-shell .page .controlbox,
body.backend-shell .page .smallbox {
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius);
    box-shadow: var(--premium-shadow);
}

    body.backend-shell .page .box > :first-child,
    body.backend-shell .page .controlbox > :first-child {
        border-start-start-radius: var(--premium-radius);
        border-start-end-radius: var(--premium-radius);
    }

    body.backend-shell .page .box > :last-child,
    body.backend-shell .page .controlbox > :last-child {
        border-end-start-radius: var(--premium-radius);
        border-end-end-radius: var(--premium-radius);
    }

body.backend-shell .page .box-header,
body.backend-shell .page .controlbox > .box-header {
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--premium-line-soft);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hako-ink, #242424);
    background: transparent;
}

    /* leere Kopfzeilen (viele Screens setzen ein leeres div) nehmen keinen Platz */
    body.backend-shell .page .box-header:empty {
        display: none;
    }

body.backend-shell .page .box-body {
    padding: 1.15rem;
}

    body.backend-shell .page .box-body.no-padding {
        padding: 0;
    }

body.backend-shell .page .box-footer {
    padding: 0.75rem 1.15rem;
    border-top: 1px solid var(--premium-line-soft);
    background: transparent;
}

    body.backend-shell .page .box-footer:empty {
        display: none;
    }

/* --------------------------------------------------------------------------
   Kendo-Grid: ruhige Linien, klare Kopfzeile, angenehme Zeilenhoehe
   -------------------------------------------------------------------------- */
body.backend-shell .page .k-grid {
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius);
    overflow: hidden;
    font-size: 0.875rem;
}

body.backend-shell .page .k-grid .k-grid-header {
    border-bottom: 1px solid var(--premium-line);
    background: #fbfcfe;
}

body.backend-shell .page .k-grid .k-grid-header .k-header {
    border-inline-start-color: transparent;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hako-text-2, #526177);
    padding-block: 0.7rem;
}

body.backend-shell .page .k-grid td {
    border-inline-start-color: transparent;
    border-block-end: 1px solid var(--premium-line-soft);
    padding-block: 0.6rem;
    vertical-align: middle;
}

body.backend-shell .page .k-grid tr:hover td,
body.backend-shell .page .k-grid tr.k-hover td {
    background-color: var(--premium-row-hover);
}

body.backend-shell .page .k-grid tr.k-selected td {
    background-color: var(--hako-blue-tint, rgba(23, 66, 140, 0.08));
}

body.backend-shell .page .k-grid .k-grid-pager {
    border-top: 1px solid var(--premium-line);
    background: #fbfcfe;
    padding-block: 0.45rem;
}

/* Zahlenspalten lesen sich mit gleichbreiten Ziffern besser */
body.backend-shell .page .k-grid td {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   TabStrip: der aktive Reiter traegt die Marke
   -------------------------------------------------------------------------- */
body.backend-shell .k-tabstrip > .k-tabstrip-items-wrapper .k-item {
    border: 0;
    padding-inline: 1.05rem;
    font-weight: 500;
    color: var(--hako-text-2, #526177);
}

body.backend-shell .k-tabstrip > .k-tabstrip-items-wrapper .k-item:hover {
    color: var(--hako-blue, #17428c);
    background: transparent;
}

body.backend-shell .k-tabstrip > .k-tabstrip-items-wrapper .k-item.k-active {
    color: var(--hako-blue, #17428c);
    font-weight: 600;
    background: transparent;
    border-bottom: 3px solid var(--hako-gold, #d4a95e);
}

body.backend-shell .k-tabstrip > .k-tabstrip-items-wrapper {
    border-bottom: 1px solid var(--premium-line);
}

/* --------------------------------------------------------------------------
   Formulare und Eingabefelder
   -------------------------------------------------------------------------- */
body.backend-shell .page .k-form .k-label,
body.backend-shell .page .k-form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hako-text-2, #526177);
}

body.backend-shell .page .k-input,
body.backend-shell .page .k-picker,
body.backend-shell .page input.form-control,
body.backend-shell .page select.form-control,
body.backend-shell .page textarea.form-control {
    border-radius: var(--premium-radius-sm);
    border-color: #d7dce6;
    background-color: #ffffff;
}

    body.backend-shell .page .k-input:focus-within,
    body.backend-shell .page .k-picker:focus-within,
    body.backend-shell .page input.form-control:focus,
    body.backend-shell .page select.form-control:focus,
    body.backend-shell .page textarea.form-control:focus {
        border-color: var(--hako-blue, #17428c);
        box-shadow: 0 0 0 3px rgba(23, 66, 140, 0.12);
        outline: none;
    }

body.backend-shell .page .k-input:disabled,
body.backend-shell .page .k-input.k-disabled {
    background-color: #f7f8fb;
}

/* --------------------------------------------------------------------------
   Statuschips
   -------------------------------------------------------------------------- */
body.backend-shell .page .k-badge {
    border-radius: 999px;
    padding-inline: 0.6rem;
    padding-block: 0.16rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 0;
}

/* --------------------------------------------------------------------------
   Umschalter (z. B. Fondsjahr) als zusammenhaengende Gruppe
   -------------------------------------------------------------------------- */
body.backend-shell .page .k-button-group {
    border: 1px solid var(--premium-line);
    border-radius: 999px;
    padding: 0.15rem;
    background: #ffffff;
    box-shadow: var(--premium-shadow);
}

    body.backend-shell .page .k-button-group > .k-button {
        border: 0;
        border-radius: 999px;
        padding-inline: 0.95rem;
        font-weight: 600;
        color: var(--hako-text-2, #526177);
        background: transparent;
    }

    body.backend-shell .page .k-button-group > .k-button.k-selected,
    body.backend-shell .page .k-button-group > .k-button[aria-pressed="true"] {
        color: #ffffff;
        background: var(--hako-blue, #17428c);
    }

/* --------------------------------------------------------------------------
   Fenster
   -------------------------------------------------------------------------- */
body.backend-shell .k-window {
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius);
    box-shadow: 0 24px 60px rgba(16, 30, 54, 0.18);
    overflow: hidden;
}

body.backend-shell .k-window .k-window-titlebar {
    border-bottom: 1px solid var(--premium-line-soft);
    background: #fbfcfe;
    padding-block: 0.75rem;
    font-weight: 600;
    color: var(--hako-ink, #242424);
}

/* --------------------------------------------------------------------------
   Feinheiten
   -------------------------------------------------------------------------- */
body.backend-shell .page .k-grid .k-command-cell {
    white-space: nowrap;
}

/* Buttons behalten ihre Farben aus HskProject.css, bekommen aber die
   gemeinsame Rundung und Hoehe */
body.backend-shell .page .btn,
body.backend-shell .k-window .btn {
    border-radius: var(--premium-radius-sm);
    min-height: 2.35rem;
}

@media (prefers-reduced-motion: no-preference) {
    body.backend-shell .page .k-grid tr td {
        transition: background-color 0.12s ease;
    }
}

/* --------------------------------------------------------------------------
   Filterkacheln: Zahl, Bezeichnung, Symbol. Ersetzt die AdminLTE-Kaesten
   (.small-box.bg-aqua mit Ionicons), die im Portal ohne Symbol blieben.
   -------------------------------------------------------------------------- */
body.backend-shell .filter-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

body.backend-shell .filter-tile {
    display: grid;
    grid-template-areas:
        "icon value"
        "icon label";
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius);
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

    body.backend-shell .filter-tile:hover {
        border-color: rgba(23, 66, 140, 0.35);
        box-shadow: 0 4px 14px rgba(16, 30, 54, 0.08);
    }

    body.backend-shell .filter-tile:focus-visible {
        outline: 2px solid var(--hako-petrol, #20777c);
        outline-offset: 2px;
    }

    body.backend-shell .filter-tile:active {
        transform: translateY(1px);
    }

    body.backend-shell .filter-tile.is-active {
        border-color: var(--hako-blue, #17428c);
        box-shadow: inset 0 0 0 1px var(--hako-blue, #17428c);
    }

body.backend-shell .filter-tile__icon {
    grid-area: icon;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--hako-blue-tint, rgba(23, 66, 140, 0.08));
    color: var(--hako-blue, #17428c);
    font-size: 0.95rem;
}

body.backend-shell .filter-tile__value {
    grid-area: value;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--hako-ink, #242424);
}

body.backend-shell .filter-tile__label {
    grid-area: label;
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--hako-text-2, #526177);
}

/* --------------------------------------------------------------------------
   Summenkacheln: reine Anzeige, nicht klickbar. Gleiche Sprache wie die
   Filterkacheln, aber ohne Zeiger und Hover.
   -------------------------------------------------------------------------- */
body.backend-shell .summary-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin-block: 0.4rem 0.9rem;
}

body.backend-shell .summary-tile {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius);
    background: #ffffff;
}

body.backend-shell .summary-tile__value {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--hako-blue, #17428c);
}

body.backend-shell .summary-tile__label {
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--hako-text-2, #526177);
}

/* --------------------------------------------------------------------------
   AdminLTE-Reste: Kennzahlenkaesten, die noch nicht auf .summary-tile oder
   .filter-tile umgestellt sind, bekommen hier wenigstens dieselbe Optik.

   Die Symbole darin sind Ionicons - diese Schrift wird im Portal nirgends
   geladen, das Zeichen bleibt also leer und nimmt nur Platz weg. Die
   Fusszeile enthaelt ueberall nur einen Pfeil ohne Ziel.
   -------------------------------------------------------------------------- */
body.backend-shell .small-box {
    position: relative;
    display: block;
    padding: 0.85rem 1rem;
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius);
    background: #ffffff;
    color: var(--hako-ink, #242424);
}

body.backend-shell .small-box.bg-aqua,
body.backend-shell .small-box.bg-green,
body.backend-shell .small-box.bg-yellow,
body.backend-shell .small-box.bg-red,
body.backend-shell .small-box.bg-blue {
    background: #ffffff;
    color: var(--hako-ink, #242424);
}

body.backend-shell .small-box .inner {
    padding: 0;
    text-align: left;
    display: grid;
    gap: 0.15rem;
}

body.backend-shell .small-box .inner p {
    margin: 0;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--hako-text-2, #526177);
}

body.backend-shell .small-box .inner h3 {
    margin: 0;
    text-align: left;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--hako-blue, #17428c);
}

body.backend-shell .small-box > .icon,
body.backend-shell .small-box .small-box-footer:not([href]) {
    display: none;
}

body.backend-shell .small-box .small-box-footer[href] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hako-blue, #17428c);
    text-decoration: none;
}

/* Leere Ionicon-Platzhalter im uebrigen Backend */
body.backend-shell i[class^="ion "],
body.backend-shell i[class*=" ion "],
body.backend-shell i[class*="ion-"]:not([class*="fa-"]) {
    display: none;
}