/* ============================ */
/* GLOBAL STYLES               */
/* ============================ */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #f6f6f6;
    overflow: hidden;
    width: 100vw;
}

#pendingmail .row {
    --bs-gutter-x: 0rem !important;
}

/* ============================ */
/* SCROLLBAR STYLING           */
/* ============================ */
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    display: none;
}

/* Firefox */
* {
    scrollbar-width: none;
}

/* IE & old Edge */
* {
    -ms-overflow-style: none;
}

/* ============================ */
/* LOADING SPINNER OVERLAY     */
/* ============================ */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #549f57 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}


/* ============================ */
/* COLORS           */
/* ============================ */
.bg-green {
    background-color: #549f57 !important;
}
.bg-green-light {
    background-color: #e4f1e6 !important;
}
.bg-green-dark {
    background-color: #184933 !important;
}
.bg-success {
    background-color: #549F57 !important;
}
.bg-red {
    background-color: #c90317 !important;
}
.bg-blue {
    background-color: #006178 !important;
}
.bg-brown {
    background-color: #6C380C !important;
}
.bg-yellow {
    background-color: #FFDA0F !important;
}
.bg-orange {
    background-color: #FF7F00 !important;
}
.bg-brown-dark {
    background-color: #340C0C !important;
}
.bg-grey {
    background-color: #313030 !important;
}
.bg-pale {
    background-color: #edfddb !important;
}
.bg-violet {
    background-color: #494276 !important;
}
.bg-violet-light {
    background-color: #667eea !important;
}

.text-violet {
    color: #494276 !important;
}
.text-yellow {
    color: #F8BC26 !important;
}
.text-blue {
    color: #074756 !important;
}
.text-green {
    color: #549f57;
}
.text-green-dark {
    color: #184933;
}
.text-red {
    color: #DF6155;
}
.text-pale {
    color: #F4F1CE !important;;
}
.text-brown {
    color: #2D2418 !important;;
}
.text-brown-light {
    color: #6C380C !important;;
}
.text-orange {
    color: #FF7F00 !important;
}
.hover-brown-light:hover {
    background-color: #e5ebd1 !important;
}

/* ============================ */
/* WRAPPER & CONTENT           */
/* ============================ */
.custom-wrapper {
    display: flex;
    transition: all 0.3s ease;
}
.content {
    flex: 1;
    transition: margin-left 0.3s ease;
}

/* ============================ */
/* SIDEBAR                     */
/* ============================ */
.sidebar {
    position: fixed;
    left: 0;
    top: 115px; /* match your header height */
    width: 260px;
    background-color: #e4f1e6;
    color: black;
    transition: transform 0.5s ease;
    z-index: 1050;
    height: calc(100vh - 115px);      /* always fills available space */
    overflow-y: auto;                 /* enables vertical scrolling */
    display: flex;
    flex-direction: column;
    border-top: 3px solid rgb(84, 159, 87);
    border-bottom: 3px solid rgb(84, 159, 87);
}
.sidebar.collapsed {
    transform: translateX(-100%);
}
.sidebar.expanded {
    transform: translateX(0) !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
}
.sidebar i,
.sidebar svg {
    color: #184933;
}
.sidebar a {
    color: black;
    text-decoration: none;
    display: block;
    background-color: #e4f1e6;
}

.hamburger {
    font-size: 1.5rem;
    background: none;
    border: none;
    color: #549f57;
}
.sidebar.show {
    transform: translateX(0);
}
.sidebar .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    color: white;
    background: none;
    border: none;
}
.sidebar.show~.content {
    margin-left: 260px;
}
.nav-link {
    font-size: 14px;
    margin: 0.3rem 0;
}
.sidebar a:hover,
.sidebar a:focus,
.sidebar a:active,
.sidebar .nav-link.active {
    background-color: #549f57;
    color: white;
    outline: none;
    box-shadow: none;
}

/* ============================ */
/* SIDEBAR HOTSPOT             */
/* ============================ */
#sidebarHotspot {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 138px;
    z-index: 1100;
    cursor: pointer;
}

/* ============================ */
/* HEADER SECTION              */
/* ============================ */
.header .img-siigo {
    max-width: 120px;
}
.header .img-cilss {
    max-width: 90px;
}
.header .header-text {
    color: #549f57;
    margin: 0;
    text-shadow: 1px 1px 1px #188152
}
.header {
    height: auto;
    background-color: #ffffff;
    border-bottom: 3px solid #549f57;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: 0;
    z-index: 1030;
}
.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/navbar.png') no-repeat center center / cover;
    opacity: 0.2;
    z-index: -1;
}
/* ============================ */
/* TOAST NOTIFICATIONS         */
/* ============================ */
.toast {
    color: white !important;
}
.toast-dark {
    background-color: rgba(0, 0, 0, 0.3);
}
.toast:not(.static) .progress-bar {
    animation: progress 5s linear 1;
    height: 3px;
    width: 100%;
}
.toast.static .progress-bar,
.toast:hover .progress-bar {
    animation-play-state: paused;
}
@keyframes progress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* ============================ */
/* OTP STYLES                  */
/* ============================ */
.otp-container {
    display: none;
}
.otp-container.show {
    display: block;
}
.otp-input {
    width: 35%;
    border: 2px solid #ddd;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2rem;
}
.otp-button {
    min-width: 120px;
}

