/*Carlos Lozano/Added jan 29th 2026*/
/*bulk upload - exclude login page*/
/*warnings on assets*/
/*.alert-success {
    color: #000;
    background-color: #ffe383;
}*/
/*add new service type/asste/etc...buttons*/
a.btn.btn-primary.add-new {
    background: #000;
    color: #fff;
}

/*hover buttons*/
.btn-outline-primary:hover {
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
}

/*section/item titles*/
.card-header {
    background: #227c85;
    border-radius: 8px !important;
    color: #fff;
    text-align: center;
}

    .card-header h3 {
        font-size: 1.5rem;
        font-weight:600;
        margin-bottom: 0;
    }

body:not(.loginPage) .container-fluid.h-100 {
    background: #fff;
}

.alert-info,
.alert-success {
    color: #000;
    background-color: #ffe383;
    border: none;
    border-radius: 8px;
    text-align: center;
    padding: 15px;
}

/*upload images in bulk import*/
.bg-light-upload-images-bulk {
    background: #ffefda;
    font-weight: bold;
    color: #000;
    border: none;
}

/*create new user button*/
button#addButton {
    background-color: #000;
    /*#000000;*/
}

/*primary buttons*/
a.btn.btn-primary {
    font-size: 15px;
    background-color: var(--primaryButtonColour);
    /*#000000;*/
    padding: 10px 20px 10px 20px;
    border-radius: 8px;
}

/*buttons on tabs*/
.nav-link.active-tabs {
    background: #42c7c2;
    color: white;
}

/*button danger and warning*/
a.btn.btn-danger,
.btn-danger,
.btn-warning {
    padding: 10px 20px 10px 20px;
}

/*warning on bulk upload*/
.alert-light {
    color: #000;
    background-color: #ffe383;
    border: 1none;
}



/* Otra idea - 30-Enero-2025*/
.nav-tabs {
    border-bottom: none !important;
    gap: 8px;
    padding-bottom: 4px;
}


    .nav-tabs .nav-link {
        border-radius: 8px;
        padding: 8px 18px;
        font-size: 15px;
        font-weight: 500;
        color: #374151;
        background-color: #f3f4f6;
        border: 1px solid transparent;
        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

        .nav-tabs .nav-link:hover {
            background-color: #e6f2f3;
            color: #227c85;
        }

/* Report Simple Overrides */
.section-report-issue-simple {
    background: linear-gradient(135deg, #1a9aa0 0%, #0d7377 100%);
    /* Exact Teal Gradient from Simple */
    min-height: 100vh;
    padding-top: 40px;
    padding-bottom: 40px;
}

.report-simple-card {
    background: #227C86;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    margin-bottom: 2rem;
    border: none;
}

.report-simple-header {
    background: linear-gradient(135deg, #1a9aa0 0%, #0d7377 100%);
    color: white;
    padding: 2rem;
    text-align: center;
}

    .report-simple-header h2 {
        margin: 0 0 0.5rem 0;
        font-weight: 600;
    }

    .report-simple-header p {
        margin: 0;
        opacity: 0.9;
    }

/* Upload Zone Styles */
.upload-zone {
    border: 2px dashed #ccc;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f9f9f9;
    position: relative;
    margin-bottom: 1rem;
}

    .upload-zone:hover,
    .upload-zone.drag-over {
        border-color: #1a9aa0;
        background: #e8f7f7;
    }

    .upload-zone.has-file {
        border-color: #28a745;
        background: #e8f5e9;
    }

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-icon {
    font-size: 2.5rem;
    color: #1a9aa0;
    margin-bottom: 1rem;
}

.upload-text {
    font-weight: 600;
    color: #333;
    font-size: 1.1rem;
}

.upload-subtext {
    color: #888;
    font-size: 0.9rem;
}

.upload-input {
    display: none;
    /* Hide default file input */
}

/* Report Issue Complete, Service Type list */
/* row grid-service-type*/
.grid-service-type {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
}


/* Accordion Icon Rotation */
.btn-link .transition-icon {
    transition: transform 0.3s ease;
}

.btn-link[aria-expanded="true"] .transition-icon {
    transform: rotate(90deg);
}

.btn-clear-upload {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.5rem;
    line-height: 1;
    margin-left: 10px;
    cursor: pointer;
}

/* Mobile camera / gallery upload buttons */
.mobile-upload-options,
.mobile-upload-btns {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}
.btn-upload-camera,
.btn-upload-gallery {
    flex: 1;
    padding: 14px 8px;
    border: 2px solid #1a9aa0;
    border-radius: 8px;
    background: #fff;
    color: #1a9aa0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s;
}
.btn-upload-camera:hover,
.btn-upload-gallery:hover,
.btn-upload-camera.has-file,
.btn-upload-gallery.has-file {
    background: #1a9aa0;
    color: #fff;
}
.btn-upload-camera i,
.btn-upload-gallery i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

/* Image preview thumbnail after selection */
.upload-img-preview-container {
    margin-top: 10px;
    position: relative;
    display: inline-block;
}
.upload-img-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    border: 2px solid #28a745;
    object-fit: cover;
    display: block;
}
.upload-img-preview-container .btn-clear-upload {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgb(225 222 222 / 85%);
    color: #dc3545;
    font-size: 1.5rem;
    border-radius: 50%;
    padding: 0 5px;
    margin-left: 0;
    /*line-height: 1.2;*/

    
}

.nav-tabs .nav-link.active {
    background-color: #000 !important; /*lo puse para el error en los botones TAB del Usermanagement*/
    color: #fff;
    font-weight: bold;
    border-color: unset;
    box-shadow: 0 0 0 3px rgba(34, 124, 133, 0.25), 0 6px 14px rgba(0, 0, 0, 0.18);
}

/*a#images-tab.nav-link,
a#assets-tab.nav-link,
a#areas-tab.nav-link {
    background-color: #ffffffd6;
    color: #227c85;
    font-weight: normal;
    border-color: unset;
    box-shadow: 0 0 0 3px rgba(34, 124, 133, 0.25), 0 6px 14px rgba(0, 0, 0, 0.18);
}

    a#images-tab.nav-link.active,
    a#assets-tab.nav-link.active,
    a#areas-tab.nav-link.active {
        background-color: #fff;
        color: #000;
        font-weight: bold;
        border-color: unset;
        box-shadow: 0 0 0 3px rgba(34, 124, 133, 0.25), 0 6px 14px rgba(0, 0, 0, 0.18);
    }
*/
.nav-tabs .nav-link:focus-visible {
    outline: 3px solid rgba(34, 124, 133, 0.45);
    outline-offset: 2px;
}

.btn-primary-custom {
    background-color: var(--primaryButtonColour);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}


@media (max-width: 767px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

        .nav-tabs .nav-link {
            white-space: nowrap;
            min-width: 140px;
            text-align: center;
        }
}

/* FIN otra idea*/


/*end view tabs*/
/*End Carlos Lozano/Addes jan 29th 2026*/
/*carloslozano custom css Apr,2025*/
/*Report landing page-asset list*/
.homepageCard .card-body {
    text-transform: uppercase;
    text-align: center;
    min-height: 120px;
}

.card-body {
    align-content: center;
}

.h4,
h4 {
    font-size: 1.2rem;
}

h1 {
    font-size: 1.2rem;
}

@media (max-width:737px) {
    .org-logo {
        width: 100px;
    }
}

/*end*/
/*report issue*/
@media (max-width:737px) {
    .navbar-brand {
        max-height: 100px;
    }

        .navbar-brand img {
            max-width: 130px;
        }
}

h1.mb-4 {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

@media (max-width:767px) {
    label.col-sm-4.col-form-label {
        text-align: center;
    }

    input.form-control,
    textarea.form-control {
        text-align: center;
    }

    .tab-pane {
        text-align: center;
    }

    .report-contactinfo-title {
        padding-top: 30px;
        padding-bottom: 10px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .report-phone {
        display: inline-flex;
    }

    select#SelectedCountryCode {
        width: 150px;
    }

    .form-check {
        display: inline-block;
    }

    .ul-weekdays {
        padding: 0;
        text-align: left;
    }

    .report-btns {
        text-align: center;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .float-right {
        float: none !important;
    }

    .report-contact-days {
        margin-top: 30px;
        margin-bottom: 15px;
    }
}

.section-report-issue {
    background-color: #fff !important;
}

/*end report issue*/
/*dashboard*/
/*user management*/
/*table*/
table.dataTable,
table.dataTableNoDate,
table#DataTables_Table_0,
table#assetsTable,
table#faultsTable,
table#assetsTableMobile,
table#faultsTableMobile {
    border: 2px solid #227c85 !important;
    border-radius: 10px;
}

/* Override DataTables removing right border */
table.table-bordered.dataTable {
    border-right-width: 3px !important;
}

th.sorting {
    color: #fff;
    background: #227c85;
    font-weight: 400;
    text-align: center;
}

.table-bordered td,
.table-bordered th {
    border: 0;
    align-content: center;
}

tr.odd,
tr.even {
    border-bottom: 1px solid #227c85;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fff;
}

td {
    text-align: center;
}

/*go to issue button*/
.c-app:not(.c-legacy-theme):not(.c-dark-theme) .btn:not([class*=ghost]):not([class*=link]):not([class*=outline]):not([class*=transparent]),
.c-app:not(.c-legacy-theme):not(.c-dark-theme) .btn:hover:not([class*=ghost]):not([class*=link]):not([class*=outline]):not([class*=transparent]) {
    box-shadow: none;
}

/*end issues view*/
/*issue detail view*/
.main-div-issue {
    display: inline-flex;
    width: 100%;
    border-radius: 10px;
    border: 4px solid #227c85;
    padding: 20px;
    margin-bottom: 40px;
}

.main-div-issue-1,
.main-div-issue-2 {
    width: 100%;
}

.col-form-label {
    padding-top: calc(.125rem + 1px);
    padding-bottom: calc(.125rem + 1px);
}

label.col-sm-2.col-form-label {
    color: #227c85;
    font-weight: 600;
    min-width: 250px;
}

a.btn.btn-default.float-right.mr-1 {
    padding: 10px 20px 10px 20px;
    background: #227c85;
    color: #fff;
}

input#submit-form-button {
    padding: 10px 20px 10px 20px;
    background: #000;
    color: #fff;
}

.card-header {
    border-bottom: none;
}

/*header*/
.c-subheader.justify-content-between.px-3 {
    display: contents;
}

breadcrumb {
    padding-top: 7px;
}

/*sidebar*/
li.c-sidebar-nav-item {
    font-size: 15px;
}

/*profile*/
.nav-link:hover {
    color: #426c70;
}

/*desktop views*/
@media (min-width:800px) {
    .row-desktop-view {
        display: flex;
        flex-wrap: wrap;
    }

    .row-mobile-view {
        display: none;
    }

    /*issue status drop down*/
    .col-sm-10.issueStatusDropdown {
        max-width: 150px;
    }

    td.organizationLogo img {
        max-width: 180px;
    }

    a.btn.btn-primaryPacksinInOrg {
        background: #227c85;
        color: #fff;
        padding: 10px 15px 10px 15px;
    }

    .MobileTableView {
        display: none;
    }

    input#deleteButton.btn.btn-danger-fullwidth {
        background: #e55353;
        color: #fff;
        padding: 10px 20px 10px 20px;
    }
}

/*mobile view*/
@media (max-width:767px) {

    /*forgot password and remember me alternative layouts*/
    .row-desktop-view {
        display: none;
    }

    .row-mobile-view {
        display: block;
        text-align: center;
    }

    /*general buttons*/
    button#addButton {
        width: 100%;
    }

    /*pagination*/
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: center !important;
        margin-left: -30px;
        margin-top: 20px;
    }

    /*users edit and delete button*/
    a.btn.btn-primary {
        min-width: 67px;
    }

    /*mobile top bar*/
    header.c-header.c-header-fixed {
        background: #227c85;
    }

    img.header-logo {
        width: 155px;
        height: 100px;
    }

    breadcrumb {
        /*padding-top: 7px;
    align-content: center;*/
        display: none;
    }

    .breadcrumb-item.active {
        color: #fff;
    }

    .breadcrumb-item a:hover {
        color: #659990;
    }

    /*.c-icon {
    color: rgb(255 255 255);
}*/
    /*dashboard*/
    form.form-validation-helper {
        text-align: center;
    }

    .card-header {
        text-align: center;
    }

    input#submit-form-button {
        width: 100%;
    }

    .h3,
    h3 {
        font-size: 1.3rem;
    }

    .c-footer {
        display: inline-block;
        text-align: center;
        margin: 0 auto;
        padding: 0;
    }

    /*header*/
    .c-header .c-header-brand {
        width: 78%;
    }

    html:not([dir=rtl]) .mfe-auto {
        margin-right: 0;
    }

    /*create new uer*/
    .col-sm-10.col-form-label.userrole {
        display: grid;
        text-align: left;
    }

    a.btn.btn-default.float-right.mr-1 {
        width: 100%;
        margin-top: 20px;
    }

    /*notifications*/
    ul.mt-4 {
        text-align: left;
        padding: 0;
    }

    /*buttons*/
    input#submit-form-button.btn.btn-success.float-right.editUser {
        margin-top: 20px;
    }

    .nav-tabs-boxed .tab-content {
        margin-bottom: 20px;
    }

    /*reports*/
    button#submit-form-button {
        width: 100%;
    }

    /*issues*/
    a.btn-primary.btn {
        width: 100%;
    }

    .main-div-issue {
        display: block;
    }

    .tab-content {
        display: inline;
        width: 100%;
    }

    .tab-file-attachment.tab-img-attachment {
        max-width: 350px;
        margin: 0;
    }

    .tab-file-attachment {
        max-width: 340px;
        margin: auto;
    }

    td.organizationLogo img {
        max-width: 80px;
    }

    /*organization info*/
    .nav-tabs-boxed {
        text-align: center;
    }

    li.nav-item {
        margin: auto;
    }

    .nav-tabs-boxed .nav-tabs .nav-link.active {
        background-color: #227c85;
        border-bottom-color: #227c85;
        border-radius: 5px;
    }

    /*.nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #ebedef;
    border-color: #c4c9d0 #c4c9d0 #ebedef;
}/*
a.btn.btn-primary2 {
    background: #227c85;
}
/*documents*/
    /*packsinorg*/
    .ml-1PacksinInOrg {
        margin-left: 0px;
    }

    a.btn.btn-primaryPacksinInOrg {
        background: #227c85;
        color: #fff;
        max-width: 66.28px;
        margin-bottom: 5px;
    }

    /*documentpack*/
    .tableDocumentPack1,
    .tableDocumentPack2 {
        display: block;
    }

    input.btn.btn-primary-pack {
        background: #426c70;
        color: #fff;
        width: 100%;
        margin-top: 5px;
    }

    /*new table view*/
    tr.myUserTable {
        display: grid;
        margin-bottom: 50px;
        line-height: 30px;
        border: 2px solid #426c70;
        padding: 10px;
        border-radius: 5px;
    }

    td.myTdTitle {
        background: #227c85;
        color: #fff;
        border-radius: 5px;
        padding: 0;
    }

    table.tableMyUsertable {
        margin-top: 20px;
        width: 100%;
    }

    .DesktopTableView {
        display: none;
    }

    td.usersListButtons {
        margin-top: 30px;
    }

    a.btn.btn-danger-usersListDelete {
        background: #e55353;
        width: 100%;
        color: #fff;
        margin-top: 5px;
    }

    a.btn.btn-primary-editSite {
        background: #426c70;
        color: #fff;
        width: 100%;
    }

    td.siteButtons {
        padding: 0;
    }

    /*fault list*/
    .card-body-fault,
    .card-body-asset {
        padding: 0;
    }

    /*edit organization*/
    input#deleteButton.btn.btn-danger-fullwidth {
        width: 100%;
        margin-bottom: 20px;
        background: #e55353;
        color: #fff;
        margin-top: 50px;
    }

    /*footer*/
    footer.c-footer {
        margin-bottom: 50px;
    }

    /*pagination and search on index*/
    div#DataTables_Table_0_length,
    div#DataTables_Table_0_filter {
        display: grid;
        line-height: 40px;
    }

        div#DataTables_Table_0_length label,
        div#DataTables_Table_0_filter label {
            text-align: center;
            font-weight: 600;
        }

    div#DataTables_Table_0_info {
        text-align: center;
        margin-top: 30px
    }

    .pagination {
        justify-content: center;
        margin-top: 30px;
    }

    thead.mobileHead {
        display: none;
    }

    /*menu icon mobile*/
    svg.c-icon.c-icon-lg-menu {
        color: #fff;
    }
}

