/* GlasERP – Glaslager (Material → Glaslager, Desktop und Tablet; Mitarbeiter-App #/app/glaslager). Schwarz auf Weiss. */
.gl { color: var(--ink); }
.gl-kopf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.gl-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.gl-leiste input[type=search] { flex: 1 1 240px; min-width: 0; padding: 9px 10px; border: 1px solid #d7dbd9; border-radius: 4px; font-size: 14px; background: #fff; color: var(--ink); }
.gl-leiste select { flex: 0 1 220px; padding: 9px 10px; border: 1px solid #d7dbd9; border-radius: 4px; font-size: 14px; background: #fff; color: var(--ink); }
.gl-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.gl-stand-text { flex: 1 1 100%; font-size: 11.5px; }
.gl-fehler { padding: 10px 12px; border: 1px solid #e3bdb7; background: #fdf4f2; color: #8a271d; border-radius: 4px; margin-bottom: 10px; font-size: 13px; }
.gl-meldung { padding: 10px 12px; border: 1px solid #c4e0cf; background: #eaf4ee; color: #1c6b43; border-radius: 4px; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.gl-meldung-fehler { border-color: #e3bdb7; background: #fdf4f2; color: #8a271d; }
.gl-hinweis { font-size: 12px; color: var(--muted); margin: 4px 0 0; grid-column: 1 / -1; }
.gl-leer { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.gl-glas { background: #fff; border: 1px solid var(--line); border-radius: 5px; margin-bottom: 12px; overflow: hidden; }
.gl-glas-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 10px 13px; background: #f7f8f6; border-bottom: 1px solid var(--line); }
.gl-glas-kopf h3 { font-size: 15px; font-weight: 600; margin: 0; }
.gl-glas-kopf small { font-size: 12px; color: var(--muted); }
.gl-zeile { display: grid; grid-template-columns: 58px minmax(150px, 1fr) minmax(120px, 1fr) minmax(180px, 1.3fr) auto; align-items: center; gap: 8px 14px; padding: 9px 13px; border-top: 1px solid #eef0ed; font-size: 13.5px; }
.gl-zeile:first-of-type { border-top: 0; }
.gl-art { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #2f4f6f; background: #e7eef5; border-radius: 3px; padding: 3px 6px; text-align: center; }
.gl-rest .gl-art { color: #8a5a12; background: #fdf3e4; }
.gl-mass { font-variant-numeric: tabular-nums; font-weight: 600; }
.gl-ort { color: var(--ink); }
.gl-ort i { color: var(--muted); font-style: italic; }
.gl-zahlen { font-variant-numeric: tabular-nums; }
.gl-zahlen b { font-size: 16px; }
.gl-zahlen small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.gl-aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gl-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: #fdf3e4; color: #8a5a12; white-space: nowrap; vertical-align: middle; }
.gl-dialog { background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--ink); border-radius: 4px; padding: 14px 16px; margin-bottom: 14px; }
.gl-dialog h3 { font-size: 16px; margin: 0 0 6px; }
.gl-dialog-info { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.gl-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.gl-felder label { display: block; font-size: 12px; color: #62676b; font-weight: 500; }
.gl-felder input:not([type=radio]), .gl-felder select { display: block; width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid #d7dbd9; border-radius: 4px; font-size: 15px; background: #fff; color: var(--ink); min-width: 0; }
.gl-check-zeile { display: flex; gap: 16px; align-items: center; grid-column: 1 / -1; }
.gl-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); cursor: pointer; }
.gl-check input { width: 16px; height: 16px; accent-color: var(--ink); }
.gl-dialog-aktionen { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
/* Tablet und Handy: Zeile in zwei Reihen, Knöpfe fingergross; in der Mitarbeiter-App dieselben Regeln */
@media (max-width: 900px) {
  .gl-zeile { grid-template-columns: 58px 1fr; }
  .gl-ort, .gl-zahlen { grid-column: 2; }
  .gl-aktionen { grid-column: 1 / -1; justify-content: flex-start; }
  .gl-aktionen .btn, .gl-stand .btn { min-height: 44px; padding: 10px 14px; font-size: 14px; }
  .gl-leiste select { flex: 1 1 160px; }
  .gl-felder { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .gl-felder { grid-template-columns: 1fr; } }
.gl-app .page-head { display: none; }
.gl-app .gl-leiste input[type=search], .gl-app .gl-leiste select, .gl-app .gl-felder input:not([type=radio]), .gl-app .gl-felder select { min-height: 48px; font-size: 17px; border-radius: 10px; }
.gl-app .gl-zeile { font-size: 16px; }
.gl-app .gl-dialog-aktionen .btn, .gl-app .gl-leiste .btn { min-height: 48px; font-size: 16px; }
/* Haken «beschichtet» je Glassorte (Fabian 6.11.2026) */
.gl-beschichtet { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--ink); cursor: pointer; }
.gl-beschichtet input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: #111; }
.gl-sorten { margin: 12px 0; padding: 10px 13px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.gl-sorten summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.gl-sorten-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; margin-top: 8px; }
/* Sortenliste (Fabian 6.11.2026): alle Glassorten mit Lagerplattenmass, beschichtet und Bestand – eine Zeile je Artikel, Formate darunter */
.gl-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.gl-sorte { background: #fff; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.gl-sorte.gl-inaktiv { opacity: .75; }
.gl-sorte-zeile { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.2fr) minmax(140px, 1fr) minmax(120px, 1fr) minmax(90px, .8fr) 204px; align-items: center; gap: 4px 14px; padding: 5px 12px; background: #f7f8f6; font-size: 13px; }
.gl-sorte-kopf { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.2fr) minmax(140px, 1fr) minmax(120px, 1fr) minmax(90px, .8fr) 204px; align-items: center; gap: 4px 14px; padding: 2px 12px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.gl-s-titel { display: none !important; }
.gl-sorte-zeile small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.gl-s-name b { font-size: 14.5px; }
.gl-s-format { display: block; }
.gl-s-format .gl-s-wert { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 8px; }
.gl-s-format i { color: var(--muted); font-style: italic; font-weight: 400; }
.gl-s-format .btn { vertical-align: middle; }
.gl-s-bestand b, .gl-s-reste b { font-size: 16px; font-variant-numeric: tabular-nums; }
.gl-sorte .gl-zeile { padding-left: 24px; }
.gl-reste { border-top: 1px solid #eef0ed; }
.gl-reste summary { padding: 8px 24px; font-size: 12.5px; color: var(--muted); cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.gl-anzahl { font-weight: 600; color: var(--ink); }
.gl-beschichtet > span small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
@media (min-width: 901px) and (pointer: fine) { .gl-sorte-zeile .gl-beschichtet { min-height: 0; } }
/* Listen, Sortierung, Hellrot (Fabian 6.11.2026). Hellrot heisst: null gebuchte Originaltafeln, dazu steht es in Worten in der Zeile. */
.gl-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gl-reiter button { min-height: 40px; padding: 8px 14px; border: 1px solid #d7dbd9; border-radius: 4px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.gl-reiter button b { font-variant-numeric: tabular-nums; margin-left: 4px; }
.gl-reiter button.gl-reiter-an { background: var(--ink); border-color: var(--ink); color: #fff; }
.gl-sort-wahl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gl-sort-wahl label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0; }
.gl-sort-wahl select { flex: none; width: auto; }
.gl-sort-knopf { background: none; border: 0; padding: 3px 6px 3px 0; margin-right: 6px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.gl-sort-knopf.gl-sort-an { color: var(--ink); }
.gl-sorte.gl-null-original, .gl-sorte.gl-null-original .gl-sorte-zeile { background: #fdecea; }
.gl-sorte.gl-null-original { border-color: #f0cdc8; }
.gl-sorte-zeile small.gl-null-hinweis { color: #8a271d; font-weight: 600; }
.gl-standard { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; margin: 0; }
.gl-standard input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: #111; }
.gl-standard input:disabled { cursor: not-allowed; }
.gl-sorte-zeile .gl-aktionen { align-items: center; flex-wrap: nowrap; }
/* Plus und Minus an der Zahl (Fabian 6.11.2026) */
.gl-plusminus { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-right: 2px; }
.gl-plusminus b { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.gl-pm { width: 30px; height: 30px; flex: none; padding: 0; border: 1px solid #c9cdcb; border-radius: 4px; background: #fff; color: var(--ink); font: inherit; font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; touch-action: manipulation; }
.gl-pm:hover:not(:disabled) { background: #f0f1ef; }
.gl-pm:disabled { opacity: .35; cursor: not-allowed; }
/* Spaltenköpfe nur, wo die sechs Spalten Platz haben und mit der Maus sortiert wird; sonst die sichtbare Sortierwahl */
@media (min-width: 1241px) and (hover: hover) and (pointer: fine) { .gl-sort-wahl { display: none; } }
@media (max-width: 1240px), (pointer: coarse) {
  .gl-reiter button, .gl-sort-wahl .btn, .gl-sort-wahl select, .gl-standard, .gl-sort-knopf, .gl-aktionen .btn, .gl-s-format .btn, .gl-stand .btn { min-height: 44px; }
  .gl-pm { width: 44px; height: 44px; font-size: 22px; }
}
@media (max-width: 1240px) {
  .gl-sorte-kopf { display: none; }
  .gl-s-titel { display: block !important; }
  .gl-sorte-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 12px; }
  .gl-sorte-zeile .gl-aktionen { grid-column: auto; flex-wrap: wrap; justify-content: flex-end; }
  .gl-zeile { grid-template-columns: 58px minmax(120px, 1fr) minmax(90px, .8fr) minmax(130px, 1fr) auto; }
  .gl-sorte .gl-zeile { padding-left: 13px; }
}
@media (max-width: 900px) {
  .gl-zeile { grid-template-columns: 58px 1fr; }
  .gl-sorte-zeile .gl-aktionen { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 600px) { .gl-sorte-zeile { grid-template-columns: minmax(0, 1fr); } .gl-sorte-zeile .gl-aktionen { justify-content: flex-start; } }
/* Mitarbeiter-App: Die Spalte ist schmal, auch im breiten Fenster. Darum immer Karten und die sichtbare Sortierwahl. */
.gl-app .gl-reiter button { min-height: 48px; font-size: 16px; }
.gl-app .gl-sort-wahl { display: inline-flex; }
.gl-app .gl-sort-wahl select { min-height: 48px; font-size: 16px; border-radius: 10px; }
.gl-app .gl-standard { display: inline-flex; min-height: 48px; font-size: 16px; margin-right: 8px; }
.gl-app .gl-pm { width: 48px; height: 48px; font-size: 24px; border-radius: 10px; }
.gl-app .gl-beschichtet { display: inline-flex; }
.gl-app .gl-sorte-kopf { display: none; }
.gl-app .gl-s-titel { display: block !important; }
.gl-app .gl-sorte-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 12px; }
.gl-app .gl-sorte-zeile .gl-aktionen { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; }
.gl-app .gl-zeile { grid-template-columns: 58px 1fr; }
.gl-app .gl-ort, .gl-app .gl-zahlen { grid-column: 2; }
.gl-app .gl-zeile .gl-aktionen { grid-column: 1 / -1; justify-content: flex-start; }
.gl-app .gl-aktionen .btn, .gl-app .gl-s-format .btn, .gl-app .gl-stand .btn { min-height: 48px; }
@media (max-width: 600px) { .gl-app .gl-sorte-zeile { grid-template-columns: minmax(0, 1fr); } }