/* ============================================================
   Werkzeugverwaltung -- zentrales Stylesheet (aus index.php ausgelagert)
   Wird von index.php eingebunden: <link rel="stylesheet" href="wzg_styles.css?v=1">
   Bei CSS-Aenderungen die Versionsnummer ?v=... hochzaehlen,
   damit Browser nicht die alte Datei aus dem Cache verwenden.
   ============================================================ */

  :root{
    --bg:#f0f0f0; --panel:#ffffff; --panel-2:#f6f7f9; --panel-3:#eef1f4;
    --border:#dde1e6; --border-strong:#c7cdd4;
    --text:#1a2e4a; --text-dim:#5b6b82; --text-faint:#8a8f98;
    --navy:#1a2e4a; --navy-light:#24406b;
    --orange:#e84e1b; --orange-dark:#c43f12; --orange-tint:#fdece4;
    --purple:#6a1b9a; --teal:#00796b;
    --amber:#f39c12; --amber-dim:#fdf1dc;
    --red:#d32f2f; --red-dim:#fbe4e2;
    --green:#2e7d32; --green-dim:#e5f2e6;
    --band:#e8f0fa; --subband:#f0f4fa;
    --mono:'IBM Plex Mono','Courier New',monospace;
    --sans:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
  .app{max-width:1220px;margin:0 auto;padding:0 0 80px;}

  /* Brand header */
  .brandbar{
    background:var(--panel);border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:16px;padding:14px 24px;flex-wrap:wrap;
  }
  .brandbar img{height:34px;width:auto;}
  .brandbar .wordmark{font-size:21px;font-weight:700;color:var(--orange);letter-spacing:0.01em;}
  .brandbar .divider{width:1px;height:26px;background:var(--border-strong);}
  .brandbar h1{margin:0;font-size:19px;font-weight:600;color:var(--navy);}
  .brandbar p{margin:1px 0 0;font-size:12.5px;color:var(--text-dim);}

  /* Orange nav / tab bar */
  .navbar{
    background:var(--orange);display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding:0 24px;flex-wrap:wrap;
  }
  .tabs{display:flex;gap:2px;flex-wrap:wrap;}
  .tab{
    font-family:var(--sans);font-size:13px;font-weight:500;color:#ffe8dd;
    background:none;border:none;padding:12px 16px;cursor:pointer;
    border-bottom:3px solid transparent;
  }
  .tab:before{content:"\25ba  ";font-size:10px;} /* \25ba = Pfeil-Symbol; erstes Leerzeichen beendet nur den Escape */
  .tab:hover{color:#fff;background:rgba(255,255,255,0.08);}
  .tab.active{color:#fff;border-bottom-color:#fff;}
  .panel{display:none;}
  .panel.active{display:block;}

  .abteilung-wrap{padding:10px 0;}
  .abteilung-select{
    font-family:var(--sans);font-size:12.5px;font-weight:500;
    color:var(--navy);background:#ffffff;border:1px solid transparent;border-radius:5px;
    padding:6px 28px 6px 12px;width:auto;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%231a2e4a'/></svg>");
    background-repeat:no-repeat;background-position:right 10px center;appearance:none;-webkit-appearance:none;cursor:pointer;
  }
  .abteilung-select:focus{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,0.6);}

  .chips{display:flex;gap:8px;flex-wrap:wrap;padding:14px 24px 0;}
  .chip{font-family:var(--sans);font-size:12px;font-weight:500;padding:5px 12px;border-radius:20px;background:var(--band);border:1px solid #cfe0f2;color:var(--navy);}

  .inner{padding:20px 24px 0;}

  /* Cards / layout */
  .grid2{display:grid;grid-template-columns:430px 1fr;gap:20px;align-items:start;}
  @media (max-width:900px){.grid2{grid-template-columns:1fr;}}
  /* --- "+"-Muster: Anlege-Formulare sind eingeklappt, bis das grosse Plus gedrueckt wird ---
     Generisch fuer alle Bereiche (Stammdaten, Spannmittel, Messmittel, Vorrichtungen, Lager). */
  .neu-bar{display:flex;align-items:center;gap:12px;margin:0 0 16px;}
  .btn-neu{width:46px;height:46px;border-radius:50%;border:none;background:var(--orange);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px;box-shadow:0 2px 6px rgba(232,78,27,0.35);}
  .btn-neu:hover{background:var(--orange-dark);}
  .btn-neu.offen{background:var(--navy);box-shadow:none;}
  .neu-label{font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;user-select:none;}
  .grid2.form-collapsed{grid-template-columns:1fr;}
  .grid2.form-collapsed > .form-card{display:none;}
  /* --- Erfolgsmeldung nach dem Speichern (oben auf der Seite) --- */
  .save-msg{background:var(--green-dim);border:1px solid #bfe0c1;color:var(--green);border-radius:6px;padding:11px 14px;margin:0 0 16px;font-size:13.5px;font-weight:600;}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:18px 20px;box-shadow:0 1px 2px rgba(26,46,74,0.04);}
  .card h2{font-size:15px;margin:0 0 4px;font-weight:600;color:var(--navy);}
  .card .sub{font-size:12px;color:var(--text-faint);margin:0 0 16px;}

  fieldset{border:1px solid var(--border);border-radius:6px;padding:12px 14px 14px;margin:0 0 14px;background:var(--panel-2);}
  fieldset legend{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--navy);font-weight:600;padding:0 6px;white-space:nowrap;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
  .field-row.single{grid-template-columns:1fr;}
  .field-row.triple{grid-template-columns:1fr 1fr 1fr;}
  /* Fix Feld-Ausrichtung: Labels wie "Anzahl Schneiden/Z&auml;hne" brechen auf 2 Zeilen um
     und schoben bisher ihr Eingabefeld nach unten (z.B. gegenueber "Max. Nutzlaenge NL").
     Loesung: jede Zelle wird Flex-Spalte, Inhalte unten ausgerichtet ->
     alle Inputs einer Zeile stehen auf gleicher Hoehe. */
  .field-row > div{display:flex;flex-direction:column;justify-content:flex-end;}
  .field-row > div.field-hidden, [data-field].field-hidden{display:none !important;}
  .settings-link{color:#ffe8dd;text-decoration:none;font-size:17px;line-height:1;padding:6px 8px;border-radius:5px;}
  .settings-link:hover{color:#fff;background:rgba(255,255,255,0.12);}
  label{display:block;font-size:11.5px;color:var(--text-dim);margin-bottom:4px;font-weight:500;}
  label .req{color:var(--orange);}
  input[type=text], input[type=number], input[type=date], input[type=datetime-local], select, textarea{
    width:100%;background:#ffffff;border:1px solid var(--border-strong);border-radius:5px;
    color:var(--text);font-size:13px;padding:8px 10px;font-family:var(--sans);
  }
  textarea{font-family:var(--sans);resize:vertical;min-height:44px;}
  input:focus, select:focus, textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 2px var(--orange-tint);}
  input[type=file]{width:100%;font-size:12px;color:var(--text-dim);}

  .btn{
    font-family:var(--sans);font-size:13px;font-weight:600;
    background:#ffffff;border:1px solid var(--border-strong);color:var(--navy);
    padding:9px 16px;border-radius:6px;cursor:pointer;
  }
  .btn:hover{background:var(--panel-3);}
  .btn-primary{background:var(--orange);border-color:var(--orange);color:#ffffff;}
  .btn-primary:hover{background:var(--orange-dark);border-color:var(--orange-dark);}
  .btn-small{padding:5px 10px;font-size:12px;}
  .btn-ghost{background:none;border:1px solid var(--border-strong);color:var(--text-dim);}
  .btn-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}

  table{width:100%;border-collapse:collapse;font-size:13px;}
  thead th{
    text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:0.05em;
    color:#ffffff;font-weight:600;padding:10px 10px;background:var(--navy);
    border-bottom:1px solid var(--navy);white-space:nowrap;
  }
  tbody td{padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--text);}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--panel-2);}
  tbody tr.row-clickable{cursor:pointer;}
  td.mono{font-family:var(--mono);font-size:12.5px;color:var(--text-dim);}
  .table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:8px;}
  .table-scroll table{background:var(--panel);}
  .empty{padding:30px;text-align:center;color:var(--text-faint);font-size:13px;}

  .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;}
  .status-green{background:var(--green);} .status-yellow{background:var(--amber);} .status-red{background:var(--red);}
  .status-label{font-size:12.5px;}

  .badge{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--band);color:var(--navy);border:1px solid #cfe0f2;}
  .badge-amber{background:var(--amber-dim);color:#a5670a;border-color:#f3d9a6;}
  .badge-red{background:var(--red-dim);color:var(--red);border-color:#f3c6c2;}

  .comp-row{display:grid;grid-template-columns:1fr 1.4fr 80px 32px;gap:8px;margin-bottom:8px;align-items:center;}
  .comp-row select, .comp-row input{margin:0;}
  .icon-btn{background:#ffffff;border:1px solid var(--border-strong);color:var(--orange);border-radius:5px;width:32px;height:32px;cursor:pointer;font-size:15px;line-height:1;}
  .icon-btn:hover{color:#ffffff;background:var(--orange);border-color:var(--orange);}

  .toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
  .toolbar input[type=text]{flex:1;min-width:200px;}
  .toolbar select{width:auto;}
  .uppercase-input{text-transform:uppercase;}
  .note{margin-top:18px;padding:12px 16px;border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:4px;background:var(--panel);font-size:12.5px;color:var(--text-dim);line-height:1.6;}
  .note strong{color:var(--orange-dark);}
  .hint{font-size:11.5px;color:var(--text-faint);margin-top:-4px;margin-bottom:10px;}
  .lager-instance{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:5px;margin-bottom:6px;font-size:13px;}
  .lager-instance .id{font-family:var(--mono);color:var(--navy);font-weight:600;}
  .warn-box{background:var(--amber-dim);border:1px solid #f3d9a6;border-radius:6px;padding:10px 14px;margin-bottom:14px;font-size:12.5px;color:#a5670a;}