/* Driver Control Station — kiosk styling.
   Per spec: 18px+ body text, 24px+ buttons, 48px+ tap targets, landscape-first,
   high contrast for outdoor readability, no admin chrome.
   Palette matches DriverPortal (light background, #0d6efd/#1a56a0 blue) for
   visual consistency across the driver-facing apps. */

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    background: #f5f5f5;
    color: #212529;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.dcs-root {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.dcs-card {
    width: 100%;
    max-width: 760px;
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 40px;
    text-align: center;
}

.dcs-card h1 {
    font-size: 32px;
    margin: 0 0 8px;
    color: #1a56a0;
}
.dcs-card .dcs-sub {
    font-size: 18px;
    color: #6c757d;
    margin-bottom: 28px;
}

.dcs-input {
    width: 100%;
    font-size: 24px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 2px solid #ccd4db;
    background: #ffffff;
    color: #212529;
    margin-bottom: 16px;
}
.dcs-input:focus {
    outline: none;
    border-color: #0d6efd;
}

.dcs-btn {
    display: inline-block;
    min-height: 56px;
    font-size: 24px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    margin: 6px;
}
.dcs-btn-primary { background: #0d6efd; color: #fff; }
.dcs-btn-primary:disabled { background: #a9c8fb; color: #eef4ff; cursor: not-allowed; }
.dcs-btn-secondary { background: #e9ecef; color: #212529; border: 1px solid #dee2e6; }
.dcs-btn-danger { background: #dc3545; color: #fff; }
.dcs-btn-wide { width: 100%; }

.dcs-error {
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: #b02a37;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 18px;
}

.dcs-list { list-style: none; margin: 0; padding: 0; }
.dcs-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 2px solid #e4e4e4;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    font-size: 20px;
    cursor: pointer;
    min-height: 48px;
}
.dcs-list-item:active { background: #f5f5f5; }

.dcs-field-label { font-size: 18px; color: #6c757d; text-align: left; margin: 14px 0 6px; }
.dcs-select {
    width: 100%;
    font-size: 22px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 2px solid #ccd4db;
    background: #ffffff;
    color: #212529;
}
.dcs-select:disabled {
    background: #f5f5f5;
    color: #adb5bd;
}
.dcs-select-readonly {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 22px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 2px solid #e4e4e4;
    background: #f5f5f5;
    color: #495057;
    text-align: left;
}

.dcs-weight {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 20px 0;
    color: #1a56a0;
}

.dcs-spinner {
    width: 48px; height: 48px;
    border: 5px solid #e4e4e4;
    border-top-color: #0d6efd;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: dcs-spin 1s linear infinite;
}
@keyframes dcs-spin { to { transform: rotate(360deg); } }

#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #dc3545; color: #fff;
    padding: 14px; text-align: center; font-size: 18px;
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-left: 12px; }

@media (max-width: 600px) {
    .dcs-card { padding: 24px; }
    .dcs-weight { font-size: 40px; }
}

/* ── Driver shortlist + 4-digit code (DCS_DRIVER_PIN_LOGIN_SPEC.md) ─────────────────────────
   Shortlist tiles reuse .dcs-list-item. Keypad keys are 72px tall (well over the 48px target rule). */
.dcs-tile-meta { font-size: 16px; color: #6c757d; }

.dcs-info {
    background: #e7f1ff;
    border: 1px solid #b6d4fe;
    color: #084298;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 18px;
}

.dcs-pin { outline: none; margin-bottom: 8px; }

.dcs-pin-display {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 8px 0 24px;
}
.dcs-pin-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 3px solid #1a56a0;
    background: transparent;
}
.dcs-pin-dot-on { background: #1a56a0; }

.dcs-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 360px;
    margin: 0 auto 16px;
}
.dcs-key {
    min-height: 72px;
    font-size: 32px;
    font-weight: 700;
    border-radius: 14px;
    border: 2px solid #ccd4db;
    background: #ffffff;
    color: #212529;
    cursor: pointer;
}
.dcs-key:active:not(:disabled) { background: #e9ecef; }
.dcs-key:disabled { color: #adb5bd; cursor: not-allowed; }
.dcs-key-aux { font-size: 20px; background: #f5f5f5; }

/* ── On-screen keyboard (touch kiosks with no physical keyboard) ────────────────────────────
   Fixed to the bottom of the screen; .dcs-osk-spacer keeps the page scrollable above it.
   Keys are 56px tall (over the 48px tap-target rule). */
.dcs-osk-spacer { height: 340px; }
.dcs-osk {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #d5dae0;
    border-top: 1px solid #b8c0c9;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.12);
    padding: 10px 8px 12px;
    z-index: 50;
}
.dcs-osk-inner { max-width: 1000px; margin: 0 auto; }
.dcs-osk-row { display: flex; gap: 6px; margin-bottom: 6px; justify-content: center; }
.dcs-osk-key {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    font-size: 24px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #b8c0c9;
    background: #ffffff;
    color: #212529;
    cursor: pointer;
    padding: 0;
}
.dcs-osk-key:active { background: #e9ecef; }
.dcs-osk-aux { flex: 1.3 1 0; background: #eef0f3; font-size: 20px; }
.dcs-osk-on { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.dcs-osk-space { flex: 5 1 0; font-size: 18px; font-weight: 500; color: #6c757d; }
.dcs-osk-enter { flex: 2 1 0; background: #0d6efd; color: #fff; border-color: #0d6efd; font-size: 20px; }
.dcs-input-active { border-color: #0d6efd; }

/* Testing aid: stands in for the tag reader (DcsDevice:AllowTagSimulator / Development only). */
.dcs-tagsim { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; border: 2px dashed #ffc107; border-radius: 12px; padding: 10px; background: #fffbea; }
.dcs-tagsim-input { margin-bottom: 0; font-size: 20px; }
.dcs-tagsim .dcs-btn { white-space: nowrap; min-height: 56px; margin: 0; }