/* =========================================================================
   Leistungsnachweis-Webmodul · Stylesheet
   Touch-optimiert fuer iPad / Android-Tablet. Lesbare Farben (kein
   Schrift=Hintergrund), grosszuegige Weissraeume, keine Ueberschneidungen,
   feste Statusleiste unten.
   BCS EDV-Systeme GmbH · Dipl.-Inform. (FH) Peter Pawlowski · keine Haftung
   ========================================================================= */

:root {
    /* Desktop-Theme (Navy + Orange), 1:1 aus Services/AppTheme.cs */
    --navy:         #1F3A5F;   /* Primary */
    --navy-dark:    #14223A;   /* Sidebar-Hintergrund */
    --navy-active:  #122A47;
    --navy-hover:   #213555;   /* Sidebar-Hover */
    --orange:       #E87A1E;   /* Accent / aktiv */
    --orange-hover: #FF953A;
    --sidebar-fg:   #E5E9EF;
    --sidebar-head: #8B95A8;

    /* Bisherige Variablennamen auf das neue Theme abbilden */
    --gruen:        var(--navy);
    --gruen-hell:   var(--orange);
    --gruen-blass:  #EAF0F7;   /* navy-blass */
    --text:         #1A1F2C;
    --grau:         #6B7380;
    --linie:        #E2E6EB;
    --weiss:        #ffffff;
    --warn:         #C92A2A;
    --statusbar-h:  34px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 15px;
    color: var(--text);
    background: #F7F8FA;
}

body {
    /* Platz fuer die fixe Statusleiste am unteren Rand, nichts wird verdeckt. */
    padding-bottom: calc(var(--statusbar-h) + 12px);
    min-height: 100vh;
}

/* ---- Kopfleiste ------------------------------------------------------- */
.topbar {
    background: var(--gruen);
    color: var(--weiss);
}
.topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.brand     { font-size: 20px; font-weight: 700; }
.brand-sub { font-size: 15px; opacity: .9; }
.topnav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 15px;
}
.topnav a      { color: #eaf3e5; text-decoration: none; }
.topnav a:hover{ text-decoration: underline; }
.topnav .user  { opacity: .85; }
.topnav .logout{ background: rgba(255,255,255,.15); padding: 6px 12px; border-radius: 6px; }

.statusbar-info {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 18px;
    background: var(--gruen-blass);
    color: var(--grau);
    font-size: 14px;
    border-bottom: 1px solid var(--linie);
}

/* ---- Inhalt ----------------------------------------------------------- */
.content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 18px 28px;
}

h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 18px; margin: 22px 0 10px; }