/* ============================ */
/* UTILITY CLASSES             */
/* ============================ */
.logo {
    height: 40px;
    margin-right: 0.5rem;
}

/* ============================ */
/* DROPDOWN & NAVBAR           */
/* ============================ */
.navbar {
    background-color: #184933;
    border-bottom: 3px solid #549f57;
}

.navbar button, .navbar a{
    color: #fff;
    font-size: 14px;

}
.navbar button.active-button, .navbar a.active-button {
    color: #e6d36f;
}
.navbar button.active-button, .navbar a.active-button {
    background-color: #458148;
    color: #fff9a7;
    border: 1px solid #7c9c63;

}
.navbar button:hover, .navbar a:hover {
    background-color: #0f5234  !important;
    color: #F7F7F7;

}

.dropdown-menu {
    background-color: #f4fae0;
}

.navbar .dropdown-menu li a:hover {
    color: #2D2418 !important;
    font-weight: bold;
    background-color: #e5ebd1 !important;
}
.navbar .dropdown-menu li.active-button {
    color: #2D2418 !important;
    background-color: #e0e3d8 !important;
}
.navbar .dropdown-menu li.active-button a {
    font-weight: bold;
}

.dropdown-menu a {
    color: #6C380C;
}

@media (max-width: 768px) {
    .navbar {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .navbar .btn,
    .navbar .btn-group {
        width: 100% !important;
        margin-bottom: 0;
    }

    .navbar .btn-group .dropdown-menu {
        width: 100%;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
        display: block;
        visibility: hidden;
        pointer-events: none;
    }

    /* When dropdown is shown */
    .navbar .btn-group .dropdown-menu.show {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }
}

@media (max-width: 425px) {
    .navbar {
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .navbar .btn {
        font-size: 0.875rem;
        padding: 0.5rem 0.25rem;
    }

    .navbar .btn i {
        margin-right: 0.25rem;
    }
}

/* ============================ */
/* MAIL MODULE STYLES          */
/* ============================ */

.sub-tab-btn {
    background-color: #fff;
    font-size: 14px;
}
.sub-tab-btn.active {
    color: #d2e190;
    background-color: #d6ebd6;
}
.sub-tab.active {
    color: #549f57 !important;
    border-bottom: 3px solid #e6d36f;
}
.sub-tab:hover {
    transform: scale(1.02);
}
.mail-inline {
    max-width: 340px;
    min-width: 300px;
    min-height: 250px;
    max-height: 265px;
}
.mail-inline .card {
    height: 100%;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.mail-inline .card-footer {
    border: none;
}

.statisticsCount {
    background-color: #d3d3d3;
    width: fit-content;
    padding: 20px;
    width: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 35px auto 0 auto;
}
.statisticsCount h4 {
    margin-bottom: 0 !important;
}

/* ============================ */
/* CHART WRAPPER               */
/* ============================ */
.barChartWrapper {
    width: 50%;
    height: 40vh;
    margin: 0 auto;
    position: relative;
}
canvas {
    width: 100% !important;
    height: 100% !important;
}

.statistics-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.statistics-icon-large {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.2);
}
.statistics-icon-large i {
    font-size: 16px;
}
.hover-shadow {
    transition: all 0.3s ease;
}
.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.statistics-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: rgba(40, 167, 69, 0.1);
}
.statisticsCount {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.statisticsCount h2 {
    font-weight: 700;
    color: #28a745;
}
.statisticsCount small {
    font-weight: 500;
    color: #6c757d;
}
/* ============================ */
/* COLLAPSIBLE SECTIONS        */
/* ============================ */
.collapse:not(.show) {
    display: none;
}
.collapse.show {
    display: block;
}

/* ============================ */
/* RESPONSIVE STYLES           */
/* ============================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .barChartWrapper {
        width: 75% !important;
    }
}
@media (max-width: 992px) {
    .header .img-siigo {
        max-width: 90px;
    }
    .header .img-cilss {
        max-width: 65px;
    }
    .header h4 {
        font-size: 30px !important;
    }
}
@media (max-width: 768px) {
    .col-lg-8 {
        display: none;
    }
    .sidebar {
        display: none;
        position: fixed;
        top: 115px; /* match your header height */
        left: 0;
        width: 260px;
        height: calc(100vh - 115px); /* fill below header */
        background: #e4f1e6 !important;
        /* color: #fff !important; */
        flex-direction: column;
        z-index: 1050;
        padding: 1rem;
        overflow-y: auto;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
        transition: transform 0.5s ease;
    }
    .sidebar.show {
        display: flex !important;
        transform: translateX(0);
    }
    .sidebar .nav-link,
    .sidebar a {
        color: #000000 !important;
    }
    .sidebar .close-btn {
        color: #fff !important;
    }
    #sidebar {
        display: none;
        transform: translateX(-100%);
    }
    #sidebar.show {
        display: flex !important;
        z-index: 1050;
        background: #fff;
        transform: translateX(0);
    }
    .content {
        margin-left: 0;
    }
    .barChartWrapper {
        width: 100% !important;
    }

    /* START :: HEADER SECTION */
    .header .img-siigo {
        max-width: 75px;
    }
    .header .img-cilss {
        max-width: 50px;
    }
    .header {
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(-1 * var(--bs-gutter-y));
        margin-right: calc(-.5 * var(--bs-gutter-x));
        margin-left: calc(-.5 * var(--bs-gutter-x));
    }
    .header h4 {
        font-size: 20px !important;
    }

    /* END :: HEADER SECTION */

    #phaseTwoRecordingModal {
        .modal-body {
            .border-end {
                border-right: none !important;
            }
        }
    }
}
@media (max-width: 400px) {
    .header .img-siigo {
        max-width: 60px;
    }
    .header .img-cilss {
        max-width: 45px;
    }
    .header h4 {
        display: flex !important;
        justify-content: start;
        font-size: 15px !important;
    }
    .header h4.align-self-start.d-sm-block {
        display: none !important;
    }
}