/*end mobile view.CL*/
/*at a glance demo on dashboard in work*/
.atAGlance {
    width: 100%;
    padding: 10px;
}

.atAGlanceContainer {
    border: 1px solid #227c85;
    min-height: 200px;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.table-responsive {
    overflow-x: hidden;
}

/* Fix for DataTables hidden columns with d-none class */
.table th.d-none,
.table td.d-none {
    display: none !important;
    width: auto !important;
}

/* Restore borders for Assets and Faults tables */
.assets-faults-table.table-bordered td,
.assets-faults-table.table-bordered th {
    border: 0 !important;
    border-bottom: 1px solid #227c85 !important;
    padding: 12px 20px !important;
    vertical-align: middle;
}

.assets-faults-table thead th {
    border-bottom: 2px solid #227c85 !important;
    padding: 15px 20px !important;
}

/* --- Roimer --- */
/* --- FIX DATA TABLES WIDTH (Assets & Faults) --- */
/* Esto es porque hay 1 columna oculta para el filtor de ServiceType y afecta el calculo del ancho en las columnas visibles */
.assets-faults-table th:nth-last-child(2),
.assets-faults-table td:nth-last-child(2) {
    min-width: 100px !important;
    /* Fuerza el ancho ignorando a DataTables */
    width: 100px !important;
    /* Asegura consistencia visual */
    white-space: nowrap;
    /* Evita que el texto "Edit" se rompa */
    text-align: center;
}

/* Ajuste adicional para asegurar que el contenido no desborde */
.assets-faults-table .btn {
    white-space: nowrap;
}

/* Ensure mobile tables don't have width:0px issues */
@media (max-width: 767px) {
    .MobileTableView table {
        width: 100% !important;
    }

        .MobileTableView table th,
        .MobileTableView table td {
            width: auto !important;
        }

    /* Adjust dropdown filter for mobile */
    select#serviceTypeFilter,
    select#serviceTypeFilterFault {
        font-size: 14px;
        padding: 8px 12px;
        height: auto;
        max-width: 100%;
    }

    /* Adjust filter container for mobile */
    .row.mb-3 {
        margin-bottom: 1rem !important;
    }

        .row.mb-3 .col-md-4 {
            padding: 0 15px;
        }

        .row.mb-3 label {
            font-size: 14px;
            margin-bottom: 5px;
        }
}


/* Bulk imports - Services and Faults Types*/
.text-muted-custom {
    color: #969696 !important;
}

/* ================================================== */
/* Organization Info Tab - Card Layout Improvements  */
/* ================================================== */

/* Organization logo display container */
.organization-logo-display {
    max-width: 400px;
    margin: 0 auto;
}

/* Organization logo image styling */
.organization-logo {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
}

/* Description list styling for card-based layout */
dl.row dt {
    font-weight: 600;
    color: #495057;
}

dl.row dd {
    color: #212529;
}

/* Sites Tab - Card Layout */
.site-card {
    border-left: 4px solid #227c85;
    transition: box-shadow 0.3s ease;
}

    .site-card:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

/* Site action buttons container */
.site-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* QR code container styling */
.qr-code-container {
    background-color: #f8f9fa;
}

.qr-code-image {
    max-width: 300px;
    height: auto;
}

