:root,
body.mod-skin-light:not(.mod-skin-dark),
.mod-skin-light:not(.mod-skin-dark) {
    --brand-action: #122d50;
    --brand-action-text: #ffffff;
    --card-top-border: #122d50;
    --table-row-hover: #f6f7f8;
    --table-row-selected: #e8dfdd;
    --pagination-nav-bg: #6c757d;
    --pagination-active-bg: #122d50;
    --pagination-active-text: #ffffff;
}

body.mod-skin-dark:not(.mod-skin-light),
.mod-skin-dark:not(.mod-skin-light) {
    --brand-action: #f15e22;
    --brand-action-text: #ffffff;
    --card-top-border: #5b7dab;
    --table-row-hover: #2f3033;
    --table-row-selected: #4b2b20;
    --table-row-text: #f3f4f6;
    --pagination-nav-bg: #6c757d;
    --pagination-active-bg: #f15e22;
    --pagination-active-text: #ffffff;
}

.page-logo img {
    width: 170px !important;
    height: auto !important;
}

.breadcrumb>li.breadcrumb-item {
    max-width: 90%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

/* Page header — vertical alignment (menu, breadcrumb, actions) */
.page-header {
    align-items: center !important;
}

.page-header .page-header-left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.35rem;
    align-self: center;
    height: 100%;
}

.page-header .page-header-mobile-toggle,
.page-header .page-header-right {
    align-self: center;
}

.page-header .page-header-left .dropdown-icon-menu {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.page-header .page-header-left .header-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle;
}

.page-header .page-header-right .form-group,
.page-header .page-header-right .page-header-company-select {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    display: flex;
    align-items: center;
}

.page-header .page-header-right #AdminChooseCompany {
    height: 2.25rem;
    min-width: 11rem;
}

.page-header .page-header-right>div {
    display: flex;
    align-items: center;
}

/* Header breadcrumb (all pages) — matches dashboard: App > Page */
.page-header .dashboard-header-breadcrumb {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    align-self: center !important;
    justify-content: flex-start !important;
    column-gap: 0.35rem !important;
    gap: 0.35rem !important;
    font-size: 0.875rem;
    line-height: 1.25;
    white-space: nowrap;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    height: auto;
}

.page-header .dashboard-header-breadcrumb .dashboard-header-crumb-link,
.page-header .dashboard-header-breadcrumb .dashboard-header-crumb-active {
    font-size: inherit;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
}

.page-header .dashboard-header-breadcrumb .dashboard-header-crumb-sep {
    font-size: 0.8rem;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
}

.page-header .dashboard-header-breadcrumb a.dashboard-header-crumb-link:hover {
    text-decoration: underline;
}

/* Hide legacy content-area breadcrumb when header breadcrumb is enabled */
.page-content>ol.page-breadcrumb {
    display: none !important;
}

.page-header .dashboard-header-breadcrumb .dashboard-header-crumb-link,
.page-header .dashboard-header-breadcrumb .dashboard-header-crumb-sep,
.page-header .dashboard-header-breadcrumb .dashboard-header-crumb-active {
    margin: 0 !important;
    padding: 0 !important;
}

.page-header .dashboard-header-breadcrumb .dashboard-header-crumb-sep {
    font-weight: 600;
}

/* Dashboard header breadcrumb — light mode */
body.mod-skin-light:not(.mod-skin-dark) .page-header .dashboard-header-breadcrumb .dashboard-header-crumb-link,
body.dashboard-modern:not(.mod-skin-dark) .page-header .dashboard-header-breadcrumb .dashboard-header-crumb-link {
    color: #0f2f59 !important;
    font-weight: 700 !important;
}

body.mod-skin-light:not(.mod-skin-dark) .page-header .dashboard-header-breadcrumb .dashboard-header-crumb-sep,
body.dashboard-modern:not(.mod-skin-dark) .page-header .dashboard-header-breadcrumb .dashboard-header-crumb-sep {
    color: #8d9db0 !important;
}

body.mod-skin-light:not(.mod-skin-dark) .page-header .dashboard-header-breadcrumb .dashboard-header-crumb-active,
body.dashboard-modern:not(.mod-skin-dark) .page-header .dashboard-header-breadcrumb .dashboard-header-crumb-active {
    color: #6d7f95 !important;
    font-weight: 600 !important;
}

/* Dashboard header breadcrumb — dark mode */
body.mod-skin-dark:not(.mod-skin-light) .page-header .dashboard-header-breadcrumb .dashboard-header-crumb-link {
    color: #e8eef5 !important;
    font-weight: 700 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .page-header .dashboard-header-breadcrumb .dashboard-header-crumb-sep {
    color: #94a3b8 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .page-header .dashboard-header-breadcrumb .dashboard-header-crumb-active {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

/* Shared page heading alignment */
.subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.subheader .subheader-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    line-height: 1.2;
}

.subheader .subheader-title>span:first-child {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem !important;
    line-height: 1;
}

.subheader .subheader-title strong,
.subheader .subheader-title span {
    line-height: 1.2;
}

.subheader .subheader-title .pm-page-heading-label,
.subheader .subheader-title .project-page-heading__title {
    color: #122d50;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

.subheader .subheader-title .text-muted,
.subheader .subheader-title .project-page-heading__crumb,
.subheader .subheader-title .project-page-heading__separator {
    color: #4f4e50;
    font-weight: 400;
    white-space: nowrap;
}

.subheader .subheader-title .project-page-heading__separator {
    color: #adb5bd;
    font-weight: 700;
}

.subheader .subheader-title .project-page-heading__icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    flex: 0 0 45px;
    background-color: #122d50;
    color: #ffffff;
    box-shadow: 0 0.125rem 0.375rem rgba(18, 45, 80, 0.18);
}

.subheader .subheader-title .project-page-heading__icon i {
    color: inherit;
    font-size: 1.25rem;
}

body.mod-skin-dark:not(.mod-skin-light) .subheader .subheader-title .pm-page-heading-label,
body.mod-skin-dark:not(.mod-skin-light) .subheader .subheader-title .project-page-heading__title {
    color: #f4f4f4;
}

body.mod-skin-dark:not(.mod-skin-light) .subheader .subheader-title .text-muted,
body.mod-skin-dark:not(.mod-skin-light) .subheader .subheader-title .project-page-heading__crumb {
    color: #cbd5e1;
}

body.mod-skin-dark:not(.mod-skin-light) .subheader .subheader-title .project-page-heading__separator {
    color: #94a3b8;
}

body.mod-skin-dark:not(.mod-skin-light) .subheader .subheader-title .project-page-heading__icon {
    background-color: #122d50;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.35);
}

/* Dashboard alert widgets: Past Due, Outstanding Balances, Needs Attention */
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .past-due-invoices-card,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card {
    background: #071b33 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 6px 14px rgba(7, 27, 51, 0.32) !important;
    border-radius: 8px !important;
}

body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .card-header,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .card-header,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .card-header,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .card-header,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .card-header,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .card-header span,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .card-header i,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .card-header span,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .card-header i,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .card-header span,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .card-header i,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .card-header span,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .card-header span,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .card-header span {
    color: #f2f7ff !important;
}

body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .card-body,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .table th,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .table td,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .table a,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .card-body,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .card-body p,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .card-body h3,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .table th,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .table td,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .table a,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .card-body,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .needs-attention-widget td,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .needs-attention-widget .font-weight-500,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .needs-attention-widget .small,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .needs-attention-widget .text-muted,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .needs-attention-widget i,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .card-body,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .card-body,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .card-body,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .table th,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .table td,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .table a,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .needs-attention-widget td {
    color: #e7effb !important;
}

body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .table .text-muted,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .table small {
    color: #94a3b8 !important;
}

body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .table thead th,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .table tbody td,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card .table tr,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .table thead th,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card .table tbody td,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .needs-attention-widget tr {
    border-color: rgba(255, 255, 255, 0.13) !important;
}

body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget #pastDueChartContainer {
    background: #ffffff !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 6px !important;
}

body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .btn.btn-sm,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .btn.btn-sm.btn-outline-primary,
body.dashboard-modern.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card .btn.btn-sm {
    background: #ffffff !important;
    border-color: #d6deeb !important;
    color: #11335d !important;
    font-weight: 700 !important;
}

/* Do not let generic dashboard card skin override alert widgets */
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #PastDueInvoicesWidget .dashboard-alert-card:hover,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #OutstandingBalancesWidget .dashboard-alert-card:hover,
body.mod-skin-light:not(.mod-skin-dark) #admin-dashboard #NeedsAttentionWidget .dashboard-alert-card:hover {
    transform: none !important;
}

/* Needs Attention — full-width ADD ATTENTION ITEM CTA */
#admin-dashboard #NeedsAttentionWidget .needs-attention-add-wrap {
    margin-top: 0.75rem;
    padding-top: 0.25rem;
}

#admin-dashboard #NeedsAttentionWidget .needs-attention-add-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 6px;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 1px 3px rgba(12, 33, 61, 0.12);
    color: #11335d !important;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#admin-dashboard #NeedsAttentionWidget .needs-attention-add-btn:hover,
#admin-dashboard #NeedsAttentionWidget .needs-attention-add-btn:focus {
    background: #f4f7fc !important;
    background-color: #f4f7fc !important;
    color: #0d2848 !important;
    box-shadow: 0 2px 6px rgba(12, 33, 61, 0.16);
    text-decoration: none !important;
}

body.mod-skin-dark:not(.mod-skin-light) #admin-dashboard #NeedsAttentionWidget .needs-attention-add-btn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #11335d !important;
}

body.mod-skin-dark:not(.mod-skin-light) #admin-dashboard #NeedsAttentionWidget .needs-attention-add-btn:hover,
body.mod-skin-dark:not(.mod-skin-light) #admin-dashboard #NeedsAttentionWidget .needs-attention-add-btn:focus {
    background: #e8eef7 !important;
    color: #0d2848 !important;
}

.header-btn[data-class=mobile-nav-on] {
    border-color: #f15e22 !important;
    background-color: #f15e22 !important;
    background-image: none !important;
    color: #fff;
    width: 3.875rem;
}

.mod-skin-light:not(.mod-skin-dark) .page-content-wrapper {
    background-color: #f4f4f4 !important;
}

/* DESIGN.md dark mode — global surfaces */
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper {
    background-color: #15171d !important;
}

.mod-skin-dark:not(.mod-skin-light) .card {
    background-color: #1f2129 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #dfe7f2;
}

body.mod-skin-dark:not(.mod-skin-light) .card[class*="wide-border-top"] {
    border-top-color: var(--card-top-border) !important;
}

.mod-skin-dark:not(.mod-skin-light) .card-header,
.mod-skin-dark:not(.mod-skin-light) .card-footer {
    background-color: #252830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #dfe7f2;
}

.mod-skin-dark:not(.mod-skin-light) .bg-light {
    background-color: #252830 !important;
    color: #dfe7f2;
}

.mod-skin-dark:not(.mod-skin-light) .table {
    color: #dfe7f2;
}

