/* Keep controls within the viewport and establish predictable overlay layers. */
*, *::before, *::after { box-sizing: border-box; }
#root .section-type-plates {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    width: 100%;
    max-width: 1300px !important;
    z-index: 1 !important;
}
#root .container-placa { width: 100% !important; min-width: 0; font: inherit; }
.container-placa:focus-visible, button:focus-visible, a:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 4px;
}
.label-placa { cursor: pointer; }
.container-header { position: relative; z-index: 20; }
.container-header .icon-ellipsis, .container-header .icon-home {
    width: 44px; height: 36px; background-size: 22px; border: 0;
    background-color: transparent !important; filter: brightness(0) invert(1) !important;
}
.container-header .menu-dialog { z-index: 30; background: #102440; color: white; top: 52px; }
.container-header .menu-dialog a { color: #bdefff; padding: 10px; }
#root section:not(.section-type-plates):not(.section-title):not(.section-vin),
#root .container-login, #root .form-login { z-index: 1 !important; }
.modal-backdrop { z-index: 1000 !important; }
.modal { z-index: 1010 !important; }
#adminModal { z-index: 2000 !important; }
#adminDbBtn { position: relative !important; z-index: 50 !important; top: auto !important; right: auto !important; left: auto !important; margin: 12px 16px 12px auto; }
.custom-modal-box { width: min(900px, 95vw) !important; max-height: 90vh; }
#adminStatus { min-height: 1.4em; }
#adminModal input { min-width: 0; }
#userListBody td { padding: 10px; border-bottom: 1px solid #456; }
#userListBody button { margin: 3px; padding: 6px 10px; border-radius: 8px; background: #075ca8; color: white; border: 1px solid #64c9f2; }
#userListBody .admin-delete { background: #932f37; }
button:disabled { opacity: .55 !important; cursor: not-allowed !important; }
/* Chromium autofill paints its own background unless it is covered with an inset shadow. */
#root input:-webkit-autofill,
#root input:-webkit-autofill:hover,
#root input:-webkit-autofill:focus,
#root input:-webkit-autofill:active,
#adminModal input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #040914 inset !important;
    box-shadow: 0 0 0 1000px #040914 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    background-color: #040914 !important;
}
#root input:autofill { box-shadow: 0 0 0 1000px #040914 inset !important; -webkit-text-fill-color: #fff !important; }
#root input.form-control, #root select.form-control {
    color-scheme: dark;
    line-height: 1.25 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
#root input[type=date] { min-width: 0; width: 100%; }
#root input[type=date]::-webkit-calendar-picker-indicator { opacity: .9; cursor: pointer; }
#root input[type=date]::-webkit-datetime-edit { padding: 0; }
#root .form-validation-message, #root [role=alert] { padding: 12px; color: #ffd9d9; }
#root .selected-item-title { margin: 20px 16px 0; font-size: 24px; }
@media (max-width: 600px) {
    #root .section-type-plates { padding: 65px 8px 20px !important; gap: 10px !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #root .container-placa { padding: 14px 8px !important; min-height: 160px !important; }
    #root section:not(.section-type-plates):not(.section-title):not(.section-vin) { padding: 20px 12px !important; }
    #root .form-login { padding: 28px 18px !important; }
    .custom-modal-box { padding: 18px 12px; }
    #addUserForm > div:first-child { flex-direction: column; }
}