/* Mobile Responsive for Organization Info */
@media (max-width: 767px) {
    .site-actions {
        flex-direction: column;
    }

        .site-actions .btn {
            width: 100%;
        }

    .organization-logo {
        max-height: 150px;
    }

    /* Ensure cards stack properly on mobile */
    .org-info-cards .card {
        margin-bottom: 1rem;
    }
}

/* ========================================
   UX IMPROVEMENTS - Layout de 2 Columnas + Pills
   ======================================== 
   Roimer*/

/* ========================================
   LAYOUT DE 2 COLUMNAS PARA FORMS
   ======================================== */

.form-two-column-layout {
    display: flex !important;
    gap: 2rem;
    flex-wrap: nowrap;
}

    .form-two-column-layout .form-main-content {
        flex: 1 !important;
        min-width: 0;
        /* Prevent flex item overflow */
        display: block !important;
    }

    .form-two-column-layout .form-side-content {
        flex: 0 0 300px !important;
        width: 300px;
        display: block !important;
    }

/* Responsive: Stack en mobile */
@media (max-width: 991px) {
    .form-two-column-layout {
        flex-direction: column !important;
    }

        .form-two-column-layout .form-side-content {
            flex: 1 !important;
            width: 100%;
        }
}

/* ========================================
   COLLAPSIBLE FORM SECTIONS
   ======================================== */

.collapsible-section {
    margin-bottom: 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
}

.section-toggle {
    width: 100%;
    background: #ffefda;
    border: none;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .section-toggle:hover {
        background: #227c85;
        color:#fff;
    }

    .section-toggle .toggle-icon {
        margin-left: 0.5rem;
        transition: transform 0.2s;
    }

/* ================================================== */
/* SITE MANAGEMENT UI - Table & QR & Responsiveness */
/* Added Feb 4th 2026 - UX Refactoring */
/* ================================================== */

/* Force Table Header Styling - Matching Teal Brand Color */
#sitesTable thead th {
    background-color: #227c85;
    /* Trusted Teal */
    color: white;
    border-bottom: 1px solid #227c85;
    border-top: none;
}

/* Hover Effects */
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

.btn-ghost-primary:hover,
.btn-ghost-dark:hover {
    transform: scale(1.1);
    transition: all 0.2s;
}

/* Responsive Button Custom Class */
@media (max-width: 767.98px) {
    .btn-block-xs {
        width: 100%;
        display: block;
        margin-bottom: 0.5rem;
    }
}

/* Print Styling for QR Modal */
@media print {

    /* Hide everything by default */
    body * {
        visibility: hidden;
    }

    /* Show only the modal content */
    #qrModal,
    #qrModal * {
        visibility: visible;
    }

        /* Position the modal content at the top of the page */
        #qrModal .modal-dialog {
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            max-width: 100%;
        }

        #qrModal .modal-content {
            border: none;
            box-shadow: none;
        }

        /* Hide buttons inside the modal when printing */
        #qrModal .btn,
        #qrModal .close {
            display: none !important;
        }
}


.section-toggle.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.section-content {
    padding: 1rem;
    display: none;
}

    .section-content.show {
        display: block;
    }

/* ========================================
   SITE STRUCTURE TREE - Site info page
   ======================================== */

.structure-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-left: auto;
}

.structure-stat {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

    .structure-stat b {
        display: block;
        font-size: 1.25rem;
        line-height: 1.1;
        color: var(--primaryColour);
    }

    .structure-stat span {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #6c757d;
    }

.structure-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e4eaea;
    background: #f6f9f9;
}

.structure-filter {
    flex: 1 1 220px;
    min-width: 180px;
}

.structure-tree {
    padding: 0.9rem 1rem 1.25rem;
}

ul.structure-branch {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.structure-branch ul.structure-branch {
        margin: 0.3rem 0 0.25rem 0.8rem;
        padding-left: 1rem;
        border-left: 1px solid #e4eaea;
    }

.structure-node { margin-bottom: 0.35rem; }

.structure-row {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}

.structure-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: #fff;
    color: inherit;
    border: 1px solid #e4eaea;
    border-left: 3px solid var(--primaryColour);
    border-radius: 999px;
    padding: 0.35rem 0.9rem 0.35rem 0.6rem;
}

    .structure-toggle:hover { background: #f2f7f7; border-color: #cfdcdc; border-left-color: var(--primaryColour); }
    .structure-toggle.is-inert { cursor: default; }
    .structure-toggle.is-inert:hover { background: #fff; }

.structure-chev {
    flex: none;
    width: 0.85rem;
    font-size: 0.6rem;
    color: #93a3a3;
    transition: transform 0.15s ease;
}

.structure-node.is-open > .structure-row > .structure-toggle .structure-chev { transform: rotate(90deg); }
.structure-node.is-leaf > .structure-row > .structure-toggle .structure-chev { visibility: hidden; }

.structure-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primaryColour);
}

.structure-name { font-weight: 600; }
.structure-sub { color: #8b9a9a; font-size: 0.85rem; }

.structure-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-left: auto;
}

