/* ============================================================
   IPRO Integrations-Skin  —  "ein bisschen integriert"
   Leichte, NICHT-destruktive Vereinheitlichung aller Fach-Apps
   auf den Look der Startseite (GIMP-2012 / GTK2-Tango, hell).

   Wird per nginx-Include in jede App injiziert (vor </head>),
   zusaetzlich zur bestehenden IPRO-Kopfleiste + JS-Shim.

   PRINZIP: nur "Farbe/Schrift" (paint), KEINE Layout-Eigenschaften
   (kein display/position/float/width/height/margin), damit nichts
   umbricht. App-eigene Klassen-Styles gewinnen (hoehere Spezifitaet)
   -> wir vereinheitlichen nur Schrift, Akzent und Widget-Defaults.
   Stand: 2026-07-06
   ============================================================ */

@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#f7f6f2; --chrome-1:#f1efe9; --chrome-2:#e7e4dc; --chrome-3:#dcd8cf;
  --panel:#fbfaf7; --content:#ffffff; --canvas:#d5d1c7;
  --bd:#b9b4a8; --bd-lo:#9a9488; --hi:#ffffff;
  --ink:#23282a; --ink-2:#5a5c58; --ink-3:#8b8b83;
  --accent:#3465a4; --accent-lo:#729fcf; --accent-bg:#e9f0f8; --brass:#a9762f;
  --ok:#4e9a06; --warn:#f57900; --err:#cc0000;
  --ipro-ui:"IBM Plex Sans","Segoe UI","DejaVu Sans",system-ui,sans-serif;
  --ipro-mono:"IBM Plex Mono","DejaVu Sans Mono",ui-monospace,monospace;
  --r:3px; --r-card:4px;
}

/* --- Schrift vereinheitlichen (nur family, Groessen/Layout bleiben App) --- */
body{font-family:var(--ipro-ui)}
button,input,select,textarea,optgroup{font-family:var(--ipro-ui)}
code,pre,kbd,samp,tt{font-family:var(--ipro-mono)}

/* --- Akzent: Links --- */
a{color:var(--accent)}
a:hover{text-decoration:underline}

/* --- Selektion + Tastatur-Fokus --- */
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-lo);outline-offset:1px}

/* --- Buttons: gefaster Tango-Look (paint only; App-Klassen gewinnen) --- */
button,input[type=submit],input[type=button],input[type=reset]{
  color:var(--ink);
  background:linear-gradient(var(--content),var(--chrome-2));
  border:1px solid var(--bd);
  border-radius:var(--r);
  box-shadow:0 1px 0 var(--hi) inset;
}
button:hover,input[type=submit]:hover,input[type=button]:hover,input[type=reset]:hover{border-color:var(--accent-lo)}
button:active,input[type=submit]:active,input[type=button]:active,input[type=reset]:active{
  background:var(--chrome-3);box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}

/* --- Eingabefelder: weiss + Inset (paint only) --- */
input[type=text],input[type=number],input[type=email],input[type=password],
input[type=search],input[type=date],input[type=time],input[type=tel],input[type=url],
select,textarea{
  color:var(--ink);
  background:var(--content);
  border:1px solid var(--bd-lo);
  border-radius:var(--r);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.10);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-lo);outline-offset:-1px}

/* --- Tabellenkopf dezent im Chrome-Grau --- */
thead th,table th{background:var(--chrome-2);color:var(--ink);border-bottom:1px solid var(--bd)}

/* --- Scrollbalken dezent (nur WebKit/Blink) --- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--chrome-3);border:1px solid var(--bd);border-radius:6px}
::-webkit-scrollbar-track{background:var(--panel)}

/* Kopfleiste (#ipro-topbar) NICHT anfassen — kommt aus dem nginx-SHIM. */