:root{
  --bg0:#0b1020;
  --bg1:#0f172a;
  --panel:#121a2e;
  --panel2:#0f1628;
  --panel3:#101a30;
  --stroke:#26324a;
  --txt:#ffffff;
  --muted: rgba(255,255,255,.78);
  --focus: rgba(90,170,255,.65);
  --hover: rgba(90,170,255,.12);
}

/* DARK SOLID THEME — consistent components */
body.fos-modern{
  min-height:100vh;
  color: var(--txt) !important;
  background: radial-gradient(900px 700px at 20% 10%, rgba(90,170,255,.10), transparent 60%),
              radial-gradient(900px 700px at 90% 20%, rgba(255,120,200,.08), transparent 55%),
              linear-gradient(160deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* Remove decorative blobs if present */
.fos-modern .blob{ display:none !important; }

/* Fix Bootstrap utility classes that force light colors */
.fos-modern .text-dark,
.fos-modern .link-dark,
.fos-modern .text-body,
.fos-modern .text-black,
.fos-modern .text-black-50{
  color: #fff !important;
}
.fos-modern .bg-white,
.fos-modern .bg-light,
.fos-modern .bg-body,
.fos-modern .bg-body-tertiary,
.fos-modern .table-light,
.fos-modern .table-white{
  background: var(--panel) !important;
}

/* Muted text */
.fos-modern .muted,
.fos-modern .text-muted,
.fos-modern small,
.fos-modern .small{
  color: var(--muted) !important;
}

/* Panels / containers */
.fos-modern .glass,
.fos-modern .card,
.fos-modern .modal-content,
.fos-modern .dropdown-menu,
.fos-modern .offcanvas,
.fos-modern .toast,
.fos-modern .list-group-item,
.fos-modern .accordion-item,
.fos-modern .table-responsive,
.fos-modern .input-group-text{
  background: var(--panel) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
}

/* Headers/footers */
.fos-modern .card-header,
.fos-modern .card-footer,
.fos-modern .modal-header,
.fos-modern .modal-footer,
.fos-modern .accordion-button{
  background: var(--panel3) !important;
  border-color: var(--stroke) !important;
  color: #fff !important;
}

/* Forms */
.fos-modern .form-control,
.fos-modern .form-select,
.fos-modern textarea,
.fos-modern input{
  background: var(--panel2) !important;
  border: 1px solid var(--stroke) !important;
  color: #fff !important;
}
.fos-modern .form-control::placeholder{ color: rgba(255,255,255,.55) !important; }
.fos-modern .form-control:focus,
.fos-modern .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(90,170,255,.18) !important;
  border-color: var(--focus) !important;
}
.fos-modern .form-select option{
  background-color: var(--panel2) !important;
  color: #fff !important;
}

/* Dropdown */
.fos-modern .dropdown-item{
  color:#fff !important;
}
.fos-modern .dropdown-item:hover,
.fos-modern .dropdown-item:focus{
  background: var(--hover) !important;
  color:#fff !important;
}
.fos-modern .dropdown-divider{
  border-color: var(--stroke) !important;
}

/* Links */
.fos-modern a{ color:#fff !important; }
.fos-modern a:hover{ opacity:.9; }

/* Buttons */
.fos-modern .btn{
  border-color: var(--stroke) !important;
  color:#fff !important;
}
.fos-modern .btn-primary{
  background: linear-gradient(135deg, rgba(90,170,255,.95), rgba(255,120,200,.85)) !important;
  border: none !important;
  color:#fff !important;
}
.fos-modern .btn-secondary{
  background: #24314a !important;
  border: 1px solid var(--stroke) !important;
}
.fos-modern .btn-light,
.fos-modern .btn-outline-secondary{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color:#fff !important;
}
.fos-modern .btn-light:hover,
.fos-modern .btn-outline-secondary:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Pagination */
.fos-modern .pagination .page-link{
  background: var(--panel2) !important;
  border-color: var(--stroke) !important;
  color:#fff !important;
}
.fos-modern .pagination .page-item.disabled .page-link{
  opacity:.5;
}
.fos-modern .pagination .page-item.active .page-link{
  background: rgba(90,170,255,.25) !important;
  border-color: rgba(90,170,255,.65) !important;
}

/* Table */
.fos-modern .table{
  color:#fff !important;
}
.fos-modern .table thead th{
  background: var(--panel3) !important;
  border-color: var(--stroke) !important;
  color:#fff !important;
}
.fos-modern .table td,
.fos-modern .table th{
  border-color: var(--stroke) !important;
  color:#fff !important;
  background: transparent !important;
}
.fos-modern .table td *,
.fos-modern .table th *{
  color:#fff !important;
}
.fos-modern .table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: rgba(255,255,255,.03) !important;
}
.fos-modern .table-hover tbody tr:hover > *{
  background-color: rgba(90,170,255,.08) !important;
}

/* Badges — white text always, keep outline */
.fos-modern .badge{
  background: transparent !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
}
.fos-modern .badge.bg-success, .fos-modern .badge.text-bg-success{ border-color: rgba(120,255,210,.85) !important; }
.fos-modern .badge.bg-danger, .fos-modern .badge.text-bg-danger{ border-color: rgba(255,120,120,.95) !important; }
.fos-modern .badge.bg-warning, .fos-modern .badge.text-bg-warning{ border-color: rgba(255,210,90,.95) !important; }
.fos-modern .badge.bg-primary, .fos-modern .badge.text-bg-primary{ border-color: rgba(90,170,255,.95) !important; }
.fos-modern .badge.bg-info, .fos-modern .badge.text-bg-info{ border-color: rgba(90,220,255,.95) !important; }
.fos-modern .badge.bg-secondary, .fos-modern .badge.text-bg-secondary{ border-color: rgba(200,200,210,.90) !important; }

/* Alerts */
.fos-modern .alert{
  background: var(--panel3) !important;
  border: 1px solid var(--stroke) !important;
  color:#fff !important;
}

/* --- EXTRA DARK FIXES: labels, autocomplete, steppers --- */

/* Labels always visible */
.fos-modern label,
.fos-modern .form-label,
.fos-modern .col-form-label,
.fos-modern .input-group .form-label{
  color: #fff !important;
}

/* Common autocomplete / typeahead dropdown containers */
.fos-modern .ui-autocomplete,
.fos-modern .ui-menu,
.fos-modern .tt-menu,
.fos-modern .typeahead.dropdown-menu,
.fos-modern .autocomplete-items,
.fos-modern .suggestions,
.fos-modern .autocomplete-suggestions,
.fos-modern .list-group.autocomplete,
.fos-modern .list-group.autocomplete-results,
.fos-modern .list-group.position-absolute{
  background: #121a2e !important;
  border: 1px solid #26324a !important;
  color: #fff !important;
}

.fos-modern .ui-autocomplete .ui-menu-item,
.fos-modern .ui-autocomplete .ui-menu-item-wrapper,
.fos-modern .tt-suggestion,
.fos-modern .autocomplete-items div,
.fos-modern .suggestions li,
.fos-modern .autocomplete-suggestions .autocomplete-suggestion,
.fos-modern .list-group.position-absolute .list-group-item{
  background: #121a2e !important;
  color: #fff !important;
}

.fos-modern .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.fos-modern .ui-autocomplete .ui-menu-item-wrapper:hover,
.fos-modern .tt-suggestion:hover,
.fos-modern .autocomplete-items div:hover,
.fos-modern .suggestions li:hover,
.fos-modern .autocomplete-suggestion:hover,
.fos-modern .list-group.position-absolute .list-group-item:hover{
  background: rgba(90,170,255,.18) !important;
  color: #fff !important;
}

/* Datalist fallback (cannot style native list well, but ensure input remains readable) */
.fos-modern input[list]{
  color: #fff !important;
  background: #0f1628 !important;
}

/* Step buttons / wizard controls (register_device.php, edit_device.php) */
.fos-modern .nav-pills .nav-link,
.fos-modern .nav-tabs .nav-link,
.fos-modern .btn-group .btn,
.fos-modern .step .btn,
.fos-modern .stepper .btn,
.fos-modern .wizard .btn,
.fos-modern .steps .btn,
.fos-modern .step-buttons .btn{
  background: #0f1628 !important;
  color: #fff !important;
  border: 1px solid #26324a !important;
}

.fos-modern .nav-pills .nav-link.active,
.fos-modern .nav-tabs .nav-link.active,
.fos-modern .btn-group .btn.active,
.fos-modern .stepper .btn.active,
.fos-modern .wizard .btn.active{
  background: rgba(90,170,255,.25) !important;
  border-color: rgba(90,170,255,.65) !important;
  color: #fff !important;
}

.fos-modern .nav-pills .nav-link:hover,
.fos-modern .nav-tabs .nav-link:hover,
.fos-modern .btn-group .btn:hover{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

/* If any step buttons use btn-light / btn-outline-* that becomes unreadable */
.fos-modern .btn-light,
.fos-modern .btn-outline-primary,
.fos-modern .btn-outline-success,
.fos-modern .btn-outline-danger,
.fos-modern .btn-outline-warning,
.fos-modern .btn-outline-info{
  color: #fff !important;
  border-color: #26324a !important;
  background: transparent !important;
}
.fos-modern .btn-outline-primary:hover,
.fos-modern .btn-outline-success:hover,
.fos-modern .btn-outline-danger:hover,
.fos-modern .btn-outline-warning:hover,
.fos-modern .btn-outline-info:hover{
  background: rgba(255,255,255,.08) !important;
  color:#fff !important;
}

/* Ensure list-group items used as suggestion rows aren't white */
.fos-modern .list-group-item{
  background: #121a2e !important;
  color: #fff !important;
  border-color: #26324a !important;
}


/* --- FORM-FLOATING FIX (labels on dark) --- */
.fos-modern .form-floating > label{
  color: #fff !important;
  background: transparent !important;
}
.fos-modern .form-floating > label::after{
  background: transparent !important;
}

/* Custom datalist dropdown (JS-generated) */
.fos-modern .fos-datalist-menu{
  position:absolute;
  z-index: 2000;
  width:100%;
  margin-top:.25rem;
  background: #121a2e !important;
  border: 1px solid #26324a !important;
  border-radius: 12px;
  overflow:hidden;
  max-height: 260px;
  overflow-y:auto;
}
.fos-modern .fos-datalist-item{
  padding: .55rem .75rem;
  cursor:pointer;
  color:#fff !important;
  background: #121a2e !important;
  border-bottom: 1px solid rgba(38,50,74,.6);
}
.fos-modern .fos-datalist-item:last-child{ border-bottom:none; }
.fos-modern .fos-datalist-item:hover{
  background: rgba(90,170,255,.18) !important;
}

/* --- PAGE CUSTOM AUTOCOMPLETE (suggestion-box) FIX --- */
.fos-modern .suggestion-box{
  background: #121a2e !important;
  border: 1px solid #26324a !important;
  border-top: none !important;
  box-shadow: none !important;
}
.fos-modern .suggestion-item{
  color: #fff !important;
  background: transparent !important;
}
.fos-modern .suggestion-item:hover,
.fos-modern .suggestion-item.active{
  background: rgba(90,170,255,.18) !important;
  color: #fff !important;
}

/* Step buttons: force dark background when not selected */
.fos-modern .step-btn,
.fos-modern .step-button,
.fos-modern .btn-step,
.fos-modern .stepper-btn,
.fos-modern .steps button,
.fos-modern .steps .btn{
  background: #0f1628 !important;
  color: #fff !important;
  border: 1px solid #26324a !important;
}
.fos-modern .step-btn.active,
.fos-modern .step-button.active,
.fos-modern .btn-step.active,
.fos-modern .stepper-btn.active,
.fos-modern .steps button.active{
  background: rgba(90,170,255,.25) !important;
  border-color: rgba(90,170,255,.65) !important;
  color: #fff !important;
}

/* --- FIX step pills (register/edit device) --- */
.fos-modern .step-pill{
  background: #0f1628 !important;
  color: #fff !important;
  border: 1px solid #26324a !important;
}
.fos-modern .step-pill .num{
  background: #111827 !important;
  color: #fff !important;
}
.fos-modern .step-pill.active{
  background: rgba(90,170,255,.25) !important;
  border-color: rgba(90,170,255,.65) !important;
  color: #fff !important;
}
.fos-modern .step-pill.active .num{
  background: rgba(90,170,255,.95) !important;
}

/* --- FIX date/time picker icons --- */
.fos-modern input[type="date"]::-webkit-calendar-picker-indicator,
.fos-modern input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.fos-modern input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1) !important;
  opacity: .95 !important;
}
.fos-modern input[type="date"]::-webkit-inner-spin-button,
.fos-modern input[type="datetime-local"]::-webkit-inner-spin-button{
  filter: invert(1) !important;
}