/* ============================ */
/* LANG DROPDOWN           */
/* ============================ */
#languageDropdown {
    background-color: transparent;
    border: none;
}

/* Override Bootstrap's btn-success */
.btn-success {
    background-color: #549e56 !important; /* your custom color */
    border-color: #549e56 !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #0F5234 !important; /* darker shade for hover */
    border-color: #1e7e34 !important;
    transform: scale(1.01);
}

.btn-success:active {
    background-color: #1c7430 !important;
    border-color: #1c7430 !important;
    box-shadow: none !important;
}

.btn-brown {
    background-color: #2D2418 !important;
    border-color: #2D2418 !important;
    color: #fff !important;
}

.btn-brown:hover,
.btn-brown:focus {
    background-color: #3F3221 !important;
    border-color: #3F3221 !important;
    transform: scale(1.01);
}

.btn-brown:active {
    background-color: #362a1b !important;
    border-color: #362a1b !important;
    box-shadow: none !important;
}

/* ============================ */
/* TIMELINE STYLES             */
/* ============================ */
.timeline-container {
    max-height: 600px;
    overflow-y: auto;
}
.timeline__item.animated{
    opacity: inherit !important;
}

.interal-communication-body {
    .vertical-line {
        margin-left: 1.5rem;
        height: 100%;
        border-width:3px;
        border-left: 2px solid green;
    }

    /* .eventDescription {
        font-size: 0.95rem;
        line-height: 1.3;
        max-height: 2.6em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    } */
}


/* ============================ */
/* CUSTOM STYLES - MODAL INPUTS */
/* ============================ */
input[type="radio"]:checked, input[type="checkbox"]:checked{
    background-color: #549f57;
    color: #549f57;
    border-color: #549f57;
}
.uploadFileForm .upload-box {
    border: 2px dashed #6c757d;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease;
}
#dropdownMenuButton .totalNotifications{
    top: 3px !important;
    font-size: smaller;
    left: 31px;
}

.btn-check:checked + .btn.btn-outline-success {
    background-color: #549f57 !important;
    border-color: #549f57 !important;
    color: #fff !important;
}

.btn-outline-success {
    --bs-btn-color: #549f57;
    --bs-btn-border-color: #549f57;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #549f57;
    --bs-btn-hover-border-color: #549f57;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #549f57;
    --bs-btn-active-border-color: #549f57;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #549f57;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #549f57;
    --bs-gradient: none;
}

/* ============================ */
/* CUSTOM STYLES - Workflow Summary Modal */
/* ============================ */
#workflowSummary .rounded-circle {
    width: 20px;
    height: 20px;
}