.structure-chip {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #f0f4f4;
    color: #5c6b6b;
    border: 1px solid #e4eaea;
    white-space: nowrap;
}

    .structure-chip.teal  { background: #dceef0; color: #17565c; border-color: transparent; }
    .structure-chip.green { background: #dcf0e4; color: #2f6a49; border-color: transparent; }
    .structure-chip.lime  { background: #eaf3dd; color: #536f31; border-color: transparent; }
    .structure-chip.gold  { background: #f6efd3; color: #6f5a10; border-color: transparent; }
    .structure-chip.plum  { background: #efe7f3; color: #554061; border-color: transparent; }
    .structure-chip.warn  { background: #fae3da; color: #b4451f; border-color: transparent; }

.structure-open {
    flex: none;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid #e4eaea;
    color: var(--primaryColour);
    background: #fff;
    white-space: nowrap;
}

    .structure-open:hover {
        text-decoration: none;
        color: var(--white);
        background: var(--primaryColour);
        border-color: var(--primaryColour);
    }

/* Node type accents */
.structure-node[data-node-type="asset"] > .structure-row > .structure-toggle { border-left-color: #4c9a6d; }
.structure-node[data-node-type="asset"] > .structure-row > .structure-toggle .structure-dot { background: #4c9a6d; }
.structure-node[data-node-type="assetgroup"] > .structure-row > .structure-toggle { border-left-color: #7fae4d; }
.structure-node[data-node-type="assetgroup"] > .structure-row > .structure-toggle .structure-dot { background: #7fae4d; }
.structure-node[data-node-type="areagroup"] > .structure-row > .structure-toggle { border-left-color: #a8871a; }
.structure-node[data-node-type="areagroup"] > .structure-row > .structure-toggle .structure-dot { background: #a8871a; }
.structure-node[data-node-type="servicetype"] > .structure-row > .structure-toggle,
.structure-node[data-node-type="document"] > .structure-row > .structure-toggle { border-left-color: #7a5d8a; }
.structure-node[data-node-type="servicetype"] > .structure-row > .structure-toggle .structure-dot,
.structure-node[data-node-type="document"] > .structure-row > .structure-toggle .structure-dot { background: #7a5d8a; }

.structure-node.is-dimmed > .structure-row { opacity: 0.45; }

.structure-empty,
.structure-loading,
.structure-error {
    list-style: none;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: #8b9a9a;
    font-style: italic;
}

.structure-error { color: #b4451f; font-style: normal; }

.structure-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid #e4eaea;
    background: #f6f9f9;
    font-size: 0.78rem;
    color: #6c757d;
}

    .structure-legend span { display: flex; align-items: center; gap: 0.35rem; }
    .structure-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

@media (max-width: 767px) {
    .structure-summary { margin-left: 0; width: 100%; justify-content: space-between; gap: 0.75rem; }
    .structure-toggle { flex-wrap: wrap; border-radius: 0.6rem; }
    .structure-chips { margin-left: 0; width: 100%; }
}

/* Remaining-warranty pill (issue detail + warranty screens) */
.warranty-left-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--lightgreen);
    color: #14411f;
    margin-bottom: 0.25rem;
}

    .warranty-left-badge.warranty-left-expired {
        background: #f8d7da;
        color: #721c24;
    }

/* Hint line shown above a collapsible section to draw attention to it */
.section-hint {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

    .section-hint i {
        color: var(--primaryColour);
    }

/* Highlighted variant of a collapsible section (e.g. Advanced Options on the Area form) */
.collapsible-section-highlight {
    border: 2px solid var(--primaryColour);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.section-toggle-highlight {
    background: var(--primaryColour);
    color: var(--white);
    font-weight: 600;
}

    .section-toggle-highlight:hover {
        filter: brightness(1.1);
    }

/* Badge for optional/required indicators */
.section-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* ========================================
   MAPPINGS SECTION - focus mapping section
   ======================================== */

/* Active Mappings Section (Edit Mode) */
.mappings-section-prominent {
    background: linear-gradient(135deg, #e8f5f3 0%, #d4edea 100%);
    border: 2px solid #337e74;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(51, 126, 116, 0.1), 0 2px 4px -1px rgba(51, 126, 116, 0.06);
    position: relative;
}

    .mappings-section-prominent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #337e74, #4a9e91, #337e74);
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .mappings-section-prominent .mappings-header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(51, 126, 116, 0.2);
    }

        .mappings-section-prominent .mappings-header h5 {
            margin: 0;
            color: #2a6b62;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

    .mappings-section-prominent .mappings-subtitle {
        font-size: 0.875rem;
        color: #4a7c75;
        margin-top: 0.25rem;
        width: 100%;
    }

    .mappings-section-prominent .mapping-item {
        background: white;
        padding: 1rem;
        border-radius: 0.375rem;
        margin-bottom: 1rem;
        border: 1px solid #c5d9d6;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .mappings-section-prominent .mapping-item:hover {
            border-color: #337e74;
            box-shadow: 0 1px 3px rgba(51, 126, 116, 0.15);
        }

        .mappings-section-prominent .mapping-item:last-child {
            margin-bottom: 0;
        }

    /* Collapsible variant for prominent mappings */
    .mappings-section-prominent.collapsible {
        padding: 0;
    }

        .mappings-section-prominent.collapsible .mappings-header-toggle {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            padding: 1rem 1.25rem;
            cursor: pointer;
            border: none;
            background: transparent;
            width: 100%;
            text-align: left;
            transition: background-color 0.2s;
        }

            .mappings-section-prominent.collapsible .mappings-header-toggle:hover {
                background: rgba(51, 126, 116, 0.05);
            }

            .mappings-section-prominent.collapsible .mappings-header-toggle h5 {
                margin: 0;
                color: #2a6b62;
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .mappings-section-prominent.collapsible .mappings-header-toggle .toggle-icon {
                margin-left: auto;
                color: #337e74;
                transition: transform 0.3s;
            }

            .mappings-section-prominent.collapsible .mappings-header-toggle.collapsed .toggle-icon {
                transform: rotate(-90deg);
            }

        .mappings-section-prominent.collapsible .mappings-content {
            padding: 0 1.25rem 1.25rem 1.25rem;
            border-top: 1px solid rgba(51, 126, 116, 0.2);
        }

        .mappings-section-prominent.collapsible .mappings-subtitle {
            font-size: 0.875rem;
            color: #4a7c75;
            width: 100%;
            margin-top: 0.5rem;
        }

    .mappings-section-prominent .autosave-notice {
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid #0ea5e9;
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        margin-bottom: 1rem;
        font-size: 0.875rem;
        color: #0369a1;
    }

        .mappings-section-prominent .autosave-notice i {
            color: #0ea5e9;
        }

/* Disabled Mappings Preview (Create Mode) */
.mappings-preview-disabled {
    opacity: 0.7;
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px dashed #ced4da;
}

    .mappings-preview-disabled h5 {
        color: #6c757d;
    }

    .mappings-preview-disabled .fa-lock {
        margin-right: 0.5rem;
    }

/* ========================================
   TOOLTIP & HELP ICONS
   ======================================== */

.tooltip-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #6c757d;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    margin-left: 0.25rem;
    cursor: help;
    font-weight: bold;
}

    .tooltip-icon:hover {
        background: #5a6268;
    }

/* ========================================
   INFO PANEL (RIGHT SIDEBAR)
   ======================================== */

.info-panel {
    background: #ffefda;
    padding: 1.5rem;
    border-radius: 8px;
    border: none;
    position: sticky;
    top: 20px;
}

    .info-panel h5 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #495057;
    }

    .info-panel .form-group:last-child {
        margin-bottom: 0;
    }

/* ========================================
   HIERARCHY BREADCRUMB
   ======================================== */

.hierarchy-breadcrumb {
    background: #fff;
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border-left: 3px solid #17a2b8;
}

    .hierarchy-breadcrumb .breadcrumb-separator {
        margin: 0 0.5rem;
        color: #6c757d;
    }

    .hierarchy-breadcrumb strong {
        color: #17a2b8;
        font-weight: 600;
    }

/* ========================================
   PHOTO CONTAINER
   ======================================== */

.photo-upload-container {
    padding: 1.5rem;
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    text-align: center;
    background-color: #f8f9fa;
    position: sticky;
    top: 20px;
}

/* ========================================
   WIZARD STEPPER
   ======================================== */

.wizard-container {
    margin-bottom: 2rem;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
    position: relative;
}

    /*.wizard-steps::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background: #dee2e6;
        z-index: 0;
        transform: translateY(-50%);
    }*/
.wizard-steps::before{
    display:none;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.wizard-step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.wizard-step.active .wizard-step-circle {
    background: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(23, 162, 184, 0.2);
}

.wizard-step.completed .wizard-step-circle {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
}

    .wizard-step.completed .wizard-step-circle::before {
        content: '✓';
        font-size: 1.5rem;
    }

.wizard-step-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

.wizard-step.active .wizard-step-label {
    color: #17a2b8;
    font-weight: 600;
}

.wizard-step.completed .wizard-step-label {
    color: #28a745;
}

/* Wizard Content */
.wizard-content {
    background: #fff;
    border-radius: 0.375rem;
    padding: 2rem;
    min-height: 400px;
}

.wizard-step-content {
    display: none;
}

    .wizard-step-content.active {
        display: block;
        animation: fadeIn 0.3s ease-in;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Wizard Navigation */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}

.wizard-nav-button {
    min-width: 120px;
}

/* Responsive Wizard */
@media (max-width: 768px) {
    .wizard-steps {
        flex-direction: column;
        gap: 1rem;
    }

        .wizard-steps::before {
            display: none;
        }

    .wizard-step-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .wizard-step {
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
        gap: 1rem;
    }

    .wizard-step-label {
        text-align: left;
    }
}

/* Wizard-specific tooltip icon */
.wizard-content .tooltip-icon {
    font-size: 1rem;
    cursor: help;
    opacity: 0.7;
}

/* ========================================
   WIZARD VISUAL PREVIEW
   ======================================== */

.area-preview-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem;
    padding: 2.5rem;
    color: white;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    animation: slideInUp 0.5s ease-out;
}

    .area-preview-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: pulse 3s ease-in-out infinite;
    }

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.area-preview-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.area-preview-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.area-preview-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.visual-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.75rem 1.25rem;
    border-radius: 2rem;
    backdrop-filter: blur(10px);
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.visual-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

    .visual-breadcrumb-item i {
        font-size: 1rem;
    }

.visual-breadcrumb-separator {
    opacity: 0.6;
    font-size: 1.25rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.info-badge {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeInScale 0.5s ease-out backwards;
}

    .info-badge:nth-child(1) {
        animation-delay: 0.1s;
    }

    .info-badge:nth-child(2) {
        animation-delay: 0.2s;
    }

    .info-badge:nth-child(3) {
        animation-delay: 0.3s;
    }

    .info-badge:nth-child(4) {
        animation-delay: 0.4s;
    }

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.info-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.info-badge-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.info-badge-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.info-badge-value {
    font-size: 1.125rem;
    color: #2d3748;
    font-weight: 600;
}

.next-steps-list {
    background: #f8f9fa;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

    .next-steps-list h6 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
        color: #2d3748;
    }

    .next-steps-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .next-steps-list li {
        padding: 0.75rem 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border-bottom: 1px solid #e2e8f0;
        color: #4a5568;
    }

        .next-steps-list li:last-child {
            border-bottom: none;
        }

        .next-steps-list li i {
            color: #667eea;
            font-size: 1.25rem;
        }

.photo-upload-container img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo-upload-container .btn {
    width: 100%;
}

.photo-upload-placeholder {
    width: 100%;
    height: 200px;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ========================================
   PILLS/TAGS PARA SELECCIONES
   ======================================== */

/* Green tag style for Select2 single-select - matches multi-select tag look */
.select2-green-tag {
    display: inline-flex;
    align-items: center;
    background-color: #e4e4e4;
    color: #333;
    border: 1px solid #aaa;
    border-radius: 0.2rem;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.select2-green-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
    cursor: pointer;
    border-right: 1px solid #c3e6cb;
    color: #666;
    font-size: 1rem;
    font-weight: bold;
    padding: 0 2px;
}

    .select2-green-tag-remove:hover {
        background-color: #c3e6cb;
        color: #333;
    }

.select2-green-tag-text {
    padding: 1px 8px;
}

/* Hide native Select2 clear button when using green tag template */
.select2-green-pill .select2-selection__clear {
    display: none !important;
}

.pill-select-visible {
    display: block;
}


/* ========================================
   FORM SPACING IMPROVEMENTS
   ======================================== */

.form-edit-improved .form-group {
    margin-bottom: 1.5rem;
}

    .form-edit-improved .form-group:last-child {
        margin-bottom: 0;
    }

.form-edit-improved label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* ========================================
   BADGE STYLES
   ======================================== */

.badge-lg {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

/* Esto se usa para el ID de los Group*/
.badge-success {
    color: #fff;
    background-color: #426C70 !important;
}


/* ========================================
   SINGLE SELECT PILL STYLES
   ======================================== */
/*.single-selection-pill {
    background-color: #227c85;
    color: #fff !important;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 2px;
    /* Slight adjustment for vertical center */
/* padding: 0 5px;
    display: flex;
    align-items: center;
    line-height: 1.5;
}*/

.single-selection-pill .pill-remove {
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    margin-right: 5px;
    font-size: 1.2em;
    padding-right: 4px;
    /* separation */
    border-right: 1px solid #ccc;
    /* Optional separator to match multi style or just space */
    line-height: 1;
}

    .single-selection-pill .pill-remove:hover {
        color: #333;
    }

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 5px !important;
    padding-right: 5px;
    border-right: 1px solid #ccc;
    color: #fff !important;
}

/* Hide default Select2 clear button when using our custom pill */
.select2-container .select2-selection--single .select2-selection__clear {
    display: none;
}

/* We only want to hide it if we are actually using the pill, but generally for these specific controls it's safer to hide globally or scope it. 
   Better: The JS can add a class to the container. 
*/
.select2-container--pill-style .select2-selection__clear {
    display: none !important;
}

/* Adjust rendered container padding/height if needed */
.select2-container--pill-style .select2-selection--single {
    height: auto !important;
    padding-bottom: 2px;
}

    .select2-container--pill-style .select2-selection--single .select2-selection__rendered {
        padding-left: 4px;
        padding-top: 2px;
        line-height: normal;
    }

/*capsules*/
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.single-selection-pill {
    padding: 5px 10px 5px 5px !important;
    background-color: #227c85 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
}

/*end capsules*/





/* Mapping Toast Notifications */
.mapping-toast {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mapping-toast .fa {
    margin-right: 0.5rem;
}

/* Mapping Spinner */
.mapping-spinner {
    color: #426C70;
    font-size: 0.875rem;
    font-weight: 500;
}

    .mapping-spinner .fa-spinner {
        margin-right: 0.25rem;
    }

/* Derived Assets Display (Readonly from Asset Groups) */
.derived-assets-group {
    padding: 8px;
    border-left: 3px solid #6c757d;
    margin-bottom: 8px;
    background-color: #f8f9fa;
}

.derived-assets-group-header {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 4px;
}

.derived-asset-badge {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    color: #495057;
    font-size: 0.85rem;
    padding: 4px 8px;
    margin-right: 4px;
    margin-bottom: 4px;
    display: inline-block;
}

    .derived-asset-badge i {
        color: #6c757d;
    }

/* ===============================================
   Context Panel (Hierarchical Sidebar) - Idea
   =============================================== */

/* Floating toggle button (visible when panel is collapsed) */
.context-panel-float-toggle {
    position: fixed;
    top: 70px;
    right: 10px;
    background: #227c85;
    color: #ffffff;
    border: none;
    border-radius: 8px 0 0 8px;
    padding: 12px 10px;
    cursor: pointer;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
}

    .context-panel-float-toggle i {
        font-size: 18px;
    }

.float-toggle-text {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.context-panel-float-toggle:hover {
    background: #1a6269;
    transform: translateX(-3px);
}

/* Show float button when panel is collapsed */
.context-panel.collapsed + .context-panel-float-toggle {
    opacity: 1;
    pointer-events: all;
}

.context-panel {
    position: fixed;
    top: 60px;
    /* Adjust based on navbar height */
    right: 0;
    width: 320px;
    height: calc(100vh - 60px);
    background: #ffffff;
    border-left: 2px solid #e9ecef;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    transition: transform 0.3s ease;
    z-index: 1000;
}

    .context-panel.collapsed {
        transform: translateX(320px);
    }

.context-panel-header {
    position: sticky;
    top: 0;
    background: #227c85;
    /* App primary color */
    color: #ffffff;
    padding: 15px;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

    .context-panel-header i.fa-map-marker {
        margin-right: 8px;
    }

.context-panel-toggle {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
}

    .context-panel-toggle:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    .context-panel-toggle:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    }

.context-panel-body {
    padding: 20px 15px;
}

.context-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

    .context-item:last-child {
        border-bottom: none;
    }

    .context-item.context-current {
        background: linear-gradient(to right, #e6f2f3 0%, #ffffff 100%);
        border: 2px solid #227c85;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(34, 124, 133, 0.1);
    }

.context-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

    .context-label i {
        margin-right: 6px;
        width: 16px;
        text-align: center;
        color: #227c85;
    }

.context-value {
    font-size: 0.95rem;
    color: #212529;
}

.context-link {
    color: #227c85;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
}

    .context-link:hover {
        color: #1a6269;
        text-decoration: underline;
    }

.context-list {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
}

    .context-list li {
        padding: 6px 0;
        font-size: 0.9rem;
    }

        .context-list li:before {
            content: "└─";
            margin-right: 6px;
            color: #adb5bd;
        }

.context-separator {
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #dee2e6 50%, transparent 100%);
    margin: 20px 0;
}

.context-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

    .summary-row.summary-total {
        border-top: 2px solid #dee2e6;
        margin-top: 8px;
        padding-top: 12px;
    }

.summary-label {
    font-size: 0.9rem;
    color: #495057;
}

    .summary-label i {
        margin-right: 6px;
        width: 16px;
        text-align: center;
    }

.summary-value {
    font-size: 0.9rem;
    font-weight: 600;
}



/* ========================================
   USER FORM - Section Headers & Grouping
   ======================================== */

.user-form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
}

.user-form-section-header {
    color: #227c85;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e6f2f3;
    display: flex;
    align-items: center;
}

    .user-form-section-header i {
        font-size: 0.9rem;
    }

/* Two-column field layout inside sections */
.user-form-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

    .user-form-row .user-form-field {
        flex: 1;
        min-width: 0;
    }

.user-form-field label {
    color: #227c85;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

@media (max-width: 767px) {
    .user-form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ========================================
   USER FORM - Permission Groups Styling
   ======================================== */

.permissions-grouped {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid #e9ecef;
}

.permission-group {
    background: white;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e9ecef;
    border-left: 3px solid #227c85;
}

    .permission-group h6 {
        color: #227c85;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e9ecef;
    }

        .permission-group h6 i {
            opacity: 0.7;
        }

/* Permission row - tighter layout */
.permission-row {
    justify-content: flex-start !important;
    gap: 1rem;
}

    .permission-row label {
        min-width: 180px;
        flex-shrink: 0;
    }

/* Individual permission item */
.permission-group .permission {
    padding: 0.25rem 0.5rem;
}

    .permission-group .permission label {
        display: block;
        color: #495057;
        font-size: 0.78rem;
        margin-bottom: 0.35rem;
    }

    .permission-group .permission select {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
        height: auto;
        border-color: #ced4da;
        border-radius: 0.25rem;
    }

/* ========================================
   USER FORM - Notification Options
   ======================================== */

.notification-option {
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .notification-option:hover {
        border-color: #227c85 !important;
        box-shadow: 0 1px 3px rgba(34, 124, 133, 0.1);
    }

    .notification-option .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #227c85;
        border-color: #227c85;
    }

/* ========================================
   USER FORM - Action Buttons
   ======================================== */

.user-form-actions {
    border-top: 2px solid #e6f2f3;
    padding-top: 1rem;
    margin-top: 1rem;
}

/* ======================
    BULK IMPORT PANEL - estilos especificos
 =========================*/

.btn-outline-primary {
    color: #fff;
    border: none;
    background-color: #000;
}

    .btn-outline-primary.nav-link:hover:hover {
        color: #20bbb3 !important;
        border-color: #164b48 !important;
    }











/* Responsive adjustments */
@media (max-width: 1400px) {
    .context-panel {
        width: 280px;
    }

        .context-panel.collapsed {
            transform: translateX(280px);
        }
}

@media (max-width: 1200px) {
    .context-panel {
        transform: translateX(320px);
    }

        .context-panel.collapsed {
            transform: translateX(320px);
        }
}

/* Main content adjustment when context panel is visible */
body.has-context-panel .container-fluid {
    margin-right: 340px;
    transition: margin-right 0.3s ease;
}

body.has-context-panel.panel-collapsed .container-fluid {
    margin-right: 0;
}

/* ================================================== */
/* SITE MANAGEMENT UI - Table & QR & Responsiveness */
/* Added Feb 4th 2026 - UX Refactoring */
/* ================================================== */

/* Force Table Header Styling - Matching Teal Brand Color */
/*#sitesTable thead th {
    background-color: #426C70;
    /* Trusted Teal */
    /*color: white;
    border-bottom: 2px solid #355a5e;
    border-top: none;
}
*/
/* Hover Effects */
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

.btn-ghost-primary:hover,
.btn-ghost-dark:hover {
    transform: scale(1.1);
    transition: all 0.2s;
}

/* Responsive Button Custom Class */
@media (max-width: 767.98px) {
    .btn-block-xs {
        width: 100%;
        display: block;
        margin-bottom: 0.5rem;
    }
}

/* Print Styling for QR Modal */
@media print {

    /* Hide everything by default */
    body * {
        visibility: hidden;
    }

    /* Show only the modal content */
    #qrModal,
    #qrModal * {
        visibility: visible;
    }

        /* Position the modal content at the top of the page */
        #qrModal .modal-dialog {
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            max-width: 100%;
        }

        #qrModal .modal-content {
            border: none;
            box-shadow: none;
        }

        /* Hide buttons inside the modal when printing */
        #qrModal .btn,
        #qrModal .close {
            display: none !important;
        }
}

/* ================================================== */
/* DASHBOARD UX IMPROVEMENTS                          */
/* Added Feb 2026                                     */
/* ================================================== */
h2{
    font-size:1.5rem;
    font-weight:600;
}
h5 {
    font-size: 1.2rem;
    font-weight: 600;
}
h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0;
}
.dashboard-welcome-title {
    color: #fff;
    background: #227c85;
    font-weight: 600;
    font-size: 1.5rem;
    border-radius: 8px;
    padding: .75rem 1.25rem;
    text-align: center;
}

.dashboard-kpi-card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .dashboard-kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .dashboard-kpi-card.border-left-teal {
        border-left: 4px solid #227c85;
    }

    .dashboard-kpi-card.border-left-warning {
        border-left: 4px solid #f9b115;
    }

    .dashboard-kpi-card.border-left-success {
        border-left: 4px solid #2eb85c;
    }

    .dashboard-kpi-card.border-left-info {
        border-left: 4px solid #3399ff;
    }

.dashboard-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.2;
}

.dashboard-kpi-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    font-weight: 600;
    margin-top: 0.25rem;
}

.dashboard-section-header {
    background: #227c85;
    border-bottom: 2px solid #227c85;
    padding: 0.75rem 1.25rem;
    width: 100%;
}

    .dashboard-section-header h5 {
        color: #fff;
        font-weight: 600;
        font-size: 1.5rem;
        margin: auto;
    }

.dashboard-announcements-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-comments-list {
    max-height: 350px;
    overflow-y: auto;
}

.dashboard-comment-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #edf2f7;
    transition: background-color 0.15s;
}

    .dashboard-comment-item:last-child {
        border-bottom: none;
    }

    .dashboard-comment-item:hover {
        background-color: #f7fafc;
    }

.dashboard-comment-author {
    font-weight: 600;
    color: #227c85;
    font-size: 0.9rem;
}

.dashboard-comment-date {
    font-size: 0.78rem;
    color: #a0aec0;
    margin-left: 0.5rem;
}

.dashboard-comment-text {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.5;
}

.dashboard-comment-form textarea {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    resize: vertical;
}

    .dashboard-comment-form textarea:focus {
        border-color: #227c85;
        box-shadow: 0 0 0 3px rgba(34, 124, 133, 0.15);
    }

.dashboard-btn-teal {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-weight: 500;
    transition: background-color 0.2s;
    padding: 10px 15px 10px 15px;
}

    .dashboard-btn-teal:hover {
        background-color: #1a6269;
        color: #fff;
    }

.dashboard-chart-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-preference-card {
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .dashboard-kpi-value {
        font-size: 1.5rem;
    }

    .dashboard-kpi-label {
        font-size: 0.7rem;
    }

    .dashboard-comments-list {
        max-height: 250px;
    }

    .dashboard-preference-card .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }

    .dashboard-preference-card select {
        max-width: 100% !important;
    }
}

/* ================================================== */
/* NOTIFICATIONS UX IMPROVEMENTS                      */
/* Added Feb 2026                                     */
/* ================================================== */
.btn{
    font-size:14px;
}
.btn-outline-danger {
    color: #fff;
    background: #000;
}
a.btn.btn-secondary.btn-lg {
    background: #000;
    color: #fff;
    padding: 10px 15px 10px 15px;
    font-size:14px;
}
small.form-text.text-info {
    background: red;
    background: #ffefda;
    padding: 10px 20px 10px 20px;
    border-radius: 8px;
    color: #fff;
}
p.included-notice {
    color: #000;
}
p.included-notice a:link {
    color: #000;
    text-decoration:underline;
}
a.btn.btn-sm.btn-outline-danger {
    border: none;
    border-radius: 8px;
    padding: 10px 15px 10px 15px;
}

button#submit-form-button {
    background: #000;
}

.alert-warning {
    color: #000;
    background-color: #ffe383;
    border-color: #fde9bd;
}
.alert-secondary {
    color: #000;
    background-color: #ffefda;
    border: none;
    border-radius: 8px;
}
#serviceTypeFile::file-selector-button, #faultTypeFile::file-selector-button, #Base64HeroImg::file-selector-button, #files::file-selector-button, input[name="file"]::file-selector-button, #inputFiles::file-selector-button, .doc-upload-browse-btn:active {
    background: #000;
    color: #fff;
    padding: 10px 20px 10px 20px;
    border: none;
    border-radius: 8px;
}

    #serviceTypeFile::file-selector-button:hover, #faultTypeFile::file-selector-button:hover, #files::file-selector-button:hover, input[name="file"]::file-selector-button:hover {
        background: #227c85;
        border: none;
        border-radius: 8px;
    }

a.btn.btn-primary.px-4 {
    background: #000;
}

    a.btn.btn-primary.px-4:hover {
        background: #227c85;
    }

input#serviceTypeFile, input#faultTypeFile, input#Base64HeroImg {
    min-height: 60px;
}
input.form-control-file {
    border: 1px solid #227c85;
    padding: 5px;
    border-radius: 8px;
}
a.btn.btn-dark.btn-sm, .btn-dark, .btn-outline-warning {
    color: #fff;
    background: #000;
    padding: 10px 15px 10px 15px;
    border: none;
    border-radius: 8px;
}

    a.btn.btn-dark.btn-sm:hover, .btn-dark:hover, .btn-outline-warning:hover {
        background: #227c85;
        color: #fff;
    }

button.btn.btn-warning {
    background: #000;
    color: #fff;
    border-radius: 8px;
}

button.btn.btn-warning:hover {
    background: #227c85;
    color: #fff;
    border-radius: 8px;
 }
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
}
input#files {
    border: 1px solid #227c85;
    padding: 5px;
}
/*bulk import wizard buttons*/
.col-md-3.bulk-wizard-buttons {
    max-width: 250px;
}
.row.bulk-wizard-row {
    justify-content: center;
    margin:auto;
}
a.btn.btn-outline-primary.btn-sm.btn-block.mb-2.bwba {
    padding: 10px;
    border-radius: 8px;
    font-size: 16px;
}
/**/
/*import assets*/
.card-body.text-dark {
    background: #fff;
    border: 1px solid #227c85;
    border-radius: 8px;
    min-height: 200px;
}
a.btn.btn-success, button.btn.btn-primary {
    background: #000;
    padding: 10px 15px 10px 15px;
    border-radius: 8px;
}
    a.btn.btn-success:hover, button.btn.btn-primary:hover {
        background: #227c85;
        padding: 10px 15px 10px 15px;
        border-radius: 8px;
    }
.table thead.thead-light th {
    background: #227c85;
    color:#fff;
}
button.btn.btn-outline-secondary {
    background: #000;
    color: #fff;
    border-radius: 8px;
    padding: 10px 15px 10px 15px;
}
.card-body.text-dark.min-height-310 {
    min-height: 310px !important;
}
/**/
.notification-header-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.card-header.site-tabs {
    margin-top: 20px;
    background: #ffefda;
}
.card-header.site-tabs h6{
    color:#000;
}
.btn-outline-info {
    background: #227c85;
    color: #fff;
    border: none;
}
.btn-outline-info:hover {
    background: #000;
    color: #fff;
    border: none;
}
.card-header.wizard-steps {
    background: #fff;
    border: none;
    margin: auto;
    display: block;      /* override flex from .wizard-steps */
    padding: 15;
    /* o Padding: 0*/
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge */
}
.card-header.wizard-steps::-webkit-scrollbar {
    display: none;              /* Chrome/Safari */
}
.card-header.wizard-steps .nav-tabs {
    border-bottom: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.card-header.wizard-steps .nav-tabs::-webkit-scrollbar {
    display: none;
}
.card-header.wizard-steps .nav-tabs .nav-item {
    white-space: nowrap;
}

/* Bulk import page wrapper — prevent overflow and fix mobile padding */
.bulk-import-wrapper {
    overflow-x: hidden;
}
.bulk-import-wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}
/* On very small screens, use negative margins to reclaim
   the container-fluid 15px gutters so bulk import has full width */
@media (max-width: 575px) {
    .bulk-import-wrapper {
        margin-left: -15px;
        margin-right: -15px;
    }
}

@media (max-width: 767px) {
    /* Remove min-height constraints on mobile */
    .card-body.text-dark,
    .card-body.text-dark.min-height-310 {
        min-height: unset !important;
    }
    /* ALL rows inside tab content — no gutters to prevent overflow */
    .card-body.text-dark .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .card-body.text-dark .row > [class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
    }
    /* Navigation buttons row — stack on mobile */
    .card-body.text-dark .mt-4 .float-right {
        float: none !important;
        display: block;
        margin-top: 8px;
        width: 100%;
    }
    .card-body.text-dark .mt-4 .btn {
        width: 100%;
        margin-bottom: 6px;
    }
    /* Alert info prereqs — compact on mobile */
    .alert.alert-info .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 575px) {
    /* ── Wizard tabs: vertical layout, bigger tap targets ──────────────── */
    .card-header.wizard-steps .nav-tabs {
        flex-direction: column;
        overflow-x: visible;
        overflow-y: visible;
        border-bottom: none;
        border-right: none;
    }
    .card-header.wizard-steps .nav-tabs .nav-item {
        white-space: normal;
        width: 100%;
    }
    .card-header.wizard-steps .nav-tabs .nav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 0;
        border: none;
        border-left: 4px solid transparent;
        border-bottom: 1px solid #dee2e6;
        text-align: left;
        padding: 14px 16px;
        font-size: 1rem;
    }
    .card-header.wizard-steps .nav-tabs .nav-link .badge {
        font-size: 0.85rem;
        padding: 0.35em 0.65em;
    }
        /*.card-header.wizard-steps .nav-tabs .nav-link.active {
        border-left-color: #227c85;
        background-color: #e8f7f7;
        color: #227c85;
        font-weight: 600;
    }*/
    .card-header.wizard-steps {
        width: 90%;
    }
    .card-header.wizard-steps .nav-tabs small {
        display: none;
    }
    /* ── Bulk wizard prereq buttons: full width ───────────────────────── */
    .col-md-3.bulk-wizard-buttons {
        max-width: 100%;
        width: 100%;
    }
    /* ── Outer wrapper: minimal padding, clip overflow ───────────────── */
    .bulk-import-wrapper {
        padding-left: 4px !important;
        padding-right: 4px !important;
        overflow-x: hidden;
    }
    .bulk-import-wrapper > .row > .col-12 {
        padding-left: 0;
        padding-right: 0;
    }
    /* ── Reduce ALL nested card-body padding ─────────────────────────── */
    .bulk-import-wrapper .card-body {
        padding: 0.75rem !important;
    }
    /* ── Force col-md-6/8 to full width with no gutter ──────────────── */
    .bulk-import-wrapper .col-md-6,
    .bulk-import-wrapper .col-md-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* ── File input: stay within bounds ─────────────────────────────── */
    .bulk-import-wrapper .form-control-file {
        max-width: 100%;
        width: 100%;
        font-size: 0.8rem;
    }
    /* ── Alert padding reduction ─────────────────────────────────────── */
    .bulk-import-wrapper .alert {
        padding: 0.5rem 0.75rem !important;
    }
    /* ── Table responsive stays contained ───────────────────────────── */
    .bulk-import-wrapper .table-responsive {
        max-width: 100%;
        overflow-x: auto;
    }
}
.notification-badge-unread {
    background-color: #ffe383;
    color: #000;
    font-size: 0.75rem;
}

.notification-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

    .notification-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

.notification-unread {
    border-left: 4px solid #227c85;
    background-color: #ffefda;
}

.notification-read {
    border-left: 4px solid #e2e8f0;
    opacity: 0.85;
}

    .notification-read:hover {
        opacity: 1;
    }

.notification-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e6f2f3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .notification-icon-wrapper .c-icon {
        color: #227c85;
        width: 20px;
        height: 20px;
    }

.notification-icon-unread {
    background: #227c85;
}

    .notification-icon-unread .c-icon {
        color: #fff;
    }

.notification-text {
    font-size: 0.9rem;
    color: #2d3748;
    margin-bottom: 0.25rem;
}

.notification-meta {
    font-size: 0.78rem;
    color: #a0aec0;
}

    .notification-meta i {
        color: #cbd5e0;
    }

.notification-actions .btn {
    white-space: nowrap;
}

.notification-dropdown {
    min-width: 360px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.notification-dropdown-header {
    background: linear-gradient(135deg, #227c85 0%, #2a9aa4 100%);
    color: #fff;
    padding: 0.75rem 1rem;
}

.notification-dropdown-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    white-space: normal;
}

    .notification-dropdown-item:hover {
        background-color: #f0f9f8;
    }

.notification-dropdown-unread {
    background-color: #f0f9f8;
    border-left: 3px solid #227c85;
}

.notification-dropdown-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e6f2f3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .notification-dropdown-icon .c-icon {
        width: 14px;
        height: 14px;
        color: #227c85;
    }

.notification-dropdown-text {
    font-size: 0.82rem;
    color: #2d3748;
    line-height: 1.4;
}

.notification-dropdown-time {
    font-size: 0.72rem;
    color: #a0aec0;
    margin-top: 2px;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    background: #227c85;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    margin-left: 8px;
}

.notification-dropdown-footer {
    background: #f8f9fa;
    padding: 0.5rem;
    font-size: 0.82rem;
}

    .notification-dropdown-footer a {
        color: #227c85;
        text-decoration: none;
    }

        .notification-dropdown-footer a:hover {
            text-decoration: underline;
        }

.notification-empty-icon {
    opacity: 0.3;
}

@media (max-width: 767px) {
    .notification-card .card-body {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .notification-icon-wrapper {
        margin-bottom: 0.5rem;
    }

    .notification-actions {
        margin-left: 0 !important;
        margin-top: 0.75rem;
        width: 100%;
    }

        .notification-actions .btn {
            flex: 1;
        }

    .notification-header-card .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .notification-header-card .notification-header-actions {
        margin-top: 0.5rem;
    }

    .notification-dropdown {
        min-width: 280px;
    }
}

/* ============================================
   DOCUMENTS / PACKS REDESIGN
   ============================================ */

/* Page header */
.doc-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #227c85;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    gap: 50px;
}

.doc-page-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.doc-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f2f5;
    color: #555;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-right: 30px;
}

    .doc-back-btn:hover {
        background: #000;
        color: white;
        text-decoration: none;
    }

.doc-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

    .doc-page-title i {
        color: #fff;
        margin-right: 4px;
    }

.doc-page-subtitle {
    font-size: 13px;
    color: #fff;
    margin: 4px 0 0 0;
    text-align: center;
}

    .doc-page-subtitle i {
        margin-right: 3px;
        font-size: 11px;
    }

.doc-separator {
    margin: 0 8px;
    color: #ddd;
}

.doc-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2f1;
    color: #227c85;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Document card container */
.doc-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.doc-card-body {
    padding: 0;
}

/* File cards */
.doc-table-container {
    padding: 16px;
    background: #ffefda;
}

.doc-file-card {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

    .doc-file-card:hover {
        border-color: #227c85;
        box-shadow: 0 2px 8px rgba(34, 124, 133, 0.1);
    }

.doc-file-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 14px;
    flex-shrink: 0;
}

.doc-file-info {
    flex: 1;
    min-width: 0;
}

.doc-file-name {
    font-size: 14px;
    font-weight: 600;
}

    .doc-file-name a {
        color: #333;
        text-decoration: none;
    }

        .doc-file-name a:hover {
            color: #227c85;
            text-decoration: underline;
        }

.doc-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #000;
    margin-top: 4px;
}

    .doc-file-meta i {
        margin-right: 3px;
        font-size: 10px;
    }

.doc-file-notes {
    font-size: 12px;
    color: #000;
    margin-top: 4px;
    font-style: italic;
}

    .doc-file-notes i {
        color: #bbb;
        margin-right: 4px;
    }

.doc-file-actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
    flex-shrink: 0;
}

.doc-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    text-decoration: none;
    color: #888;
}

