/* ==========================================================================================
   FIX 2026-09-23 21:20 HanwareWebERP (Views modernisieren): Gemeinsames Seiten-Design fuer die
   Bereiche "Offene Posten" und "Einstellungen". Loest das alte Inspinia-Design (ibox/panel/
   wrapper-content) ab. Bisher trug jede modernisierte Seite ihr eigenes <style> im Kopf - das
   waere bei 25 Seiten nicht pflegbar. Einbindung je View ueber:
       @section Styles { <link rel="stylesheet" href="~/Content/hw-seiten.css?v=..." /> }
   Farben und Rundungen folgen der bereits eingefuehrten Hanware-Optik (Navy/Blau, 16 px Karten).
   ========================================================================================== */

.hs {
    --navy: #1e3a5f;
    --blau: #2563eb;
    --blau-d: #1e40af;
    --blau-h: #eff6ff;
    --blau-r: #bfdbfe;
    --s50: #f8fafc;
    --s100: #f1f5f9;
    --s200: #e2e8f0;
    --s400: #94a3b8;
    --s500: #64748b;
    --s600: #475569;
    --s900: #0f172a;
    --gruen: #16a34a;
    --gruen-h: #dcfce7;
    --rot: #dc2626;
    --rot-h: #fef2f2;
    --amber: #d97706;
    --amber-h: #fef3c7;

    background: var(--s100);
    color: var(--s900);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 18px 18px 60px;
    min-height: calc(100vh - 60px);
}

