/* ==========================================
   PufferPanel Modern Dark Theme
   ========================================== */

:root {
    --dark-bg: #0f172a;
    --dark-panel: #111827;
    --dark-card: #1e293b;
    --dark-hover: #334155;
    --dark-border: #334155;
    --dark-text: #f8fafc;
    --dark-muted: #94a3b8;
    --dark-primary: #2563eb;
}


/* Grundsystem */

html,
body,
.v-application,
.application {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}


/* Hauptbereich */

.v-main,
.v-content {
    background: var(--dark-bg) !important;
}


/* Sidebar */

.v-navigation-drawer {
    background: #020617 !important;
    border-right: 1px solid var(--dark-border) !important;
}

.v-navigation-drawer .v-list {
    background: transparent !important;
}

.v-navigation-drawer .v-list-item {
    color: var(--dark-text) !important;
}

.v-navigation-drawer .v-list-item:hover {
    background: var(--dark-hover) !important;
}

.v-navigation-drawer .v-icon {
    color: var(--dark-muted) !important;
}


/* Header */

.v-toolbar,
.v-app-bar,
header {
    background: #020617 !important;
    color: var(--dark-text) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}


/* Karten */

.v-card,
.v-sheet,
.card {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 12px !important;
}


/* Listen */

.v-list {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
}

.v-list-item__title,
.v-list-item__subtitle {
    color: var(--dark-text) !important;
}


/* Buttons */

.v-btn {
    color: var(--dark-text) !important;
}

.v-btn:hover {
    background: var(--dark-hover) !important;
}


/* Primäre Buttons */

.primary,
.v-btn.primary {
    background: var(--dark-primary) !important;
    color: white !important;
}


/* Eingabefelder */

.v-input__slot {
    background: #111827 !important;
    border-color: var(--dark-border) !important;
}

.v-text-field input,
.v-textarea textarea,
.v-select__selection {
    color: white !important;
}

.v-label {
    color: var(--dark-muted) !important;
}


/* Dropdowns */

.v-menu__content {
    background: #111827 !important;
    border: 1px solid var(--dark-border) !important;
}

.v-menu__content .v-list {
    background: #111827 !important;
}


/* Tabellen */

.v-data-table {
    background: var(--dark-card) !important;
    color: white !important;
}

.v-data-table-header {
    background: #020617 !important;
}

.v-data-table th {
    color: white !important;
    border-color: var(--dark-border) !important;
}

.v-data-table td {
    color: #e5e7eb !important;
    border-color: var(--dark-border) !important;
}

.v-data-table tr:hover {
    background: var(--dark-hover) !important;
}


/* Dialoge */

.v-dialog .v-card {
    background: var(--dark-card) !important;
}


/* Tabs */

.v-tabs {
    background: transparent !important;
}

.v-tab {
    color: var(--dark-muted) !important;
}

.v-tab--active {
    color: white !important;
}


/* Console */

.console {
    background: #000 !important;
    color: #22c55e !important;
    border-radius: 8px !important;
}


/* Code Editor */

.ace_editor {
    background: #020617 !important;
}


/* Alerts */

.v-alert {
    background: #111827 !important;
    color: white !important;
}


/* Checkbox / Switch */

.v-input--selection-controls label {
    color: white !important;
}


/* Divider */

.v-divider {
    border-color: var(--dark-border) !important;
}


/* Scrollbar */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #020617;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}


/* Animation */

.v-card,
.v-list-item,
.v-btn {
    transition: 0.2s ease;
}