/* Grundlayout der Anwendung: feste Sidebar ab Large-Breakpoint,
   auf kleinen Bildschirmen ausfahrbar. Ergaenzt Bootstrap 5, ersetzt es nicht. */

:root {
    --app-sidebar-breite: 15rem;
    --app-akzent: #2f4858;          /* dunkles Blaugrau, spaeter konfigurierbar */
    --app-akzent-hell: #3d5c70;
}

body {
    background-color: var(--bs-tertiary-bg);
}

/* Verhindert das kurze Aufblitzen von Alpine-Bereichen vor dem Initialisieren. */
[x-cloak] {
    display: none !important;
}

/* ---------------------------------------------------------------- Geruest */

.app-shell {
    min-height: 100vh;
}

.app-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-content {
    padding: 1.5rem 1rem 3rem;
    flex: 1 1 auto;
}

@media (min-width: 992px) {
    .app-main    { margin-left: var(--app-sidebar-breite); }
    .app-content { padding: 2rem 2rem 3rem; }
}

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

.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1045;
    width: var(--app-sidebar-breite);
    display: flex;
    flex-direction: column;
    background: var(--app-akzent);
    color: rgba(255, 255, 255, .85);
    transform: translateX(-100%);
    transition: transform .2s ease-in-out;
}

.app-sidebar.is-offen { transform: translateX(0); }

@media (min-width: 992px) {
    .app-sidebar { transform: translateX(0); }
}

.app-sidebar__marke {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.app-sidebar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .15);
    font-weight: 700;
    font-size: .8rem;
    color: #fff;
}

.app-sidebar__name {
    font-weight: 600;
    color: #fff;
    font-size: .95rem;
}

.app-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .75rem .5rem;
}

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    border-radius: .5rem;
    padding: .5rem .75rem;
    color: rgba(255, 255, 255, .8);
    font-size: .925rem;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.app-sidebar .nav-link.active {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 600;
}

.app-sidebar__icon {
    display: inline-flex;
    opacity: .9;
}

.app-sidebar__fuss {
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------- Topbar */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.app-topbar__suche { min-width: 18rem; }

/* Die Trefferliste der globalen Suche haengt unter dem Feld. Sie muss
   ueber der Kopfleiste liegen (die selbst z-index 1030 hat) und darf bei
   vielen Treffern nicht aus dem Bild wachsen. */
.app-topbar__treffer {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 1040;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    padding: 0;
}

.app-topbar__treffer .list-group-item-action.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

@media (min-width: 992px) {
    .app-topbar { padding: .625rem 2rem; }
    .app-topbar__suche { min-width: 24rem; }
}

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

.app-login {
    background: linear-gradient(160deg, var(--app-akzent) 0%, var(--app-akzent-hell) 55%, var(--bs-tertiary-bg) 55%);
    min-height: 100vh;
}

.app-login__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-weight: 700;
}

.app-login h1,
.app-login .text-secondary { color: rgba(255, 255, 255, .85) !important; }

/* Touchziele auf Mobilgeraeten grosszuegig halten (Zeiterfassung ab Phase 7). */
@media (max-width: 575.98px) {
    .btn, .form-control, .form-select { min-height: 2.75rem; }
}

/* ------------------------------------------------- Sortieren (Drag & Drop) */
/* Ab Phase 3 fuer die Reihenfolge der Zusatzfelder; Vorlagen und
   Arbeitsschritte (Phase 6) benutzen dieselben Klassen. */

[data-griff] {
    cursor: grab;
    user-select: none;
    line-height: 1;
}

[data-griff]:active { cursor: grabbing; }

.sortier-geist {
    opacity: .45;
    background: var(--bs-secondary-bg);
}

/* --------------------------------------------------- Gerätebaum (Phase 4) */

.geraete-baum ul {
    margin-left: .75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--bs-border-color);
}

.geraete-baum__ast + .geraete-baum__ast {
    border-top: 1px solid var(--bs-border-color-translucent);
}