@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');


/*--font face end--*/
body {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: #242424;
    background: #F8F7F4
}



/* ══════════════════════════════════════════════════
   SETTINGS PAGE
══════════════════════════════════════════════════ */
.settings-page {
    max-width: 100%;
    margin: 0;
    padding: 24px 16px;
}

.settings-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.settings-subtitle {
    font-size: 0.85rem;
}

.settings-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.settings-card-header {
    padding: 18px 24px 0 24px;
}

.settings-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.settings-section-sub {
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.settings-card-body {
    padding: 16px 24px 24px 24px;
}

.settings-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.settings-input {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    padding: 9px 12px;
    color: #1a1a1a;
    background: #fff;
}

.settings-logo-upload.is-invalid-dropzone {
    border-color: #dc2626 !important
}

.settings-input--sm {
    width: 100%;
    height: auto;
    font-size: 0.85rem;
    padding: 7px 12px;
    border-radius: 6px
}

    .settings-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(161, 100, 156, .12);
        outline: none;
    }

    .settings-input[readonly] {
        background: #f3f4f6;
        color: #6b7280;
    }

.settings-field-error {
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 4px;
}

.settings-input.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .1) !important;
}

.btn-settings-save {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 22px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background .18s;
}

.btn.btn-settings-save {
    border-radius: 6px !important;
    padding: 9px 22px !important;
    font-size: 0.88rem !important;
    min-width: unset !important;
    line-height: 1.5 !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-settings-save:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* Logo upload */
.settings-logo-upload {
    border: 1.5px dashed #d1d5db;
    border-radius: 8px;
    min-height: 110px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    box-sizing: border-box;
}

    .settings-logo-upload:hover,
    .settings-logo-upload.dragover {
        border-color: var(--primary);
        background: rgba(161, 100, 156, 0.04);
    }

.branding-locked {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

/* Registered provider row — matches Figma full-width bordered row */
.branding-provider-row {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    margin-bottom: 16px;
}

/* Figma-style checkbox for the registered provider row */
.branding-provider-row .branding-check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1.5px solid #9ca3af;
    border-radius: 4px;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: border-color .15s, background-color .15s;
}

.branding-provider-row .branding-check:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.branding-provider-row .branding-check:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.branding-provider-row .branding-check:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.branding-provider-row .branding-check-label {
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
}

.branding-logo-preview {
    max-height: 48px;
    max-width: 120px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    object-fit: contain;
}

.btn-remove-logo {
    background: none;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}

    .btn-remove-logo:hover {
        background-color: #fef2f2;
    }

    .btn-remove-logo:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.branding-avatar-stack {
    display: flex;
    align-items: center;
    gap: -8px;
}

.branding-avatar-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.branding-avatar-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-right: -8px;
}

/* Brand colour preview button */
.btn-preview-colour {
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 9px 14px;
    transition: background .2s;
}

.btn.btn-preview-colour {
    border-radius: 6px !important;
    padding: 9px 14px !important;
    font-size: 0.88rem !important;
    min-width: unset !important;
    line-height: 1.5 !important;
    border-color: transparent !important;
}

.btn-preview-colour:hover {
    opacity: .85;
}

/* Toggle rows */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}

.settings-toggle-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: #1a1a1a;
}

.settings-toggle-sub {
    font-size: 0.78rem;
}

.settings-switch {
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.form-check-input.settings-switch:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
/* ══════════════════════════════════════════════════
   END SETTINGS PAGE
══════════════════════════════════════════════════ */



:root {
    --primarycolor: #A1649C;
    --themedark: #3F3C3C;
    --secondrycolor: #D3AF37;
    --primary: #A1649C;
    --primary-dark: #8b4d87;
    --primary-light: rgba(161, 100, 156, 0.12);
    --text-dark: #1A2E4A;
    --text-danger: #ef4444
}

.dataTables_length select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 10px;
}

.bookingcard .row {
    display: flex;
}

.bookingcard .col-md-5,
.bookingcard .col-md-7 {
    display: flex;
}

