/*
 * Auffrischung der Lizenzverwaltung.
 *
 * Liegt als letztes Stylesheet ueber dem KaiAdmin-Template und ueberschreibt
 * nur, was noetig ist - das Template selbst bleibt unberuehrt, damit ein
 * Update daran nicht an lokalen Aenderungen scheitert.
 *
 * Die Palette ist dieselbe wie in der mobilen App (src/constants/theme.js
 * im Projekt InventarPro-BWK-Fix, Auffrischung in 1.6.21). Beide Produkte
 * gehoeren zusammen und sollten nicht wie zwei fremde Anwendungen aussehen.
 */

:root {
    --pt-primary: #D32F2F;
    --pt-primary-dark: #B0241F;

    --pt-background: #FAF9F8;
    --pt-surface: #FFFFFF;
    --pt-edge: #E4E0DE;
    --pt-edge-soft: #EFEBE9;
    --pt-tint: #F4EFEE;

    /* Drei Stufen, damit Beschriftung, Platzhalter und echter Wert
       unterscheidbar bleiben. */
    --pt-text-strong: #1F1A18;
    --pt-text-muted: #6B6360;
    --pt-text-label: #9A938F;

    /* Semantik eigenstaendig: sonst bedeutet Rot zugleich Marke und Gefahr. */
    --pt-success: #1B7A3D;
    --pt-success-bg: #E4EFE8;
    --pt-warning: #8A6D1F;
    --pt-warning-bg: #F6EBD6;
    --pt-danger: #A03227;
    --pt-danger-bg: #F6E1DF;

    --pt-radius: 12px;
    --pt-radius-sm: 8px;
}

body,
.wrapper .main-panel {
    background: var(--pt-background);
    color: var(--pt-text-strong);
}

/* --- Flaechen ---------------------------------------------------------
 * Karten trennen sich ueber eine Kante, nicht ueber einen Schatten. Die
 * Schatten des Templates verwischen auf hochaufloesenden Bildschirmen zu
 * einem grauen Rand um alles.
 */
.card,
.card.card-round,
.card.card-stats {
    background: var(--pt-surface);
    border: 1px solid var(--pt-edge);
    border-radius: var(--pt-radius);
    box-shadow: none;
}

.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--pt-edge-soft);
    padding: 16px 20px;
}