.doc-action-view:hover {
    border-color: #227c85;
    color: #227c85;
    background: #f0fafb;
}

.doc-action-delete:hover {
    border-color: #c62828;
    color: #c62828;
    background: #fef2f2;
}

/* Empty state */
.doc-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.doc-empty-icon {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 12px;
}

.doc-empty-text {
    font-size: 16px;
    font-weight: 600;
    color: #999;
    margin-bottom: 4px;
}

.doc-empty-hint {
    font-size: 13px;
    color: #bbb;
}

/* Upload section */
.doc-upload-section {
    border-top: 1px solid #eee;
    background: #fafbfc;
    border-radius: 0 0 10px 10px;
}

.doc-upload-header {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    border-bottom: 1px solid #eee;
    text-align: center;
    background: #ffefda;
    border-radius: 8px;
}

    .doc-upload-header i {
        margin-right: 6px;
    }

.doc-upload-body {
    padding: 20px;
}

.doc-upload-dropzone {
    border: 2px dashed #d0d0d0;
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    transition: all 0.2s;
    background: white;
    position: relative;
    margin-bottom: 16px;
}

    .doc-upload-dropzone:hover {
        border-color: #227c85;
        background: #f5fafb;
    }

.doc-upload-icon {
    font-size: 36px;
    color: #ccc;
    margin-bottom: 8px;
}

