body {
    background-color: #eef4f8;
    background-image: linear-gradient(180deg, #f8fbfd 0, #eef4f8 280px);
    color: #314255;
    font-family: "Roboto", sans-serif;
}

body,
button,
input,
select,
textarea,
.form-control,
.form-select,
.card,
.navbar,
.table,
.dropdown-menu {
    font-family: "Roboto", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card .card-header h5,
.page-header.card h5,
.pcoded .pcoded-navbar .pcoded-item > li > a .pcoded-mtext {
    font-family: "Roboto", sans-serif;
}

a {
    color: #355c7d;
}

a:hover,
a:focus {
    color: #1f7a8c;
}

.input-group {
    margin-bottom: 0px;
}
.header-navbar {
    background: linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 10px 30px rgba(44, 62, 80, 0.08);
}

.header-navbar .navbar-wrapper {
    min-height: 58px;
}

.header-navbar .navbar-wrapper .navbar-logo {
    background: linear-gradient(180deg, #1f7a8c 0%, #245c73 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.header-navbar .navbar-wrapper .navbar-logo a img {
    max-height: 34px;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left > li > a,
.header-navbar .navbar-wrapper .navbar-container .nav-right > li > a,
.header-navbar .navbar-wrapper .navbar-container .header-notification .dropdown-toggle {
    color: #4b5d73;
}

.header-navbar .navbar-wrapper .navbar-container {
    padding: 0 24px;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left,
.header-navbar .navbar-wrapper .navbar-container .nav-right {
    align-items: center;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left > li,
.header-navbar .navbar-wrapper .navbar-container .nav-right > li {
    margin: 0 2px;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left > li > a,
.header-navbar .navbar-wrapper .navbar-container .nav-right > li > a,
.header-navbar .navbar-wrapper .navbar-container .header-notification .dropdown-toggle {
    border-radius: 12px;
    padding: 6px 10px;
    transition: all 0.2s ease;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left > li > a:hover,
.header-navbar .navbar-wrapper .navbar-container .nav-right > li > a:hover,
.header-navbar .navbar-wrapper .navbar-container .header-notification .dropdown-toggle:hover {
    background: #edf7fb;
    color: #1f7a8c;
}

.header-navbar .navbar-wrapper .navbar-container .header-search .main-search {
    padding: 2px 0;
}

.header-navbar .navbar-wrapper .navbar-container .header-search .form-control,
.header-navbar .navbar-wrapper .navbar-container .header-search .input-group-text {
    background: #f7fbfd;
    border-color: #d8e7ef;
}

.header-navbar .navbar-wrapper .navbar-container .header-search .form-control,
.header-navbar .navbar-wrapper .navbar-container .header-search .input-group-text,
.header-navbar .navbar-wrapper .navbar-container .header-search .search-btn,
.header-navbar .navbar-wrapper .navbar-container .header-search .search-close {
    height: 34px;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification,
.header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification {
    border: 1px solid #e7eef4;
    border-radius: 16px;
    box-shadow: 0 18px 35px rgba(25, 49, 72, 0.12);
    overflow: hidden;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification {
    flex-direction: column;
    max-height: calc(100vh - 58px);
    transform: translateY(0);
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification.show {
    display: flex;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .dropdown-menu:not(.show) {
    display: none;
}

.header-navbar .navbar-wrapper .navbar-container .user-profile img {
    border: 2px solid #d7e9ef;
    box-shadow: none;
}

.header-navbar .navbar-wrapper .navbar-container .user-profile span {
    font-weight: 600;
    color: #30475d;
}

.header-navbar .navbar-wrapper .navbar-container .user-profile .dropdown-toggle {
    padding-top: 4px;
    padding-bottom: 4px;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .badge {
    box-shadow: 0 6px 18px rgba(255, 83, 112, 0.28);
}

.pcoded .pcoded-navbar .nav-list {
    background: linear-gradient(180deg, #214761 0%, #18344b 100%);
    box-shadow: 12px 0 30px rgba(18, 34, 49, 0.16);
}

.pcoded .pcoded-navbar .pcoded-inner-navbar {
    padding-top: 0;
}

.pcoded .pcoded-navbar .pcoded-navigation-label {
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 18px 24px 8px;
}

.pcoded .pcoded-navbar .pcoded-item > li > a {
    padding: 10px 22px;
    min-height: 42px;
    line-height: 22px;
}

.pcoded .pcoded-navbar .pcoded-item > li {
    margin-bottom: 2px;
}

.pcoded .pcoded-navbar .pcoded-item > li > a .pcoded-micon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 12px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 7px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
}

.pcoded .pcoded-navbar .pcoded-item > li > a .pcoded-mtext {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.pcoded .pcoded-navbar .pcoded-item > li.active > a,
.pcoded .pcoded-navbar .pcoded-item > li:hover > a {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

.pcoded .pcoded-navbar .pcoded-item > li.active > a .pcoded-micon,
.pcoded .pcoded-navbar .pcoded-item > li:hover > a .pcoded-micon {
    background: rgba(255, 255, 255, 0.16);
}

.pcoded .pcoded-navbar .pcoded-item > li.active > a:before,
.pcoded .pcoded-navbar .pcoded-item > li:hover > a:before {
    background-color: #63c7d9;
}

.pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu > a:after {
    font-size: 13px;
    opacity: 0.75;
    top: 40%;
    transform: translateY(-50%);
    right: 18px;
}

.pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu.active > a:after,
.pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu:hover > a:after {
    opacity: 1;
}

.pcoded .pcoded-navbar .pcoded-item > li > .pcoded-submenu {
    background: rgba(7, 23, 36, 0.18);
    border-radius: 12px;
    margin: 4px 12px 6px;
    padding: 6px 0;
}

.pcoded .pcoded-navbar .pcoded-hasmenu .pcoded-submenu li > a {
    padding: 7px 18px 7px 52px;
    font-size: 12.5px;
    color: rgba(228, 239, 245, 0.82);
    border-radius: 9px;
    margin: 0 8px;
    position: relative;
}

.pcoded .pcoded-navbar .pcoded-hasmenu .pcoded-submenu li {
    margin-bottom: 1px;
}

.pcoded .pcoded-navbar .pcoded-hasmenu .pcoded-submenu li > a:before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(159, 231, 239, 0.55);
    transform: translateY(-50%);
}

.pcoded .pcoded-navbar .pcoded-hasmenu .pcoded-submenu li.active > a,
.pcoded .pcoded-navbar .pcoded-hasmenu .pcoded-submenu li:hover > a {
    background: rgba(255, 255, 255, 0.08);
    color: #9fe7ef;
}

.pcoded .pcoded-navbar .pcoded-hasmenu .pcoded-submenu li.active > a:before,
.pcoded .pcoded-navbar .pcoded-hasmenu .pcoded-submenu li:hover > a:before {
    background: #9fe7ef;
}

.pcoded-content {
    padding-top: 6px;
}

.pcoded-inner-content {
    padding-top: 0;
}

.main-body .page-wrapper {
    padding: 0.15rem 0.6rem 0.1rem;
}

.card{
        margin-bottom: 15px;
}
.page-header.card {
    margin: 4px 19px 10px;
    padding: 6px 15px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbfe 100%);
    box-shadow: 0 14px 32px rgba(31, 58, 84, 0.08);
}

.page-header.card .page-header-title {
    display: flex;
    align-items: center;
}

.page-header.card .page-header-title i {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    margin-right: 9px;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(31, 122, 140, 0.24);
}

.page-header.card h5 {
    color: #213547;
    font-weight: 700;
    margin-bottom: 0;
    font-size: 16px;
}

.page-header.card h5 + span {
    color: #76879a;
}

.page-header.card .breadcrumb {
    background: #f0f7fb;
    border-radius: 999px;
    padding: 4px 10px;
    min-height: 28px;
    align-items: center;
}

.page-header.card .breadcrumb a,
.page-header.card .breadcrumb .breadcrumb-item {
    color: #567086;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.1;
}

.page-header.card .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0.35rem;
    padding-left: 0.2rem;
    font-size: 10px;
}

.card {
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(31, 58, 84, 0.08);
}

.card .card-header {
    padding: 22px 24px 16px;
}

.card .card-header h5 {
    color: #213547;
    font-size: 16px;
}

.card .card-header h5:after {
    background-color: #63c7d9;
    width: 54px;
    bottom: -16px;
}

.card .card-header span {
    color: #7b8c9f;
}

.card .card-block {
    padding: 1.35rem 1.5rem;
}

.table thead th {
    color: #607388;
}

.table td,
.table th {
    border-top-color: #e9eff5;
}

.form-control,
.form-select {
    border-color: #d9e4ec;
    border-radius: 10px;
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

.form-control:focus,
.form-select:focus {
    border-color: #63c7d9;
    box-shadow: 0 0 0 0.2rem rgba(99, 199, 217, 0.15);
}

select,
select.form-control,
select.form-select,
option {
    font-family: "Roboto", sans-serif !important;
    font-size: 13px !important;
}

@media only screen and (max-width: 991px) {
    .header-navbar .navbar-wrapper .navbar-container {
        padding: 0 14px;
    }

    .page-header.card {
        margin: 14px 16px 8px;
        padding: 10px 14px;
    }

    .main-body .page-wrapper {
        padding: 0.35rem 1rem 1.2rem;
    }
}

/* Shared module action buttons */
.btn-module-add,
.btn-module-edit,
.btn-module-outline,
.btn-module-submit,
.btn-module-delete,
.btn-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.btn-module-add,
.btn-module-edit,
.btn-module-outline,
.btn-module-submit,
.btn-module-delete {
    box-shadow: 0 10px 20px rgba(64, 153, 255, 0.18);
}

.btn-module-add,
.btn.btn-primary.btn-module-add,
.btn-module-outline,
.btn.btn-outline-primary.btn-module-outline,
.btn-module-submit,
.btn.btn-primary.btn-module-submit {
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.btn-module-submit,
.btn.btn-primary.btn-module-submit {
    padding: 10px 18px;
}

.btn-module-submit i {
    vertical-align: middle;
}

.btn-module-delete,
.btn.btn-outline-danger.btn-module-delete {
    color: #ff5370;
    border-color: rgba(255, 83, 112, 0.28);
    background: rgba(255, 83, 112, 0.08);
    box-shadow: none;
}

.btn-module-cancel,
.btn.btn-link.btn-module-cancel {
    color: #1f73e8;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 10px 12px;
}

.btn-module-cancel:hover,
.btn.btn-link.btn-module-cancel:hover,
.btn.btn-link.btn-module-cancel:focus {
    color: #155ec4;
    text-decoration: none;
}

.is-hidden {
    display: none !important;
}

.module-list-card {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(43, 57, 72, 0.08);
}

.module-list-card .card-header {
    padding-bottom: 0;
    border-bottom: 0;
}

.module-page-actions,
.module-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.module-page-actions {
    gap: 12px;
}

/* Shared single-day navigation for assignment and similar module headers */
.module-page-header-row {
    width: 100%;
    align-items: center;
}

.module-date-nav {
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
}

.module-date-nav-label {
    border: 0;
    background: transparent;
    color: #20384d;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}

.module-date-nav-label:hover,
.module-date-nav-label:focus {
    color: #0066ff;
    text-decoration: none;
}

.module-date-nav-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 10px;
    border: 1px solid #e0e8f0;
    border-radius: 10px;
    background: #fff;
}

.assignment-header-card > .card-header {
    padding: 22px 24px 22px;
}

.daterangepicker .ranges li.active,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #4099ff;
}

.daterangepicker .drp-buttons .btn-primary {
    background-color: #4099ff;
    border-color: #4099ff;
}

/* Shared avatar initials */
.module-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.module-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.module-avatar.tone-1 {
    background: #6d4c41;
}

.module-avatar.tone-2 {
    background: #5c6bc0;
}

.module-avatar.tone-3 {
    background: #00897b;
}

.module-avatar.tone-4 {
    background: #8e6c88;
}

.module-avatar.tone-5 {
    background: #4099ff;
}

.module-avatar.tone-6 {
    background: #ffb64d;
}

/* Shared section headings inside module cards */
.module-section-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 14px;
}

.module-section-title-primary {
    color: #0066ff;
}

.module-section-title-success {
    color: #18a689;
}

.module-section-caption {
    color: #8392a5;
    font-size: 12px;
    font-weight: 600;
}

/* Shared selectable option cards */
.module-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.module-option-card {
    border: 1px solid #e0e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(43, 57, 72, 0.06);
    padding: 16px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.module-option-card.is-active {
    background: #0066ff;
    border-color: #0066ff;
    box-shadow: 0 10px 24px rgba(0, 102, 255, 0.24);
}

.module-option-card-title {
    color: #20384d;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0;
}

.module-option-card-subtitle {
    color: #486174;
    font-size: 13px;
    font-weight: 700;
    margin: 4px 0 0;
}

.module-option-card-meta {
    display: grid;
    gap: 4px;
    color: #5f7390;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}

.module-option-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

.module-option-card-label {
    color: #5f7390;
    font-size: 12px;
    font-weight: 700;
}

.module-option-card.is-active .module-option-card-title,
.module-option-card.is-active .module-option-card-subtitle,
.module-option-card.is-active .module-option-card-meta,
.module-option-card.is-active .module-option-card-label {
    color: rgba(255, 255, 255, 0.92);
}

/* Shared picker rows for sidebar lists */
.module-picker-list {
    display: grid;
    gap: 10px;
}

.module-picker-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: center;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.module-picker-row.is-active {
    background: #eef2f6;
}

.module-picker-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.module-picker-info strong {
    color: #20384d;
    font-size: 13px;
    font-weight: 800;
}

.module-picker-info span,
.module-picker-info small {
    color: #5f7390;
    font-size: 12px;
    font-weight: 600;
}

.module-toolbar .form-control,
.module-toolbar .form-select,
.module-toolbar .input-group-text {
    min-height: 46px;
    border: 1px solid #dfe6ef;
    box-shadow: none;
}

.module-toolbar .input-group-text {
    background: #f8fafd;
    color: #65748b;
}

.module-modal {
    z-index: 1061;
}

.module-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(31, 58, 84, 0.18);
}

.module-modal .modal-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fbfe 0%, #eef7fc 100%);
    border-bottom: 1px solid #e8f0f5;
}

.module-modal .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #20384d;
}

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

.module-modal .form-label {
    font-size: 12px;
    font-weight: 700;
    color: #53677c;
    margin-bottom: 6px;
}

.module-modal .form-control,
.module-modal .form-select,
.module-modal textarea {
    border: 1px solid #dbe6ee;
    border-radius: 10px;
    min-height: 42px;
    box-shadow: none;
    color: #30475d;
    font-size: 13px;
}

.module-modal textarea {
    min-height: 90px;
    resize: vertical;
}

.module-modal .modal-footer {
    padding: 16px 20px 20px;
    border-top: 0;
}

.module-modal label.error {
    display: block;
    margin-top: 6px;
    color: #ff5370;
    font-size: 11px;
    font-weight: 600;
}

.module-modal .form-control.error,
.module-modal .form-select.error,
.module-modal textarea.error {
    border-color: #ff5370 !important;
}

.module-table {
    font-size: 13px;
}

.module-table.module-table-md {
    min-width: 760px;
}

.module-table.module-table-lg {
    min-width: 860px;
}

.module-table.module-table-xl {
    min-width: 1120px;
}

.module-table thead th {
    border-top: 0;
    border-bottom: 1px solid #eef2f7;
    background: #f4f6f8;
    color: #6b7a90;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-top: 12px;
    padding-bottom: 12px;
}

.module-table tbody td {
    padding: 12px 0.55rem;
    vertical-align: middle;
    border-color: #eef2f7;
}

:is(
    #servicePlanTable_wrapper,
    #crewTable_wrapper,
    #performanceTable_wrapper,
    #estimationTable_wrapper,
    #jobsTable_wrapper,
    #invoiceTable_wrapper,
    #paymentTable_wrapper,
    #expensesTable_wrapper,
    #quickTextTable_wrapper,
    #expenseCategoryTable_wrapper
) {
    position: relative;
}

:is(
    #servicePlanTable_wrapper,
    #crewTable_wrapper,
    #performanceTable_wrapper,
    #estimationTable_wrapper,
    #jobsTable_wrapper,
    #invoiceTable_wrapper,
    #paymentTable_wrapper,
    #expensesTable_wrapper,
    #quickTextTable_wrapper,
    #expenseCategoryTable_wrapper
) :is(.dataTables_processing, .dt-processing) {
    position: absolute;
    z-index: 20;
    top: 55%;
    left: 50%;
    width: auto;
    min-width: 170px;
    height: auto;
    margin: 0 !important;
    padding: 12px 18px;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    border: 1px solid #dce8f5;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 30px rgba(31, 56, 83, 0.16);
    color: #314255;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
}

:is(
    #servicePlanTable_wrapper,
    #crewTable_wrapper,
    #performanceTable_wrapper,
    #estimationTable_wrapper,
    #jobsTable_wrapper,
    #invoiceTable_wrapper,
    #paymentTable_wrapper,
    #expensesTable_wrapper,
    #quickTextTable_wrapper,
    #expenseCategoryTable_wrapper
) :is(.dataTables_processing, .dt-processing)::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 9px;
    border: 2px solid #d6e7fb;
    border-top-color: #4099ff;
    border-radius: 50%;
    vertical-align: -4px;
    animation: module-table-processing-spin 0.75s linear infinite;
}

@keyframes module-table-processing-spin {
    to {
        transform: rotate(360deg);
    }
}

.module-name {
    color: #1f2d3d;
    font-size: 13px;
    font-weight: 700;
}

.module-meta {
    color: #8392a5;
    font-size: 11px;
}

.module-amount {
    color: #1f7a8c;
    font-weight: 700;
    white-space: nowrap;
}

.module-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.module-badge-primary {
    background: rgba(64, 153, 255, 0.12);
    color: #4099ff;
}

.module-badge-success {
    background: rgba(46, 216, 182, 0.13);
    color: #10a98a;
}

.module-badge-warning {
    background: rgba(255, 182, 77, 0.16);
    color: #ff9f1a;
}

.module-badge-danger {
    background: rgba(255, 83, 112, 0.14);
    color: #ff5370;
}

.module-empty-state {
    display: none;
    padding: 32px 16px 12px;
    text-align: center;
    color: #8392a5;
}

/* Shared module page header and compact list shell */
.module-page-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.module-page-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #20384d;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
}

.module-page-title a {
    color: #20384d;
    text-decoration: none;
}

.module-page-description {
    max-width: 680px;
    color: #6f8294;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.module-compact-list {
    display: grid;
    gap: 10px;
}

.module-compact-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #e4ebf2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(43, 57, 72, 0.06);
}

.module-compact-row-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.module-compact-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.module-color-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.module-select-grid,
.module-color-grid {
    display: grid;
    gap: 10px;
}

.module-select-grid {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}

.module-color-grid {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
}

.module-select-option,
.module-color-option {
    border: 1px solid #dce7f1;
    background: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.module-select-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 10px;
    color: #40566d;
    font-size: 18px;
}

.module-color-option {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--module-option-color);
}

.module-select-option.is-selected {
    border-color: #4099ff;
    background-color: #eef6ff;
    box-shadow: 0 0 0 3px rgba(64, 153, 255, 0.16);
}

.module-color-option.is-selected {
    border-color: #4099ff;
    background: var(--module-option-color);
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(64, 153, 255, 0.45);
}

.module-toggle {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.module-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.module-toggle span {
    position: relative;
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background: #d8e2ec;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.module-toggle span:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(31, 58, 84, 0.18);
    transition: transform 0.2s ease;
}

.module-toggle input:checked + span {
    background: #20c997;
}

.module-toggle input:checked + span:before {
    transform: translateX(20px);
}

.module-toggle input:disabled + span,
.module-icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.notification-dropdown-link {
    display: block;
    color: inherit;
}

.header-navbar .dropdown-primary .notification-view .notification-dropdown-link:hover,
.header-navbar .dropdown-primary .notification-view .notification-dropdown-link:focus {
    background: transparent;
    color: inherit;
}

.header-navbar .notification-view .notification-dropdown-item:hover,
.header-navbar .notification-view .notification-dropdown-item:focus-within {
    background: #f4f8fb !important;
}

.header-navbar .notification-view .notification-dropdown-item.is-unread,
.header-navbar .notification-view .notification-dropdown-item.is-unread:hover,
.header-navbar .notification-view .notification-dropdown-item.is-unread:focus-within {
    background: #eef7ff !important;
}

.header-navbar .notification-view .notification-dropdown-link:hover .notification-user,
.header-navbar .notification-view .notification-dropdown-link:hover .notification-msg,
.header-navbar .notification-view .notification-dropdown-link:focus .notification-user,
.header-navbar .notification-view .notification-dropdown-link:focus .notification-msg {
    color: inherit;
}

.notification-dropdown-item.is-unread {
    background: rgba(64, 153, 255, 0.08);
}

.notification-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 12px;
    box-shadow: 0 5px 10px 0 rgba(43, 43, 43, 0.16);
}

.notification-empty-item,
.notification-view-more-item {
    text-align: center;
}

.header-navbar .notification-view > li:first-child,
.header-navbar .notification-view > .notification-view-more-item {
    flex: 0 0 auto;
}

.header-navbar .notification-view .notification-items-container {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.header-navbar .notification-view .notification-items-container:hover {
    background: transparent;
}

.header-navbar .notification-view .notification-items-list {
    height: 100%;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.header-navbar .notification-view .notification-items-list > .notification-dropdown-item {
    padding: 12px 20px !important;
}

.notification-empty-copy {
    padding: 14px 16px;
    color: #6c757d;
}

.notification-view-more-link {
    display: block;
    padding: 12px 16px;
    font-weight: 600;
    color: #4099ff;
}

.header-navbar .dropdown-primary .notification-view .notification-view-more-item {
    position: relative;
    z-index: 1;
    padding: 8px 20px !important;
    border-top: 1px solid #e7eef4;
    background: #fff;
}

.header-navbar .dropdown-primary .notification-view .notification-view-more-link:hover,
.header-navbar .dropdown-primary .notification-view .notification-view-more-link:focus {
    background: #f4f8fb;
    color: #1f7a8c;
}

.notification-filter-form .form-label {
    font-weight: 600;
}

.notification-list-row.is-unread {
    background: rgba(64, 153, 255, 0.05);
    border-radius: 8px;
    padding-left: 6px;
    padding-right: 6px;
}

.notification-list-link {
    display: block;
    color: inherit;
}

.notification-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.notification-list-heading h6 {
    margin-bottom: 0;
}

.notification-list-meta {
    color: #6c757d;
    font-size: 12px;
}

.notification-pagination-wrap {
    margin-top: 24px;
}

.notification-pagination-wrap .pagination {
    margin: 0;
}

.notification-pagination-wrap .module-datatable-pagination {
    margin-left: auto;
}

/* Indicator modal picker controls */
.indicator-modal-dialog {
    max-width: 640px;
}

#indicatorModal .modal-body {
    padding-bottom: 8px;
}

#indicatorModal .modal-footer {
    padding-top: 6px;
}

.indicator-form-fields {
    gap: 14px;
}

.indicator-picker-field {
    display: grid;
    gap: 10px;
}

.indicator-preview-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px dashed #d8e4ec;
    border-radius: 10px;
    background: #f8fbfd;
}

.indicator-preview-icon {
    background-color: #d8e2ec;
}

.indicator-status-text {
    font-weight: 700;
}

.indicator-status-text.is-active {
    color: #10a98a;
}

.indicator-status-text.is-inactive {
    color: #ff5370;
}

.indicator-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}

.indicator-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.indicator-color-grid .module-color-option {
    position: relative;
    width: 42px;
    height: 28px;
    border-radius: 8px;
}

.indicator-color-grid .module-color-option.is-selected:after {
    content: "";
    position: absolute;
    left: 15px;
    top: 7px;
    width: 8px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media only screen and (max-width: 991px) {
    .module-page-intro {
        flex-direction: column;
    }

    .module-compact-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .module-compact-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 52px;
    }

}

.module-action-list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.module-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe7ee;
    background: #fff;
    color: #486174;
}

.module-icon-btn.module-icon-btn-danger {
    color: #ff5370;
}

.btn-danger-text-button{
    color: #fff;
    background-color: #ff5370;
}

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

.module-icon-btn.module-icon-btn-primary {
    border-color: rgba(64, 153, 255, 0.45);
    color: #4099ff;
}

.module-icon-btn.module-icon-btn-success {
    border-color: rgba(46, 216, 182, 0.5);
    color: #1fb89a;
}

.module-icon-btn.module-icon-btn-info {
    border-color: rgba(0, 172, 237, 0.5);
    color: #00aced;
}

.module-icon-btn:hover,
.module-icon-btn:focus {
    background: #f3f8fb;
    color: #1f7a8c;
}

.module-icon-btn.module-icon-btn-danger:hover,
.module-icon-btn.module-icon-btn-danger:focus {
    background: rgba(255, 83, 112, 0.12);
    color: #ff5370;
}

.module-action-pill {
    min-height: 34px;
    border: 1px solid #dfe7ee;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fff;
    color: #486174;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    line-height: 1.2;
    box-shadow: none;
}

.module-action-pill:hover,
.module-action-pill:focus {
    background: #f3f8fb;
    color: #1f7a8c;
    border-color: #d7e5ef;
    text-decoration: none;
}

.module-icon-btn.module-icon-btn-primary:hover,
.module-icon-btn.module-icon-btn-primary:focus {
    background: rgba(64, 153, 255, 0.12);
    color: #4099ff;
}

.module-icon-btn.module-icon-btn-success:hover,
.module-icon-btn.module-icon-btn-success:focus {
    background: rgba(46, 216, 182, 0.12);
    color: #1fb89a;
}

.module-icon-btn.module-icon-btn-info:hover,
.module-icon-btn.module-icon-btn-info:focus {
    background: rgba(0, 172, 237, 0.12);
    color: #00aced;
}

.module-action-menu {
    min-width: 210px;
    border: 1px solid #e7eef4;
    border-radius: 14px;
    box-shadow: 0 18px 35px rgba(25, 49, 72, 0.12);
    padding: 8px;
}

.module-action-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: #42586c;
    font-size: 12px;
    font-weight: 600;
}

.module-action-menu .dropdown-item i {
    font-size: 14px;
}

.module-action-menu .dropdown-item:hover,
.module-action-menu .dropdown-item:focus {
    background: #f3f8fb;
    color: #1f7a8c;
}

.lead-action-menu {
    max-height: min(360px, calc(100vh - 24px));
    overflow-y: auto;
}

.lead-action-menu.is-fixed {
    position: fixed !important;
    margin: 0 !important;
    transform: none !important;
}

.lead-action-menu.is-fixed.show {
    display: block;
}

.module-map-picker-wrap {
    border: 1px solid #dbe6ee;
    border-radius: 14px;
    padding: 12px;
    background: #f9fcfe;
}

.module-map-picker {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef7fb 0%, #daeaf4 100%);
}

.module-map-picker-status {
    margin-top: 10px;
    color: #678096;
    font-size: 12px;
}

.module-stat-card {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(43, 57, 72, 0.08);
}

.module-stat-card .card-body {
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
}

.module-stat-label {
    display: block;
    color: #6f8294;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.module-stat-value {
    display: block;
    color: #20384d;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.module-stat-caption {
    color: #8392a5;
    font-size: 12px;
    font-weight: 600;
}

.module-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    flex: 0 0 auto;
}

.module-stat-primary .module-stat-icon { background: #4099ff; }
.module-stat-warning .module-stat-icon { background: #ffb64d; }
.module-stat-success .module-stat-icon { background: #2ed8b6; }
.module-stat-info .module-stat-icon { background: #00bcd4; }

/* Shared form field treatments for full-width create/edit module forms */
.module-form-stack {
    display: grid;
    gap: 18px;
}

.module-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.module-field {
    position: relative;
}

.module-field-label {
    position: absolute;
    top: -8px;
    left: 14px;
    z-index: 2;
    padding: 0 6px;
    background: #fff;
    color: #405166;
    font-size: 12px;
    line-height: 1;
}

.module-field-control,
.module-field .form-control,
.module-field .form-select {
    min-height: 56px;
    border: 1px solid #cfd8e3;
    border-radius: 10px;
    color: #1f2d3d;
    font-size: 15px;
    box-shadow: none;
}

.module-field .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
}

.module-field-control:focus,
.module-field .form-control:focus,
.module-field .form-select:focus {
    border-color: #1f73e8;
    box-shadow: 0 0 0 1px rgba(31, 115, 232, 0.18);
}

.module-field-icon-left,
.module-field-icon-right {
    position: absolute;
    top: 28px;
    z-index: 3;
    transform: translateY(-50%);
    color: #637083;
    font-size: 17px;
    pointer-events: none;
}

.module-field-icon-left {
    left: 14px;
}

.module-field-icon-right {
    right: 14px;
}

.module-field-has-left-icon .form-control {
    padding-left: 42px;
}

.module-field-has-right-icon .form-control,
.module-field-has-right-icon .form-select {
    padding-right: 42px;
}

.module-field-prefix {
    position: absolute;
    top: 28px;
    left: 14px;
    z-index: 3;
    transform: translateY(-50%);
    color: #1f2d3d;
    font-size: 15px;
    pointer-events: none;
}

.module-field > label.error,
.module-form-row .module-field > label.error {
    position: static;
    display: block;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    background: transparent;
    line-height: 1.35;
}

.module-field-has-prefix .form-control {
    padding-left: 34px;
}

.invoice-customer-option {
    grid-template-columns: 34px minmax(0, 1fr) 18px;
}

.module-upload-panel {
    padding: 18px 16px;
    border: 1px dashed #d4dde8;
    border-radius: 12px;
    background: #fff;
}

.module-upload-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #1f2d3d;
    font-size: 13px;
    font-weight: 600;
}

.module-upload-button {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #1f73e8;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.module-upload-button:hover,
.module-upload-button:focus {
    background: #155ec4;
    color: #fff;
}

.module-upload-help {
    display: block;
    margin-top: 12px;
    color: #405166;
    font-size: 12px;
}

.module-upload-error {
    display: block;
    margin-top: 7px;
    color: #ff5370;
    font-size: 12px;
    font-weight: 600;
}

.module-hidden-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.invoice-existing-photos {
    margin: 10px 0 16px;
}

.invoice-existing-photos-title {
    display: block;
    margin-bottom: 10px;
    color: #405166;
    font-size: 12px;
    font-weight: 700;
}

.invoice-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.invoice-photo-grid-view {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.invoice-photo-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
    background: #f8fbfe;
    aspect-ratio: 4 / 3;
}

.invoice-photo-remove {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 83, 112, .94);
    color: #fff;
    box-shadow: 0 3px 9px rgba(31, 58, 84, .2);
}

.invoice-photo-remove:hover,
.invoice-photo-remove:focus {
    background: #e93d5d;
    color: #fff;
}

.invoice-photo-tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .18s ease;
}

.invoice-photo-tile > a {
    display: block;
    width: 100%;
    height: 100%;
}

.invoice-photo-tile:hover img,
.invoice-photo-tile:focus img {
    transform: scale(1.03);
}

.invoice-form-dialog {
    max-width: 620px;
}

.invoice-form-dialog .modal-body {
    padding: 22px 23px;
}

.invoice-view-dialog {
    max-width: 720px;
}

.invoice-view-dialog .modal-content {
    border-radius: 12px;
    color: #1f2d3d;
    font-family: Roboto, Arial, sans-serif;
}

.invoice-view-dialog .modal-header {
    background: linear-gradient(135deg, #f8fbfe 0%, #eef7fc 100%);
    border-bottom: 1px solid #e8f0f5;
    padding: 16px 20px;
}

.invoice-view-dialog .modal-body {
    padding: 12px 24px 18px;
}

.invoice-view-dialog .modal-footer {
    border-top: 0;
    padding: 12px 24px 22px;
}

.invoice-view-title {
    color: #20384d;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.invoice-view-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 20px;
}

.invoice-view-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.invoice-view-field-wide {
    grid-column: 1 / -1;
}

.invoice-view-status {
    justify-self: start;
    min-width: 68px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
}

.invoice-view-label {
    color: #405166;
    font-size: 12px;
    font-weight: 700;
}

.invoice-view-value {
    color: #101828;
    font-size: 15px;
    font-weight: 500;
}

.invoice-view-value strong {
    font-weight: 700;
}

.invoice-view-amount {
    color: #ff4d4f;
    font-size: 20px;
    font-weight: 700;
}

.invoice-payment-link-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.invoice-payment-link {
    min-height: 36px;
    flex: 1 1 auto;
    border: 1px solid #d5dfeb;
    border-radius: 8px;
    color: #1f2d3d;
    font-size: 14px;
    padding: 8px 12px;
}



.invoice-view-help {
    display: block;
    margin-top: 8px;
    color: #405166;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
}

@media only screen and (max-width: 575px) {
    .module-form-row {
        grid-template-columns: 1fr;
    }

    .invoice-view-stack {
        grid-template-columns: 1fr;
    }
}

.btn-module-view,
.btn.btn-primary.btn-module-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    white-space: nowrap;
}

.invoice-view-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.invoice-view-footer-actions .btn-module-view {
    min-width: auto;
}

.invoice-view-footer-actions .module-modal-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.invoice-preview-dialog {
    max-width: 760px;
}

.invoice-preview-dialog .modal-content {
    border: 0;
    border-radius: 18px;
    background: #eef4f8;
    box-shadow: 0 24px 60px rgba(31, 58, 84, 0.18);
    max-height: calc(100vh - 20px);
    overflow: hidden;
}

.invoice-preview-dialog .modal-body {
    position: relative;
    padding: 34px 32px 42px;
    overflow-y: auto;
}

.invoice-preview-close {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 2;
}

.invoice-preview-shell {
    max-width: 540px;
    margin: 0 auto;
}

.invoice-preview-brand {
    text-align: center;
    margin-bottom: 34px;
}

.invoice-preview-brand h4 {
    margin-bottom: 12px;
    color: #1f73e8;
    font-size: 24px;
    font-weight: 800;
}

.invoice-preview-brand strong {
    display: block;
    margin-bottom: 14px;
    color: #1f2d3d;
    font-size: 17px;
}

.invoice-preview-brand span {
    color: #53677c;
    font-size: 15px;
}

.invoice-preview-card {
    min-height: min(720px, calc(100vh - 190px));
    border: 1px solid #dfe6ef;
    border-radius: 30px;
    background: #fff;
    padding: 36px 32px 26px;
    box-shadow: 0 24px 48px rgba(31, 58, 84, 0.08);
}

.invoice-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 32px;
    border-bottom: 1px solid #d7dfe9;
}

.invoice-preview-number {
    color: #1f2d3d;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
}

.invoice-preview-date {
    color: #53677c;
    font-size: 13px;
}

.invoice-preview-total {
    color: #1f73e8;
    font-size: 20px;
    font-weight: 800;
    text-align: right;
}

.invoice-preview-status {
    display: block;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.invoice-preview-status.is-paid {
    color: #10a98a;
}

.invoice-preview-status.is-unpaid {
    color: #ff7a1a;
}

.invoice-preview-section {
    margin-top: 30px;
}

.invoice-preview-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #1f2d3d;
    font-size: 16px;
    font-weight: 800;
}

.invoice-preview-section-title i {
    color: #1f73e8;
    font-size: 18px;
}

.invoice-preview-panel {
    border: 1px solid #d7dfe9;
    border-radius: 22px;
    background: #fbfbfc;
    padding: 26px 24px;
}

.invoice-preview-customer {
    display: grid;
    gap: 8px;
    color: #53677c;
    font-size: 14px;
}

.invoice-preview-customer strong {
    color: #1f2d3d;
    font-size: 15px;
}

.invoice-preview-detail-list {
    display: grid;
    gap: 22px;
}

.invoice-preview-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #53677c;
    font-size: 14px;
}

.invoice-preview-detail-row strong {
    color: #1f2d3d;
    font-weight: 600;
    text-align: right;
}

.invoice-preview-detail-row .invoice-preview-blue {
    color: #1f73e8;
    font-weight: 800;
}

.invoice-preview-action {
    width: 100%;
    min-height: 64px;
    margin-top: 32px;
    border-radius: 22px;
    font-size: 17px;
    font-weight: 800;
    box-shadow: 0 18px 32px rgba(31, 115, 232, 0.18);
}

@media (max-width: 767px) {
    .invoice-preview-dialog .modal-body {
        padding: 28px 14px 24px;
    }

    .invoice-preview-card {
        min-height: auto;
        padding: 28px 20px 22px;
        border-radius: 22px;
    }

    .invoice-preview-head,
    .invoice-preview-detail-row {
        align-items: flex-start;
    }
}

.datepicker {
    z-index: 1080 !important;
}

.btn-danger,
.btn-outline-danger,
.danger {
    color: #ed0808;
}

/* Shared feedback alerts */
.module-alert,
.company-auth-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    border: 0;
    box-shadow: 0 10px 22px rgba(31, 58, 84, 0.08);
}

