@import 'variables.css';

/* Layout Grid */
.layout-container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--header-height) 1fr;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    grid-row: 1 / -1;
    background-color: var(--bg-card);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    z-index: 10;
}

.logo {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.2s;
}

.nav-item a:hover,
.nav-item a.active {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

/* Gruppenueberschrift in der Navigation (Produkte, Versand, Einstellungen).
   Kein Link, nur Beschriftung: die Gruppe selbst hat keine eigene Seite. */
.nav-gruppe {
    padding: 0;
    /* Luft vor jedem Block, damit Gruppen und freistehende Punkte als getrennte
       Einheiten lesbar sind und nicht als eine durchgehende Liste. */
    margin-top: 0.5rem;
}
.nav-gruppe:first-child {
    margin-top: 0;
}
/* Die Ueberschrift ist seit 31.08.2026 ein Knopf zum Zuklappen. Sie sieht aus wie
   vorher der reine Text, deshalb werden die Knopf-Vorgaben des Browsers vollstaendig
   zurueckgesetzt. Ohne JavaScript passiert beim Klick nichts und alles bleibt offen. */
.nav-gruppe-knopf {
    width: 100%;
    display: flex;
    align-items: center;
    /* Der Pfeil gehoert an den Titel, nicht an den rechten Rand: bei 260 Pixel
       Menuebreite standen sonst zwei Zentimeter Leere dazwischen und die
       Ueberschrift wirkte auseinandergerissen. */
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 1rem 1rem 0.35rem;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.65;
    text-align: left;
    transition: opacity 0.2s;
}
.nav-gruppe-knopf:hover { opacity: 1; }
.nav-gruppe-knopf:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    opacity: 1;
}
.nav-gruppe:first-child .nav-gruppe-knopf {
    padding-top: 0.25rem;
}
.nav-pfeil {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    transition: transform 0.2s ease;
}
/* Zugeklappt zeigt der Pfeil nach rechts. Zusaetzlich zur Richtung wird der Titel
   voll deckend, damit der Zustand auch ohne die kleine Drehung erkennbar ist. */
.nav-gruppe.ist-zu .nav-pfeil { transform: rotate(-90deg); }
.nav-gruppe.ist-zu .nav-gruppe-knopf { opacity: 1; }

/* Verstecken uebernimmt das Attribut hidden. Eigene Regel, weil .nav-menu seine
   Kinder ueber flex anordnet und flex das Attribut sonst ueberstimmt. */
.nav-menu li[hidden] { display: none; }
/* Zugehoerigkeit zu einer Gruppe.
   Frueher lief das ueber den Geschwisterselektor `.nav-gruppe ~ .nav-item`. Der trifft
   ALLE Punkte nach einer Ueberschrift, also auch die freistehenden, und musste mit
   einem !important zurueckgenommen werden. Seit die Punkte ein data-gruppe tragen,
   laesst sich genau das Richtige adressieren.

   Wichtiger noch: die blosse Einrueckung um ein paar Pixel reichte nicht. Sie war zu
   schwach, um zu erklaeren, warum Lagerbestand nicht zu „Produkte" gehoert, und
   zugeklappt verschwand die Erklaerung ganz: unter der Ueberschrift standen dann
   Punkte, die nie dazugehoert haben. Deshalb jetzt eine sichtbare Klammer, eine
   duenne Linie links neben den Punkten einer Gruppe. Sie verschwindet mit ihnen. */
.nav-item[data-gruppe] {
    position: relative;
}
.nav-item[data-gruppe] a {
    padding-left: 1.75rem;
}
.nav-item[data-gruppe]::before {
    content: '';
    position: absolute;
    left: 0.8rem;
    /* ueber den Abstand zwischen den Punkten hinaus, damit die Linie durchlaeuft */
    top: -0.25rem;
    bottom: -0.25rem;
    width: 2px;
    border-radius: 1px;
    background: var(--border-color);
}
/* Der Punkt, auf dem man steht, faerbt seinen Abschnitt der Klammer mit ein. */
.nav-item[data-gruppe]:has(a.active)::before {
    background: var(--color-primary);
}
/* Freistehende Punkte tragen keine Klammer und keine Einrueckung. */
.nav-item-frei a {
    padding-left: 1rem;
}

/* Logo ist jetzt der Weg zum Dashboard. Layout und Farbe kommen weiter aus .logo,
   hier nur, was ein Link zusaetzlich braucht. Beim Darueberfahren wird leicht
   abgeblendet statt die Farbe zu wechseln: .logo traegt bereits die Primaerfarbe,
   ein Farbwechsel darauf waere unsichtbar. */
.logo-link {
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.logo-link:hover {
    opacity: 0.75;
}

/* Header */
.header {
    grid-column: 2;
    background-color: var(--bg-body); /* Transparent/same as body or card */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border-color); /* Optional */
    backdrop-filter: blur(8px);
    z-index: 5;
}

.header-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.header-actions {
    display: flex;
    gap: 1rem;
}

/* Main Content */
.main-content {
    grid-column: 2;
    padding: 2rem;
    overflow-y: auto;
}

