@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
 --primary-dark:#080240;
 --secondary-dark:#093349;
 --accent:#4FC3F7;
 --glass:rgba(255,255,255,0.08);
 --text:#ffffff;
}

body{
 font-family:'Montserrat',sans-serif !important;
 background:linear-gradient(135deg,#080240 0%,#093349 100%) fixed !important;
 color:#fff;
}

.sidebar,
.navbar,
.main-sidebar{
 background:rgba(8,2,64,0.95)!important;
 backdrop-filter:blur(12px);
}

.card,
.login-card,
.modal-content,
.table,
.content-wrapper,
.small-box{
 background:rgba(255,255,255,0.08)!important;
 backdrop-filter:blur(14px);
 border:1px solid rgba(255,255,255,0.08)!important;
 border-radius:18px!important;
 box-shadow:0 8px 30px rgba(0,0,0,0.25)!important;
 color:#fff!important;
}

table,thead,tbody,tr,td,th,label,p,span,h1,h2,h3,h4,h5,h6{
 color:inherit;
}

.form-control,.form-select{
 background:rgba(255,255,255,0.12)!important;
 border:1px solid rgba(255,255,255,0.1)!important;
 color:#fff!important;
 border-radius:12px!important;
}

.form-control::placeholder{
 color:rgba(255,255,255,0.65)!important;
}

.form-control:focus{
 border-color:#4FC3F7!important;
 box-shadow:0 0 0 .2rem rgba(79,195,247,.25)!important;
}

.btn,
.btn-primary,
.btn-login{
 background:linear-gradient(135deg,#0A4D68,#088395)!important;
 border:none!important;
 border-radius:12px!important;
 color:#fff!important;
 font-weight:600!important;
 transition:all .3s ease!important;
}

.btn:hover,
.btn-primary:hover,
.btn-login:hover{
 transform:translateY(-2px);
 box-shadow:0 10px 20px rgba(8,131,149,.35)!important;
}

a{
 color:#9ad7ff!important;
}

.login-header{
 background:transparent!important;
 text-align:center;
 padding-bottom:10px!important;
}

.ushs-logo{
 width:95px;
 height:95px;
 margin:0 auto 15px;
 border-radius:50%;
 background:linear-gradient(135deg,#0c4a6e,#0ea5e9);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:32px;
 font-weight:800;
 color:white;
 box-shadow:0 0 30px rgba(79,195,247,.35);
 border:3px solid rgba(255,255,255,0.15);
}

.login-card{
 overflow:hidden;
}

.login-body{
 padding-top:10px!important;
}

.alert{
 border-radius:12px!important;
}

/* =========================================================
   FORM / TABLE / WHITE CARD VISIBILITY FIX
   Added directly to existing assets/theme.css.
   Purpose: make text, dropdown options, typing fields, and borders visible
   across customer, CSR, and admin portals.
   ========================================================= */

/* Any white/light area must use dark readable text */
.form-section,
.form-section *,
.bg-white,
.bg-white *,
.bg-light,
.bg-light *,
.card.bg-white,
.card.bg-white *,
.card.bg-light,
.card.bg-light *,
.table,
.table *,
.modal-content,
.modal-content *,
.dropdown-menu,
.dropdown-menu *,
.dataTables_wrapper,
.dataTables_wrapper *,
.offcanvas,
.offcanvas *,
.list-group,
.list-group *,
.white-box,
.white-box * {
    color: #111827 !important;
}

/* Keep section titles clean and readable on white cards */
.form-section .section-title,
.form-section h1,
.form-section h2,
.form-section h3,
.form-section h4,
.form-section h5,
.form-section h6,
.card.bg-white h1,
.card.bg-white h2,
.card.bg-white h3,
.card.bg-white h4,
.card.bg-white h5,
.card.bg-white h6,
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6 {
    color: #0f172a !important;
}

/* Inputs, selects, textareas, and editable fields */
input,
select,
textarea,
.form-control,
.form-select,
.form-check-input,
.input-group-text,
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 2px solid #b8d9ee !important;
    box-shadow: none !important;
}

/* Make actual dropdown list options readable.
   This fixes the white text on white dropdown problem. */
select option,
select optgroup,
.form-select option,
.form-select optgroup,
option {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* Selected/highlighted options */
select option:checked,
.form-select option:checked {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

/* Placeholder text */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* Labels and helper text */
label,
.form-label,
.form-check-label,
.form-text,
.optional-text {
    color: #1f2937 !important;
}

/* Disabled and readonly fields should still be visible */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled,
input[readonly],
textarea[readonly] {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* Focus state: visible border when typing/choosing */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 0.18rem rgba(56, 189, 248, 0.25) !important;
    outline: none !important;
}

/* Checkbox/radio visibility */
.form-check-input {
    width: 1.05em;
    height: 1.05em;
    border: 2px solid #64748b !important;
}

.form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* Keep button text white/readable */
.btn,
.btn *,
.btn-primary,
.btn-primary *,
.btn-success,
.btn-success *,
.btn-danger,
.btn-danger *,
.btn-warning,
.btn-warning *,
.btn-info,
.btn-info *,
.submit-btn,
.submit-btn * {
    color: #ffffff !important;
}

/* Warning buttons can keep dark text if Bootstrap uses yellow */
.btn-warning,
.btn-warning * {
    color: #111827 !important;
}

/* Table readability */
.table thead th,
table thead th {
    color: #111827 !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

.table tbody td,
table tbody td {
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

/* Select2 dropdown readability */
.select2-dropdown,
.select2-results,
.select2-results__option,
.select2-search__field {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #b8d9ee !important;
}

.select2-results__option--highlighted {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

/* Not-listed checkbox blocks on customer request page */
.not-listed-checkbox,
.not-listed-checkbox *,
.manual-input,
.manual-input *,
.serviceable-areas,
.serviceable-areas * {
    color: #111827 !important;
}

/* Keep the dark portal backgrounds and sidebar text untouched */
body,
.sidebar,
.sidebar *,
.main-sidebar,
.main-sidebar *,
.navbar,
.navbar *,
.bottom-nav,
.bottom-nav * {
    /* Do not force all navigation text black */
}

/* Mobile form/table safety */
@media (max-width: 768px) {
    input,
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
        min-height: 44px;
    }

    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 650px;
    }
}