.mod-skin-dark:not(.mod-skin-light) .table td,
.mod-skin-dark:not(.mod-skin-light) .table th {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

.mod-skin-dark:not(.mod-skin-light) .thead-light th {
    background-color: #252830 !important;
    color: #a0aec0 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

.mod-skin-dark:not(.mod-skin-light) .table-hover tbody tr:hover {
    background-color: var(--table-row-hover) !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-header {
    background-color: #1f2129 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.mod-skin-dark:not(.mod-skin-light) nav a {
    color: #f4f4f4 !important;
}

.mod-skin-dark:not(.mod-skin-light) .btn {
    color: var(--theme-rgb-primary);
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.btn-primary.disabled,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--brand-action) !important;
    border-color: var(--brand-action) !important;
    color: var(--brand-action-text) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--brand-action) !important;
    border-color: var(--brand-action) !important;
    color: var(--brand-action-text) !important;
}

.btn-outline-primary {
    border-color: var(--brand-action) !important;
    color: var(--brand-action) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--brand-action) !important;
    border-color: var(--brand-action) !important;
    color: var(--brand-action-text) !important;
}

.mod-skin-dark:not(.mod-skin-light) .btn-outline-primary {
    border-color: var(--brand-action) !important;
    color: var(--brand-action) !important;
}

.mod-skin-dark:not(.mod-skin-light) .proposal-card .text-alt-primary {
    border-color: #f4f4f4 !important;
}

.mod-skin-light:not(.mod-skin-dark) .proposal-card .text-alt-primary {
    border-color: #122d50 !important;
}

.mod-skin-dark:not(.mod-skin-light) .notification-icon i {
    color: #f4f4f4 !important;
}

.mod-skin-dark:not(.mod-skin-light) .dropdown-item-text {
    color: #f4f4f4 !important;
}

.mod-skin-dark:not(.mod-skin-light) .custom-control-label::before {
    background-color: rgba(136, 106, 181, 0.1);
    background-color: rgba(var(--theme-rgb-primary), 0.2);
    border-color: #8b8b8b !important;
}

.mod-skin-dark:not(.mod-skin-light) .text-primary {
    color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):not(.navbar-brand):not(.card-title):not([class*=fc-]):not([class*=text-]):not(.btn-search-close),
.mod-skin-dark:not(.mod-skin-light) .modal-body a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):not(.navbar-brand):not(.card-title) {
    color: #ed5d21 !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .calendar-actions-card .calendar-action-btn,
body.mod-skin-dark:not(.mod-skin-light) #defaultModal .calendar-actions-card .calendar-action-btn i {
    color: #dfe7f2 !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .calendar-actions-card .calendar-action-btn:hover,
body.mod-skin-dark:not(.mod-skin-light) #defaultModal .calendar-actions-card .calendar-action-btn:hover i {
    color: #ffffff !important;
}

/* Bootstrap Validation Summary Override */
.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1rem;
}

.alert.validation-summary-errors {
    margin-bottom: 1rem;
}

.col-0 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.166665%;
    flex: 0 0 4.166665%;
    max-width: 4.166665%;
    width: 4.166665%;
}

.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
    width: 8.33333%;
}

.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666%;
    flex: 0 0 16.66666%;
    max-width: 16.66666%;
    width: 16.66666%;
}

.dataTables_empty {
    font-size: 1.5rem !important;
}

/* Reference classes, no implementation */
.base,
.needs-validation,
.flex-start,
.text-faded,
.app-container-demo,
.lang-js,
.lang-csharp,
.has-tooltip,
.has-popover {}

/* Keeps analyzers happy */
.js-waves-off,
.js-waves-on,
.js-get-date,
.js-collapse,
.js-modal-settings,
.js-filter-message,
.js-buttons,
.js-icon-class,
.js-icon-copy,
.js-bg-color,
.js-bg-gradient,
.js-bg-gradient-demo,
.js-bg-target {}

.header-icon:not(.btn) .profile-image {
    width: 2rem;
    height: 2rem;
}

#Notifications>a,
#MiniCart>a,
#chatIcon>a,
.page-header .profile-image.rounded-circle {
    cursor: pointer;
}

/* Header messaging count — same compact pill as notification bell */
#chatIcon>a.header-icon {
    position: relative;
}

#chatIcon #msgBadge.badge.badge-icon {
    position: absolute;
    left: 1.5625rem;
    top: 1.09375rem;
    display: none;
    font-size: 0.625rem;
    min-width: 1rem;
    max-width: 1.6875rem;
    padding: 0 3px;
    line-height: normal;
    font-weight: 500;
    border-radius: 1.25rem;
}


.info-card .profile-image {
    width: 3.125rem;
    height: 3.125rem;
    display: inline-block;
    z-index: 2;
    position: relative;
}

/* Small word wrap correction */
section>ol>li {
    word-break: break-all;
}

code {
    border: 1px solid silver;
    padding: 0.03rem 0.2rem !important;
}

pre.prettyprint {
    border-radius: 0.2rem;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}

.documentation h2 {
    color: var(--primary);
}

.documentation th:first-child,
.documentation th:nth-child(3) {
    width: 16%;
}

.documentation blockquote {
    margin-left: 1rem;
    padding: 1rem 1rem 0.01rem 1rem;
    font-weight: 400;
    border-radius: 0 4px 4px 0;
    background: #edf2f9;
    border-left: 3px solid var(--primary);
}

.documentation blockquote.info {
    background: #edf2f9;
    border-left: 3px solid var(--info);
}

.documentation blockquote.warning {
    background: #fff4db;
    border-left: 3px solid var(--warning);
}

.documentation blockquote.danger {
    background: #fadeeb;
    border-left: 3px solid var(--danger);
}

/* Enter custom CSS rules for your application here */

dd {
    min-height: 19px;
}

button i {}

.height-200 {
    min-height: 200px;
}

.btn-action-icon {
    padding: .5rem 10px .5rem 10px !important;
    width: 35px !important;
}

.btn-action-icon i {
    font-size: 1.2em;
    padding-right: 5px;
}

/* Sidebar active nav — orange highlight on dark navy sidebar */
.page-sidebar .primary-nav .nav-menu li.active>a {
    position: relative;
}

/* Active expanded parent (e.g. "Projects" when open) */
.page-sidebar .primary-nav .nav-menu>li.active.open>a {
    background-color: rgba(241, 94, 34, 0.15) !important;
    box-shadow: inset 4px 0 0 #f15e22 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.page-sidebar .primary-nav .nav-menu>li.active.open>a:hover {
    background-color: rgba(241, 94, 34, 0.22) !important;
    color: #ffffff !important;
}

.page-sidebar .primary-nav .nav-menu>li.active.open>a>[class*=fa-],
.page-sidebar .primary-nav .nav-menu>li.active.open>a>.ni {
    color: #f15e22 !important;
}

.page-sidebar .primary-nav .nav-menu>li.active.open>a>.nav-link-text {
    color: #ffffff !important;
}

/* Active top-level leaf item (no children, e.g. "Proposals") */
.page-sidebar .primary-nav .nav-menu>li.active:not(.open)>a {
    background-color: rgba(241, 94, 34, 0.15) !important;
    box-shadow: inset 4px 0 0 #f15e22 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.page-sidebar .primary-nav .nav-menu>li.active:not(.open)>a:hover {
    background-color: rgba(241, 94, 34, 0.22) !important;
    color: #ffffff !important;
}

.page-sidebar .primary-nav .nav-menu>li.active:not(.open)>a>[class*=fa-],
.page-sidebar .primary-nav .nav-menu>li.active:not(.open)>a>.ni {
    color: #f15e22 !important;
}

.page-sidebar .primary-nav .nav-menu>li.active:not(.open)>a>.nav-link-text {
    color: #ffffff !important;
}

/* Orange dot on the right for active top-level leaf items */
.page-sidebar .primary-nav .nav-menu>li.active:not(.open)>a::after {
    content: "";
    position: absolute;
    right: 1.125rem;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f15e22;
}

.page-sidebar .primary-nav .nav-menu>li.active:not(.open)>a::before {
    content: none !important;
    display: none !important;
}

