/* /static/assets/css/custom.css */

/* Custom styles for GPEI  */

@import "attach-manager.css";
@import "custom_apps.css";
@import "custom_colors.css";
@import "custom_datatables.css";
@import "custom_navbar.css";
@import "custom_particles.css";
@import "custom_treemenu.css";
@import "custom_timeline.css";
@import "custom_bp_sizes.css";


/* Dividers */
.border-divider-dark-1 {
    border-bottom: 1px solid rgb(108,117,125) !important;
}
.border-divider-dark-2 {
    border-bottom: 2px solid rgb(108,117,125) !important;
}
.border-divider-dark-3 {
    border-bottom: 3px solid rgb(108,117,125) !important;
}
.border-divider-light-1 {
    border-bottom: 1px solid rgb(200, 200, 200) !important;
}
.border-divider-light-2 {
    border-bottom: 2px solid rgb(211, 211, 211) !important;
}
.border-divider-light-3 {
    border-bottom: 3px solid rgb(211, 211, 211) !important;
}

.border-footer {
    border-top: 1px solid rgb(108,117,125) !important;
    border-bottom: 1px solid rgb(108,117,125) !important;
    background-color: rgba(128, 0, 128, 0.1) !important;
}


.page-header-title {
    padding-left: 0.375rem !important;
}

.table-header-bg {
    --bs-table-bg: rgb(137, 137, 137) !important;
}

.border-dashed-dark-1 {
    border: 1px dashed rgb(108,117,125);
    background-color: dimgrey;
}
.border-dashed-dark-2 {
    border: 2px dashed rgb(108,117,125);
    background-color: dimgrey;
}
.border-dashed-dark-3 {
    border: 3px dashed rgb(108,117,125);
    background-color: dimgrey;
}
.border-dashed-light-1 {
    border: 1px dashed rgb(108,117,125);
    background-color: ghostwhite;
}
.border-dashed-light-2 {
    border: 2px dashed rgb(108,117,125);
    background-color: ghostwhite;
}
.border-dashed-light-3 {
    border: 3px dashed rgb(108,117,125);
    background-color: ghostwhite;
}
/* Fix for accordion behavior in anexos tab */
#originAccordion .accordion-collapse.collapse {
    display: none !important;
}

#originAccordion .accordion-collapse.collapse.show {
    display: block !important;
}


/* PhotoSwipe positioning for process attachments */
.pswp {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
}


/* Drag and Drop Styles for Visit Listings */
.sortable-vehicles {
    cursor: arrow;
}

.sortable-vehicles:hover {
    background-color: #f8f9fa !important;
}

.sortable-vehicles.ui-sortable-helper {
    background-color: #e3f2fd !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    zoom: 0.80;
}

.sortable-vehicles.ui-sortable-placeholder {
    background-color: #e1f5fe !important;
    border: 2px dashed #2196f3;
    visibility: visible !important;
    height: 60px;
}

.drag-handle {
    cursor: grab !important;
    color: #6c757d;
    font-size: 1.7em;
    transition: color 0.2s ease;
}

.drag-handle:hover {
    color: #495057;
    cursor: grab !important;
}

.drag-handle:active {
    cursor: grabbing !important;
}


/* Will Notify Field Styling */
#will_notify_row {
    transition: all 0.3s ease-in-out;
}

#will_notify_row .form-check {
    margin-top: 0.5rem;
}

#will_notify_row .form-check-input {
    margin-top: 0.25rem;
}

#will_notify_row .form-check-label {
    font-weight: 500;
    color: #495057;
    margin-left: 0.5rem;
}

/* CUSTOM BREAKPOINTS */
@media (min-width: 1930px) {
    /* 12 columns */
    .col-hd-1 {
        flex: 0 0 auto;
        width: 8.33%;
    }
    /* 6 columns */
    .col-hd-2 {
        flex: 0 0 auto;
        width: 16.66%;
    }
    /* 4 columns */
    .col-hd-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    /* 3 columns */
    .col-hd-4 {
        flex: 0 0 auto;
        width: 33.33%;
    }
    /* 2 columns */
    .col-hd-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    /* 1 column */
    .col-hd-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    /* 7 columns */
    .col-hd-7 {
        flex: 0 0 auto;
        width: 14.2857142%;
    }
    /* 8 columns */
    .col-hd-8 {
        flex: 0 0 auto;
        width: 12.5%;
    }
}

/* Remove border in small screens */
@media (max-width: 768px) {
    .responsive-border {
        border-left: none !important;
    }
}

/* Root */
:root {
    --light: rgb(248, 249, 250);
}

/* Logo */
.ti-sigrev-home {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABOCAYAAABlnZseAAAACXBIWXMAAAsSAAALEgHS3X78AAACsElEQVR4nO2c33HTQBCHFw3vuANMBfjtHlEHQAWhg9ABoQOoAKcC0kGcx3sjHZgOpArMnGfFeDTyRPrp7ifptN+MH+Ikc9Knle7Pru7V6XSSDjYisuv6xUyoROTPVIfyuvXzJxG5E5H3Ex3PEGoR+aGfitnwZaTtReSG2Xgk/urFpkVeIy1crVtWowkIUbdlRVwhIuXChQXe6IWnEKR9mfZ8o3GjHVhyCn0e5AKlxy80tHOhZEkzTFp6TBqASQMwaQAmDaA9YR/Ds4gc2JPnFgdGIzGkPenKCOWA58BYafcZTcN6E1Y5Olche/DEGoHPjTEdwV2eSl4GjbTnmS+HJwWNtNU89LtApU05rJgcG9wCmDQAkwYQcxrVG+/9LtEy+8E517eTKnuMM0Na8KH9JVWa977U/OrbhM0Mkfatx9/VOuv5L492e3rvQ8OPiYWlIORQfl+mCCnSNMJ+Mc80AbfNI4UVablMuc7Rllya9z6UC3xI3Q6J8GgpGZGW2xzVpCHY4BbApAGYNACTBmDSAEwagEkDMGkAJg3ApA2nurbPbfSGMtrc7h0r0qaeEcQi7EVyZEXaRhM1S9h0+Bq1TgmPrEirdMK8pJzqJbUe/zmrxuwIGnHfdRfkJVA3CenL4hrW7dlFOJDwmSvdm6qLyD83dYBXUD31EwAAAABJRU5ErkJggg==') no-repeat;
    background-size: contain;
}

