/*
 * Bootstrap 2/3 → Bootstrap 5 compatibility bridge
 * Temporary CSS that maps old BS2/3 classes to BS5-compatible styles.
 * Remove after all templates are migrated to BS5 classes.
 */

/* ============================================
   Grid: row-fluid + span* → flexbox
   ============================================ */
.row-fluid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}
.row-fluid > [class*="span"] {
    position: relative;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}
.span1  { flex: 0 0 8.333%;  max-width: 8.333%;  }
.span2  { flex: 0 0 16.667%; max-width: 16.667%; }
.span3  { flex: 0 0 25%;     max-width: 25%;     }
.span4  { flex: 0 0 33.333%; max-width: 33.333%; }
.span5  { flex: 0 0 41.667%; max-width: 41.667%; }
.span6  { flex: 0 0 50%;     max-width: 50%;     }
.span7  { flex: 0 0 58.333%; max-width: 58.333%; }
.span8  { flex: 0 0 66.667%; max-width: 66.667%; }
.span9  { flex: 0 0 75%;     max-width: 75%;     }
.span10 { flex: 0 0 83.333%; max-width: 83.333%; }
.span11 { flex: 0 0 91.667%; max-width: 91.667%; }
.span12 { flex: 0 0 100%;    max-width: 100%;    }

/* ============================================
   Well → card-like container
   ============================================ */
