/* ===================
   Views - Gemeinsame Basis
   =================== */
.view {
    display: none;
    min-height: 100dvh;
    padding: 1rem;
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
    align-items: center;
    justify-content: center;
}

.view.active {
    display: flex;
}

#loader-view .ui.progress,
#login-view .login-form {
    width: 100%;
    max-width: 450px;
}

#main-view {
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    height: 100dvh;
    background: #f0f2f5;
}

#main-view .tab-content {
    flex: 1;
    overflow-y: auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 1.5rem;
    padding-left: calc(1.5rem + env(safe-area-inset-left));
    padding-right: calc(1.5rem + env(safe-area-inset-right));
    padding-top: calc(80px + env(safe-area-inset-top));
}

#main-view .ui.tab.active {
    width: 100%;
}

/* Top Navigation */
#main-view .ui.top.fixed.menu {
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    justify-content: center;
}

#main-view .ui.top.fixed.menu > .right.menu {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

#main-view .ui.top.fixed.menu .item {
    color: rgba(255,255,255,0.7);
}

#main-view .ui.top.fixed.menu .item.active {
    color: #fff;
    background: rgba(255,255,255,0.12);
    border-bottom: 3px solid #38a169;
}

#main-view .ui.top.fixed.menu .item:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

/* Section Headers */
#main-view h2.ui.header {
    color: #1a365d;
    margin-bottom: 1rem;
}

/* Secondary Menus (Eingang/Ausgang Sub-Tabs) */
#main-view .ui.secondary.menu .item.active {
    border-color: #2c5282;
    color: #1a365d;
}

/* Cards & Segments */
#main-view .ui.segment {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

#main-view .ui.placeholder.segment {
    border: 2px dashed #cbd5e0;
    background: #fff;
}

#main-view .ui.placeholder.segment:hover {
    border-color: #2c5282;
    background: #f7fafc;
}

/* Positive/Negative Messages */
#main-view .ui.positive.message {
    background: #f0fff4;
    border-left: 4px solid #38a169;
    box-shadow: none;
}

#main-view .ui.negative.message {
    background: #fff5f5;
    border-left: 4px solid #e53e3e;
    box-shadow: none;
}

/* Buttons */
#main-view .ui.primary.button {
    background: #2c5282;
}

#main-view .ui.primary.button:hover {
    background: #1a365d;
}

#main-view .ui.positive.button {
    background: #38a169;
}

#main-view .ui.positive.button:hover {
    background: #2f855a;
}

/* PDF Preview */
.pdf-container {
    display: flex;
    justify-content: center;
}

#pdf-canvas {
    max-width: 100%;
    height: auto;
}

.actions {
    display: flex;
    justify-content: center;
}

/* Ablagefeld waehrend eines Drag & Drop.
   Bewusst nur Farbe: Der Zustand darf weder die Groesse aendern noch
   'pointer-events' anfassen — genau daran hat das Feld frueher geflackert,
   siehe app.dropzone(). */
.ui.segment.dropzone-aktiv {
    border-color: #2185d0;
    background: #f0f7ff;
}

/* ===================
   Banderole der Testumgebung
   ===================
   Letztes Kind von #main-view und damit eine eigene Zeile in der Spalte: Der
   Inhalt darueber wird kleiner, verdeckt wird nichts. In der Menueleiste ging
   das nicht — die ist mittig gesetzt und ihr rechter Teil absolut
   positioniert, ein Schild dort schob sich ueber die Reiter.

   Rot, weil sie stoeren soll. Wer sie uebersieht, legt eine Testrechnung im
   echten Journal ab, und das Archiv vergisst nichts. */
#stage-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Ueber dem Inhalt, aber unter Fenstern und Meldungen: Ein Dialog soll
       sie verdecken duerfen. */
    z-index: 101;
    background: #C2564E;
    color: #fff;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    padding: 0.4rem 1rem;
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}

#stage-banner b {
    letter-spacing: 0.12em;
}

/* Platz fuer die Banderole, damit die letzte Zeile einer langen Liste nicht
   darunter liegt. Ohne Banderole ist die Variable nicht gesetzt und der Wert
   faellt auf 0 zurueck. */
#main-view .tab-content {
    padding-bottom: calc(1.5rem + var(--stage-banner-height, 0px));
}