.doc-upload-text {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}

.doc-upload-hint {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 12px;
}

.doc-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.doc-upload-browse-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #000;
    color: white;
    padding: 10px 15px 10px 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    z-index: 1;
}

    .doc-upload-browse-btn:hover {
        background: #1a5f66;
    }

.doc-upload-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.doc-upload-field-group {
    flex: 1;
}

.doc-upload-label {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

    .doc-upload-label i {
        margin-right: 4px;
    }

.doc-upload-notes {
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 13px;
}

    .doc-upload-notes:focus {
        border-color: #227c85;
        box-shadow: 0 0 0 3px rgba(34, 124, 133, 0.1);
    }

.doc-upload-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #000;
    color: white;
    padding: 10px 15px 10px 15px;
    border-radius: 6px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    height: 38px;
}

    .doc-upload-submit-btn:hover {
        background: #1a5f66;
    }

/* Mobile responsive */
@media (max-width: 768px) {
    .doc-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .doc-page-header-right {
        align-self: auto;
    }

    .doc-file-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .doc-file-icon {
        margin-right: 0;
    }

    .doc-file-actions {
        margin-left: 0;
        align-self: flex-end;
    }

    .doc-upload-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .doc-upload-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* File selection preview */
.doc-file-preview {
    margin-top: 12px;
    text-align: left;
    padding: 0 12px;
}

.doc-file-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #e8f5e9;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 13px;
    color: #333;
}

    .doc-file-preview-item i {
        color: #227c85;
        flex-shrink: 0;
    }

    .doc-file-preview-item span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
    }

    .doc-file-preview-item small {
        color: #888;
        flex-shrink: 0;
    }

