/* ===========================================================================
   BAMBU STUDIO CONTROL CENTER - Filament-Tabelle
   ===========================================================================
   Version: v2.0.0
   Datei: html/css/table.css
   Erstellt: 16.04.2026
   ===========================================================================

   MODUL-FUNKTION
   ---------------
   Stile fuer die Filament-Profil-Tabelle im Haupttab. Umfasst den
   Tabellen-Container mit Rahmen, Kopfzeilen-Formatierung, Hover-Effekte,
   fehlerhafte Zeilen (rot hinterlegt), Spaltenbreiten, Status-Punkte,
   Drucker-Tags und die Aktionen-Spalte.

   =========================================================================== */

/* ===========================================================================
   FILAMENT-TABELLE
   =========================================================================== */
.table-container {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.filament-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.filament-table thead {
    background-color: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-color);
}

.filament-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.filament-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
}

/* Letzte Zeile ohne unteren Rahmen */
.filament-table tbody tr:last-child td {
    border-bottom: none;
}

/* Hover-Effekt auf Tabellenzeilen */
.filament-table tbody tr:hover {
    background-color: var(--bg-hover);
}

/* Fehlerhaft markierte Zeile */
.filament-table tbody tr.row-error {
    background-color: rgba(231, 76, 60, 0.08);
}

.filament-table tbody tr.row-error:hover {
    background-color: rgba(231, 76, 60, 0.14);
}

/* Spaltenbreiten */
.th-status { width: 60px; text-align: center; }
.th-name { min-width: 200px; }
.th-type { width: 100px; }
.th-vendor { width: 140px; }
.th-printers { min-width: 180px; }
.th-actions { width: 80px; text-align: center; }

/* Status-Punkt (gruen = OK, rot = Fehler) */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 auto;
}

.status-dot.ok {
    background-color: var(--color-success);
    box-shadow: 0 0 4px rgba(39, 174, 96, 0.4);
}

.status-dot.error {
    background-color: var(--color-danger);
    box-shadow: 0 0 4px rgba(231, 76, 60, 0.4);
}

/* Zelle fuer Status zentriert */
.td-status {
    text-align: center;
}

/* Drucker-Tags in der Tabelle */
.printer-tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 3px;
    background-color: var(--accent-light);
    color: var(--accent-primary);
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
}

/* Fehler-Nachricht in der Tabelle */
.error-message {
    font-size: 0.8rem;
    color: var(--color-danger);
    font-style: italic;
}

/* Aktionen-Zelle zentriert */
.td-actions {
    text-align: center;
    white-space: nowrap;
}

/* Flash-Effekt nach Bearbeitung (dezentes Aufleuchten) */
@keyframes rowFlash {
    0%   { background-color: rgba(0, 168, 255, 0.25); }
    100% { background-color: transparent; }
}

.filament-table tbody tr.row-flash {
    animation: rowFlash 2.5s ease-out forwards;
}

/* ===========================================================================
   GRUPPEN-DARSTELLUNG (zusammengehoerige Filamente mit @Drucker)
   =========================================================================== */

/* Sichtbarer Trenner zwischen verschiedenen Gruppen */
.filament-table tbody tr.group-first td {
    border-top: 2px solid var(--border-color);
}

/* Farbiger linker Rand fuer Profile die zu einer Mehrdatei-Gruppe gehoeren */
/* Die Farbe wird per Inline-Style dynamisch gesetzt (HSL-Farbkreis) */
.filament-table tbody tr.group-member {
    border-left: 3px solid;
}

/* Drucker-Bezeichnung (@...) unter dem Basisnamen */
.drucker-bezeichnung {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-weight: 300;
}