.well {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.well-small {
    padding: 0.5rem;
}

/* ============================================
   Float helpers
   ============================================ */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

/* ============================================
   Navbar compat (BS2 → BS5)
   ============================================ */
.navbar-inner {
    display: flex;
    align-items: center;
    padding: 0 1rem;
}
.nav-collapse.collapse {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

/* ============================================
   Nav list (BS2 sidebar nav)
   ============================================ */
.nav-list,
.nav.nav-list {
    list-style: none;
    padding-left: 0;
}
.nav-list > li > a {
    display: block;
    padding: 0.375rem 0.75rem;
    color: #333;
    text-decoration: none;
}
.nav-list > li > a:hover {
    background-color: #e9ecef;
    border-radius: 0.25rem;
}
.nav-list > li.active > a {
    background-color: #0d6efd;
    color: #fff;
    border-radius: 0.25rem;
}

/* ============================================
   Button compat
   ============================================ */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-mini {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}
.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}
.btn-large {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}
.btn-inverse {
    color: #fff;
    background-color: #333;
    border-color: #333;
}

/* ============================================
   Form compat
   ============================================ */
.control-group {
    margin-bottom: 1rem;
}
.control-group .controls {
    margin-left: 0;
}
.input-append,
.input-prepend {
    display: flex;
    align-items: stretch;
}
.input-append input,
.input-prepend input {
    flex: 1;
}
.input-append .add-on,
.input-prepend .add-on {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

/* ============================================
   Alert compat
   ============================================ */
.alert-error {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/* ============================================
   Icons (BS2 Glyphicon → FA5 bridge)
   ============================================ */
.icon-white { color: #fff; }
[class^="icon-"],
[class*=" icon-"] {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    display: inline-block;
}
.icon-pencil::before   { content: "\f303"; }
.icon-th::before       { content: "\f0ce"; }
.icon-edit::before     { content: "\f044"; }
.icon-info-sign::before { content: "\f05a"; }
.icon-indent-left::before { content: "\f03b"; }
.icon-search::before   { content: "\f002"; }
.icon-plus::before     { content: "\f067"; }
.icon-minus::before    { content: "\f068"; }
.icon-remove::before   { content: "\f00d"; }
.icon-ok::before       { content: "\f00c"; }
.icon-chevron-right::before { content: "\f054"; }
.icon-chevron-down::before  { content: "\f078"; }

/* ============================================
   Misc compat
   ============================================ */
.hide {
    display: none !important;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.container-fluid {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* ============================================
   Django form widgets → BS5 form-control style
   ============================================ */
.content-wrapper input[type="text"],
.content-wrapper input[type="number"],
.content-wrapper input[type="email"],
.content-wrapper input[type="password"],
.content-wrapper input[type="url"],
.content-wrapper input[type="tel"],
.content-wrapper input[type="date"],
.content-wrapper input[type="datetime-local"],
.content-wrapper input[type="time"],
.content-wrapper select,
.content-wrapper textarea {
    display: block;
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.content-wrapper input[type="text"]:focus,
.content-wrapper input[type="number"]:focus,
.content-wrapper input[type="email"]:focus,
.content-wrapper input[type="password"]:focus,
.content-wrapper select:focus,
.content-wrapper textarea:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.content-wrapper input[type="checkbox"],
.content-wrapper input[type="radio"] {
    width: auto;
    display: inline-block;
}
/* PopupSelect: flex row keeps display input + icons on one line */
.popup-select-row {
    display: flex !important;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
}
.popup-select-row .popupSelect-display {
    flex: 1 1 auto !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 120px;
}
.popup-select-row .selector-icons {
    flex: 0 0 auto;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.selector-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: #666;
    border-radius: 3px;
    transition: color .15s, background .15s;
    text-decoration: none;
}
.selector-icons a:hover {
    color: #333;
    background: rgba(0,0,0,.06);
}
.selector-icons a .fa,
.selector-icons a .fas,
.selector-icons a .far {
    font-size: 11px;
    line-height: 1;
}
/* Status row: native selects inline */
.status-row select.form-select {
    width: auto !important;
    min-width: 140px;
    display: inline-block !important;
    flex: 0 0 auto;
}
.status-row input.datepicker {
    flex: 0 0 auto;
}
/* Field + help icon inline — never wrap */
.field-with-help {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.field-with-help > input,
.field-with-help > select,
.field-with-help > textarea,
.field-with-help > .select2-container {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}
.field-with-help > .help-icon,
.field-with-help > a,
.field-with-help > a.help-link {
    flex: 0 0 18px;
    white-space: nowrap;
}
/* Help (info) icon: small, grey, blue on hover */
a.help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
    color: #999;
    text-decoration: none;
    transition: color .15s;
    vertical-align: middle;
}
a.help-link:hover {
    color: #2196F3;
}
a.help-link .fa-info-circle {
    font-size: 12px;
    line-height: 1;
}
.content-wrapper select[multiple] {
    height: auto;
}
.content-wrapper textarea {
    height: auto;
    min-height: 60px;
}

/* ============================================
   Equal-height override (BS5 flexbox handles this)
   ============================================ */
.set_height {
    display: flex;
    flex-wrap: wrap;
}
.set_height > .span6 {
    display: flex;
    flex-direction: column;
}

/* ============================================
   Form field rows: label + input alignment
   ============================================ */
.form-row.row {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 0.4rem;
    align-items: baseline;
}
.form-row.row > .col-md-4 {
    flex: 0 0 auto;
    width: auto;
    max-width: 45%;
    border: none !important;
    padding: 0 0.5rem 0 0 !important;
    margin: 0 !important;
    background: none !important;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #555;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
}
.form-row.row > .col-md-8 {
    flex: 1 1 0%;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* ============================================
   Top toolbar
   ============================================ */
.head-navbar {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.head-navbar .btn {
    white-space: nowrap;
    font-size: 0.8125rem;
    padding: 0.3rem 0.75rem;
}
.head-navbar .btn-success {
    box-shadow: 0 1px 2px rgba(25,135,84,.25);
}
.head-navbar #qf-search-block .search-query {
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
    width: 16em !important;
}
.head-navbar #qf-search-block .search-button {
    border-radius: 0.25rem;
    margin-left: 0.25rem !important;
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
}

/* ============================================
   Nav tabs
   ============================================ */
.nav-tabs {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding-left: 0;
    list-style: none;
}
.nav-tabs .nav-item {
    margin-bottom: -2px;
    flex-shrink: 0;
}
.nav-tabs .nav-link {
    color: #495057;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: color .15s, border-color .15s;
    text-decoration: none;
    white-space: nowrap;
}
.nav-tabs .nav-link:hover {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background: rgba(13,110,253,.04);
}
.nav-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    font-weight: 600;
    background: transparent;
}

/* ============================================
   Form subgroups as AdminLTE card-outline
   ============================================ */
.form-subgroup {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background: #fff;
    border: 0;
    border-radius: 0.25rem;
    padding: 0;
    margin-bottom: 15px;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
}
.form-subgroup legend {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    text-transform: none;
    letter-spacing: normal;
    background: #43b77a;
    border-bottom: none;
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    border-radius: 0.25rem 0.25rem 0 0;
    width: 100%;
    float: none;
}
.form-subgroup legend a.help-link {
    color: rgba(255,255,255,0.85);
}
.form-subgroup legend a.help-link:hover {
    color: #fff;
}
.form-subgroup > .form-row,
.form-subgroup > div:not(legend),
.form-subgroup > script + div,
.form-subgroup > #abonent_block_status,
.form-subgroup > #abonent_status,
.form-subgroup > #abonent_users,
.form-subgroup > #abonents-comments {
    padding: 0 1rem;
}
.form-subgroup > div.form-row:last-child,
.form-subgroup > div:last-child {
    padding-bottom: 0.75rem;
}
/* Uniform padding for all card-body content */
.form-subgroup .form-row.row {
    padding: 0.2rem 1rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.form-subgroup .form-row.row > .col-md-4 {
    flex: 0 0 35%;
    max-width: 35%;
    width: 35%;
}
.form-subgroup .form-row.row > .col-md-8 {
    flex: 1 1 65%;
    max-width: 65%;
    width: 65%;
}
/* Regular font weight for all text inside subgroups */
.form-subgroup label {
    font-weight: 400;
    font-size: 0.8125rem;
    margin-bottom: 0;
}
/* Account fields: also always inline */
.acc-field-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
/* Prevent inputs from overflowing card boundaries */
.form-subgroup input[type="text"],
.form-subgroup input[type="number"],
.form-subgroup textarea,
.form-subgroup select,
.form-subgroup .select2-container {
    max-width: 100%;
    box-sizing: border-box;
}
/* jQuery UI datepicker: high z-index, no clipping */
.ui-datepicker {
    z-index: 1060 !important;
}
/* Datepicker fields — consistent styling */
.form-subgroup input.datepicker {
    max-width: 160px;
    cursor: pointer;
}

/* ============================================
   Balance table (Financial info block)
   ============================================ */
.acc-section-title {
    display: block;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #495057;
    margin: 0.5rem 0 0.25rem 0;
}
.acc-balance-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}
.acc-balance-table thead th {
    font-weight: 500;
    font-size: 0.75rem;
    color: #868e96;
    text-align: right;
    padding: 0.15rem 0.35rem;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
}
.acc-balance-table thead th:first-child {
    text-align: left;
}
.acc-balance-table tbody td {
    text-align: right;
    padding: 0.2rem 0.35rem;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: #212529;
}
.acc-balance-table tbody td.acc-row-label {
    text-align: right;
    font-weight: 500;
    color: #495057;
}
.acc-balance-table tbody td.acc-op {
    text-align: center;
    color: #868e96;
    padding: 0.2rem 0.15rem;
}
.acc-balance-table tbody td a {
    color: #007bff;
    text-decoration: none;
}
.acc-balance-table tbody td a:hover {
    text-decoration: underline;
}
/* Account fields */
.acc-fields .form-check {
    padding-left: 0;
    min-height: auto;
}
.acc-fields .form-check .form-check-input {
    float: none;
    margin-left: 0;
    width: 1.1em;
    height: 1.1em;
}
.acc-fields {
    margin-bottom: 0.25rem;
}
.acc-field-row {
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    min-height: 2rem;
}
.acc-field-row > label {
    flex: 0 0 45%;
    max-width: 45%;
    font-weight: 400;
    font-size: 0.8125rem;
    color: #495057;
    margin: 0;
    padding-right: 0.5rem;
}
.acc-field-value {
    flex: 1;
    min-width: 0;
}
.acc-field-value input[type="number"],
.acc-field-value input[type="text"]:not(.datepicker) {
    max-width: 280px;
}
.acc-field-value select {
    max-width: 280px;
}
.acc-readonly {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
    cursor: default;
    max-width: 280px;
}

/* ============================================
   Tab content area
   ============================================ */
.tab-content {
    padding: 0.5rem 0;
}
.tab-pane .row {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================
   List tables
   ============================================ */
#choice_list,
#result_list {
    font-size: 0.8125rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
}
#choice_list thead th,
#result_list thead th {
    background: #f1f3f5;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #495057;
    padding: 0.5rem 0.625rem;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}
#choice_list tbody td,
#result_list tbody td {
    padding: 0.4rem 0.625rem;
    vertical-align: middle;
    border-color: #f0f0f0;
}
#choice_list tbody tr:hover,
#result_list tbody tr:hover {
    background-color: #e8f4fd !important;
}

/* ============================================
   Paginator
   ============================================ */
.pagination {
    margin-top: 0.75rem;
    gap: 0.125rem;
}
.pagination .page-link {
    font-size: 0.8125rem;
    padding: 0.3rem 0.6rem;
}

/* ============================================
   Alert "no data"
   ============================================ */
.alert-no-data {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 2rem;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 0.375rem;
    margin: 1rem 0;
}

/* ============================================
   Selector icons (FK popups)
   ============================================ */
.selector-icons {
    display: inline-flex !important;
    gap: 0.375rem;
    margin-left: 0.375rem;
    vertical-align: middle;
    flex-wrap: nowrap;
}
.selector-icons a {
    color: #6c757d;
    transition: color .15s;
    display: inline-flex;
    align-items: center;
}
.selector-icons a:hover {
    color: #0d6efd;
}

/* ============================================
   Dashboard info-boxes (F7)
   ============================================ */
.info-box {
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    border: none;
    min-height: 80px;
    transition: transform .15s, box-shadow .15s;
}
.info-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.info-box-icon {
    border-radius: 0.5rem 0 0 0.5rem;
    font-size: 1.5rem;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-box-content {
    padding: 0.625rem 1rem;
}
.info-box-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    font-weight: 500;
}
.info-box-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
}

/* Dashboard & content cards — AdminLTE default + outline */
.content-wrapper .card {
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    margin-bottom: 1rem;
}
.content-wrapper .card.card-outline {
    border-top: 3px solid;
}
.content-wrapper .card.card-outline.card-primary {
    border-top-color: #43b77a;
}
.content-wrapper .card.card-outline.card-secondary {
    border-top-color: #6c757d;
}
.content-wrapper .card.card-outline.card-info {
    border-top-color: #17a2b8;
}
.content-wrapper .card.card-outline.card-warning {
    border-top-color: #ffc107;
}
.content-wrapper .card.card-outline.card-danger {
    border-top-color: #dc3545;
}
.content-wrapper .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-radius: 0;
    padding: 0.5rem 1rem;
}
.content-wrapper .card-header .card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}
.content-wrapper .card-body .table {
    font-size: 0.8125rem;
    margin-bottom: 0;
}
.content-wrapper .card-body .table thead th {
    background: #f1f3f5;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}
.content-wrapper .card-body .table tbody tr:hover {
    background-color: #e8f4fd;
}

/* Dashboard nav-pills (quick links) */
.content-wrapper .nav-pills .nav-link {
    color: #495057;
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
    border-radius: 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s, color .15s;
}
.content-wrapper .nav-pills .nav-link:hover {
    background: #e8f4fd;
    color: #0d6efd;
}
.content-wrapper .nav-pills .nav-link:last-child {
    border-bottom: none;
}
.content-wrapper .nav-pills .nav-link i {
    width: 1.25em;
    text-align: center;
}

/* ============================================
   Contract title & balance table
   ============================================ */
.contract-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}
.balance-table {
    width: auto;
    min-width: 280px;
}
.balance-table td {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}
.balance-table td:first-child {
    color: #6c757d;
    font-weight: 500;
}
.balance-table td:last-child {
    font-weight: 600;
    text-align: right;
}