.bookingcard .dashbox {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.btn-outline-secondary {
    background: #fff;
}

.btn.btn-outline-secondary:hover {
    background: var(--primarycolor);
    border-color: var(--primarycolor);
}

.logo-icon {
    display: none;
}

.menu-collapse .sildebarlogo .logo-full {
    display: none;
}

.menu-collapse .sildebarlogo .logo-icon {
    display: block;
}

input.icon-holder {
    padding-left: 44px;
}

input.icon-holder-right {
    padding-right: 40px;
}

.form-control.icon-holder-right + .input-icon-right {
    position: absolute;
    left: 20px;
    top: 10px;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 11px;
}

.form-control-lg + .input-icon,
.form-control-lg ~ .password-eye-icon {
    top: 14px;
}

.form-check {
    padding-left: 40px;
    min-height: 30px;
}

    .form-check.check-coustom .form-check-label {
        padding-top: 4px;
        font-size: 15px;
        color: #303030;
        font-weight: 400;
    }

    .form-check.check-coustom .form-check-input {
        margin-left: -30px;
    }

        .form-check.check-coustom .form-check-input[type="checkbox"] {
            width: 22px;
            height: 22px;
            border-radius: 5px;
            border-color: #D3AF37;
        }

.form-check-input[type="radio"] {
    width: 22px;
    height: 22px;
}

.form-check.check-coustom .form-check-input:checked {
    background-color: #D3AF37;
    border-color: #D3AF37;
}

.password-eye-icon {
    position: absolute;
    right: 13px;
    top: 13px;
}

.form-control, .form-select {
    border-color: hsl(199.09deg 86.84% 14.9% / 20%);
    font-size: 14px;
    height: 50px;
    border-radius: 33px;
    padding: 10px 15px;
    font-weight: 500;
}


    .form-control::placeholder {
        color: hsl(0deg 0% 6.67% / 20%);
    }

/* Date inputs: style the placeholder text (dd-mm-yyyy) in the same gray as ::placeholder */
input[type="date"].pf-control.date-empty:not(:focus) {
    color: hsl(0deg 0% 6.67% / 20%);
}

    input[type="date"].pf-control.date-empty:not(:focus)::-webkit-datetime-edit {
        color: hsl(0deg 0% 6.67% / 20%);
    }

.form-control.form-control-lg {
    height: 50px;
}

.page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.btn {
    font-size: 15px;
    line-height: 1.3;
    border-radius: 8px;
    padding: 10px 15px;
    font-weight: 500;
    min-width: 132px;
}

    .btn.btn-secondry {
        border: 1px solid #DADADA;
        background: #fff;
    }


.btn-primary {
    background: var(--primarycolor);
    border-color: var(--primarycolor);
}

.btn:hover {
    color: #fff;
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
}

.btn-light {
    background: #F6F2F5;
    border-color: #F6F2F5;
    color: #B1B1B1;
}

.btn-outline-primary {
    border-color: var(--primarycolor);
    color: var(--primarycolor);
}





.text-link {
    color: var(--secondrycolor);
    font-size: 15px;
    font-weight: 600;
}

.form-label {
    color: #303030;
    font-size: 14px;
    font-weight: 600;
}


.tp-search {
    position: relative;
    margin: 0 0 0 20px;
    max-width: 330px;
    width: 100%;
}

    .tp-search input {
        border: solid 1px #D4D4D4;
        border-radius: 10px;
        padding: 10px 10px 10px 40px;
        width: 100%;
    }

    .tp-search .searchicon {
        position: absolute;
        left: 13px;
        top: 10px;
    }

/*--sidebar--*/
.closemenu-btn {
    display: none;
}

.sidebar {
    z-index: 999;
    overflow: auto;
    position: fixed;
    width: 100%;
    max-width: 295px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    padding: 30px 0px;
    color: #fff;
}

    .sidebar .user-name {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100px;
    }

.menubar-holder {
    display: flex;
    flex-flow: column;
    min-height: calc(100vh - 321px);
    overflow: auto;
    justify-content: space-between;
}

.menubar {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .menubar li {
        margin-bottom: 10px;
    }

        .menubar li > a {
            display: flex;
            align-items: center;
            border-radius: 33px;
            color: #292D32;
            font-size: 16px;
            text-decoration: none;
            height: 54px;
            font-weight: 400;
            position: relative;
            z-index: 10;
            background: #fff;
            padding: 13px 24px;
        }

            .menubar li > a img {
                margin-right: 10px;
            }

        .menubar li a.active img,
        .menubar li a:hover img {
            filter: brightness(0) invert(1) !important;
        }

        .menubar li a.active img,
        .menubar li a:hover img {
            filter: brightness(0) invert(1) !important;
        }

        .menubar li > a:hover,
        .menubar li a.active {
            color: #fff;
            background: var(--primarycolor);
        }

        .menubar li.active a {
            background: var(--primarycolor);
            color: #fff;
        }

        .menubar li > a.has-submenu::after {
            content: "";
            position: absolute;
            right: 10px;
            top: 20px;
            width: 12px;
            height: 12px;
            background: url(../images/arrow-right-menu.svg) 0 0 no-repeat;
            transition: all .2s ease;
        }

        .menubar li > a.has-submenu.active::after {
            transform: rotate(90deg);
        }

.has-submenu.active + .submenu {
    display: block;
}

.submenu {
    list-style: none;
    padding: 15px;
    background: #3C3C3C;
    position: relative;
    z-index: 8;
    top: -5px;
    border-radius: 0 0 8px 8px;
    display: none;
}



    .submenu li a {
        padding: 5px 5px 5px 15px;
        border-radius: 0;
        height: auto;
        font-size: 14px;
        position: relative;
    }




.sildebarlogo {
    margin: 0px 0 20px;
}


/*--sidebar--*/


.content-body {
    padding: 30px 30px 20px 80px;
}

.footer {
    text-align: center;
    border-top: solid 1px #E7E7E7;
    padding: 10px 0;
    font-size: 12px;
}

.dash-item {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    font-size: 28px;
    align-items: center;
    margin-bottom: 20px;
}

    .dash-item a {
        display: flex;
        width: 100%;
        text-decoration: none;
        align-items: center;
    }

        .dash-item a p {
            color: #0A0A0A;
        }

    .dash-item .dash-item-icon {
        border-radius: 8px;
        background: #FFEEEE;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 75px;
        height: 75px;
        margin-right: 10px;
    }

    .dash-item h6 {
        font-size: 16px;
        color: #000;
        margin: 0;
    }

.innerbody {
    padding-left: 295px;
    background: #F3F3F3;
    transition: all .3s ease-in;
}

.user-set-menu .dropdown-toggle {
    display: flex;
    align-items: center;
    text-decoration: none;
}

    .user-set-menu .dropdown-toggle small {
        font-size: 10px;
        color: #4D4D4D;
    }

    .user-set-menu .dropdown-toggle h6 {
        font-size: 14px;
        margin: 0;
    }

    .user-set-menu .dropdown-toggle small {
        font-size: 10px;
    }

.user-set-menu .dropdown-menu {
    font-size: 15px;
}

.user-set-menu a {
    color: #000;
}

.page-content-wrapper {
    min-height: calc(100vh - 140px);
    padding: 15px 15px 30px;
}

.white-body-card {
    background: #fff;
    padding: 20px;
    min-height: calc(100vh - 200px);
    margin-bottom: 20px;
    border-radius: 10px;
}

.table > thead {
    vertical-align: middle;
}

.table thead th {
    background: #EDEDED;
    color: #32322F;
    font-weight: 400 !important;
    font-size: 15px;
    padding: 8px 0px;
    border-bottom: 1px dashed #9C927A;
}

/* Right-align currency/amount columns in participant tables */
.participant-table th:nth-child(5),
.participant-table th:nth-child(6),
.participant-table th:nth-child(7),
.participant-table td:nth-child(5),
.participant-table td:nth-child(6),
.participant-table td:nth-child(7) {
    text-align: right;
}

.td-amount {
    display: inline-block;
    min-width: 64px; /* give prices consistent alignment */
    text-align: right;
}

.table thead th:first-child,
.table tbody td:first-child {
    padding: 10px 14px;
}

.table {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}

.table-result {
    display: flex;
    align-items: center;
}

.pagination .page-link {
    color: #293854;
}

.pagination .page-item.active .page-link {
    background: #D3AF37;
    border-color: #D3AF37;
    color: #fff;
}

.pagination .page-link img {
    margin-top: -3px;
}

.header {
    background: var(--primarycolor);
    padding: 15px 30px;
    display: flex;
    align-items: center;
    /* box-shadow: 0 4px 4px rgba(0,0,0,.2); */
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.headerserarch {
    position: relative;
    width: 260px;
}

    .headerserarch .inputicon {
        position: absolute;
        top: 8px;
        left: 10px;
    }

    .headerserarch .inputicon-rt {
        position: absolute;
        top: 6px;
        right: 14px;
        cursor: pointer;
    }

    .headerserarch .form-control {
        padding-left: 35px;
        padding-right: 35px;
    }

.filterby {
    display: flex;
    font-size: 16px;
    align-items: center;
}

    .filterby label {
        white-space: nowrap;
        margin-right: 10px;
    }

.text-light {
    color: #7B7B7B !important;
}

.user-post-col {
    border: solid 1px #B4B4B4;
    border-radius: 12px;
}

.post-date-text {
    color: rgba(18, 18, 18, .7);
    font-size: 11px;
    margin: 0 0 5px;
}

.user-post-short-cnt {
    padding: 15px 18px 18px;
}

    .user-post-short-cnt h6 {
        font-size: 15px;
    }

.comment-view {
    color: rgba(18, 18, 18, .7);
}

.post-vedio-col {
    position: relative;
}

    .post-vedio-col img,
    .post-vedio-col video {
        width: 100%;
        border-radius: 12px;
    }

    .post-vedio-col::after {
        background: url(../images/video-palybtn.svg) center center no-repeat rgba(0, 0, 0, .4);
        content: "";
        height: 100%;
        position: absolute;
        left: 0;
        z-index: 1;
        width: 100%;
        border-radius: 12px;
    }

.user-acnt-info-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 20px;
}

.user-srt-info-pic {
    width: 84px;
    height: 84px;
    margin-right: 15px;
}

.user-srt-info {
    display: flex;
    align-items: center;
    color: #767676;
}

    .user-srt-info h6 {
        font-size: 20px;
        color: #141413;
    }

.user-token-balance {
    border: solid 1px #E9E1F1;
    padding: 10px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    color: #767676;
    font-size: 14px;
}

    .user-token-balance h6 {
        font-size: 15px;
        color: #000000;
    }

.ttl-token {
    font-size: 20px;
    color: #E73333;
    margin-left: 30px;
}

.comment-post-det {
    border: solid 1px #B4B4B4;
    border-radius: 12px;
    margin: 0 0 20px;
}

h4 a {
    color: #0A0A0A;
    text-decoration: none;
}



/*--chat--*/
.chat-container {
    background: #fff;
    min-height: calc(100vh - 230px);
    margin-bottom: 20px;
    border-radius: 8px;
    display: flex;
}

.chat-userlist-col {
    border-right: solid 1px #D9D9D9;
    flex: 0 0 380px;
    width: 380px;
}

.chat-search {
    padding: 20px 25px;
}

    .chat-search input {
        padding-left: 35px;
        border-color: #B4B4B4;
    }

    .chat-search .inputicon {
        position: absolute;
        left: 10px;
        top: 8px;
    }

.chat-userlist-col > h6 {
    font-size: 15px;
    color: #616161;
    padding: 0 25px;
}

.chat-user-list {
    list-style: none;
    padding: 0;
    overflow: auto;
    max-height: 550px;
    scrollbar-width: thin;
}

    .chat-user-list::-webkit-scrollbar {
        width: 5px;
    }

    .chat-user-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-user-list::-webkit-scrollbar-thumb {
        background-color: rgba(155, 155, 155, 0.5);
        border-radius: 20px;
        border: transparent;
    }


    .chat-user-list li {
        padding: 12px 25px;
        display: flex;
        align-items: center;
    }

        .chat-user-list li:hover,
        .chat-user-list li.active {
            background: #FFF4F4;
        }

.chat-user-pic {
    margin-right: 13px;
    position: relative;
}

    .chat-user-pic img {
        width: 53px;
        height: 53px;
        border-radius: 100%;
    }

    .chat-user-pic.live-user::after {
        position: absolute;
        width: 11px;
        height: 11px;
        border: solid 1px #fff;
        background: #7AA86F;
        right: 1px;
        top: 2px;
        content: "";
        border-radius: 100%;
    }

.chat-user-shrt-info {
    flex: 1;
}

    .chat-user-shrt-info h6 {
        font-size: 18px;
        padding: 0;
        color: #000000;
        margin: 0 0 5px;
    }

.chat-last-msg-txt {
    margin: 0;
    font-size: 15px;
    color: rgba(18, 18, 18, .7);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.chat-rec-info {
    text-align: right;
    font-size: 14px;
    color: #000;
}

.chat-unread-cnt {
    display: inline-block;
    width: 24px;
    background: #E73333;
    height: 24px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-radius: 100%;
    line-height: 24px;
}

.chat-rec-time {
    margin: 0 0 5px;
}

.chatting-col {
    flex: 1;
    display: flex;
    flex-flow: column;
}

.chating-msg-detail {
    flex: 1;
}

.chatting-msg-cont {
    height: 500px;
    overflow: auto;
    display: flex;
    flex-flow: column;
    justify-content: end;
}

.chatting-msg-scroll {
    max-height: 470px;
    overflow: auto;
    scrollbar-width: thin;
    padding: 30px 30px 0;
}

.chatting-msg-form {
    margin: auto 30px 30px;
    border: solid 1px #858585;
    padding: 10px;
    display: flex;
    border-radius: 8px;
}

    .chatting-msg-form button {
        background: transparent;
        border: 0;
    }

    .chatting-msg-form textarea {
        flex: 1;
        border: 0;
        height: 50px;
        resize: none;
    }

        .chatting-msg-form textarea:focus-visible {
            outline: none;
        }

.chatting-header {
    border-bottom: solid 1px #D9D9D9;
    padding: 20px 30px;
    display: flex;
    align-items: center;
}

    .chatting-header h6 {
        font-size: 18px;
    }

.chat-user-status {
    color: #A7A7A7;
}

    .chat-user-status.chat-user-live {
        color: #588C4B;
    }

        .chat-user-status.chat-user-live .status-point {
            background: #588C4B;
        }

.status-point {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: inline-block;
    background: #D3D3D3;
    position: relative;
    top: 5px;
}

.chatting-hdr-pic {
    width: 53px;
    height: 53px;
    border-radius: 100%;
}

.chating-msg-user-pic {
    width: 45px;
    height: 45px;
    border-radius: 100%;
}

.chating-msg-sender {
    width: 75%;
    display: flex;
    margin: 0 0 30px;
}

.chating-msg-sender-bg {
    background: #FFF4F4;
    border-radius: 0 13px 13px 13px;
    padding: 10px 15px;
    margin-bottom: 5px;
    min-height: 80px;
    color: #363E48;
    font-size: 16px;
}

.chatting-msg-time {
    font-size: 14px;
    color: #8F8F8F;
    margin: 0 0 0;
    padding-left: 15px;
}

.chating-msg-owner {
    width: 75%;
    display: flex;
    margin: 0 0 30px auto;
    align-self: flex-end;
}

.chating-msg-owner-bg {
    background: #F4F4F4;
    border-radius: 13px 13px 0 13px;
    padding: 10px 15px;
    margin-bottom: 5px;
    min-height: 80px;
    color: #363E48;
    font-size: 16px;
}

.chating-msg-owner .chatting-msg-time {
    text-align: right;
    padding-right: 15px;
}

/*--chat--*/
.form-grey-bg {
    border-radius: 8px;
    background: #FBFAFA;
    padding: 20px 30px;
}

.form-step-process {
    text-align: center;
    margin: 20px 0;
    padding: 0;
}

    .form-step-process li {
        background: #56C1C8;
        color: #fff;
        border-radius: 8px;
        padding: 10px 20px;
        display: inline-block;
        margin-right: 10px;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
    }

        .form-step-process li.disabled {
            opacity: .6;
        }

    .form-step-process .step-count {
        background: #fff;
        width: 26px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        color: #56C1C8;
        border-radius: 100%;
        margin-right: 5px;
        display: inline-block;
    }

.eye-pass {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.position-relative.passwordinput input {
    padding-right: 50px;
}

.modal-header {
    border: 0;
    padding: 10px 20px;
}

.modal-content {
    border-radius: 16px;
}

.modal-body {
    padding: 15px 20px 20px;
}

.modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    background: none;
    border: 0;
}

.min-btn-width-100 {
    min-width: 100px;
}

.input-gp {
    border: solid 1px #D4D4D4;
    border-radius: 6px;
    padding: 2px;
    display: flex;
}

    .input-gp input {
        flex: 1;
        border: 0px;
        padding: 0 10px;
    }

        .input-gp input:focus-visible {
            outline: none;
        }

    .input-gp .btn-sm {
        min-width: 90px;
        border-radius: 4px;
    }

/*--support--*/
.form-container-bg {
    background: #FBFAFA;
    padding: 20px;
    border-radius: 8px;
}

.custom-add-user-select {
    position: relative;
}

    .custom-add-user-select select.form-select {
        padding-right: 79px;
    }

    .custom-add-user-select .custom-symbol {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        pointer-events: none;
    }

        .custom-add-user-select .custom-symbol span {
            background: #C862A7;
            border-radius: 0 6px 6px 0;
            padding: 9px 10px;
            display: inline-block;
            height: 40px;
            margin-left: 10px;
        }

.form-card {
    border-radius: 6px;
    border: solid 1px #D4D4D4;
    background: #fff;
}

.form-card-body {
    padding: 10px 15px;
}

.form-card-header {
    font-size: 14px;
    color: #141413;
    font-weight: 600;
    border-bottom: solid 1px #D4D4D4;
    padding: 8px 15px;
}

.form-card-collapse .form-card-header {
    padding: 0;
    border-bottom: 0;
}

    .form-card-collapse .form-card-header button {
        background: none;
        border: 0;
        padding: 8px 15px;
        width: 100%;
        text-align: left;
        position: relative;
    }

        .form-card-collapse .form-card-header button::after {
            content: "";
            position: absolute;
            right: 10px;
            top: 7px;
            background: url(../images/downarrow.png) 0 0 no-repeat;
            height: 22px;
            width: 22px;
            transition: all .4s ease;
        }

        .form-card-collapse .form-card-header button:not(.collapsed)::after {
            transform: rotate(-180deg);
        }

        .form-card-collapse .form-card-header button:not(.collapsed) {
            border-bottom: solid 1px #d4d4d4;
        }

.fs-11 {
    font-size: 11px;
}

/*--support--*/


/*--03-04-24 profile details--*/
.profile-short-info {
    border: solid 1px #C862A7;
    padding: 15px 20px;
    display: flex;
    background-color: #FFF9FD;
    /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom, #fff, #FFF9FD);
    border-radius: 8px;
    font-size: 14px;
    position: relative;
}

.pro-det-pic {
    width: 86px;
    height: 86px;
}

.profile-short-info h6 {
    font-size: 18px;
    margin: 0 0 5px;
}

.profile-short-info .mail-link {
    text-decoration: none;
    color: #141413;
}

.profile-short-info .pro-edit-link {
    position: absolute;
    right: 10px;
    top: 10px;
}




.text-link-theme-small {
    font-size: 12px;
    color: #56C1C8;
    text-decoration: underline;
}

.contact-data {
    background: #F2EEF5;
    border-radius: 10px;
    padding: 10px;
    font-size: 12px;
    color: #3E3E3E;
    display: flex;
    align-items: center;
}

    .contact-data h6 {
        font-size: 14px;
        margin: 0 0 5px;
    }

.badge {
    padding: 6px 11px;
    border-radius: 30px;
    font-weight: normal;
    font-size: 11px;
}

.text-bg-primary {
    background-color: #56C1C8 !important;
}

.min-h-225 {
    min-height: 225px;
}

.conditon-list {
    list-style: none;
    padding: 0;
    height: 200px;
    overflow-y: scroll;
    scrollbar-width: thin;
}

    .conditon-list li {
        border-bottom: solid 1px #F2EEF5;
        padding: 8px 0;
        font-size: 14px;
        color: #272727;
    }

.ser-list-icon {
    list-style: none;
    padding: 0;
    font-size: 12px;
}

    .ser-list-icon li {
        display: flex;
        align-items: center;
        border-bottom: solid 1px #eee;
        padding: 12px 0;
    }

        .ser-list-icon li:last-child {
            border: 0;
        }

        .ser-list-icon li h6 {
            margin: 0 0 3px;
            font-size: 14px;
        }

.ser-list-content {
    margin-left: 10px;
    flex: 1;
}

.form-control::file-selector-button {
    padding: .575rem .75rem;
}

/*--03-04-24 profile details--*/

/*--goal css--*/
.inprogresstext {
    color: #F26905;
}



.meter-info {
    box-sizing: border-box;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background-color: var(--accent-color);
     padding: 30px 20px; */
}

#meter--ranger {
    width: 100%;
}

.small {
    font-weight: 300;
    font-size: 12px;
}

/*--goal css--*/

/*--availability list--*/

.availability-list {
    list-style: none;
    padding: 0;
    height: 200px;
    overflow-y: scroll;
    scrollbar-width: thin;
    font-weight: 300;
    font-size: 14px;
}

    .availability-list li {
        border-bottom: solid 1px #F2EEF5;
        padding: 8px 0;
        font-size: 14px;
        color: #272727;
        display: flex;
        align-items: center;
    }

        .availability-list li h6 {
            font-size: 14px;
            margin: 0;
        }

.na-text {
    color: var(--primarycolor);
}

.avai-table-scroll {
    overflow: auto;
    max-height: 400px;
    scrollbar-width: thin;
}

.input-gp-btn {
    background: #56C1C8;
    padding: 5px 10px;
    border-radius: 6px 0 0 6px;
    line-height: 1;
    border: 0;
}

    .input-gp-btn:last-of-type {
        border-radius: 0px 6px 6px 0;
    }

.date-input-min-width {
    min-width: 150px;
}

.heading-bdr-btm {
    border-bottom: solid 1px #666;
    padding-bottom: 5px;
    color: #000;
}

.alert-primary {
    background-color: #DDEDF9;
    border-color: #B6D7EF;
    color: #467493;
    font-weight: 300;
}

.alert-danger {
    background-color: #FCE5E5;
    border-color: #EFC2C2;
    color: #DD5151;
    font-weight: 300;
}

/*21-05-2024-----*/

.timeline-container {
    position: relative;
    margin: auto;
    width: 90%;
}

    .timeline-container ul.tl {
        margin: 20px 0;
        padding: 0;
    }

        .timeline-container ul.tl li {
            list-style: none;
            margin: auto;
            min-height: 50px;
            border-left: 2px dashed #C8C8C8;
            padding: 0 0 50px 50px;
            position: relative;
            display: flex;
            flex-direction: row;
        }

            .timeline-container ul.tl li:last-child {
                border-left: 0;
            }

            .timeline-container ul.tl li .item-icon {
                position: absolute;
                left: -22px;
                top: -5px;
                content: " ";
                border-radius: 500%;
                background: #D87EBD;
                height: 42px;
                width: 42px;
                text-align: center;
                line-height: 42px;
            }

.itemTextBlog {
    background: #F5F5F5;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

    .itemTextBlog h4 {
        font-size: 14px;
        color: #3E3E3E;
        font-weight: 500;
        margin: 0;
        padding: 5px 0;
    }

    .itemTextBlog p {
        font-size: 14px;
        color: #393939;
        font-weight: 300;
        margin: 0;
        padding: 5px 0;
    }

        .itemTextBlog p span {
            font-size: 12px;
            color: #329197;
            font-weight: 300;
            margin: 0;
            padding: 5px 0;
        }

.newsRightIcon a img {
    margin-bottom: 3px;
}

.itemTextBlog::after {
    content: " ";
    position: absolute;
    left: 38px;
    top: 15px;
    border-top: 15px solid transparent;
    border-right: 15px solid #F5F5F5;
    border-left: none;
    border-bottom: 15px solid transparent;
}

.newsRightIcon {
    width: 90px;
    text-align: right;
}

.newsLeftBlog {
    width: 98%;
}

.basicDetailsBlog h4 {
    font-size: 22px;
    color: #000000;
    font-weight: 500;
    margin: 0;
    padding: 5px 0;
}

.basicDetailsBlog p {
    font-size: 14px;
    color: #393939;
    font-weight: 300;
    margin: 0;
    padding: 5px 0;
}

.basicDetailsBlog .bDetails {
    font-size: 12px;
    color: #363636;
    font-weight: 300;
    margin: 0;
    padding: 5px 0;
}

.fileBlog {
    background: #fff !important;
    border: 1px solid #D4D4D4 !important;
}


.uploadPostButton {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #56C1C8;
    height: 85px;
    width: 130px;
}

.postfiles .inputFile {
    display: none;
}

.acoHeadBg {
    background: #000;
}

    .acoHeadBg h5 {
        color: #fff;
    }

.acoViewBlog {
    border: 1px solid #eee;
}


.grayBlogBg table tr {
    background: #F8F8F8;
    border: 1px solid #DEE5EF;
}

    .grayBlogBg table tr td {
        padding: 10px;
    }

.CategoriesBlog {
    background: #fff;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
}

/*--roster css--*/
.btn.btn-white {
    background: #fff;
    padding: 11px 15px;
}

    .btn.btn-white:hover,
    .btn.btn-white.active {
        background: #56C1C8;
        color: #fff;
    }

.roster-header {
    display: flex;
    align-items: center;
}

.roster-title {
    margin: auto;
    text-align: center;
}

    .roster-title .unassign-lable {
        font-size: 12px;
        padding: 5px 10px;
        background: #F8EBF4;
        border-radius: 30px;
        display: inline-block;
    }

    .roster-title .assign-lable {
        font-size: 12px;
        padding: 5px 10px;
        background: #C5EEF0;
        border-radius: 30px;
        display: inline-block;
    }

.table.calender-table {
    font-weight: normal;
}

    .table.calender-table thead th {
        background: #fff;
        color: #000;
    }

.calender-table tr > th:first-child,
.calender-table tr > td:first-child {
    position: sticky;
    left: 0;
    width: 300px;
}

.roster-hr-ttl-tag {
    background: #D9F5F6;
    border-radius: 30px;
    font-size: 11px;
    float: right;
    padding: 5px 10px;
    display: inline-block;
}


/*--incident css--*/
.active-label {
    background: #F1AD46;
    color: #fff;
    border-radius: 30px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
}

/*--04-06--*/
.case-note-crete-info {
    background: #f2f2f2;
}

    .case-note-crete-info label {
        font-weight: 400;
        margin-bottom: 5px;
    }

.case-note-crete-info {
    font-weight: 300;
}

.badge-tag {
    border-radius: 6px;
    background: #fff;
    padding: 5px 10px;
    display: inline-block;
    color: #000;
    border: solid 1px #D4D4D4;
}

.text-link-secondary {
    color: #3FA9AF;
}

.alert-info {
    background-color: #EDFEFF;
    border-color: #95E5EA;
    color: #369197;
}

.table thead.table-light th {
    background: #f9f9f9;
    color: #000;
}

.mini-btn-secondary {
    border-radius: 4px;
    padding: 5px 10px;
    display: inline-block;
    background: #D87EBD;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    line-height: 20px;
    white-space: nowrap;
}

btn-secondry {
    border: 1px solid #DADADA;
    background: #fff;
}

.unlink-checkbox {
    min-height: inherit;
    margin: 0px;
}

.info-card-box {
    background: #f2f2f2;
    font-weight: 300;
}

    .info-card-box label {
        font-weight: 400;
        margin-bottom: 5px;
    }



/* .drop-img-list{
    list-style: none;
    padding: 0;
    margin: 0;
    font-size:11px;
}
.drop-img-list h6{
font-size: 14px;
}
.drop-img-list-img{
    width: 50px;
    height: 50px;
}
.drop-img-list li{
    display: flex;
    margin-bottom: 10px;
}
.drop-img-list .current-status{
    color:#56C1C8;
} */

/*--service delivery csss--*/
.ser-delivery-list {
    list-style: none;
    padding: 0;
    font-size: 12px;
}

    .ser-delivery-list li {
        display: flex;
        align-items: center;
        border-bottom: solid 1px #eee;
        padding: 12px 0;
    }

        .ser-delivery-list li:last-child {
            border: 0;
        }

        .ser-delivery-list li h6 {
            margin: 0 0 3px;
            font-size: 14px;
        }

.ser-del-user-pic {
    width: 35px;
    height: 35px;
}

.input-gp-btn-minus, .input-gp-btn-add {
    background: var(--primarycolor);
    color: #fff;
    min-width: 36px;
    font-size: 16px;
    border: 0;
}

.input-gp-btn-minus {
    border-radius: 6px 0 0 6px;
}

.input-gp-btn-add {
    border-radius: 0 6px 6px 0;
}

.text-process-primary {
    background: #f8ac59;
    color: #fff;
}
/*--service delivery csss--*/

/*--data--*/
.data-userlist {
    list-style: none;
}

    .data-userlist li {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
        padding: 15px 0;
        border-bottom: solid 1px #DDD;
        font-weight: 300;
    }

        .data-userlist li a {
            text-decoration: none;
            color: #666;
        }

.data-userlist-img img {
    width: 45px;
    height: 45px;
    border-radius: 100%;
}

.data-userlist-cont {
    margin-left: 10px;
}

    .data-userlist-cont h6 {
        font-size: 16px;
        margin: 0 0 5px;
        color: var(--primarycolor);
    }

.nav.nav-tabs .nav-link.active {
    color: var(--primarycolor);
}

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

.worker-loc-list {
    list-style: none;
    margin: 0;
    font-size: 14px;
    padding: 0;
    max-height: 480px;
    overflow: auto;
    scrollbar-width: thin;
}

    .worker-loc-list li {
        display: flex;
        padding: 13px 0;
        color: #666;
        border-bottom: solid 1px #DDD;
        font-weight: 300;
    }

        .worker-loc-list li:last-child {
            border: 0;
        }

    .worker-loc-list h6 {
        font-size: 14px;
        color: #000;
        margin: 0 0 5px;
    }

.worker-loc-img img {
    width: 45px;
    height: 45px;
    border-radius: 100%;
}

.loc-spent-time {
    margin-left: auto;
    font-size: 12px;
}

.worker-loc-content {
    flex: 1;
}

.grey-card-bg {
    background: #f7f7f7;
    width: 320px;
}

    .grey-card-bg h6 {
        color: #000;
    }

    .grey-card-bg .btn.btn-sm {
        padding: 7px 10px;
        height: auto;
        border-radius: 6px;
    }

.tp-search-input {
    max-width: 280px;
    position: relative;
}



.login-wrapper {
    height: 100vh;
}

/* .login-left {
    background:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
} */



.login-container {
    max-width: 440px;
    background: #fff;
    width: 100%;
}

    .login-container h4 {
        font-weight: 600;
        margin: 0 0 20px;
        color: #303030;
        font-size: 36px;
        margin-bottom: 5px;
    }


.login-head P {
    font-size: 20px;
    color: #575757;
    font-weight: 300;
}




.login-left > img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Full screen image */
}

span.logo-info {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-right {
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.login-left {
    min-width: 890px;
    height: 100%;
    position: relative;
}

.login-inner-wrapper {
    height: 100%;
}

.login-left-inner .img-fluid {
    max-width: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 40px;
    object-position: top;
}

span.user-info {
    border: 2px solid #EBEAE8;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.dropdown-toggle::after {
    display: none;
}


.page-title-row h5 {
    font-size: 24px;
    color: #32322F;
    font-weight: 700;
    margin-bottom: 0;
}

/****/

p {
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
}

    ul li {
        list-style: none;
    }


.dashcard {
    background: linear-gradient(to bottom, rgba(0, 140, 88, 1) 0%, rgba(0, 88, 62, 1) 100%);
    border-radius: 16px;
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

    .dashcard:after {
        background: hsl(46.15deg 63.93% 52.16% / 18%);
        position: absolute;
        left: -16px;
        top: -52px;
        width: 140px;
        height: 140px;
        content: "";
        border-radius: 50%;
    }

.dashcardtext p {
    font-size: 16px;
    color: rgb(255 255 255 / 80%);
    font-weight: 300;
    margin-bottom: 2px;
}

.dashcardtext {
    padding-top: 34px;
}

    .dashcardtext h4 {
        font-size: 30px;
        color: #FFFFFF;
        font-weight: 800;
        margin-bottom: 0;
    }

.arrow-action {
    width: 42px;
    height: 42px;
    background: rgb(255 255 255 / 20%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.dashbox {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 20px 20px;
}

.dashboxtitle h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 0;
    color: #32322F;
}

.dashboxtitle {
    margin-bottom: 10px;
}

.timeinfo {
    background: #E2E2E2;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid #D4D4D4;
    position: relative;
}

    .timeinfo h4 {
        font-size: 14px;
        color: #32322F;
        font-weight: 500;
    }

    .timeinfo span {
        font-size: 12px;
        color: #32322F;
        font-weight: 400;
    }

    .timeinfo.primarytime {
        border-color: #FBC02D;
        background: rgb(251 192 45 / 20%);
    }

    .timeinfo.dangertime {
        border-color: #F14336;
    }

.arrow-action.primaryaction {
    background: hsl(157.71deg 100% 27.45% / 20%);
}

    .arrow-action.primaryaction svg path {
        stroke: #008C58;
    }


a.viewinfo {
    background: #008C58;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.hotsolts {
    background: #fff;
    border-radius: 16px;
    padding: 15px 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid #00583E;
    height: 100%;
}

.hotsoltsleft h4 {
    font-size: 30px;
    color: #00583E;
    font-weight: 800;
    margin-bottom: 10px;
}

.hotsicon:after {
    background: hsl(163.85deg 20.63% 75.29% / 18%);
    position: absolute;
    right: -16px;
    top: -48px;
    width: 140px;
    height: 140px;
    content: "";
    border-radius: 50%;
}

ul.timesoltlist li {
    font-size: 16px;
    color: #404040;
    font-weight: 500;
}

ul.timesoltlist li {
    margin-bottom: 8px;
}

    ul.timesoltlist li:last-child {
        margin-bottom: 0;
    }

    ul.timesoltlist li h5 {
        margin-bottom: 5px;
        font-size: 16px;
        color: #404040;
        font-weight: 500;
    }

.ratingsstar h5 {
    font-size: 30px;
    color: #404040;
    font-weight: 800;
}

.graphbox img {
    width: 100%;
}

.notification-icon {
    border: 2px solid #EBEAE8;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.notifications-card {
    width: 501px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
}

.notif-header {
    padding: 15px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e9e9e9;
}

.notif-list {
    max-height: 420px;
    overflow-y: auto;
}

.notify-top-left {
    width: 85%;
}

.notif-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #f2f2f2;
}

.notify-top-right {
    flex: 1;
    text-align: right;
}


.notif-viewall {
    color: white;
    font-weight: 600;
    text-decoration: none;
    display: block;
}

.notifications-card {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 999;
}


.footer-btn {
    font-size: 22px;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00583E;
    font-weight: 500;
    color: #fff;
    padding: 12px 10px;
}

.notification-header h5 {
    font-size: 22px;
    color: #2A2A2A;
    padding: 15px 20px;
}

.notify-top h4 {
    font-size: 18px;
    color: #2A2A2A;
    font-weight: 600;
    margin-bottom: 10px;
}


.notify-top p {
    font-size: 17px;
    color: #6B6B6B;
    font-weight: 400;
}

span.timeago {
    font-size: 12px;
    color: #6B6B6B;
    font-weight: 500;
    margin-top: 5px;
    display: block;
}

span.badgeinfo {
    background: #00583E;
    width: 10px;
    height: 10px;
    display: flex;
    border-radius: 50%;
    text-align: right;
    margin-left: auto;
}

.list-item {
    background: #F4F3F2;
    text-decoration: none;
    padding: 20px 20px;
    border-bottom: 1px solid #D5D5D8;
    display: block;
    width: 100%;
}

.notify-top-left p {
    font-size: 17px;
    color: #6B6B6B;
    font-weight: 400;
}

.pagination li:first-child a {
    border-radius: 20px 0px 0px 20px !important;
}

.pagination li:last-child a {
    border-radius: 0px 20px 20px 0px !important;
}


.tp-search-input input.icon-holder {
    padding-left: 45px;
    max-width: 226px;
    height: 44px;
    color: #A4B0C0;
    border: 1px solid #E5E5E5;
}

    .tp-search-input input.icon-holder::placeholder {
        color: #A4B0C0;
    }


.btn-filter {
    font-weight: 600;
    background: #D3AF37;
    text-decoration: none;
    font-size: 15px;
    color: #000000;
    padding: 10px 18px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 98px;
}

.btn-clear {
    font-weight: 600;
    background: #D3D3D3;
    text-decoration: none;
    font-size: 15px;
    color: #4C4A45;
    padding: 10px 18px;
    border-radius: 24px;
    min-width: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.slidetoggle img {
    filter: brightness(0) invert(1);
}

textarea.form-control {
    min-height: 177px;
    border-radius: 10px;
    resize: none;
}

.profile-slider .item img {
    border-radius: 12px;
    height: 327px;
    object-fit: cover;
    width: 100%;
}

.profile-slider .owl-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-slider button.owl-dot span {
    width: 12px;
    height: 12px;
    display: flex;
    background: hsl(0deg 0% 92.94% / 40%);
    border-radius: 50%;
    margin: 0 4px;
}

.profile-slider button.owl-dot.active span {
    background: var(--primarycolor);
}


ul.selectdaylist li a {
    border: 1px solid #00583E;
    padding: 10px 10px;
    margin-right: 10px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 600;
    min-width: 133px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00583E !important;
    cursor: pointer;
}

.dashsubtitle {
    font-size: 15px;
    font-weight: 600;
}

ul li.configurebtn a {
    background: #D3AF37;
    border-color: #D3AF37;
    color: #fff !important;
}

span.note-text {
    font-size: 14px;
    color: #000000;
    font-weight: 400;
    display: block;
}

.dashborder {
    border: 1px solid #EBE7E0;
    padding: 15px 20px;
    border-radius: 10px;
}

.titlebox {
    font-size: 16px;
    color: #243324;
    font-weight: 500;
}

ul.selectdaylist li a.active {
    background: #00583e;
    color: #fff !important;
    text-decoration: none;
}

.form-group.mb-3.bg-field {
    background: #B3CDC666;
    border-radius: 4px;
}

.form-switch .form-check-input {
    width: 40px;
    height: 23px;
}

    .form-switch .form-check-input:checked {
        background-color: var(--primarycolor);
        border-color: var(--primarycolor);
    }

.form-switch.success-switch .form-check-input:checked {
    background-color: #008C58;
    border-color: #008C58;
}

.form-check-input:focus {
    box-shadow: none !important;
}


.btn-primary:hover {
    background: var(--primarycolor);
    border-color: var(--primarycolor);
}

.btn.sm-btn {
    min-width: 103px !important;
    padding: 11px 24px;
}

a.action-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    a.action-btn.editinfo {
        background: var(--secondrycolor)
    }

    a.action-btn.deleteinfo {
        background: #FB6A57;
    }

/*td.bordertag p {
    display: inline-block;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    padding: 5px 10px;
}*/

.primary-form-check.check-coustom .form-check-input[type="checkbox"] {
    border-color: var(--primarycolor);
}


.primary-form-check.check-coustom .form-check-input:checked {
    background-color: var(--primarycolor);
    border-color: var(--primarycolor)
}

.modal.sm-modal .modal-dialog {
    max-width: 800px;
}

.modal-dialog {
    max-width: 800px;
}

.price-with {
    position: relative;
}

.aud-text {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    left: 20px;
    font-size: 14px;
    color: #000000;
    font-weight: 600;
}


.price-with input {
    padding-left: 40px;
}

.number-with {
    position: relative;
}

    .number-with input {
        padding-left: 65px;
    }

.table-responsive th img {
    /* float: right;
    clear: both;
    position: relative;
    top: 4px; */
    margin-left: 10px;
}


/*--------------------------------------------------------------------------------------*/
/*Booking Section
/*--------------------------------------------------------------------------------------*/


.toggle-wrapper {
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: 2px 2px;
    border-radius: 40px;
    gap: 8px;
}

.toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    /* ACTIVE CIRCLE (Green background + white icon) */
    .toggle-btn.active {
        background: var(--primarycolor)
    }

        .toggle-btn.active svg {
            fill: #ffffff;
        }

/* Default icon style (black for list icon) */
.icon-grid,
.icon-list {
    width: 26px;
    height: 26px;
    fill: black;
}


.with-icon {
    position: relative;
}

.in-icon {
    position: absolute;
    right: 24px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.form-control.h-sm, .form-select.h-sm, .h-sm-date {
    height: 44px;
}

.filtersearch {
    position: relative;
}

    .filtersearch .input-icon {
        top: 12px;
    }



.timeinfo.timenormalinfo {
    background: #fff;
}

.infochart-sm .timeinfo h4 {
    font-size: 20px;
}

.infochart-sm .timeinfo span {
    font-size: 16px;
}


.timeinfo.sucesstimeinfo {
    border-color: #00583E;
}

.lock-time-info {
    position: absolute;
    right: 10px;
    top: 10px;
}

.dashboxmain {
    min-height: calc(100vh - 200px);
}

.toggle-btn.active svg path {
    fill: #fff;
}

.toggle-btn svg path {
    fill: #000;
}

.btn-gradient {
    background: linear-gradient(to bottom, rgba(0, 140, 88, 1) 0%, rgba(0, 88, 62, 1) 100%);
    border: 0;
    color: #fff !important;
    line-height: 14px;
}

.btn.hh-btn-sm {
    height: 44px;
    padding: 10px;
}


.profile-header img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.label-text {
    font-weight: 500;
    color: #000000;
    font-size: 16px;
}

.value-text {
    font-size: 16px;
    color: #000000;
    font-weight: 300;
    text-align: end;
}

.section-title {
    color: var(--primarycolor);
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
}

.amount-text {
    font-weight: 600;
    font-size: 22px;
    color: #000000;
}


.user-info-box img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 1px solid #000;
}

.userinfotitle {
    font-size: 24px;
    color: #0A0A0A;
    font-weight: 400;
}

.user-info-contact span, .user-info-contact p {
    font-size: 14px;
    color: #0A0A0A;
    font-weight: 300;
}

    .user-info-contact span svg, .user-info-contact p {
        margin-right: 5px;
    }

.border-line {
    border-bottom: 1px solid #CFCFCF;
    margin: 2px 0;
}

.amount-total {
    font-size: 22px;
    color: #000000;
    font-weight: 600;
}

.modal-title {
    font-size: 20px;
    font-weight: 400;
    color: #2A2A2A;
    font-style: normal;
}

.modal.s-modal .modal-dialog {
    max-width: 660px;
}

select.form-select.form-select-sm {
    display: inline-flex;
    font-size: 14px;
    padding: 7px 10px !important;
    height: auto;
    width: auto;
    padding-right: 35px !important;
    border-radius: 4px;
}

.coustomtabs .nav.nav-tabs .nav-link {
    background: #F4F3F2;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0 4px;
    min-width: 178px;
    border-bottom: 0;
    margin-bottom: -3px;
    padding: 10px 10px;
    font-size: 16px;
    color: #161616;
    font-weight: 500;
}

    .coustomtabs .nav.nav-tabs .nav-link.active {
        background: #fff;
        border-color: #F4F3F2;
        border-bottom: 0;
        color: var(--primarycolor);
    }

.coustomtabs .nav-tabs {
    border-bottom: 3px solid #F4F3F2;
}

img.tablephoto {
    width: 57px;
    height: 41px;
    border-radius: 6px;
    object-fit: cover;
}

.btn-sm-primary {
    background: #00583e;
    border-radius: 22px;
    display: flex;
    align-items: center;
    padding: 8px 24px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    min-width: 72px;
}

.title-textup {
    font-size: 16px;
    color: #000000;
    font-weight: 400;
}

.title-textbottom {
    font-size: 16px;
    color: #000000;
    font-weight: 500;
    padding-top: 5px;
}

.page-detail-title h5 {
    font-style: italic;
    font-weight: 400;
}


.upload-btn-wrapper {
    position: relative;
}


    .upload-btn-wrapper input[type=file] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        right: 0;
        bottom: 0;
    }

.upload-btn-wrapper {
    border: 1px dashed #30325E;
    border-radius: 8px;
    padding: 20px 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    background: #fff;
    min-height: 127px;
}

button.upload-btn p {
    margin-bottom: 0;
    font-size: 12px;
    color: rgb(0 0 0 / 40%);
    font-weight: 400;
}

button.upload-btn {
    background: transparent;
    border: 0;
    width: 100%;
    height: 100%;
}

.btn.btn-outline.outline-blue {
    border-color: #163259;
    color: #163259 !important;
}


button.upload-btn h3 {
    font-size: 14px;
    color: #000000;
    font-weight: 400;
}

label.form-label span {
    font-size: 14px;
    color: #999999;
}

.menu-collapse .menubar li > a {
    padding: 14px 14px;
    height: 48px;
}


.menu-collapse .sildebarlogo {
    margin: 0px 0 20px;
    padding-left: 0 !important;
}


ul.selectdaylist {
    flex-wrap: nowrap;
    overflow: auto;
    padding-bottom: 10px;
}

.dash-hfour .infochart-sm .timeinfo h4 {
    font-size: 16px;
}

.dash-hfour .lock-time-info svg {
    width: 22px;
    height: 22px;
}

.dash-hfour .lock-time-info {
    position: absolute;
    right: 10px;
    top: 8px;
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    padding-top: 3px;
    padding-right: 16px;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #E5E5E5;
    border-radius: 30px;
    /* padding: 5px; */
    background-color: transparent;
    padding: 5px 20px 5px 14px;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 0;
    border: 0px solid #DEE5EF;
    border-radius: 0;
    margin: 10px 10px 10px 0;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        cursor: default;
        color: #666 !important;
        /* border: 1px solid transparent; */
        background: transparent;
        box-shadow: none;
        border-right: 1px solid #DEE5EF;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        box-sizing: border-box;
        display: inline-block;
        min-width: 1.5em;
        padding: .5em 1em;
        margin-left: 2px;
        text-align: center;
        text-decoration: none !important;
        cursor: pointer;
        color: inherit !important;
        /* border: 1px solid transparent; */
        border-radius: 2px;
        border-left: 1px solid #DEE5EF;
    }

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current, .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ffff !important;
    border: 1px solid #E2E8F1;
    background-color: #D3AF37;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 10px !important;
    line-height: 1
}

.dataTables_wrapper .dataTables_scroll {
    clear: both;
    margin-bottom: 20px;
}

.table > :not(caption) > * > * {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom: 1px solid #dfdfdf !important;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table .fw-semibold {
    font-weight: 400 !important;
}

.input-null {
    /* light grey */
    background-color: #f0f0f0 !important;
    pointer-events: none;
    user-select: none;
}

.swal2-icon.swal2-warning {
    color: #f8bb86;
    border-color: #facea8;
    font-size: 18px;
    line-height: 80px;
    text-align: center;
}

.swal2-modal .swal2-styled {
    border: 0;
    border-radius: 33px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    margin: 15px 5px 0;
    padding: 10px 59px;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    font-family: "Inter", sans-serif !important;
    border-radius: var(--swal2-confirm-button-border-radius);
    background: initial;
    background-color: #A1649C !important;
    box-shadow: var(--swal2-confirm-button-box-shadow);
    color: var(--swal2-confirm-button-color);
    font-size: 1em;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {
    font-family: "Inter", sans-serif !important;
    border-radius: var(--swal2-cancel-button-border-radius);
    border: 1px solid #DADADA !important;
    background: initial;
    background-color: #fff !important;
    box-shadow: var(--swal2-cancel-button-box-shadow);
    color: #797979 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.fc-scrollgrid-sync-inner {
    background-color: #ffff;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none !important;
}

.dash-hfour {
    width: 100%;
}

#TodayBookings .table-responsive {
    max-height: 345px;
}

.dash-hfour .infochart {
    max-height: 345px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.input-group-text {
    border-radius: 33px;
}

#data-table_notifications_wrapper .dataTables_scrollHead,
#data-table_notifications_wrapper .dataTables_scrollBody thead {
    display: none !important;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active, .btn-primary:active {
    color: #fff !important;
    background-color: var(--primarycolor) !important;
    border-color: var(--primarycolor) !important;
}




/* New Changes*/
/* ////////////-----18/12/2025------//////////// */

/* tab-container */
.tab-container {
    background-color: #ffffff;
    padding: 14px;
    border-radius: 16px;
}

    .tab-container .nav.nav-tabs .nav-link.active {
        color: #161616;
        background-color: #F4F3F2;
        border: 1px solid #F4F3F2;
        font-size: 16px;
        font-weight: 400;
        border-radius: 10px 10px 0 0;
    }

    .tab-container .nav-tabs {
        border-bottom: 3px solid #F4F3F2;
    }

    .tab-container .nav.nav-tabs .nav-link {
        color: #00583E;
        font-size: 16px;
        font-weight: 400;
        border-radius: 10px 10px 0 0;
    }



.legend {
    display: flex;
    gap: 20px;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.dot {
    width: 10px;
    height: 10px;
    margin-right: 6px;
}

.green {
    background-color: rgba(0, 88, 62, 0.3);
}

.yellow {
    background-color: rgba(211, 175, 55, 1);
}











/* Stat Cards */
.stat-box {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: .2s ease-in-out;
}

    .stat-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }

.stat-icon {
    min-width: 50px;
    min-height: 50px;
    border-radius: 60px;
    background: rgba(255, 255, 255, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #0c8c55;
}

.stat-box.active {
    background: linear-gradient(to bottom, #008C58, #00583E);
    transform: translateY(-3px);
    color: #fff;
}

    .stat-box.active img {
        filter: brightness(0) invert(1);
    }

    .stat-box.active p:first-of-type {
        color: rgba(255, 255, 255, 0.7);
    }

.stat-box p {
    font-size: 14px;
    font-weight: 400;
    color: #949699;
}

.tab-box,
.table-box {
    background: #F9F9F9;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

    .tab-box h6,
    .table-box h6 {
        font-size: 22px;
        font-weight: 400;
        color: #000
    }

.snapshot-img {
    width: 100%;
    max-height: 360px;
    height: 100%;
    border-radius: 14px;
}

.export-btn {
    font-size: 16px;
    line-height: 1.2;
    border-radius: 33px;
    padding: 8px 16px;
    font-weight: 500;
    min-width: 132px;
}

    .export-btn:hover {
        opacity: .85;
    }

.tab-pane input.icon-holder {
    padding-left: 44px;
    margin-right: 400px;
}

.custom-file-upload.fixed-width {
    width: 100%;
    min-width: 121px;
    height: 100px;
    max-width: 650px;
}

.custom-file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    border: 2px dashed hsl(199.09deg 86.84% 14.9% / 20%);
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 17.5px;
    text-align: center;
    position: relative;
}

    .custom-file-upload img {
        max-width: 50px;
        max-height: 50px;
        margin-bottom: 10px;
    }

.custom-file-input {
    display: none;
}

.file-listing {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    column-gap: 14px;
    /* margin-left: 14px; */
}

    .file-listing li .img-box {
        height: 100px;
        width: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: #9E9E9E;
        border-radius: 12px;
    }

        .file-listing li .img-box img {
            min-height: 100px;
            max-height: 100px;
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 12px;
        }

        .file-listing li .img-box .remove {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            position: absolute;
            right: -6px;
            top: -9px;
            border-radius: 50%;
            cursor: pointer;
        }

            .file-listing li .img-box .remove img {
                min-height: auto;
                max-height: auto;
                width: auto;
                height: auto;
                object-fit: cover;
            }


a.edit {
    background: #008C58;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.js-course-select {
    height: 48px !important;
}

.select2-container .select2-selection--single {
    height: 48px !important;
    border-radius: 33px !important;
    display: flex;
    align-items: center;
    border-color: hsl(199.09deg 86.84% 14.9% / 20%) !important;
    padding-right: 40px !important;
}

    /* text vertical center */
    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 48px !important;
        padding-left: 15px !important;
        padding-right: 5px;
    }

    /* arrow center */
    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 48px !important;
        right: 12px;
    }

    .select2-container .select2-selection--single::placeholder {
        color: hsl(0deg 0% 6.67% / 20%);
    }

.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    /* font-weight: bold; */
    height: 26px;
    margin-right: 12px;
    padding-right: 0px;
    margin-top: 9px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 22px !important;
    width: 20px;
}


/*05-Jan-2026*/
.event-slots {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.event-slot-item {
    padding: 8px 12px;
    border: 1px solid #D4D7DB;
    border-radius: 20px;
    margin-right: 8px;
    margin-bottom: 5px;
    font: 13px;
    font-weight: 400;
    color: #3F3F3F;
}

/* ══════════════════════════════════════════
   Dashboard – Index
══════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────── */
:root {
    --primary: #A1649C;
    --primary-dark: #784274;
    --primary-nav: #AF72AA;
    --primary-active: #D87EBD;
    --azure: #1A2E4A;
    --chicago: #5F5E5A;
    --tuatara: #2C2C2A;
    --westar: #E0DED6;
    --friar: #888780;
    --pampas: #F1EFE8;
    --titan-white: #F8F7F4;
    --loafer: #EAF3DE;
    --dell: #3B6D11;
    --selago: #E6F1FB;
    --fun-blue: #185FA5;
    --linen: #EEF2F7;
    --indigo-light: #EEEDFE;
    --blue-violet: #534AB7;
    --bourbon: #BA7517;
    --citrine: #FAEEDA;
    --rusty: #854F0B;
    --well-read: #A32D2D;
    --abbey: #4C4F56;
    --font-base: 'DM Sans', sans-serif;
}

/* ── Base ──────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ── Layout wrapper ────────────────────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────── */
.sidebar {
    width: 224px;
    min-width: 224px;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-logo {
    padding: 0 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .sidebar-logo img {
        width: 88px;
        height: auto;
    }

.sidebar-nav {
    flex: 1;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    background-color: var(--primary-nav);
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

    .nav-item:hover {
        background-color: var(--primary-active);
        color: #fff;
    }

    .nav-item.active {
        background-color: var(--primary-active);
        color: #fff;
    }

    .nav-item svg,
    .nav-item .nav-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        opacity: 1;
    }

/* ── Sidebar footer / user pill ───────────────────── */
.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 13px 8px 12px;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-name {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 18px;
}

.user-role {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    line-height: 16.5px;
}

.user-chevron {
    width: 13px;
    height: 13px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform 0.2s ease;
}

.user-pill[aria-expanded="true"] .user-chevron {
    transform: rotate(180deg);
}

.user-pill {
    cursor: pointer;
}

/* ── User dropdown ─────────────────────────────────── */
.user-dropdown {
    margin: 4px 8px 0;
    background-color: var(--primary-dark);
    border-radius: 8px;
    overflow: hidden;
}

    .user-dropdown form {
        margin: 0;
    }

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .user-dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .user-dropdown-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* ── Main content ──────────────────────────────────── */
.main-content {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding: 24px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Page header ───────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--azure);
    line-height: 30px;
    margin: 0;
}

.page-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--chicago);
    line-height: 19.5px;
    margin: 2px 0 0;
}

.page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Buttons ───────────────────────────────────────── */
.btn-outline-ndis {
    border: 1px solid var(--westar);
    background: transparent;
    color: var(--tuatara);
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 11px;
    border-radius: 8px;
    line-height: normal;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
    text-decoration: none;
}

    .btn-outline-ndis:hover {
        background-color: var(--titan-white);
    }


    .btn-outline-ndis.sw-edit-btn {
        border-color: var(--primary);
        color: var(--primary);
    }
.btn-primary-ndis {
    background-color: var(--primary);
    border: none;
    color: #fff;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 8px;
    line-height: normal;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
    text-decoration: none
}

    .btn-primary-ndis:hover {
        background-color: var(--primary-dark);
    }

/* ── Stat cards ────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--westar);
    border-radius: 12px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
    }

    .stat-card.accent-azure::before {
        background-color: var(--azure);
    }

    .stat-card.accent-primary::before {
        background-color: var(--primary);
    }

    .stat-card.accent-orange::before {
        background-color: var(--bourbon);
    }

    .stat-card.accent-red::before {
        background-color: var(--well-read);
    }

    .stat-card.accent-pill-green::before {
        background-color: var(--dell);
    }

    .stat-card.accent-pill-orange::before {
        background-color: var(--bourbon);
    }

    .stat-card.accent-pill-local::before {
        background-color: var(--blue-violet);
    }

.stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--friar);
    letter-spacing: 0.55px;
    text-transform: uppercase;
    line-height: 16.5px;
    margin-bottom: 6px;
}

.stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--azure);
    line-height: 26px;
    margin-bottom: 6px;
}

.stat-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--chicago);
    line-height: 18px;
}

/* ── Alert banners ─────────────────────────────────── */
.alert-ndis {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 14px;
    line-height: 19.5px;
}

    .alert-ndis .alert-icon {
        font-size: 15px;
        line-height: 22.5px;
        flex-shrink: 0;
    }

.alert-red {
    background-color: #FAF2F2;
    border-color: var(--well-read);
    color: var(--well-read);
}

.alert-orange {
    background-color: var(--citrine);
    border-color: var(--bourbon);
    color: var(--rusty);
}

.alert-plan {
    background-color: #FFF5F5;
    border-color: #E32B2B;
    color: #E32B2B;
}

.alert-ndis a,
.alert-ndis .alert-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

    .alert-ndis a:hover {
        text-decoration: underline;
    }

/* ── Section header ────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--azure);
    line-height: 22.5px;
    margin: 0;
}

.btn-view-all {
    font-size: 12px;
    font-weight: 500;
    color: var(--chicago);
    background: transparent;
    border: none;
    padding: 5px 10px 6px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

    .btn-view-all:hover {
        background-color: var(--pampas);
        color: var(--chicago);
    }

/* ── Card wrapper ──────────────────────────────────── */
.ndis-card {
    background: #fff;
    border: 1px solid var(--westar);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    overflow: hidden;
}

/* ── Participant table ──────────────────────────────── */
.participant-table {
    width: 100%;
    border-collapse: collapse;
}

    .participant-table thead th {
        background-color: var(--titan-white);
        border-bottom: 1px solid var(--westar);
        padding: 9.5px 14px 10.5px;
        font-size: 11px;
        font-weight: 700;
        color: var(--friar);
        letter-spacing: 0.55px;
        text-transform: uppercase;
        line-height: 16.5px;
        white-space: nowrap;
    }

    .participant-table tbody td {
        border-bottom: 1px solid var(--westar);
        padding: 12px 14px;
        vertical-align: middle;
        font-size: 14px;
        white-space: nowrap;
    }

    .participant-table tbody tr:last-child td {
        border-bottom: none;
    }

    .participant-table tbody tr:hover {
        background-color: rgba(248, 247, 244, 0.6);
    }

.td-name {
    font-weight: 500;
    color: var(--tuatara);
    line-height: 19.5px;
}

.td-meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--friar);
    line-height: 18px;
}

.td-muted {
    font-weight: 400;
    color: var(--friar);
}

.td-amount {
    font-weight: 600;
    color: var(--tuatara);
}

/* ── State badges ───────────────────────────────────── */
.state-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22px;
    line-height: 16.5px;
    white-space: nowrap;
}

.badge-qld {
    background-color: var(--citrine);
    color: var(--bourbon);
}

.badge-nsw {
    background-color: var(--selago);
    color: var(--fun-blue);
}

.badge-vic {
    background-color: var(--indigo-light);
    color: var(--blue-violet);
}

.badge-wa {
    background-color: var(--citrine);
    color: var(--bourbon);
}

.badge-vic-alt {
    background-color: var(--indigo-light);
    color: var(--blue-violet);
}

/* ── Risk / utilisation bar ────────────────────────── */
.risk-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.risk-bar-track {
    flex: 1;
    max-width: 100px;
    height: 6px;
    background-color: var(--pampas);
    border-radius: 3px;
    overflow: hidden;
}

.risk-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.risk-bar-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--tuatara);
    line-height: 18px;
    min-width: 32px;
}

