/* =====================================================================
   OrderSprinter UI · Login (index.html)
   ===================================================================== */
html.os-ui #index-page .ui-content { max-width: 460px; margin: 0 auto; padding-top: var(--os-sp-6); }
html.os-ui #toplogolocation img, html.os-ui #middlelogolocation img { max-height: 120px !important; }
html.os-ui #middlelogolocation { padding: 0 !important; text-align: center !important; margin-bottom: var(--os-sp-4); }

/* Karte statt Aufklapp-Bereich */
html.os-ui #loginmask.ui-collapsible,
html.os-ui #logoutarea.ui-collapsible {
  margin: 0; background: var(--os-surface); border: 1px solid var(--os-border); border-radius: var(--os-r-xl);
  box-shadow: var(--os-shadow-1); overflow: hidden;
}
html.os-ui #loginmask .ui-collapsible-heading .ui-btn,
html.os-ui #logoutarea .ui-collapsible-heading .ui-btn {
  border: 0 !important; border-radius: 0 !important; background: var(--os-surface) !important;
  min-height: 64px; padding-left: var(--os-sp-5); font-size: var(--os-fs-xl); font-weight: 800; pointer-events: none;
}
html.os-ui #loginmask .ui-collapsible-heading .ui-btn::after,
html.os-ui #logoutarea .ui-collapsible-heading .ui-btn::after { display: none; }
html.os-ui #loginmask .ui-collapsible-content,
html.os-ui #logoutarea .ui-collapsible-content { border: 0 !important; padding: 0 var(--os-sp-5) var(--os-sp-5); background: var(--os-surface) !important; }

/* Formular */
html.os-ui .loginarea { text-align: left; }
html.os-ui .loginarea form { display: block; }
html.os-ui table.logintable { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--os-font); font-size: var(--os-fs-md); }
html.os-ui table.logintable tr { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--os-sp-4); }
html.os-ui table.logintable td { display: block; padding: 0; }
html.os-ui table.logintable td.formlabel { font-size: var(--os-fs-sm); font-weight: 800; color: var(--os-text-2); }
html.os-ui table.logintable .ui-field-contain { margin: 0; padding: 0; border: 0; }
html.os-ui table.logintable .ui-select { margin: 0; }
html.os-ui table.logintable .ui-select .ui-btn { min-height: 52px; font-size: var(--os-fs-lg); font-weight: 700; text-align: left; justify-content: flex-start; border-radius: var(--os-r-md) !important; }
html.os-ui #passwordfield { background: var(--os-surface) !important; color: var(--os-text); font-size: 22px; letter-spacing: .2em; min-height: 52px; }
html.os-ui table.logintable .ui-input-text { margin: 0; }

/* Tastenfeld */
html.os-ui .loginarea table.numfield { margin: var(--os-sp-2) 0 var(--os-sp-3); border-spacing: var(--os-sp-2); width: calc(100% + 2 * var(--os-sp-2)); margin-left: calc(-1 * var(--os-sp-2)); }
html.os-ui .loginarea table.numfield td { height: 60px; font-size: 24px; }

/* Anmelden */
html.os-ui #loginbutton,
html.os-ui .ui-btn:has(> #loginbutton) {
  width: 100%; min-height: var(--os-hit-lg); margin: 0;
  background: var(--os-primary) !important; color: var(--os-on-primary) !important; border-color: var(--os-primary) !important;
  border-radius: 14px !important; font-size: var(--os-fs-lg); font-weight: 800;
}
html.os-ui .loginarea table[style*="width:100%"] td { padding: 0; }

/* Abmelden-Bereich */
html.os-ui #logoutarea a.ui-btn { justify-content: center; min-height: var(--os-hit-lg); }

/* Original numfield.css: grauer Kasten mit grünem Rand → neutral */
html.os-ui table.numfield { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.os-ui table.numfield td { color: var(--os-text) !important; background: var(--os-surface) !important; }
html.os-ui table.numfield td.numnav { background: var(--os-surface-2) !important; }

/* Modus-Auswahl ausgeblendet (wird automatisch gesetzt, siehe os-common.js) */
html.os-ui table.logintable tr.os-hidden-row { display: none !important; }

html.os-ui #loginmask .ui-collapsible-heading .ui-btn, html.os-ui #logoutarea .ui-collapsible-heading .ui-btn { padding-left: var(--os-sp-5) !important; }