/* ============================================
   Inline tab content tables
   ============================================ */
.tab-pane .table {
    font-size: 0.8125rem;
}
.tab-pane .table thead th {
    background: #f1f3f5;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #495057;
    padding: 0.5rem 0.625rem;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}
.tab-pane .table tbody td {
    padding: 0.4rem 0.625rem;
    vertical-align: middle;
    border-color: #f0f0f0;
}
.tab-pane .table tbody tr:hover {
    background-color: #e8f4fd !important;
}

/* ============================================
   Status field inline layout
   ============================================ */
.status-field-row .d-flex {
    gap: 0.5rem;
}
.status-field-row select {
    width: auto !important;
    min-width: 120px;
    display: inline-block !important;
}
.status-field-row .datepicker {
    width: 140px !important;
    display: inline-block !important;
}

/* ============================================
   Scrollable tabs on small screens
   ============================================ */
.nav-tabs-scrollable {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-wrap: nowrap !important;
    white-space: nowrap;
}
.nav-tabs-scrollable::-webkit-scrollbar {
    height: 3px;
}
.nav-tabs-scrollable::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 2px;
}

/* ============================================
   Responsive: tablets (≤1200px)
   ============================================ */
@media (max-width: 1200px) {
    .form-row.row > .col-md-4 {
        max-width: 40%;
        font-size: 0.75rem;
    }
    .head-navbar .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    .head-navbar #qf-search-block .search-query {
        width: 12em !important;
    }
}