.fill-green {
    background-color: var(--dell);
}

.fill-orange {
    background-color: var(--bourbon);
}

.fill-red {
    background-color: var(--well-read);
}

/* ── Status pills ───────────────────────────────────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16.5px;
    white-space: nowrap;
}

.pill-green {
    background-color: var(--loafer);
    color: var(--dell);
}

.pill-orange {
    background-color: var(--citrine);
    color: var(--bourbon);
}

.pill-local {
    background-color: var(--indigo-light);
    color: var(--blue-violet);
}

.pill-red {
    background-color: #FCEBEB;
    color: var(--well-read);
}

/* ── Bottom cards (Recent Activity + Holidays) ─────── */
.bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.card-inner {
    padding: 21px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--azure);
    line-height: 19.5px;
    margin: 0;
}

/* ── Activity list ──────────────────────────────────── */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--westar);
}

    .activity-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.activity-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

    .activity-icon.bg-linen {
        background-color: var(--linen);
    }

    .activity-icon.bg-citrine {
        background-color: var(--citrine);
    }

    .activity-icon.bg-titan {
        background-color: var(--titan-white);
    }

.activity-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--tuatara);
    line-height: 19.5px;
}

.activity-meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--friar);
    line-height: 18px;
}

/* ══════════════════════════════════════════
   PUBLIC HOLIDAYS PAGE
══════════════════════════════════════════ */