/* Cards & Components */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.card-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-body {
    padding: 1.5rem;
}
.card-body--tight { padding: 1rem 1.5rem; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-main);
    transition: all 0.15s ease;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { background-color: var(--bg-subtle); border-color: var(--border-strong); }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}
.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: white;
}
.btn-danger:hover { filter: brightness(0.92); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text-main); }

.btn-sm  { padding: 0.35rem 0.75rem; font-size: 0.825rem; }
.btn-lg  { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* --- Forms ---------------------------------------------------------------- */
.form-input,
input.form-input,
select.form-input,
textarea.form-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    color: var(--text-main);
    font: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.form-input:disabled { background-color: var(--bg-subtle); color: var(--text-muted); }

.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}
.form-grid { display: grid; gap: 1rem; }
.form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .form-grid--2, .form-grid--3 { grid-template-columns: 1fr; } }

/* --- Stats grid ----------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat {
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.stat__icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.stat__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--text-main); }
.stat__label { font-size: 0.825rem; color: var(--text-muted); margin-top: 0.15rem; }
.stat--primary .stat__icon { background: var(--color-primary-soft); color: var(--color-primary); }
.stat--success .stat__icon { background: var(--color-success-soft); color: var(--color-success); }
.stat--info    .stat__icon { background: var(--color-info-soft);    color: var(--color-info); }
.stat--warning .stat__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.stat--accent  .stat__icon { background: var(--color-accent-soft);  color: var(--color-accent); }

/* --- Filter bar ----------------------------------------------------------- */
.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) auto;
    gap: 0.6rem;
    align-items: end;
    padding: 0.85rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}
.filter-bar__actions { display: flex; gap: 0.5rem; }

/* --- Data table ----------------------------------------------------------- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--bg-card);
}
.data-table thead th {
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.65rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.data-table tbody td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--bg-subtle); }
.data-table tbody tr.is-disabled { opacity: 0.55; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .mono { font-family: var(--font-mono); font-size: 0.825rem; }
.data-table__wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* --- Badges --------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-subtle);
    color: var(--text-muted);
    line-height: 1.4;
}
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--error   { background: var(--color-error-soft);   color: var(--color-error); }
.badge--info    { background: var(--color-info-soft);    color: var(--color-info); }
.badge--primary { background: var(--color-primary-soft); color: var(--color-primary); }

/* --- Flash messages ------------------------------------------------------- */
.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
    display: flex; align-items: center; gap: 0.5rem;
}
.flash--success { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.flash--error   { background: var(--color-error-soft);   color: var(--color-error);   border-color: color-mix(in srgb, var(--color-error) 30%, transparent); }
.flash--warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.flash--info    { background: var(--color-info-soft);    color: var(--color-info);    border-color: color-mix(in srgb, var(--color-info) 30%, transparent); }

/* --- Bulk action bar ------------------------------------------------------ */
.bulk-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-radius: var(--radius-md);
    font-weight: 500;
}
.bulk-bar.is-active { display: flex; }
.bulk-bar__actions { display: flex; gap: 0.5rem; }

/* --- Empty state ---------------------------------------------------------- */
.empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.empty__icon { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.5; }
.empty__title { font-weight: 600; color: var(--text-main); margin-bottom: 0.25rem; }

/* --- Pagination ----------------------------------------------------------- */
.pagination {
    display: flex; gap: 0.4rem; align-items: center; justify-content: center;
    margin-top: 1.25rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.pagination .btn { min-width: 36px; }

/* --- Scanner grid (60 EAN inputs) ---------------------------------------- */
.scanner-progress {
    height: 8px; background: var(--bg-subtle);
    border-radius: var(--radius-pill); overflow: hidden; margin: 0.5rem 0 1.25rem;
}
.scanner-progress__bar {
    height: 100%; background: var(--color-primary);
    width: 0%; transition: width 0.2s ease;
}
.scanner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}
.scanner-cell {
    display: flex; align-items: center; gap: 0.4rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.25rem 0.5rem;
    transition: border-color 0.15s, background 0.15s;
}
.scanner-cell:focus-within {
    background: var(--bg-card);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.scanner-cell.is-filled {
    background: var(--color-success-soft);
    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.scanner-cell__num {
    font-size: 0.7rem; color: var(--text-faint); width: 22px;
    text-align: right; font-variant-numeric: tabular-nums;
}
.scanner-cell input {
    flex: 1; border: none; background: transparent; outline: none;
    font-family: var(--font-mono); font-size: 0.825rem;
    color: var(--text-main);
    padding: 0.4rem 0.25rem;
}

/* --- Page toolbar (header actions) --------------------------------------- */
.toolbar { display: flex; gap: 0.5rem; align-items: center; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .layout-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto var(--header-height) 1fr;
    }
    .sidebar {
        display: none; /* Add mobile toggle later */
    }
    .header {
        grid-column: 1;
        padding: 0 1rem;
    }
    .main-content {
        grid-column: 1;
        padding: 1rem;
    }
}