/* ---------------------------------------------------------------- Kopfbereich */
.hs-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.hs-head .hs-ic {
    width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
    background: linear-gradient(135deg, var(--blau), var(--navy));
    box-shadow: 0 6px 16px rgba(37,99,235,.30);
}
.hs-head h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.4px; }
.hs-head small { display: block; font-size: 12.5px; color: var(--s500); font-weight: 500; margin-top: 2px; }
/* FIX 2026-10-14 01:32 HanwareWebERP (Programmname mit Edition, Auftrag HanwareWebSeiteNeu/Anwender 14.10.2026): Kennzeichen „Hanware Web ERP (Cloud)“ im Handbuchkopf */
.hw-prog { font-size: 11.5px; font-weight: 700; color: var(--blau); letter-spacing: .2px; margin: 0 0 1px; line-height: 1.3; }
.hw-prog-edition, .hs-head .hw-prog-edition { display: inline; font-size: 78%; font-weight: 600; opacity: .72; margin: 0; color: inherit; }
.hs-head-akt { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Karte */
.hs-card {
    background: #fff; border: 1px solid var(--s200); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04); margin-bottom: 18px; overflow: hidden;
}
.hs-card-head {
    display: flex; align-items: center; gap: 10px; padding: 13px 18px;
    background: linear-gradient(135deg, var(--blau), var(--navy)); color: #fff;
}
.hs-card-head .chip {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
    background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.hs-card-head h3 { margin: 0; font-size: 15.5px; font-weight: 700; flex: 1; color: #fff; }
.hs-card-head .cnt { background: rgba(255,255,255,.18); border-radius: 20px; padding: 2px 11px; font-size: 12px; font-weight: 700; }
.hs-card-head .hs-btn { background: rgba(255,255,255,.18); color: #fff; border: 0; }
.hs-card-head .hs-btn:hover { background: rgba(255,255,255,.30); color: #fff; }
.hs-card-body { padding: 16px 18px; }
.hs-card-body.flach { padding: 0; }

/* ---------------------------------------------------------------- Formular */
.hs-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 16px; }
.hs-form.zwei { grid-template-columns: repeat(2, 1fr); }
.hs-form.eins { grid-template-columns: 1fr; }
.hs-feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hs-feld.voll { grid-column: 1 / -1; }
.hs-feld > label {
    font-size: 11.5px; font-weight: 700; color: var(--s600);
    text-transform: uppercase; letter-spacing: .4px; margin: 0;
}
.hs-feld .pflicht { color: var(--rot); }
.hs-feld .hinweis { font-size: 11.5px; color: var(--s400); }

.hs-input, .hs-select, select.hs-input {
    height: 38px; border: 1px solid var(--s200); border-radius: 9px; padding: 0 11px;
    font-size: 14px; background: #fff; width: 100%; outline: none; color: var(--s900);
    transition: border-color .12s, box-shadow .12s;
}
textarea.hs-input { height: auto; padding: 9px 11px; line-height: 1.5; }
.hs-input:focus, .hs-select:focus { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }
.hs-input[readonly], .hs-input[disabled] { background: var(--s100); color: var(--s500); }

.hs-check { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--s50); border: 1px solid var(--s200); border-radius: 9px; }
.hs-check input { width: 17px; height: 17px; accent-color: var(--blau); flex: 0 0 auto; }
.hs-check label { margin: 0; font-size: 13px; font-weight: 600; color: var(--s600); text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------- Schaltflaechen */
.hs-btn {
    border: 0; border-radius: 9px; height: 38px; padding: 0 16px;
    font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    color: #fff; background: linear-gradient(135deg, var(--blau), var(--blau-d));
    box-shadow: 0 3px 10px rgba(37,99,235,.25); transition: filter .12s;
}
.hs-btn:hover, .hs-btn:focus { filter: brightness(1.06); color: #fff; text-decoration: none; }
.hs-btn[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.hs-btn.ghost { background: #fff; color: var(--blau-d); border: 1px solid var(--s200); box-shadow: none; }
.hs-btn.ghost:hover { background: var(--blau-h); color: var(--blau-d); }
.hs-btn.gruen { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 3px 10px rgba(22,163,74,.25); }
.hs-btn.rot { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 3px 10px rgba(220,38,38,.25); }
.hs-btn.amber { background: linear-gradient(135deg, #f59e0b, #b45309); box-shadow: 0 3px 10px rgba(217,119,6,.25); }
.hs-btn.navy { background: linear-gradient(135deg, #1e3a5f, #0f2540); box-shadow: 0 3px 10px rgba(30,58,95,.28); }
.hs-btn.klein { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; box-shadow: none; }
.hs-akt { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 15px; }

/* Kleine Symbol-Schaltflaeche in Tabellen */
.hs-ibtn {
    background: var(--s50); color: var(--s600); border: 1px solid var(--s200);
    border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer; line-height: 1.4;
}
.hs-ibtn:hover { background: var(--blau-h); color: var(--blau-d); }
.hs-ibtn.rot { background: var(--rot-h); color: #b91c1c; border-color: #fecaca; }
.hs-ibtn.rot:hover { background: #fee2e2; }
.hs-ibtn.gruen { background: var(--gruen-h); color: #15803d; border-color: #bbf7d0; }

/* ---------------------------------------------------------------- Werkzeugleiste / Filter */
.hs-toolbar {
    display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    padding: 13px 16px; background: #fff; border: 1px solid var(--s200);
    border-radius: 14px; margin-bottom: 16px;
}
.hs-toolbar .hs-feld { min-width: 150px; }
.hs-toolbar .rechts { margin-left: auto; display: flex; gap: 8px; align-items: flex-end; }

/* ---------------------------------------------------------------- Tabelle */
.hs-tab-wrap { width: 100%; overflow-x: auto; }
table.hs-tab { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
table.hs-tab thead th {
    background: var(--navy); color: #fff; font-weight: 600; text-align: left;
    padding: 10px 12px; white-space: nowrap; font-size: 12.5px;
    position: sticky; top: 0; z-index: 2;
}
table.hs-tab thead th.r { text-align: right; }
table.hs-tab thead th.c { text-align: center; }
table.hs-tab tbody td { padding: 9px 12px; border-bottom: 1px solid var(--s100); vertical-align: middle; }
table.hs-tab tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.hs-tab tbody td.c { text-align: center; }
table.hs-tab tbody tr:nth-child(even) td { background: #fcfdfe; }
table.hs-tab tbody tr:hover td { background: var(--blau-h); }
table.hs-tab tbody tr.klickbar { cursor: pointer; }
table.hs-tab tfoot td { padding: 10px 12px; font-weight: 700; background: var(--s50); border-top: 2px solid var(--s200); }
table.hs-tab tfoot td.r { text-align: right; font-variant-numeric: tabular-nums; }
.hs-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Kennzahlen */
.hs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; margin-bottom: 18px; }
.hs-kpi { background: #fff; border: 1px solid var(--s200); border-radius: 14px; padding: 14px 16px; }
.hs-kpi .lbl { font-size: 11.5px; font-weight: 700; color: var(--s500); text-transform: uppercase; letter-spacing: .4px; }
.hs-kpi .wert { font-size: 23px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
.hs-kpi.blau .wert { color: var(--blau-d); }
.hs-kpi.gruen .wert { color: #15803d; }
.hs-kpi.rot .wert { color: #b91c1c; }
.hs-kpi.amber .wert { color: #b45309; }

/* ---------------------------------------------------------------- Abzeichen / Meldungen */
.hs-badge {
    display: inline-block; border-radius: 20px; padding: 2px 10px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    background: var(--s100); color: var(--s600);
}
.hs-badge.gruen { background: var(--gruen-h); color: #15803d; }
.hs-badge.rot { background: var(--rot-h); color: #b91c1c; }
.hs-badge.amber { background: var(--amber-h); color: #92400e; }
.hs-badge.blau { background: var(--blau-h); color: var(--blau-d); }

.hs-hinweis { border-radius: 10px; padding: 11px 14px; font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.hs-hinweis.info { background: var(--blau-h); border: 1px solid var(--blau-r); color: var(--navy); }
.hs-hinweis.ok { background: var(--gruen-h); border: 1px solid #86efac; color: #166534; }
.hs-hinweis.warn { background: var(--amber-h); border: 1px solid #fde68a; color: #92400e; }
.hs-hinweis.err { background: var(--rot-h); border: 1px solid #fecaca; color: #b91c1c; }

.hs-leer { text-align: center; color: var(--s400); padding: 34px 18px; font-size: 13.5px; }
.hs-leer i { display: block; font-size: 30px; margin-bottom: 9px; color: var(--s200); }

/* ---------------------------------------------------------------- Registerkarten */
.hs-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--s200); margin-bottom: 16px; flex-wrap: wrap; }
.hs-tabs a {
    padding: 9px 15px; font-size: 13.5px; font-weight: 600; color: var(--s500);
    text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.hs-tabs a:hover { color: var(--blau-d); }
.hs-tabs a.aktiv { color: var(--blau-d); border-bottom-color: var(--blau); }

/* ---------------------------------------------------------------- Responsiv / Druck */
@media (max-width: 1100px) { .hs-form { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
    .hs { padding: 12px 12px 48px; }
    .hs-form, .hs-form.zwei { grid-template-columns: 1fr; }
    .hs-head-akt { margin-left: 0; width: 100%; }
    .hs-toolbar .rechts { margin-left: 0; width: 100%; }
}
@media print {
    .hs { background: #fff; padding: 0; }
    .hs-card { box-shadow: none; border-color: #ccc; }
    .hs-btn, .hs-ibtn, .hs-toolbar, .hs-head-akt { display: none !important; }
    table.hs-tab thead th { background: #eee !important; color: #000 !important; }
}

/* ---------------------------------------------------------------- Listen: Summenspalte / Fusszeile */
/* FIX 2026-09-23 22:50 HanwareWebERP (Views modernisieren): fuer die Auswertungen unter Offene Posten. */
table.hs-tab td.hw-summe { background: var(--blau-h) !important; font-weight: 700; color: var(--blau-d); }
table.hs-tab tr.hw-fuss td { background: var(--s100); font-weight: 700; }
table.hs-tab td.minus, table.hs-tab td .minus { color: #b91c1c; }
table.hs-tab td.plus { color: #15803d; }

/* ---------------------------------------------------------------- DataTables im neuen Design */
.hs .dataTables_wrapper { padding: 10px 12px 4px; }
.hs .dataTables_wrapper .dataTables_filter input,
.hs .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--s200); border-radius: 8px; padding: 5px 9px; font-size: 13px; background: #fff;
}
.hs .dataTables_wrapper .dataTables_filter { margin-bottom: 8px; }
.hs .html5buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.hs .html5buttons .dt-button {
    background: #fff; border: 1px solid var(--s200); border-radius: 8px; padding: 5px 12px;
    font-size: 12.5px; font-weight: 600; color: var(--blau-d); cursor: pointer;
}
.hs .html5buttons .dt-button:hover { background: var(--blau-h); }
.hs table.hs-tab.dataTable thead th { border-bottom: 0; }
.hs table.hs-tab.dataTable thead th.sorting:after,
.hs table.hs-tab.dataTable thead th.sorting_asc:after,
.hs table.hs-tab.dataTable thead th.sorting_desc:after { color: rgba(255,255,255,.75); }