/* Single-select, searchable Select2 in the countersignee rows (flex layout) */
        .signee-row .select2-container { width: 100% !important; }
        .signee-row .select2-selection--single { height: calc(1.5em + .5rem + 2px) !important; border-color: #ced4da !important; }
        .signee-row .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + .5rem) !important; padding-left: .5rem; }
        .signee-row .select2-selection--single .select2-selection__arrow { height: 100% !important; }
    

    /* ===============================
       TOP HEADER
    =============================== */
    #page-topbar {
        background: linear-gradient(135deg, #461c44 0%, #832f80 50%, #421b40 100%) !important;
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        position: sticky;
        top: 0;
        z-index: 1003;
    }

    #page-topbar .navbar-header .btn,
    #page-topbar .navbar-header span,
    #page-topbar .navbar-header i {
        color: #f3e8ff !important;
    }

    #page-topbar .dropdown-menu {
        background: linear-gradient(135deg, #3b1839 0%, #5a2358 50%, #3b1839 100%) !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        color: #ffffff !important;
    }

    #page-topbar .dropdown-item {
        color: #ffffff !important;
        font-weight: 500;
        transition: background 0.3s ease, color 0.3s ease;
    }

    #page-topbar .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
    }

    #page-topbar .dropdown-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* ===============================
       LINKED ACCOUNTS (work account)
    ===============================
       The dropdown sits on the purple gradient, where two inherited rules make
       this block unreadable: `.navbar-header .btn` forces pale lavender text
       (#f3e8ff) onto Bootstrap's light button, and `.dropdown-header` /
       `.dropdown-item-text` default to grey. Everything here is therefore stated
       explicitly, with !important only where it has to beat those rules. */

    #page-topbar .dropdown-header {
        color: rgba(255, 255, 255, 0.65) !important;
        letter-spacing: .04em;
        font-weight: 600;
        padding-bottom: .15rem;
    }

    #page-topbar .dropdown-item-text {
        color: #ffffff !important;
    }

    /* The linked email + "(current)" line. */
    #page-topbar .linked-account-row {
        display: flex;
        align-items: center;
        gap: .35rem;
        word-break: break-all;
    }

    #page-topbar .linked-account-muted {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Switch / back button: solid light plate, dark purple label. Overrides
       `.navbar-header .btn` so the text is legible rather than near-white on
       near-white. */
    #page-topbar .linked-account-btn {
        background: #ffffff !important;
        color: #4a1d48 !important;
        border: none !important;
        font-weight: 600;
        width: 100%;
        transition: background 0.2s ease, color 0.2s ease;
    }

    #page-topbar .linked-account-btn:hover,
    #page-topbar .linked-account-btn:focus {
        background: #f3e8ff !important;
        color: #3b1839 !important;
    }

    /* Outside the scheduled hours. Dimmed but still legible — it has to carry a
       reason, so it must not fade into the gradient. */
    #page-topbar .linked-account-btn:disabled {
        background: rgba(255, 255, 255, 0.35) !important;
        color: #3b1839 !important;
        cursor: not-allowed;
        opacity: 1;
    }

    #page-topbar .linked-account-btn i {
        color: inherit !important;
    }

    /* ===============================
       CUSTOM SIDEBAR TOGGLE ICON
    =============================== */
    #sidebar-toggle-icon {
        color: #f3e8ff;
        transition: transform 0.3s ease-in-out;
        display: inline-block;
        vertical-align: middle;
    }

    /* Desktop: flip icon based on collapsed state */
    @media (min-width: 992px) {
        body.vertical-collapsed #sidebar-toggle-icon {
            transform: scaleX(-1);
        }
    }

    /* Mobile: flip icon based on show state */
    @media (max-width: 991.98px) {
        #sidebar-toggle-icon {
            transform: scaleX(-1);
        }

        .vertical-menu.show~#page-topbar #sidebar-toggle-icon {
            transform: scaleX(1);
        }
    }

    #vertical-menu-btn:hover #sidebar-toggle-icon {
        opacity: 0.8;
    }

    /* ===============================
       SIDEBAR BASE
    =============================== */
    .vertical-menu {
        position: fixed !important;
        top: 70px !important;
        bottom: 0 !important;
        width: 280px !important;
        background: #ffffff !important;
        z-index: 1002 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
        transform: translateX(0);
        transition: transform 0.25s ease-in-out !important;
        will-change: transform;
    }

    /* ===============================
       DESKTOP >= 992px
    =============================== */
    @media (min-width: 992px) {
        .main-content {
            margin-left: 280px !important;
            transition: margin-left 0.25s ease-in-out !important;
            transition: margin-right 0.25s ease-in-out !important;
        }

        body.vertical-collapsed .vertical-menu {
            transform: translateX(-280px);
        }

        body.vertical-collapsed .main-content {
            margin-left: 0 !important;
        }
    }

    /* ===============================
       MOBILE < 992px
    =============================== */
    @media (max-width: 991.98px) {
        .vertical-menu {
            transform: translateX(-290px);
        }

        .vertical-menu.show {
            transform: translateX(0);
        }

        .main-content {
            margin-left: 0 !important;
        }

        #page-topbar {
            position: relative !important;
            z-index: 1003 !important;
        }
    }

    /* ===============================
       SIDEBAR OVERLAY
    =============================== */
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 1001 !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease-in-out !important;
    }

    .sidebar-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* Prevent body scroll when sidebar is open on mobile */
    body.sidebar-lock {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    .page-content {
        min-height: calc(100vh - 70px);
        display: flex;
        flex-direction: column;
    }


    /* ===== Sidebar Container ===== */

    .vertical-menu { position: fixed; top: 70px; left: 0; height: calc(100vh - 70px);

        width: 280px;

        background: linear-gradient(180deg, #a0409b 0%, #7c3278 50%, #4a1d48 100%) !important;

        overflow-y: auto;

        scrollbar-width: thin;

        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;

        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.2);

        z-index: 1000;

    }



    .vertical-menu::-webkit-scrollbar {

        width: 5px;

    }



    .vertical-menu::-webkit-scrollbar-track {

        background: transparent;

    }



    .vertical-menu::-webkit-scrollbar-thumb {

        background: rgba(255, 255, 255, 0.2);

        border-radius: 10px;

    }



    .vertical-menu::-webkit-scrollbar-thumb:hover {

        background: rgba(255, 255, 255, 0.3);

    }



    .vertical-menu .h-100 {

        height: auto !important;

        background: transparent !important;

    }



    #sidebar-menu {

        overflow-y: visible;

        background: transparent !important;

        padding: 0 6px;

    }



    .metismenu {

        padding-bottom: 80px;

        background: transparent !important;

    }



    /* ===== THEME OVERRIDE — kills the default deep padding on all menu links ===== */

    #sidebar-menu ul li a {

        padding: 12px 14px !important;

        color: rgba(255, 255, 255, 0.85) !important;

        font-size: 13.5px !important;

        font-weight: 500 !important;

        display: flex !important;

        align-items: center !important;

        position: relative;

        transition: all 0.25s ease !important;

    }



    /* ===== THEME OVERRIDE — kills padding: .4rem 1.5rem .4rem 3.2rem on sub-menu links ===== */

    #sidebar-menu ul li ul.sub-menu li a {

        padding: 10px 8px 10px 10px !important;

        font-size: 13px !important;

        color: rgba(255, 255, 255, 0.85) !important;

    }



    /* ===== User Profile Section ===== */

    .user-profile {

        padding: 28px 20px 24px;

        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        margin-bottom: 8px;

    }



    .user-profile .avatar-md {

        display: block;

        margin: 0 auto;

        width: 72px;

        height: 72px;

        border-radius: 16px;

        object-fit: cover;

        border: 3px solid rgba(255, 255, 255, 0.2);

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    }



    .user-profile .default-avatar {

        display: flex;

        justify-content: center;

        align-items: center;

        width: 72px;

        height: 72px;

        margin: 0 auto;

        border-radius: 16px;

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        color: #fff;

        font-size: 26px;

        font-weight: 600;

        border: 3px solid rgba(255, 255, 255, 0.2);

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    }



    .user-profile h4 {

        color: #fff !important;

        font-size: 15px;

        font-weight: 600;

        margin-bottom: 4px;

        letter-spacing: -0.3px;

    }



    .user-profile p {

        color: rgba(255, 255, 255, 0.6) !important;

        font-size: 12px;

        margin-bottom: 0;

    }



    .user-profile .online-status {

        display: inline-flex;

        align-items: center;

        gap: 6px;

        margin-top: 10px;

        padding: 4px 12px;

        background: rgba(16, 185, 129, 0.15);

        border-radius: 20px;

        font-size: 11px;

        color: #10b981 !important;

    }



    .user-profile .online-status i {

        font-size: 8px;

        color: #10b981 !important;

    }



    /* ===== Menu Title ===== */

    .menu-title {

        color: #fef3c7 !important;

        font-weight: 700;

        font-size: 10px;

        text-transform: uppercase;

        letter-spacing: 1.5px;

        padding: 20px 10px 10px;

        margin-top: 8px;

    }



    /* ===== Top Level Menu Items ===== */

    .metismenu>li {

        margin-bottom: 2px;

    }



    .metismenu li a {

        color: rgba(255, 255, 255, 0.85) !important;

        padding: 12px 14px !important;

        display: flex !important;

        align-items: center !important;

        transition: all 0.25s ease !important;

        border-radius: 10px;

        position: relative;

        overflow: hidden;

        font-weight: 500 !important;

        font-size: 13.5px !important;

        margin: 0;

    }



    .metismenu li a i {

        color: rgba(255, 255, 255, 0.6) !important;

        margin-right: 10px;

        font-size: 17px;

        width: 18px;

        min-width: 18px;

        flex-shrink: 0;

        text-align: center;

        transition: all 0.25s ease;

    }



    .metismenu li a span {

        color: rgba(255, 255, 255, 0.85) !important;

        flex: 1;

    }



    /* ===== Hover ===== */

    .metismenu li a:hover {

        background: rgba(255, 255, 255, 0.15) !important;

        color: #fff !important;

        transform: translateX(3px);

        border-left: 3px solid rgba(254, 243, 199, 0.7);

    }



    .metismenu li a:hover i {

        color: #fef3c7 !important;

        transform: scale(1.1);

    }



    .metismenu li a:hover span {

        color: #fff !important;

    }



    /* ===== Active ===== */

    .metismenu li.mm-active>a,

    .metismenu li a.active {

        background: linear-gradient(135deg, rgba(254, 243, 199, 0.25) 0%, rgba(252, 211, 77, 0.25) 100%) !important;

        color: #fff !important;

        font-weight: 600 !important;

        border-left: 4px solid #fde68a !important;

        box-shadow: 0 4px 12px rgba(253, 230, 138, 0.2);

    }



    .metismenu li.mm-active>a i,

    .metismenu li a.active i {

        color: #fef3c7 !important;

        transform: scale(1.05);

    }



    .metismenu li.mm-active>a span,

    .metismenu li a.active span {

        color: #fff !important;

    }



    /* ===== Sub Menu Container ===== */

    .metismenu ul.sub-menu {

        background: rgba(0, 0, 0, 0.18);

        border-radius: 8px;

        margin: 2px 0 4px 0;

        padding: 4px 0;

        border-left: none;

    }



    .metismenu ul.sub-menu li {

        margin: 0;

    }



    /* ===== Sub Menu Items ===== */

    .metismenu ul.sub-menu li a {

        padding: 10px 8px 10px 10px !important;

        /* override theme default 3.2rem left */

        font-size: 13px !important;

        font-weight: 400 !important;

        border-radius: 6px;

        margin: 1px 3px;

        display: flex !important;

        align-items: center;

        /* allow text to wrap — prevents overflow bleed */

        white-space: normal;

        overflow: visible;

        text-overflow: unset;

        word-break: normal;

        overflow-wrap: anywhere;

        line-height: 1.35;

        transform: none !important;

    }



    .metismenu ul.sub-menu li a i {

        font-size: 14px;

        margin-right: 7px;

        width: 15px;

        min-width: 15px;

        flex-shrink: 0;

        text-align: center;

        align-self: flex-start;

        margin-top: 1px;

        opacity: 0.85;

    }



    .metismenu ul.sub-menu li a:hover {

        background: rgba(255, 255, 255, 0.15) !important;

        color: #fff !important;

        border-left: 3px solid rgba(254, 243, 199, 0.7) !important;

        transform: none !important;

    }



    .metismenu ul.sub-menu li a:hover i {

        opacity: 1;

        color: #fef3c7 !important;

    }



    .metismenu ul.sub-menu li a.active {

        background: rgba(254, 243, 199, 0.2) !important;

        border-left: 3px solid #fde68a !important;

        font-weight: 600 !important;

        color: #fff !important;

    }



    .metismenu ul.sub-menu li a.active i {

        color: #fef3c7 !important;

        opacity: 1;

    }



    /* ===== Nested Sub Menu (3rd level) ===== */

    .metismenu ul.sub-menu ul.sub-menu {

        margin-left: 4px;

        border-left: 2px solid rgba(254, 243, 199, 0.15);

        border-radius: 6px;

    }



    .metismenu ul.sub-menu ul.sub-menu li a {

        padding-left: 8px !important;

        font-size: 12.5px !important;

    }



    /* ===== Arrow Icon ===== */

    .metismenu .has-arrow::after {

        border-color: rgba(255, 255, 255, 0.5) !important;

        border-width: 1.5px !important;

        right: 14px;

        transition: all 0.25s ease;

    }



    .metismenu .mm-active>.has-arrow::after,

    .metismenu li a:hover.has-arrow::after {

        border-color: #fef3c7 !important;

    }



    /* ===== Badge ===== */

    .metismenu li a .badge {

        font-size: 10px;

        /* A circle, not a pill: one digit sits in a 20x20 round badge. The pill
           radius is kept so a wider count ("99+") stretches instead of clipping. */
        min-width: 20px;

        height: 20px;

        padding: 0 5px;

        border-radius: 999px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        line-height: 1;

        font-weight: 600;

        margin-left: auto;

        flex-shrink: 0;

        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);

    }



    /* ===== Smooth Transitions ===== */

    .metismenu li a,

    .metismenu li a i,

    .metismenu li a span,

    .has-arrow::after {

        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    }



    /* ===== Section Divider ===== */

    .menu-divider {

        height: 1px;

        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);

        margin: 16px 8px;

    }



    /* ===== Sidebar Footer ===== */

    .sidebar-footer {

        position: absolute;

        bottom: 0;

        left: 0;

        right: 0;

        padding: 16px 20px;

        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);

        border-top: 1px solid rgba(255, 255, 255, 0.05);

    }



    .sidebar-footer-text {

        color: rgba(255, 255, 255, 0.3);

        font-size: 10px;

        text-align: center;

        letter-spacing: 0.5px;

    }



    /* ===== Notification Center ===== */

    .notification-center {

        margin-top: 8px;

    }



    .notification-toggle {

        background: rgba(255, 255, 255, 0.1) !important;

        border: 1px solid rgba(255, 255, 255, 0.2) !important;

        color: rgba(255, 255, 255, 0.8) !important;

        padding: 10px 16px;

        border-radius: 8px;

        font-size: 13px;

        font-weight: 500;

        transition: all 0.3s ease;

        position: relative;

        display: flex;

        align-items: center;

        justify-content: space-between;

    }



    .notification-toggle:hover {

        background: rgba(255, 255, 255, 0.2) !important;

        border-color: rgba(255, 255, 255, 0.3) !important;

        color: #fff !important;

        transform: translateY(-1px);

    }



    .notification-badge {

        position: absolute;

        top: -8px;

        right: -8px;

        min-width: 20px;

        height: 20px;

        padding: 0 6px;

        font-size: 11px;

        font-weight: 600;

        border-radius: 10px;

        display: flex !important;

        align-items: center;

        justify-content: center;

        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;

        border: 2px solid rgba(255, 255, 255, 0.2);

        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);

        animation: pulse 2s infinite;

    }



    @keyframes pulse {

        0% {

            transform: scale(1);

        }



        50% {

            transform: scale(1.1);

        }



        100% {

            transform: scale(1);

        }

    }



    .notification-dropdown {

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        background: #fff;

        border-radius: 12px;

        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

        z-index: 1050;

        margin-top: 8px;

        overflow: hidden;

        border: 1px solid rgba(255, 255, 255, 0.1);

    }



    .notification-header {

        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

        border-bottom: 1px solid #e2e8f0;

    }



    .notification-header h6 {

        color: #1e293b;

        font-weight: 600;

        font-size: 14px;

    }



    .notification-list {

        max-height: 300px;

        overflow-y: auto;

        background: #fff;

    }



    .notification-item {

        padding: 12px 16px;

        border-bottom: 1px solid #f1f5f9;

        transition: all 0.2s ease;

        cursor: pointer;

    }



    .notification-item:hover {

        background: #f8fafc;

    }



    .notification-item.unread {

        background: #f0f9ff;

        border-left: 3px solid #0ea5e9;

    }



    .notification-item .notification-icon {

        width: 32px;

        height: 32px;

        border-radius: 8px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-right: 12px;

        font-size: 14px;

    }



    .notification-item .notification-icon.info {

        background: #dbeafe;

        color: #0ea5e9;

    }



    .notification-item .notification-icon.success {

        background: #dcfce7;

        color: #16a34a;

    }



    .notification-item .notification-icon.warning {

        background: #fef3c7;

        color: #d97706;

    }



    .notification-item .notification-icon.error {

        background: #fee2e2;

        color: #dc2626;

    }



    .notification-item .notification-content {

        flex: 1;

    }



    .notification-item .notification-title {

        font-weight: 600;

        color: #1e293b;

        font-size: 13px;

        margin-bottom: 2px;

        line-height: 1.3;

    }



    .notification-item .notification-message {

        color: #64748b;

        font-size: 12px;

        line-height: 1.4;

        margin-bottom: 4px;

    }



    .notification-item .notification-time {

        color: #94a3b8;

        font-size: 11px;

    }



    .notification-footer {

        background: #f8fafc;

        border-top: 1px solid #e2e8f0;

    }



    .notification-empty {

        text-align: center;

        padding: 20px;

        color: #64748b;

        font-size: 13px;

    }



    .notification-empty i {

        font-size: 24px;

        margin-bottom: 8px;

        opacity: 0.5;

    }



    /* ===== Notification Button ===== */

    .notification-btn {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        border: none;

        color: white;

        font-weight: 500;

        border-radius: 8px;

        padding: 8px 16px;

        transition: all 0.3s ease;

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        position: relative;

        overflow: hidden;

    }



    .notification-btn:hover {

        background: linear-gradient(135deg, #5a67d8 0%, #667eea 100%);

        transform: translateY(-1px);

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

    }



    .notification-btn:active {

        transform: translateY(0);

    }



    .notification-btn i {

        font-size: 16px;

        transition: transform 0.3s ease;

    }



    .notification-btn:hover i {

        transform: scale(1.1);

    }



    .notification-btn .notification-badge {

        font-size: 10px;

        padding: 2px 6px;

        min-width: 18px;

        height: 18px;

        line-height: 14px;

        border-radius: 50%;

        animation: pulse 2s infinite;

    }



    /* ===== Tour Guide Button ===== */

    .tour-guide-btn {

        background: linear-gradient(135deg, #10b981 0%, #059669 100%);

        border: none;

        color: white;

        font-weight: 500;

        border-radius: 8px;

        padding: 8px 16px;

        transition: all 0.3s ease;

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        position: relative;

        overflow: hidden;

    }



    .tour-guide-btn:hover {

        background: linear-gradient(135deg, #059669 0%, #047857 100%);

        transform: translateY(-1px);

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

    }



    .tour-guide-btn:active {

        transform: translateY(0);

    }



    .tour-guide-btn i {

        font-size: 16px;

        transition: transform 0.3s ease;

    }



    .tour-guide-btn:hover i {

        transform: scale(1.1) rotate(5deg);

    }



    /* ===== Center Notification Panel ===== */

    .center-notification-panel {

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: #fff;

        z-index: 1060;

        display: none;

        overflow: hidden;

    }



    .center-notification-panel .panel-header {

        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

        border-bottom: 1px solid #e2e8f0;

        position: sticky;

        top: 0;

        z-index: 1061;

    }



    .center-notification-panel .panel-body {

        background: #fff;

    }



    .center-notification-panel .panel-activities-list {

        background: #fff;

    }



    .center-notification-panel .avatar-sm {

        width: 32px;

        height: 32px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 6px;

        font-size: 12px;

    }



    .center-notification-panel .activity-item {

        padding: 12px 16px;

        border-bottom: 1px solid #f1f5f9;

        transition: all 0.2s ease;

        cursor: pointer;

    }



    .center-notification-panel .activity-item:hover {

        background: #f8fafc;

    }



    .center-notification-panel .activity-item.bg-light-blue {

        background: #f0f9ff;

        border-left: 3px solid #0ea5e9;

    }



    .center-notification-panel .activity-icon {

        width: 24px;

        height: 24px;

        border-radius: 6px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-right: 12px;

        font-size: 12px;

    }



    .center-notification-panel .activity-content {

        flex: 1;

    }



    .center-notification-panel .activity-title {

        font-weight: 600;

        color: #1e293b;

        font-size: 12px;

        margin-bottom: 2px;

        line-height: 1.3;

    }



    .center-notification-panel .activity-message {

        color: #64748b;

        font-size: 11px;

        line-height: 1.4;

        margin-bottom: 4px;

    }



    .center-notification-panel .activity-time {

        color: #94a3b8;

        font-size: 10px;

    }



    /* ===== Responsive ===== */

    @media (max-width: 991px) {

        .vertical-menu {

            width: 260px;

        }



        #sidebar-menu {

            padding: 0 4px;

        }



        .metismenu li a {

            padding: 11px 12px !important;

            font-size: 13px !important;

        }



        .notification-dropdown {

            width: 300px;

            left: 50%;

            transform: translateX(-50%);

        }

    }


        /* ── Questionnaire Answer Modal ── */
        .swal-questionnaire-popup {
            border-radius: 14px !important;
            padding: 0 !important;
        }

        .swal-questionnaire-popup .swal2-title {
            font-size: 1.15rem !important;
            padding: 20px 24px 12px !important;
            border-bottom: 1px solid #dee2e6;
            text-align: left !important;
        }

        .swal-questionnaire-body {
            padding: 16px 24px !important;
            max-height: 65vh !important;
            overflow-y: auto !important;
            text-align: left !important;
        }

        .swal-questionnaire-popup .swal2-actions {
            padding: 12px 24px 20px !important;
            border-top: 1px solid #dee2e6;
            justify-content: flex-end !important;
            gap: 10px !important;
        }

        .swal-questionnaire-popup .swal2-confirm {
            padding: 8px 22px !important;
            font-size: 0.9rem !important;
        }

        .swal-questionnaire-popup .swal2-cancel {
            padding: 8px 18px !important;
            font-size: 0.9rem !important;
        }

        .page-content {

            min-height: calc(100vh - 70px);

            display: flex;

            flex-direction: column;

        }



        /* ── Workflow Progress Track ── */

        .workflow-progress-track {

            display: flex;

            align-items: flex-start;

            justify-content: flex-start;

            gap: 0;

            padding: 12px 0 6px;

            flex-wrap: nowrap;

            overflow-x: auto;

        }



        .workflow-step {

            display: flex;

            flex-direction: column;

            align-items: center;

            min-width: 90px;

            position: relative;

            z-index: 1;

        }



        .workflow-circle {

            width: 36px;

            height: 36px;

            border-radius: 50%;

            border: 3px solid #dee2e6;

            background-color: #fff;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;

            position: relative;

            z-index: 2;

        }



        .workflow-circle .workflow-num {

            font-weight: 700;

            font-size: 0.82rem;

            color: #6b7280;

        }



        .workflow-step--done .workflow-circle {

            color: #fff;

        }



        .workflow-step--done .workflow-circle i {

            color: #fff;

            font-size: 1rem;

        }



        .workflow-step--active .workflow-circle {

            color: #fff;

            box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);

        }



        .workflow-step--active .workflow-circle .workflow-num {

            color: #fff;

        }



        .workflow-label {

            margin-top: 6px;

            font-size: 0.75rem;

            font-weight: 600;

            color: #6b7280;

            text-align: center;

            max-width: 90px;

            line-height: 1.2;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }



        .workflow-step--active .workflow-label {

            color: #1a1a2e;

            font-weight: 700;

        }



        .workflow-connector {

            width: 50px;

            height: 3px;

            background-color: #dee2e6;

            margin-top: 16px;

            flex-shrink: 0;

            border-radius: 2px;

            transition: background-color 0.3s;

        }



        /* ── Letter render box: override rich-text-editor styles ── */

        #letterViewModalBody .letter-render-box p {

            margin: 0 0 4px 0 !important;

            line-height: 1.6 !important;

            text-align: left !important;

        }



        #letterViewModalBody .letter-render-box p:empty,

        #letterViewModalBody .letter-render-box p:has(> br:only-child) {

            display: none !important;

        }



        #letterViewModalBody .letter-render-box * {

            text-align: left !important;

        }



        #letterViewModalBody .letter-render-box ul,

        #letterViewModalBody .letter-render-box ol {

            margin: 0 0 4px 0 !important;

            padding-left: 20px !important;

        }



        #letterViewModalBody .letter-render-box li {

            margin: 0 0 2px 0 !important;

        }



        .spin {

            animation: spin 1s linear infinite;

        }



        @keyframes spin {

            0% {

                transform: rotate(0deg);

            }



            100% {

                transform: rotate(360deg);

            }

        }



        #gapResponseFile {

            border: 2px dashed #dee2e6;

            padding: 12px;

            background-color: #f8f9fa;

            transition: all 0.3s ease;

        }



        #gapResponseFile:hover {

            border-color: #6c757d;

            background-color: #e9ecef;

        }

        /* ── Personal Files Tab Styling ── */
        .personal-files-accordion .accordion-button {
            font-weight: 500;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }

        .personal-files-accordion .accordion-button:not(.collapsed) {
            background-color: #e7f3ff;
            color: #0d6efd;
        }

        .personal-files-accordion .accordion-button:hover {
            background-color: #e9ecef;
        }

        .personal-files-accordion .accordion-button:not(.collapsed):hover {
            background-color: #d1ecf1;
        }

        .file-info-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
        }

        .btn-group-sm .btn {
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
        }

        .file-preview-modal .swal2-html-container {
            padding: 0 !important;
        }

        .file-preview-modal img {
            border-radius: 0.5rem;
        }

        .copy-path-btn.copied {
            animation: pulse 0.5s ease-in-out;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }
    