.module-alert i,
.company-auth-alert i {
    font-size: 18px;
}

/* Shared logout actions */
.company-logout-form,
.pcoded-logout-form {
    margin: 0;
}

.company-logout-form .dropdown-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: #ff5370;
    padding: 10px 16px;
    font-size: 14px;
}

.company-logout-form .dropdown-item:hover,
.company-logout-form .dropdown-item:focus {
    background-color: rgba(255, 83, 112, 0.08);
}

.pcoded-logout-item {
    margin-top: 8px;
}

.pcoded-logout-button {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
    padding: 10px 22px;
    min-height: 42px;
    line-height: 22px;
}

.pcoded-logout-button:hover,
.pcoded-logout-button:focus {
    background: rgba(255, 83, 112, 0.18);
    color: #ffffff;
}

.pcoded-logout-button .pcoded-micon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 12px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 7px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
}

.pcoded-logout-button .pcoded-mtext {
    display: inline-block;
    vertical-align: middle;
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* Company login page */
html {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}
body.company-login-page {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background:
        radial-gradient(circle at top left, rgba(99, 199, 217, 0.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(31, 122, 140, 0.15), transparent 26%),
        linear-gradient(135deg, #edf8fb 0%, #f6fbfd 45%, #e4eef4 100%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

.company-login-block {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 20px 0;
}

.company-login-block::before,
.company-login-block::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
}

.company-login-block::before {
    width: 320px;
    height: 320px;
    top: -80px;
    right: -60px;
    background: rgba(99, 199, 217, 0.18);
}

.company-login-block::after {
    width: 260px;
    height: 260px;
    bottom: -90px;
    left: -70px;
    background: rgba(36, 92, 115, 0.14);
}

.company-login-form {
    max-width: 460px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.company-login-logo img {
    max-width: 185px;
}

.company-login-card {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(24, 52, 75, 0.18);
}

.company-login-card .card-block {
    padding: 32px 30px 30px;
}

.company-login-subtitle {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.company-login-card .form-control {
    background: transparent;
}

.company-login-helper {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px dashed #c5dbe5;
    border-radius: 16px;
    background: #f7fbfd;
}

.company-login-helper h6 {
    color: #245c73;
    margin-bottom: 8px;
}

.btn-auth-submit {
    min-height: 46px;
    box-shadow: 0 14px 28px rgba(31, 122, 140, 0.24);
}

.company-login-signup {
    margin: 22px 0 0;
    color: #6f8193;
    font-size: 13px;
}

.company-login-signup a {
    color: #355c7d;
    font-weight: 700;
}

.company-login-signup a:hover,
.company-login-signup a:focus {
    color: #1f7a8c;
}

@media only screen and (max-width: 575px) {
    .company-login-form {
        max-width: 100%;
        padding: 0 6px;
    }

    .company-login-card .card-block {
        padding: 26px 20px 24px;
    }
}

/* Crew module styles */
.module-page-title {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
}

.swal-record-name {
    font-weight: 800;
    color: #1f2d3d;
}

.module-datatable-top {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.module-datatable-spacer {
    min-height: 1px;
}

.module-datatable-length .dataTables_length {
    margin: 0;
}

.module-datatable-length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    color: #65748b;
    font-size: 12px;
    font-weight: 700;
}

.module-datatable-length select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 76px;
    min-height: 36px;
    border: 1px solid #dfe6ef;
    border-radius: 9px;
    color: #30475d;
    font-size: 12px;
    padding: 6px 30px 6px 10px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2353677c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.module-datatable-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    color: #8392a5;
    font-size: 12px;
    font-weight: 600;
}

.module-datatable-bottom .dataTables_info,
.module-datatable-pagination .dataTables_paginate {
    margin: 0;
}

.module-datatable-pagination .paginate_button,
.module-datatable-pagination .page-link {
    font-family: inherit;
    font-size: 11px;
    line-height: 1.2;
    /* padding: 6px 9px; */
}

.module-datatable-pagination .paginate_button:focus,
.module-datatable-pagination .page-link:focus {
    outline: 0;
    box-shadow: none;
}

@media (max-width: 575px) {
    .module-datatable-top {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .module-datatable-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .module-datatable-pagination .dataTables_paginate {
        display: flex;
        justify-content: flex-end;
    }
}

.crew-list-card,
.crew-modal {
    font-family: "Roboto", sans-serif;
}

.crew-name {
    color: #1f2d3d;
    font-size: 13px;
    font-weight: 700;
}

.crew-meta {
    color: #1f2d3d;
    font-size: 12px;
}

.crew-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(64, 153, 255, 0.12);
    color: #4099ff;
    font-size: 11px;
    font-weight: 700;
}

.crew-pay-rate {
    color: #1f7a8c;
    font-weight: 700;
    white-space: nowrap;
}

.crew-list-card .crew-payment-btn,
.crew-list-card .crew-edit-btn,
.crew-list-card .crew-delete-btn {
    background: #fff;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.crew-list-card .crew-payment-btn {
    color: #1fb89a;
    border-color: rgba(46, 216, 182, 0.5);
}

.crew-list-card .crew-edit-btn {
    color: #4099ff;
    border-color: rgba(64, 153, 255, 0.45);
}

.crew-list-card .crew-delete-btn {
    color: #ff5370;
    border-color: rgba(255, 83, 112, 0.45);
}

.crew-list-card .crew-payment-btn:hover,
.crew-list-card .crew-payment-btn:focus {
    color: #1fb89a;
    background: rgba(46, 216, 182, 0.12);
    border-color: #2ed8b6;
}

.crew-list-card .crew-edit-btn:hover,
.crew-list-card .crew-edit-btn:focus {
    color: #4099ff;
    background: rgba(64, 153, 255, 0.12);
    border-color: #4099ff;
}

.crew-list-card .crew-delete-btn:hover,
.crew-list-card .crew-delete-btn:focus {
    color: #ff5370;
    background: rgba(255, 83, 112, 0.12);
    border-color: #ff5370;
}

.crew-empty-state {
    display: none;
    padding: 32px 16px 12px;
    text-align: center;
    color: #8392a5;
}

.crew-modal {
    z-index: 1065;
}

.crew-modal .modal-dialog {
    z-index: 1070;
}

.crew-modal .modal-content {
    overflow: visible;
    background: #fff;
    box-shadow: 0 18px 40px rgba(31, 58, 84, 0.18);
}

.crew-modal .modal-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fbfe 0%, #eef7fc 100%);
    border-bottom: 1px solid #e8f0f5;
}

.crew-modal .modal-title {
    color: #20384d;
    font-size: 18px;
    font-weight: 700;
}

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

.crew-modal .form-label {
    color: #53677c;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.crew-modal .form-control,
.crew-modal .form-select {
    min-height: 42px;
    border: 1px solid #dbe6ee;
    border-radius: 10px;
    box-shadow: none;
    color: #30475d;
    font-size: 13px;
}

.crew-modal .modal-footer {
    padding: 16px 20px 20px;
    border-top: 0;
}

.crew-modal label.error {
    display: block;
    margin-top: 6px;
    color: #ff5370;
    font-size: 11px;
    font-weight: 600;
}

.crew-modal .form-control.error,
.crew-modal .form-select.error {
    border-color: #ff5370 !important;
}

.crew-modal .form-control.is-invalid,
.crew-modal .form-control.error {
    background-image: none !important;
    padding-right: .75rem;
}

.module-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid #dbe6ee;
    border-radius: 10px;
    background: #ffffff;
}

.module-checkbox-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #30475d;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.module-checkbox-option input {
    width: 15px;
    height: 15px;
    margin: 0;
}

.module-send-credentials-option {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.module-send-credentials-option input {
    width: 16px;
    height: 16px;
    margin: 0 7px 0 0;
    cursor: pointer;
    accent-color: #007bff;
    flex-shrink: 0;
}

.module-send-credentials-option span {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}

.btn-loader-spinner {
    display: inline-block;
    animation: btn-loader-spin 0.8s linear infinite;
    margin-right: 6px;
    vertical-align: -1px;
}

@keyframes btn-loader-spin {
    to { transform: rotate(360deg); }
}

.btn-module-submit {
    position: relative;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-module-submit .la-ball-fall {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
    color: #ffffff;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: auto !important;
    height: 18px !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.btn-module-submit .la-ball-fall > div {
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    margin: 0 4px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 0 !important;
    flex-shrink: 0 !important;
    opacity: 0;
    -webkit-animation: ball-fall 1s ease-in-out infinite;
    -moz-animation: ball-fall 1s ease-in-out infinite;
    animation: ball-fall 1s ease-in-out infinite;
}

.btn-module-submit .la-ball-fall > div:nth-child(1) {
    -webkit-animation-delay: -200ms;
    -moz-animation-delay: -200ms;
    animation-delay: -200ms;
}

.btn-module-submit .la-ball-fall > div:nth-child(2) {
    -webkit-animation-delay: -100ms;
    -moz-animation-delay: -100ms;
    animation-delay: -100ms;
}

.btn-module-submit .la-ball-fall > div:nth-child(3) {
    -webkit-animation-delay: 0ms;
    -moz-animation-delay: 0ms;
    animation-delay: 0ms;
}

.btn-module-submit.is-loading {
    cursor: not-allowed !important;
}

.btn-module-submit.is-loading .btn-text {
    visibility: hidden !important;
    opacity: 0 !important;
}

.btn-module-submit.is-loading .la-ball-fall {
    opacity: 1 !important;
    visibility: visible !important;
}

.module-checkbox-grid.is-invalid,
.module-checkbox-grid.error,
.module-checkbox-grid:has(input.error) {
    border-color: #ff5370 !important;
}

.crew-payment-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.crew-payment-message {
    color: #53677c;
    font-size: 13px;
    line-height: 1.6;
}

.crew-payment-message span {
    color: #20384d;
    font-weight: 700;
}

.crew-time-picker {
    cursor: pointer;
}

.crew-time-picker::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.72;
    filter: invert(34%) sepia(15%) saturate(762%) hue-rotate(171deg) brightness(92%) contrast(87%);
}

@media (max-width: 767px) {
    .module-page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .module-modal .modal-footer {
        display: block;
    }

    .module-modal-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 12px;
    }
}

/* Expense page styles */
.expense-list-card,
.expense-breakdown-card,
.expenses-shell {
    font-family: "Roboto", sans-serif;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(43, 57, 72, 0.08);
}

.expense-list-card h1,
.expense-list-card h2,
.expense-list-card h3,
.expense-list-card h4,
.expense-list-card h5,
.expense-list-card h6,
.expenses-shell h1,
.expenses-shell h2,
.expenses-shell h3,
.expenses-shell h4,
.expenses-shell h5,
.expenses-shell h6,
.expense-modal h1,
.expense-modal h2,
.expense-modal h3,
.expense-modal h4,
.expense-modal h5,
.expense-modal h6 {
    font-family: "Roboto", sans-serif;
}

.expense-modal {
    font-family: "Roboto", sans-serif;
}

.expense-list-card.card .card-header h5:after {
    background-color: #63c7d9;
    width: 54px;
    bottom: -8px;
}

.expense-list-card .card-header h5 {
    margin-bottom: 16px !important;
}

.expenses-header-text {
    color: #6f8294;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}



.expense-list-card .card-header,
.expense-breakdown-card .card-header {
    padding-bottom: 0;
    border-bottom: 0;
}

.expense-list-card .card-block {
    padding-top: 22px;
}

.module-datatable-top-with-filter {
    align-items: flex-end;
}

.module-datatable-filter-tools {
    padding-top: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
}

.module-datatable-select-filter {
    position: relative;
    min-width: 160px;
}

.expense-list-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.expense-list-category-filter {
    position: relative;
    min-width: 140px;
}

.expense-list-date-range {
    width: 275px;
    flex-wrap: nowrap;
}

.expense-list-date-range .form-control,
.expense-list-date-range .input-group-text,
.expense-list-reset-filter,
.expenses-category-select,
#expensesTable_wrapper .dataTables_filter input {
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
}

.expense-list-date-range .form-control {
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.expense-list-date-range .input-group-text {
    border: 1px solid #dfe6ef;
    color: #61758a;
    cursor: pointer;
}

.expense-list-reset-filter {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .expense-list-filter-group {
        flex-wrap: wrap;
    }

}

.module-datatable-filter-tools .dataTables_filter {
    margin: 0;
}

.expenses-shell .dataTables_filter input,
.expense-category-list-modal-dialog .dataTables_filter input {
    width: 160px;
    height: 36px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #dfe6ef;
    border-radius: 9px;
    color: #30475d;
    font-size: 12px;
}

.expenses-shell {
    border: 0;
    background: #fff;
    padding: 22px;
}

.expenses-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
}

.expenses-title {
    color: #20384d;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.expenses-subtitle {
    color: #6f8294;
    font-size: 13px;
    margin-bottom: 0;
}

.expense-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.expense-period-toggle {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 10px;
    background: #fff;
}

.expenses-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.expenses-period-toggle {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 10px;
    background: #fff;
}

.expenses-period-toggle button {
    min-height: 40px;
    border: 0;
    border-right: 1px solid #dfe6ef;
    background: #fff;
    color: #65748b;
    font-size: 12px;
    font-weight: 700;
    padding: 0 14px;
}

.expenses-period-toggle button:last-child {
    border-right: 0;
}

.expenses-period-toggle button.active {
    background: #f4f8fb;
    color: #20384d;
}

.expense-period-toggle button {
    min-height: 40px;
    border: 0;
    border-right: 1px solid #dfe6ef;
    background: #fff;
    color: #65748b;
    font-size: 12px;
    font-weight: 700;
    padding: 0 14px;
}

.expense-period-toggle button:last-child {
    border-right: 0;
}

.expense-period-toggle button.active {
    background: #f4f8fb;
    color: #20384d;
}

.expense-toolbar .form-control,
.expense-toolbar .form-select,
.expenses-toolbar .form-control,
.expenses-toolbar .form-select {
    min-height: 46px;
    border: 1px solid #dfe6ef;
    box-shadow: none;
}

.expense-toolbar .input-group-text,
.expenses-toolbar .input-group-text {
    min-height: 46px;
    background: #f8fafd;
    border: 1px solid #dfe6ef;
    color: #65748b;
}

.expense-date-picker .expense-date-icon {
    min-height: 42px;
    background: #f8fafd;
    border-color: #dfe6ef;
    color: #65748b;
}

.expenses-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 12px;
    margin-bottom: 20px;
}

.expenses-search {
    border-radius: 10px;
}

.expenses-category-wrap {
    position: relative;
}

.expenses-category-label {
    position: absolute;
    top: -8px;
    left: 12px;
    z-index: 2;
    background: #fff;
    color: #6b7a90;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 0 4px;
}

.expense-category-filter {
    position: relative;
    padding-top: 12px; /* Add space for the floating label */
}

.expense-category-filter label {
    position: absolute;
    top: 0;
    left: 12px;
    background: #fff;
    padding: 0 4px;
    font-size: 12px;
    line-height: 1;
    z-index: 2;
}

.expense-vendor,
.expenses-vendor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1f2d3d;
    font-size: 13px;
    font-weight: 700;
}

.expense-vendor i,
.expenses-vendor i {
    color: #65748b;
    font-size: 14px;
}

.expense-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(64, 153, 255, 0.12);
    /* color: #4099ff; */
    font-size: 11px;
    font-weight: 700;
}