.card .card-title,
.card .card-header .card-title {
    color: var(--pt-text-strong);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* --- Kennzahlen des Dashboards ---------------------------------------- */
.card-stats .card-category {
    color: var(--pt-text-label);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.card-stats .card-title {
    color: var(--pt-text-strong);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Die Farbtoepfe des Templates auf die Semantik umlegen.
 *
 * Die Selektoren sind absichtlich so lang wie die des Templates
 * (.card-stats .icon-big.icon-primary) - kuerzer verlieren sie, und die
 * Schriftfarbe der Icons ist dort mit !important gesetzt. Sechs Kacheln in
 * sechs Volltonfarben nebeneinander lassen alle gleich laut wirken; hier
 * traegt die Farbe Bedeutung: Markenton fuer Bestaende, Semantik fuer
 * Zustaende. */
.card-stats .icon-big {
    border-radius: var(--pt-radius-sm);
    height: 48px;
    width: 48px;
    line-height: 48px;
    font-size: 1.25rem;
}

.card-stats .bubble-shadow-small {
    box-shadow: none;
}

.card-stats .icon-big.icon-primary,
.card-stats .icon-big.icon-info,
.card-stats .icon-big.icon-secondary {
    background: var(--pt-tint);
}

.card-stats .icon-big.icon-primary i,
.card-stats .icon-big.icon-info i,
.card-stats .icon-big.icon-secondary i {
    color: var(--pt-primary) !important;
}

.card-stats .icon-big.icon-success {
    background: var(--pt-success-bg);
}

.card-stats .icon-big.icon-success i {
    color: var(--pt-success) !important;
}

.card-stats .icon-big.icon-danger {
    background: var(--pt-danger-bg);
}

.card-stats .icon-big.icon-danger i {
    color: var(--pt-danger) !important;
}

.card-stats .icon-big.icon-warning {
    background: var(--pt-warning-bg);
}

.card-stats .icon-big.icon-warning i {
    color: var(--pt-warning) !important;
}

/* Karten nebeneinander sollen gleich hoch sein. Ohne das endet die kuerzere
 * irgendwo auf halber Strecke und die Zeile franst unten aus. */
.row > [class*='col-'] > .card {
    height: calc(100% - 20px);
}

/* --- Tabellen ----------------------------------------------------------
 * Die Kopfzeile des Templates trug einen blaugrauen Balken (#f6f9fc), der
 * neben der warmen Palette wie ein Fremdkoerper aussah. Jetzt traegt sie
 * keine Flaeche, sondern nur die Linie darunter.
 */
.table .thead-light th,
table.dataTable .thead-light th {
    background: transparent;
    border-bottom: 1px solid var(--pt-edge);
}

/* Der Kartenkoerper der Tabellen-Karten: oben buendig an den Kopf, damit
 * nebeneinanderliegende Tabellen auf gleicher Hoehe beginnen. */
.card .card-body.p-0 {
    padding: 0 !important;
}

/* DataTables setzt an seiner Layout-Zeile und an der Tabelle selbst eigene
 * Aussenabstaende (10,5 px bzw. 15 px). Je nachdem, ob ueber der Tabelle
 * Bedienelemente stehen, greifen sie oder fallen zusammen - nebeneinander
 * liegende Karten begannen dadurch auf unterschiedlicher Hoehe. Den Abstand
 * bestimmt hier allein der Innenrand der Karte. */
.card .card-body.p-0 .dt-container .dt-layout-row {
    margin-top: 0;
}

/* Und die Zeile mit der Tabelle bekommt oben 10 px Innenabstand, sobald
 * keine Bedienzeile darueber steht - was die beiden Karten erneut um
 * genau diese 10 px gegeneinander verschob. */
.card .card-body.p-0 .dt-container .dt-layout-row.dt-layout-table {
    padding-top: 0;
    padding-bottom: 0;
}

.card .card-body.p-0 table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.card .card-body.p-0 > .table-responsive > table > thead > tr > th,
.card .card-body.p-0 > .table-responsive > table > tbody > tr > td {
    padding-left: 20px;
    padding-right: 20px;
}

/* Bedienelemente am Fuss der Karte: abgesetzt, aber nicht laut. */
.card .card-body.p-0 .dt-layout-row:last-child {
    border-top: 1px solid var(--pt-edge-soft);
    margin: 0;
    padding: 10px 20px;
}

.card .card-body.p-0 .dt-info {
    color: var(--pt-text-label);
    font-size: 0.8125rem;
    padding-top: 0;
}

.table > thead > tr > th,
table.dataTable > thead > tr > th {
    color: var(--pt-text-label);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pt-edge);
    white-space: nowrap;
}

.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
    border-top: 1px solid var(--pt-edge-soft);
    color: var(--pt-text-strong);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: transparent;
}

.table-hover > tbody > tr:hover > td {
    background: var(--pt-tint);
}

/* --- Zustandsmarken ---------------------------------------------------
 * Flaeche statt Vollton: die kraeftigen Badges des Templates zogen mehr
 * Aufmerksamkeit auf sich als die Zahlen daneben.
 */
.badge {
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
}

.badge-success {
    background: var(--pt-success-bg) !important;
    color: var(--pt-success) !important;
}

.badge-danger {
    background: var(--pt-danger-bg) !important;
    color: var(--pt-danger) !important;
}

.badge-warning {
    background: var(--pt-warning-bg) !important;
    color: var(--pt-warning) !important;
}

/* --- Schaltflaechen ---------------------------------------------------- */
.btn {
    border-radius: var(--pt-radius-sm);
    font-weight: 600;
}

.btn-info,
.btn-success {
    background: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #fff;
}

.btn-info:hover,
.btn-success:hover,
.btn-info:focus,
.btn-success:focus {
    background: var(--pt-primary-dark);
    border-color: var(--pt-primary-dark);
    color: #fff;
}

.btn-warning {
    background: var(--pt-warning-bg);
    border-color: var(--pt-warning-bg);
    color: var(--pt-warning);
}

.btn-danger {
    background: var(--pt-danger-bg);
    border-color: var(--pt-danger-bg);
    color: var(--pt-danger);
}

.btn-danger:hover,
.btn-warning:hover {
    filter: brightness(0.95);
}

.btn-outline-secondary {
    border-color: var(--pt-edge);
    color: var(--pt-text-muted);
}

/* --- Formulare --------------------------------------------------------- */
.form-group label {
    color: var(--pt-text-label);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.form-control,
.form-select {
    border: 1px solid var(--pt-edge);
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12);
}

.form-control::placeholder {
    color: var(--pt-text-label);
}

/* --- Navigation -------------------------------------------------------- */
.sidebar .nav-secondary .nav-item.active > a {
    background: rgba(211, 47, 47, 0.16);
    border-radius: var(--pt-radius-sm);
}

.sidebar .nav-secondary .nav-item.active > a p,
.sidebar .nav-secondary .nav-item.active > a i {
    color: #fff;
}

.main-header {
    background: var(--pt-surface);
    border-bottom: 1px solid var(--pt-edge);
}

/* --- Dialoge ----------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--pt-radius);
}

.modal-header,
.modal-footer {
    border-color: var(--pt-edge-soft);
}

/* --- DataTables -------------------------------------------------------- */
.dt-buttons .dt-button,
div.dt-container .dt-button {
    background: var(--pt-surface) !important;
    border: 1px solid var(--pt-edge) !important;
    border-radius: var(--pt-radius-sm) !important;
    color: var(--pt-text-muted) !important;
    font-size: 0.8125rem;
    font-weight: 600;
}

div.dt-container .dt-paging .dt-paging-button.current {
    background: var(--pt-primary) !important;
    border-color: var(--pt-primary) !important;
    color: #fff !important;
}

/* Die leere Tabelle soll erklaeren, warum sie leer ist, statt nur
   "No data available" zu sagen. Der Text kommt aus der Komponente. */
td.dt-empty {
    color: var(--pt-text-muted);
    padding: 28px 12px;
    text-align: center;
}

/* --- Restlaufzeit ------------------------------------------------------
 * Nur was Aufmerksamkeit braucht, bekommt eine Farbe. Alles darueber steht
 * ruhig da: bei 55 von 77 Lizenzen mit Jahren Restlaufzeit waere eine
 * durchgefaerbte Spalte reine Unruhe.
 */
.pt-rest {
    color: var(--pt-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pt-rest--fern,
.pt-rest--unbekannt {
    color: var(--pt-text-label);
}

/* Lizenznummer vor dem Namen: da, aber nicht im Weg. */
.pt-lizenz-id {
    color: var(--pt-text-label);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}