.card {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* ---- Formularelemente (touch-freundlich) ------------------------------ */
label { display: block; font-size: 14px; color: var(--grau); margin-bottom: 4px; }

input[type=text], input[type=password], input[type=time],
input[type=date], input[type=number], select, textarea {
    width: 100%;
    padding: 11px 12px;
    font-size: 16px;          /* >=16px verhindert Auto-Zoom auf iOS */
    color: var(--text);
    background: var(--weiss);
    border: 1px solid #aab6a2;
    border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(31,58,95,.18);
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 18px; }
.field { margin-bottom: 14px; }

.btn {
    display: inline-block;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--weiss);
    background: var(--gruen);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover     { background: var(--navy-active); }
.btn.sekundaer { background: var(--weiss); color: var(--gruen); border: 1px solid var(--gruen); }
.btn.gross     { width: 100%; padding: 16px; font-size: 18px; }
.btn:disabled  { opacity: .5; cursor: default; }

.hinweis { color: var(--grau); font-size: 14px; }
.fehler  { color: var(--warn); font-weight: 600; }
.erfolg  { color: var(--gruen); font-weight: 600; }

/* ---- Nachweis-Tabelle ------------------------------------------------- */
.tabelle-wrap { overflow-x: auto; }
table.nachweis {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
table.nachweis th, table.nachweis td {
    border: 1px solid var(--linie);
    padding: 8px 8px;
    text-align: center;
    white-space: nowrap;
}
table.nachweis thead th {
    background: var(--gruen);
    color: var(--weiss);
    font-weight: 600;
    position: sticky; top: 0;
}
table.nachweis tbody tr:nth-child(even) { background: #f7faf5; }
table.nachweis td.tag      { font-weight: 600; width: 44px; }
table.nachweis td.fachstd  { font-variant-numeric: tabular-nums; font-weight: 600; }
table.nachweis td input    { width: 92px; padding: 8px; text-align: center; }
table.nachweis td.unterschrift { min-width: 130px; }
table.nachweis tr.heute    { outline: 2px solid var(--gruen-hell); }
table.nachweis tfoot td {
    background: var(--gruen-blass);
    font-weight: 700;
    text-align: right;
}
.sig-thumb { height: 38px; vertical-align: middle; }
.sig-status-offen { color: var(--warn); font-size: 13px; }

/* ---- Unterschrift-Dialog (Touch-Canvas) ------------------------------- */
.modal-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center; justify-content: center;
    z-index: 50;
    padding: 16px;
}
.modal-bg.offen { display: flex; }
.modal {
    background: var(--weiss);
    border-radius: 12px;
    padding: 18px;
    width: 100%;
    max-width: 560px;
}
.modal h2 { margin-top: 0; }
canvas.signpad {
    width: 100%;
    height: 220px;
    background: #fffdf6;
    border: 2px dashed #aab6a2;
    border-radius: 8px;
    touch-action: none;   /* verhindert Scrollen beim Zeichnen */
}
.modal-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.modal-actions .btn { flex: 1 1 120px; text-align: center; }

/* ---- Statusleiste unten (fix) ----------------------------------------- */
.statusbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--statusbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    background: var(--navy-dark);
    color: #c7cedb;
    font-size: 12px;
    z-index: 40;
}
.status-left  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-right { white-space: nowrap; }

/* ---- Login ------------------------------------------------------------ */
.login-wrap { max-width: 380px; margin: 8vh auto 0; }
.login-wrap .card { padding: 26px 24px; }

/* ---- Responsiv -------------------------------------------------------- */
@media (max-width: 720px) {
    .grid2, .grid3 { grid-template-columns: 1fr; }
    .brand-sub { display: none; }
}

/* =========================================================================
   Verwaltungs-App: Shell mit Seitenleiste
   ========================================================================= */
.burger {
    display: none;
    background: rgba(255,255,255,.15);
    color: #fff; border: none; border-radius: 6px;
    font-size: 18px; line-height: 1; padding: 6px 12px; cursor: pointer;
    margin-right: 4px;
}

.app-shell {
    display: flex;
    align-items: stretch;
    max-width: 1280px;
    margin: 0 auto;
    min-height: calc(100vh - 52px - var(--statusbar-h));
}

.sidebar {
    flex: 0 0 250px;
    background: var(--sidebar-bg);
    padding: 0 10px 24px;
    overflow-y: auto;
}
.nav-back { padding: 12px 2px 6px; }
.btn-back {
    display: block; text-align: center;
    padding: 9px 12px; border-radius: 8px;
    background: var(--navy-hover); color: var(--sidebar-fg);
    text-decoration: none; font-size: 14px; font-weight: 600;
    border: 1px solid #2c436a;
}
.btn-back:hover { background: #2c436a; }
.nav-bereich {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sidebar-head);
    margin: 16px 10px 4px;
    font-weight: 700;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin: 1px 0;
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--sidebar-fg);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.nav-item .nav-ico { width: 20px; text-align: center; flex: 0 0 20px; }
.nav-item .nav-txt { flex: 1 1 auto; }
.nav-item:hover { background: var(--navy-hover); }
.nav-item.aktiv {
    background: var(--navy-hover);
    border-left-color: var(--orange);
    color: #fff; font-weight: 600;
}
.nav-item.gesperrt { color: #7d889c; cursor: default; }
.nav-item.gesperrt em {
    font-style: normal; font-size: 10px; color: var(--navy-dark);
    background: #6b7790; border-radius: 10px; padding: 1px 7px;
}

/* Logo im Kopf */
.topbar-logo { height: 30px; width: auto; display: block; }

.app-content { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding: 20px 22px 28px; }

/* Datentabelle (Listen) */
table.daten {
    width: 100%; border-collapse: collapse; font-size: 15px; background: var(--weiss);
}
table.daten th, table.daten td {
    border-bottom: 1px solid var(--linie); padding: 9px 10px; text-align: left;
}
table.daten thead th { background: var(--gruen-blass); color: var(--grau); font-weight: 600; white-space: nowrap; }
table.daten tbody tr:hover { background: #f7faf5; }
table.daten td.aktionen { text-align: right; white-space: nowrap; }

.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .such { flex: 1 1 240px; }
.toolbar .such input { width: 100%; }

.pager { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.pager a, .pager span {
    padding: 7px 12px; border: 1px solid var(--linie); border-radius: 7px;
    text-decoration: none; color: var(--text); background: var(--weiss);
}
.pager .akt { background: var(--gruen); color: #fff; border-color: var(--gruen); }

.ico { font-style: normal; margin-right: 4px; }
.field.breit { grid-column: 1 / -1; }

.dash-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 18px; }
.kachel .zahl { font-size: 30px; font-weight: 700; color: var(--gruen); }
.kachel .txt { color: var(--grau); margin-top: 4px; }

/* Seitenleiste auf schmalen Geraeten ein-/ausklappbar */
@media (max-width: 860px) {
    .burger { display: inline-block; }
    .sidebar {
        position: fixed; top: 52px; bottom: var(--statusbar-h); left: 0; z-index: 30;
        transform: translateX(-100%); transition: transform .2s; box-shadow: 2px 0 8px rgba(0,0,0,.15);
    }
    body.nav-offen .sidebar { transform: translateX(0); }
}

/* =========================================================================
   Desktop-getreue Oberfläche (Navy/Orange · Master-Detail · HeaderPanel)
   ========================================================================= */
:root { --header-h: 56px; }

/* Kopfbalken – nachempfunden HeaderPanel (Navy-Verlauf, Logo rechts, orange Linie) */
.appheader {
    position: sticky; top: 0; z-index: 35;
    height: var(--header-h);
    display: flex; align-items: center; gap: 14px;
    padding: 0 18px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy-active) 100%);
    border-bottom: 3px solid var(--orange);
}
.appheader .burger {
    display: none; background: rgba(255,255,255,.14); color:#fff; border:none;
    border-radius:6px; font-size:18px; line-height:1; padding:6px 11px; cursor:pointer;
}
.appheader-text { display:flex; flex-direction:column; justify-content:center; }
.appheader-titel { color:#fff; font-size:17px; font-weight:600; line-height:1.15; }
.appheader-sub { color:#C8D3E2; font-size:12px; }
.appheader-logo { height:36px; width:auto; margin-left:auto; background:#fff; border-radius:4px; padding:2px 6px; }
.appheader-logout {
    color:#dbe3ee; text-decoration:none; font-size:14px;
    background:rgba(255,255,255,.12); padding:7px 14px; border-radius:6px;
}
.appheader-logout:hover { background:rgba(255,255,255,.22); }

.app-shell { min-height: calc(100vh - var(--header-h) - var(--statusbar-h)); }

/* Weiße, monochrome Icons in der Sidebar */
.nav-ico { display:inline-flex; align-items:center; width:20px; height:20px; flex:0 0 20px; color: var(--sidebar-fg); }
.ico-svg { width:20px; height:20px; }
.nav-item.gesperrt .nav-ico { color:#6b7790; }
.nav-item.aktiv .nav-ico { color:#fff; }

/* Maskentitel (dunkel, wie titleLabel der Desktop-Maske) */
.masken-titel { font-size:24px; font-weight:700; color: var(--text); margin:2px 0 2px; }
.masken-sub { color: var(--grau); font-size:14px; margin:0 0 16px; }

/* Karten mit Titelzeile (Card.CardTitle „Liste" / „Details") */
.karte { background:#fff; border:1px solid var(--linie); border-radius:8px; box-shadow:0 1px 2px rgba(20,34,58,.05); }
.karte-kopf { padding:11px 16px; border-bottom:1px solid var(--linie); font-weight:600; color: var(--navy); font-size:14px; }
.karte-inhalt { padding:14px 16px; }

/* Master-Detail-Aufteilung (SplitContainer) */
.md-split { display:flex; gap:16px; align-items:flex-start; }
.md-list { flex:0 0 420px; max-width:420px; }
.md-detail { flex:1 1 auto; min-width:0; }
@media (max-width: 980px){
    .md-split { flex-direction:column; }
    .md-list { flex-basis:auto; max-width:none; width:100%; }
}

/* Button-Varianten (PrimaryButton: Primary/Secondary/Danger/Ghost) */
.btn { border-radius:6px; }
.btn.gefahr { background: var(--warn); }
.btn.gefahr:hover { background:#E03E3E; }
.btn.ghost { background:#fff; color: var(--navy); border:1px solid var(--linie); }
.btn.ghost:hover { background:#ECEFF3; }

/* Datentabelle in der Listen-Karte */
.karte .daten thead th { background:#fff; color: var(--grau); border-bottom:2px solid var(--linie); }
.karte .daten tbody tr { cursor:pointer; }
.karte .daten tbody tr.aktiv { background:#E8EEF6; }
.karte .daten tbody tr.aktiv td:first-child { box-shadow: inset 3px 0 0 var(--orange); }

@media (max-width: 860px){
    .appheader .burger { display:inline-block; }
    .sidebar { top: var(--header-h); }
}