.expense-amount {
    color: #1f2d3d;
    font-weight: 700;
    white-space: nowrap;
}

.expense-empty-state,
.expenses-empty-state {
    display: none;
    padding: 32px 16px 12px;
    text-align: center;
    color: #8392a5;
}

.expenses-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
}



.datepicker {
    z-index: 1065 !important;
}

.expenses-breakdown-card {
    padding: 18px;
}

.expenses-breakdown-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.expenses-breakdown-title {
    color: #20384d;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0;
}

.expenses-breakdown-month {
    color: #6b7a90;
    font-size: 11px;
    font-weight: 700;
}

.expense-breakdown-card .card-block {
    padding-top: 10px;
}

.expense-breakdown-month {
    color: #6b7a90;
    font-size: 11px;
    font-weight: 700;
}

.expense-donut-wrap,
.expenses-donut-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0 18px;
}

.expense-donut,
.expenses-donut {
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background: conic-gradient(#857cdd 0deg 339.6deg, #4099ff 339.6deg 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.expense-donut::before,
.expenses-donut::before {
    content: "";
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(223, 227, 232, 0.4);
}

.expense-breakdown-list,
.expenses-breakdown-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.expense-breakdown-list li,
.expense-total-row,
.expenses-breakdown-list li,
.expenses-total-row {
    color: #1f2d3d;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 0;
}
/* Company register page */
.company-register-form {
    max-width: 720px;
}

.company-register-card .card-block {
    padding: 32px 34px 30px;
}

.company-register-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.expense-legend,
.expenses-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.expense-legend-dot,
.expenses-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.expense-legend-dot.other,
.expenses-legend-dot.other {
    background: #857cdd;
}

.expense-legend-dot.blue,
.expenses-legend-dot.blue {
    background: #4099ff;
}

.expense-total-row,
.expenses-total-row {
    margin-top: 8px;
    border-top: 1px solid #eef2f7;
    padding-top: 14px;
}

.expense-modal .modal-content {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.26);
}

.expense-modal {
    z-index: 1061;
}

.expense-modal-dialog {
    max-width: 780px;
    width: calc(100% - 24px);
}

.expense-modal .modal-header {
    padding: 18px 20px 10px;
    background: #fff;
    border-bottom: 0;
}

.expense-modal .modal-title {
    color: #26384d;
    font-size: 14px;
    font-weight: 700;
}

.expense-modal .modal-body {
    padding: 8px 20px 12px;
}

.expense-modal .form-label {
    color: #53677c;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.expense-modal .form-control,
.expense-modal .form-select,
.expense-modal textarea {
    min-height: 47px;
    border: 1px solid #cbd3dd;
    border-radius: 10px;
    box-shadow: none;
    color: #26384d;
    font-size: 13px;
    padding: 10px 12px;
}

.expense-modal textarea {
    min-height: 66px;
    resize: none;
}

.expense-modal .modal-footer {
    border-top: 0;
    padding: 12px 8px 8px;
    justify-content: flex-end;
    gap: 8px;
}

.expense-modal label.error {
    display: block;
    margin-top: 6px;
    color: #ff5370;
    font-size: 11px;
    font-weight: 600;
}

.expense-modal .form-control.error,
.expense-modal .form-select.error,
.expense-modal textarea.error {
    border-color: #ff5370 !important;
}

.expense-popup-field {
    margin-bottom: 10px;
    position: relative;
}

.expense-date-field label {
    position: absolute;
    top: -8px;
    left: 12px;
    z-index: 2;
    background: #fff;
    color: #53677c;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 0 4px;
}

.expense-notes-field {
    margin-bottom: 10px;
}

.expense-notes-field textarea {
    padding-right: 42px;
}

.expense-notes-icon {
    position: absolute;
    right: 16px;
    bottom: 17px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0fb836;
    color: #fff;
    font-size: 9px;
}

.expense-popup-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #52657a;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
    margin: 4px 0 14px;
    padding-top: 15px;
}

.expense-popup-message-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #52657a;
    color: #fff;
    font-size: 11px;
}