#dropdownMenuButton #NotificationUrgent{
    top: -20%;
    right: 77%;
    font-size: smaller;
}
span.fs-small{
    font-size: 0.85em !important;
}
#profileForm {
    .upload-section {

        img {
            max-width:100%;
            width:100px;
            height:auto;
        }
        select {
            min-width: 150px;
            max-width: 100%;
        }
        .mySignature, .myCV {
            min-width: 250px;
        }
        .myPicture {
            min-width: 250px;

        }
    }
}
@media (max-width: 767.98px) {
    .profile {
        flex-direction: column !important;
    }
    .profile > div {
        width: 100% !important;
        min-width: 0 !important;
    }
    .form-select {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* ============================ */
/* INTERNAL COMMUNICATION STYLES */
/* ============================ */
.internal-communication {
    background-color: #f8f9fa;
}

.date-box {
    min-width: 80px;
    border: 1px solid rgba(84, 159, 87, 0.2);
}

.event-description  {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
    max-height: 10em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.news-item {
    transition: background-color 0.2s ease;
     display: -webkit-box;
    -webkit-line-clamp: 2;
}
.news-item p {
    display: inline;
}
.news-item:hover {
    background-color: #e4f1e6 !important;
}

.alert-success-light {
    background-color: #e4f1e6;
    color: #184933;
}

.empty-state {
    color: #6c757d;
    padding: 2rem;
}

.timeline__content {
    transition: transform 0.2s ease;
    background-color: #ebf5daa3 !important;
}

.timeline__content:hover {
    transform: translateX(5px);
}
.signature-container canvas {
    border: 1px solid grey;
}
/* Custom tab styles for profile page */
.profile-qrcode{
    max-width:120px;
    max-height:120px;
}
.profile .nav-tabs {
    border-bottom: none;
    justify-content: center;
    gap: 0.5rem;
}
.profile .tab-content {
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 32px rgba(25,135,84,0.08);
    padding: 40px 32px 32px 32px;
    margin-top: 8px;
    min-height: 320px;
}
@media (max-width: 768px) {
    .profile .tab-content {
        padding: 20px 8px 16px 8px;
    }
    .profile .nav-tabs .nav-link {
        font-size: 1rem;
        padding: 12px 18px;
        width: 100%;
        margin-bottom: 6px;
    }
}

/* ============================ */
/* Q & A */
/* ============================ */
.attachment-item {
    transition: box-shadow 0.2s, background 0.2s;
}
.attachment-item:hover {
    background: #e9f7ef;
    box-shadow: 0 2px 12px rgba(25,135,84,0.10);
}

.modal-body.bg-light-subtle {
    background: #f8f9fa !important;
    border-radius: 0 0 1.5rem 1.5rem;
    box-shadow: 0 2px 16px rgba(25,135,84,0.07);
}
.attachment-item {
    transition: box-shadow 0.2s, background 0.2s;
    border: 1px solid #e0e0e0;
}
.attachment-item:hover, .attachment-item:focus {
    background: #e9f7ef;
    box-shadow: 0 2px 12px rgba(25,135,84,0.10);
    border-color: #43c47c;
}
.attachment-item .fa {
    min-width: 24px;
    text-align: center;
}

.profile-tabs-scroll {
  scrollbar-width: thin;
  scrollbar-color: #43c47c #f8f9fa;
  box-shadow: 0 2px 8px rgba(25,135,84,0.07);
  border-radius: 1rem 1rem 0 0;
}
.profile-tabs-scroll::-webkit-scrollbar {
  height: 6px;
}
.profile-tabs-scroll::-webkit-scrollbar-thumb {
  background: #43c47c;
  border-radius: 3px;
}
.profile-tabs-scroll::-webkit-scrollbar-track {
  background: #f8f9fa;
}
@media (max-width: 600px) {
  .profile-tabs-scroll {
    padding-bottom: 2px;
    margin-bottom: 8px;
  }
  .profile-tabs-scroll .nav-link {
    font-size: 15px;
    padding: 10px 16px;
    min-width: 120px;
    text-align: center;

  }
}
.nav-tabs .nav-link {
    color: #455346;
}

.profile .nav-tabs .nav-link.active, .profile .nav-tabs .nav-link:focus {
  background-color: #ECB338 !important;
  color: #184933 !important;
  border-color: #ECB338 #ECB338 #fff !important;
  font-weight: 600;
}

#signature-pad canvas {
    width: 100% !important;
    height: 250px !important;
    max-width: 100%;
    display: block;
}
@media (max-width: 576px) {
    #signature-pad {
        padding: 1rem !important;
    }
    #signature-pad canvas {
        height: 210px !important;
    }
}

.file-upload-container {
    max-width: 100%;
    min-width: 0;
}
.upload-box {
    min-height: 140px;
    border: 2px dashed #198754;
    border-radius: 16px;
    background: #f8f9fa;
    width: 100%;
    transition: border-color 0.2s;
}
.upload-box.dragover {
    border-color: #145a32;
    background: #e9f7ef;
}
.upload-label {
    font-size: 1.1rem;
}
@media (max-width: 576px) {
    .file-upload-container {
        padding: 1rem !important;
    }
    .upload-box {
        min-height: 100px;
    }
}


/* ============================ */
/* photolibrary module */
/* ============================ */

.media-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.media-overlay {
    transition: opacity 0.3s ease;
}

.media-card:hover .media-overlay {
    opacity: 1 !important;
}