/* ========================================
   LOADING SPINNER
   ======================================== */

.loading-spinner-container {
    text-align: center;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 15px;
}

.loading-spinner-container p {
    color: #fff;
    font-size: 1rem;
    margin: 0;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* Full-screen submit overlay (Report views) */
.report-submit-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.report-submit-overlay.show {
    display: flex;
}

.report-submit-overlay .loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid #fff;
    margin: 0 auto 15px;
}

.report-submit-overlay p {
    color: #fff;
    font-size: 1rem;
    margin: 0;
}

/* Select2 country code — report forms */
.phone-input-group .select2-container {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 260px;
}
.phone-input-group .select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
}
.phone-input-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding-left: 0;
    color: #495057;
}
.phone-input-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem + 2px);
}
@media (max-width: 768px) {
    .phone-input-group .select2-container {
        min-width: 100%;
        max-width: 100%;
    }
}

/* Accordion Icon Rotation */
.transition-icon {
    display: inline-block;
    /* Required for transform */
    transition: transform 0.3s ease;
}

.btn-link[aria-expanded="true"] .transition-icon {
    transform: rotate(90deg);
}

/* ===============================================
   Info Help Float Button & Panel
   =============================================== */

.info-float-toggle {
    position: fixed;
    top: 70px;
    right: 10px;
    background: #ffe383;
    color: #000;
    border: 1px solid #000;
    border-radius: 8px 0 0 8px;
    padding: 12px 10px;
    cursor: pointer;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.info-float-toggle i {
    font-size: 18px;
}

.info-float-toggle .float-info-text {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

    .info-float-toggle:hover {
        background: #ffe383;
        transform: translateX(-3px);
    }

.info-float-panel {
    position: fixed;
    top: 70px;
    right: 62px;
    width: 300px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    z-index: 1000;
    display: none;
}

.info-float-panel .info-panel-header {
        background: #ffe383;
        color: #000;
        padding: 10px 14px;
        border-radius: 8px 8px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
 }

.info-float-panel .info-panel-close {
    background: none;
    border: none;
    color: #000;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: 0.8;
}

.info-float-panel .info-panel-close:hover {
    opacity: 1;
}

.info-float-panel .info-panel-body {
    padding: 14px 16px;
    font-size: 0.875rem;
    color: #444;
    line-height: 1.5;
}

.info-float-panel .info-panel-body ul {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

.info-float-panel .info-panel-body li {
    margin-bottom: 4px;
}
/*simple report form*/
.section-report-issue-simple {
    min-height: 100vh;
    background: #fff !important;
    padding: 2rem 0 4rem 0;
}

#issueFormSimple {
    padding: 2rem;
    background: #227c85 !important;
}

.report-simple-header {
    background: #227c85 !important;
    color: white !important;
    padding: 2rem;
    text-align: center;
}

.report-label {
    font-weight: 600;
    color: #fff !important;
    margin-bottom: 0.5rem;
    display: block;
}

.report-label-assets {
    font-weight: 600;
    color: #227c85 !important;
    margin-bottom: 0.5rem;
    display: block;
}
/* In the detail panel the form background is teal, so labels must be white */
#assetDetailPanel .report-label-assets,
#assetDetailPanel .report-label {
    color: #fff !important;
}

.contact-section {
    background: #227c85 !important;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.contact-title {
    color: #fff !important;
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border: none !important;
}

.consent-check {
    background: none !important;
    border: none !important;
    text-align: center;
}

.consent-label {
    font-size: 0.9rem;
    color: #fff !important;
}
.btn-cancel-report {
    display: none !important;
}
.btn-submit-report {
    background: #000 !important;
}
.form-text {
    color: #fff;
}
@media (max-width:768px){
    /* .phone-input-group {
        flex-direction: row !important;
    } */
    .consent-label {
        text-align: left !important;
    }
}
/*report full*/
.card-body.text-center.text-white.p-3.d-flex.align-items-center.justify-content-center {
    background: #000;
}
.contact-days-container {
    display: inline-flex;
    width: 100%;
    gap: 10px;
}
label.contact-day-label {
    color: #fff;
}
.phone-input-group {
    display: flex;
    gap: 10px;
}

/* ============================================================
   Asset Selection UI — Gallery + Detail panels (Report forms)
   ============================================================ */

/* Panel 1: Asset grid */
.asset-ui-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 576px) {
    .asset-ui-grid { grid-template-columns: 1fr; }
}

