/* ============================================================
   Dashboard – Gemeinsame Styles
   Bootstrap 5 Dark/Light Mode kompatibel
   ============================================================ */

/* ── Alert-Fortschrittsbalken ─────────────────────────────── */
@keyframes alertProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.alert-progress-bar {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    transform-origin: left;
    animation: alertProgress 5s linear forwards;
    will-change: transform;
    pointer-events: none;
}
.alert-progress-bar.short { animation-duration: 3s; }

/* ── Theme-Transition ─────────────────────────────────────── */
html {
    color-scheme: dark;
    transition: background-color 0.25s ease, color 0.25s ease;
}
[data-bs-theme="light"] { color-scheme: light; }

* { transition: background-color 0.25s ease, border-color 0.25s ease; }
/* Transition nur für ausgewählte Elemente (Performance) */
a, button, .btn, .form-control, .card { transition-duration: 0.15s; }

/* ── Hintergrund ──────────────────────────────────────────── */
[data-bs-theme="dark"] body {
    background-color: #0d1117;
    background-image:
        radial-gradient(ellipse at 20% 0%,   rgba(13,110,253,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(111,66,193,.06) 0%, transparent 50%);
}
[data-bs-theme="light"] body {
    background-color: #f0f4f9;
}

/* ── Navbar ───────────────────────────────────────────────── */
.app-navbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bs-border-color);
}
[data-bs-theme="dark"]  .app-navbar { background: rgba(22,27,34,.95) !important; }
[data-bs-theme="light"] .app-navbar { background: rgba(255,255,255,.92) !important; }

.brand-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Offcanvas ────────────────────────────────────────────── */
.offcanvas-nav-btn {
    padding: .75rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* ── Kacheln (Tiles) ──────────────────────────────────────── */
/* ── Status-Dot ───────────────────────────────────────────────── */
.tile-status-dot {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #6b7280;
    z-index: 2;
    transition: background-color .4s ease;
}
.tile-status-pulse {
    animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

.tile-card {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    height: 100%;
    min-height: 175px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
}
.tile-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--bs-primary-rgb), .4);
}
[data-bs-theme="dark"]  .tile-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.45); }
[data-bs-theme="light"] .tile-card:hover { box-shadow: 0 8px 24px  rgba(0,0,0,.12); }

.tile-card-header {
    padding: 1.25rem 1.25rem .875rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .375rem;
}
.tile-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.tile-ext-icon {
    color: var(--bs-border-color);
    font-size: .75rem;
    margin-top: 3px;
    margin-left: auto;
    transition: color .15s !important;
}
.tile-card:hover .tile-ext-icon { color: var(--bs-secondary-color); }

.tile-notes-icon {
    color: #f59e0b;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: .75;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    transition: opacity .15s !important;
}
.tile-card:hover .tile-notes-icon { opacity: 1; }

#tile-notes-popup {
    position: fixed;
    display: none;
    background: #1e1e2e;
    border: 1px solid #3a3a5e;
    border-radius: 6px;
    padding: 10px;
    max-width: 250px;
    z-index: 9999;
    font-size: .8rem;
    line-height: 1.5;
    color: #d4d4d4;
    word-break: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 4px 20px rgba(0,0,0,.6);
}
#tile-notes-popup.show { display: block; }

/* ── Proxmox ──────────────────────────────────────────────────────────────── */
.tile-proxmox-icon {
    color: #60a5fa;
    font-size: .95rem;
    cursor: pointer;
    opacity: .6;
    flex-shrink: 0;
    transition: opacity .15s;
}
.tile-card:hover .tile-proxmox-icon { opacity: 1; }

.tile-proxmox-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .5rem 1.25rem .75rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 12px;
    color: #9ca3af;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.tile-proxmox-meta:hover { color: var(--bs-body-color); }
