/* SellPosto Web-Host: geteilte Komponenten-Tokens (--yr-*) im SellPosto-Schema (coral/parchment),
   light-only (die POS-UI ist bewusst hell). Analog zur MAUI-app.css. */
:root {
    --yr-primary: #fb3904;
    --yr-primary-hover: #e23303;
    --yr-primary-light: #fef0ea;
    --yr-primary-text: #b52c03;
    --yr-button: #fb3904;

    --yr-surface: #ffffff;
    --yr-surface-hover: #faf7f0;
    --yr-border: #e7e0d0;

    --yr-text: #201b13;
    --yr-text-muted: #6f6656;
    --yr-text-light: #9c9384;

    --yr-card-shadow: 0 1px 3px rgba(32, 27, 19, 0.09), 0 1px 2px rgba(32, 27, 19, 0.06);
    --yr-danger: #e2504f;

    color-scheme: light;
}

html, body { margin: 0; }

/* ── POS-Oberfläche: Formular-Elemente normalisieren (EIN Look über alle Browser inkl. Safari) + Feinschliff.
   Scope `.pos-ui` (am PosLayout-Root) hält es auf die Kasse begrenzt (nicht koubon/cartavo). Die Spezifität
   `.pos-ui` + Typ (0,1,1) schlägt einzelne Tailwind-Utilities (0,1,0), sodass die Normalisierung greift. */
.pos-ui { font-variant-numeric: tabular-nums; }

/* Einheitliche Felder: gleiche Höhe/Rahmen/Radius/Fokus — unabhängig vom Browser-Default. */
.pos-ui input[type="text"],
.pos-ui input[type="number"],
.pos-ui input[type="search"],
.pos-ui input:not([type]),
.pos-ui select {
    height: 40px;
    border: 1px solid #c5b7a0;                 /* parchment-300 */
    border-radius: 9px;
    background-color: #fff;
    color: #201b13;                            /* parchment-900 */
    padding: 0 11px;
    line-height: normal;
    transition: border-color .12s, box-shadow .12s;
}
.pos-ui input::placeholder { color: #9e8861; } /* parchment-500 */
.pos-ui input:focus,
.pos-ui select:focus {
    outline: none;
    border-color: #fb3904;                     /* coral-500 */
    box-shadow: 0 0 0 3px rgba(251, 57, 4, .16);
}

/* Native Number-Spinner weg (Safari/Chrome/Firefox gleich). */
.pos-ui input[type="number"] { -moz-appearance: textfield; }
.pos-ui input[type="number"]::-webkit-outer-spin-button,
.pos-ui input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Select: nativen Pfeil abschalten + eigener Chevron — DAS behebt den klobigen Safari-Look. */
.pos-ui select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237e6d4e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Karten mit Tiefe statt Haarlinie. */
.pos-ui .rounded-lg.bg-white,
.pos-ui .rounded-xl.bg-white { box-shadow: var(--yr-card-shadow); }

/* Buttons: dezentes Press-Feedback + sichtbarer Tastatur-Fokus. */
.pos-ui button:active { transform: translateY(1px); }
.pos-ui button:focus-visible,
.pos-ui a:focus-visible { outline: 2px solid #fb3904; outline-offset: 2px; }