.asset-ui-card {
    border: 2px solid #dee2e6;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
    background: #fff;
    -webkit-tap-highlight-color: transparent;
}
.asset-ui-card:hover {
    border-color: #227c85;
    box-shadow: 0 4px 12px rgba(34,124,133,0.15);
    transform: translateY(-2px);
}
.asset-ui-card.asset-selected {
    border-color: #c0b411;
    box-shadow: 0 4px 12px rgba(40,167,69,0.2);
}

.asset-ui-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #c0b411;
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 1;
}

.asset-ui-photo {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.asset-ui-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.asset-ui-photo .no-photo-icon {
    font-size: 2.8rem;
    color: #bbb;
}

.asset-ui-name {
    padding: 10px 10px 8px;
    font-weight: 600;
    font-size: 0.88rem;
    text-align: center;
    color: #333;
    line-height: 1.3;
}

/* Panel 2: Asset detail */
#assetDetailPanel {
    animation: fadeInPanel 0.18s ease;
}

/* Confirmed Assets Summary panel */
.confirmed-assets-summary {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    animation: fadeInPanel 0.18s ease;
}
.confirmed-assets-header {
    font-size: 0.85rem;
    color: #fff;
    opacity: 0.85;
}
.confirmed-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    gap: 0.5rem;
}
.confirmed-row:last-child { border-bottom: none; }
.confirmed-row-info { flex: 1; min-width: 0; color: #fff; }
.confirmed-row-area { font-size: 0.7rem; opacity: 0.6; margin-bottom: 0.1rem; }
.confirmed-row-asset { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.confirmed-row-fault { font-size: 0.78rem; opacity: 0.75; }
.confirmed-row-actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.btn-confirmed-edit,
.btn-confirmed-remove {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.4;
    min-width: 28px;
}
.btn-confirmed-edit:hover { background: rgba(255, 255, 255, 0.32); }
.btn-confirmed-remove:hover { background: rgba(220, 53, 69, 0.7); border-color: #dc3545; }
@keyframes fadeInPanel {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.asset-detail-photo {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 8px;
    background: #f5f5f5;
    margin-bottom: 16px;
}

/* Touch-friendly upload button in detail panel */
.asset-detail-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 2px dashed #ced4da;
    border-radius: 8px;
    cursor: pointer;
    padding: 12px;
    transition: border-color 0.2s, background 0.2s;
    font-size: 0.9rem;
    color: #666;
    background: #fafafa;
}
.asset-detail-upload-label:hover,
.asset-detail-upload-label:active {
    border-color: #227c85;
    background: #f0f8f9;
    color: #227c85;
}
.asset-detail-upload-label .upload-preview-thumb {
    max-height: 60px;
    border-radius: 4px;
}

/* Selected assets counter chip */
.asset-selection-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #227c85;
    color: #fff;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 8px;
}

/* ===============================================
   Go To Issue Button (link-style)
   =============================================== */
.btn-go-to-issue {
    background: none;
    border: none;
    color: #227c85;
    padding: 0;
    font-weight: 500;
}
.btn-go-to-issue:hover {
    color: #449386;
    background: none;
}

/* ===============================================
   Nav tabs boxed — remove default CoreUI border
   =============================================== */
.nav-tabs-boxed .tab-content {
    border: none;
}

/* ===============================================
   Mobile responsive fixes
   =============================================== */
@media (max-width: 767px) {
    /* Help float button: push below taller mobile header (~100px) */
    .info-float-toggle {
        top: 115px;
    }
    .info-float-panel {
        top: 115px;
    }

    /* Area / AreaGroup: Delete button same width as Cancel & Update on mobile */
    input[type="button"]#deleteButton {
        width: 100%;
        margin-bottom: 10px;
    }

    /* User form actions: prevent Update from going full-width (stacking with Cancel) */
    .user-form-actions input#submit-form-button {
        width: auto;
    }
}

/* ===============================================
   Issue Detail — Sections & Fields
   =============================================== */
.issue-section {
    border-bottom: 1px solid #e6f2f3;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
}
.issue-section:last-of-type {
    border-bottom: none;
}
.issue-section-header {
    color: #227c85;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e6f2f3;
}
.issue-field-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.issue-field {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0;
}
.issue-field-label {
    font-weight: 600;
    color: #227c85;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.15rem;
}
.issue-field-value {
    color: #232323;
}

@media (max-width: 767px) {
    .issue-field-row {
        flex-direction: column;
        gap: 0;
    }
    .issue-field {
        min-width: unset;
    }
}

/* ===============================================
   Org Info action buttons — no full-width on mobile
   =============================================== */
.org-action-buttons .btn {
    width: auto !important;
    margin: 0 0.75rem;
}

/* ===============================================
   Asset Group pills in the Assets table
   =============================================== */
.asset-group-pill {
    background-color: #e8f4f5;
    color: #227c85;
    border: 1px solid #b2d8dc;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2em 0.65em;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Manage Account nav pills — horizontal on mobile */
@media (max-width: 575px) {
    .nav.nav-pills.flex-sm-column {
        border-bottom: 2px solid #e6f2f3;
        padding-bottom: 0.5rem;
    }
    .nav.nav-pills.flex-sm-column .nav-link {
        white-space: nowrap;
        padding: 0.5rem 1rem;
        border-radius: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Single-Asset Report Grid (new simplified Complete & Floor Plan flow)
   ═══════════════════════════════════════════════════════════════════════════ */
.asset-single-col { margin-bottom: 1rem; }

.asset-single-card {
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease;
    position: relative;
    background: #fff;
    height: 100%;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.asset-single-card:hover { border-color: #1a9aa0; }
.asset-single-card.selected {
    border-color: #1a9aa0;
    box-shadow: 0 0 0 3px rgba(26,154,160,.18);
    background: #f0fafb;
}

.asset-single-badge {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    background: #1a9aa0;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.asset-single-card.selected .asset-single-badge { display: flex; }

.asset-single-thumb {
    width: 100%;
    max-height: 80px;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 6px;
}
.asset-single-nophoto {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c0c0c0;
    font-size: 2rem;
    margin-bottom: 6px;
}
.asset-single-name {
    font-size: .80rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}
.asset-single-desc {
    font-size: .72rem;
    color: #888;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

#singleAssetSection h5 { color: #227c85; }
#singleAssetDetailInline {
    background: #f7fcfc;
    border: 1px solid #d0ecee;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}
.single-asset-error {
    display: none;
    font-size: .88rem;
}

/* ── Form action buttons: stack full-width on mobile ────────────────── */
@media (max-width: 575.98px) {
    .col-sm-12 input[type="submit"].float-right,
    .col-sm-12 input[type="button"].float-right,
    .col-sm-12 a.btn.float-right {
        float: none !important;
        display: block;
        width: 100%;
        margin: 0 0 8px 0 !important;
    }
    /* Match Bootstrap button sizing for inline-styled buttons */
    .col-sm-12 input[type="button"].float-right {
        font-size: 1rem !important;
        padding: 0.375rem 0.75rem !important;
        border-radius: 0.25rem !important;
    }
}



.btn-save-new{
    background: #ffefda;
    border: 1px solid #a39999;
    color:#181e1f;
    padding:9px 15px;
    border-radius:4px;
    font-size:14px;
    cursor:pointer;
}

/* ── Multi-item report: item blocks ──────────────────────────────────────── */
.report-item-block .card-header {
    background: #f0f9fa;
    border-bottom: 2px solid #227c85;
    padding: 0.75rem 1rem;
}

.report-item-block .card-body {
    background: #227c85;
}

/* ── ST cards (per-item) ────────────────────────────────────────────────── */
.item-st-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.item-st-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
}

.item-st-card.st-selected {
    outline: 3px solid #fff;
    outline-offset: 2px;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34,124,133,0.45) !important;
}

.item-st-card.st-selected .card-body {
    background: #1a6b73 !important;
}

/* Ensure text inside item card-body is readable on teal background */
.report-item-block .card-body label,
.report-item-block .card-body h6,
.report-item-block .card-body p,
.report-item-block .card-body small,
.report-item-block .card-body .report-label,
.report-item-block .card-body .report-label-assets,
.report-item-block .card-body .text-muted {
    color: #ffffff !important;
}

/* Upload zone has a light background — keep its text dark/brand-green */
.report-item-block .card-body .upload-zone .upload-text,
.report-item-block .card-body .upload-zone .upload-subtext,
.report-item-block .card-body .upload-zone .upload-icon {
    color: #227c85 !important;
}
.report-item-block .card-body .upload-zone .upload-text {
    font-weight: 700;
}

/* ── Guided step blocks (ReportIssue multi-item) ────────────────────────── */
.report-step-block {
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
}

.report-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.step-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    color: #227c85;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.step-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.2px;
}

.report-step-body {
    padding: 20px 20px 12px;
}

/* ── No-area hint inside item cards ────────────────────────────────────── */
.item-no-area-hint {
    background: rgba(255,255,255,0.08);
    border: 1px dashed rgba(255,255,255,0.35);
    border-radius: 8px;
    padding: 10px 14px;
    color: rgba(255,255,255,0.82);
    font-size: 0.88rem;
    margin-top: 8px;
}