/* --- CHECKBOX RADIO DARK FIX --- */
.fos-modern .form-check-input{
  background-color: #0f1628 !important;
  border: 1px solid #26324a !important;
}
.fos-modern .form-check-input:checked{
  background-color: rgba(90,170,255,.95) !important;
  border-color: rgba(90,170,255,.95) !important;
}
.fos-modern .form-check-input:focus{
  box-shadow: 0 0 0 .25rem rgba(90,170,255,.35) !important;
}

/* radio specific */
.fos-modern .form-check-input[type="radio"]{
  border-radius: 50% !important;
}

/* --- VALIDATION RED STATES --- */
.fos-modern .is-invalid{
  border-color: rgba(255, 91, 91, .95) !important;
}
.fos-modern .is-invalid:focus{
  box-shadow: 0 0 0 .25rem rgba(255, 91, 91, .20) !important;
  border-color: rgba(255, 91, 91, .95) !important;
}
/* invalid radios/checkboxes */
.fos-modern .form-check-input.is-invalid{
  border-color: rgba(255, 91, 91, .95) !important;
  box-shadow: 0 0 0 .25rem rgba(255, 91, 91, .15) !important;
}

/* Step button error */
.fos-modern .step-pill.step-error{
  background: rgba(255, 91, 91, .16) !important;
  border-color: rgba(255, 91, 91, .70) !important;
  color: #fff !important;
}
.fos-modern .step-pill.step-error .num{
  background: rgba(255, 91, 91, .95) !important;
  color: #fff !important;
}

/* If steps are implemented as nav pills/tabs */
.fos-modern .nav-pills .nav-link.step-error,
.fos-modern .nav-tabs .nav-link.step-error{
  background: rgba(255, 91, 91, .16) !important;
  border-color: rgba(255, 91, 91, .70) !important;
  color: #fff !important;
}
.fos-modern .nav-pills .nav-link.step-error.active,
.fos-modern .nav-tabs .nav-link.step-error.active{
  background: rgba(255, 91, 91, .22) !important;
  border-color: rgba(255, 91, 91, .85) !important;
}