/* General */
body {
    background: #dedede;
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23d7d6d8' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Caret override */
* {
    caret-color: transparent;
    outline: none;
}
input, textarea, select, option, button, a, label,
.form-control, .form-select, .form-check-input,
.btn, .dropdown-item {
    caret-color: auto;  /* Show the caret */
    user-select: text;  /* Allow text selection */
}

/*  */
.left-menu-link {
    cursor: pointer;
    color: #a9b7d0;
    }
.left-menu-link:hover {
    color: white;
    }
.left-menu-link::after {
    font-family: "feather";
    content: "\e847";
    position: absolute;
    top: 11px;
    right: 20px;
    transition: 0.3s ease-in-out;
}

.square-indicator {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-block;
    margin-right: 5px;
}

.alarm-blink {
    animation: fadeToWhite 2s infinite;
}
@keyframes fadeToWhite {
    0%, 100% { background-color: #f8d7da; }
    50% { background-color: white; }
}

.icon-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.flash {
    color: red;
    animation: flash 0.5s 3;
}
@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Object labels icon breathing animation */
.object-labels-icon-breathing {
    animation: breathe 1.5s ease-in-out infinite;
    color: #ffc107 !important;
}
@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.8;
    }
}
/* refresh icon for the realtime pages */
#refreshIcon {
    opacity: 0; /* Initially transparent */
}


.hidden {
    display: none;
}
.semi-transparent {
    background: rgba(180,180,180,0.5)
}

/* MARGINS */
.ms-n1 {
    margin-left: -0.25rem !important;
}
.ms-n2 {
    margin-left: -0.50rem !important;
}
.ms-n3 {
    margin-left: -0.75rem !important;
}
.ms-n4 {
    margin-left: -1.00rem !important;
}
.ms-n5 {
    margin-left: -1.25rem !important;
}

.mt-n1 {
    margin-top: -0.25rem !important;
}
.mt-n2 {
    margin-top: -0.50rem !important;
}
.mt-n3 {
    margin-top: -0.75rem !important;
}
.mt-n4 {
    margin-top: -1.00rem !important;
}
.mt-n5 {
    margin-top: -1.25rem !important;
}

.mb-n1 {
    margin-bottom: -0.25rem !important;
}
.mb-n2 {
    margin-bottom: -0.50rem !important;
}
.mb-n3 {
    margin-bottom: -0.75rem !important;
}
.mb-n4 {
    margin-bottom: -1.00rem !important;
}
.mb-n5 {
    margin-bottom: -1.25rem !important;
}

.ms-6 {
    margin-left: 4rem !important;
}
.me-6 {
    margin-right: 4rem !important;
}
.mt-6 {
    margin-top: 4rem !important;
}
.mb-6 {
    margin-bottom: 4rem !important;
}

/* CUSTOM COLLUMNS */
.col-2-4 {
    flex: 0 0 20%;
    max-width: 20%;
}

/* CUSTOM MENUS */
.dropend .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: 0;
    border-top: .4em solid transparent;
    border-bottom: .4em solid transparent;
    border-left: .4em solid;
    content: "";
}
.dropend .dropdown-toggle::hover {
    background-color: red;
}
/* Only apply arrow to dropdowns that open to the right (like in sidebar menus) */
.dropend .dropdown-menu.show::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 3.5%;
    transform: translateY(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;
    border-right-color: #2a2a2a;
}
.bg-gunmetal .dropdown-menu.show::before {
    border-right-color: #2a2a2a;
}
.bg-oxfordblue .dropdown-menu.show::before {
    border-right-color: #1b2735;
}


/* BUTTONS */
button {
    border-width: 0px !important;
    /* background-color: transparent !important; */
}
button:active, button:focus, button:focus-within, button:target, button:hover, button:visited, button:focus-visible {
    outline: none !important;
}

.dropdown-menu.show:before {
    color: var(--sigrev) !important;
}
.card .card-header h5:after {
    content: none !important;
}
.card .card-block {
    padding: 20px 15px;
}
.card-header {
    border-radius: calc(0.45rem - 1px) calc(0.45rem - 1px) 0 0 !important;
    padding: 0.75rem 1.25rem !important;
    border-bottom: none !important;
}
/*.disabled::before {
    color: red;
    margin-right: .25rem;
    content: "\e8c9";
    font-family: 'feather';
    font-weight: 800;
    transition: 0.8s ease-in-out;
    vertical-align: baseline;
}*/

#scroll-to-top, #scroll-to-top-below {
    display: none;
}

.fa-1-5x {
    font-size: 1.25rem;
}
.fa-3-5x {
    font-size: 3.5rem;
}


/* INPUTS */
input[readonly], textarea[readonly] {
    background-color: rgba(0, 0, 0, 0.05);
    color: rgb(51, 51, 51);
    cursor: not-allowed;
}
.input-group {
    background: transparent !important;
}
.form-label {
    font-weight: bold !important;
}

/* Required field asterisk spacing */
.form-label .text-danger,
.form-check-label .text-danger {
    padding-left: 0.25rem;
}

/* Auto-add red asterisk to labels for required fields */
label.form-label:has(+ input[required])::after,
label.form-label:has(+ select[required])::after,
label.form-label:has(+ textarea[required])::after {
    content: " *";
    color: var(--bs-danger);
}
.form-select {
    line-height: 1.8 !important;
}
.form-check-label {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

/* TOOLTIPS */
.tooltip {
    --bs-tooltip-max-width: none !important;
}

/* MODALS */
.modal-body {
    background-color: #fff !important; /* Match .card-body background color */
}
.modal-header {
    background-color: var(--sigrev) !important;
}
.modal-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}
.modal-header .btn-close {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23fff' stroke-width='2' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat;
}


/*  */

.relay-btn, .sector-btn, .evm-btn { padding: 10px; margin: 5px; display: inline-block; }
.relay-btn.on, .sector-btn.on, .evm-btn.on { background-color: green; }
.relay-btn.off, .sector-btn.off, .evm-btn.off { background-color: red; }
.relay-btn.waiting, .sector-btn.waiting, .evm-btn.waiting { background-color: yellow; }
button:disabled { background-color: grey; }


/* POPOVERS */
.popover {
    z-index: 1100;
    border-radius: 0.6rem !important;
    --bs-popover-max-width: 30vw !important;
    --bs-popover-bg: rgba(60,60,60,1) !important;
    --bs-popover-border-color: #0000ff !important;
}
.popover-header {
    color: white !important;
    font-weight: bold !important;
}
.popover-body {
    color: white !important;
}