.ph-state-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.ph-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 8px 20px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--friar);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    border-radius: 0;
}

    .ph-tab:hover {
        color: var(--primary);
    }

.ph-tab--active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.ph-row--past td {
    opacity: .55;
}


/* ── Holidays list ──────────────────────────────────── */
.holiday-list {
    display: flex;
    flex-direction: column;
}

.holiday-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 11px;
    border-bottom: 1px solid var(--westar);
}

    .holiday-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.holiday-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--tuatara);
    line-height: 19.5px;
}

.holiday-date {
    font-size: 12px;
    font-weight: 400;
    color: var(--friar);
    line-height: 18px;
}

/* ── Responsive overrides ───────────────────────────── */
@media (max-width: 1199.98px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        width: 64px;
        min-width: 64px;
    }

    .sidebar-logo {
        padding: 16px 8px;
    }

        .sidebar-logo img {
            width: 40px;
        }

    .nav-item span {
        display: none;
    }

    .nav-item {
        justify-content: center;
        padding: 9px;
    }

    .user-pill .user-info,
    .user-pill .user-chevron {
        display: none;
    }

    .user-pill {
        justify-content: center;
    }

    .main-content {
        padding: 20px 16px 32px;
    }
}

@media (max-width: 767.98px) {
    .sidebar {
        display: none;
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .page-title {
        font-size: 17px;
    }

    .main-content {
        padding: 16px 12px 24px;
    }

    .participant-table {
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
    }

    .page-actions {
        width: 100%;
    }
}

.bg {
    background-color: var(--primarycolor);
    color: #fff !important;
}

.event-slot-item {
    text-decoration: none;
    color: #444;
}

.table tbody td {
    padding: 10px 10px 14px 0px;
}

.default-course-img {
    border: 1px solid #e7e7e7;
    border-radius: 12px;
}

/* ////------13-01-2026-----//// */
.flag-deatils-content h2 {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
}

.flag-imgage img {
    border: 1px solid #E3E3E3;
    border-radius: 8px;
}

.reportby img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.flag-deatils-content p {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 1.7;
}

.report-reason ol li {
    line-height: 1.8;
}

.flag-deatils-content h3 {
    color: var(--secondrycolor);
    font-size: 16px;
    font-weight: 500;
}

.flag-deatils-content span {
    color: #000;
    font-size: 16px;
    font-weight: 400;
}

.postbyimg img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.postby h6 {
    font-size: 16px;
    font-weight: 500;
    color: #212121;
}

.postby span {
    font-size: 14px;
    font-weight: 400;
    color: #4D4D4D;
}

/* Slider wrapper */
.profile-slider-flag {
    position: relative;
    width: 100%;
    max-width: 500px;
}

    /* Owl stage fix (prevents multiple images showing) */
    .profile-slider-flag .owl-stage-outer {
        overflow: hidden;
    }



    /* Image styling */
    .profile-slider-flag .item img {
        width: auto;
        max-width: 100%;
        height: 288px;
        object-fit: contain;
        border-radius: 12px;
        display: block;
        /*border-radius: 8px;*/
        margin: 0 auto;
    }

    .profile-slider-flag .item {
        width: 100%;
        height: 288px;
        text-align: center;
        border: 1px solid #E3E3E3;
        border-radius: 8px;
    }

    /* Dots container */
    .profile-slider-flag .owl-dots {
        position: absolute;
        bottom: 16px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
    }

    /* Dot base */
    .profile-slider-flag .owl-dot span {
        width: 10px;
        height: 10px;
        background: rgba(237, 237, 237, 0.4);
        border-radius: 50%;
        margin: 0 5px;
        transition: all 0.3s ease;
    }

    /* Active dot */
    .profile-slider-flag .owl-dot.active span {
        background: #EDEDED;
        transform: scale(1.2);
    }

.status-pending {
    background-color: #fffae8 !important;
    color: var(--secondrycolor);
    font-weight: 600;
}

.status-actioned {
    background-color: #d1e7dd !important; /* light green */
    color: #0f5132;
    font-weight: 600;
}


/* ///////////------Leaderboard CSS---------//////////////// */

.Leaderboard {
    font-size: 1.2vw;
}

    .Leaderboard .container-fluid {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .Leaderboard .page-title-row {
        margin: 0px 20px;
        margin-top: 20px;
        align-items: center;
    }

        .Leaderboard .page-title-row p {
            font-size: 1em;
            font-weight: 600;
            color: #9D9D9D;
        }

    .Leaderboard .top-bar {
        background: #0b5c43;
        color: #fff;
        padding: 28px 60px;
        font-size: 1em;
        margin: auto;
    }

/* LIVE BAR */
.live-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #0b5c43;
    border-radius: 10px;
    padding: 20px;
    margin: 0px 20px;
    background-color: #FBFFFE;
}

.live-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    color: #6aa84f;
}

