/* AssetKeeper: Haupt Stylesheet - Design basierend auf Sebastian's Wireframe */

/* Reset spezifischer Browsereinstellungen: Einfach nur um Standardabstände des Browsers zu entfernen und sorgt dafür,
   dass padding/border in die Elementbreite eingerechnet werden (box-sizing). */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Farbpalette: Alle Farben  zentral als CSS Variablen. */
:root {
    --ak-dark:          #1E293B;  /* Sidebar, Topbar (Slate-Dunkel) */
    --ak-primary:       #4F46E5;  /* Buttons, aktive Navigation (Indigo) */
    --ak-primary-light: #EEF2FF;  /* Hover-Hintergründe */
    --ak-bg:            #F8FAFC;  /* Seitenhintergrund */
    --ak-surface:       #F1F5F9;  /* Tabellen-Header, Card-Flächen */
    --ak-border:        #E2E8F0;  /* Trennlinien, Rahmen */
    --ak-text:          #0F172A;  /* Normaler Fließtext */
    --ak-muted:         #64748B;  /* Labels, Hilfstexte (gedämpft) */

    --ak-amber:         #F59E0B;  /* Warnung (Wartung fällig) */
    --ak-amber-light:   #FFFBEB;  /* heller Warnungs-Hintergrund */
    --ak-amber-dark:    #B45309;  /* dunkler Warnungs-Text */

    --ak-green:         #22C55E;  /* Erfolg (Aktiv) */
    --ak-green-light:   #F0FDF4;  /* heller Erfolgs-Hintergrund */
    --ak-green-dark:    #15803D;  /* dunkler Erfolgs-Text */

    --ak-red:           #EF4444;  /* Fehler (Störung) */
    --ak-red-light:     #FEF2F2;  /* heller Fehler-Hintergrund */
    --ak-red-dark:      #B91C1C;  /* dunkler Fehler-Text */

    --ak-white:         #FFFFFF;
}

/* Grundeinstellung der Seite: Schriftart, Hintergrund, Textfarbe */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--ak-bg);
    color: var(--ak-text);
}

/*  Topbar, Logo links, flexibler Abstand (spacer), User-Avatar rechts. */
.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--ak-dark);
}

.topbar-logo {
    font-size: 15px;
    font-weight: 500;
    color: var(--ak-white);
    letter-spacing: .04em;
}

/* Schiebt alles nach dem Logo nach rechts (nimmt freien Platz ein) */
.topbar-spacer {
    flex: 1;
}

/* Runder Avatar mit den Initialen des Users */
.topbar-user {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ak-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--ak-white);
}

/*
   App-Layout: Ordnet Sidebar (links) und Content (rechts)
   nebeneinander an. min-height füllt die volle Fensterhöhe
   abzüglich der Topbar.
   */

.app-layout {
    display: flex;
    min-height: calc(100vh - 54px);
}

/* Sidebar: Dunkle Navigationsspalte links mit den Menüpunkten.*/
.sidebar {
    width: 200px;
    flex-shrink: 0;          /* Sidebar schrumpft nicht bei wenig Platz */
    background: var(--ak-dark);
    padding: 16px 0;
}

/* Einzelner Menüpunkt (Link) in der Sidebar */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, .5);   /* halbtransparent = inaktiv */
    text-decoration: none;            /* kein Link-Unterstrich */
}

/* Menüpunkt beim Drüberfahren mit der Maus */
.nav-item:hover {
    color: var(--ak-white);
    background: rgba(255, 255, 255, .05);
}

/* aktuelle Seite hervorheben */
.nav-item.active {
    color: var(--ak-white);
    background: rgba(255, 255, 255, .08);
    border-left: 3px solid var(--ak-primary);
}

/* Kleiner Punkt vor dem Menütext (Platzhalter-Icon) */
.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;   /* nimmt die aktuelle Textfarbe an */
    flex-shrink: 0;
}

/* Content: Der Hauptbereich rechts neben der Sidebar. */
.content {
    flex: 1;
    min-width: 0;
    padding: 28px;
}