/* MOBILE MENU INVERTION */
@media only screen and (max-width: 991px) {
    .pcoded-header .m-header .mobile-menu {
        left: 20px;
    }
}
/* .mobile-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 70px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 10px;
} */
@media only screen and (max-width: 991px) {
    .pcoded-header .m-header .b-brand {
        position: absolute; /* Added position absolute */
        right: 20px; /* Align to the right */
        margin-left: 0; /* Remove margin-left */
    }
}
.b-branddd {
    display: flex;
    align-items: center;
}


/* BORDER LEFT - CARD */
.border {
    border: var(--bs-border-width) var(--bs-border-style) #888888 !important;
}
.border-left-aregar {
    border-left: 0.50rem solid #1cc88a !important;
}
.border-left-suspensa {
    border-left: 0.50rem solid #ffe5d0 !important;
}
.border-left-parada {
    border-left: 0.50rem solid #afb1bd !important;
}
.border-left-inibida {
    border-left: 0.50rem solid #b95930 !important;
}
.border-left-unknown {
    border-left: 0.50rem solid red;;
    animation: blink 2.5s infinite;
}
@keyframes blink {
    0% {
        border-left: 0.50rem solid #afb1bd;
    }
    50% {
        border-left: 0.50rem solid red;
    }
    100% {
        border-left: 0.50rem solid #afb1bd;
    }
}


/* TABLE */
.table-error {
    background-color: rgba(255, 165, 0, 0.3) !important;
}
.table thead th {
    border-bottom: 1px solid rgba(169, 169, 169, 1) !important;
}
.table th {
    border-top: 1px solid rgba(169, 169, 169, 1) !important;
}
.table-bottom-border {
    border-bottom: 0.5rem solid rgba(137, 137, 137, 1) !important;
}

/* CARD */
.card {
    border-radius: calc(.45rem - 1px) !important;
}
.card-unit {
    padding: 8px !important;
}
.card-header {
    background-color: var(--sigrev) !important;
}
.card-header h5 {
    color: #d1d1d1 !important;
}


/* TABS */
.nav-tabs .nav-link {
    color: #888888 !important;
    background-color: rgb(240, 240, 240) !important;
    margin-bottom: 0px !important;
}
.nav-tabs .nav-link:hover {
    color: var(--sigrev) !important;
    margin-bottom: 0px !important;
}
.nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: var(--sigrev) !important;
    margin-bottom: 0px !important;
}
.nav-tabs .nav-link.active:hover {
    color: #fff !important;
    background-color: var(--sigrev) !important;
    margin-bottom: 0px !important;
}


/* NAV PILLS - Process View Tabs */
.nav-pills .nav-link {
    color: var(--sigrev) !important;
    background-color: transparent !important;
    border: 0px solid var(--sigrev) !important;
    margin-right: 0.25rem !important;
}

.nav-pills .nav-link:hover {
    color: #fff !important;
    background-color: var(--sigrev) !important;
    border-color: var(--sigrev) !important;
}

.nav-pills .nav-link.active {
    color: #fff !important;
    background-color: var(--sigrev) !important;
    border-color: var(--sigrev) !important;
}

.unit-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
}


/* DATE PICKER */
/* Style for highlighted dates */
/* whole box */
.ui-datepicker {
    width: 100% !important;
}
.ui-datepicker a:not(.highlight a) {
    background-color: rgb(225, 233, 255) !important;
}
.ui-datepicker .highlight a {
    background-color: rgb(255, 165, 153); /* Red background for selected dates */
    color: #000; /* Black text color */
}
/* active (currently selected) date */
.ui-datepicker td.ui-state-active a, .ui-datepicker td.ui-state-active a:hover {
    background-color: #fff; /* Default background color */
    color: #000; /* Default text color */
}
/* today's date */
.ui-datepicker td.ui-datepicker-today a {
    border: 1px solid #003eff !important;
    border-radius: 5px;
    background-color: transparent !important;
}
/* today button */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    color: #003eff;
    font-weight: bold;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current::before {
    content: "Ir para ";
}

/* Cell */
.datepicker td, .datepicker th {
    font-weight: inherit;
    min-width: 1rem;
    min-height: 1rem;
    line-height: 1.8rem;
    border: 1px solid black;
    text-align: center;
}
.datepicker.datepicker-inline {
    border: 1px solid #eaeaea;
}
/* day, old and new */
.day {
    background-color: #fff !important;
}
.old, .new {
    background-color: #dadada !important;
}
/* today */
.datepicker tbody tr > td.day.today {
    box-sizing: border-box;
    color: black !important;
    border: 2px solid red;
    background: white !important;
}
.datepicker tbody tr > td.day.today:before {
    border-bottom-color: red !important;
}
.datepicker tbody tr > td.day.today.highlight {
    background: #4f95fb !important;
    color: white !important;
}
/* highlight */
.bootstrap-datepicker .highlight {
    background-color: #4f95fb !important;
    color: #fff !important;
}
.highlight {
    padding: 0 !important;
    background-color: #4f95fb !important;
    color: #fff !important;
}
/* day of week */
.datepicker thead th.dow {
    background-color: #4e9774;
    color: white !important;
    font-weight: bold !important;
}
/* month, next and prev  */
.datepicker thead th.datepicker-switch:hover {
    background: #4e9774 !important;
    color: white !important;
}
.datepicker thead th.datepicker-switch, .datepicker thead th.prev, .datepicker thead th.next {
    background: var(--sigrev) !important;
    color: white !important;
}