/* ============================================
   Responsive: medium screens (≤992px)
   ============================================ */
@media (max-width: 992px) {
    .row-fluid {
        flex-wrap: wrap;
    }
    .span6, .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .form-row.row > .col-md-4 {
        max-width: 35%;
    }
    .nav-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
    .balance-table {
        min-width: 240px;
    }
}

/* ============================================
   Responsive: phones (≤768px)
   ============================================ */
@media (max-width: 768px) {
    .form-row.row {
        flex-wrap: wrap;
    }
    .form-row.row > .col-md-4 {
        max-width: 100%;
        width: 100%;
        text-align: left;
        margin-bottom: 0.15rem !important;
        font-weight: 600;
    }
    .form-row.row > .col-md-8 {
        width: 100%;
    }
    .head-navbar {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .head-navbar .btn {
        flex: 1 1 auto;
        text-align: center;
    }
    .content-wrapper {
        padding: 0.5rem !important;
    }
    .form-subgroup {
        padding: 0.5rem 0.625rem 0.375rem;
    }
    .set_height {
        flex-direction: column;
    }
    .set_height > .span6,
    .set_height > [class*="col-md-6"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .tab-pane .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #choice_list,
    #result_list {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   Responsive: small phones (≤576px)
   ============================================ */
@media (max-width: 576px) {
    .nav-tabs .nav-link {
        padding: 0.35rem 0.5rem;
        font-size: 0.6875rem;
    }
    .balance-table {
        min-width: 100%;
    }
    .balance-table td {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }
    .info-box-icon {
        width: 50px;
        font-size: 1.25rem;
    }
    .info-box-number {
        font-size: 1.125rem;
    }
}

/* ============================================
   Button icon colors — white on colored buttons
   ============================================ */
.btn-primary .fa,
.btn-primary .fas,
.btn-success .fa,
.btn-success .fas,
.btn-danger .fa,
.btn-danger .fas,
.btn-warning .fa,
.btn-warning .fas,
.btn-info .fa,
.btn-info .fas {
    color: #fff !important;
}

/* Search button in toolbar */
.head-navbar .search-button {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}
.head-navbar .search-button:hover {
    background-color: #0b5ed7 !important;
}
.head-navbar .search-button .fa {
    color: #fff !important;
}

/* Dropdown items styling */
.dropdown-menu .dropdown-item {
    font-size: 0.8125rem;
    padding: 0.4rem 1rem;
    color: #212529;
}
.dropdown-menu .dropdown-item:hover {
    background-color: #e9ecef;
    color: #000;
}

/* Contract title */
h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

/* Caret in dropdown-toggle (BS5 has its own caret via ::after) */
.dropdown-toggle .caret {
    display: none;
}

/* ============================================
   form-horizontal: BS2/3 horizontal form layout
   ============================================ */
.form-horizontal .control-group,
.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
.form-horizontal .control-label {
    flex: 0 0 180px;
    text-align: left;
    padding-top: 0.375rem;
    font-weight: 400;
}
.form-horizontal .controls {
    flex: 1 1 auto;
    min-width: 0;
}
.form-horizontal .controls input,
.form-horizontal .controls select,
.form-horizontal .controls textarea {
    max-width: 100%;
}

/* btn-default → btn-secondary (BS2/3 → BS5) */
.btn.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn.btn-default:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* input-xlarge → full-width input (BS2 → BS5) */
.input-xlarge {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* input-append / input-prepend → input-group */
.input-append,
.input-prepend {
    display: flex;
    align-items: center;
}
.input-append .add-on,
.input-prepend .add-on {
    padding: 0.375rem 0.75rem;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}