/* Active sub-menu item (e.g. "Manage Projects") */
.page-sidebar .primary-nav .nav-menu li>ul li.active>a,
.page-sidebar .primary-nav .nav-menu li>ul li>ul li.active>a {
    background-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 4px 0 0 #f15e22 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.page-sidebar .primary-nav .nav-menu li>ul li.active>a:hover,
.page-sidebar .primary-nav .nav-menu li>ul li>ul li.active>a:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.page-sidebar .primary-nav .nav-menu li>ul li.active>a>.nav-link-text,
.page-sidebar .primary-nav .nav-menu li>ul li>ul li.active>a>.nav-link-text {
    color: #ffffff !important;
    font-weight: 500 !important;
}

.input-invalid {
    border: 1px solid #dc3545;
}

.badge-sm {
    font-size: 75%;
}

.badge-md {
    font-size: 100%;
    padding: 0.25em 0.5em;
}

/* Data Table custom CSS rules */
.dt-action-btn {
    margin-right: 10px;
}

/* Cases Data Table custom CSS rules */
.case-task-completion {
    margin-top: 5px;
    background-color: #f1f9fd;
    width: fit-content;
    padding: .2em .5em;
    border-radius: 4px;
    border-left: 3px solid #4ad4c5;
}

/* Document Selection Styles */
.list-group-header {
    background-color: #e7e7e7;
    border-bottom: 2px solid #8d8d8d;
    box-shadow: 0px 0px 13px 0px rgb(62 44 90 / 8%);
    border-top: 2px solid #8d8d8d !important;
}


/* Splash Icon Menu */

.o_home_menu .o_app .o_app_icon {
    width: 70px;
    height: 70px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

a.o_menuitem:hover {
    box-shadow: 8px 8px 22px rgba(120, 240, 120, 0.2) !important;
}

a.o_menuitem {
    background-color: #4A4F59;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .7);
    margin-right: .75rem;
    margin-left: .75rem;
}

a.o_menuitem>i.fal {
    padding-top: .5rem;
}

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

    50% {
        transform: scale(1.05);
    }

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

.pulse-on-hover:hover {
    animation: pulse 0.3s 1;
}

table.dataTable td.dt-control:before {
    height: 1em;
    width: 1em;
    margin-top: -9px;
    display: inline-block;
    color: white;
    border: .15em solid white;
    border-radius: 1em;
    box-shadow: 0 0 .2em #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: "Courier New", Courier, monospace;
    line-height: 1em;
    content: "+";
    background-color: #f15e22;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.child {
    white-space: normal;
    word-break: break-word;
}

.scrollable {
    height: 950px;
    /* Set a fixed height for scrolling */
    overflow-y: auto;
    /* Enable vertical scrolling */
}

.success-span {
    color: #ffffff;
    font-weight: 600;
    background-color: #1dc9b7;
    padding: 3px 10px;
    margin-left: 10px;
    border-radius: 3px;
}

.hide {
    display: none;
}

.lh-med {
    line-height: 1.6em;
}

address {
    line-height: 1.6em;
}

.timeline {
    border-left: 1px solid hsl(0, 0%, 90%);
    position: relative;
    list-style: none;
}

.timeline .timeline-item {
    position: relative;
}

.timeline .timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .timeline-item:after {
    background-color: hsl(0, 0%, 90%);
    left: -45px;
    border-radius: 50%;
    height: 11px;
    width: 11px;
    content: "";
}

.gutters-sm {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters-sm>.col,
.gutters-sm>[class*=col-] {
    padding-right: 8px;
    padding-left: 8px;
}

.highlighted {
    border: 2px solid #d3d3d3;
}

.app-nav-link {
    padding: .75rem 1.125rem;
}

.selected {
    /* -webkit-box-shadow: inset 0 0 0px 1px #886ab5 !important;
    box-shadow: inset 0 0 0px 1px #886ab5 !important;
    background: #534b69 !important;*/
    /*font-weight: 500;
    color: inherit;*/
}

#sticky-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    /* Ensures it's above other content */
    background-color: #26272b;
    /* Light background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Optional shadow for emphasis */
    transition: all 0.3s ease-in-out;
    /* Smooth transition */
    display: none;
    /* Initially hidden */
}

/* Desktop context menu */
.context-menu {
    position: absolute;
    display: none;
    z-index: 1000;
    padding: 10px;
    max-width: 200px;
}

.context-menu .menu-header {
    font-weight: bold;
    margin-bottom: 10px;
}

.context-menu .menu-item {
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.context-menu .menu-item:hover {
    background-color: #f0f0f0;
}

/* Mobile drawer style */
@media (max-width: 768px) {
    .context-menu {
        position: fixed;
        bottom: -100%;
        /* Hidden below the viewport */
        left: 0;
        width: 100%;
        height: 300px;
        /* Adjust height as needed */
        border-radius: 12px 12px 0 0;
        box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.2);
        padding: 20px;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
    }

    .context-menu.open {
        transform: translateY(0);
        /* Slide up into view */
    }

    .context-menu .menu-item {
        padding: 15px;
        font-size: 16px;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    .context-menu .menu-item:last-child {
        border-bottom: none;
    }
}

.highlighted {
    background-color: #fff3f4 !important;
}

.highlighted td {
    border-bottom: 2px solid #000;
}

.table-action-bar {}

@media (max-width: 768px) {
    .table-action-bar {}
}

.bg-brand-gradient {
    background-image: none !important;
    background-color: #122d50 !important;
}

/* Light mode: navy sidebar (design reference / DESIGN.md sidebar-primary) */
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-logo,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-sidebar,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-footer {
    background: #071b34 !important;
    background-image: none !important;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-logo {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-logo-text {
    color: #ffffff !important;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .info-card {
    color: #ffffff;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .info-card .text-white,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .info-card .info-card-text>span {
    color: #ffffff !important;
    text-shadow: none;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-menu li a,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-menu li a:focus,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark).nav-function-top .page-sidebar .primary-nav .nav-menu>li a {
    color: #cbd5e1 !important;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-menu li a>[class*=fa-],
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-menu li a>.ni {
    color: #cbd5e1 !important;
}

/* Expand/collapse chevrons — solid white on dark navy sidebar */
.page-sidebar .primary-nav .nav-menu b.collapse-sign,
.page-sidebar .primary-nav .nav-menu b.collapse-sign>[class*=fa-],
.page-sidebar .primary-nav .nav-menu b.collapse-sign>em,
.page-sidebar .primary-nav .nav-menu b.collapse-sign>.ni,
.page-sidebar .primary-nav .nav-menu b.collapse-sign>em::before,
.page-sidebar .primary-nav .nav-menu li>ul li a b.collapse-sign,
.page-sidebar .primary-nav .nav-menu li>ul li a b.collapse-sign>em,
.page-sidebar .primary-nav .nav-menu li>ul li a b.collapse-sign>em::before {
    color: #ffffff !important;
    opacity: 1 !important;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-sidebar .primary-nav .nav-menu li>a b.collapse-sign,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-sidebar .primary-nav .nav-menu li>a b.collapse-sign>em,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-sidebar .primary-nav .nav-menu li>a b.collapse-sign>em::before,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li>a b.collapse-sign,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li>a b.collapse-sign>em,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li>a b.collapse-sign>em::before {
    color: #ffffff !important;
    opacity: 1 !important;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-menu li>ul li a:hover {
    color: #ffffff !important;
}

/* Override skin-master dark text on active items when sidebar is dark navy */
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-sidebar .primary-nav .nav-menu li.active>a,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-sidebar .primary-nav .nav-menu li.active>a>.nav-link-text,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-sidebar .primary-nav .nav-menu li>ul li.active>a,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .page-sidebar .primary-nav .nav-menu li>ul li.active>a>.nav-link-text {
    color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li.active>a,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li.active>a>.nav-link-text,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li>ul li.active>a,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li>ul li.active>a>.nav-link-text {
    color: #ffffff !important;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-menu .nav-title {
    color: #64748b !important;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-menu li>ul {
    background-color: #0b2442;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-footer a,
.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-footer .ni {
    color: rgba(255, 255, 255, 0.7);
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-filter input[type=text] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.mod-skin-light:not(.mod-skin-dark):not(.mod-nav-dark) .nav-filter input[type=text]:focus {
    border-color: rgba(241, 94, 34, 0.6);
    color: #ffffff;
}

.mod-skin-light:not(.mod-skin-dark).mod-nav-link:not(.nav-function-top):not(.nav-function-minify):not(.mod-hide-nav-icons) ul.nav-menu:not(.nav-menu-compact)>li>ul:before {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.mod-skin-light:not(.mod-skin-dark) .page-sidebar .slimScrollBar {
    background: rgba(255, 255, 255, 0.35) !important;
}

/* Sidebar overrides */
.page-logo {
    width: 15.875rem !important;
    margin-top: 0.75rem;
    margin-bottom: .75rem;
    flex-shrink: 0;
}

.page-sidebar {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
}

/* ========================================
   SIDEBAR NAVIGATION SCROLLBAR SUPPORT
   ----------------------------------------
   Ensures the navigation panel scrolls independently
   of the page content and renders a visible, themed
   scrollbar in both light and dark skins.
   ======================================== */

/* Desktop: pin the sidebar to the viewport so the nav can
   scroll on its own instead of stretching with page content. */
@media (min-width: 992px) {
    .page-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        max-height: 100vh;
        align-self: flex-start;
        /* Allow dropdown submenus (e.g. bottom items like Security)
           to render fully outside the sidebar's immediate bounds
           while the inner primary nav still handles its own scrolling. */
        overflow: visible;
    }
}

/* Make the primary nav the flexible (scrolling) region between
   the logo at the top and the nav-footer at the bottom. */
.page-sidebar .primary-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(18, 45, 80, 0.35) rgba(0, 0, 0, 0.04);
}

.page-sidebar .nav-footer {
    flex-shrink: 0;
}

/* SlimScroll wrapper and inner container fixes to prevent menu clipping */
.page-sidebar .slimScrollDiv {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

.page-sidebar .slimScrollDiv .primary-nav {
    height: 100% !important;
}

/* WebKit (Chrome/Edge/Safari) custom scrollbar */
.page-sidebar .primary-nav::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.page-sidebar .primary-nav::-webkit-scrollbar-track,
.page-sidebar .primary-nav::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.page-sidebar .primary-nav::-webkit-scrollbar-thumb,
.page-sidebar .primary-nav::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(18, 45, 80, 0.35);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.page-sidebar .primary-nav:hover::-webkit-scrollbar-thumb,
.page-sidebar .primary-nav:hover::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(241, 94, 34, 0.65);
}

.page-sidebar .primary-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(241, 94, 34, 0.85);
}

.page-sidebar .primary-nav::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* Light mode navy sidebar: scrollbar matches dark nav treatment */
.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav {
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.06);
}

.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav::-webkit-scrollbar-track,
.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav::-webkit-scrollbar-track-piece {
    background-color: rgba(255, 255, 255, 0.06);
}

.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav::-webkit-scrollbar-thumb,
.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Dark skin scrollbar tweaks */
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav {
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.06);
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-track,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-track-piece {
    background-color: rgba(255, 255, 255, 0.06);
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-thumb,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(255, 255, 255, 0.3);
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav:hover::-webkit-scrollbar-thumb,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(241, 94, 34, 0.85);
}

/* When the sidebar is in the minified (collapsed) state we don't
   need the scrollbar to take up width away from the icons. */
.nav-function-minify .page-sidebar .primary-nav::-webkit-scrollbar {
    width: 4px;
}

.nav-function-minify .page-sidebar .primary-nav {
    scrollbar-width: thin;
}

/* Drawer Overrides */
.bg-trans-gradient {
    background: linear-gradient(251deg, #4f4e50, #122d50) !important;
}

.address-map iframe {
    border: none !important;
}

.badge-primary-faded {
    background: #122d50;
    border: 1px solid;
    border-radius: 18px;
    padding: .5em 10px;
    color: #f4f4f4;
}

.table-bordered {
    border: 1px solid #e9e9e9;
    border-radius: 5px;
}

.table-bordered thead tr th {
    border-color: #e9e9e9;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #e9e9e9;
}

.table-bordered tbody tr th {
    border-color: #e9e9e9;
}

.custom-table thead {
    background-color: #f15e22;
    color: #ffffff;
}

.wide-border-top {
    border-top: 4px solid var(--card-top-border) !important;
}

.primary-wide-border-top {
    border-top: 5px solid var(--card-top-border) !important;
}

.green-wide-border-top {
    border-top: 5px solid #28a745;
}

.orange-wide-border-top {
    border-top: 5px solid #f15e22;
}

.text-orange {
    color: #f15e22;
}

.bg-orange {
    background-color: #f15e22;
}

.btn-orange {
    background-color: var(--brand-action) !important;
    border-color: var(--brand-action) !important;
    color: var(--brand-action-text) !important;
}

.email-template-callout {
    background: #f4f4f4;
    border: 1px solid rgba(18, 45, 80, 0.16);
    border-left: 4px solid #122d50;
    color: #4f4e50;
}

body.mod-skin-dark:not(.mod-skin-light) .email-template-callout {
    background: rgba(18, 45, 80, 0.22);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5ebf4;
}

.purple-wide-border-top {
    border-top: 5px solid #6f42c1;
}

.text-purple {
    color: #6f42c1;
}

.btn-purple {
    background-color: #6f42c1;
    color: #f4f4f4;
}

.active-qty-container {
    background-color: #122d50;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.alt-qty-container {
    background-color: #f4f4f4;
    color: #4f4e50;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.swal2-container {
    z-index: 2060 !important;
}

@media (max-width: 768px) {
    #tabDropdown {
        font-size: 1.1rem;
        font-weight: 500;
        background-color: #ffffff;
        border: 2px solid #007bff;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        color: #2a2a2a;
    }

    label[for="tabDropdown"] {
        display: block;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .bg-light {
        background-color: #f8f9fa !important;
    }
}

/* ========================================
   BADGE STYLES
   ======================================== */

.type-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    margin-right: 1rem;
    margin-bottom: 0;
    vertical-align: middle;
    margin-left: 1rem;
}

.status-badge {
    margin-left: 1rem;
    margin-right: 0;
}

/* Type Badge Variants */
.type-badge-default {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.type-badge-residential {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.type-badge-commercial {
    background-color: rgba(0, 123, 255, 0.15);
    color: #007bff;
    border: 1px solid rgba(0, 123, 255, 0.3);
}

/* Status Badge Variants */
.status-active {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-inactive {
    background-color: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.status-disabled {
    background-color: rgba(52, 58, 64, 0.15);
    color: #343a40;
    border: 1px solid rgba(52, 58, 64, 0.3);
}

.profile-dropdown.dropdown-menu {
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0.5rem;
    min-width: 19rem;
    max-width: calc(100vw - 1rem);
}

.profile-dropdown-menu {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    color: #122d50;
}

.profile-dropdown-header {
    padding: 1rem 1rem 0.9rem;
    background: linear-gradient(251deg, #4f4e50 0%, #122d50 100%);
    color: #ffffff;
}

.profile-dropdown-header__top {
    min-width: 0;
}

.profile-dropdown-avatar {
    flex: 0 0 auto;
}

.profile-dropdown-avatar__image {
    width: 3.25rem !important;
    height: 3.25rem !important;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.profile-dropdown-name {
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.profile-dropdown-user {
    min-width: 0;
}

.profile-dropdown-role {
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
}

.profile-dropdown-email {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.65rem;
    margin-top: 0.85rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.profile-dropdown-email:hover,
.profile-dropdown-email:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    text-decoration: none;
}

.profile-dropdown-email__icon,
.profile-dropdown-email__copy {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
}

.profile-dropdown-email__icon {
    align-self: center;
}

.profile-dropdown-email__text {
    grid-column: 2;
    min-width: 0;
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.profile-dropdown-body,
.profile-dropdown-footer {
    background: #ffffff;
}

.profile-dropdown-row,
.profile-dropdown-action,
.profile-dropdown-logout {
    border-bottom: 1px solid #e9ecef;
}

.profile-dropdown-row--last-login {
    border-bottom: 1px solid #e9ecef;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row--last-login {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.profile-dropdown-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    color: #122d50;
}

.profile-dropdown-row__label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #4f4e50;
    font-weight: 500;
    min-width: 0;
}

.profile-dropdown-row__label i {
    width: 1rem;
    text-align: center;
    color: #122d50;
    opacity: 0.85;
    flex: 0 0 auto;
}

.profile-dropdown-row__value {
    flex: 0 1 auto;
    text-align: right;
    color: #122d50;
    font-weight: 600;
    word-break: break-word;
}

.profile-dropdown-divider {
    height: 1px;
    background: #e9ecef;
}

.profile-dropdown-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    color: #122d50;
    text-decoration: none;
}

.profile-dropdown-action:hover {
    background: #f8f9fa;
    color: #122d50;
    text-decoration: none;
}

.profile-dropdown-action__label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    font-weight: 600;
}

.profile-dropdown-action__label i {
    width: 1rem;
    text-align: center;
    color: #4f4e50;
    flex: 0 0 auto;
}

.profile-dropdown-action__meta {
    color: #6c757d;
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.profile-dropdown-action__meta .badge {
    font-weight: 500;
}

.profile-dropdown-logout {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    color: #dc3545;
    text-decoration: none;
    border-bottom: 0;
}

.profile-dropdown-logout:hover {
    background: rgba(220, 53, 69, 0.06);
    color: #dc3545;
    text-decoration: none;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-menu,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-body,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-footer {
    background: #303136;
    color: #f4f4f4;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-role,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-logout {
    border-color: rgba(255, 255, 255, 0.08);
    color: #f4f4f4;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email:hover,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email:focus,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email__text {
    color: #f4f4f4 !important;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email:hover,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email:focus {
    background: rgba(255, 255, 255, 0.12);
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email__icon,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email__copy {
    color: rgba(244, 244, 244, 0.88);
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row__label,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row__value,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action__label,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action__meta {
    color: #f4f4f4;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row__label i,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action__label i {
    color: #f4f4f4;
    opacity: 0.9;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action:hover {
    background: rgba(255, 255, 255, 0.04);
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-logout {
    color: #ff6b6b;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-logout:hover {
    background: rgba(220, 53, 69, 0.12);
    color: #ff6b6b;
}

@media (max-width: 575.98px) {
    .profile-dropdown.dropdown-menu {
        min-width: 17rem;
        max-width: calc(100vw - 1rem);
    }

    .profile-dropdown-row,
    .profile-dropdown-action {
        gap: 0.75rem;
    }

    .profile-dropdown-row {
        flex-direction: column;
    }

    .profile-dropdown-row__value {
        text-align: left;
    }

    .profile-dropdown-action {
        align-items: flex-start;
    }
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1rem;
}

.alert.validation-summary-errors {
    margin-bottom: 1rem;
}

.col-0 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.166665%;
    flex: 0 0 4.166665%;
    max-width: 4.166665%;
    width: 4.166665%;
}

.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
    width: 8.33333%;
}

.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666%;
    flex: 0 0 16.66666%;
    max-width: 16.66666%;
    width: 16.66666%;
}

.dataTables_empty {
    font-size: 1.5rem !important;
}

/* Reference classes, no implementation */
.base,
.needs-validation,
.flex-start,
.text-faded,
.app-container-demo,
.lang-js,
.lang-csharp,
.has-tooltip,
.has-popover {}

/* Keeps analyzers happy */
.js-waves-off,
.js-waves-on,
.js-get-date,
.js-collapse,
.js-modal-settings,
.js-filter-message,
.js-buttons,
.js-icon-class,
.js-icon-copy,
.js-bg-color,
.js-bg-gradient,
.js-bg-gradient-demo,
.js-bg-target {}

.header-icon:not(.btn) .profile-image {
    width: 2rem;
    height: 2rem;
}

#Notifications>a,
#MiniCart>a,
#chatIcon>a,
.page-header .profile-image.rounded-circle {
    cursor: pointer;
}


.info-card .profile-image {
    width: 3.125rem;
    height: 3.125rem;
    display: inline-block;
    z-index: 2;
    position: relative;
}

/* Small word wrap correction */
section>ol>li {
    word-break: break-all;
}

code {
    border: 1px solid silver;
    padding: 0.03rem 0.2rem !important;
}

pre.prettyprint {
    border-radius: 0.2rem;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}

.documentation h2 {
    color: var(--primary);
}

.documentation th:first-child,
.documentation th:nth-child(3) {
    width: 16%;
}

.documentation blockquote {
    margin-left: 1rem;
    padding: 1rem 1rem 0.01rem 1rem;
    font-weight: 400;
    border-radius: 0 4px 4px 0;
    background: #edf2f9;
    border-left: 3px solid var(--primary);
}

.documentation blockquote.info {
    background: #edf2f9;
    border-left: 3px solid var(--info);
}

.documentation blockquote.warning {
    background: #fff4db;
    border-left: 3px solid var(--warning);
}

.documentation blockquote.danger {
    background: #fadeeb;
    border-left: 3px solid var(--danger);
}

/* Enter custom CSS rules for your application here */

dd {
    min-height: 19px;
}

button i {}

.height-200 {
    min-height: 200px;
}

.btn-action-icon {
    padding: .5rem 10px .5rem 10px !important;
    width: 35px !important;
}

.btn-action-icon i {
    font-size: 1.2em;
    padding-right: 5px;
}

.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav .nav-menu li.active>a {
    background-color: rgba(241, 94, 34, 0.2) !important;
    box-shadow: inset 3px 0 0 #f15e22 !important;
    color: #ffffff !important;
}

.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav .nav-menu li.active>a:hover {
    background-color: rgba(241, 94, 34, 0.3) !important;
    color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li.active>a {
    background-color: rgba(241, 94, 34, 0.2) !important;
    box-shadow: inset 3px 0 0 #f15e22 !important;
    color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li.active>a:hover {
    background-color: rgba(241, 94, 34, 0.3) !important;
    color: #ffffff !important;
}

.page-sidebar .primary-nav .nav-menu li.active>a>[class*=fa-],
.page-sidebar .primary-nav .nav-menu li.active>a>.ni {
    color: #f15e22 !important;
}

.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav .nav-menu li li.active>a {
    position: relative;
    background-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 4px 0 0 #f15e22, inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav .nav-menu li li.active>a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li li.active>a {
    position: relative;
    background-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 4px 0 0 #f15e22, inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li li.active>a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav .nav-menu li li.active>a>.nav-link-text,
.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav .nav-menu li li.active>a>[class*=fa-],
.mod-skin-light:not(.mod-skin-dark) .page-sidebar .primary-nav .nav-menu li li.active>a>.ni {
    color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li li.active>a>.nav-link-text,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li li.active>a>[class*=fa-],
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav .nav-menu li li.active>a>.ni {
    color: #ffffff !important;
}

.input-invalid {
    border: 1px solid #dc3545;
}

.badge-sm {
    font-size: 75%;
}

.badge-md {
    font-size: 100%;
    padding: 0.25em 0.5em;
}

/* Data Table custom CSS rules */
.dt-action-btn {
    margin-right: 10px;
}

/* Cases Data Table custom CSS rules */
.case-task-completion {
    margin-top: 5px;
    background-color: #f1f9fd;
    width: fit-content;
    padding: .2em .5em;
    border-radius: 4px;
    border-left: 3px solid #4ad4c5;
}

/* Document Selection Styles */
.list-group-header {
    background-color: #e7e7e7;
    border-bottom: 2px solid #8d8d8d;
    box-shadow: 0px 0px 13px 0px rgb(62 44 90 / 8%);
    border-top: 2px solid #8d8d8d !important;
}


/* Splash Icon Menu */

.o_home_menu .o_app .o_app_icon {
    width: 70px;
    height: 70px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

a.o_menuitem:hover {
    box-shadow: 8px 8px 22px rgba(120, 240, 120, 0.2) !important;
}

a.o_menuitem {
    background-color: #4A4F59;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .7);
    margin-right: .75rem;
    margin-left: .75rem;
}

a.o_menuitem>i.fal {
    padding-top: .5rem;
}

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

    50% {
        transform: scale(1.05);
    }

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

.pulse-on-hover:hover {
    animation: pulse 0.3s 1;
}

table.dataTable td.dt-control:before {
    height: 1em;
    width: 1em;
    margin-top: -9px;
    display: inline-block;
    color: white;
    border: .15em solid white;
    border-radius: 1em;
    box-shadow: 0 0 .2em #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: "Courier New", Courier, monospace;
    line-height: 1em;
    content: "+";
    background-color: #f15e22;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.child {
    white-space: normal;
    word-break: break-word;
}

.scrollable {
    height: 950px;
    /* Set a fixed height for scrolling */
    overflow-y: auto;
    /* Enable vertical scrolling */
}

.success-span {
    color: #ffffff;
    font-weight: 600;
    background-color: #1dc9b7;
    padding: 3px 10px;
    margin-left: 10px;
    border-radius: 3px;
}

.hide {
    display: none;
}

.lh-med {
    line-height: 1.6em;
}

address {
    line-height: 1.6em;
}

.timeline {
    border-left: 1px solid hsl(0, 0%, 90%);
    position: relative;
    list-style: none;
}

.timeline .timeline-item {
    position: relative;
}

.timeline .timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .timeline-item:after {
    background-color: hsl(0, 0%, 90%);
    left: -45px;
    border-radius: 50%;
    height: 11px;
    width: 11px;
    content: "";
}

.gutters-sm {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters-sm>.col,
.gutters-sm>[class*=col-] {
    padding-right: 8px;
    padding-left: 8px;
}

.highlighted {
    border: 2px solid #d3d3d3;
}

.app-nav-link {
    padding: .75rem 1.125rem;
}

.selected {
    /* -webkit-box-shadow: inset 0 0 0px 1px #886ab5 !important;
    box-shadow: inset 0 0 0px 1px #886ab5 !important;
    background: #534b69 !important;*/
    /*font-weight: 500;
    color: inherit;*/
}

#sticky-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    /* Ensures it's above other content */
    background-color: #26272b;
    /* Light background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Optional shadow for emphasis */
    transition: all 0.3s ease-in-out;
    /* Smooth transition */
    display: none;
    /* Initially hidden */
}

/* Desktop context menu */
.context-menu {
    position: absolute;
    display: none;
    z-index: 1000;
    padding: 10px;
    max-width: 200px;
}

.context-menu .menu-header {
    font-weight: bold;
    margin-bottom: 10px;
}

.context-menu .menu-item {
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.context-menu .menu-item:hover {
    background-color: #f0f0f0;
}

/* Mobile drawer style */
@media (max-width: 768px) {
    .context-menu {
        position: fixed;
        bottom: -100%;
        /* Hidden below the viewport */
        left: 0;
        width: 100%;
        height: 300px;
        /* Adjust height as needed */
        border-radius: 12px 12px 0 0;
        box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.2);
        padding: 20px;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
    }

    .context-menu.open {
        transform: translateY(0);
        /* Slide up into view */
    }

    .context-menu .menu-item {
        padding: 15px;
        font-size: 16px;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    .context-menu .menu-item:last-child {
        border-bottom: none;
    }
}

.highlighted {
    background-color: #fff3f4 !important;
}

.highlighted td {
    border-bottom: 2px solid #000;
}

.table-action-bar {}

@media (max-width: 768px) {
    .table-action-bar {}
}

.bg-brand-gradient {
    background-image: none !important;
    background-color: #122d50 !important;
}

/* Sidebar overrides */
.page-logo {
    width: 15.875rem !important;
    margin-top: 0.75rem;
    margin-bottom: .75rem;
    flex-shrink: 0;
}

.page-sidebar {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
}

/* ========================================
   SIDEBAR NAVIGATION SCROLLBAR SUPPORT
   ----------------------------------------
   Ensures the navigation panel scrolls independently
   of the page content and renders a visible, themed
   scrollbar in both light and dark skins.
   ======================================== */

/* Desktop: pin the sidebar to the viewport so the nav can
   scroll on its own instead of stretching with page content. */
@media (min-width: 992px) {
    .page-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        max-height: 100vh;
        align-self: flex-start;
        overflow: hidden;
    }
}

/* Make the primary nav the flexible (scrolling) region between
   the logo at the top and the nav-footer at the bottom. */
.page-sidebar .primary-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(18, 45, 80, 0.35) rgba(0, 0, 0, 0.04);
}

.page-sidebar .nav-footer {
    flex-shrink: 0;
}

/* WebKit (Chrome/Edge/Safari) custom scrollbar */
.page-sidebar .primary-nav::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.page-sidebar .primary-nav::-webkit-scrollbar-track,
.page-sidebar .primary-nav::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.page-sidebar .primary-nav::-webkit-scrollbar-thumb,
.page-sidebar .primary-nav::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(18, 45, 80, 0.35);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.page-sidebar .primary-nav:hover::-webkit-scrollbar-thumb,
.page-sidebar .primary-nav:hover::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(241, 94, 34, 0.65);
}

.page-sidebar .primary-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(241, 94, 34, 0.85);
}

.page-sidebar .primary-nav::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* Dark skin scrollbar tweaks */
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav {
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.06);
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-track,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-track-piece {
    background-color: rgba(255, 255, 255, 0.06);
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-thumb,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(255, 255, 255, 0.3);
}

.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav:hover::-webkit-scrollbar-thumb,
.mod-skin-dark:not(.mod-skin-light) .page-sidebar .primary-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(241, 94, 34, 0.85);
}

/* When the sidebar is in the minified (collapsed) state we don't
   need the scrollbar to take up width away from the icons. */
.nav-function-minify .page-sidebar .primary-nav::-webkit-scrollbar {
    width: 4px;
}

.nav-function-minify .page-sidebar .primary-nav {
    scrollbar-width: thin;
}

/* Drawer Overrides */
.bg-trans-gradient {
    background: linear-gradient(251deg, #4f4e50, #122d50) !important;
}

/* ===========================================
   HBL Shared Modal & Drawer Chrome
   =========================================== */

/* Backdrop: navy-tinted blur replaces default Bootstrap black */
.modal-backdrop {
    background: rgba(12, 28, 56, 0.34) !important;
    backdrop-filter: blur(6px) saturate(108%);
    -webkit-backdrop-filter: blur(6px) saturate(108%);
}

body.mod-skin-dark:not(.mod-skin-light) .modal-backdrop {
    background: rgba(7, 27, 52, 0.56) !important;
}

/* Dedicated blur layer that sits above the app shell and below Bootstrap modals. */
.modal-blur-overlay {
    position: fixed;
    inset: 0;
    z-index: 1045;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
    background: rgba(244, 244, 244, 0.08);
    backdrop-filter: blur(8px) saturate(108%);
    -webkit-backdrop-filter: blur(8px) saturate(108%);
}

body.modal-open .modal-blur-overlay,
body.modal-shell-blurred .modal-blur-overlay {
    opacity: 1;
    visibility: visible;
}

body.mod-skin-dark:not(.mod-skin-light) .modal-blur-overlay {
    background: rgba(7, 27, 52, 0.14);
    backdrop-filter: blur(8px) saturate(105%) brightness(0.96);
    -webkit-backdrop-filter: blur(8px) saturate(105%) brightness(0.96);
}

/* Page Select2 filters use z-index 2050 globally; keep them below the modal shell when open. */
body.modal-open .page-content .select2-container,
body.modal-shell-blurred .page-content .select2-container {
    z-index: 1 !important;
}

/* Modal content base shape (applied via hbl-modal-content class) */
.hbl-modal-content {
    border-radius: 16px !important;
    overflow: hidden;
    border: none !important;
    box-shadow: 0 24px 64px rgba(12, 28, 56, 0.22), 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    display: flex;
    flex-direction: column;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-modal-content {
    background: #1f2129;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.22) !important;
}

/* Header: solid navy gradient with subtle radial highlight */
.hbl-modal-header {
    background: linear-gradient(135deg, #122d50 0%, rgba(18, 45, 80, 0.9) 100%) !important;
    padding: 1.25rem 1.5rem !important;
    position: relative;
    overflow: hidden;
    border-bottom: none !important;
    border-radius: 0 !important;
    flex-shrink: 0;
}

.hbl-modal-header-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background: radial-gradient(circle at top right, #ffffff, transparent 60%);
    pointer-events: none;
}

.hbl-modal-header-inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.hbl-modal-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.3;
}

.hbl-modal-subtitle {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.72) !important;
    margin: 0.25rem 0 0;
    display: block;
}

.hbl-modal-close {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 0.3125rem;
    border-radius: 6px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1rem;
    transition: background 0.15s, color 0.15s;
}

.hbl-modal-close:hover,
.hbl-modal-close:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Footer */
.hbl-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem !important;
    border-top: 1px solid #e9e9e9 !important;
    background: #f8f9fa;
    flex-shrink: 0;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-modal-footer {
    background: #252830;
    border-top-color: rgba(255, 255, 255, 0.07) !important;
}

/* Cancel / close button */
.hbl-btn-cancel {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 1rem;
    border: 1px solid #dee2e6;
    background: #ffffff;
    color: #6c757d;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
    line-height: 1;
}

.hbl-btn-cancel:hover,
.hbl-btn-cancel:focus {
    background: #f4f4f4;
    border-color: #adb5bd;
    color: #495057;
    text-decoration: none;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-btn-cancel {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.12);
    color: #a0aec0;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-btn-cancel:hover,
body.mod-skin-dark:not(.mod-skin-light) .hbl-btn-cancel:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: #dfe7f2;
}

/* Submit / primary action button sizing */
.hbl-btn-submit {
    height: 38px;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* Error container inside modals */
.hbl-modal-error {
    flex-shrink: 0;
    margin: 0.75rem 1.25rem 0 !important;
}

.address-map iframe {
    border: none !important;
}

.badge-primary-faded {
    background: #122d50;
    border: 1px solid;
    border-radius: 18px;
    padding: .5em 10px;
    color: #f4f4f4;
}

.table-bordered {
    border: 1px solid #e9e9e9;
    border-radius: 5px;
}

.table-bordered thead tr th {
    border-color: #e9e9e9;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #e9e9e9;
}

.table-bordered tbody tr th {
    border-color: #e9e9e9;
}

.custom-table thead {
    background-color: #f15e22;
    color: #ffffff;
}

.wide-border-top {
    border-top: 4px solid var(--card-top-border) !important;
}

.primary-wide-border-top {
    border-top: 5px solid var(--card-top-border) !important;
}

.green-wide-border-top {
    border-top: 5px solid #28a745;
}

.orange-wide-border-top {
    border-top: 5px solid #f15e22;
}

.text-orange {
    color: #f15e22;
}

.bg-orange {
    background-color: #f15e22;
}

.btn-orange {
    background-color: var(--brand-action) !important;
    border-color: var(--brand-action) !important;
    color: var(--brand-action-text) !important;
}

.purple-wide-border-top {
    border-top: 5px solid #6f42c1;
}

.text-purple {
    color: #6f42c1;
}

.btn-purple {
    background-color: #6f42c1;
    color: #f4f4f4;
}

.active-qty-container {
    background-color: #122d50;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.alt-qty-container {
    background-color: #f4f4f4;
    color: #4f4e50;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.swal2-container {
    z-index: 2060 !important;
}

@media (max-width: 768px) {
    #tabDropdown {
        font-size: 1.1rem;
        font-weight: 500;
        background-color: #ffffff;
        border: 2px solid #007bff;
        border-radius: 8px;
        padding: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        color: #2a2a2a;
    }

    label[for="tabDropdown"] {
        display: block;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .bg-light {
        background-color: #f8f9fa !important;
    }
}

/* ========================================
   BADGE STYLES
   ======================================== */

.type-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    margin-right: 1rem;
    margin-bottom: 0;
    vertical-align: middle;
    margin-left: 1rem;
}

.status-badge {
    margin-left: 1rem;
    margin-right: 0;
}

/* Type Badge Variants */
.type-badge-default {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.type-badge-residential {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.type-badge-commercial {
    background-color: rgba(0, 123, 255, 0.15);
    color: #007bff;
    border: 1px solid rgba(0, 123, 255, 0.3);
}

/* Status Badge Variants */
.status-active {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-inactive {
    background-color: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.status-disabled {
    background-color: rgba(52, 58, 64, 0.15);
    color: #343a40;
    border: 1px solid rgba(52, 58, 64, 0.3);
}

/* Dark mode — status badge variants */
body.mod-skin-dark:not(.mod-skin-light) .status-active {
    background-color: rgba(40, 167, 69, 0.18) !important;
    color: #68d391 !important;
    border-color: rgba(40, 167, 69, 0.35) !important;
}

body.mod-skin-dark:not(.mod-skin-light) .status-inactive {
    background-color: rgba(108, 117, 125, 0.18) !important;
    color: #a0aec0 !important;
    border-color: rgba(108, 117, 125, 0.35) !important;
}

body.mod-skin-dark:not(.mod-skin-light) .status-disabled {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #718096 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.profile-dropdown.dropdown-menu {
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0.5rem;
    min-width: 19rem;
    max-width: calc(100vw - 1rem);
}

.profile-dropdown-menu {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    color: #122d50;
}

.profile-dropdown-header {
    padding: 1rem 1rem 0.9rem;
    background: linear-gradient(251deg, #4f4e50 0%, #122d50 100%);
    color: #ffffff;
}

.profile-dropdown-header__top {
    min-width: 0;
}

.profile-dropdown-avatar {
    flex: 0 0 auto;
}

.profile-dropdown-avatar__image {
    width: 3.25rem !important;
    height: 3.25rem !important;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.profile-dropdown-name {
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.profile-dropdown-user {
    min-width: 0;
}

.profile-dropdown-role {
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
}

.profile-dropdown-email {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.65rem;
    margin-top: 0.85rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.profile-dropdown-email:hover,
.profile-dropdown-email:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    text-decoration: none;
}

.profile-dropdown-email__icon,
.profile-dropdown-email__copy {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
}

.profile-dropdown-email__icon {
    align-self: center;
}

.profile-dropdown-email__text {
    grid-column: 2;
    min-width: 0;
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.profile-dropdown-body,
.profile-dropdown-footer {
    background: #ffffff;
}

.profile-dropdown-row,
.profile-dropdown-action,
.profile-dropdown-logout {
    border-bottom: 1px solid #e9ecef;
}

.profile-dropdown-row--last-login {
    border-bottom: 1px solid #e9ecef;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row--last-login {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.profile-dropdown-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    color: #122d50;
}

.profile-dropdown-row__label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #4f4e50;
    font-weight: 500;
    min-width: 0;
}

.profile-dropdown-row__label i {
    width: 1rem;
    text-align: center;
    color: #122d50;
    opacity: 0.85;
    flex: 0 0 auto;
}

.profile-dropdown-row__value {
    flex: 0 1 auto;
    text-align: right;
    color: #122d50;
    font-weight: 600;
    word-break: break-word;
}

.profile-dropdown-divider {
    height: 1px;
    background: #e9ecef;
}

.profile-dropdown-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    color: #122d50;
    text-decoration: none;
}

.profile-dropdown-action:hover {
    background: #f8f9fa;
    color: #122d50;
    text-decoration: none;
}

.profile-dropdown-action__label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    font-weight: 600;
}

.profile-dropdown-action__label i {
    width: 1rem;
    text-align: center;
    color: #4f4e50;
    flex: 0 0 auto;
}

.profile-dropdown-action__meta {
    color: #6c757d;
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.profile-dropdown-action__meta .badge {
    font-weight: 500;
}

.profile-dropdown-logout {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    color: #dc3545;
    text-decoration: none;
    border-bottom: 0;
}

.profile-dropdown-logout:hover {
    background: rgba(220, 53, 69, 0.06);
    color: #dc3545;
    text-decoration: none;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-menu,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-body,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-footer {
    background: #303136;
    color: #f4f4f4;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-role,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-logout {
    border-color: rgba(255, 255, 255, 0.08);
    color: #f4f4f4;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email:hover,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email:focus,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email__text {
    color: #f4f4f4 !important;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email:hover,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email:focus {
    background: rgba(255, 255, 255, 0.12);
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email__icon,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-email__copy {
    color: rgba(244, 244, 244, 0.88);
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row__label,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row__value,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action__label,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action__meta {
    color: #f4f4f4;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-row__label i,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action__label i {
    color: #f4f4f4;
    opacity: 0.9;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action:hover {
    background: rgba(255, 255, 255, 0.04);
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-logout {
    color: #ff6b6b;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-logout:hover {
    background: rgba(220, 53, 69, 0.12);
    color: #ff6b6b;
}

@media (max-width: 575.98px) {
    .profile-dropdown.dropdown-menu {
        min-width: 17rem;
        max-width: calc(100vw - 1rem);
    }

    .profile-dropdown-row,
    .profile-dropdown-action {
        gap: 0.75rem;
    }

    .profile-dropdown-row {
        flex-direction: column;
    }

    .profile-dropdown-row__value {
        text-align: left;
    }

    .profile-dropdown-action {
        align-items: flex-start;
    }
}

/* ========================================
   DARK MODE — DEEP SURFACE OVERRIDES
   Targets the richer, darker dark-mode palette
   shown in the design reference (image 2).
   surface-dark-canvas : #15171d
   surface-dark-1      : #1f2129  (cards)
   surface-dark-2      : #252830  (card headers, alt rows)
   ======================================== */

/* Page canvas */
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper {
    background-color: #15171d !important;
}

/* Cards */
.mod-skin-dark:not(.mod-skin-light) .card {
    background-color: #1f2129 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

/* Card headers */
.mod-skin-dark:not(.mod-skin-light) .card-header {
    background-color: #252830 !important;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

/* Card footer */
.mod-skin-dark:not(.mod-skin-light) .card-footer {
    background-color: #252830 !important;
    border-top-color: rgba(255, 255, 255, 0.07) !important;
}

/* Table body text and borders */
.mod-skin-dark:not(.mod-skin-light) .table {
    color: #dfe7f2 !important;
}

.mod-skin-dark:not(.mod-skin-light) .table td,
.mod-skin-dark:not(.mod-skin-light) .table th {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

.mod-skin-dark:not(.mod-skin-light) .table-bordered {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Table header row (thead-light) */
.mod-skin-dark:not(.mod-skin-light) thead.thead-light th,
.mod-skin-dark:not(.mod-skin-light) .table thead th {
    background-color: #252830 !important;
    color: #a0aec0 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Table row hover */
.mod-skin-dark:not(.mod-skin-light) .table-hover tbody tr:hover td {
    background-color: var(--table-row-hover) !important;
    color: var(--table-row-text, #f3f4f6) !important;
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
    background-color: var(--table-row-hover) !important;
}

.table tbody tr.selected > td,
.table tbody tr.selected > th,
#dt-list tbody tr.selected > td,
#dt-list tbody tr.selected > th {
    background-color: var(--table-row-selected) !important;
}

.mod-skin-dark:not(.mod-skin-light) .table tbody tr.selected > td,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.selected > th,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.table-active > td,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.table-active > th,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.selected > td,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.selected > th,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.table-active > td,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.table-active > th {
    background-color: var(--table-row-selected) !important;
    color: var(--table-row-text, #f3f4f6) !important;
}

.mod-skin-dark:not(.mod-skin-light) .table tbody tr.selected:hover > td,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.selected:hover > th,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.table-active:hover > td,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.table-active:hover > th,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.selected:hover > td,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.selected:hover > th,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.table-active:hover > td,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.table-active:hover > th {
    background-color: var(--table-row-selected) !important;
    color: var(--table-row-text, #f3f4f6) !important;
}

.mod-skin-dark:not(.mod-skin-light) .table.dataTable tbody tr:hover > td.sorting_1,
.mod-skin-dark:not(.mod-skin-light) .table.dataTable tbody tr:hover > th.sorting_1 {
    background-color: var(--table-row-hover) !important;
    color: var(--table-row-text, #f3f4f6) !important;
}

.mod-skin-dark:not(.mod-skin-light) .table.dataTable tbody tr.selected > td.sorting_1,
.mod-skin-dark:not(.mod-skin-light) .table.dataTable tbody tr.table-active > td.sorting_1,
.mod-skin-dark:not(.mod-skin-light) .table.dataTable tbody tr.selected:hover > td.sorting_1,
.mod-skin-dark:not(.mod-skin-light) .table.dataTable tbody tr.table-active:hover > td.sorting_1,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.selected > td.sorting_1,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.table-active > td.sorting_1,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.selected:hover > td.sorting_1,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.table-active:hover > td.sorting_1 {
    background-color: var(--table-row-selected) !important;
    color: var(--table-row-text, #f3f4f6) !important;
}

.mod-skin-dark:not(.mod-skin-light) .table-hover tbody tr:hover a,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.selected > td a,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.table-active > td a,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.selected:hover > td a,
.mod-skin-dark:not(.mod-skin-light) .table tbody tr.table-active:hover > td a,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.selected > td a,
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.table-active > td a {
    color: var(--table-row-text, #f3f4f6) !important;
}

/* Alternating rows (if used) */
.mod-skin-dark:not(.mod-skin-light) .table-striped tbody tr:nth-of-type(odd) td {
    background-color: rgba(255, 255, 255, 0.025) !important;
}

/* DataTable info + pagination text */
.mod-skin-dark:not(.mod-skin-light) .dataTables_info,
.mod-skin-dark:not(.mod-skin-light) .dataTables_length label,
.mod-skin-dark:not(.mod-skin-light) .dataTables_filter label {
    color: #a0aec0 !important;
}

/* DataTable pagination — legacy span/a buttons only (not Bootstrap .page-link) */
.mod-skin-dark:not(.mod-skin-light) .dataTables_paginate>span.paginate_button,
.mod-skin-dark:not(.mod-skin-light) .dataTables_paginate>a.paginate_button {
    color: #a0aec0 !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-item .page-link {
    min-width: 2.1rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.35rem !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-item.previous .page-link,
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-item.next .page-link {
    background-color: var(--pagination-nav-bg) !important;
    border-color: var(--pagination-nav-bg) !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-item .page-link span,
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-item .page-link i {
    color: #ffffff !important;
    line-height: 1 !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-item.active .page-link,
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-item.active .page-link span,
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-item.active .page-link i {
    background-color: var(--pagination-active-bg) !important;
    border-color: var(--pagination-active-bg) !important;
    color: var(--pagination-active-text) !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-item.disabled .page-link {
    background-color: #1f2129 !important;
    border-color: #2f3440 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-link:hover {
    background-color: #313644 !important;
    border-color: #4a5568 !important;
    color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .dataTables_paginate .page-link:focus {
    box-shadow: none !important;
}

.mod-skin-dark:not(.mod-skin-light) .dataTables_paginate .paginate_button.current,
.mod-skin-dark:not(.mod-skin-light) .dataTables_paginate .paginate_button.current:hover {
    background: var(--pagination-active-bg) !important;
    border-color: var(--pagination-active-bg) !important;
    color: var(--pagination-active-text) !important;
}

.mod-skin-dark:not(.mod-skin-light) .dataTables_paginate>span.paginate_button:hover,
.mod-skin-dark:not(.mod-skin-light) .dataTables_paginate>a.paginate_button:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #dfe7f2 !important;
}

/* Bootstrap pagination inside DataTables — color the link text, not the list item */
.mod-skin-dark:not(.mod-skin-light) .dataTables_paginate .pagination .page-link {
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
    color: #e8edf4 !important;
    -webkit-text-fill-color: #e8edf4 !important;
}

.mod-skin-dark:not(.mod-skin-light) .dataTables_paginate .pagination .page-item.active .page-link {
    color: var(--pagination-active-text) !important;
    -webkit-text-fill-color: var(--pagination-active-text) !important;
}

.mod-skin-dark:not(.mod-skin-light) .dataTables_paginate .pagination .page-item.disabled .page-link {
    color: #9aa3b2 !important;
    -webkit-text-fill-color: #9aa3b2 !important;
}

/* DataTable selected row */
.mod-skin-dark:not(.mod-skin-light) #dt-list tbody tr.selected td {
    background-color: var(--table-row-selected) !important;
    color: var(--table-row-text, #f3f4f6) !important;
}

/* Input and form controls in dark mode */
.mod-skin-dark:not(.mod-skin-light) .form-control,
.mod-skin-dark:not(.mod-skin-light) .form-select {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #dfe7f2 !important;
}

.mod-skin-dark:not(.mod-skin-light) .form-control::placeholder {
    color: #718096 !important;
}

.mod-skin-dark:not(.mod-skin-light) .input-group-text {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #a0aec0 !important;
}

/* bg-light in dark mode → use surface-dark-2 */
.mod-skin-dark:not(.mod-skin-light) .bg-light {
    background-color: #252830 !important;
}

/* Profile dropdown — align to new dark surface */
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-menu,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-body,
.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-footer {
    background: #1f2129 !important;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

.mod-skin-dark:not(.mod-skin-light) .profile-dropdown-action:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Dropdown menu item styling in light mode */
body:not(.mod-skin-dark) .dropdown-item:hover,
body:not(.mod-skin-dark) .dropdown-item:focus {
    background-color: rgba(18, 45, 80, 0.06) !important;
    color: #122d50 !important;
}

body:not(.mod-skin-dark) .dropdown-item.active,
body:not(.mod-skin-dark) .dropdown-item:active {
    background-color: rgba(18, 45, 80, 0.1) !important;
    color: #122d50 !important;
    font-weight: 600;
}

/* Dropdown menus in dark mode */
.mod-skin-dark:not(.mod-skin-light) .dropdown-menu {
    background-color: #1f2129 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.mod-skin-dark:not(.mod-skin-light) .dropdown-item {
    color: #dfe7f2 !important;
}

.mod-skin-dark:not(.mod-skin-light) .dropdown-item:hover,
.mod-skin-dark:not(.mod-skin-light) .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

body.mod-skin-dark:not(.mod-skin-light) .project-details-card .dropdown-item:hover,
body.mod-skin-dark:not(.mod-skin-light) .project-details-card .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   Redesigned Modals UI Styles (Pixel-perfect match to HBL guidelines)
   ========================================================================== */

/* Custom thin scrollbar for global defaultModal */
#defaultModal .modal-body::-webkit-scrollbar {
    width: 8px;
}

#defaultModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

#defaultModal .modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    border: 2px solid #ffffff;
}

#defaultModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .modal-body::-webkit-scrollbar-thumb {
    background: #475569;
    border-color: #1f2129;
}

/* Card overrides inside modal forms */
#defaultModal .appointment-form-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0.5rem !important;
}

#defaultModal .appointment-card-body {
    padding: 0.5rem 0 1.25rem 0 !important;
}

/* Modals section divider */
.modal-section-divider {
    border-top: 1px solid #edf2f7;
    margin: 0.5rem 0 0.75rem 0 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .modal-section-divider {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Redesigned modal group headers */
#defaultModal .appointment-card-header {
    border: none !important;
    background: transparent !important;
    padding: 0.5rem 0 !important;
    margin-bottom: 0.25rem !important;
    border-radius: 0 !important;
}

#defaultModal .appointment-card-header h6 {
    margin: 0;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #122d50 !important;
    display: flex;
    align-items: center;
    width: 100%;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .appointment-card-header h6 {
    color: #e2e8f0 !important;
}

/* Icon badge wrapper inside section headers */
#defaultModal .appointment-card-header h6 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #e6ecf4;
    color: #122d50;
    border-radius: 6px;
    margin-right: 0.75rem;
    font-size: 0.95rem;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .appointment-card-header h6 i {
    background-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

/* Timezone info banner styling */
#defaultModal .timezone-info.alert-info {
    border-radius: 8px !important;
    border: 1px solid #bfe3f2 !important;
    background: #eaf5fa !important;
    color: #2b82ad !important;
    font-size: 0.8125rem !important;
    padding: 0.65rem 0.85rem !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .timezone-info.alert-info {
    background: rgba(43, 130, 173, 0.1) !important;
    border-color: rgba(43, 130, 173, 0.25) !important;
    color: #70c3ec !important;
}

#defaultModal .timezone-info.alert-info i {
    font-size: 1rem;
    color: #2b82ad !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .timezone-info.alert-info i {
    color: #70c3ec !important;
}

/* ── Global dark mode: alert-info text fix ─────────────────────────────────
   Bootstrap's alert-info uses a dark teal text color (#0c5460) which becomes
   nearly unreadable on dark card surfaces. Override to a light readable tone. */
body.mod-skin-dark:not(.mod-skin-light) .alert-info {
    background-color: rgba(23, 162, 184, 0.1) !important;
    border-color: rgba(23, 162, 184, 0.25) !important;
    color: #70c3ec !important;
}

body.mod-skin-dark:not(.mod-skin-light) .alert-info strong,
body.mod-skin-dark:not(.mod-skin-light) .alert-info .h4,
body.mod-skin-dark:not(.mod-skin-light) .alert-info span.h4 {
    color: #a8d8f0 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .alert-primary {
    background-color: rgba(18, 45, 80, 0.35) !important;
    border-color: rgba(18, 45, 80, 0.5) !important;
    color: #dfe7f2 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .alert-primary strong {
    color: #ffffff !important;
}

/* Time presets layout and pills */
#defaultModal .time-duration-presets {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    margin-top: 0.75rem !important;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

#defaultModal .time-duration-presets .text-muted {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #4f4e50 !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .time-duration-presets .text-muted {
    color: #a0aec0 !important;
}

#defaultModal .time-preset-btn {
    background: #f1f3f5 !important;
    border: none !important;
    color: #4f4e50 !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .time-preset-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #dfe7f2 !important;
}

#defaultModal .time-preset-btn:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .time-preset-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

#defaultModal .time-preset-btn.active,
.time-preset-btn.active {
    background: #f15e22 !important;
    color: #ffffff !important;
    border-color: #f15e22 !important;
    box-shadow: none !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .time-preset-btn.active,
.mod-skin-dark #defaultModal .time-preset-btn.active,
.mod-skin-dark .time-preset-btn.active {
    background: #f15e22 !important;
    color: #ffffff !important;
    border-color: #f15e22 !important;
}

/* Rounded inputs and selectors in global modals */
#defaultModal .form-group label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #4f4e50;
    margin-bottom: 0.35rem;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .form-group label {
    color: #cbd5e1;
}

#defaultModal .form-control,
#defaultModal .custom-select {
    height: 40px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
    background-color: #ffffff;
}

#defaultModal textarea.form-control {
    height: auto !important;
    min-height: 120px !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .form-control,
body.mod-skin-dark:not(.mod-skin-light) #defaultModal .custom-select {
    background-color: #252830 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #dfe7f2 !important;
}

#defaultModal .form-control:focus,
#defaultModal .custom-select:focus {
    border-color: #f15e22 !important;
    box-shadow: 0 0 0 2px rgba(241, 94, 34, 0.18) !important;
}

/* Keep Bootstrap validation icons visible without colliding with trailing UI
   affordances (select arrows, calendar icons, clear buttons, etc.). */
#defaultModal .form-control.is-valid,
#defaultModal .custom-select.is-valid,
#defaultModal input[type="date"].is-valid,
#defaultModal input[type="datetime-local"].is-valid,
#GlobalDrawer .form-control.is-valid,
#GlobalDrawer .custom-select.is-valid,
#GlobalDrawer input[type="date"].is-valid,
#GlobalDrawer input[type="datetime-local"].is-valid {
    padding-right: 3rem !important;
    background-position: right 2.1rem center !important;
}

#defaultModal .form-control.is-valid[type="date"],
#defaultModal .form-control.is-valid[type="datetime-local"],
#GlobalDrawer .form-control.is-valid[type="date"],
#GlobalDrawer .form-control.is-valid[type="datetime-local"] {
    padding-right: 3.4rem !important;
}

/* Override the validation padding specifically for native date pickers in
   modals/drawers so the calendar control stays anchored at the right edge. */
#defaultModal .form-control[type="date"].is-valid,
#defaultModal .form-control[type="date"].is-invalid,
#defaultModal .form-control[type="datetime-local"].is-valid,
#defaultModal .form-control[type="datetime-local"].is-invalid,
#GlobalDrawer .form-control[type="date"].is-valid,
#GlobalDrawer .form-control[type="date"].is-invalid,
#GlobalDrawer .form-control[type="datetime-local"].is-valid,
#GlobalDrawer .form-control[type="datetime-local"].is-invalid {
    padding-right: 0.75rem !important;
    background-position: right 0.75rem center !important;
}

/* Native date/time pickers need their right edge preserved so the calendar icon
   does not drift when Bootstrap toggles valid/invalid state. */
#defaultModal input[type="date"].is-valid,
#defaultModal input[type="date"].is-invalid,
#defaultModal input[type="datetime-local"].is-valid,
#defaultModal input[type="datetime-local"].is-invalid,
#GlobalDrawer input[type="date"].is-valid,
#GlobalDrawer input[type="date"].is-invalid,
#GlobalDrawer input[type="datetime-local"].is-valid,
#GlobalDrawer input[type="datetime-local"].is-invalid {
    padding-right: 0.75rem !important;
    background-image: none !important;
    background-position: right center !important;
}

#defaultModal .select2-container--default .select2-selection--single.is-valid,
#defaultModal .select2-container--default .select2-selection--multiple.is-valid,
#GlobalDrawer .select2-container--default .select2-selection--single.is-valid,
#GlobalDrawer .select2-container--default .select2-selection--multiple.is-valid {
    padding-right: 3rem !important;
}

#defaultModal .form-text {
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.25rem;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .form-text {
    color: #a0aec0;
}

/* Select2 overrides inside modals */
#defaultModal .select2-container--default .select2-selection--single {
    height: 40px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    display: flex;
    align-items: center;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .select2-container--default .select2-selection--single {
    background-color: #252830 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#defaultModal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    padding-left: 0.75rem !important;
    font-size: 0.875rem !important;
    color: #4f4e50 !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #dfe7f2 !important;
}

#defaultModal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

#defaultModal .select2-dropdown {
    border-radius: 6px !important;
    border-color: #cbd5e1 !important;
}

#defaultModal .select2-container,
#defaultModal .select2-container--open {
    z-index: 1065 !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .select2-dropdown {
    background-color: #1f2129 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.pm-select2-dropdown {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-size: 0.875rem;
}

.pm-select2-dropdown .select2-results__options {
    overflow-x: hidden;
}

.pm-select2-dropdown .select2-results__option {
    white-space: normal;
    word-break: break-word;
    font-size: 0.875rem;
    color: #374151;
    padding: 7px 12px;
}

#defaultModal .select2-container--default .select2-selection--single,
#defaultModal .select2-container--default .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 0.875rem;
}

#defaultModal .select2-container--open .select2-selection--single,
#defaultModal .select2-container--open .select2-selection--multiple {
    border-color: #f15e22 !important;
    box-shadow: 0 0 0 1px rgba(241, 94, 34, 0.18) !important;
}

#defaultModal .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
}

#defaultModal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: 0.75rem;
    padding-right: 2rem;
    color: #374151 !important;
    font-size: 0.875rem;
}

#defaultModal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af;
    font-size: 0.875rem;
}

#defaultModal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    width: 28px;
}

#defaultModal .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6b7280 transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}

#defaultModal .select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #6b7280 transparent !important;
    border-width: 0 4px 5px 4px !important;
}

body.mod-skin-dark:not(.mod-skin-light) .pm-select2-dropdown {
    background-color: #2a2d35 !important;
    border-color: #3f4550 !important;
    color: #e2e8f0 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .pm-select2-dropdown .select2-results__option {
    color: #dfe7f2 !important;
}

/* Select2 options custom styling and premium highlight colors */
.select2-container--default .select2-results__option {
    padding: 6px 12px !important;
    font-size: 0.875rem !important;
    transition: background-color 0.15s, color 0.15s;
}

/* Light mode dropdown options — light orange hover palette */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #fff3ed !important;
    color: #c44a0e !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ffe8d6 !important;
    color: #c44a0e !important;
    font-weight: 600 !important;
}

/* Dark mode dropdown options */
body.mod-skin-dark:not(.mod-skin-light) #defaultModal .select2-container--default .select2-results__option--highlighted[aria-selected],
.mod-skin-dark #defaultModal .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f15e22 !important;
    /* HBL brand orange highlight! */
    color: #ffffff !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .select2-container--default .select2-results__option[aria-selected=true],
.mod-skin-dark #defaultModal .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(241, 94, 34, 0.22) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Custom styling for options lists in dark mode */
body.mod-skin-dark:not(.mod-skin-light) .select2-container--default .select2-results__option,
.mod-skin-dark .select2-container--default .select2-results__option {
    color: #dfe7f2 !important;
}

/* Footer layout elements */
#defaultModal .modal-footer {
    background-color: #f8f9fa !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 0.75rem 1.5rem !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .modal-footer {
    background-color: #252830 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

#defaultModal .hbl-btn-cancel {
    height: 38px !important;
    border-radius: 6px !important;
    border: 1px solid #dee2e6 !important;
    background: #ffffff !important;
    color: #4f4e50 !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    padding: 0 1.25rem !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .hbl-btn-cancel {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #dfe7f2 !important;
}

#defaultModal .hbl-btn-cancel:hover {
    background: #f1f3f5 !important;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .hbl-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

#defaultModal .hbl-btn-submit {
    height: 38px !important;
    border-radius: 6px !important;
    background: var(--brand-action) !important;
    border-color: var(--brand-action) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    padding: 0 1.25rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#defaultModal .hbl-btn-submit:hover {
    background: #d44f1e !important;
    border-color: #d44f1e !important;
}

/* Collapsible Section Chevrons */
#defaultModal .appointment-card-header[data-toggle="collapse"] {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#defaultModal .appointment-card-header .toggle-arrow {
    transition: transform 0.2s ease;
    font-size: 0.875rem;
    color: #6c757d;
    margin-left: auto;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .appointment-card-header .toggle-arrow {
    color: #a0aec0;
}

#defaultModal .appointment-card-header[aria-expanded="true"] .toggle-arrow {
    transform: rotate(180deg);
}

#defaultModal .advanced-settings-toggle {
    background: none !important;
    border: none !important;
    color: #f15e22 !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    margin: 0.5rem 0 1rem 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#defaultModal .advanced-settings-toggle i {
    transition: transform 0.2s ease;
}

#defaultModal .advanced-settings-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}

/* Edit Status actions button redesign */
#defaultModal .status-action-btn {
    border-radius: 6px !important;
    border: 1px solid #ced4da !important;
    background-color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    min-width: 130px !important;
    transition: all 0.15s ease;
}

body.mod-skin-dark:not(.mod-skin-light) #defaultModal .status-action-btn {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

#defaultModal .status-action-btn.btn-complete {
    color: #28a745 !important;
    border-color: rgba(40, 167, 69, 0.3) !important;
}

#defaultModal .status-action-btn.btn-complete:hover {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

#defaultModal .status-action-btn.btn-cancel {
    color: #dc3545 !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

#defaultModal .status-action-btn.btn-cancel:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

#defaultModal .status-action-btn.btn-no-show {
    color: #f15e22 !important;
    border-color: rgba(241, 94, 34, 0.3) !important;
}

#defaultModal .status-action-btn.btn-no-show:hover {
    background-color: #f15e22 !important;
    color: #ffffff !important;
}

#defaultModal .current-status-badge {
    border-radius: 6px !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
}

#defaultModal .current-status-badge i {
    margin-right: 0.5rem;
}

#defaultModal .current-status-badge.status-scheduled {
    background-color: rgba(0, 123, 255, 0.08) !important;
    border-color: rgba(0, 123, 255, 0.15) !important;
    color: #007bff !important;
}

#defaultModal .current-status-badge.status-completed {
    background-color: rgba(40, 167, 69, 0.08) !important;
    border-color: rgba(40, 167, 69, 0.15) !important;
    color: #28a745 !important;
}

#defaultModal .current-status-badge.status-cancelled {
    background-color: rgba(220, 53, 69, 0.08) !important;
    border-color: rgba(220, 53, 69, 0.15) !important;
    color: #dc3545 !important;
}

#defaultModal .current-status-badge.status-no-show {
    background-color: rgba(241, 94, 34, 0.08) !important;
    border-color: rgba(241, 94, 34, 0.15) !important;
    color: #f15e22 !important;
}

/* Dark mode content links — orange link color removed; exclude pagination */
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):not(.navbar-brand):not(.card-title):not([class*=fc-]):not([class*=text-]):not(.btn-search-close),
.mod-skin-dark:not(.mod-skin-light) .modal-body a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):not(.navbar-brand):not(.card-title) {
    /* color: #ed5d21 !important; */
}

/* Pagination active page */
.mod-skin-dark:not(.mod-skin-light) .page-item.active .page-link,
.mod-skin-dark:not(.mod-skin-light) .page-content-wrapper .pagination .page-item.active>.page-link {
    z-index: 3;
    color: var(--pagination-active-text) !important;
    background-color: var(--pagination-active-bg) !important;
    border-color: var(--pagination-active-bg) !important;

}

.pagination .page-item.previous .page-link,
.pagination .page-item.next .page-link,
.page-content-wrapper .pagination .page-item.previous .page-link,
.page-content-wrapper .pagination .page-item.next .page-link,
.dataTables_paginate .page-item.previous .page-link,
.dataTables_paginate .page-item.next .page-link,
.dataTables_paginate > span.paginate_button,
.dataTables_paginate > a.paginate_button {
    background-color: var(--pagination-nav-bg) !important;
    border-color: var(--pagination-nav-bg) !important;
    color: var(--pagination-active-text) !important;
    -webkit-text-fill-color: var(--pagination-active-text) !important;
}

.pagination .page-item:not(.active):not(.previous):not(.next) .page-link,
.page-content-wrapper .pagination .page-item:not(.active):not(.previous):not(.next) .page-link,
.dataTables_paginate .page-item:not(.active):not(.previous):not(.next) .page-link {
    background-color: transparent !important;
    border-color: transparent !important;
}

.pagination .page-item.active .page-link,
.page-content-wrapper .pagination .page-item.active > .page-link,
.dataTables_paginate .pagination .page-item.active .page-link,
.dataTables_paginate .page-item.active .page-link,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background-color: var(--pagination-active-bg) !important;
    background: var(--pagination-active-bg) !important;
    border-color: var(--pagination-active-bg) !important;
    color: var(--pagination-active-text) !important;
    -webkit-text-fill-color: var(--pagination-active-text) !important;
}

/* Disabled filter buttons should show a blocked cursor instead of the pointer cursor. */
#applyProposalFilters:disabled,
#clearProposalFilters:disabled,
#applyInvoiceFilters:disabled,
#clearInvoiceFilters:disabled,
#applyLogFilters:disabled,
#clearLogFilters:disabled,
#applySyslogFilters:disabled,
#clearSyslogFilters:disabled,
#apply-filters:disabled,
#clear-filters:disabled,
.hbl-clear-filter-btn:disabled {
    cursor: not-allowed !important;
    pointer-events: auto;
}

/* ── Browser autofill dark mode override ─────────────────────────────
   background-color !important is ignored by browsers for autofilled
   inputs; the inset box-shadow trick is the only reliable method. */
.mod-skin-dark:not(.mod-skin-light) input:-webkit-autofill,
.mod-skin-dark:not(.mod-skin-light) input:-webkit-autofill:hover,
.mod-skin-dark:not(.mod-skin-light) input:-webkit-autofill:focus,
.mod-skin-dark:not(.mod-skin-light) input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #252830 inset !important;
    -webkit-text-fill-color: #dfe7f2 !important;
    caret-color: #dfe7f2;
}

/* ── Page-level Select2 dark mode ─────────────────────────────────────
   Existing modal rules are scoped to #defaultModal. These rules apply
   to Select2 instances on the page canvas (e.g. company search). */
.mod-skin-dark:not(.mod-skin-light) .select2-dropdown {
    background-color: #1f2129 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.mod-skin-dark:not(.mod-skin-light) .select2-search--dropdown .select2-search__field {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #dfe7f2 !important;
}
.mod-skin-dark:not(.mod-skin-light) .select2-container--default .select2-selection--single,
.mod-skin-dark:not(.mod-skin-light) .select2-container--default .select2-selection--multiple {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
.mod-skin-dark:not(.mod-skin-light) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #dfe7f2 !important;
}
.mod-skin-dark:not(.mod-skin-light) .select2-container--default .select2-selection--single .select2-selection__placeholder,
.mod-skin-dark:not(.mod-skin-light) .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #718096 !important;
}
.mod-skin-dark:not(.mod-skin-light) .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f15e22 !important;
    color: #ffffff !important;
}
.mod-skin-dark:not(.mod-skin-light) .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(241, 94, 34, 0.22) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   PM Select2 Dropdown skin — globally available so non-PM
   pages can use  dropdownCssClass: 'pm-select2-dropdown'
   and get the same look as the project management area.
   ═══════════════════════════════════════════════════════════ */
.pm-select2-dropdown {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-size: 0.875rem;
    overflow: hidden;
}

.pm-select2-dropdown .select2-results__options { overflow-x: hidden; }

.pm-select2-dropdown .select2-results__option {
    font-size: 0.875rem;
    color: #374151;
    padding: 0.55rem 0.85rem;
    white-space: normal;
    word-break: break-word;
}

.pm-select2-dropdown .select2-results__option--highlighted:not([aria-disabled="true"]) {
    background-color: #fff3ed !important;
    color: #c44a0e !important;
}

.pm-select2-dropdown .select2-results__option[aria-selected="true"] {
    background-color: #ffe8d6 !important;
    color: #c44a0e !important;
    font-weight: 600;
}

.pm-select2-dropdown .select2-results__option--highlighted[aria-selected="true"] {
    background-color: #ffd5b8 !important;
    color: #c44a0e !important;
}

/* Dark mode */
.mod-skin-dark .pm-select2-dropdown {
    background-color: #2a2d35 !important;
    border-color: #3f4550 !important;
    color: #e2e8f0 !important;
}

.mod-skin-dark .pm-select2-dropdown .select2-search--dropdown .select2-search__field {
    background-color: #1f2129 !important;
    border-color: #3f4550 !important;
    color: #e2e8f0 !important;
}

.mod-skin-dark .pm-select2-dropdown .select2-results__option { color: #e2e8f0 !important; }

.mod-skin-dark .pm-select2-dropdown .select2-results__option--highlighted:not([aria-disabled="true"]) {
    background-color: #2e3a4a !important;
    color: #dfe7f2 !important;
}

.mod-skin-dark .pm-select2-dropdown .select2-results__option[aria-selected="true"] {
    background-color: #1a3a5c !important;
    color: #b8d4f5 !important;
    font-weight: 600;
}

.mod-skin-dark .pm-select2-dropdown .select2-results__option--highlighted[aria-selected="true"] {
    background-color: #1e4a70 !important;
    color: #e2e8f0 !important;
}

/* Image Dropzone Dark Mode Overrides */
body.mod-skin-dark:not(.mod-skin-light) #ImageDropzone {
    background-color: #1f2129 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.mod-skin-dark:not(.mod-skin-light) #ImageDropzone .dz-message {
    color: #a0aec0 !important;
}