/* PRISM LOG FILES */
code[class*=language-], pre[class*=language-] { text-shadow: 0 1px #000; white-space: pre-wrap !important; }
#log-viewer, #pre-log-viewer { background-color:#2b2b2b !important; }
.log-date, .log-source, .log-debug, .log-info, .log-warn, .log-error, .log-message { font-size: 0.8rem !important; }
.log-date { color: #007bff; }
.log-source { color: #c77b24; }
.log-debug { color: blue; }
.log-info { color: green; }
.log-warn { color: orange; }
.log-error { color: red; }
.log-message { color: grey; }
.log-link { color: white; text-decoration: none; }
.log-link:hover { text-decoration: underline; }


/* SweetAlert2 */
/* Global z-index - highest possible for all SweetAlert2 elements */
.swal2-container {
    z-index: 9999999 !important;
}
.swal2-popup {
    z-index: 9999999 !important;
    border: 2px solid var(--sigrev) !important;
    border-radius: 1rem !important;
}
.swal2-backdrop-show {
    z-index: 9999998 !important;
}
.swal2-container.swal2-backdrop-show {
    z-index: 9999999 !important;
}
.swal2-container.swal2-top {
    z-index: 9999999 !important;
}
.swal2-container.swal2-top-end {
    z-index: 9999999 !important;
}
.swal2-container.swal2-top-start {
    z-index: 9999999 !important;
}
.swal2-container.swal2-center {
    z-index: 9999999 !important;
}
.swal2-container.swal2-center-end {
    z-index: 9999999 !important;
}
.swal2-container.swal2-center-start {
    z-index: 9999999 !important;
}
.swal2-container.swal2-bottom {
    z-index: 9999999 !important;
}
.swal2-container.swal2-bottom-end {
    z-index: 9999999 !important;
}
.swal2-container.swal2-bottom-start {
    z-index: 9999999 !important;
}
.swal2-container-high-z {
    z-index: 9999999 !important;
}
.swal2-popup-high-z {
    z-index: 9999999 !important;
}
.swal2-styled.swal2-confirm {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
}
.swal2-confirm:hover {
    background-color: #157347 !important;
    border-color: #146c43 !important;
}
.swal2-timer-progress-bar {
    background-color: #1cc88a;
}
.swal-on-top {
    z-index: 9999999 !important;
}


/* Leaflet */
.leaflet-popup h2 {
    font-size: 17px;
    font-weight: bold;
}
.leaflet-popup-content h5 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}
.leaflet-popup-content p {
    font-size: 12px;
    margin-top: 0;
}

.custom-popup h5 {
    font-size: 14px;
    margin: 0;
}

.custom-popup p {
    font-size: 12px;
    margin-top: 4px;
}

.custom-popup hr {
    border-top: 1px solid #ccc;
    margin: 5px 0;
}
.transparent-label {
    pointer-events: none;
    text-align: center;
    font-size: 14px;
    color: white;
    background-color: transparent;
}
#vehicleTabMap {
    background: #f8f9fa;
    min-height: 500px;
    width: 100% !important;
    height: 70vh !important;
}
.leaflet-container {
    background: #f8f9fa !important;
}
.leaflet-tile-container {
    opacity: 1 !important;
    visibility: visible !important;
}
.leaflet-tile {
    visibility: visible !important;
}
#vehicleTabMap .leaflet-control-container .leaflet-top,
#vehicleTabMap .leaflet-control-container .leaflet-bottom {
    z-index: 999;
}
.tab-pane {
    position: relative;
}
.no-location-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:1000;
    pointer-events: none;
    margin: 0;
    min-width: 300px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}


/* QUILL */
.ql-editor {
    background: white !important;
    min-height: 10em !important;
}
.ql-toolbar {
    background: darkgrey !important;
}


/* Plotly */
.js-plotly-plot .plotly{
    margin: auto !important;
}

/* Schematics */
.svg-full-width {
    width: 100%;
    height: auto;
}

/* - - - - */
/* Prevent iOS bug with modals */
.modal {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.theme-bg {
    background: linear-gradient(-135deg, var(--sigrev) 0%, #1cc88a 100%) !important;
}

.pro-head {
    background-color: var(--sigrev) !important;
}
#map {
    height: 100%;
}

#banner {
    height: 360px;
    width: 100%;
    object-fit:cover;
    margin-bottom: 16px;
}

.ti-header {
    color:#3f4d67;
}

.ti-header:hover {
    color:#8a919f;
}

.heading-1 {
    color: black;
    font-size:.9rem;
    font-weight: bold;
}

.heading-2 {
    color: #51af82;
    font-size:.7rem;
    font-weight: bold;
}

.heading-3 {
    color: #51af82;
    font-size:.9rem;
}


/* CUSTOM CARDS */
.custom-card {
    width: 100%;
    border-radius: inherit;
    overflow: hidden;
}
.custom-card-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    min-height: 13em;
}
.custom-card-img {
    position: absolute;
    width: 321px;
    height: auto;
    transform: rotate(-90deg) translate(-56px, 66px);
}
.custom-card-overview .top-right-icon {
    position: absolute;
    top: 0.3em;
    right: 0.6em;
    font-size: 1em;
}
.custom-card-overview .bottom-right-icon {
    position: absolute;
    bottom: 0.3em;
    right: 0.3em;
    font-size: 4em;
    font-weight: bold;

}
@media (min-width: 576px) {
    .custom-card-overview .top-right-icon {
        font-size: 2em;
    }
}
@media (min-width: 768px) {
    .custom-card-overview .top-right-icon {
        font-size: 3em;
    }
}
.custom-card-overview {
    position: relative;
    padding: 1.4em;
}
.custom-card-desc {
    padding: 0.5em;
    background: rgb(77, 77, 77, 0.7);
}

/* Grow on hover */
.grow-on-hover {
    transition: transform 0.3s ease;
}
.grow-on-hover:hover {
    transform: scale(1.04);
}



/* Single rounded corner */
.rounded-top-start {
    border-top-left-radius: 0.25em; /* Adjust radius as needed */
}

.rounded-top-end {
    border-top-right-radius: 0.25em; /* Adjust radius as needed */
}

.rounded-bottom-start {
    border-bottom-left-radius: 0.25em; /* Adjust radius as needed */
}

.rounded-bottom-end {
    border-bottom-right-radius: 0.25em; /* Adjust radius as needed */
}

/* RADIAL MENU */
.radial-menu {
    position: relative;
    width: 3em;
    height: 3em;
}

.radial-menu-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10em; /* Outer circle diameter */
    height: 10em; /* Outer circle diameter */
    background-color: rgba(0, 0, 0, 0.05); /* Outer ring color with some transparency */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0; /* Start hidden */
    z-index: 1; /* Behind other elements */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Transition for smooth scaling and fading */
    /* Create the donut effect with a transparent center */
    mask-image: radial-gradient(circle, transparent 35%, black 36%);
}

.radial-menu-toggler {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2em;
    height: 2em;
    opacity: 0;
    z-index: 3; /* Above circle background */
    cursor: pointer;
}

.toggler-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4; /* Above background and icons */
    /* width: 3em; */
    /* height: 3em; */
    border-radius: 50%;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.radial-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2; /* Above the circle background */
}

.radial-menu-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    margin: -1.5em; /* Offset by half of item size */
    opacity: 0;
    transform: translate(0, 0); /* Start from the center */
    transform-origin: 0 0; /* Center point */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.radial-menu-item button {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 1.5rem; /* Adjust font size to fit icons */
    transition: transform 0.3s ease;
}

