/* forms.css - einheitliche Formularelemente im Retro-Look (Chat und Cockpit) */
:root {
    --p: #00b140;      /* Grün */
    --s: #000;         /* Schwarz */
    --ol: #00b140;     /* Rahmen */
    --onp: #000;       /* Text auf Grün */
}

input[type="text"], input[type="password"], input[type="number"], input[type="email"],
input[type="search"], input[type="url"], textarea, select {
    background: var(--s);
    color: var(--p);
    font: 14px courier, monospace;
    border: 1px solid var(--ol);
    padding: 5px;
    outline: none;
    border-radius: 0;
    box-sizing: border-box;
}
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 1px var(--ol); }
input::placeholder, textarea::placeholder { color: rgba(0, 177, 64, 0.5); opacity: 1; }
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; }

/* Select: eigener Pfeil, sonst bleibt der Browser-Chrome */
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    cursor: pointer;
    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='%2300b140'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
select option { background: var(--s); color: var(--p); }

input[type="submit"], input[type="button"], button {
    background: var(--p);
    color: var(--onp);
    font: 14px courier, monospace;
    border: 1px solid var(--ol);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 0;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: #000; color: var(--p); }

/* Checkbox und Radio über kf-controls (js/kf-controls.js) */
input[type="checkbox"], input[type="radio"] {
    --kf-size: normal;
    --kf-border: 1px solid var(--ol);
    --kf-border-radius: 0;
    --kf-background-one: var(--s);
    --kf-background-two: var(--p);
    --kf-color: var(--onp);
    vertical-align: middle;
    cursor: pointer;
}
input[type="radio"] { --kf-border-radius: 50%; }

/* Browser-Autofill (Safari/Chrome färben Felder sonst weiß/gelb) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--s) inset;
    -webkit-text-fill-color: var(--p);
    caret-color: var(--p);
    transition: background-color 9999s ease-out 0s;
}
input:autofill { background: var(--s); color: var(--p); }

/* Scrollbalken überall wie im Original-Chat (#chatbox): 1em breit, grüner Griff */
::-webkit-scrollbar { width: 1em; height: 1em; }
::-webkit-scrollbar-track { background: var(--s); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb { background-color: var(--p); }
::-webkit-scrollbar-corner { background: var(--s); }
::-webkit-resizer { background: var(--s); border-left: 1px solid var(--p); border-top: 1px solid var(--p); }
* { scrollbar-color: var(--p) var(--s); }   /* Firefox */

/* Zahlenfelder: nativer Spinner aus, eigener grüner Spinner (js/forms.js) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kf-spin { display: inline-flex; flex-direction: column; vertical-align: middle; margin-left: -1px; }
.kf-spin button {
    width: 18px; height: 14px; line-height: 10px; padding: 0; margin: 0;
    font-size: 9px; border: 1px solid var(--ol); background: var(--s); color: var(--p); cursor: pointer;
}
.kf-spin button:hover { background: var(--p); color: var(--onp); }
.kf-spin button + button { border-top: none; }

/* Farbwähler */
input[type="color"] { width: 44px; height: 30px; padding: 2px; border: 1px solid var(--ol); background: var(--s); cursor: pointer; vertical-align: middle; border-radius: 0; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; }
input[type="color"]::-moz-color-swatch { border: 0; }
input[type="color"]:disabled { opacity: .35; cursor: default; }