.live-dot {
    width: 14px;
    height: 14px;
    background: #e53935;
    border-radius: 50%;
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(229,57,53,.6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(229,57,53,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(229,57,53,0);
    }
}

.Leaderboard .table thead th {
    background: #008C58;
    color: #fff;
    font-weight: 400;
    font-size: 1.1em;
    padding: 10px 12px;
    border-bottom: 1px dashed #9C927A;
    white-space: nowrap;
    text-align: center;
}

.Leaderboard .table {
    font-size: 1em;
    font-weight: 400;
    margin-bottom: 0;
    text-align: center;
}

.Leaderboard .hole-18 {
    font-size: 1em;
    font-weight: 500;
    color: #9D9D9D;
}




/* Sticky FIRST column (Rank) */
.Leaderboard .table th:nth-child(1),
.Leaderboard .table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 71px;
    border-bottom: 1px dashed #9C927A;
}

/*.Leaderboard .table td:nth-child(1) {
    background: #fff;
}*/
/* Sticky SECOND column (Player Name) */
.Leaderboard .table th:nth-child(2),
.Leaderboard .table td:nth-child(2) {
    position: sticky;
    left: 70px;
    z-index: 3;
    min-width: 160px;
}

/*.Leaderboard .table td:nth-child(2) {
    background: #fff;
}*/

.Leaderboard .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Scroll appears only on smaller screens */
@media (min-width: 1399px) {
    .Leaderboard .table-responsive {
        overflow-x: hidden;
    }
}

.report-comm {
    padding: 16px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
}


.Leaderboard .table tbody td {
    padding: 10px 12px;
}

.Leaderboard tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid #e6e6e6;
}

/* POST column */
.Leaderboard .table td:nth-child(1) {
    background: #EDEDED;
    width: 100px;
    font-weight: 600;
}


/* SCORE column (grey background + red text) */
.Leaderboard .table td:nth-child(3) {
    background: #EDEDED;
    color: #ff3b30;
    font-weight: 600;
    text-align: center;
}

/* THRU column */
.Leaderboard .table td:nth-child(4) {
    text-align: center;
    font-weight: 600;
    color: #1d3b72;
}

/* ROUND column (green text) */
.Leaderboard .table td:nth-child(5) {
    background: #EDEDED;
    text-align: center;
    font-weight: 600;
    color: #0b8f4d;
}






input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* ── Participant listing ─────────────────────────── */
.participant-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.participant-search-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 220px;
}

.participant-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.participant-search-input {
    width: 100%;
    border: 1px solid var(--westar);
    border-radius: 8px;
    padding: 8px 12px 8px 34px;
    font-size: 14px;
    font-family: var(--font-base);
    color: var(--tuatara);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: 36px;
}

    .participant-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(161, 100, 156, 0.12);
    }

    .participant-search-input::placeholder {
        color: var(--friar);
    }

.participant-filter-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.participant-filter-select {
    border: 1px solid var(--westar);
    border-radius: 8px;
    padding: 7px 30px 7px 12px;
    font-size: 14px;
    font-family: var(--font-base);
    color: var(--tuatara);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23888780' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    height: 36px;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .participant-filter-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(161, 100, 156, 0.12);
    }

.participant-action-btns {
    display: flex;
    gap: 6px;
    align-items: center;
}

#participant-table thead th {
    background-color: var(--titan-white);
    border-bottom: 1px solid var(--westar);
    padding: 9px 14px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--friar);
    letter-spacing: 0.55px;
    text-transform: uppercase;
    white-space: nowrap;
}

#participant-table tbody td {
    padding: 11px 14px;
    vertical-align: middle;
    font-size: 14px;
    border-bottom: 1px solid var(--westar);
    white-space: nowrap;
}

#participant-table tbody tr:last-child td {
    border-bottom: none;
}

#participant-table tbody tr:hover {
    background-color: rgba(248, 247, 244, 0.6);
}

#participant-table .dataTables_processing {
    z-index: 10;
}
/* ── /Participant listing ────────────────────────── */
.validation-msg {
    min-height: 18px; /* adjust as needed */
    display: block;
}

.change-pass {
    display: flex;
    justify-content: center;
}

.change-pass-container {
    width: 100%;
    max-width: 900px;
}


/* ── Login / Auth Pages ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
}

.auth-wrapper {
    display: flex;
    min-height: 100vh;
}

.auth-left {
    width: 420px;
    min-width: 420px;
    background-color: #a1649c;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-logo {
    width: 90px;
    /*border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.auth-logo-text {
    font-family: 'Times New Roman', serif;
    font-size: 24px;
    color: #fff;
    letter-spacing: -3px;
    line-height: 1;
}

.auth-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-tagline {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    line-height: 35.1px;
    margin: 0 0 12px;
}

.auth-sub {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    line-height: 20.8px;
    margin: 0 0 32px;
}

.auth-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-feature {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.auth-feature-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.auth-feature-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    line-height: 19.5px;
    margin: 0 0 2px;
}

.auth-feature-desc {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,0.65);
    line-height: 18px;
    margin: 0;
}

.auth-copyright {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.25);
    line-height: 16.5px;
    margin: 0;
}

.auth-right {
    flex: 1;
    background-color: #F8F7F4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.auth-form-card {
    width: 100%;
    max-width: 420px;
}

.auth-form-title {
    font-size: 24px;
    font-weight: 700;
    color: #1A2E4A;
    line-height: 36px;
    margin: 0 0 6px;
}

.auth-form-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #5F5E5A;
    line-height: 19.5px;
    margin: 0;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    /*.auth-field:first-of-type {
    margin-top: 26px;
}*/

    .auth-field + .auth-field {
        margin-top: 10px;
    }

.auth-label {
    font-size: 12px;
    font-weight: 600;
    color: #5F5E5A;
    text-transform: uppercase;
    letter-spacing: 0.48px;
    line-height: 18px;
    margin: 0;
}

.auth-input {
    background: #fff;
    border: 1px solid #E0DED6;
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 14px;
    font-weight: 400;
    color: #2C2C2A;
    font-family: 'DM Sans', sans-serif;
    line-height: normal;
    width: 100%;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .auth-input:focus {
        border-color: #a1649c;
        box-shadow: 0 0 0 3px rgba(161,100,156,0.15);
    }

    .auth-input.pw-input {
        padding-right: 42px;
    }


.pw-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
}

    /* Eye icon default states — use !important to beat flex/inline overrides */
    .toggle-password .eye-open {
        display: none !important;
    }

    .toggle-password .eye-close {
        display: block !important;
    }

    .toggle-password.show-pass .eye-open {
        display: block !important;
    }

    .toggle-password.show-pass .eye-close {
        display: none !important;
    }



.forgot-link {
    font-size: 13px;
    font-weight: 500;
    color: #a1649c;
    text-decoration: none;
    line-height: 18px;
    white-space: nowrap;
}

    .forgot-link:hover {
        color: #884080;
        text-decoration: underline;
    }

.auth-remember-row {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}

.auth-remember-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .auth-remember-check .form-check-label {
        font-size: 14px;
        color: #5F5E5A;
        margin: 0;
        cursor: pointer;
    }

/* ── Custom purple checkbox for "Keep me signed in" ── */
.auth-remember-check .form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #d1c5cf;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    margin: 0;
    position: relative;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-remember-check .form-check-input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(161, 100, 156, 0.18);
    border-color: #a1649c;
}

.auth-remember-check .form-check-input[type="checkbox"]:checked {
    background-color: #a1649c;
    border-color: #a1649c;
}

.auth-remember-check .form-check-input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
    position: absolute;
}

.auth-btn {
    display: block;
    width: 100%;
    background-color: #a1649c;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    line-height: normal;
    cursor: pointer;
    margin-top: 6px;
    transition: background-color 0.2s;
}

    .auth-btn:hover {
        background-color: #884080;
    }

    .auth-btn.disabled,
    .auth-btn:disabled {
        background-color: #d4a8ce;
        cursor: not-allowed;
        pointer-events: none;
        opacity: 1;
    }

.auth-signup-row {
    font-weight: 400;
    color: #5F5E5A;
    text-align: center;
    line-height: 19.5px;
    padding: 14px 0 18px;
    margin: 0;
}

    .auth-signup-row a {
        color: #a1649c;
        font-weight: 500;
        text-decoration: none;
    }

        .auth-signup-row a:hover {
            text-decoration: underline;
        }

.backdrop-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    display: none;
    z-index: 1040;
}

.auth-validation {
    font-size: 12px;
}

/* Terms & Conditions checkbox box */
.auth-terms-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #F8F7F4;
    border: 1px solid #E0DED6;
    border-radius: 10px;
    padding: 13px 15px;
    font-size: 12px;
    font-weight: 400;
    color: #5F5E5A;
    line-height: 1.65;
    cursor: pointer;
    margin-top: 14px;
    margin-bottom: 0;
    user-select: none;
    transition: border-color 0.15s;
}

    .auth-terms-box:has(.auth-terms-check:checked) {
        border-color: #a1649c;
        background: rgba(161, 100, 156, 0.04);
    }

.auth-terms-check {
    width: 15px;
    height: 15px;
    min-width: 15px;
    margin-top: 2px;
    accent-color: #a1649c;
    cursor: pointer;
}

.auth-terms-link {
    color: #a1649c;
    text-decoration: none;
    font-weight: 500;
}

    .auth-terms-link:hover {
        text-decoration: underline;
    }

.auth-server-error {
    font-size: 14px;
    text-align: center;
    margin-bottom: 8px;
}

/* OTP digit inputs */
.otp-digit {
    width: 56px !important;
    height: 60px !important;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    border-radius: 10px;
    padding: 0;
    flex: 0 0 56px;
}

    .otp-digit:focus {
        border-color: #a1649c;
        box-shadow: 0 0 0 3px rgba(161, 100, 156, 0.15);
    }

    .otp-digit.filled {
        background-color: rgba(161, 100, 156, 0.08);
    }

/* ═══════════════════════════════════════════════════════
   Service Provider Listing
═══════════════════════════════════════════════════════ */

/* Filter row */
.sp-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-search-wrap {
    position: relative;
    flex: 1 1 220px;
    max-width: 340px;
}

.sp-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.sp-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid #E0DDD9;
    border-radius: 8px;
    font-size: 14px;
    color: #393939;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

    .sp-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(161, 100, 156, 0.12);
    }

    .sp-search-input::placeholder {
        color: #B0ADA8;
    }

.sp-filter-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-filter-select {
    height: 36px;
    padding: 0 30px 0 10px;
    border: 1px solid #E0DDD9;
    border-radius: 8px;
    font-size: 14px;
    color: #393939;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .sp-filter-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(161, 100, 156, 0.12);
    }

/* Action buttons */
.sp-action-btns {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .sp-action-btns button {
        border: 0;
        background: transparent;
        border: 0;
        background: transparent;
        margin: 0;
        padding: 0;
    }

/* Table */
.sp-table {
    width: 100%;
    border-collapse: collapse;
}

#service-provider-table thead th {
    font-size: 11px;
    font-weight: 600;
    color: #888780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 1px solid #F0EDE8;
    background: #FAFAF8;
    white-space: nowrap;
}

#service-provider-table tbody td {
    padding: 12px 14px;
    font-size: 14px;
    color: #393939;
    border-bottom: 1px solid #F0EDE8;
    vertical-align: middle;
}

#service-provider-table tbody tr:last-child td {
    border-bottom: none;
}

#service-provider-table tbody tr:hover {
    background: #FAFAF8;
}

.sp-td-name {
    font-weight: 500;
}

.sp-td-email,
.sp-td-contact,
.sp-td-address,
.sp-td-muted {
    color: #6B6B6B;
}

/* ═══════════════════════════════════════════════════════
   Service Provider Modal
═══════════════════════════════════════════════════════ */
.sp-modal-dialog {
    max-width: 520px;
}

.sp-modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.sp-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #F0EDE8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    font-style: normal;
}

.sp-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    line-height: 1;
    color: #6B6B6B;
    border-radius: 4px;
    transition: background-color 0.15s;
}

    .sp-modal-close:hover {
        background: #F0EDE8;
    }

.sp-modal-body {
    padding: 20px 24px 24px;
}

.sp-form-group {
    margin-bottom: 0;
}

.sp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-modal-body .sp-form-group,
.sp-modal-body .sp-form-row {
    margin-bottom: 16px;
}

    .sp-modal-body .sp-form-row .sp-form-group {
        margin-bottom: 0;
    }

.sp-form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #888780;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sp-form-input {
    background: #fff;
    border: 1px solid #E0DED6;
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 14px;
    font-weight: 400;
    color: #2C2C2A;
    font-family: 'DM Sans', sans-serif;
    line-height: normal;
    width: 100%;
    height: 40px;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

    .sp-form-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(161, 100, 156, 0.12);
    }

    .sp-form-input.sp-input-error {
        border-color: #FB6A57;
    }

    .sp-form-input::placeholder {
        color: #B0ADA8;
    }

.sp-field-error {
    display: block;
    font-size: 12px;
    color: #FB6A57;
    margin-top: 4px;
}

.sp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.sp-btn-cancel {
    height: 38px;
    padding: 0 18px;
    border: 1px solid #E0DDD9;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #6B6B6B;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .sp-btn-cancel:hover {
        background: #F5F3F0;
    }

.sp-btn-save {
    height: 38px;
    padding: 0 22px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .sp-btn-save:hover {
        background: var(--primary-dark);
    }

@media (max-width: 576px) {
    .sp-form-row {
        grid-template-columns: 1fr;
    }

    .sp-modal-dialog {
        margin: 12px;
    }
}


/* ══════════════════════════════════════════════════════════
   Participant Detail Page  (pd-* prefix)
══════════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────── */
.pd-breadcrumb {
    margin-bottom: 12px;
}

.pd-breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 6px;
    font-size: 14px;
    color: var(--friar);
}

    .pd-breadcrumb-list li + li::before {
        content: '›';
        margin-right: 6px;
        color: var(--friar);
    }

    .pd-breadcrumb-list a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
    }

        .pd-breadcrumb-list a:hover {
            text-decoration: underline;
        }