/* Show the donut background and pop icons with transitions */
.radial-menu-toggler:checked ~ .radial-menu-bg {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Scale to normal size */
}

.radial-menu-toggler:checked ~ ul .radial-menu-item {
    opacity: 1;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.5s;
}

.radial-tooltip-btn {
    position: relative;
}

.radial-tooltip-btn:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%; /* Position above the button */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 0.8em;
    z-index: 10;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.radial-tooltip-btn:active::after,
.radial-tooltip-btn:focus::after {
    opacity: 0; /* Hide tooltip when button is clicked */
}

/* SELECT2 */
.select2-container--bootstrap-5 .select2-selection--single {
    height: calc(1.8em + 0.75rem + 2px);
    padding: 0.475rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #86b7fe;
    box-shadow: none;
}

/* Ensure Select2 dropdowns appear correctly within modals */
.modal .select2-container .select2-selection--single {
    height: calc(1.8em + 0.75rem + 2px) !important;
    padding: 0.475rem 0.75rem !important;
    font-size: 1rem !important;
    color: #495057 !important;
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
}
.modal .select2-container .select2-selection--single .select2-selection__rendered {
    color: #495057;
    padding-left: 0.5rem;
}
.modal .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 0.75rem;
}

/* Ensure Select2 dropdowns appear correctly within Swal2 modals */
.swal2-container .select2-container {
    z-index: 10000000 !important;
}
.swal2-container .select2-dropdown {
    z-index: 10000001 !important;
}
.swal2-container .select2-results {
    z-index: 10000001 !important;
}

/* Ensure Select2 dropdown arrow indicator is visible in Swal2 modals */
.swal2-container .select2-container .select2-selection--single .select2-selection__arrow {
    display: block !important;
    height: 100% !important;
    right: 0.75rem !important;
    top: 0 !important;
    width: 20px !important;
}

.swal2-container .select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: #6c757d transparent transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 4px 0 4px !important;
    height: 0 !important;
    left: 50% !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
    position: absolute !important;
    top: 50% !important;
    width: 0 !important;
}

.select2-results__option--highlighted .entity-related-to-vehicle {
    background-color: rgba(13, 110, 253, 0.2) !important; /* Slightly darker when hovered */
}


/* CUSTOM MODALS */
.modal-xxl {
    max-width: 75%;
}

.modal-body {
    background-color: #fff !important; /* Match .card-body background color */
}
.modal-footer {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* CURSOR */
#cursor-icon {
    cursor: default;
    position: fixed;
    pointer-events: none;
    font-size: 1.5em;
    color: red;
    display: none;
    z-index: 2000;
}

.border-custom {
    border-top: 1px solid var(--bs-secondary) !important;
    border-right: 1px solid var(--bs-secondary) !important;
    border-bottom: 1px solid var(--bs-secondary) !important;
    border-left: 8px solid var(--bs-danger) !important;
    border-radius: 0.375rem !important;
}


/* SAFARI */
/* Safari dropdown styles */
.safari-dropdown {
    position: relative;
    display: inline-block;
}

.safari-dropdown-menu {
    position: absolute;
    right: 100%;
    top: 0;
    min-width: 200px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
    padding: 0.5rem 0;
    z-index: 1000;
    margin-top: 1.4em;
    display: none; /* Initially hidden */
}

.safari-dropdown-header {
    display: block;
    padding: 0.25rem 1rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: #6c757d;
    white-space: nowrap;
    font-weight: bold;
}

.safari-dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

.safari-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.safari-dropdown-item:hover, .safari-dropdown-item:focus {
    color: #1e2125;
    background-color: #e9ecef;
    text-decoration: none;
}

.safari-dropdown-item.disabled {
    color: #6c757d;
    pointer-events: none;
    background-color: transparent;
}


/* Step Progress Bar for Bug Reports */
.stepper-wrapper {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    color: #6c757d;
    transition: color 0.3s ease;
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 3px solid var(--sigrev);
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
    transition: border-color 0.3s ease;
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 3px solid var(--sigrev);
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;
    transition: border-color 0.3s ease;
}



.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dee2e6;
    margin-bottom: 6px;
    font-weight: bold;
    color: #6c757d;
    transition: all 0.3s ease;
    border: 3px solid var(--sigrev);
}

.stepper-item .step-name {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    transition: color 0.3s ease;
}

.stepper-item.active {
    color: var(--sigrev);
}

.stepper-item.active .step-counter {
    background-color: var(--sigrev);
    border-color: var(--sigrev);
    color: white;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
}

.stepper-item.completed {
    color: var(--sigrev);
}

.stepper-item.completed .step-counter {
    background-color: var(--sigrev);
    border-color: var(--sigrev);
    color: white;
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 3px solid var(--sigrev);
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
}



.stepper-item:first-child::before {
    content: none;
}

.stepper-item:last-child::after {
    content: none;
}



/* Mobile responsiveness */
@media (max-width: 768px) {
    .stepper-wrapper {
        margin: 15px 0;
    }

    .stepper-item .step-counter {
        width: 35px;
        height: 35px;
        font-size: 0.875rem;
    }

    .stepper-item .step-name {
        font-size: 0.75rem;
    }

    .stepper-item::before,
    .stepper-item::after {
        top: 17px;
    }
}

@media (max-width: 576px) {
    .stepper-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .stepper-item::before,
    .stepper-item::after {
        display: none;
    }

    .stepper-item {
        flex: none;
    }
}






/* ================================    Navigation Bar Height Reduction  ===================== */
/*.pcoded-header {
    min-height: 50px !important; /* Reduced from 70px
    height:50px !important;
}*/

.pcoded-header .navbar-nav > li {
    line-height: 50px !important; /* Reduced from 70px */
}

/* Adjust padding for smaller height */
.pcoded-header .navbar-nav > li {
    padding: 0 8px !important; /* Reduced from 12px */
}

.pcoded-header .navbar-nav > li:first-child {
    padding-left: 15px !important; /* Reduced from 25px */
}

.pcoded-header .navbar-nav > li:last-child {
    padding-right: 25px !important; /* Reduced from 40px */
}

/* Center all elements vertically */
.pcoded-header .d-flex {
    align-items: center !important;
}

.pcoded-header .dropdown {
    display: flex !important;
    align-items: center !important;
}

.pcoded-header .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.pcoded-header .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.pcoded-header material-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
}