.media-card:hover .card-img-top {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

/* Ensure Bootstrap btn-check styling works correctly */
.btn-check:checked + .btn-outline-success {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

.btn-check:checked + .btn-outline-success:hover {
    background-color: #157347;
    border-color: #157347;
    color: white;
}

.landscape-img .card-img-top {
    object-fit: cover;
    width: 100%;
    height: 120px;
}
.portrait-img .card-img-top {
    object-fit: contain;
    width: 100%;
    height: 120px;
    background: #f8f9fa;
}
#templateForm .input-error {
    border: 1px solid #dc3545 !important;
}
.photo-section {
    background: linear-gradient(90deg, #f4fae0 60%, #e2ffbc 100%);
}
.photo-section-icon {
    background : linear-gradient(135deg, #28a745 0%, #20c997 100%)
}

#photoLibraryImg {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ============================ */
/* Toggle switch
/* ============================ */

.switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    left: 0px;
    background-color: #458148;
}

input:focus + .slider {
    box-shadow: 0 0 1px #458148;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* ============================ */
/* End Toggle switch
/* ============================ */

/* ============================ */
/* Timeline Styles
/* ============================ */

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 0 rgba(40, 167, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.9),
                    0 0 25px rgba(40, 167, 69, 0.4);
    }
    100% {
        box-shadow: 0 0 0 rgba(40, 167, 69, 0.7);
    }
}

.highlight-modern {
    animation: glowPulse 1s ease-in-out 2; /* 2 pulses */
    border-radius: 12px;
    transition: transform 0.2s ease;
}

/* ============================ */
/* End Timeline Styles
/* ============================ */

.modal-resize {
    --bs-modal-width: 800px !important;
}

/* ============================ */
/* Custom validation styles for chosen form */
.chosen-container.is-invalid .chosen-choices, .chosen-container.is-invalid .chosen-single {
    border-color: #dc3545;
}

/* ============================ */
/* LightGallery Styles */
/* ============================ */

.gallery-item {
    cursor: pointer;
    position: relative;
}

/* Force thumbnail strip to show horizontally */
.lg-thumb-outer {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    display: block !important;
    justify-items: anchor-center;
}

.lg-thumb {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
}

.lg-thumb-item {
    display: inline-block !important;
    width: 100px !important;
    height: 80px !important;
    flex-shrink: 0;
    margin: 0 4px;
}

.lg-thumb-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

/* Thumbnail hover effect */
.lg-thumb-item:hover img {
    border-color: #dc3545 !important;
}

/* Active/selected thumbnail */
.lg-thumb-item.active img {
    border-color: #dc3545 !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
}

.lg-photo-gallery .lg-img-wrap,
.lg-photo-gallery .lg-image {
    height: 500px;
    max-height: 500px;
    width: 100%;
    object-fit: contain;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* optional */
}

@media (max-width: 1024px) {
    .lg-photo-gallery .lg-img-wrap,
    .lg-photo-gallery .lg-image {
        height: 400px;
        max-height: 400px;
    }
}

@media (max-width: 768px) {
    .lg-photo-gallery .lg-img-wrap,
    .lg-photo-gallery .lg-image {
        height: 300px;
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .lg-photo-gallery .lg-img-wrap,
    .lg-photo-gallery .lg-image {
        height: 200px;
        max-height: 200px;
    }
}

/* SubHTML (caption) styling */
.lg-photo-gallery .lg-sub-html {
    min-height: 40px;
    padding: 10px 20px;
    font-size: 14px;
    background: rgba(29, 28, 28, 0.6);
    color: #fff;
    text-align: center;
}


/* ============================ */
/* Custom font size classes */
.fs-12px {
    font-size: 12px !important;
}

.fs-9px {
    font-size: 9px !important;
}

/* ============================ */
/* LIGHTGALLERY Z-INDEX FIXES  */
/* ============================ */

.lg-outer,
.lg-backdrop,
.lg-next,
.lg-prev,
.lg-toolbar,
.lg-counter {
    z-index: 10000 !important;
}
.lg-backdrop {
    z-index: 10000 !important;
}


/* ============================ */
/* Drag & Drop Styles */
/* ============================ */
/* Task Drag & Drop Styles - Ultra Compact for 6-7+ cards */
.task-steps-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.step-container {
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    overflow: hidden;
    pointer-events: auto !important;
    user-select: auto !important;
}

.step-header {
    background: #d1e7dd;
    border: 1px solid #a7b9b1;
    color: #2d5a3d;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab !important;
    user-select: none;
}

/* While dragging, show grabbing hand */
.step-header:active,
.step-ghost,
.step-chosen,
.step-drag {
    cursor: grabbing !important;
}
/* Do not show drag cursor on the edit button */
.step-header .edit-step-label,
.step-header .edit-step-label *,
.step-header .btn,
.step-header .btn * {
    cursor: pointer !important;
}

.step-header h5 {
    margin: 0;
    font-weight: 600;
    font-size: 0.85rem;
}

.task-count {
    background: rgba(255,255,255,0.2);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
}

.tasks-list {
    padding: 6px;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tasks-list:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-style: italic;
    min-height: 30px;
}

.tasks-list:empty::after {
    content: 'Drop tasks here...';
}

.task-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: move;
}

.task-handle {
    color: #6c757d;
    font-size: 14px;
    cursor: grab !important;
    user-select: none;
    padding: 2px;
}

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

.task-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.task-name {
    font-weight: 500;
    color: #333;
    font-size: 0.85rem;
    line-height: 1.2;
}

.task-services {
    font-size: 0.75rem;
    font-weight: normal;
}

.task-actions {
    display: flex;
    gap: 3px;
}

.task-actions .btn {
    padding: 1px 4px;
    font-size: 0.75rem;
}

/* New Step Drop Zone - Ultra Compact */
.new-step-drop-zone {
    border: 2px dashed #28a745;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    color: #28a745;
    font-weight: 600;
    font-size: 0.9rem;
    background: rgba(40, 167, 69, 0.05);
    cursor: pointer;
}

.new-step-drop-zone.dragover {
    background: rgba(40, 167, 69, 0.1);
    border-color: #28a745;
    color: #28a745;
}

/* Sortable.js specific styles - Compact */
.sortable-ghost {
    opacity: 0.4 !important;
    background: #d4edda !important;
    border: 2px dashed #28a745 !important;
    transform: none !important;
}

.sortable-chosen {
    background: #d1f2eb !important;
    border-color: #28a745 !important;
    transform: none !important;
}

.sortable-drag {
    background: #c3e6cb !important;
    border-color: #28a745 !important;
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3) !important;
    transform: none !important;
}