' +

                            'body { font-family: Arial, sans-serif; padding: 40px 60px; color: #222; font-size: 14px; }' +

                            'h1  { font-size: 20px; margin-bottom: 20px; color: #333; }' +

                            'p   { margin: 0 0 4px 0 !important; line-height: 1.6 !important; text-align: left !important; }' +

                            'p:empty { display: none !important; }' +

                            '*   { text-align: left !important; }' +

                            'ul, ol { margin: 0 0 4px 0; padding-left: 20px; }' +

                            'li  { margin: 0 0 2px 0; }' +

                            'strong, b { font-weight: bold; }' +

                            'em, i { font-style: italic; }' +

                            '@media print { body { padding: 20px; } }' +

                            '

    .qp-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
    }
    .qp-count { font-size: .85rem; font-weight: 600; color: #4a235a; white-space: nowrap; }
    .qp-bar { flex: 1 1 160px; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
    .qp-bar > span {
        display: block; height: 100%; width: 0;
        background: linear-gradient(90deg, #a0409b, #5b2c6f);
        transition: width .25s ease;
    }
    .qp-foot {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e9ecef;
    }
    .qp-foot .qp-right { display: flex; gap: 8px; align-items: center; margin-left: auto; }
    .qp-page[hidden] { display: none !important; }
    /* The builder renders a break as a visible divider; when answering it is gone,
       having done its job of splitting the list. */
    .qp-break { display: none; }