/* Kleine graue Überschrift über einem Abschnitt (z.B. "Übersicht") */
.section-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ak-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}

/* Große Seitenüberschrift (z.B. "Assets") */
.page-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}


 /* Dashboard-Kacheln: 4 Kennzahlen nebeneinander, farbiger Balken oben je nach Wichtigkeit. */

.metric-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4 gleich breite Spalten */
    gap: 14px;
    margin-bottom: 24px;
}

.metric-card {
    background: var(--ak-white);
    border: 1px solid var(--ak-border);
    border-radius: 8px;
    padding: 16px 18px;
}

/* Farbiger Balken */
.metric-card.m-blue  { border-top: 3px solid var(--ak-primary); }
.metric-card.m-amber { border-top: 3px solid var(--ak-amber); }
.metric-card.m-red   { border-top: 3px solid var(--ak-red); }

/* Die grosse Kennzahl*/

.metric-val {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 4px;
}

/*  Beschriftung unter der Zahl */
.metric-lbl {
    font-size: 12px;
    color: var(--ak-muted);
}

/*Toolbar: Zeile über der Tabelle mit Suchfeld, Filtern und "+ Neu"-Button (Asset-Liste). */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

/* Suchfeld (nimmt den meisten Platz ein) */
.tb-input {
    flex: 1;
    height: 38px;
    border: 1px solid var(--ak-border);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    background: var(--ak-white);
    color: var(--ak-text);
}

/* Button in der Toolbar (Filter, Aktionen) */
.tb-btn {
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--ak-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--ak-white);
    color: var(--ak-text);
    cursor: pointer;
    white-space: nowrap;        /* Text bricht nicht um */
    text-decoration: none;      /* falls als Link <a> genutzt */
    display: inline-flex;
    align-items: center;
}

/* Gefüllter Button (Hauptaktion, z.B. "+ Neu" oder "Speichern") */
.tb-btn.filled {
    background: var(--ak-primary);
    color: var(--ak-white);
    border-color: var(--ak-primary);
}

/* Tabelle: Bissl angepasst im Vergleich zum Wireframe wegen späteren Arbeit mit Jinja2 */
.table-frame {
    background: var(--ak-white);
    border: 1px solid var(--ak-border);
    border-radius: 8px;
    overflow: hidden;           /* runde Ecken auch bei der Tabelle */
}

table.ak-table {
    width: 100%;
    border-collapse: collapse;  /* keine doppelten Linien zwischen Zellen */
}

/* Tabellenkopf (Spaltenüberschriften) */
.ak-table thead th {
    padding: 10px 14px;
    background: var(--ak-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--ak-muted);
    text-align: left;
}

/* Normale Datenzellen */
.ak-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ak-border);
    font-size: 14px;
}

/* Letzte Zeile ohne untere Linie  */
.ak-table tbody tr:last-child td {
    border-bottom: none;
}

/* Zeile beim Drüberfahren leicht hervorheben */
.ak-table tbody tr:hover {
    background: var(--ak-surface);
}

/* Status Badges: Kleine farbige Badges für den Status .*/
.badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 10px;
    font-weight: 500;
}
/* (Aktiv = grün, Wartung = amber, Störung = rot) */
.badge-green { background: var(--ak-green-light); color: var(--ak-green-dark); }
.badge-amber { background: var(--ak-amber-light); color: var(--ak-amber-dark); }
.badge-red   { background: var(--ak-red-light);   color: var(--ak-red-dark); }
.badge-gray  { background: var(--ak-surface);     color: var(--ak-muted); }

/* Formulare: Eingabefelder (Assetdetails).*/
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* zwei gleich breite Spalten */
    gap: 14px;
}

/* Ein einzelnes Feld: Label oben, Eingabefeld darunter */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ak-muted);
}

/* Eingabefelder (textformat) und Dropdowns */
.field-input, .field-select {
    height: 38px;
    border: 1px solid var(--ak-border);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 14px;
    background: var(--ak-white);
    color: var(--ak-text);
}