/* Step-level dragging styles - Compact */
.step-ghost {
    opacity: 0.3 !important;
    background: #d4edda !important;
    border: 2px dashed #28a745 !important;
    border-radius: 6px !important;
    transform: none !important;
}

.step-chosen {
    background: #d1f2eb !important;
    border: 1px solid #28a745 !important;
    transform: none !important;
}

.step-drag {
    background: #c3e6cb !important;
    border: 1px solid #28a745 !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3) !important;
    z-index: 1000 !important;
    transform: none !important;
}

/* Position indicators - Compact */
.step-container::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid transparent;
    border-radius: 6px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.step-container.drop-target::before {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.1);
}

.position-indicator {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    background: #28a745;
    color: white;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.step-container.drop-target .position-indicator {
    opacity: 1;
}

/* Responsive Design - Ultra Compact */
@media (max-width: 768px) {
    .task-steps-container {
        padding: 6px;
        gap: 4px;
    }

    .step-header {
        padding: 4px 8px;
    }

    .step-header h5 {
        font-size: 0.8rem;
    }

    .tasks-list {
        padding: 4px;
    }

    .task-card {
        padding: 4px 6px;
        gap: 4px;
    }

    .task-content {
        gap: 4px;
    }

    .task-name {
        font-size: 0.8rem;
        line-height: 1.1;
    }

    .task-services {
        font-size: 0.7rem;
    }

    .task-actions {
        gap: 2px;
    }

    .task-actions .btn {
        padding: 2px 4px;
        font-size: 0.75rem;
    }

    .new-step-drop-zone {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Extra small screens (mobile phones) */
@media (max-width: 480px) {
    .task-steps-container {
        padding: 3px;
        gap: 3px;
    }

    .step-container {
        margin-bottom: 6px;
    }

    .step-header {
        padding: 3px 6px;
    }

    .step-header h5 {
        font-size: 0.75rem;
        margin: 0;
    }

    .task-card {
        padding: 3px 4px;
        gap: 3px;
        min-height: auto;
    }

    .task-handle {
        width: 10px;
        padding: 1px;
    }

    .task-content {
        gap: 3px;
    }

    .task-name {
        font-size: 0.75rem;
        line-height: 1.0;
    }

    .task-services {
        font-size: 0.65rem;
    }

    .task-actions {
        gap: 1px;
    }

    .task-actions .btn {
        padding: 1px 3px;
        font-size: 0.65rem;
    }

    .task-actions .btn i {
        font-size: 0.7rem;
    }

    .task-count {
        padding: 1px 3px;
        font-size: 0.6rem;
    }

    .new-step-drop-zone {
        padding: 6px 4px;
        font-size: 0.7rem;
    }
}

/* Animation for step creation */
.step-container.newly-created {
    animation: slideInFromRight 0.5s ease-out;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Notification styles - Compact */
.notification {
    position: fixed;
    top: 15px;
    right: 15px;
    padding: 8px 15px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.success {
    background: #28a745;
}

.notification.info {
    background: #28a745;
}

.notification.error {
    background: #dc3545;
}

/* Step indicator for parallel tasks - Ultra Compact */
.parallel-indicator {
    background: #ffc107;
    color: #212529;
    padding: 0px 4px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    margin-left: 4px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .task-card {
        border-width: 3px;
    }

    .sortable-ghost {
        border-width: 4px !important;
    }
}

/* Reduced motion support and complete transform prevention */
@media (prefers-reduced-motion: reduce) {
    .sortable-ghost,
    .sortable-chosen,
    .sortable-drag,
    .step-ghost,
    .step-chosen,
    .step-drag,
    .notification {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Global override to prevent any transforms during drag operations */
.sortable-ghost,
.sortable-chosen,
.sortable-drag,
.step-ghost,
.step-chosen,
.step-drag {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.sortable-ghost *,
.sortable-chosen *,
.sortable-drag *,
.step-ghost *,
.step-chosen *,
.step-drag * {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}
/* ============================ */
/* End Task Drag & Drop Styles */
/* ============================ */

/* ============================ */
/* Memo Styles - Ultra Compact for 6-7+ cards */

    .task-info {
        flex: 1;
    }

    .task-services {
        margin-top: 0px;
        font-size: 0.75rem;
    }

    .step-container:last-of-type:not(:only-child) {
        margin-bottom: 0;
    }

    /* Empty state styles */
    .fa-tasks.fa-3x {
        opacity: 0.3;
    }

    /* Parallel indicator styling - Ultra Compact */
    .parallel-indicator {
        background: #ffa500;
        color: white;
        font-size: 0.6rem;
        padding: 0px 3px;
        border-radius: 2px;
        margin-left: 4px;
        font-weight: bold;
    }


/* ============================ */
/* Memo utilities (minimal) */
/* ============================ */

.memo-card {
  transition: box-shadow .2s ease, transform .2s ease;
}
.memo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.memo-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Memo header status backgrounds */
.memo-header { border-bottom: 1px solid rgba(0,0,0,.05); }
/* Gradient memo headers */
.memo-header-warning { background: linear-gradient(135deg, #e11d48 0, #fb7185 100%) !important; color: #fff; }
.memo-header-info { background: linear-gradient(135deg, #0a8f73 0%, #0ea5a0 100%) !important; color: #fff; }
.memo-header-success { background: linear-gradient(135deg, #111827 0, #374151 100%) !important; color: #fff; }
/* Closed (secondary) as dark gradient override */
.memo-header-secondary { background: linear-gradient(135deg, #111827 0, #374151 100%) !important; color: #fff; }

.memo-header .fw-bold { color: #fff; }

/* Badge for gradient headers */
.memo-badge-on-gradient {
  background: rgba(255,255,255,.2) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}
.memo-badge-on-gradient i { color: #fff; }

/* Work in Progress (progress) orange gradient */
.memo-header-progress { background: linear-gradient(135deg, #f59e0b 0, #f97316 100%) !important; color: #111; }
.memo-header-progress .fw-bold { color: #111; }
.memo-header-progress .memo-badge-on-gradient { color: #111; border-color: rgba(0,0,0,.2); background: rgba(255,255,255,.6) !important; }

/* Gradient footer color for Memo cards */
.text-footer-warning { color: #e11d48 !important; }
.text-footer-info { color: #0a8f73 !important; }
.text-footer-progress { color: #f59e0b !important; }
.text-footer-secondary { color: #111827 !important; }

.text-footer-warning-emphasis { background-color: #f8dee3 !important; }
.text-footer-info-emphasis { background-color: #c3f3ea !important; }
.text-footer-progress-emphasis { background-color: #f5e4c5 !important; }
.text-footer-secondary-emphasis { background-color: #7d8492 !important; }

/* ============================ */

/* ============================ */

/* size */

.size-20{
    width: 20px;
    height: 20px;
}

/* ============================ */

/* signature modal */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1056; /* Higher than bootstrap's modal z-index */
    display: none; /* Hidden by default */
}
.modal-container {
    background: var(--bg, #f5f7fb);
    border-radius: 12px;
    width: 95%;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.modal-header-sig {
    display:flex;gap:12px;align-items:center;justify-content:space-between;
    background:var(--card, #fff);border-bottom:1px solid var(--border, #e5e7eb);padding:10px 16px;
    flex-shrink: 0;
}
.modal-body-sig {
    flex-grow: 1;
    overflow-y: auto;
    padding: 18px 12px 24px;
    text-align: center;
}

/* UI Element Styles */
.sig-left, .sig-right{display:flex;gap:8px;align-items:center}
.sig-btn{
    border:1px solid var(--border, #e5e7eb);background:#fff;color:#111827;
    padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:600
}
.sig-btn.primary{background:var(--brand, #1976d2);border-color:var(--brand, #1976d2);color:#fff}
.sig-btn:hover{filter:brightness(0.97)}
.sig-file{display:none}
.sig-file-label{cursor:pointer}
.sig-input{
    border:1px solid var(--border, #e5e7eb);border-radius:10px;padding:8px 10px;min-width:260px
}
.sig-hint{font-size:12px;color:#6b7280}

.pageWrap{
    position:relative;margin:18px auto;display:inline-block;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.06);
    border-radius:8px;border:1px solid var(--border, #e5e7eb);
}
canvas.pdfCanvas{display:block;border-radius:8px}
.sig{
    position:absolute;left:0;top:0;width:160px;height:auto;cursor:move;
    background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.12)
}
.placing{cursor:crosshair}

#vehicleSearchForm .booking-header{
    background: #e2ffbc;
}

/* End of Signature Styles */

/* FullCalendar column headers */
.fc .fc-col-header-cell, .fc-col-header-cell-cushion {
    background-color: #d1e7dd;
    color: rgb(91 99 98);
    font-weight: bold;
}
.fc-daygrid-day-number {
    color: rgb(91 99 98);
    font-weight: bold;
}
.fc .fc-scroller-harness-liquid {
    height: 101%;
}
/* User Document Styles */
#userDocument_ .opacity-100-hover:hover { 
    opacity: 1 !important; 
}
#userDocument_.card:hover { 
    transform: translateY(4px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important; 
}
#userDocument_.card { 
    transition: transform 0.15s, box-shadow 0.15s; 
}
.tooltip-inner {
  max-width: 600px;
  width: auto;
  white-space: normal;
  text-align: left !important;
}

/*dashboard page design*/
/* ============================ */
/* Dashboard: Event Card Image  */
/* ============================ */
.event-img-slider.single {
    margin-top: .25rem;
}

.event-img-slider.single .event-img-track {
    display: block;
}

/* Make the single event image compact and responsive */
.event-img-slider.single img {
    display: block;
    width: 100%;
    height: 140px; /* default compact height */
    object-fit: cover;
    border-radius: .5rem;
}

/* XL and larger screens */
@media (min-width: 1400px) {
    .event-img-slider.single img { height: 180px; }
}

/* LG screens */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .event-img-slider.single img { height: 160px; }
}

/* MD screens */
@media (max-width: 991.98px) {
    .event-img-slider.single img { height: 140px; }
}

/* SM screens */
@media (max-width: 768px) {
    .event-img-slider.single img { height: 120px; }
}

/* XS screens */
@media (max-width: 576px) {
    .event-img-slider.single img { height: 100px; }
}


.event-header-line {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
}
.date-box-compact{
    min-width:52px;
    width:52px;
    padding:.35rem .4rem;
    border:1px solid rgba(84,159,87,.25);
    background:#f3faf3;
    border-radius:.5rem;
    line-height:1;
}
.date-box-compact h3{
    font-size:1.1rem;
    margin:0 0 .15rem 0;
    font-weight:600;
}
.date-box-compact small{
    font-size:.60rem;
    letter-spacing:.5px;
    display:block;
    font-weight:600;
}
.event-title{
    font-size:14px;
    margin:0;
    font-weight:600;
    line-height:1.2;
}
.event-header-meta{
    flex:1 1 auto;
    min-width:0;
}
.event-header-actions .calendar-add-btn{
    padding:.15rem .4rem !important;
}
.event-description.small-tight{
    font-size:.70rem;
}
/* Ensure thumbs & button don’t overlap */
.event-thumbs-compact{
    margin-top:.5rem;
}
@media (max-width:576px){
    .event-header-line{flex-wrap:nowrap;}
    .event-title{font-size:.95rem;}
}
.event-img-slider .event-img-track{
    display:flex;flex-wrap:nowrap;
}

.event-img-slider .event-img-track img{
    width:100%;height:120px;object-fit:cover;border-radius:.25rem;display:block;
}
.event-img-slider.single .event-img-track a{
    flex:0 0 auto !important; 
    width:100%;
}
.event-desc {
    font-size: .9rem;
    line-height: 1.55;
    color: #6c757d;
    max-height: 10em;
    /* even edges */
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-line-clamp: 6;
}
.event-desc p { margin-bottom: .5rem; }
.event-media-thumb { width: 100%; height: 100px; object-fit: cover; border-radius: .5rem; }
@media (min-width: 768px) { .event-media-thumb { height: 100px; } }
@media (min-width: 1200px){ .event-media-thumb { height: 100px; } }

/* Diable effect for the option (Draft) */
    #docVersion option:disabled {
        color: rgba(128, 128, 128, 0.72);
        opacity: 0.4;
    }
/* Hide drag handle for tasks inside substeps */
.substep-container .task-handle { 
    display: none !important; 
}

blockquote {
  border-left: 5px solid #ccc;
  margin: 0.5em 10px;
  padding: 0.5em 10px;
  font-style: italic;
  color: #555;
}

.strategicUtilities .dropdown-menu {
    left: 130px !important;
}

div#calendar.calendar div.calendar-header.card div.card-body.p-0 table th.year-title {
    background: #ff9900;
    cursor:unset !important;
}
.calendar .year-neighbor,
.calendar .year-neighbor2 {
    background: inherit !important;
}

.modal-xxl{
    max-width: 1440px !important;
}