/* Page heading icons fix (for base_with_heading.html) */
#page-heading-block material-icon,
#page-heading-path material-icon,
#page-heading-description material-icon,
.page-heading-block material-icon,
.page-heading-path material-icon,
.page-heading-description material-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
}

/* iPad/iOS specific fix for header and page heading icons */
@supports (-webkit-touch-callout: none) {
    .pcoded-header material-icon,
    #page-heading-block material-icon,
    #page-heading-path material-icon,
    #page-heading-description material-icon,
    .page-heading-block material-icon,
    .page-heading-path material-icon,
    .page-heading-description material-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pcoded-header material-icon::part(material-symbols-rounded),
    #page-heading-block material-icon::part(material-symbols-rounded) {
        display: block !important;
        visibility: visible !important;
    }
}

.pcoded-header i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure proper alignment for all navigation elements */
.pcoded-header .navbar-collapse {
    align-items: center !important;
}

.pcoded-header .collapse {
    align-items: center !important;
}

/* Increase spacing for all dropdowns */
.dropdown-menu {
    margin-top: 0.8rem !important;
}

/* Adjust dropdown positioning for smaller header (overrides general rule) */
.pcoded-header .dropdown-menu {
    margin-top: 2px !important; /* Reduced from 5px */
}

.pcoded-navbar a {
    color: #dde2ea !important;
}

/* ================================    Dropdown Arrow Styling  ===================== */
.dropdown-menu.show.dropdown-menu-end:before {
    content: "c" !important;
    font-family: "pct" !important;
    position: absolute !important;
    left: auto !important;
    right: 5px !important;
    top: -6px !important;
    z-index: 1001 !important;
    font-size: 40px !important;
    line-height: 0 !important;
    color: rgb(204, 0, 0) !important; /* Red color to match the dropdown header */
    text-shadow: 0 -2px 2px rgba(220, 53, 69, 0.12) !important; /* Red shadow */
    border-right-color: transparent !important;
}

.pcoded-header .dropdown.show.dropdown-menu-end:before {
    left: auto !important;
    right: 15px !important;
    color: #dc3545 !important; /* Red color for right-aligned dropdowns */
}

/* Ensure the arrow points to the correct icon position */
.pcoded-header .dropdown.profile-notification.show:before {
    right: 20px !important; /* Adjust position to align with the gear icon */
}

/* ================================    Dropdown Arrow Styling End  ===================== */

/* Select2 Vehicle Tags - Red X Button and Bold License Plate */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23dc3545' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") 50% / .75rem auto no-repeat !important;
    width: .75rem !important;
    height: .75rem !important;
    padding: .25em !important;
    margin-right: .25rem !important;
    overflow: hidden !important;
    text-indent: 100% !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23b02a37' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") 50% / .75rem auto no-repeat !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
    border-radius: 3px !important;
}

/* Make license plate text bold */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display {
    font-weight: bold !important;
}

/* Dashboard Cards - Equal Height using Bootstrap 5 */
.row.g-3 .col-12.col-sm-6.col-md-4 {
    display: flex;
}

.row.g-3 .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.row.g-3 .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.row.g-3 .card-footer {
    margin-top: auto;
}


/* ===========================================
    Button Primary Hover
   =========================================== */

.btn-primary:hover {
    color: white !important;
}

/* ===========================================
    Button Group
   =========================================== */

.btn-group .btn-outline-primary:hover {
    background-color: var(--sigrev) !important;
    border-color: var(--sigrev) !important;
    color: white !important;
}

.btn-group .btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--sigrev-rgb), 0.25) !important;
}

.btn-group .dropdown-toggle-split {
    border-left: 1px solid var(--sigrev) !important;
}

.btn-group .dropdown-toggle-split:hover {
    background-color: var(--sigrev) !important;
    border-color: var(--sigrev) !important;
}

.dropdown-menu .dropdown-item.active {
    background-color: var(--sigrev) !important;
    color: white !important;
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(var(--sigrev-rgb), 0.1) !important;
    color: var(--sigrev) !important;
}

/* Ensure select dropdown arrows are visible (single select only) */
select.form-control:not([multiple]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.form-control:not([multiple]):focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* Custom badge styling for parish/locality counts */
.badge-count {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
    margin-left: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.badge-count:hover {
    background-color: var(--bs-secondary-bg-subtle);
    border-color: var(--bs-border-color-translucent);
}

/* Vehicle selection checkboxes styling */
.vehicle-checkbox {
    transform: scale(1.2);
    cursor: pointer;
}

.vehicle-checkbox:hover {
    transform: scale(1.3);
}

#selectAll {
    transform: scale(1.2);
    cursor: pointer;
}

#selectAll:hover {
    transform: scale(1.3);
}

/* Row highlighting when vehicle is selected */
tr.vehicle-selected {
    background-color: rgba(25, 135, 84, 0.1) !important;
    border-left: 4px solid #198754 !important;
}

/* Hover effect for table rows with checkboxes */
tr:has(.vehicle-checkbox):hover {
    background-color: rgba(0, 123, 255, 0.05) !important;
}

/* User Selection Modal Styles */
.user-card {
    transition: all 0.2s ease;
    cursor: pointer;
}

.user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.user-card .form-check-input:checked + .form-check-label .user-card {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: #198754;
}

.avatar-sm {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.avatar-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* SweetAlert2 User Selection Styles */
.swal2-popup .user-card {
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.swal2-popup .user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.swal2-popup .user-card .card-body {
    padding: 1rem;
}

.swal2-popup .user-card .form-check {
    margin: 0;
}

.swal2-popup .user-card .form-check-input {
    margin: 0;
    transform: scale(1.2);
}

.swal2-popup .avatar-sm {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.swal2-popup .avatar-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.swal2-popup .user-card .fw-bold {
    font-size: 1.1rem;
    line-height: 1.2;
    text-align: left;
}

.swal2-popup .user-card .text-muted {
    font-size: 0.875rem;
    line-height: 1.2;
    text-align: left;
}

.swal2-popup .user-card .text-start {
    text-align: left !important;
}

/* SweetAlert2 button states */
.swal2-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Inline edit icons */
.inline-edit-icon {
    transition: all 0.2s ease;
    cursor: pointer;
}

.inline-edit-icon:hover {
    color: #0a58ca !important;
    transform: scale(1.1);
}

.inline-edit-icon:active {
    transform: scale(0.95);
}

/* Extra small button class */
.btn-xsm {
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    line-height: 1.2;
}

.btn-xsm.btn-outline-primary {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* Notes text ellipsization */
.notes-text {
    display: inline;
}

.notes-text.ellipsized {
    display: inline;
}

.notes-text.ellipsized::after {
    content: "... ";
    color: #6c757d;
}

.notes-text-link {
    color: #0a58ca;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
}

.notes-text-link:hover {
    color: #0a58ca !important;
    text-decoration: underline;
}

/* User assignment modal styles */
#userAssignmentModal .user-card {
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

#userAssignmentModal .user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#userAssignmentModal .user-card .card-body {
    padding: 1rem;
    display: flex;
    align-items: center;
}

#userAssignmentModal .user-card .form-check {
    margin: 0;
}

#userAssignmentModal .user-card .form-check-input {
    margin: 0;
    transform: scale(1.2);
}

#userAssignmentModal .avatar-sm {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.4rem;
    flex-shrink: 0;
}

