@import url("./variables.css");

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}

html,
body {

    width: 100%;
    height: 100%;

    font-family: var(--font-family);

    background: var(--background);

    color: var(--text);

}

body {

    display: flex;

    flex-direction: column;

}

/* ---------- Header ---------- */

#header {

    height: var(--header-height);

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 0 var(--spacing-lg);

    background: var(--surface);

    border-bottom: 1px solid var(--border);

    box-shadow: var(--shadow);

    z-index: 100;

}

#header h1 {

    font-size: 28px;

    color: var(--accent);

}

.header-left {

    display: flex;

    align-items: center;

    gap: 20px;

}

.header-left small {

    display: block;

    margin-top: 2px;

    color: var(--text-secondary);

    font-size: 13px;

}

/* ---------- Logo ---------- */

.logo {

    width: 48px;
    height: 48px;

    display: flex;

    justify-content: center;
    align-items: center;

}

.logo img {

    width: 48px;
    height: 48px;

    object-fit: contain;

}

/* ---------- Benutzer ---------- */

.header-right {

    display: flex;

    align-items: center;

    gap: 20px;

}

.username {

    font-weight: 600;

}

.avatar {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 2px solid var(--accent);

    box-shadow: 0 0 10px rgba(0,0,0,.35);

}

/* ---------- Layout ---------- */

#layout {

    display: flex;

    height: calc(100vh - var(--header-height));

}

/* ---------- Sidebar ---------- */

#sidebar {

    width: var(--sidebar-width);

    background: var(--surface);

    border-right: 1px solid var(--border);

}

#sidebar nav {

    padding: 18px 0;

}

#sidebar ul {

    list-style: none;

}

#sidebar li {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

    margin: 6px 10px;

    padding: 14px 16px;

    border-radius: var(--border-radius);

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition-fast);

}

#sidebar li:hover {

    background: var(--surface-hover);

    transform: translateX(4px);

}

#sidebar li.active {

    background: rgba(212,175,55,.14);

    color: var(--accent);

    border-left: 4px solid var(--accent);

    font-weight: 600;

}

#sidebar li img {

    width: 60px;

    height: 60px;

    object-fit: contain;

    flex-shrink: 0;

}

#sidebar li span {

    flex: 1;

}

/* ---------- Content ---------- */

#content {

    flex: 1;

    overflow-y: auto;

    padding: var(--spacing-xl);

}

/* ---------- Seiten ---------- */

h2 {

    margin-bottom: var(--spacing-lg);

    color: var(--accent);

}

section {

    margin-bottom: var(--spacing-lg);

}

/* ---------- Buttons ---------- */

button {

    display: inline-flex;

    justify-content: center;
    align-items: center;

    gap: var(--spacing-sm);

    padding: 10px 18px;

    border: none;

    border-radius: var(--border-radius);

    background: var(--accent);

    color: #000;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition-fast);

}

button:hover {

    background: var(--accent-hover);

    transform: translateY(-1px);

}

button:disabled {

    opacity: .6;

    cursor: not-allowed;

}

.btn-danger {

    background: var(--danger);

    color: #fff;

}

.btn-danger:hover {

    background: #d7372f;

}

/* ---------- Formulare ---------- */

.form-group {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

    margin-bottom: var(--spacing-lg);

}

.form-group label {

    font-weight: 600;

    color: var(--text);

}

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--border);

    border-radius: var(--border-radius);

    background: var(--background);

    color: var(--text);

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color var(--transition),
        background var(--transition);

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    outline: none;

    border-color: var(--accent);

}

.form-group textarea {

    min-height: 90px;

    resize: vertical;

}

/* ---------- Dateiauswahl ---------- */

input[type="file"] {

    cursor: pointer;

}

input[type="file"]::file-selector-button {

    margin-right: var(--spacing-md);

    padding: 10px 16px;

    border: none;

    border-radius: var(--border-radius);

    background: var(--surface-hover);

    color: var(--text);

    cursor: pointer;

    transition:
        background var(--transition);

}

input[type="file"]::file-selector-button:hover {

    background: var(--accent);

    color: #000;

}

.form-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: var(--spacing-lg);

    margin-top: var(--spacing-lg);

}

#upload-status {

    color: var(--text-secondary);

    font-size: 14px;

}

/* ---------- Tabellen ---------- */

.data-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: var(--spacing-md);

}

.data-table thead {

    background: rgba(255,255,255,.04);

}

.data-table th {

    padding: 16px;

    text-align: left;

    color: var(--accent);

    border-bottom: 1px solid var(--border);

    font-weight: 600;

    white-space: nowrap;

}

.data-table td {

    padding: 16px;

    border-bottom: 1px solid rgba(255,255,255,.05);

    vertical-align: middle;

}

.data-table tbody tr:hover {

    background: rgba(255,255,255,.03);

}

.data-table td:first-child {

    font-weight: 600;

}

.data-table td:last-child,
.data-table th:last-child {

    width: 1%;

    white-space: nowrap;

    text-align: right;

}

/* ---------- Login ---------- */

.login-screen {

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: var(--spacing-lg);

}

.login-screen h1 {

    color: var(--accent);

}

/* ---------- Dashboard ---------- */

.dashboard-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--spacing-lg);

    margin-top: var(--spacing-xl);

}

.welcome-card {

    grid-column: span 2;

}

/* ---------- Cards ---------- */

.card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--border-radius);

    padding: var(--spacing-lg);

    box-shadow: var(--shadow);

    overflow-x: auto;

}

.card h3 {

    margin-bottom: var(--spacing-lg);

    color: var(--accent);

}

/* ---------- Platzhalter ---------- */

.card-placeholder {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-sm);

    color: var(--text-secondary);

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}

::-webkit-scrollbar-track {

    background: var(--background);

}

::-webkit-scrollbar-thumb {

    background: var(--border);

    border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--surface-hover);

}