.expense-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(31, 58, 84, 0.18);
}

.expense-modal .modal-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fbfe 0%, #eef7fc 100%);
    border-bottom: 1px solid #e8f0f5;
}

.expense-modal .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #20384d;
}

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

.expense-modal .form-label {
    font-size: 12px;
    font-weight: 700;
    color: #53677c;
    margin-bottom: 6px;
}

.expense-modal .form-control,
.expense-modal .form-select,
.expense-modal textarea {
    border: 1px solid #dbe6ee;
    border-radius: 10px;
    min-height: 42px;
    box-shadow: none;
    color: #30475d;
    font-size: 13px;
}

.expense-modal textarea {
    min-height: 90px;
    resize: vertical;
}

.expense-modal .modal-footer {
    padding: 16px 20px 20px;
    border-top: 0;
}

.expense-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.expense-category-combobox {
    position: relative;
}

.expense-category-trigger {
    width: 100%;
    text-align: left;
    background-color: #fff;
    color: #30475d;
}

.expense-category-trigger::after {
    display: none;
}

.expense-category-placeholder {
    color: #8392a5;
}

.expense-category-selected {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.expense-category-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1075;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    border: 1px solid #e7eef4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 35px rgba(25, 49, 72, 0.14);
    overflow: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.expense-category-dropdown.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.expense-category-search-wrap {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #eef2f7;
}

.expense-category-search-wrap i {
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    color: #8392a5;
    font-size: 14px;
}

.expense-category-search {
    min-height: 38px !important;
    padding-left: 34px !important;
    border-radius: 10px !important;
}

.expense-category-options {
    max-height: 210px;
    overflow-y: auto;
    padding: 6px;
}

.expense-category-option {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 12px 18px;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #42586c;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 7px 10px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.expense-category-option:hover,
.expense-category-option.active {
    background: #f3f8fb;
    color: #1f7a8c;
}

.expense-category-option.selected {
    background: rgba(64, 153, 255, 0.12);
    color: #4099ff;
    box-shadow: inset 0 0 0 1px rgba(64, 153, 255, 0.22);
}

.expense-category-option-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.expense-category-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-category-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    justify-self: center;
}

.expense-category-check {
    justify-self: end;
    color: #4099ff;
    font-size: 15px;
}

.expense-category-empty {
    padding: 18px 12px;
    color: #8392a5;
    font-size: 12px;
    text-align: center;
}

.expense-add-category-btn {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-top: 1px solid #eef2f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: #4099ff;
}

.company-register-step-indicator {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d9e6ed;
    border-radius: 14px;
    background: #f8fbfd;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.company-register-step-indicator:not(:disabled):hover,
.company-register-step-indicator:not(:disabled):focus {
    border-color: #63c7d9;
    background: #f1fafc;
    outline: none;
}

.company-register-step-indicator:not(:disabled):focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 199, 217, 0.25);
}

.company-register-step-indicator:disabled {
    cursor: default;
    opacity: 1;
}

.company-register-form .register-input:disabled {
    background: #f1f5f8;
    color: #8a98a8;
    cursor: not-allowed;
    opacity: 0.75;
}

.company-register-password-field {
    position: relative;
}

.company-register-password-field .register-input {
    padding-right: 38px;
}

.company-register-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #607388;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.company-register-password-toggle:hover,
.company-register-password-toggle:focus {
    color: #1f7a8c;
    outline: none;
}

.company-register-password-toggle:focus-visible {
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(99, 199, 217, 0.25);
}

.company-register-password-toggle i {
    font-size: 16px;
}

.company-email-verified-form {
    max-width: 520px;
}

.company-email-verified-card .card-block {
    padding: 42px 36px;
}

.company-email-verified-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f7a8c 0%, #63c7d9 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(31, 122, 140, 0.22);
}

.company-email-verified-icon i {
    font-size: 34px;
}

.company-email-verified-message {
    margin: 12px 0 26px;
}

.company-register-step-indicator span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e0edf4;
    color: #245c73;
    font-weight: 700;
}

.company-register-step-indicator small {
    color: #607388;
    font-size: 12px;
    font-weight: 700;
}

.expense-add-category-btn:hover {
    background: #f8fbfe;
}

.expense-category-combobox label.error {
    margin-top: 6px;
}

.expense-category-modal-dialog {
    max-width: 540px;
    width: calc(100% - 24px);
}

.expense-category-list-modal-dialog {
    max-width: 820px;
    width: calc(100% - 24px);
}

.module-datatable-category-top {
    align-items: center;
    grid-template-columns: 1fr auto;
    justify-items: end;
    min-height: 46px;
    margin-bottom: 8px;
    padding-top: 2px;
}

.module-datatable-category-top .dataTables_filter {
    margin: 0;
}

.module-datatable-category-top .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    color: #65748b;
    font-size: 12px;
    font-weight: 700;
}

.module-datatable-category-top .dataTables_filter input {
    min-height: 36px;
    border: 1px solid #dfe6ef;
    border-radius: 9px;
    color: #30475d;
    font-size: 12px;
    padding: 6px 10px;
}

.expense-category-table-wrap {
    padding-top: 4px;
}

.expense-category-table-wrap .dataTables_wrapper,
.expense-category-table-wrap .dataTables_scroll,
.expense-category-table-wrap .dataTables_scrollHead,
.expense-category-table-wrap .dataTables_scrollHeadInner,
.expense-category-table-wrap .dataTables_scrollBody,
.expense-category-table-wrap .dataTables_scrollHead table,
.expense-category-table-wrap .dataTables_scrollBody table {
    width: 100% !important;
}

.expense-category-management-table {
    width: 100% !important;
    min-width: 580px;
    font-size: 13px;
    margin-bottom: 0;
}

.expense-category-management-table thead th {
    background: #f6f6f7;
    border-top: 0;
    border-bottom: 1px solid #eef2f7;
    color: #6b7a90;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 0.75rem;
}

.expense-category-management-table tbody td {
    padding: 12px 0.75rem;
    vertical-align: middle;
    border-color: #eef2f7;
}

.expense-category-table-name,
.expense-category-table-color {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1f2d3d;
    font-weight: 700;
}

.expense-category-color-preview {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px solid rgba(31, 45, 61, 0.12);
    display: inline-block;
}

.expense-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.expense-status-pill.active {
    background: green;
    color: #ffffff;
}

.expense-status-pill.inactive {
    background: red;
    color: #ffffff;
}

.expense-category-status-btn {
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    min-width: 84px;
}

.expense-color-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
}

.expense-color-preview {
    width: 100px;
    height: 42px;
    border: 1px solid #dbe6ee;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.expense-color-preview span {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    display: block;
}

.expense-color-picker input[type="color"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.expense-color-hex {
    color: #42586c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.expense-category-preview-list {
    max-height: 178px;
    overflow-y: auto;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #f9fcfe;
    padding: 8px;
    margin-bottom: 18px;
}

.expense-category-preview-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 6px 8px;
    border-radius: 10px;
    color: #42586c;
    font-size: 13px;
    font-weight: 700;
}

.expense-category-preview-item:hover {
    background: #fff;
}

.expense-category-color-input {
    width: 100%;
    padding: 6px !important;
}

.expense-category-modal .modal-body {
    overflow: visible;
}

.sweet-alert {
    border-radius: 18px;
    font-family: "Roboto", sans-serif;
}

.sweet-alert h2 {
    color: #20384d;
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.sweet-alert p {
    color: #53677c;
    font-size: 13px;
    line-height: 1.55;
}

.sweet-alert button.cancel {
    border: 1px solid #4099ff;
    background: #fff !important;
    color: #4099ff;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.sweet-alert button.confirm {
    border-radius: 10px;
    background-color: #4099ff;
    font-size: 12px;
    font-weight: 700;
}

.sweet-alert.expense-success-swal button.confirm {
    background: #4099ff !important;
}

.sweet-alert.business-success-swal button.confirm {
    background: #4099ff !important;
}

.jobDetailCallBtn{
    font-size: 12px !important;
}

@media (max-width: 1199px) {
    .expenses-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .expenses-shell {
        padding: 16px;
    }

    .expenses-header {
        display: block;
    }

    .expenses-actions {
        justify-content: flex-start;
        margin-top: 14px;
    }

    .expenses-toolbar {
        grid-template-columns: 1fr;
    }

    .expense-modal-dialog {
        margin: 12px;
    }

    .expense-category-dropdown {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 16px;
        max-height: min(420px, calc(100vh - 80px));
    }

    .expense-category-options {
        max-height: min(260px, calc(100vh - 210px));
    }

    .expense-modal .modal-footer {
        display: block;
    }

    .expense-modal-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 12px;
    }


}

.expense-popup-message span:last-child {
    font-size: 12px;
}

.company-register-step-indicator.is-active,
.company-register-step-indicator.is-complete {
    border-color: #63c7d9;
    background: #edf9fc;
}

.company-register-step-indicator.is-active span,
.company-register-step-indicator.is-complete span {
    background: linear-gradient(135deg, #1f7a8c 0%, #63c7d9 100%);
    color: #ffffff;
}

.company-register-step {
    display: none;
}

.company-register-step.is-active {
    display: block;
}

.company-register-section + .company-register-section {
    margin-top: 24px;
}

.company-register-section-title {
    margin-bottom: 14px;
    color: #245c73;
    font-size: 15px;
    font-weight: 700;
}

.company-register-note,
.company-register-field-note {
    display: block;
    color: #6f8193;
    font-size: 12px;
    line-height: 1.6;
}

.company-register-note {
    margin-bottom: 18px;
}

.company-register-field-note {
    margin-top: 8px;
}

.company-register-helper {
    margin-top: 2px;
    margin-bottom: 16px;
    background: transparent;
    border: none;
    padding: 0;
}

.company-register-helper h6 {
    display: none;
}

.company-password-checklist {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.company-password-checklist li {
    font-size: 11.5px;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.company-password-checklist li i {
    font-size: 11px;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.company-password-checklist li.is-valid {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
    font-weight: 600;
}

.company-password-checklist li.is-valid i {
    color: #10b981;
    font-weight: bold;
}

.company-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.company-review-item {
    padding: 14px 16px;
    border-radius: 14px;
    background: #f7fbfd;
    border: 1px solid #dfebf1;
}

.company-review-item span {
    display: block;
    margin-bottom: 6px;
    color: #6f8193;
    font-size: 12px;
}

.company-review-item strong {
    color: #213547;
    font-size: 14px;
    word-break: break-word;
}

.company-register-checkbox {
    margin-top: 0;
}

.company-register-recaptcha {
    margin-top: 0;
    min-height: 78px;
}

.company-register-recaptcha.is-invalid .invalid-feedback {
    display: block;
}

.company-register-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
}

.company-register-action {
    min-width: 140px;
}

.company-register-footer {
    margin-top: 22px;
    color: #6f8193;
}

.company-register-footer a {
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .company-register-card .card-block {
        padding: 28px 22px 24px;
    }

    .company-register-steps {
        flex-direction: column;
    }

    .company-register-step-indicator {
        width: 100%;
    }

    .company-review-grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 575px) {
    .company-register-actions {
        flex-direction: column;
    }

    .company-register-action {
        width: 100%;
    }
}

/* Shared module UI primitives */
.module-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-module-outline,
.btn-module-submit,
.btn-module-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.btn-module-submit {
    box-shadow: 0 10px 20px rgba(64, 153, 255, 0.18);
}

.btn-module-delete {
    color: #ff5370;
    border-color: rgba(255, 83, 112, 0.28);
    background: rgba(255, 83, 112, 0.08);
}

.module-list-card {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(43, 57, 72, 0.08);
}

.module-list-card .card-header {
    /* padding-bottom: 0; */
    border-bottom: 0;
}

.module-toolbar .form-control,
.module-toolbar .form-select {
    min-height: 46px;
    border: 1px solid #dfe6ef;
    box-shadow: none;
}

.module-toolbar .input-group-text {
    min-height: 46px;
    background: #f8fafd;
    border: 1px solid #dfe6ef;
    color: #65748b;
}

.module-table {
    font-size: 13px;
}

.module-table thead th {
    border-top: 0;
    border-bottom: 1px solid #eef2f7;
    background: #f4f6f8;
    color: #6b7a90;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-top: 12px;
    padding-bottom: 12px;
}

.module-table tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    vertical-align: middle;
    border-color: #eef2f7;
}

.module-name {
    color: #1f2d3d;
    font-weight: 700;
    font-size: 13px;
}

.module-meta {
    color: #8392a5;
    font-size: 11px;
}

.module-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.module-badge-primary {
    background: rgba(64, 153, 255, 0.12);
    color: #4099ff;
}

.module-badge-success {
    background: rgba(46, 216, 182, 0.13);
    color: #10a98a;
}

.module-badge-warning {
    background: rgba(255, 182, 77, 0.16);
    color: #ff9f1a;
}

.module-empty-state {
    display: none;
    padding: 32px 16px 12px;
    text-align: center;
    color: #8392a5;
}

.module-action-list {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.module-action-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f7fb;
    color: #5f7388;
}

.module-action-btn:hover,
.module-action-btn:focus {
    color: #4099ff;
    background: rgba(64, 153, 255, 0.12);
}

.module-action-delete:hover,
.module-action-delete:focus {
    color: #ff5370;
    background: rgba(255, 83, 112, 0.12);
}

.module-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(31, 58, 84, 0.18);
}

.module-modal .modal-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fbfe 0%, #eef7fc 100%);
    border-bottom: 1px solid #e8f0f5;
}