#userAssignmentModal .avatar-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#userAssignmentModal .user-card .fw-bold {
    font-size: 1.1rem;
    line-height: 1.2;
    text-align: left;
}

#userAssignmentModal .user-card .text-muted {
    font-size: 0.875rem;
    line-height: 1.2;
    text-align: left;
}

#userAssignmentModal .user-card .text-start {
    text-align: left !important;
}

/* Force white close button on all modals */
.modal-header .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='m.5 3.5 3 3-3 3 1 1 3-3 3 3 1-1-3-3 3-3-1-1-3 3-3-3z'/%3e%3c/svg%3e") !important;
    background-size: 2em auto !important;
    filter: none !important;
}

.modal-header .btn-close:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='m.5 3.5 3 3-3 3 1 1 3-3 3 3 1-1-3-3 3-3-1-1-3 3-3-3z'/%3e%3c/svg%3e") !important;
    background-size: 2em auto !important;
    filter: none !important;
}

.modal-header .btn-close:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='m.5 3.5 3 3-3 3 1 1 3-3 3 3 1-1-3-3 3-3-1-1-3 3-3-3z'/%3e%3c/svg%3e") !important;
    background-size: 2em auto !important;
    filter: none !important;
}

/* Fixed width tooltips with text wrapping */
.tooltip {
    max-width: 300px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.tooltip .tooltip-inner {
    max-width: 300px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: left !important;
}

/* Force hide tooltips when they shouldn't be visible */
.tooltip:not(.show) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Fix for vehicle modal positioning - ensure it's not trapped inside tab content */
#vehicleModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9060 !important; /* above backdrop */
}

/* Ensure Bootstrap backdrop stays below the modal */
.modal-backdrop {
    z-index: 1050 !important;
}

/* Custom dropdown caret colors to match border colors - Higher specificity
.dropdown-menu.dropdown-menu-end.shadow[style*="border: 1px solid #f4c22b"]::before {
    border-bottom-color: #f4c22b !important;
}

.dropdown-menu.dropdown-menu-end.shadow[style*="border: 1px solid #17a2b8"]::before {
    border-bottom-color: #17a2b8 !important;
}*/

/* Even higher specificity
.dropdown-menu.dropdown-menu-end.shadow.show[style*="border: 1px solid #f4c22b"]::before {
    border-bottom-color: #f4c22b !important;
}

.dropdown-menu.dropdown-menu-end.shadow.show[style*="border: 1px solid #17a2b8"]::before {
    border-bottom-color: #17a2b8 !important;
}*/

.entity-related-to-vehicle {
    background-color: rgba(13, 110, 253, 0.1) !important; /* Faded blue background */
    border-radius: 4px;
    padding: 2px 4px;
}

/* Dropdown separator styling - full width line */
#eventTypeFilterSelect option.dropdown-separator,
#commTypeFilterSelect option.dropdown-separator {
    padding: 0.25rem 0;
    margin: 0;
    height: auto;
    background: transparent;
    border: none;
    border-top: 1px solid #dee2e6;
    line-height: 0;
    color: transparent;
    text-align: center;
}
/* Block container - last block margin */
.block-container.last-block {
    margin-bottom: 0.25rem !important;
}

#eventTypeFilterSelect option.dropdown-separator:disabled,
#commTypeFilterSelect option.dropdown-separator:disabled {
    opacity: 1;
    cursor: default;
}

/* DataTables button group - center icons horizontally and vertically */
.dt-buttons.btn-group {
    display: inline-flex !important;
    vertical-align: middle;
}

.dt-buttons.btn-group button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    flex: 0 1 auto;
}