/* Buttonzeile unter dem Formular (Speichern / Abbrechen) */
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

/*Details: Info-Boxen auf der "Asset Detailseite"
   (Wartungen, Vertrag, Dokumente) */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.detail-section {
    background: var(--ak-white);
    border: 1px solid var(--ak-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 0;
}

.detail-right .detail-section {
    margin-bottom: 16px;
}

.detail-right .detail-section:last-child {
    margin-bottom: 0;
}
/* Überschrift einer Detail-Box */
.ds-title {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ak-muted);
    margin-bottom: 10px;
}

/* Eine Zeile: Schlüssel links, Wert rechts */
.ds-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--ak-border);
    font-size: 13px;
}

.ds-row:last-child {
    border-bottom: none;
}


.ds-key {
    color: var(--ak-muted);
}

/* Login: Zentriert auf der Anmeldeseite. */
.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;          /* füllt das ganze Fenster, Karte mittig */
    background: var(--ak-surface);
}

.login-card {
    width: 340px;
    border: 1px solid var(--ak-border);
    border-radius: 10px;
    padding: 32px;
    background: var(--ak-white);
}

.login-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.login-sub {
    font-size: 13px;
    color: var(--ak-muted);
    margin-bottom: 24px;
}

.login-field {
    margin-bottom: 14px;
}

.lf-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ak-muted);
    margin-bottom: 5px;
    display: block;
}

.lf-input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--ak-border);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    background: var(--ak-white);
}

.login-btn {
    width: 100%;
    height: 40px;
    background: var(--ak-primary);
    color: var(--ak-white);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 6px;
    cursor: pointer;
}

/* Rote Fehlerbox (z.B. "Email oder Passwort falsch") */
.login-error {
    background: var(--ak-red-light);
    color: var(--ak-red-dark);
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}

/* Breadcrumb (zurück-Navigation auf Detailseite) */
.breadcrumb {
    font-size: 13px;
    color: var(--ak-muted);
    margin-bottom: 16px;
}

.breadcrumb a { color: var(--ak-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ak-primary); }
.breadcrumb strong { color: var(--ak-text); }

/* Tabs (Detailseite: Stammdaten / Wartungen / Vertrag / Dokumente) */

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--ak-border);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 14px;
    color: var(--ak-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab-btn:hover { color: var(--ak-text); }

.tab-btn.active {
    color: var(--ak-primary);
    border-bottom-color: var(--ak-primary);
    font-weight: 500;
}

/* ── Detail-Layout: Links/Rechts nebeneinander ── */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    align-items: start;
    width: 100%;
}

.detail-left { min-width: 0; }
.detail-right { min-width: 0; }

/* ── Upload-Zone ── */
.upload-zone {
    border: 2px dashed var(--ak-border);
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 12px;
    background: var(--ak-surface);
    transition: border-color .15s;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--ak-primary);
    background: var(--ak-primary-light);
}
.upload-arrow { font-size: 20px; color: var(--ak-muted); margin-bottom: 6px; }
.upload-hint { font-size: 13px; color: var(--ak-muted); text-align: center; }
.upload-sub { font-size: 11px; color: var(--ak-muted); margin-top: 6px; text-align: center; }
.upload-sub { font-size: 11px; color: var(--ak-muted); margin-top: 6px; }

/* ── Datei-Zeilen ── */
.file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ak-border);
    font-size: 13px;
}
.file-row:last-child { border-bottom: none; }
.file-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ak-primary-light);
    color: var(--ak-primary);
    flex-shrink: 0;
}
.file-name { flex: 1; color: var(--ak-text); }
.file-size { color: var(--ak-muted); flex-shrink: 0; }
.file-delete {
    color: var(--ak-muted);
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    padding: 0 4px;
}
.file-delete:hover { color: var(--ak-red); }

/* ── Toast Benachrichtigung ── */
.toast {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ak-text);
    color: var(--ak-white);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 1000;
    transition: opacity .5s;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}