.module-modal .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #20384d;
}

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

.module-modal .modal-footer {
    padding: 16px 20px 20px;
    border-top: 0;
}

.module-modal .form-label {
    font-size: 12px;
    font-weight: 700;
    color: #53677c;
    margin-bottom: 6px;
}

.module-modal textarea {
    resize: vertical;
}

.module-stat-card {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(43, 57, 72, 0.08);
}

.module-stat-card .card-body {
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
}

.module-stat-label {
    display: block;
    color: #6f8294;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.module-stat-value {
    display: block;
    color: #20384d;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.module-stat-caption {
    color: #8392a5;
    font-size: 12px;
    font-weight: 600;
}

.module-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    flex: 0 0 auto;
}

.module-stat-primary .module-stat-icon { background: #4099ff; }
.module-stat-warning .module-stat-icon { background: #ffb64d; }
.module-stat-success .module-stat-icon { background: #2ed8b6; }
.module-stat-info .module-stat-icon { background: #00bcd4; }

/* Dashboard module */
.dashboard-revenue-card {
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-revenue-card:hover,
.dashboard-revenue-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(32, 48, 68, 0.12);
}

.dashboard-revenue-card:focus-visible {
    outline: 3px solid rgba(64, 153, 255, 0.22);
    outline-offset: 2px;
}

.dashboard-revenue-card .card-header {
    padding-bottom: 0;
}

.dashboard-revenue-card-success {
    background: #ffffff;
    border: 1px solid rgba(46, 216, 127, 0.35);
}

.dashboard-revenue-card-purple {
    background: #ffffff;
    border: 1px solid rgba(165, 55, 200, 0.18);
}

.dashboard-revenue-card-success h5,
.dashboard-revenue-card-success .dashboard-revenue-icon {
    color: #16a34a;
}

.dashboard-revenue-card-purple h5,
.dashboard-revenue-card-purple .dashboard-revenue-icon,
.dashboard-revenue-card-purple .dashboard-revenue-meta strong {
    color: #a537c8;
}

.dashboard-revenue-icon {
    font-size: 26px;
    line-height: 1;
}

.dashboard-revenue-meta {
    display: grid;
    gap: 6px;
    margin-top: 18px;
    font-size: 12px;
}

.dashboard-revenue-meta strong {
    color: #16a34a;
    font-size: 20px;
    line-height: 1;
}

.dashboard-revenue-meta span {
    color: #65748b;
    font-weight: 700;
}

.dashboard-revenue-meta b {
    color: #10a98a;
}

.dashboard-revenue-meta em {
    color: #ff7a1a;
    font-style: normal;
}

.dashboard-chart-wrap {
    min-height: 190px;
    padding: 8px 4px 0;
    overflow: visible;
    position: relative;
    width: 100%;
}

.dashboard-revenue-chart {
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 190px;
}

.dashboard-revenue-chart .flot-x-axis .flot-tick-label,
.dashboard-revenue-chart .flot-y-axis .flot-tick-label {
    color: #748095 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.dashboard-revenue-hover-tooltip {
    position: absolute;
    z-index: 1080;
    display: none;
    min-width: 132px;
    padding: 9px 11px;
    border: 1px solid #dbe6ee;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31, 58, 84, 0.16);
    color: #53677c;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}

.dashboard-revenue-hover-tooltip.is-visible {
    display: block;
}

.dashboard-revenue-hover-tooltip strong,
.dashboard-revenue-hover-tooltip span {
    display: block;
}

.dashboard-revenue-hover-tooltip strong {
    margin-bottom: 3px;
    color: #20384d;
    font-size: 12px;
    font-weight: 700;
}

.dashboard-revenue-modal .modal-dialog {
    max-width: 1120px;
}

.dashboard-revenue-modal .modal-body {
    padding: 0;
}

.dashboard-revenue-modal-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-revenue-modal-heading > div > span {
    display: block;
    margin-top: 2px;
    color: #748095;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-revenue-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(46, 216, 182, 0.14);
    color: #18a689;
    font-size: 18px;
}

.dashboard-revenue-modal.is-monthly .dashboard-revenue-modal-icon {
    background: rgba(165, 55, 200, 0.12);
    color: #a537c8;
}

.dashboard-revenue-modal-chart-panel {
    min-width: 0;
    padding: 28px 24px 24px;
}

.dashboard-revenue-modal-chart-wrap {
    position: relative;
    min-height: 370px;
    width: 100%;
}

.dashboard-revenue-detail-chart {
    height: 370px;
}

.dashboard-revenue-breakdown {
    border-left: 1px solid #e8f0f5;
    background: #fbfcfe;
}

.dashboard-revenue-breakdown-header {
    padding: 24px 20px 18px;
    border-bottom: 1px solid #e8f0f5;
}

.dashboard-revenue-breakdown-header h6 {
    margin: 0 0 4px;
    color: #20384d;
    font-size: 14px;
    font-weight: 700;
}

.dashboard-revenue-breakdown-header span {
    color: #8392a5;
    font-size: 11px;
    font-weight: 600;
}

.dashboard-revenue-breakdown-list {
    display: grid;
    gap: 12px;
    max-height: 348px;
    padding: 18px;
    overflow-y: auto;
}

.dashboard-revenue-breakdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e1e8ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(31, 58, 84, 0.05);
}

.dashboard-revenue-breakdown-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.dashboard-revenue-breakdown-copy strong,
.dashboard-revenue-breakdown-copy span {
    display: block;
}

.dashboard-revenue-breakdown-copy strong {
    margin-bottom: 4px;
    color: #20384d;
    font-size: 12px;
    font-weight: 700;
}

.dashboard-revenue-breakdown-copy span {
    color: #53677c;
    font-size: 13px;
}

.dashboard-revenue-breakdown-empty {
    padding: 46px 18px;
    color: #8392a5;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 991.98px) {
    .dashboard-revenue-modal .modal-dialog {
        max-width: calc(100% - 24px);
    }

    .dashboard-revenue-modal-chart-panel {
        padding: 22px 16px 18px;
    }

    .dashboard-revenue-modal-chart-wrap,
    .dashboard-revenue-detail-chart {
        min-height: 300px;
        height: 300px;
    }

    .dashboard-revenue-breakdown {
        border-top: 1px solid #e8f0f5;
        border-left: 0;
    }

    .dashboard-revenue-breakdown-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 260px;
    }
}

@media (max-width: 575.98px) {
    .dashboard-revenue-modal-heading > div > span {
        display: none;
    }

    .dashboard-revenue-modal-chart-wrap,
    .dashboard-revenue-detail-chart {
        min-height: 250px;
        height: 250px;
    }

    .dashboard-revenue-breakdown-list {
        grid-template-columns: 1fr;
    }
}

.dashboard-customer-card .card-block {
    padding-top: 8px;
}

.dashboard-crm-customer-row {
    color: #20384d;
    display: block;
    min-height: 58px;
    margin-bottom: 24px;
    padding-right: 84px;
}

.dashboard-crm-customer-row:last-child {
    margin-bottom: 0;
}

.dashboard-crm-customer-row:hover,
.dashboard-crm-customer-row:focus {
    color: #4099ff;
}

.dashboard-crm-customer-copy {
    max-width: calc(100% - 68px);
}

.dashboard-crm-customer-copy h6,
.dashboard-crm-customer-copy .text-muted {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-crm-customer-copy .text-muted {
    display: block;
}

.new-cust-card .align-middle .dashboard-crm-customer-time {
    color: #748095;
    font-size: 12px;
    right: 0;
    top: 18px;
    white-space: nowrap;
}

.dashboard-crm-customer-time i {
    margin-right: 6px;
}

.dashboard-jobs-table {
    min-width: 860px;
}

/* Left-align all table headers */
.module-table thead th {
    text-align: left !important;
}

/* DataTables numeric header */
.module-table thead th.dt-type-numeric,
.module-table thead th.dt-right {
    text-align: left !important;
}

/* Keep Actions centered */
.module-table thead th:last-child{
    text-align: center !important;
}
.module-table tbody td:last-child {
    text-align: right ;
    /* Do not change this css. Gopi mam added as bug if we put action button on center  */
}

/* Override last-child alignment for tables where the last column is not Actions. */
table#jobsTable thead th:last-child,
table#jobsTable tbody td:last-child,
table#masterAdminCompaniesTable thead th:last-child,
table#masterAdminCompaniesTable tbody td:last-child {
    text-align: left !important;
}

/* Crew assignment workspace */
.assignment-workspace {
    align-items: flex-start;
}

.assignment-jobs-card,
.assignment-crew-card {
    min-height: 100%;
}

.assignment-jobs-card .module-section-title,
.assignment-crew-card .module-section-title {
    margin-bottom: 0;
}

.assignment-sidebar {
    border-left: 1px solid #edf2f7;
    padding-left: 20px;
}

.assignment-sidebar-search {
    margin-bottom: 14px;
}

.assignment-empty-panel {
    display: none;
    color: #6f8294;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 28px 16px;
    border: 1px dashed #dfe6ef;
    border-radius: 12px;
    background: #f8fafd;
}
.assignment-job-meta {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    margin-top:12px;
}
.assignment-job-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5f7390;
    font-size: 12px;
    font-weight: 700;
}

 .module-list-card-service-plan .card-header {
            padding-bottom: 20px !important;
        }
@media only screen and (max-width: 1199px) {
    .assignment-sidebar {
        border-left: 0;
        border-top: 1px solid #edf2f7;
        padding-left: 0;
        padding-top: 20px;
        margin-top: 8px;
    }
}

@media only screen and (max-width: 575px) {
    .module-date-nav,
    .module-date-nav .btn,
    .module-date-nav-label,
    .module-date-nav-controls {
        width: 100%;
    }

    .module-date-nav-controls {
        justify-content: center;
    }

    .module-date-nav-label {
        text-align: center;
    }

    .module-option-grid {
        grid-template-columns: 1fr;
    }
}

/* Shared module form/layout helpers */
.module-field-action {
    align-self: end;
}

.module-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.module-calendar-wrap {
    width: 100%;
    min-height: 0;
}

.module-calendar-wrap.has-wide-agenda-columns {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: none;
    min-height: 42px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #314255;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.select2-container--default .select2-results__option,
.select2-results__option {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 4px 8px;
}

/* Scheduling module */
.schedule-page {
    display: grid;
    gap: 22px;
}

.job-detail-quick-text-menu {
    max-height: min(320px, calc(100vh - 180px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.schedule-control-grid {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(180px, 1fr) minmax(140px, .8fr) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 18px;
}

.schedule-control-grid,
.schedule-control-grid label,
.schedule-control-grid button,
.schedule-control-grid .select2-container,
.schedule-job-dialog,
.schedule-job-dialog input,
.schedule-job-dialog select,
.schedule-job-dialog textarea,
.schedule-job-dialog button,
.schedule-job-dialog label {
    font-family: "Roboto", sans-serif;
}

.schedule-control-grid .form-label,
.schedule-control-grid .select2-selection__placeholder,
.schedule-control-grid .select2-selection__rendered,
.schedule-control-grid button {
    font-size: 13px;
}

.schedule-segmented-control {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 4px;
    background: #f3f7fb;
    border-radius: 8px;
    height: 42px;
    width: 100%;
}

.schedule-segmented-control button {
    flex: 1 1 0;
    margin: 0 !important;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #4b6278;
    font-weight: 700;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: all 0.2s ease;
}

.schedule-segmented-control button.is-active {
    background: #4099ff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(64, 153, 255, 0.25);
}

.schedule-summary-grid {
    margin-top: 10px;
}

.schedule-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #f7faff;
    border: 1px solid #e6eef7;
    border-radius: 8px;
}

.schedule-stat span {
    color: #66788a;
    font-size: 13px;
    font-weight: 700;
}

.schedule-stat strong {
    color: #13293d;
    font-size: 16px;
}

.schedule-stat-success span,
.schedule-stat-success strong {
    color: #28a745;
}

.schedule-stat-warning span,
.schedule-stat-warning strong {
    color: #d39e00;
}

.schedule-stat-projected span,
.schedule-stat-projected strong {
    color: #6f42c1;
}



.schedule-calendar-card .card-block {
    padding-top: 0;
    padding-bottom: 14px;
}

.schedule-calendar-card {
    margin-bottom: 0;
}

.schedule-calendar-card .fc-toolbar {
    display: none;
}

.schedule-calendar-card .fc-view-container {
    border-radius: 8px;
    overflow: hidden;
}

.schedule-calendar-card .fc-month-view .fc-event-container {
    padding: 1px 3px;
}

.schedule-calendar-card .fc-event {
    border-radius: 6px;
    border: 0;
    padding: 0;
    font-weight: 700;
    overflow: visible;
}

.schedule-calendar-card .fc-event .fc-content {
    overflow: visible;
}

.schedule-calendar-card .fc-agenda-view .fc-time-grid-event {
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
    margin-left: 2px !important;
    margin-right: 2px !important;
    max-width: calc(100% - 4px);
    overflow: hidden;
}

.schedule-calendar-card .fc-agenda-view .fc-time-grid-event .fc-content,
.schedule-calendar-card .fc-agenda-view .fc-time-grid-event .schedule-event-card {
    height: 100%;
}

.schedule-calendar-card .fc-agenda-view .fc-time-grid-event .fc-content {
    inset: 0;
    overflow: hidden;
    position: absolute;
}

.schedule-calendar-card .fc-agenda-view .fc-time-grid-event .schedule-event-card {
    box-sizing: border-box;
    min-height: 100%;
}

.schedule-event-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 3px;
    min-height: 24px;
    padding: 4px 5px 4px 6px;
    line-height: 1.2;
}

.schedule-event-main {
    min-width: 0;
}

.schedule-event-title {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-event-indicators {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex-wrap: wrap;
    flex-shrink: 0;
    min-width: 0;
}

.job-indicator-badge,
.job-indicator-action,
.job-indicator-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.job-indicator-badge,
.job-indicator-action {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    flex: 0 0 18px;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    box-sizing: border-box;
    padding: 0;
    color: #fff;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(19, 41, 61, 0.18);
}

.job-indicator-badge {
    margin-left: 0;
}

.job-indicator-action {
    margin-left: 0;
    background: #4b5563;
    border-color: #fff;
}

.job-indicator-badge i,
.job-indicator-action i,
.job-indicator-option-icon i {
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.job-indicator-badge svg,
.job-indicator-action svg {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    stroke-width: 2.5;
}

.job-indicator-action:hover,
.job-indicator-badge:hover {
    color: #fff;
    transform: translateY(-1px);
}

.job-indicator-popover,
.job-indicator-comment-popover {
    position: absolute;
    z-index: 3000;
    width: 260px;
    border: 1px solid #dfe8f2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(31, 58, 84, 0.18);
    padding: 10px;
}

.job-indicator-comment-popover {
    width: 300px;
}

.job-indicator-popover-title {
    color: #20384d;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

.job-indicator-option-list {
    display: grid;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.job-indicator-option {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #314255;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    padding: 7px 8px;
}

.job-indicator-option:hover {
    background: #f2f7fb;
}

.job-indicator-option:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.job-indicator-option-icon {
    width: 24px;
    height: 24px;
}

.job-indicator-comment-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.job-indicator-comment-heading strong {
    color: #20384d;
    font-size: 13px;
    font-weight: 800;
}

.job-indicator-comment-popover .form-label {
    color: #53677c;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.job-indicator-comment-popover textarea {
    min-height: 92px;
    resize: vertical;
}

.job-indicator-actions {
    justify-content: flex-end;
    margin-top: 10px;
    width: 100%;
}

.job-indicator-actions .btn-module-delete {
    margin-right: auto;
}

.job-indicator-actions .job-indicator-remove:hover,
.job-indicator-actions .job-indicator-remove:focus,
.job-indicator-actions .job-indicator-remove:active {
    color: #ff5370;
    border-color: rgba(255, 83, 112, 0.28);
    background: rgba(255, 83, 112, 0.08);
    box-shadow: none;
}

.schedule-indicator-select-option,
.schedule-indicator-select-selection {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.schedule-indicator-select-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    color: #fff;
    line-height: 1;
}

.schedule-indicator-select-icon i {
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.job-indicator-error {
    margin-top: 8px;
    color: #ff5370;
    font-size: 12px;
    font-weight: 700;
}

.job-indicator-empty {
    color: #8392a5;
    font-size: 12px;
    font-weight: 600;
    padding: 8px;
}

.schedule-calendar-card .fc-day,
.schedule-calendar-card .fc-day-top {
    position: relative;
}

.calendar-add-btn {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: #4099ff;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    opacity: 1;
    box-shadow: none;
    overflow: hidden;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.calendar-add-btn i {
    display: block;
    font-size: 11px;
    line-height: 1;
    width: 11px;
    height: 11px;
}

.calendar-add-btn:hover {
    background: #1f7ff0;
    color: #fff;
}

.calendar-add-btn-month {
    top: 5px;
}

.calendar-add-btn-agenda {
    top: 6px;
}

#scheduleCalendar {
    min-height: 860px;
}

.schedule-job-dialog {
    max-width: 780px;
}

.schedule-job-dialog .modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.schedule-form-section {
    margin-bottom: 12px;
}

.schedule-date-row,
.schedule-time-row {
    display: grid;
    gap: 10px;
}

.schedule-date-row {
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
}

.schedule-time-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.schedule-time-part {
    min-height: 42px;
}

/* Modern styling for the date input and calendar trigger group */
.schedule-date-row .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 42px !important;
    margin-bottom: 0 !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.schedule-date-row .form-control {
    border: 1px solid #dce7f3 !important;
    border-right: none !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 42px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background-color: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
}

.schedule-date-row .form-control:focus {
    border-color: #4099ff !important;
    box-shadow: 0 0 0 3px rgba(64, 153, 255, 0.15) !important;
}

.schedule-date-row .input-group .btn {
    border: 1px solid #dce7f3 !important;
    border-left: 1px solid #e9f0f8 !important; /* light divider */
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 42px !important;
    background-color: #f8fafc !important;
    color: #6c757d !important;
    font-size: 16px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.schedule-date-row .input-group .btn:hover {
    background-color: #f0f4f8 !important;
    color: #4099ff !important;
    border-color: #4099ff !important;
}

/* Border sync when input is focused */
.schedule-date-row .input-group:focus-within .form-control {
    border-color: #4099ff !important;
}
.schedule-date-row .input-group:focus-within .btn {
    border-color: #4099ff !important;
}

/* Validation error border sync */
.schedule-date-row .form-control.error {
    border-color: #dc3545 !important;
    box-shadow: none !important;
}
.schedule-date-row .form-control.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}
.schedule-date-row .input-group:has(.error) .btn {
    border-color: #dc3545 !important;
}

.schedule-add-date-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    border: 1px solid #dce7f3 !important;
    background-color: #fff !important;
    color: #4099ff !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.schedule-add-date-btn:hover {
    border-color: #4099ff !important;
    background-color: #f0f6ff !important;
    color: #0070f3 !important;
}
.schedule-add-date-btn i {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.schedule-selected-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.schedule-date-chip {
    align-items: center;
    background: rgba(18, 103, 220, 0.08);
    border: 1px solid rgba(18, 103, 220, 0.16);
    border-radius: 999px;
    color: #1267dc;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    min-height: 30px;
    padding: 5px 8px 5px 12px;
}

.schedule-date-chip button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    padding: 0;
    width: 20px;
}




.schedule-link-button {
    color: #1267dc;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 0 2px;
    text-decoration: none;
}

.schedule-error-note {
    color: #ff5252;
    display: block;
    font-size: 10px;
}

.schedule-customer-box {
    border: 1px solid #dce7f3;
    border-radius: 8px;
    padding: 12px;
}

.schedule-inline-help {
    color: #6b7c93;
    font-size: 11px;
    margin: 0 0 10px;
}

.schedule-new-customer-fields {
    display: grid;
    gap: 8px;
}

.schedule-tab-row {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #dce7f3;
    margin-bottom: 10px;
}

.schedule-tab-row button {
    background: transparent;
    border: 0;
    color: #4b6278;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
    position: relative;
}

.schedule-tab-row button.is-active {
    color: #1267dc;
}

.schedule-tab-row button.is-active:after {
    background: #1267dc;
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}

.schedule-stack-fields {
    display: grid;
    gap: 10px;
}

.schedule-location-box {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.schedule-location-box .form-label {
    margin-bottom: 0;
}

.schedule-location-box .form-label span {
    color: #ff5252;
}

.schedule-location-box small {
    color: #6b7c93;
    font-size: 10px;
}

.schedule-location-search {
    align-items: center;
    border: 1px solid #dce7f3;
    border-radius: 999px;
    display: flex;
    gap: 6px;
    padding: 0 10px;
}

.schedule-location-search i {
    color: #6b7c93;
}

.schedule-location-search .form-control {
    border: 0;
    min-height: 28px;
    padding-left: 0;
}

.schedule-location-warning {
    align-items: center;
    background: #fff3cd;
    border-radius: 7px;
    color: #7a4d00;
    display: grid;
    gap: 6px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 8px;
}

.schedule-location-warning span {
    font-size: 10px;
    line-height: 1.3;
}

.schedule-map-picker {
    background: #e8eef2;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    min-height: 150px;
    overflow: hidden;
}

.schedule-price-field {
    border: 1px solid #dce7f3;
    border-radius: 8px;
    padding: 6px 10px;
}

.schedule-price-field label {
    color: #5d7187;
    display: block;
    font-size: 11px;
    margin-bottom: 2px;
}

.schedule-price-field .form-control {
    border: 0;
    padding: 0;
}

.schedule-photo-section {
    border: 1px dashed #cbd7e3;
    border-radius: 8px;
    padding: 10px;
}

.schedule-photo-upload {
    color: #314255;
    cursor: pointer;
    display: grid;
    gap: 8px;
    padding: 0;
}

.schedule-photo-upload strong {
    align-items: center;
    background: #1267dc;
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    min-height: 32px;
}

.schedule-photo-upload small {
    color: #53677c;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.schedule-photo-upload input {
    display: none;
}

.schedule-photo-preview {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.schedule-photo-preview.is-active {
    display: grid;
    margin-top: 12px;
}

.job-detail-photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

.job-photo-content-panel {
    align-items: center;
    display: flex;
    min-height: 112px;
}

.job-photo-empty {
    align-items: center;
    color: #475569;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.job-photo-empty i {
    color: #475569;
    font-size: 24px;
    opacity: 0.3;
}

.job-detail-photo-gallery.is-empty {
    align-items: center;
    justify-content: center;
}

.schedule-photo-preview-title {
    grid-column: 1 / -1;
    color: #405166;
    font-size: 12px;
    font-weight: 700;
}

.schedule-photo-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
    background: #f8fbfe;
    aspect-ratio: 4 / 3;
}

.schedule-photo-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .18s ease;
}

.schedule-photo-thumb button {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    align-items: center;
    background: rgba(255, 83, 112, .94);
    border: 0;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    width: 28px;
    box-shadow: 0 3px 9px rgba(31, 58, 84, .2);
}

.schedule-photo-thumb button:hover,
.schedule-photo-thumb button:focus {
    background: #e93d5d;
    color: #fff;
}

.schedule-photo-thumb:hover img,
.schedule-photo-thumb:focus img {
    transform: scale(1.03);
}

.schedule-modal-metric-grid,
.schedule-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.schedule-status-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.schedule-modal-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f7faff;
    border: 1px solid #e6eef7;
    border-radius: 8px;
}

.schedule-modal-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #4099ff;
    background: #eaf4ff;
    border-radius: 8px;
}

.schedule-modal-metric small {
    display: block;
    color: #66788a;
    font-weight: 700;
}

.schedule-modal-metric strong {
    display: block;
    color: #13293d;
    font-size: 20px;
}

.schedule-upcoming-list,
.schedule-performance-groups {
    display: grid;
    gap: 10px;
}

.schedule-upcoming-list {
    max-height: 320px;
    overflow-y: auto;
}

.schedule-upcoming-item,
.schedule-performance-group {
    padding: 14px;
    border: 1px solid #e6eef7;
    border-radius: 8px;
}

.schedule-upcoming-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.schedule-upcoming-item strong,
.schedule-performance-group h6 {
    color: #13293d;
}

.schedule-upcoming-item span,
.schedule-upcoming-item small {
    color: #66788a;
}

.schedule-performance-toolbar {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.schedule-performance-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.schedule-performance-pills span {
    border: 1px solid #cbd7e3;
    border-radius: 999px;
    color: #314255;
    font-size: 12px;
    padding: 4px 10px;
}

.schedule-performance-pills .schedule-pill-success {
    border-color: #2ed8b6;
    color: #0f9f82;
}

.schedule-performance-pills .schedule-pill-warning {
    border-color: #ff9f43;
    color: #f27a1a;
}

.schedule-role-filter {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}

.schedule-performance-table-wrap {
    border: 1px solid #dce7f3;
    border-radius: 8px;
    overflow: hidden;
}

.schedule-performance-table {
    margin-bottom: 0 !important;
}

.schedule-performance-table th {
    color: #5d7187;
    font-size: 12px;
    text-transform: uppercase;
}

.schedule-performance-role-badge {
    color: var(--role-badge-color, #1f73e8);
    font-size: 12px;
    font-weight: 700;
}

.schedule-performance-role-badge-unassigned {
    --role-badge-color: #65748b;
}

.schedule-empty-state {
    padding: 18px;
    color: #66788a;
    text-align: center;
    background: #f7faff;
    border-radius: 8px;
}

@media (max-width: 1199px) {
    .schedule-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-modal-metric-grid,
    .schedule-status-grid,
    .module-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-performance-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .schedule-role-filter {
        min-width: 0;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 575px) {
    .schedule-control-grid,
    .schedule-modal-metric-grid,
    .schedule-status-grid,
    .module-summary-grid {
        grid-template-columns: 1fr;
    }
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    background-color: #fff;
        border: 1px solid #dce7f3;
    border-radius: 10px;
    height: 42px;
    /* line-height: inherit; */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 52px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    top: 50% !important;
    right: 32px !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #6c757d !important;
    transform: translateY(-50%) !important;
    z-index: 5;
    cursor: pointer;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #212529 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    right: 12px !important;
    height: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #666 transparent transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 4px 0 4px !important;
    display: block !important;
    margin: 0 !important;
    position: static !important;
}

/* Crew Availability Styles */
.availability-filter-controls {
    gap: 12px;
}

.availability-view-buttons {
    flex: 0 0 192px;
    width: 192px;
}

.availability-filter-controls .module-date-nav-controls {
    gap: 8px;
}

.availability-filter-controls .module-icon-btn {
    border-color: #dfe6ef;
    color: #4b6278;
}

.availability-filter-controls .module-icon-btn:hover,
.availability-filter-controls .module-icon-btn:focus {
    border-color: #4099ff;
    color: #4099ff;
}

@media (max-width: 575px) {
    .availability-view-buttons {
        flex-basis: 100%;
        width: 100%;
    }

    .availability-filter-controls .module-date-nav-controls .module-icon-btn {
        flex: 0 0 40px;
        width: 40px;
    }
}

.availability-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 0;
}

.availability-column {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 480px;
    transition: all 0.25s ease;
}

.availability-column:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border-color: #cbd5e1;
}

.availability-day-header {
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 4px;
}

.availability-day-name {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.availability-day-date {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    margin-top: 2px;
}

.availability-blocks-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.availability-block {
    display: block;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.35;
    text-align: left;
    word-break: break-word;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.availability-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    opacity: 0.95;
}

.availability-block-name {
    display: inline-block;
    font-weight: 800;
    margin-right: 4px;
}

.availability-block-time {
    display: inline-block;
    font-weight: 500;
    opacity: 0.92;
}

/* Colors from screenshot */
.availability-block.bg-purple {
    background-color: #7b1fa2; /* Deep purple */
}
.availability-block.bg-blue {
    background-color: #0288d1; /* Sky blue */
}
.availability-block.bg-green {
    background-color: #2e7d32; /* Medium green */
}
.availability-block.bg-brown {
    background-color: #5d4037; /* Cocoa brown */
}
.availability-block.bg-red {
    background-color: #c62828; /* Crimson red */
}
.availability-block.bg-teal {
    background-color: #00695c; /* Dark teal */
}

/* ── Day View Layout ────────────────────────────────────────────── */
/* Centred date heading shown in day mode instead of the small column header */
.availability-day-view-heading {
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    padding: 10px 0 14px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

/* In day mode the single column has no border/background — just a clean list */
.availability-grid[data-view="day"] {
    /* display: block !important;    single column, no grid gap needed */
    padding: 4px 0;
}

.availability-grid[data-view="day"] .availability-column {
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: unset;
    background: transparent;
    box-shadow: none;
}

.availability-grid[data-view="day"] .availability-column:hover {
    box-shadow: none;
    border-color: transparent;
}

/* Day view blocks are full-width, taller rows with larger text */
.availability-grid[data-view="day"] .availability-block {
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.availability-grid[data-view="day"] .availability-block-name {
    font-size: 13px;
    font-weight: 800;
    margin-right: 6px;
}

.availability-grid[data-view="day"] .availability-block-time {
    font-size: 13px;
    font-weight: 500;
}

/* ── Crew Selection States ──────────────────────────────────────── */
/* When a crew is selected, dim every block that is NOT theirs */
.availability-block.is-dimmed {
    opacity: 0.22;
    transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Dimmed blocks become fully visible on hover so the tooltip is readable */
.availability-block.is-dimmed:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Selected crew blocks get a bright outline ring */
.availability-block.is-selected {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: -3px;
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.45) !important;
    transform: translateY(-1px);
}

/* Tooltip that appears on hover showing the full crew name */
.availability-block[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.availability-block {
    position: relative; /* needed for tooltip pseudo-element */
}

/* Sidebar changes & Pagination */
.availability-sidebar-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #eef2f6;
    margin-top: 14px;
    min-width: 0;
}

.availability-page-length {
    display: flex;
    justify-content: center;
    width: 100%;
}

.availability-page-length.module-datatable-length label {
    font-size: 12px;
}

.availability-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
}

.availability-pagination-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe6ef;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.availability-pagination-btn:hover {
    background: #eef6ff;
    color: #4099ff;
    border-color: #b9d9ff;
}

.availability-pagination-btn.is-active {
    background: #4099ff;
    color: #fff;
    border-color: #4099ff;
    box-shadow: 0 4px 10px rgba(64, 153, 255, 0.22);
    cursor: default;
}

.availability-pagination-btn:focus-visible,
.availability-page-size:focus {
    outline: 0;
    border-color: #4099ff;
    box-shadow: 0 0 0 3px rgba(64, 153, 255, 0.14);
}

.availability-pagination-btn i {
    font-size: 13px;
    line-height: 1;
}

.availability-pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.availability-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 28px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.availability-page-size {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 76px;
    min-width: 76px;
    min-height: 36px;
    font-size: 12px;
    font-weight: 700;
    color: #30475d;
    border: 1px solid #dfe6ef;
    border-radius: 9px;
    padding: 6px 30px 6px 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2353677c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    max-width: 100%;
    margin: 0;
}

.availability-empty-grid {
    display: none;
    text-align: center;
    color: #64748b;
    padding: 40px 16px;
    font-size: 14px;
    font-weight: 500;
    grid-column: span 7;
}

.availability-footer-info {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

/* ── Monthly Calendar Grid ───────────────────────────────────────── */

/* Day-of-week header row (Sun Mon Tue … Sat) */
.month-calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 0;
}

.month-dow-cell {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

/* The date cell grid itself */
.month-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-left: 1px solid #e9eef4;
    border-top: 1px solid #e9eef4;
}

/* Individual day cell */
.month-day-cell {
    min-height: 100px;
    padding: 6px 8px 8px;
    border-right: 1px solid #e9eef4;
    border-bottom: 1px solid #e9eef4;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background 0.15s;
}

.month-day-cell:hover {
    background: #f8fafc;
}

/* Days outside the current month are lightly greyed */
.month-day-other {
    background: #f6f8fb;
}

.month-day-other .month-day-number {
    color: #b0bec5;
}

/* Date number at top of each cell */
.month-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    border-radius: 50%;
    margin-bottom: 3px;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.month-day-number:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Today's date gets a filled blue circle */
.month-day-number.is-today {
    background: #4361ee;
    color: #fff;
}

.month-day-number.is-today:hover {
    background: #2541d4;
}

/* "+N" overflow badge — clickable to jump to day view */
.month-overflow-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #4361ee;
    padding: 1px 4px;
    margin-top: 1px;
    cursor: pointer;
    letter-spacing: 0.02em;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.month-overflow-badge:hover {
    background: #eef0ff;
    color: #2541d4;
}


/* Availability block pill inside a month cell */
.month-avail-block {
    display: block;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: opacity 0.18s, transform 0.18s;
    position: relative;
}

.month-avail-block:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* Reuse existing bg-* colour classes from week view */
.month-avail-block.bg-purple { background-color: #7b1fa2; }
.month-avail-block.bg-blue   { background-color: #0288d1; }
.month-avail-block.bg-green  { background-color: #2e7d32; }
.month-avail-block.bg-brown  { background-color: #5d4037; }
.month-avail-block.bg-red    { background-color: #c62828; }
.month-avail-block.bg-teal   { background-color: #00695c; }

/* Dimmed / selected states (same as week view) */
.month-avail-block.is-dimmed {
    opacity: 0.22;
    pointer-events: none;
}
.month-avail-block.is-dimmed:hover {
    opacity: 1;
    pointer-events: auto;
}
.month-avail-block.is-selected {
    outline: 2px solid rgba(255,255,255,0.85);
    outline-offset: -2px;
    box-shadow: 0 0 0 3px rgba(0,102,255,0.45);
}

/* ==========================================================================
   Report Module Styles
   ========================================================================== */

/* Report Nav Tabs */
.report-nav-tabs {
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 24px;
}
.report-nav-tabs .nav-link {
    border: none;
    color: #64748b;
    font-weight: 600;
    padding: 12px 24px;
    font-size: 15px;
    background: transparent;
    position: relative;
    transition: all 0.3s ease;
}
.report-nav-tabs .nav-link:hover {
    color: #4099ff;
}
.report-nav-tabs .nav-link.active {
    color: #4099ff;
    background: transparent;
}
.report-nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #4099ff;
    border-radius: 2px 2px 0 0;
}

/* Report Summary Cards */
.report-summary-card {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(43, 57, 72, 0.08);
    background: #fff;
    margin-bottom: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.report-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(43, 57, 72, 0.12);
}
.report-summary-card .card-body {
    padding: 24px;
}
.report-summary-label {
    color: #6f8294;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.report-summary-count {
    color: #20384d;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 0;
}
.report-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

/* Report Charts Container */
.report-chart-container {
    position: relative;
    height: 340px;
    width: 100%;
}

/* Top Customers List */
.top-customer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.top-customer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}
.top-customer-item:last-child {
    border-bottom: none;
}
.top-customer-info {
    display: flex;
    align-items: center;
    gap: 14px;
}
.customer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}
.customer-avatar-primary { background: rgba(64,153,255,0.15); color: #4099ff; }
.customer-avatar-success { background: rgba(46,216,182,0.15); color: #10a98a; }
.customer-avatar-warning { background: rgba(255,182,77,0.15); color: #ff9f1a; }
.customer-avatar-danger { background: rgba(255,83,112,0.15); color: #ff5370; }

.customer-details h6 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}
.customer-details p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}
.customer-stats {
    text-align: right;
}
.customer-stats h6 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: #20384d;
}
.customer-stats p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

/* Report Date Range Picker */
.report-date-range-picker {
    flex: 0 0 auto;
    border: 1px solid #d5dfeb;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.report-date-range-picker .form-control {
    min-height: 38px;
    border: 0;
    background: #fff;
    color: #495057;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 12px;
    cursor: pointer;
}
.report-date-range-picker .input-group-text {
    min-height: 38px;
    border: 0;
    border-left: 1px solid #d5dfeb;
    background: #f8fafd;
    color: #5f7390;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 12px;
}

/* Common Background Colors */
.bg-c-blue { background: #4099ff; }
.bg-c-green { background: #2ed8b6; }
.bg-c-yellow { background: #FFB64D; }
.bg-c-pink { background: #FF5370; }
.bg-c-lite-green { background: #81c784; }
.bg-c-purple { background: #7e57c2; }


.select2-container .select2-selection.error {
    border: 1px solid #dc3545 !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #dce7f3 !important;
    border-radius: 10px;
    min-height: 42px;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 8px !important;
    margin: 0 !important;
    list-style: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #4099ff !important;
    border: none !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 0 8px !important;
    margin: 4px 4px 4px 0 !important;
    font-size: 12px !important;
    height: 26px !important;
    line-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.8) !important;
    margin-right: 6px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

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

.select2-container--default .select2-selection--multiple .select2-search--inline {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    font-size: 13px !important;
    height: 26px !important;
    line-height: 26px !important;
}

/* Style + Add New Customer in select2 dropdown list */
.select2-add-customer-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    user-select: none;
    transition: background-color 0.15s ease;
}
.select2-add-customer-footer:hover {
    background-color: #f8fafc !important;
}
.select2-add-new-customer-opt,
.select2-add-new-prospect-opt {
    color: #0284c7 !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.select2-results__option.select2-opt-add-new-prospect,
.select2-results__option[id*="__add_new_prospect__"] {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
}

.select2-add-prospect-inline {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    margin: 6px -12px -8px -12px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: block !important;
}

.select2-results__option.select2-opt-add-new-prospect:hover,
.select2-results__option[id*="__add_new_prospect__"]:hover,
.select2-results__option.select2-opt-add-new-prospect.select2-results__option--highlighted,
.select2-results__option[id*="__add_new_prospect__"].select2-results__option--highlighted,
.select2-add-prospect-inline:hover {
    background-color: #f8fafc !important;
    color: #0284c7 !important;
}
.select2-results__message {
    background-color: #ffffff !important;
    color: #64748b !important;
    padding: 8px 12px !important;
}

.select2-results__option.select2-opt-add-new-customer,
.select2-results__option[id*="__add_new_customer__"] {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
}

.select2-add-customer-inline {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    margin: 6px -12px -8px -12px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: block !important;
}

.select2-results__option.select2-opt-add-new-customer:hover,
.select2-results__option[id*="__add_new_customer__"]:hover,
.select2-results__option.select2-opt-add-new-customer.select2-results__option--highlighted,
.select2-results__option[id*="__add_new_customer__"].select2-results__option--highlighted,
.select2-add-customer-inline:hover {
    background-color: #f8fafc !important;
    color: #0284c7 !important;
}

.select2-results__option--highlighted .select2-add-new-customer-opt,
.select2-add-customer-inline:hover .select2-add-new-customer-opt {
    color: #0284c7 !important;
}

/* Select2 Dropdown Search Input Styling */
.select2-search--dropdown {
    padding: 8px 10px !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #d9e4ec !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 13.5px !important;
    outline: none !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
    outline: none !important;
}

.select2-container .select2-results__message {
    cursor: pointer !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    color: #64748b !important;
}

/* Select2 Not Found / Add New State Prompt */
.select2-not-found-prompt {
    padding: 2px 0;
    text-align: left;
}

.select2-add-state-action {
    background-color: #f0f9ff;
    border: 1.5px solid #bae6fd;
    border-radius: 8px;
    padding: 8px 10px;
    transition: all 0.18s ease;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
}

.select2-add-state-title {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    color: #0284c7;
    line-height: 1.3;
    overflow: hidden;
}

.select2-add-state-title .feather {
    font-size: 14px;
    flex-shrink: 0;
}

.select2-add-state-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.select2-add-state-text strong {
    font-weight: 700;
}

.select2-add-state-subtitle {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    padding-left: 20px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select2-kbd-enter {
    background: #0284c7;
    color: #ffffff;
    font-size: 10.5px;
    padding: 1.5px 5px;
    border-radius: 3px;
    font-family: inherit;
    font-weight: 600;
    margin: 0 2px;
    display: inline-block;
    vertical-align: baseline;
}

.select2-results__message:hover .select2-add-state-action,
.select2-add-state-action:hover {
    background-color: #0284c7;
    border-color: #0284c7;
}

.select2-results__message:hover .select2-add-state-title,
.select2-add-state-action:hover .select2-add-state-title {
    color: #ffffff;
}

.select2-results__message:hover .select2-add-state-subtitle,
.select2-add-state-action:hover .select2-add-state-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.select2-results__message:hover .select2-kbd-enter,
.select2-add-state-action:hover .select2-kbd-enter {
    background: #ffffff;
    color: #0284c7;
}

/* Styling for customer phone and email details in dropdown */
.select2-container .select2-results__options {
    overflow-x: hidden !important;
}
.select2-customer-row {
    display: flex;
    flex-direction: column;
    padding: 2px 0;
    white-space: normal !important;
    word-break: break-word !important;
}
.select2-customer-name {
    font-weight: 500;
    color: #314255;
    white-space: normal !important;
    word-break: break-word !important;
}
.select2-customer-details {
    font-size: 11px;
    color: #8898a9;
    margin-top: 2px;
    white-space: normal !important;
    word-break: break-word !important;
}

/* White text for customer name and details when option is highlighted (hovered) */
.select2-results__option--highlighted .select2-customer-name {
    color: #fff !important;
}
.select2-results__option--highlighted .select2-customer-details {
    color: rgba(255, 255, 255, 0.85) !important;
}

.modal-dialog-wide {
    max-width: 850px;
}

.modal-layer-top {
    z-index: 1060;
}

.modal-surface {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal-surface-lg {
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.modal-header-soft,
.modal-footer-soft {
    background: #f8fafc;
}

.modal-header-soft {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-footer-soft {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-body-clean {
    background: #fff;
    font-family: "Inter", sans-serif;
}

.detail-hero {
    background: linear-gradient(to right, #fff, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}

.ui-icon-box {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ui-icon-box-sm {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.ui-icon-box-md {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.ui-icon-box-primary {
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.icon-circle-md {
    width: 36px;
    height: 36px;
    min-width: 36px;
}

.icon-sm {
    font-size: 14px;
}

.icon-xs-muted {
    color: #475569;
    font-size: 12px;
}

.icon-muted-lg {
    font-size: 24px;
    opacity: 0.3;
}

.btn-close-sm {
    width: 10px;
    height: 10px;
}

.btn-rounded-sm,
.btn-soft-sm,
.btn-primary-soft-sm,
.btn-success-soft,
.btn-white-semibold {
    border-radius: 8px;
    font-weight: 600;
}

.btn-soft-sm,
.btn-primary-soft-sm {
    font-size: 13px;
    transition: all 0.2s;
}

.btn-soft-sm {
    border: 1px solid #e2e8f0;
    color: #475569;
    background-color: #ffffff;
}

.btn-soft-sm:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

.btn-primary-soft-sm {
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1);
}

.btn-compact-outline {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #334155;
    font-size: 11px;
    font-weight: 600;
}

.btn-compact-primary {
    color: #2563eb;
}

.btn-icon-link-sm,
.btn-link-primary-sm {
    font-size: 12px;
}

.btn-link-primary,
.btn-link-primary-sm {
    color: #2563eb;
    font-weight: 500;
}

.btn-link-primary {
    font-weight: 600;
}

.btn-icon-soft-sm {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    height: 24px;
    width: 24px;
}

.btn-success-soft {
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.btn-white-semibold {
    background: #fff;
}

.btn-muted-action {
    background: #e2e8f0;
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    font-weight: 600;
    padding: 8px 16px;
}

.btn-token {
    background: #fff;
    border-color: #93c5fd;
    font-size: 12px;
    font-weight: 500;
}

.text-title-sm {
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
}

.text-title-md {
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 700;
}

.text-title-xl {
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 800;
}

.text-section-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.text-label-caps {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.text-meta,
.text-body-sm {
    font-size: 14px;
    font-weight: 500;
}

.text-caption-wrap {
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
}

.text-item-title {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.text-strong {
    color: #0f172a;
    font-weight: 600;
}

.text-line-relaxed {
    line-height: 1.5;
}

.text-warning-dark {
    color: #b45309;
}

.text-warning-body {
    color: #78350f;
    font-weight: 500;
}

.text-success-title {
    color: #166534;
    font-size: 14px;
    font-weight: 700;
}

.text-warning-title {
    color: #b45309;
    font-size: 14px;
    font-weight: 700;
}

.text-muted-strong {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

.link-inherit {
    color: inherit;
    text-decoration: none;
}

.link-primary-clean {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
}

.badge-emphasis-success {
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
    font-size: 15px;
    font-weight: 700;
}

.badge-soft-primary {
    background-color: #eff6ff !important;
    font-size: 12px;
    font-weight: 600;
}

.info-card,
.panel-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.info-card {
    background: #f8fafc;
    transition: all 0.2s;
}

.info-card-warning {
    background: #fffcf0;
}

.panel-card {
    box-shadow: none;
}

.panel-card-dashed {
    background: #fafafa;
    border-style: dashed;
    border-color: #cbd5e1;
}

.empty-state-panel {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    min-height: 80px;
}

.status-panel {
    border-radius: 12px;
}

.status-panel-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.status-panel-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.dropdown-panel {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    min-width: 260px;
    overflow: hidden;
}

.border-soft {
    border-color: #f1f5f9 !important;
}

.hint-row {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

.indicator-dot-warning {
    background-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    height: 10px;
    width: 10px;
}

.timeline-line {
    background: #e2e8f0;
    bottom: -8px;
    left: 6px;
    top: 18px;
    width: 2px;
}

.timeline-marker {
    height: 14px;
    width: 14px;
    z-index: 1;
}

.timeline-marker-inner {
    height: 6px;
    width: 6px;
}

.form-control-soft {
    border-color: #cbd5e1;
    border-radius: 8px;
}

.form-help-text,
.form-help-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.form-help-label {
    display: block;
    line-height: 1.4;
}

.token-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.stack-row-sm {
    margin-bottom: 4px;
}

.thumbnail-image {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    height: 60px;
    object-fit: cover;
    width: 60px;
}

.image-lightbox {
    align-items: center;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: opacity 0.3s;
    width: 100%;
    z-index: 10500;
}

.image-lightbox.is-visible {
    opacity: 1;
}

.lightbox-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 40px;
    position: absolute;
    right: 30px;
    top: 20px;
    z-index: 10501;
}

.lightbox-nav {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    z-index: 10501;
}

.lightbox-prev {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}

.lightbox-img {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    max-height: 60vh;
    max-width: 60vw;
    object-fit: contain;
    transform: scale(0.9);
    transition: transform 0.3s;
}

.image-lightbox.is-visible .lightbox-img {
    transform: scale(1);
}

/* Scheduling overrides */
.select2-container--default .select2-selection--multiple {
    position: relative;
    padding-right: 25px !important;
}
.select2-container--default .select2-selection--multiple::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -2px;
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    pointer-events: none;
}
.fs-15 { font-size: 15px !important; }
.fs-13 { font-size: 13px !important; }
.mw-100 { max-width: 100% !important; }
.scrollable-accordion-body {
    overflow-y: visible;
}
.scrollable-accordion-body.has-scrollbar {
    max-height: 250px;
    overflow-y: auto;
}

.select2-customer-email {
    color: #6c757d;
}

.select2-results__option--highlighted .select2-customer-email,
.select2-selection__choice .select2-customer-email,
.select2-selection__choice .text-muted {
    color: #ffffff !important;
}

.job-indicator-timeline-line {
    width: 2px;
    background: #e2e8f0;
    top: 18px;
    bottom: -20px;
    left: 8px;
    z-index: 0;
}

.job-indicator-item-title {
    font-size: 0.9em;
    line-height: 1.2;
}

.job-indicator-item-comment {
    font-size: 0.85em;
    line-height: 1.2;
}

.cursor-pointer {
    cursor: pointer !important;
}

.job-details-accordion-body {
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Quick Text Placeholders */
.placeholder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.placeholder-chip {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #1f7a8c;
    background-color: #f0f7fb;
    border: 1px solid #99c2d1;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.placeholder-chip:hover {
    background-color: #1f7a8c;
    color: #ffffff;
    border-color: #1f7a8c;
}

/* Premium Quick Text Modal Redesign */
#quickTextModal .modal-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#quickTextModal .form-control-lg {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

#quickTextModal .form-control-lg:focus {
    border-color: #1f7a8c;
    box-shadow: 0 0 0 4px rgba(31, 122, 140, 0.1);
}

#quickTextModal .form-control.is-invalid,
#quickTextModal .form-control.is-invalid:focus {
    border-color: #ff5370 !important;
    box-shadow: 0 0 0 4px rgba(255, 83, 112, 0.1);
}

/* Premium Placeholder Chips */
.placeholder-chip-premium {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.placeholder-chip-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
    background: #f8fafc;
}

.placeholder-chip-premium:active {
    transform: translateY(0);
}

.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
}

.bg-primary-subtle { background-color: #e0f2fe; color: #0284c7 !important; }
.bg-success-subtle { background-color: #dcfce7; color: #16a34a !important; }
.bg-info-subtle { background-color: #e0e7ff; color: #4f46e5 !important; }
.bg-warning-subtle { background-color: #fef9c3; color: #ca8a04 !important; }

@keyframes chipClick {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.placeholder-chip-premium.clicked {
    animation: chipClick 0.2s ease;
}

.dynamic-variables-sidebar {
    background-color: #f8fafc;
}

.chip-title {
    color: #1e293b;
    font-size: 14px;
}

.chip-desc {
    font-size: 12px;
}

/* Unique Indicator Grid Redesign */
.indicator-premium-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 0;
}

.indicator-grid-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator-grid-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.indicator-grid-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-right: 20px;
    flex-shrink: 0;
}

.indicator-grid-icon::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
}

.indicator-grid-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
}

.indicator-grid-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.indicator-grid-status {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.indicator-grid-status.is-active {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.indicator-grid-status.is-inactive {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
}

.indicator-grid-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.indicator-grid-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.indicator-grid-actions .module-icon-btn {
    width: 36px;
    height: 36px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.indicator-grid-actions .module-icon-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
}



.indicator-grid-actions .indicator-edit-btn:hover,
.indicator-grid-actions .indicator-edit-btn:focus {
    color: #4099ff;
    background: rgba(64, 153, 255, 0.12);
    border-color: rgba(64, 153, 255, 0.28);
}

.indicator-grid-actions .indicator-delete-btn:hover,
.indicator-grid-actions .indicator-delete-btn:focus {
    color: #ff5370;
    background: rgba(255, 83, 112, 0.12);
    border-color: rgba(255, 83, 112, 0.28);
}

.indicator-grid-footer .indicator-move-btn {
    color: #64748b;
}

.indicator-grid-card .module-toggle {
    margin: 0;
}



/* Prevent accidental capitalization of dynamic variables */
.chip-title, .btn-token, .placeholder-chip-premium { text-transform: none !important; }

.service-plan-custom-service-group .form-control{
        margin-bottom: 10px;
}

#expensesTable .module-action-list {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
}

/* Ensure consistent font across all form inputs */
.form-control,
textarea.form-control,
input.form-control,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-results__option,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: "Roboto", sans-serif !important;
    font-size: 13px !important;
}

/* Ensure Select2 placeholders match standard input placeholders */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
}

/* Style the FullCalendar +more link as a yellow label */
a.fc-more {
    display: block;
    background-color: #fef9c3; /* Subtle warning yellow */
    color: #ca8a04 !important; /* Dark warning text */
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    margin: 2px 2px 4px 2px;
    text-align: center;
}

a.fc-more:hover {
    background-color: #fef08a; /* Slightly darker subtle yellow on hover */
    color: #a16207 !important;
}

/* Fix FullCalendar +more popover clipping when there are many jobs */
.fc-more-popover {
    z-index: 1050 !important; /* Ensure it stays above other elements */
}
.fc-more-popover .fc-body {
    max-height: 180px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px; /* Space for scrollbar */
}
.fc-more-popover .fc-event-container {
    max-height: none !important;
    overflow: visible !important;
}

/* Compact header navbar sizing */
.header-navbar {
    min-height: 46px;
}

.pcoded .pcoded-navbar {
    top: 46px;
}

.pcoded .pcoded-main-container {
    margin-top: 46px;
}

.header-navbar .navbar-wrapper {
    min-height: 46px;
}

.header-navbar .navbar-wrapper .navbar-logo {
    min-height: 46px;
    height: 46px;
    padding: 0 12px;
}

.header-navbar .navbar-wrapper .navbar-logo a {
    margin: auto 0;
    line-height: 46px;
}

.header-navbar .navbar-wrapper .navbar-logo a img {
    max-height: 24px;
    width: auto;
}

.header-navbar .navbar-wrapper .navbar-logo .mobile-menu,
.header-navbar .navbar-wrapper .navbar-logo .mobile-options {
    height: 46px;
    width: 46px;
    line-height: 46px;
}

.header-navbar .navbar-wrapper .navbar-container {
    height: 46px;
    padding: 0 14px;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left,
.header-navbar .navbar-wrapper .navbar-container .nav-right {
    height: 46px;
    line-height: 46px;
}

/* Center DataTables empty messages */
td.dataTables_empty {
    text-align: center !important;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left > li,
.header-navbar .navbar-wrapper .navbar-container .nav-right > li {
    margin: 0 1px;
    line-height: 46px;
    padding: 0 10px;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left > li > a,
.header-navbar .navbar-wrapper .navbar-container .nav-right > li > a,
.header-navbar .navbar-wrapper .navbar-container .header-notification .dropdown-toggle {
    padding: 0 6px;
    border-radius: 10px;
    line-height: 46px;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification {
    line-height: 1;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .dropdown-toggle i,
.header-navbar .navbar-wrapper .navbar-container .nav-left > li > a i {
    font-size: 16px;
}

.header-navbar .navbar-wrapper .navbar-container .user-profile img {
    width: 28px;
    height: 28px;
}

.header-navbar .navbar-wrapper .navbar-container .user-profile span {
    font-size: 12px;
    line-height: 1.2;
}

.header-navbar .navbar-wrapper .navbar-container .user-profile .dropdown-toggle {
    padding-top: 0;
    padding-bottom: 0;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .badge {
    top: 3px;
    right: 1px;
    padding: 2px 5px;
    font-size: 10px;
    line-height: 1.2;
}

@media only screen and (max-width: 991px) {
    .pcoded .pcoded-navbar {
        top: 42px;
    }

    .pcoded .pcoded-main-container {
        margin-top: 42px;
    }

    .header-navbar,
    .header-navbar .navbar-wrapper,
    .header-navbar .navbar-wrapper .navbar-logo,
    .header-navbar .navbar-wrapper .navbar-container {
        min-height: 42px;
        height: 42px;
    }

    .header-navbar .navbar-wrapper .navbar-logo {
        padding: 0 10px;
    }

    .header-navbar .navbar-wrapper .navbar-logo a img {
        max-height: 22px;
    }

    .header-navbar .navbar-wrapper .navbar-logo .mobile-menu,
    .header-navbar .navbar-wrapper .navbar-logo .mobile-options {
        height: 42px;
        width: 42px;
        line-height: 42px;
    }

    .header-navbar .navbar-wrapper .navbar-container {
        padding: 0 10px;
    }

    .header-navbar .navbar-wrapper .navbar-container .nav-left,
    .header-navbar .navbar-wrapper .navbar-container .nav-right,
    .header-navbar .navbar-wrapper .navbar-container .nav-left > li,
    .header-navbar .navbar-wrapper .navbar-container .nav-right > li,
    .header-navbar .navbar-wrapper .navbar-container .nav-left > li > a,
    .header-navbar .navbar-wrapper .navbar-container .nav-right > li > a,
    .header-navbar .navbar-wrapper .navbar-container .header-notification .dropdown-toggle,
    .header-navbar .navbar-wrapper .navbar-logo a {
        line-height: 42px;
    }
}

.pcoded[theme-layout="vertical"] .pcoded-navbar {
    position: fixed;
    top: 46px !important;
    bottom: 0;
    height: auto;
    min-height: calc(100vh - 46px);
}

/* Keep the sidebar background and its scrollable navigation at full viewport height. */
.pcoded[theme-layout="vertical"] .pcoded-navbar .nav-list,
.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-inner-navbar {
    min-height: 100%;
}

.pcoded[theme-layout="vertical"] .pcoded-navbar .nav-list {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

@media only screen and (max-width: 991px) {
    .pcoded[theme-layout="vertical"] .pcoded-navbar {
        top: 42px !important;
        min-height: calc(100vh - 42px);
    }
}

/* Match the live desktop sidebar dimensions without first-paint layout scripting. */
@media only screen and (min-width: 993px) {
    .pcoded[theme-layout="vertical"] .pcoded-navbar,
    .header-navbar .navbar-wrapper .navbar-logo {
        width: 200px !important;
    }

    .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"] .pcoded-content {
        margin-left: 200px !important;
        margin-right: 0 !important;
    }

    .header-navbar .navbar-wrapper .navbar-container {
        margin-left: 200px !important;
        width: calc(100% - 200px) !important;
        box-sizing: border-box;
    }
}

.header-navbar .navbar-wrapper .navbar-container .nav-right .user-profile img{
    width: 30px;
    height: 30px;
}

.header-navbar .navbar-wrapper .navbar-container .nav-right .user-profile img.header-company-logo {
    object-fit: contain;
    background-color: #fff;
}

table.dataTable td.dataTables_empty {
    text-align: center !important;
}

/* ==========================================================================
   Payment Setup Notification Alert Card Generic Classes
   ========================================================================== */
.payment-setup-alert-card {
    background: #fffcf5;
    border: 1px solid #ffe8b5;
    border-left: 6px solid #ff9f43;
    border-radius: 12px;
    padding: 18px 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.payment-setup-alert-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #fff3df;
    color: #ff7714;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 24px !important;
}

.payment-setup-alert-icon i {
    font-size: 22px;
}

.payment-setup-alert-title {
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.payment-setup-alert-desc {
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 0;
}

.payment-setup-alert-desc strong {
    color: #334155;
}

.payment-setup-btn {
    background: #ff7714;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 16px;
    box-shadow: 0 4px 12px rgba(255, 119, 20, 0.25);
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.payment-setup-btn:hover {
    background: #e6680a;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(255, 119, 20, 0.35);
    text-decoration: none;
}

/* ==========================================================================
   Payment Setup Top Dashboard Notification Ribbon Generic Classes
   ========================================================================== */
.payment-setup-ribbon {
    background: #fffaf0;
    border: 1px solid #feebc8;
    border-left: 5px solid #dd6b20;
    border-radius: 10px;
    padding: 12px 48px 12px 20px;
    margin: 12px 20px 0 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: relative;
}

.payment-setup-ribbon-content {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 1;
    margin: 0 16px 0 0;
}

.payment-setup-ribbon-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #feebc8;
    color: #dd6b20;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 16px;
}

.payment-setup-ribbon-icon i {
    font-size: 18px;
}

.payment-setup-ribbon-text-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.payment-setup-ribbon-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #2d3748;
    margin-right: 4px;
}

.payment-setup-ribbon-text {
    font-size: 14px;
    color: #4a5568;
}

.payment-setup-ribbon-actions {
    display: flex;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
}

.payment-setup-ribbon-btn {
    background: #dd6b20;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    box-shadow: 0 2px 8px rgba(221, 107, 32, 0.25);
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-right: 12px;
}

.payment-setup-ribbon-btn:hover {
    background: #c05621;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(221, 107, 32, 0.35);
    text-decoration: none;
    transform: translateY(-1px);
}

.payment-setup-ribbon-close {
    background: transparent;
    border: none;
    color: #a0aec0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.payment-setup-ribbon + .payment-setup-ribbon {
    margin-top: 10px;
}

@media (max-width: 991.98px) {
    .payment-setup-ribbon {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 48px;
    }
    .payment-setup-ribbon-content {
        align-items: flex-start;
        margin-bottom: 12px;
    }
    .payment-setup-ribbon-actions {
        margin-left: 54px;
    }
    .payment-setup-ribbon-close {
        top: 12px;
        transform: none;
    }
}
@media (max-width: 575.98px) {
    .payment-setup-ribbon {
        margin: 10px 12px 0 12px;
        padding: 14px 40px 14px 14px;
    }
    .payment-setup-ribbon + .payment-setup-ribbon {
        margin-top: 8px;
    }
    .payment-setup-ribbon-actions {
        margin-left: 0;
        width: 100%;
    }
    .payment-setup-ribbon-btn {
        width: 100%;
        justify-content: center;
        margin-right: 0;
    }
    .payment-setup-ribbon-content {
        flex-direction: column;
        align-items: flex-start;
        margin-right: 0;
        margin-bottom: 12px;
    }
    .payment-setup-ribbon-icon {
        margin-bottom: 8px;
    }
    .payment-setup-ribbon-title {
        display: block;
        width: 100%;
        margin-bottom: 2px;
        font-size: 14px;
    }
    .payment-setup-ribbon-text {
        display: block;
        width: 100%;
        line-height: 1.4;
        font-size: 13px;
    }
}

.payment-setup-ribbon-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #4a5568;
}

.payment-setup-ribbon-close i {
    font-size: 18px;
}

/* Stripe Capabilities Sidebar Card & Badges */
.stripe-capability-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    margin-bottom: 10px;
}
.stripe-capability-row:last-child {
    margin-bottom: 0;
}
.stripe-badge-yes {
    background-color: #def7ec !important;
    color: #03543f !important;
    border: 1px solid #bcefdf;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 4px;
}
.stripe-badge-no {
    background-color: #fde8e8 !important;
    color: #9b1c1c !important;
    border: 1px solid #f8b4b4;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 4px;
}
.stripe-sidebar-btn {
    display: block !important;
    width: 100% !important;
    text-align: center;
    padding: 10px 15px;
    font-weight: 600;
    border-radius: 6px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.stripe-sidebar-btn:last-child {
    margin-bottom: 0 !important;
}

/* Fix for floating label when browser auto-fills */
.form-material .form-control:-webkit-autofill ~ .float-label,
.form-material .form-control:-webkit-autofill + .form-bar + .float-label {
    top: -12px !important;
    font-size: 11px !important;
    color: #4099ff !important;
}

.module-table-checkbox-col { width: 40px; text-align: left; vertical-align: middle; }
.module-table-checkbox { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* Estimation Document HTML Classes */
.estimation-desc-scroll::-webkit-scrollbar { width: 5px; }
.estimation-desc-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.estimation-desc-scroll::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.estimation-desc-scroll::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

.est-table-container { margin-bottom: 24px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.est-table { width: 100%; border-collapse: collapse; background-color: #ffffff; }
.est-table th { background-color: #e2e8f0; color: #000000; font-size: 15px; font-weight: bold; padding: 14px 16px; border-bottom: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; }
.est-table th.no-right-border { border-right: none; }
.est-table td { padding: 18px 16px; vertical-align: top; border-right: 1px solid #edf2f7; }
.est-table td.no-right-border { border-right: none; }
.est-table tr { border-bottom: 1px solid #edf2f7; }
.est-table .text-left { text-align: left; }
.est-table .text-center { text-align: center; }
.est-table .text-right { text-align: right; }

.est-service-title { font-weight: bold; font-size: 15px; color: #2d3748; margin-bottom: 6px; }
.est-service-desc { font-size: 13px; color: #718096; line-height: 1.5; max-height: 58px; overflow-y: auto; padding-right: 12px; }
.est-service-val { color: #4a5568; font-size: 14px; font-weight: 500; }

/* Generic Auth & Admin Login Classes */
body.admin-login-page {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #f8fafc;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card-container,
.admin-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 15px;
    width: 100%;
}

.auth-card,
.admin-login-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    max-width: 480px;
    width: 100%;
    padding: 36px 32px;
}

.auth-brand-header,
.admin-brand-header {
    text-align: center;
    margin-bottom: 26px;
}

.auth-brand-badge,
.admin-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 18px;
    border-radius: 12px;
    margin-bottom: 14px;
}

.auth-brand-badge img,
.admin-brand-badge img {
    max-height: 36px;
    width: auto;
    display: block;
}

.auth-portal-tag,
.admin-portal-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #4099ff;
    background: rgba(64, 153, 255, 0.1);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.auth-title,
.admin-login-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.auth-subtitle,
.admin-login-subtitle {
    font-size: 13.5px;
    color: #64748b;
    margin-bottom: 0;
}

.form-floating-custom {
    position: relative;
    margin-bottom: 18px;
}

.form-floating-custom label {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-group > i.field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    z-index: 3;
    pointer-events: none;
    transition: color 0.2s ease;
}

.input-icon-group .form-control {
    height: 46px;
    padding: 10px 16px 10px 42px;
    font-size: 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background-color: #f8fafc;
    color: #1e293b;
    transition: all 0.2s ease;
    width: 100%;
}

.input-icon-group .form-control:focus {
    background-color: #ffffff;
    border-color: #4099ff;
    box-shadow: 0 0 0 3px rgba(64, 153, 255, 0.12);
    outline: none;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.password-toggle-btn:hover {
    color: #4099ff;
}

.btn-auth-gradient,
.btn-admin-submit {
    height: 46px;
    background: linear-gradient(135deg, #4099ff 0%, #2ed8b6 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 16px -4px rgba(64, 153, 255, 0.4);
    transition: all 0.25s ease;
    cursor: pointer;
    margin-top: 10px;
}

.btn-auth-gradient:hover,
.btn-admin-submit:hover {
    box-shadow: 0 10px 20px -4px rgba(64, 153, 255, 0.5);
    transform: translateY(-1px);
    color: #ffffff;
}

.btn-auth-gradient:active,
.btn-admin-submit:active {
    transform: translateY(0);
}

@keyframes btnSpinnerRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: btnSpinnerRotate 0.75s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
    box-sizing: border-box;
}