.dt-buttons.btn-group button:not(:first-child) {
    margin-left: -1px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.dt-buttons.btn-group button:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* System Health - Refresh Interval Buttons */
.refresh-interval-btn {
    width: 3.5rem !important;
    min-width: 3.5rem !important;
    max-width: 3.5rem !important;
    position: relative;
}

.refresh-interval-btn.btn-dark + .refresh-interval-btn.btn-dark::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background-color: white;
    z-index: 10;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.dt-buttons.btn-group button:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.dt-buttons.btn-group button:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.dt-buttons button span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Payment Guide Out New */
.form-control[readonly] {
    background-color: #f8f9fa;
    opacity: 0.9;
    cursor: not-allowed;
}

.form-control:not([readonly]) {
    background-color: #ffffff;
    opacity: 1;
    cursor: text;
}

.timeline {
    position: relative;
}

.timeline-item {
    position: relative;
    padding-left: 50px;
    margin-bottom: 20px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: -20px;
    width: 2px;
    background-color: #e0e0e0;
}

.timeline-item:last-child::before {
    bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #007bff;
    top: 15px;
}

.timeline-item.current {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px 15px 15px 50px;
}

.timeline-item.current .timeline-dot {
    background-color: #28a745;
    width: 12px;
    height: 12px;
    left: 15px;
}

/* System Health Page - Card Height */
.h-90 {
    height: 90% !important;
}

/* Print Styles for PDF Generation */
@media print {
    /* Hide navigation, headers, and buttons */
    .pcoded-navbar,
    .pcoded-header,
    .pcoded-mob-header,
    .menu-styler,
    .navbar,
    #page-heading-block,
    #page-heading-title,
    #page-heading-subtitle,
    #page-heading-divider,
    #page-heading-right,
    .btn,
    button,
    .d-flex.gap-2,
    .alert .d-flex.gap-2,
    .alert h5,
    .alert .btn {
        display: none !important;
    }

    /* Hide last update alert box header, icon, and buttons, but keep the content */
    .alert.alert-info h5,
    .alert.alert-info .d-flex.gap-2,
    .alert.alert-info .btn,
    .alert.alert-info material-icon {
        display: none !important;
    }

    /* Keep alert box content visible (the timestamp text) */
    .alert.alert-info {
        display: block !important;
        border: 1px solid #b3d7ff !important;
        background-color: #e7f3ff !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Ensure the timestamp text is visible */
    .alert.alert-info p,
    .alert.alert-info #last-updated-text {
        display: block !important;
        margin: 0 !important;
    }

    /* Hide action buttons row */
    .row.m-0.pe-0 .btn,
    .row .btn {
        display: none !important;
    }

    /* Smaller margins for print */
    @page {
        size: A4;
        margin: 0.3cm 0.3cm 0.3cm 0.3cm;
    }

    /* Set A4 width (210mm) and continuous paper */
    body {
        width: 210mm !important;
        max-width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Main content container */
    .pcoded-main-container {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .pcoded-content {
        padding: 0 !important;
        width: 100% !important;
    }

    .pcoded-inner-content {
        padding: 0 !important;
        width: 100% !important;
    }

    /* Card and content spacing */
    .card {
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .card-body {
        padding: 5px !important;
    }

    /* Continuous paper - allow natural flow with minimal breaks */
    #formdata-block,
    #formdata-spacer {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Prevent breaking inside form rows */
    .row {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Allow breaks between sections but keep related content together */
    .col-12,
    .col-6,
    .col-md-12,
    .col-md-6 {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Hide attachment manager controls but keep content */
    .attach-manager-controls,
    .attach-manager-actions,
    .attach-manager .btn {
        display: none !important;
    }

    /* Show attachment list in print */
    .attach-manager-list {
        display: block !important;
    }

    /* Remove decorative borders for cleaner print */
    .border,
    .border-end,
    .border-secondary,
    .border-divider-dark-1 {
        border: none !important;
    }

    /* Adjust spacing for print */
    .mb-4 {
        margin-bottom: 10px !important;
    }

    .mb-3 {
        margin-bottom: 8px !important;
    }

    .mt-4 {
        margin-top: 10px !important;
    }

    .mt-3 {
        margin-top: 8px !important;
    }

    /* Ensure text is readable for print */
    body,
    .card-body,
    .form-label,
    .form-control-plaintext {
        color: #000 !important;
    }

    /* Keep backgrounds white for print */
    body,
    .card,
    .card-body {
        background: #fff !important;
    }

    /* Keep form labels and values visible */
    .form-label,
    .form-control-plaintext {
        display: block !important;
        color: #000 !important;
    }

    /* Ensure proper display of content */
    #formdata-block,
    #formdata-spacer {
        display: block !important;
    }
}

/* Process New Form - Header Field Labels */
#div_id_proc_type label,
#div_id_proc_date label,
#div_id_nipg label {
    color: white;
}

/* Leaflet Map Controls - Fullscreen positioning */
.leaflet-top.leaflet-left {
    display: flex;
    flex-direction: column;
}

.leaflet-control-fullscreen {
    order: -1;
    margin-bottom: 10px;
}

/* Permission Object Labels Badge - Overlay sticker style */
/* z-index set to 999 to appear below modals (1050-1055) and dropdowns (1000) but above regular content */
.permission-object-badge {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    z-index: 999 !important;
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
    border: 2px solid #ffc107 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    max-width: none !important;
    max-height: none !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    align-self: auto !important;
    order: 0 !important;
    cursor: help !important;
}

/* Ensure parent elements with badges don't clip them */
:has(> .permission-object-badge),
:has(.permission-object-badge) {
    overflow: visible !important;
}

/* Also target common container classes that might clip */
.nav,
.nav-item,
.nav-link,
.btn-group,
.dropdown,
.menu,
.sidebar,
.pcoded-navbar {
    overflow: visible !important;
}

/* Breathing border animation for Resumo tab when pending steps exist */
/* Border only on left, top, and right sides (not bottom) - using box-shadow to avoid layout shifts */
/* Uses highlight-blue color: rgb(10, 88, 202) */
@keyframes tab-breathe-border {
    0%, 100% {
        box-shadow:
            inset 2px 0 0 0 rgba(10, 88, 202, 0),
            inset 0 2px 0 0 rgba(10, 88, 202, 0),
            inset -2px 0 0 0 rgba(10, 88, 202, 0);
    }
    12.5% {
        box-shadow:
            inset 2px 0 0 0 rgba(10, 88, 202, 0.25),
            inset 0 2px 0 0 rgba(10, 88, 202, 0.25),
            inset -2px 0 0 0 rgba(10, 88, 202, 0.25);
    }
    25% {
        box-shadow:
            inset 2px 0 0 0 rgba(10, 88, 202, 0.5),
            inset 0 2px 0 0 rgba(10, 88, 202, 0.5),
            inset -2px 0 0 0 rgba(10, 88, 202, 0.5);
    }
    37.5% {
        box-shadow:
            inset 2px 0 0 0 rgba(10, 88, 202, 0.75),
            inset 0 2px 0 0 rgba(10, 88, 202, 0.75),
            inset -2px 0 0 0 rgba(10, 88, 202, 0.75);
    }
    50% {
        box-shadow:
            inset 2px 0 0 0 rgba(10, 88, 202, 1),
            inset 0 2px 0 0 rgba(10, 88, 202, 1),
            inset -2px 0 0 0 rgba(10, 88, 202, 1);
    }
    62.5% {
        box-shadow:
            inset 2px 0 0 0 rgba(10, 88, 202, 0.75),
            inset 0 2px 0 0 rgba(10, 88, 202, 0.75),
            inset -2px 0 0 0 rgba(10, 88, 202, 0.75);
    }
    75% {
        box-shadow:
            inset 2px 0 0 0 rgba(10, 88, 202, 0.5),
            inset 0 2px 0 0 rgba(10, 88, 202, 0.5),
            inset -2px 0 0 0 rgba(10, 88, 202, 0.5);
    }
    87.5% {
        box-shadow:
            inset 2px 0 0 0 rgba(10, 88, 202, 0.25),
            inset 0 2px 0 0 rgba(10, 88, 202, 0.25),
            inset -2px 0 0 0 rgba(10, 88, 202, 0.25);
    }
}

#resumo-tab.breathing-tab {
    animation: tab-breathe-border 4s ease-in-out infinite;
}