/* ── Header card ────────────────────────────────────── */
.pd-header {
    margin-bottom: 16px;
}

.pd-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}

.pd-avatar-wrap {
    flex-shrink: 0;
}

.pd-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--westar);
}

.pd-avatar-initials {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-header-info {
    flex: 1;
}

.pd-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--azure);
    margin: 0 0 6px;
}

.pd-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.pd-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--chicago);
}

.pd-header-actions {
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Tab wrapper ────────────────────────────────────── */
.pd-tabs-wrapper {
    overflow: hidden;
}

.pd-tab-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid var(--westar);
    background: var(--titan-white);
}

.pd-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 500;
    color: var(--chicago);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    font-family: var(--font-base);
}

    .pd-tab-btn:hover {
        color: var(--primary);
    }

    .pd-tab-btn.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
        font-weight: 600;
    }

.pd-tab-panel {
    padding: 24px;
}

/* ── Tab inner header ───────────────────────────────── */
.pd-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-tab-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--azure);
    margin: 0;
}

.pd-tab-subtitle {
    font-size: 14px;
    color: var(--chicago);
    margin: 4px 0 0;
}

/* ── Loading / empty states ─────────────────────────── */
.pd-tab-loading {
    font-size: 14px;
    color: var(--friar);
    padding: 20px 0;
}

.pd-empty {
    font-size: 14px;
    color: var(--friar);
    padding: 20px 0;
    margin: 0;
}

/* ══════════════════════════════════════════════════════
   Budget Overview
══════════════════════════════════════════════════════ */

.pd-budget-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.pd-budget-col {
    border: 1px solid var(--westar);
    border-radius: 10px;
    padding: 18px 16px;
    background: #fff;
}

.pd-budget-col-header {
    margin-bottom: 6px;
}

.pd-budget-category-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--friar);
}

.pd-budget-total {
    font-size: 28px;
    font-weight: 700;
    color: var(--azure);
    line-height: 1.1;
    margin-bottom: 4px;
}

.pd-budget-meta {
    font-size: 12px;
    color: var(--chicago);
    margin-bottom: 10px;
}

.pd-budget-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.pd-budget-bar-track {
    flex: 1;
    height: 6px;
    background: var(--pampas);
    border-radius: 3px;
    overflow: hidden;
}

.pd-budget-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

.pd-budget-bar-fill--ok {
    background: var(--dell);
}

.pd-budget-bar-fill--warn {
    background: var(--bourbon);
}

.pd-budget-bar-fill--danger {
    background: var(--well-read);
}

.pd-budget-pct {
    font-size: 11px;
    color: var(--friar);
    white-space: nowrap;
}

/* ── Budget line items ──────────────────────────────── */
.pd-line-item {
    margin-bottom: 14px;
}

.pd-line-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 6px;
}

.pd-line-item-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pd-field-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pd-field-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--friar);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.pd-field-input {
    border: 1px solid var(--westar);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--tuatara);
    background: var(--titan-white);
    width: 100%;
    outline: none;
    font-family: var(--font-base);
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   Support Workers
══════════════════════════════════════════════════════ */

.pd-worker-card {
    margin-bottom: 14px;
}

    .pd-worker-card:last-child {
        margin-bottom: 0;
    }

.pd-worker-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
}

.pd-worker-avatar {
    flex-shrink: 0;
}

.pd-worker-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--westar);
}

.pd-worker-avatar-initials {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-worker-info {
    flex: 1;
}

.pd-worker-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--tuatara);
    margin-bottom: 2px;
}

.pd-worker-code {
    margin-bottom: 8px;
}

.pd-worker-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pd-rate-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    background: var(--loafer);
    color: var(--dell);
}

.pd-rate-chip--sat {
    background: var(--selago);
    color: var(--fun-blue);
}

.pd-rate-chip--sun {
    background: var(--indigo-light);
    color: var(--blue-violet);
}

.pd-rate-chip--ph {
    background: var(--citrine);
    color: var(--bourbon);
}

.pd-rate-chip--tr {
    background: #F1EFE8;
    color: var(--chicago);
}

.pd-worker-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.pd-worker-amount {
    font-size: 17px;
    font-weight: 700;
    color: var(--azure);
}

.pd-edit-rates-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

    .pd-edit-rates-link:hover {
        text-decoration: underline;
    }

/* ══════════════════════════════════════════════════════
   Forecast & Risk
══════════════════════════════════════════════════════ */

.pd-forecast-card {
    margin-bottom: 14px;
}

    .pd-forecast-card:last-child {
        margin-bottom: 0;
    }

.pd-forecast-table {
    border-collapse: collapse;
    font-size: 14px;
}

    .pd-forecast-table td {
        padding: 10px 16px;
        border-bottom: 1px solid var(--westar);
    }

    .pd-forecast-table tr:last-child td {
        border-bottom: none;
    }

.pd-forecast-label {
    color: var(--chicago);
}

.pd-forecast-amount {
    text-align: right;
    color: var(--tuatara);
    font-weight: 500;
    white-space: nowrap;
    min-width: 100px;
}

.pd-forecast-surplus td {
    background: var(--loafer);
}

/* ── Reports placeholder ────────────────────────────── */
.pd-reports-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--friar);
    font-size: 14px;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 991px) {
    .pd-budget-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .pd-budget-grid {
        grid-template-columns: 1fr;
    }

    .pd-header-inner {
        flex-wrap: wrap;
    }

    .pd-line-item-fields {
        grid-template-columns: 1fr;
    }

    .pd-worker-card-inner {
        flex-wrap: wrap;
    }
}

}

/* ══════════════════════════════════════════
   PARTICIPANT FORM STYLES - Using Bootstrap
══════════════════════════════════════════ */

/* 📊 Wizard Stepper */
.wizard-step-num {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1.5px solid #c4b5d6 !important;
    color: #af72aa !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.wizard-step {
    color: #9ca3af;
}

    .wizard-step.active {
        color: #111827;
    }

        .wizard-step.active .wizard-step-num {
            background: #AF72AA !important;
            border-color: #AF72AA !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
        }

.wizard-connector {
    width: 120px !important;
    height: 1.5px !important;
    background: #d1d5db !important;
    margin: 0 8px !important;
    flex-shrink: 0;
}

/* 📦 Participant Card - Extends Bootstrap .card */
.participant-card {
    border-radius: 16px;
    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);*/
}

/* 📝 Form Control Extensions */
.form-control.pf-control,
.form-select.pf-control {
    border-color: #e5e7eb;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 48px !important;
}

    .form-control.pf-control.input-validation-error,
    .form-select.pf-control.input-validation-error {
        border-color: var(--text-danger);
    }

    .form-control.pf-control:focus, .form-select.pf-control:focus {
        border-color: var(--primarycolor) !important;
        box-shadow: 0 0 0 3px rgba(147,51,234,.1) !important;
        outline: none !important;
    }

.auth-input.input-validation-error {
    border-color: var(--text-danger);
}

.pw-wrapper:has(input.input-validation-error) span {
    border-color: var(--text-danger) !important;
}

.pw-wrapper:has(input.sp-input-error) span {
    border-color: var(--text-danger) !important;
}

.sp-form-input.error {
    border-color: var(--text-danger);
}

.pw-wrapper:has(input.error) span {
    border-color: var(--text-danger) !important;
}

/* ✅ Funding Type Checkboxes */
.funding-check-item {
    border: 2px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
}

    .funding-check-item:hover {
        border-color: #AF72AA;
        background: #faf5ff;
    }

    .funding-check-item.checked {
        border-color: #AF72AA;
        background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    }

    .funding-check-item .form-check-input {
        width: 20px !important;
        height: 20px !important;
        cursor: pointer;
        border-radius: 4px !important;
    }

        .funding-check-item .form-check-input:checked {
            background-color: #AF72AA !important;
            border-color: #AF72AA !important;
        }

        .funding-check-item .form-check-input:focus {
            border-color: #AF72AA !important;
            box-shadow: 0 0 0 3px rgba(147,51,234,.15) !important;
        }



/* 💡 Hint Banner - Extends Bootstrap .alert */
.hint-banner {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
    color: #065f46;
}

    .hint-banner strong {
        color: #047857;
    }

/* 🎯 Action Buttons */
.btn-pf-cancel {
    background-color: #fff !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
    min-width: unset !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-decoration: none;
}

    .btn-pf-cancel:hover,
    .btn-pf-cancel:focus {
        background-color: #f9fafb !important;
        border-color: #9ca3af !important;
        color: #111827 !important;
    }

.btn-pf-save {
    background-color: #fff !important;
    border-color: #AF72AA !important;
    color: #AF72AA !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    min-width: unset !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

    .btn-pf-save:hover,
    .btn-pf-save:focus,
    .btn-pf-save:active {
        background-color: var(--primarycolor ) !important;
        border-color: var(--primarycolor ) !important;
        color: #fff !important;
    }

.btn-pf-continue {
    background: linear-gradient(135deg, #AF72AA 0%, #AF72AA 100%) !important;
    border-color: transparent !important;
    border-width: 0 !important;
    color: #fff !important;
    min-width: unset !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

    .btn-pf-continue:hover,
    .btn-pf-continue:focus,
    .btn-pf-continue:active {
        background: linear-gradient(135deg, #AF72AA 0%, #AF72AA 100%) !important;
        border-color: transparent !important;
        color: #fff !important;
        box-shadow: 0 6px 12px -2px rgba(147, 51, 234, 0.45);
    }

/* ═══════════════════════════════════════════════════════════
       FUNDING ALLOCATION PAGE
    ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
       FUNDING ALLOCATION PAGE
    ═══════════════════════════════════════════════════════════ */

/* Page background */
.fa-page-bg {
    background: #f5f3ef;
    min-height: 100vh;
    padding: 40px 24px 80px;
}

.fa-page-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* ── Wizard stepper ──────────────────────────────────────── */
.fa-wizard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 36px;
}

.fa-wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Connector line between steps */
.wizard-connector {
    width: 120px;
    height: 1.5px;
    background: #d1d5db;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Numbered circle */
.wizard-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #c4b5d6;
    background: #fff;
    color: #AF72AA;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .wizard-step-num.active {
        border-color: #AF72AA;
        background: #AF72AA;
        color: #fff;
    }

    .wizard-step-num.complete {
        border-color: #c4b5d6;
        background: #fff;
        color: #AF72AA;
    }

.fa-wizard-label {
    font-size: 14px;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}

    .fa-wizard-label.active {
        color: #AF72AA;
        font-weight: 600;
    }

/* ── Main card ───────────────────────────────────────────── */
.fa-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

/* ── Area nav tabs ───────────────────────────────────────── */
.fa-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 24px;
    gap: 0;
    background: #fff;
    margin-bottom: 0;
}

    .fa-tabs .nav-item {
        list-style: none;
        background: white;
        padding: 0px
    }

    .fa-tabs .nav-link {
        color: #6b7280;
        font-weight: 500;
        font-size: 14px;
        padding: 14px 18px 12px;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        background: transparent;
        border-radius: 0;
        transition: color 0.15s, border-color 0.15s;
        cursor: pointer;
    }

        .fa-tabs .nav-link:hover {
            color: #AF72AA !important;
            border-bottom-color: #af72aa !important;
        }

        .fa-tabs .nav-link.active {
            color: #AF72AA;
            border-bottom-color: #AF72AA;
            font-weight: 600;
        }

/* ── Tab content area ────────────────────────────────────── */
.fa-tab-content {
    padding: 24px;
}

/* ── Funding-type section card ───────────────────────────── */
.fa-section {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px 12px;
    background: #f5f3ef;
    margin-bottom: 16px;
}

    .fa-section::before {
        content: none;
    }

    .fa-section:last-child {
        margin-bottom: 0;
    }

.fa-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 2px;
}

.fa-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.01em;
}

/* Total funding label */
.fa-total {
    font-size: 14px;
    color: #6b7280;
    font-weight: 400;
}

.fa-total-value {
    font-weight: 700;
    color: #AF72AA;
    font-size: 16px;
    letter-spacing: -0.01em;
}

/* ── Category row ────────────────────────────────────────── */
.fa-category-row {
    padding: 10px 0 10px;
    border-top: 0px solid #f3f4f6;
}

    .fa-category-row:first-of-type {
        border-top: 1px solid #ede9e3;
    }

/* ── Checkbox ────────────────────────────────────────────── */
.fa-cat-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    accent-color: #AF72AA;
    flex-shrink: 0;
    margin-top: 1px;
}

.fa-cat-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
}

/* ── Sub-fields (plan type + amount) ─────────────────────── */
.fa-sub-fields {
    display: none;
    margin-top: 10px;
    padding-bottom: 8px;
}

    .fa-sub-fields.show {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

.fa-sub-col-plan {
    flex: 0 0 calc(57% - 7px);
    min-width: 200px;
}

.fa-sub-col-amount {
    flex: 0 0 calc(43% - 7px);
    min-width: 160px;
}

/* Field label above input */
.fa-field-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-bottom: 6px;
}

/* ── Plan type select ────────────────────────────────────── */
.fa-plan-select {
    width: 100%;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    padding: 0 36px 0 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .fa-plan-select:focus {
        border-color: #af72aa;
        box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.10);
        outline: none;
    }

/* ── Amount input group ──────────────────────────────────── */
.fa-amount-group {
    display: flex;
    align-items: center;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .fa-amount-group:focus-within {
        border-color: #af72aa;
        box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.10);
    }

    .fa-amount-group .fa-currency {
        padding: 0 11px;
        color: #6b7280;
        font-size: 14px;
        background: #f9fafb;
        border-right: 1px solid #e5e7eb;
        height: 100%;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .fa-amount-group .fa-amount-input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 14px;
        color: #374151;
        text-align: right;
        padding: 0 12px;
        height: 100%;
        background: transparent;
        box-shadow: none;
    }

        .fa-amount-group .fa-amount-input:focus {
            box-shadow: none;
            outline: none;
        }

    .fa-amount-group.is-invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
    }