.tile-proxmox-meta > i { flex-shrink: 0; font-size: 12px; }
.tile-proxmox-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity .3s;
}
.tile-proxmox-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6b7280;
    flex-shrink: 0;
}
.tile-proxmox-dot.px-dot-green { background: #22c55e; }
.tile-proxmox-dot.px-dot-red   { background: #ef4444; }

#tile-proxmox-popup {
    position: fixed;
    display: none;
    background: #1a1a2e;
    border: 1px solid #2d2d4e;
    border-radius: 8px;
    min-width: 240px;
    max-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 9998;
    font-size: .78rem;
    color: #d4d4d4;
    box-shadow: 0 6px 24px rgba(0,0,0,.7);
}
#tile-proxmox-popup.show { display: block; }

.px-popup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 6px;
    font-size: .8rem;
    font-weight: 600;
    color: #93c5fd;
    border-bottom: 1px solid #2d2d4e;
}
.px-popup-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.px-popup-close:hover { color: #d4d4d4; }

.px-section {
    padding: 8px 10px 6px;
    border-bottom: 1px solid #232340;
}
.px-section:last-child { border-bottom: none; }

.px-node-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 5px;
}
.px-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6b7280;
    flex-shrink: 0;
}
.px-dot-green { background: #22c55e; }
.px-dot-red   { background: #ef4444; }

.px-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.px-stat-label {
    width: 28px;
    flex-shrink: 0;
    color: #9ca3af;
    font-size: .72rem;
}
.px-progress {
    flex: 1;
    height: 5px;
    background: #374151;
    border-radius: 3px;
    overflow: hidden;
}
.px-progress-bar {
    height: 100%;
    background: #3b82f6;
    border-radius: 3px;
    transition: width .3s;
}
.px-stat-val {
    width: 70px;
    text-align: right;
    flex-shrink: 0;
    color: #cbd5e1;
    font-size: .72rem;
}

.px-vm-section { padding-bottom: 4px; }
.px-vm-header {
    font-size: .72rem;
    color: #9ca3af;
    margin-bottom: 5px;
    font-weight: 600;
}
.px-vm-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: .72rem;
    color: #cbd5e1;
}
.px-vm-row .px-dot {
    flex: 0 0 12px;
    margin: 0;
}
.px-vm-badge {
    font-size: .6rem;
    font-weight: 700;
    padding: 1px 0;
    border-radius: 3px;
    flex: 0 0 32px;
    text-align: center;
    letter-spacing: .03em;
}
.px-vm-badge-qemu, .px-vm-badge-vm { background: #1d4ed8; color: #bfdbfe; }
.px-vm-badge-lxc                   { background: #065f46; color: #a7f3d0; }
.px-vm-row-qemu { background: rgba(37, 99, 235, 0.15); border-radius: 3px; }
.px-vm-id {
    flex: 0 0 35px;
    color: #6b7280;
}
.px-vm-node {
    flex: 0 0 40px;
    font-size: 11px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.px-vm-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.px-loading, .px-error {
    padding: 12px 14px;
    color: #9ca3af;
    font-size: .78rem;
}
.px-error { color: #f87171; }

.tile-sso-badge {
    background-color: #FFE600 !important;
    color: #000000 !important;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 2px;
    opacity: 1 !important;
}

.tile-card-body {
    padding: 0 1.25rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tile-name {
    font-size: .95rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: .3rem;
}
.tile-desc {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    flex: 1;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tile-meta {
    padding: .5rem 1.25rem .75rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
}
.tile-meta > .fa-network-wired {
    flex-shrink: 0;
}
.tile-meta-host {
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tile-meta-internal {
    color: #60a5fa;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tile-meta-internal:hover {
    text-decoration: underline;
    color: #60a5fa;
}
.tile-card-footer {
    padding: .625rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}
.tile-open-btn {
    font-size: .775rem;
    font-weight: 500;
    color: var(--bs-primary);
    text-decoration: none;
    opacity: .8;
    transition: opacity .15s !important;
}
.tile-card:hover .tile-open-btn { opacity: 1; }

/* Farb-Akzent (oberer Rand) */
.accent-primary   { border-top: 3px solid #0d6efd !important; }
.accent-success   { border-top: 3px solid #198754 !important; }
.accent-danger    { border-top: 3px solid #dc3545 !important; }
.accent-warning   { border-top: 3px solid #ffc107 !important; }
.accent-info      { border-top: 3px solid #0dcaf0 !important; }
.accent-secondary { border-top: 3px solid #6c757d !important; }
.accent-purple    { border-top: 3px solid #6f42c1 !important; }
.accent-orange    { border-top: 3px solid #fd7e14 !important; }
.accent-pink      { border-top: 3px solid #d63384 !important; }
.accent-teal      { border-top: 3px solid #20c997 !important; }

/* Farb-Hintergründe (Icon-Wrap) – für Farb-Picker Swatches */
.bg-icon-primary   { background: #0d6efd; }
.bg-icon-success   { background: #198754; }
.bg-icon-danger    { background: #dc3545; }
.bg-icon-warning   { background: #ffc107; }
.bg-icon-info      { background: #0dcaf0; }
.bg-icon-secondary { background: #6c757d; }
.bg-icon-purple    { background: #6f42c1; }
.bg-icon-orange    { background: #fd7e14; }
.bg-icon-pink      { background: #d63384; }
.bg-icon-teal      { background: #20c997; }

/* Icon-Container: kein Filter, volle Deckkraft, kein Blend-Mode */
.tile-icon-wrap,
.admin-tile-icon {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
}
/* Icons innerhalb: immer weiß, kein Filter */
.tile-icon-wrap img,
.tile-icon-wrap i,
.admin-tile-icon img,
.admin-tile-icon i {
    color: #fff !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.tile-card:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), .6);
    outline-offset: 2px;
}

/* ── Kachel-Gruppen (Dashboard) ───────────────────────────── */
.group-section { margin-bottom: 16px !important; }

.group-header {
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    min-height: 56px !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none;
    border-radius: 10px;
    transition: filter .15s ease;
}
.group-header:hover { filter: brightness(1.1); }

.group-header .group-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 10px;
    background: rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.group-header .group-icon img,
.group-header .group-icon i {
    filter: none !important;
    opacity: 1 !important;
}

.group-header .group-title {
    flex: 1 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #fff;
}

.group-header .group-arrow {
    margin-left: auto !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
    transition: transform .25s ease;
    color: rgba(255,255,255,.85);
}
.group-header.collapsed .group-arrow {
    transform: rotate(-90deg);
}

.group-tiles {
    display: block;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
}
.group-tiles.collapsed { display: none; }

/* ── SimpleIcons ──────────────────────────────────────────── */
.si-icon { display: inline-block; }
img.si-icon { vertical-align: middle; }

/* ── Icon-Picker ──────────────────────────────────────────── */
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: .375rem;
    max-height: 340px;
    overflow-y: auto;
}
.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .5rem .25rem;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    background: var(--bs-secondary-bg);
    transition: all .15s !important;
    min-width: 0;
}
.icon-item:hover  { border-color: var(--bs-primary); }
.icon-item.active { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.1); }
.icon-item .icon-wrap {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108,117,125,.3);
    font-size: 1.1rem;
}
.icon-item .icon-label {
    font-size: .68rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    color: var(--bs-secondary-color);
}

/* ── Farb-Picker ──────────────────────────────────────────── */
.color-swatch {
    width: 30px; height: 30px;
    border-radius: 7px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform .15s, border-color .15s !important;
    flex-shrink: 0;
}
.color-swatch:hover  { transform: scale(1.15); }
.color-swatch.active { border-color: var(--bs-body-color); transform: scale(1.1); }

/* ── Sektion-Überschriften ───────────────────────────────── */
.section-heading {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
}
.section-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}

/* ── Login-Seite ──────────────────────────────────────────── */
.login-card {
    border-radius: 16px;
    border: 1px solid var(--bs-border-color);
    backdrop-filter: blur(10px);
}
[data-bs-theme="dark"]  .login-card { background: rgba(22,27,34,.96); }
[data-bs-theme="light"] .login-card { background: rgba(255,255,255,.95); }

.login-logo {
    width: 72px; height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.25rem;
    box-shadow: 0 8px 24px rgba(13,110,253,.3);
}

/* ── Admin-Tabelle ────────────────────────────────────────── */
.admin-tile-row {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background .12s !important;
}
.admin-tile-row:last-child  { border-bottom: none; }
.admin-tile-row:hover       { background: var(--bs-secondary-bg); }

.admin-tile-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Suchfeld ─────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap .search-icon {
    position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    font-size: .8rem;
    pointer-events: none;
}
.search-wrap input { padding-left: 2.1rem; }

/* ── Utilities ────────────────────────────────────────────── */
.fw-500 { font-weight: 500; }
.text-xs { font-size: .75rem; }
.rounded-xl { border-radius: 14px !important; }

/* ── Empty State ──────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--bs-secondary-color);
}
.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .35;
}