/* ── Action footer ───────────────────────────────────────── */
.fa-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.fa-btn-cancel {
    padding: 10px 26px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

    .fa-btn-cancel:hover {
        background: #f3f4f6;
        border-color: #9ca3af;
        color: #1f2937;
    }

.fa-btn-skip {
    padding: 10px 26px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

    .fa-btn-skip:hover {
        background: #f3f4f6;
        border-color: #9ca3af;
        color: #374151;
    }

.fa-btn-save {
    padding: 10px 26px;
    background: #AF72AA;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px -2px rgba(147, 51, 234, 0.40);
    transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
    line-height: 1;
}

    .fa-btn-save:hover {
        background: #AF72AA;
        box-shadow: 0 6px 18px -2px rgba(147, 51, 234, 0.50);
        transform: translateY(-1px);
    }

    .fa-btn-save:disabled {
        opacity: 0.65;
        pointer-events: none;
        transform: none;
    }

/* ── Disabled category row ───────────────────────────────── */
.fa-row-disabled {
    opacity: 0.40;
    pointer-events: none;
    user-select: none;
}

    .fa-row-disabled .fa-cat-label {
        color: #9ca3af;
        cursor: not-allowed;
    }

/* ── Validation error states ─────────────────────────────── */
.fa-plan-select.fa-field-error {
    border-color: var(--text-danger);
    border-color: var(--text-danger) !important;
    /*        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;*/
}

.fa-amount-group:has(.fa-amount-input.fa-field-error) {
    border-color: #ef4444 !important;
    /* box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;*/
}

.fa-row-error {
    font-size: 12px;
    color: var(--text-danger);
    margin-top: 4px;
    padding-left: 2px;
}

.btn.btn-sm {
    font-size: 13px;
    padding: 7px 15px;
}

.btn.min-w-none {
    min-width: auto
}

.select-plan-btn {
    background: #F1E8F0;
    border-color: transparent;
    border-width: 0;
    color: var(--primarycolor);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}


/*--plan css*/
.subscription-wrapper {
    margin: 0 auto;
    max-width: 950px;
    padding: 40px 0 0 0;
}

.plan-table {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #E4DBE3;
    background: #fff;
    margin-bottom: 40px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.03);
    background: #CDB0CB;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

    .plan-table th {
        vertical-align: top;
        padding: 18px 12px;
        font-size: 16px;
    }

    .plan-table td {
        padding: 18px 12px;
        font-size: 16px;
        vertical-align: middle;
    }

    .plan-table th {
        background: #fff;
        color: #222;
        font-weight: 700;
        border-bottom: 1px solid #f1d6e8;
        text-align: center;
    }

    .plan-table.table thead th {
        background: #fff;
        padding: 20px 10px
    }

    .plan-table th:first-child, .plan-table td:first-child {
        text-align: left;
        min-width: 220px;
        font-weight: 400;
        background: #fff;
        font-size: 14px;
        color: #333
    }

    .plan-table tr:nth-child(even) td {
        background: #faf8f6;
    }

    .plan-table tr:nth-child(odd) td {
        background: #fff;
    }

    .plan-table .plan-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .plan-table .plan-title {
        font-size: 14px;
        font-weight: 700;
        color: #222;
        margin-bottom: 5px;
    }

    .plan-table .plan-subtitle {
        font-size: 13px;
        color: #888;
        margin-bottom: 6px;
        white-space: nowrap
    }

    .plan-table .plan-price {
        font-size: 16px;
        font-weight: 700;
        color: #222;
        margin-bottom: 2px;
    }

        .plan-table .plan-price span {
            font-size: 12px;
            font-weight: 600
        }

    .plan-table .plan-cycle {
        font-size: 13px;
        color: #888;
        font-weight: 400;
    }

    .plan-table .btn-get-started {
        border-radius: 16px;
        padding: 7px 0;
        width: 120px;
        font-weight: 600;
        font-size: 15px;
        border: none;
        margin-top: 8px;
        background: #f3c1e3;
        color: #fff;
        transition: background 0.2s;
    }

        .plan-table .btn-get-started.active,
        .plan-table .btn-get-started:active,
        .plan-table .btn-get-started:focus {
            background: #d87ebd;
            color: #fff;
        }

        .plan-table .btn-get-started.selected {
            background: #d87ebd;
            color: #fff;
        }

        .plan-table .btn-get-started:not(.active):hover {
            background: #d87ebd;
            color: #fff;
        }

    .plan-table .text-success {
        color: #A1649C !important;
        font-size: 18px;
        font-weight: 400;
    }

    .plan-table .text-na {
        color: #bbb;
        font-size: 16px;
        font-weight: 600;
    }

    .plan-table .active-col {
        background: #f7eaf5 !important;
    }

    .plan-table td {
        text-align: center;
    }

        .plan-table td:first-child {
            text-align: left;
        }

    .plan-table .plan-header .btn-get-started {
        margin-top: 10px;
    }

    .plan-table .btn-get-started {
        box-shadow: none;
    }

        .plan-table .btn-get-started:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .plan-table .btn-get-started.selected {
            background: #d87ebd;
            color: #fff;
        }

    .plan-table .btn-get-started {
        background: #f3c1e3;
        color: #fff;
    }

.plan-card {
    background: #FFF9EE;
    border: 1px solid #F9E0B1;
    border-radius: 12px;
    padding: 18px 20px;
    position: relative;
}


.plan-sub {
    font-size: 14px;
    color: #555;
    margin-top: 4px;
}

.status-badge {
    position: absolute;
    top: 18px;
    right: 20px;
    background: #61B15C;
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
}

.subscription-badge {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid var(--secondrycolor);
    padding: 5px 10px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondrycolor);
    display: inline-block;
}

.dataTables_wrapper .dataTables_info {
    color: #666 !important;
    padding: 13px 0 0 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: 0px !important;
    background: var(--primarycolor) !important;
    color: #fff
}

.swal2-confirm {
    background: var(--primary);
}

.on-track-txt {
    color: #3B6D11
}

.near-limit-text {
    color: #BA7517
}

.over-spend-text {
    color: #A32D2D
}

.mobile-country-code {
    position: relative
}

    .mobile-country-code input {
        padding-left: 45px
    }

    .mobile-country-code .code-no {
        position: absolute;
        top: 15px;
        left: 16px;
        font-size: 14px;
    }

.asterisk-txt {
    color: var(--text-danger);
    font-size: 12px;
    top: -2px;
}

.page-header .page-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 39vw;
    overflow: hidden;
}

.sw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center
}

.sw-modal-dialog {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.18)
}

.sw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0
}

.sw-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0
}

.sw-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #666;
    line-height: 1
}

.sw-participant-badge {
    background: var(--primary-light);
    border-radius: 8px;
    margin: 14px 24px 0;
    padding: 10px 14px
}

.sw-participant-label {
    display: block;
    font-size: .7rem;
    color: #888;
    margin-bottom: 2px;
    letter-spacing: .05em
}

.sw-participant-name {
    font-weight: 600;
    font-size: .95rem
}

.sw-modal-tabs {
    display: flex;
    gap: 0;
    padding: 16px 24px 0;
    border-bottom: 2px solid #eee;
    margin-top: 8px
}

.sw-modal-tab {
    background: none;
    border: none;
    padding: 8px 0;
    margin-right: 24px;
    font-size: .85rem;
    cursor: pointer;
    color: #888;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px
}

    .sw-modal-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
        font-weight: 600
    }

.sw-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1
}

.sw-modal-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #eee
}

.sw-form-group {
    margin-bottom: 14px
}

.sw-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #555;
    margin-bottom: 5px
}

.sw-required {
    color: #E53E3E
}

.sw-input, .sw-select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: .9rem;
    color: #333;
    background: #fff;
    box-sizing: border-box
}

    .sw-input:focus, .sw-select:focus {
        outline: none;
        border-color: var(--primary)
    }

    .sw-input[readonly] {
        background: #f7f7f7;
        color: #888
    }

.sw-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.sw-select-wrap {
    position: relative
}

.sw-search-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px 6px 0 0;
    padding: 7px 12px;
    font-size: .85rem;
    border-bottom: none;
    box-sizing: border-box
}

    .sw-search-input:focus {
        outline: none;
        border-color: #7B5EA7
    }

.sw-select-wrap .sw-select {
    border-radius: 0 0 6px 6px;
    min-height: 36px
}

.sw-dates-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px
}

.sw-rates-hint {
    font-size: .7rem;
    font-weight: 600;
    color: #196219;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 10px
}

.sw-rates-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px
}

.sw-check-row {
    margin-bottom: 14px
}

.sw-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    cursor: pointer
}

    .sw-check-label input[type=checkbox] {
        accent-color: #7B5EA7;
        width: 16px;
        height: 16px;
        cursor:pointer
    }

.sw-days-row {
    display: flex;
    gap:12px;
    flex-wrap: wrap
}

.sw-day-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.sw-day-label {
    font-size: .7rem;
    font-weight: 600;
    color: #555
}

.sw-day-input {
    width:62px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 7px 6px;
    font-size: .82rem;
    text-align: center
}

    .sw-day-input:focus {
        outline: none;
        border-color: #7B5EA7
    }

/* ── Direct Amount Allocation (NEW) ─────────────────────────────────── */
.sw-period-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px
}

.sw-period-box {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sw-period-box-label-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap
}

.sw-period-box-label {
    font-size: .85rem;
    font-weight: 700;
    color: #222
}

.sw-period-box-daterange {
    font-size: .72rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .02em
}

.sw-period-box-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: .95rem;
    color: #333;
    box-sizing: border-box
}

    .sw-period-box-input:focus {
        outline: none;
        border-color: #7B5EA7
    }

.sw-period-year-group {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden
}

.sw-period-year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    background: #fafafa
}

.sw-period-year-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #555
}

.sw-period-year-toggle-icon {
    color: #7B5EA7;
    transition: transform .15s ease
}

    .sw-period-year-toggle-icon.collapsed {
        transform: rotate(-90deg)
    }

.sw-period-year-body {
    padding: 16px 12px 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px
}

.sw-add-li-btn {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--primary);
    background: #fff;
    font-size: .88rem;
    cursor: pointer;
    margin-top: 8px
}

    .sw-add-li-btn:hover {
        background: #f4f0fb
    }

.sw-li-block {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 14px
}

.sw-li-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    background: #fafafa;
    border-radius: 8px 8px 0 0
}

.sw-li-block-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0
}

.sw-li-block-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #555
}

.sw-li-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.sw-li-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 4px;
    display: flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0
}

    .sw-li-collapse-btn svg {
        transition: transform 0.2s ease
    }

    .sw-li-collapse-btn.collapsed svg {
        transform: rotate(-180deg)
    }

.sw-li-block-body {
    padding: 14px
}

.sw-field-error {
    display: none;
    color: #E53E3E;
    font-size: .75rem;
    margin-top: 4px
}

.sw-field-error:not(:empty) {
    display: block
}

.sw-input--error {
    border-color: #E53E3E !important
}

.pw-wrapper:has(.sw-input--error) > span {
    border-color: #E53E3E !important
}

.sw-submit-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: .9rem;
    cursor: pointer
}

    .sw-submit-btn:hover {
        background: var(--primary-dark)
    }

.sw-worker-block {
    padding: 0;
    overflow: hidden;
    background: #f8f7f4;
}

.sw-worker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f0eee8
}
.sw-worker-block .sw-line-item:last-child{
    margin-bottom:0px
}
.sw-worker-block .sw-line-item {
    background: #FFF;
    margin-bottom: 5px
}

.sw-worker-name {
    font-weight: 600;
    font-size: .95rem
}

.sw-edit-btn {
    font-size: .8rem;
    padding: 5px 12px
}

.sw-line-item {
    padding: 12px 18px;
    border-bottom: 1px solid #f0eee8
}

.sw-li-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px
}

.sw-li-meta {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.sw-li-code {
    font-size: .85rem;
    font-weight: 500;
    color: #333
}

.sw-li-dates {
    font-size: .75rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px
}

.sw-li-amount {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap
}

.sw-li-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.sw-li-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.sw-li-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0
}


.sw-icon-btn {
    background: none;
    border:0px solid #eee;
    border-radius: 6px;
    padding:5px;
    cursor: pointer
}

    .sw-icon-btn:hover {
        background:transparent
    }

.sw-icon-btn--danger:hover {
    background:transparent;
    border-color:transparent;
}

.sw-worker-total-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    font-weight: 600;
    border-top: 2px solid #f0eee8;
    margin-top: 0
}

.sw-li-ph-breakdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 12px;
    background: #fffbf0;
    border-top: 1px dashed #f5c842;
    font-size: 13px;
    color: #5a4a00;
}

.sw-ph-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sw-ph-item strong {
    font-weight: 700;
    color: #3d3000;
}

.sw-ph-sep {
    color: #bfa030;
    font-weight: 700;
    font-size: 15px;
}

.sw-ph-surcharge strong {
    color: #c05000;
}

.sw-ph-total strong {
    color: #1a7a1a;
}

.sw-worker-block .sw-line-item:nth-last-child(2) {
    margin-bottom: 0;
}


.sw-li-rate-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 12px;
}

.pd-rate-chip--sun {
    background: #6f42c1;
    color: #fff;
}
/* Custom searchable dropdown */
.sw-dd-wrap {
    position: relative;
}

.sw-dd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    min-height: 38px;
    user-select: none;
    overflow: hidden;
}

    .sw-dd-trigger:hover {
        border-color: #7B5EA7;
    }

    .sw-dd-trigger .sw-dd-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .sw-dd-trigger .sw-dd-arrow {
        font-size: 10px;
        color: #888;
        margin-left: 8px;
        flex-shrink: 0;
        transition: transform .2s;
    }

    .sw-dd-trigger.open .sw-dd-arrow {
        transform: rotate(180deg);
    }

.sw-dd-panel {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    overflow: hidden;
}

    .sw-dd-panel.open {
        display: block;
    }

.sw-dd-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    outline: none;
}

.sw-dd-list {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 0 0 6px 6px;
}

    .sw-dd-list li {
        padding: 8px 12px;
        font-size: 13px;
        cursor: pointer;
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
    }

        .sw-dd-list li:hover {
            background: #f3eeff;
        }

        .sw-dd-list li.selected {
            background: #ede7fa;
            font-weight: 600;
        }

        .sw-dd-list li.hidden {
            display: none;
        }

        .sw-dd-list li.no-results {
            color: #aaa;
            cursor: default;
        }

            .sw-dd-list li.no-results:hover {
                background: none;
            }

        .sw-dd-list li[data-value=""] {
            color: #aaa;
            font-style: italic;
        }
/* Line item total preview */
.sw-li-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 4px;
    border-top: 1px solid #eee;
    margin-top: 10px;
    font-size: 13px;
}

.sw-li-total-label {
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sw-li-total-value {
    font-weight: 700;
    color: #7B5EA7;
    font-size: 15px;
}

.sw-li-total-hint {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}
.sw-li-delete-btn {
    border:0;
    background:transparent;
}


<style >
/* ── Payment modal overlay (matches Purchase Branding & White-Label modal) ── */
.payment-details {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.payment-modal-box {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}

.payment-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid #f0f0f0;
}

.payment-modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
}

.payment-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 0.2rem;
}

    .payment-modal-close:hover {
        color: #333;
    }

.payment-modal-body {
    padding: 1.3rem 1.4rem 0.8rem;
}

.payment-modal-sub {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}

.payment-modal-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 1.1rem;
    font-size: 0.95rem;
    color: #222;
}

.payment-modal-amount {
    font-weight: 700;
    color: #1a1a1a;
}

.payment-modal-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payment-modal-card-wrap {
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    background: #fff;
    margin-bottom: 0.5rem;
}

.payment-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid #f0f0f0;
}

.btn-payment-confirm {
    background-color: #7b1fa2;
    border-color: #7b1fa2;
    color: #fff;
    padding: 0.45rem 1.4rem;
    border-radius: 6px;
    font-weight: 600;
}

    .btn-payment-confirm:hover,
    .btn-payment-confirm:focus {
        background-color: #6a1b9a;
        border-color: #6a1b9a;
        color: #fff;
    }

    .btn-payment-confirm:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

</style >
.sw-phone-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #E0DED6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sw-phone-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(161, 100, 156, 0.12);
}

.sw-phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 13px;
    color: #2C2C2A;
    background: #f9fafb;
    border-right: 1px solid #E0DED6;
    white-space: nowrap;
    flex-shrink: 0;
}

.sw-phone-input {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    min-width: 0;
    height: 40px;
}

    .sw-phone-input:focus {
        border: none !important;
        box-shadow: none !important;
    }

.sw-phone-group.sw-input--error {
    border-color: #E53E3E;
}
/* ── Category accordion cards ───────────────────────────────── */
.fa-cat-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.fa-cat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    cursor: pointer;
    user-select: none;
}

    .fa-cat-card-header .fa-cat-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.92rem;
        font-weight: 600;
        color: #1a1a1a;
    }

        .fa-cat-card-header .fa-cat-title input[type=checkbox] {
            width: 16px;
            height: 16px;
            accent-color: var(--primary, #9b5de5);
            cursor: pointer;
            flex-shrink: 0;
        }

.fa-cat-chevron {
    transition: transform .2s;
    color: #888;
}

.fa-cat-card.is-open .fa-cat-chevron {
    transform: rotate(180deg);
}

.fa-cat-card.is-disabled .fa-cat-card-header {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Card body: two-column plan-type / total-funding row ─────── */
.fa-cat-body {
    padding: 0 16px 16px;
    border-top: 1px solid #f0f0f0;
}

.fa-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 14px;
}

.fa-field-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 5px;
}

/* Plan-type select */
.fa-plan-select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 9px 32px 9px 12px;
    font-size: 0.9rem;
    color: #1a1a1a;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

    .fa-plan-select:focus {
        border-color: var(--primary, #9b5de5);
        box-shadow: 0 0 0 3px rgba(155,93,229,.12);
        outline: none;
    }

    .fa-plan-select.fa-field-error {
        border-color: #dc3545;
    }

/* Total funding input */
.fa-amount-group {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

    .fa-amount-group:focus-within {
        border-color: var(--primary, #9b5de5);
        box-shadow: 0 0 0 3px rgba(155,93,229,.12);
    }

    .fa-amount-group.fa-field-error {
        border-color: #dc3545;
    }

.fa-currency {
    padding: 9px 10px;
    font-size: 0.9rem;
    color: #888;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    font-weight: 600;
}

.fa-amount-input {
    border: none;
    outline: none;
    flex: 1;
    padding: 9px 10px;
    font-size: 0.9rem;
    text-align: right;
    min-width: 0;
    background: #fff;
}

/* Balance badge – block line under total-funding, never in the label */
.fp-balance-status {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
    color: #dc3545;
    min-height: 1rem;
}

    .fp-balance-status.fp-total-ok {
        color: #28a745;
    }

/* ── Period split table ─────────────────────────────────────── */
.fp-periods-container {
    margin-top: 14px;
}

.fp-period-table {
    width: 100%;
    border-collapse: collapse;
}

    .fp-period-table th {
        font-size: 0.72rem;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        padding: 7px 10px;
        background: #f8f8f8;
        border-bottom: 1px solid #e0e0e0;
    }

    .fp-period-table td {
        padding: 9px 10px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.88rem;
        vertical-align: middle;
    }

    .fp-period-table tr:last-child td {
        border-bottom: none;
    }

.fp-period-amount {
    width: 190px;
}

.fp-amount-group-sm {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

    .fp-amount-group-sm:focus-within {
        border-color: var(--primary,#9b5de5);
        box-shadow: 0 0 0 2px rgba(155,93,229,.1);
    }

    .fp-amount-group-sm .fp-currency {
        padding: 5px 7px;
        font-size: 0.85rem;
        color: #888;
        background: #f9fafb;
        border-right: 1px solid #e5e7eb;
        font-weight: 600;
    }

.fp-amount-input {
    border: none;
    outline: none;
    flex: 1;
    padding: 5px 8px;
    font-size: 0.88rem;
    text-align: right;
    background: #fff;
    min-width: 0;
}

    .fp-amount-input.fp-field-error {
        background: #fff5f5;
    }

.fp-period-error {
    color: #dc3545;
    font-size: 0.8rem;
    padding: 4px 0 0;
}

.reports-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.reports-title {
    font-size: 15px;
    font-weight: 700;
    color: #14213d;
    margin: 0;
}

.reports-note-text {
    font-size: 12px;
    color: #8a8580;
    margin-left: auto;
}

.reports-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-card {
    background: #fff;
    border: 1px solid #e7e0d8;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.report-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.report-icon-box {
    width: 39px;
    height: 39px;
    border-radius: 8px;
    background: #eef1f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f3437;
    font-size: 17px;
    flex-shrink: 0;
}

.report-name {
    font-size: 14px;
    font-weight: 700;
    color: #14213d;
    margin-bottom: 4px;
}

.report-subtitle {
    font-size: 12px;
    color: #6e6a66;
}

.report-generate-btn {
    background: #a85b9e;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 3px;
}

    .report-generate-btn:hover {
        background: #934a8a;
    }

.reports-warning-box {
    margin-top: 34px;
    border: 1px solid #f2994a;
    background: #fff3df;
    color: #8a4b11;
    border-radius: 8px;
    padding: 14px;
    font-size: 12px;
}

/* ── Budget bar colours by funding type ─────────────────────── */
.pd-bar-fill--core {
    background: #7B5EA7;
}

.pd-bar-fill--capacity {
    background: #f2994a;
}

.pd-bar-fill--capital {
    background: #3b5bdb;
}

/* ── Budget field inputs — plain white, no tint ──────────────── */
.pd-field-input {
    background: #fff !important;
    color: #2C2C2A !important;
    border: 1px solid #E0DED6;
    border-radius: 8px;
}

/* ── Forecast & Risk ─────────────────────────────────────────── */
.fr-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff3df;
    border: 1px solid #f2994a;
    color: #8a4b11;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 12px;
    margin-bottom: 20px;
}

.fr-subtab-list {
    display: flex;
    border-bottom: 2px solid #e7e0d8;
    margin-bottom: 20px;
}

.fr-subtab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #6e6a66;
    cursor: pointer;
}

    .fr-subtab.active {
        color: #7B5EA7;
        border-bottom-color: #7B5EA7;
    }

.fr-category-section {
    margin-bottom: 28px;
}

.fr-category-name {
    font-size: 13px;
    font-weight: 700;
    color: #14213d;
    margin: 0 0 10px 0;
}

.fr-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e7e0d8;
}

.fr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .fr-table thead tr {
        background: #f7f5f2;
    }

    .fr-table thead th {
        padding: 10px 14px;
        font-size: 11px;
        font-weight: 700;
        color: #8a8580;
        text-align: left;
        white-space: nowrap;
        border-bottom: 1px solid #e7e0d8;
    }

    .fr-table tbody .fr-cell {
        padding: 10px 14px;
        color: #2C2C2A;
        border-bottom: 1px solid #f0ece6;
        white-space: nowrap;
    }

    .fr-table tbody tr:last-child .fr-cell {
        border-bottom: none;
    }

.fr-qrow--current .fr-cell {
    background: #fdf4ff;
}

.fr-qrow--forecast .fr-cell {
    color: #a0a0a0;
}

.fr-remaining {
    color: #7B5EA7 !important;
    font-weight: 700;
}

.fr-rollout-link {
    color: #7B5EA7 !important;
    font-weight: 700;
}

.fr-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

    .fr-status::before {
        content: '●';
        font-size: 7px;
    }

.fr-status--complete {
    background: #e6f4ea;
    color: #1e7e34;
}

.fr-status--ontrack {
    background: #e6f4ea;
    color: #1e7e34;
}

.fr-status--forecast {
    background: #f0ece6;
    color: #8a8580;
}

.fr-summary-bar {
    display: flex;
    margin-top: 28px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e7e0d8;
}

.fr-summary-item {
    flex: 1;
    background: #fff;
    padding: 20px 24px;
    border-right: 1px solid #e7e0d8;
}

    .fr-summary-item:last-child {
        border-right: none;
    }

.fr-summary-label {
    font-size: 11px;
    font-weight: 700;
    color: #8a8580;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.fr-summary-amount {
    font-size: 22px;
    font-weight: 800;
    color: #14213d;
    margin-bottom: 4px;
}

.fr-summary-sub {
    font-size: 11px;
    color: #8a8580;
}

.fr-summary-status-badge {
    font-size: 22px;
    font-weight: 800;
    color: #14213d;
    margin-bottom: 4px;
}

.fr-summary-status--good {
    background: #f0fdf4;
}

.bt-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
/*    background: #f3f4f6;*/
    padding: 1rem;
    border-radius: 10px;
}

@media(max-width:1200px) {
    .bt-grid {
        flex-wrap: wrap;
    }
    .bt-col {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 280px;
    }
}

@media(max-width:1024px) {
    /* iPad landscape & tablet — 2-col budget grid */
    .bt-grid {
        flex-wrap: wrap;
        gap: .75rem;
        padding: .75rem;
    }
    .bt-col {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 260px;
    }
    /* 3-col entry fields → 2 cols on tablet */
    .bt-entry-fields--3 {
        grid-template-columns: 1fr 1fr;
    }
    /* keep the date field full-width as 3rd item */
    .bt-entry-fields--3 .bt-fg:nth-child(3) {
        grid-column: 1 / -1;
    }
    .bt-col-amount { font-size: .9rem; }
    .bt-fi { font-size: .8rem; padding: .28rem .45rem; }
    .bt-fl { font-size: .58rem; }
    .bt-save-btn, .bt-reset-btn { font-size: .78rem; padding: .3rem .9rem; }
}

@media(max-width:820px) {
    /* iPad portrait — single column budget grid */
    .bt-grid {
        flex-direction: column;
        gap: .75rem;
        padding: .75rem;
    }
    .bt-col {
        flex: 1 1 100%;
        min-width: 0;
    }
    /* entry fields → 2 cols */
    .bt-entry-fields--3 {
        grid-template-columns: 1fr 1fr;
    }
    .bt-entry-fields--3 .bt-fg:nth-child(3) {
        grid-column: 1 / -1;
    }
    .bt-col-amount { font-size: 1rem; }
    .bt-fi { font-size: .85rem; }
}

@media(max-width:680px) {
    .bt-grid {
        flex-direction: column;
        padding: .5rem;
    }
    .bt-col { flex: 1 1 100%; min-width: 0; }
    /* entry fields → 1 col on mobile */
    .bt-entry-fields--3,
    .bt-entry-fields {
        grid-template-columns: 1fr;
    }
    .bt-entry-fields--3 .bt-fg:nth-child(3) {
        grid-column: auto;
    }
}

/* ── Each area card ── */
.bt-col {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.1rem 1.25rem 1.3rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* ── Column header ── */
.bt-col-area {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: .15rem;
}

.bt-col-amount {
    font-size: 1.00rem;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    margin-bottom: .1rem;
}

.bt-col-meta {
    font-size: .78rem;
    color: #555;
    margin-bottom: .4rem;
}

.bt-bar {
    background: #e5e7eb;
    border-radius: 99px;
    height: 5px;
    margin-bottom: .3rem;
    overflow: hidden;
}

.bt-bar-fill {
    height: 5px;
    border-radius: 99px;
    transition: width .4s;
}

.bt-col-pct {
    font-size: .72rem;
    color: #777;
    margin-bottom: .6rem;
}

/* ── Entry rows ── */
.bt-entry {
    padding: .65rem 0;
 /*   border-top: 1px solid #efefef;*/
}

.bt-entry-name {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .45rem;
    color: #AF72AA;
}

/* ── Remaining balance hint ── */
.bt-remaining-hint {
    font-size: .72rem;
    color: #555;
    margin-bottom: .4rem;
}

    .bt-remaining-hint strong {
        color: #00583E;
        font-weight: 700;
    }

.bt-entry-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.bt-entry-fields--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.bt-fi-readonly {
    background: #f5f5f5 !important;
    color: #555 !important;
    cursor: default;
    font-weight: 600;
    text-align: right;
}

.bt-fg {
    display: flex;
    flex-direction: column;
}

.bt-fl {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: .25rem;
}

.bt-fi {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: .32rem .55rem;
    font-size: .875rem;
    color: #111;
    background: #fff;
    outline: none;
    width: 100%;
}

    .bt-fi:focus {
        border-color: #7c3aed;
        box-shadow: 0 0 0 2px rgba(124,58,237,.12);
    }

    .bt-fi.is-invalid {
        border-color: #ef4444;
    }

.bt-ferr {
    font-size: .7rem;
    color: #ef4444;
    min-height: .75rem;
    margin-top: .1rem;
}

/* ── Save button ── */
.bt-entry-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .5rem;
}

.bt-save-btn {
    background: #AF72AA;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: .35rem 1.4rem;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}

    .bt-save-btn:hover {
        background: #AF72AA;
    }

    .bt-save-btn:disabled {
        opacity: .65;
        cursor: default;
    }

/* ── Reset button ── */
.bt-reset-btn {
    background: #fff;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: .35rem 1.1rem;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

    .bt-reset-btn:hover {
        background: #f3f4f6;
        border-color: #9ca3af;
        color: #374151;
    }

/* ══════════════════════════════════════════════════════
   Participant – Funding Type pill checkboxes  (Create / Edit)
══════════════════════════════════════════════════════ */
.funding-check-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1.5px solid #E0DED6;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.funding-check-item:hover {
    border-color: #a1649c;
    background: #fdf6fc;
}

.funding-check-item.checked {
    border-color: #a1649c;
    background: #fdf6fc;
    box-shadow: 0 0 0 2px rgba(161, 100, 156, 0.15);
}

/* ── Custom checkbox inside the pill ── */
.funding-check-item input[type="checkbox"].form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #d1c5cf;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s, border-color 0.15s;
    box-shadow: none !important;
}

.funding-check-item input[type="checkbox"].form-check-input:focus {
    outline: none;
    border-color: #a1649c;
    box-shadow: 0 0 0 3px rgba(161, 100, 156, 0.18) !important;
}

.funding-check-item input[type="checkbox"].form-check-input:checked {
    background-color: #a1649c;
    border-color: #a1649c;
}

.funding-check-item input[type="checkbox"].form-check-input:checked::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
    position: absolute;
}

/* ══════════════════════════════════════════════════════
   PARTICIPANT DETAIL PAGE — FULLY RESPONSIVE
   Breakpoints: tablet ≤991px | mobile ≤767px | sm-mobile ≤480px
══════════════════════════════════════════════════════ */

/* ── Tablet (≤ 991px) ───────────────────────────────── */
@media (max-width: 991.98px) {

    /* Breadcrumb */
    .pd-breadcrumb { margin-bottom: 10px; }
    .pd-breadcrumb-list { font-size: 13px; }

    /* Header card */
    .pd-header-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 16px 18px;
    }
    .pd-header-actions {
        margin-left: 0;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .pd-name { font-size: 18px; }
    .pd-meta-row { gap: 10px; }

    /* Tabs — horizontal scroll */
    .pd-tab-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .pd-tab-list::-webkit-scrollbar { display: none; }
    .pd-tab-btn {
        padding: 12px 16px;
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .pd-tab-panel { padding: 18px 16px; }
    .pd-tab-header { flex-wrap: wrap; gap: 8px; }

    /* Budget grid — 2 columns */
    .pd-budget-grid { grid-template-columns: 1fr 1fr; }

    /* Forecast summary — stack vertically */
    .fr-summary-bar { flex-direction: column; }
    .fr-summary-item {
        border-right: none;
        border-bottom: 1px solid #e7e0d8;
    }
    .fr-summary-item:last-child { border-bottom: none; }

    /* Assign modal */
    .sw-modal-dialog { max-width: 95vw; }

    /* Reports */
    .report-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .report-actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 6px;
    }
}

/* ── Mobile (≤ 767px) ───────────────────────────────── */
@media (max-width: 767.98px) {

    /* Breadcrumb */
    .pd-breadcrumb-list { font-size: 12px; gap: 4px; }

    /* Header card */
    .pd-header-inner { padding: 14px 14px; gap: 10px; }
    .pd-avatar-img  { width: 50px; height: 50px; }
    .pd-avatar-initials { width: 50px; height: 50px; font-size: 20px; }
    .pd-name { font-size: 16px; margin-bottom: 4px; }
    .pd-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .pd-meta-item { font-size: 12px; }

    /* Tabs */
    .pd-tab-btn { padding: 10px 12px; font-size: 12px; }
    .pd-tab-panel { padding: 14px 12px; }
    .pd-tab-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pd-tab-title { font-size: 15px; }

    /* Budget grid — 1 column */
    .pd-budget-grid { grid-template-columns: 1fr; gap: 14px; }
    .pd-budget-total { font-size: 22px; }
    .pd-line-item-fields { grid-template-columns: 1fr; }

    /* Workers list */
    .sw-worker-header { flex-wrap: wrap; gap: 6px; }
    .sw-worker-name { font-size: .9rem; }
    .sw-li-top {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
    .sw-li-amount { font-size: .85rem; }
    .sw-li-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .sw-li-rates { gap: 4px; }
    .sw-worker-total-row { padding: 10px 14px; font-size: .9rem; }

    /* Forecast table */
    .fr-table-wrap { border-radius: 6px; }
    .fr-table { font-size: 11px; }
    .fr-table thead th { padding: 8px 10px; font-size: 10px; }
    .fr-table tbody .fr-cell { padding: 8px 10px; }
    .fr-category-name { font-size: 12px; }
    .fr-subtab { padding: 8px 12px; font-size: 12px; }
    .fr-summary-amount,
    .fr-summary-status-badge { font-size: 18px; }
    .fr-summary-label { font-size: 10px; }
    .fr-summary-item { padding: 14px 16px; }

    /* Assign modal — bottom sheet on mobile */
    .sw-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .sw-modal-dialog {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }
    .sw-modal-header { padding: 16px 16px 0; }
    .sw-participant-badge { margin: 12px 16px 0; }
    .sw-modal-tabs { padding: 12px 16px 0; }
    .sw-modal-body { padding: 16px; }
    .sw-modal-footer { padding: 12px 16px; gap: 8px; }
    .sw-two-col  { grid-template-columns: 1fr; }
    .sw-dates-row { grid-template-columns: 1fr; }
    .sw-rates-row { grid-template-columns: 1fr; }

    /* Reports */
    .reports-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .reports-note-text { margin-left: 0; font-size: 11px; }
    .reports-title { font-size: 14px; }
    .report-generate-btn { padding: 6px 10px; font-size: 11px; }
    .report-name { font-size: 13px; }
    .report-subtitle { font-size: 11px; }
    .report-icon-box { width: 34px; height: 34px; }
}

/* ── Small mobile (≤ 480px) ─────────────────────────── */
@media (max-width: 480px) {

    /* Header */
    .pd-header-inner { padding: 12px; }
    .pd-name { font-size: 15px; }

    /* Tabs */
    .pd-tab-btn { padding: 9px 10px; font-size: 11px; }
    .pd-tab-panel { padding: 12px 10px; }

    /* Budget */
    .pd-budget-total { font-size: 20px; }
    .pd-budget-meta { font-size: 11px; }

    /* Days inputs in modal */
    .sw-days-row { gap: 8px; flex-wrap: wrap; }
    .sw-day-input { width: 46px; font-size: .75rem; padding: 6px 4px; }
    .sw-day-label { font-size: .65rem; }

    /* Direct Amount Allocation period boxes in modal (NEW) */
    .sw-period-grid, .sw-period-year-body { grid-template-columns: 1fr; gap: 14px; }
    .sw-period-box-input { font-size: .85rem; padding: 10px 12px; }
    .sw-period-box-label { font-size: .8rem; }
    .sw-period-box-daterange { font-size: .65rem; }

    /* Modal footer — stack buttons */
    .sw-modal-footer { flex-direction: column-reverse; }
    .sw-modal-footer .btn,
    .sw-submit-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        min-width: unset;
    }

    /* Forecast */
    .fr-summary-amount,
    .fr-summary-status-badge { font-size: 16px; }
    .fr-subtab-list { overflow-x: auto; flex-wrap: nowrap; }
    .fr-subtab { white-space: nowrap; flex-shrink: 0; }

    /* Worker block */
    .sw-worker-header { padding: 10px 12px; }
    .sw-line-item { padding: 10px 12px; }
    .sw-worker-total-row { padding: 10px 12px; font-size: .85rem; }

    /* Report card */
    .report-card { padding: 14px; }
    .report-actions { flex-wrap: wrap; }
    .report-generate-btn { flex: 1; text-align: center; }
}