/**
 * Power Buyer dark theme
 * Applied when html[data-theme="dark"] is set (header toggle + user preference).
 */

/* ===================================
   Design tokens
=================================== */
html[data-theme="dark"] {
    --PB-surface: #1A1D24;
    --PB-surface-elevated: #22262F;
    --color-white: #FFFFFF;
    --PB-bg-color: #111318;
    --PB-bg-light: #0D0F12;
    --color-dark: #F3F4F6;
    --border-color: #2A2F3A;
    --text-color: #9CA3AF;
    --text-color-secondary: #D1D5DB;
    --muted-color: #6B7280;
    --title-color: #F9FAFB;
    --PB_hover-bg: #1E293B;
    --PB_box-shadow: 0 8px 10px -6px #00000066;
    --btn-light-hover-bg: #2A2F3A;
    --button-dark: #E5E7EB;
    --PB_primary-gradient: linear-gradient(180deg, #1B2438 0%, #24304A 45%, #161D2E 100%);
    --PB-sidebar-link: rgba(255, 255, 255, 0.78);
    --PB-sidebar-link-muted: rgba(255, 255, 255, 0.5);
    --PB-sidebar-hover-bg: rgba(255, 255, 255, 0.12);
    --PB-sidebar-active-bg: rgba(255, 255, 255, 0.18);
    --PB-sidebar-panel-bg: rgba(255, 255, 255, 0.06);
    --PB-sidebar-border: rgba(255, 255, 255, 0.1);
    scrollbar-color: #4B5563 #1A1D24;
    color-scheme: dark;
}

/* ===================================
   Theme toggle icons
=================================== */
html[data-theme="dark"] .PB__header-theme .PB__theme-icon--moon {
    display: none !important;
}

html[data-theme="dark"] .PB__header-theme .PB__theme-icon--sun {
    display: inline-block !important;
}

html[data-theme="light"] .PB__header-theme .PB__theme-icon--sun {
    display: none !important;
}

html[data-theme="light"] .PB__header-theme .PB__theme-icon--moon {
    display: inline-block !important;
}

/* ===================================
   App chrome
=================================== */
html[data-theme="dark"] body,
html[data-theme="dark"] .PB__db-wrapper {
    background-color: var(--PB-bg-light);
    color: var(--text-color-secondary);
}

html[data-theme="dark"] .PB__header {
    background-color: var(--PB-surface);
    color: var(--title-color);
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .PB__header .PB__header-action-btn {
    color: var(--text-color-secondary);
}

html[data-theme="dark"] .PB__header-theme .PB__theme-icon {
    color: var(--text-color-secondary);
}

html[data-theme="dark"] .PB__header .PB__header-action-btn:hover,
html[data-theme="dark"] .PB__header-action-btn.active {
    background-color: var(--PB-bg-color) !important;
}

html[data-theme="dark"] .PB__header-search .PB__header-search-input {
    background-color: var(--PB-bg-color);
    border-color: var(--border-color);
    color: var(--title-color);
}

/* Header create button + GDD dropdowns */
html[data-theme="dark"] .PB__header .PB__header-create-btn {
    color: var(--text-color-secondary) !important;
    background: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .PB__header .PB__header-create-btn svg path {
    stroke: var(--text-color-secondary);
}

html[data-theme="dark"] .PB__header .PB__header-create-btn:hover,
html[data-theme="dark"] .PB__header .PB__header-create-btn.active {
    background: var(--PB_hover-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}

html[data-theme="dark"] .PB__header .PB__header-create-btn:hover svg path,
html[data-theme="dark"] .PB__header .PB__header-create-btn.active svg path {
    stroke: var(--title-color);
}

html[data-theme="dark"] .PB__gdd-dropdown .PB__gdd-card {
    background: var(--PB-surface-elevated);
    border-color: var(--border-color);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .PB__gdd-dropdown a {
    color: var(--title-color);
}

html[data-theme="dark"] .PB__gdd-dropdown a:hover {
    background: var(--PB_hover-bg);
}

html[data-theme="dark"] .PB__gdd-dropdown .delete {
    color: var(--color-danger);
    background-color: transparent;
}

html[data-theme="dark"] .PB__gdd-dropdown .delete:hover {
    background-color: var(--color-danger-extra-light);
}

html[data-theme="dark"] .PB__gdd-dropdown .PB__gdd-card.PB__gdd-card--user {
    background: var(--PB-surface-elevated);
    border-color: var(--border-color);
}

html[data-theme="dark"] .PB__gdd-card--user .PB__gdd-user-head {
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] html body .custom-checkbox .checkmark,
html[data-theme="dark"] body .custom-checkbox .checkmark {
    background: var(--PB-surface);
    border-color: var(--border-color);
}

html[data-theme="dark"] .PB__gdd-card--user .PB__gdd-user-meta h4 {
    color: var(--title-color);
}

html[data-theme="dark"] .PB__gdd-card--user .PB__gdd-user-meta span,
html[data-theme="dark"] .PB__gdd-card--user a {
    color: var(--text-color);
}

/* ===================================
   Notifications dropdown
=================================== */
html[data-theme="dark"] .notifications__dropdown {
    background-color: var(--PB-surface-elevated);
    border-color: var(--border-color);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .notifications__dropdown .notifications__dropdown-head,
html[data-theme="dark"] .notifications__dropdown .notifications__tabs,
html[data-theme="dark"] .notifications__dropdown .notifications__dropdown-footer {
    border-color: var(--border-color);
}

html[data-theme="dark"] .notifications__dropdown h4 {
    color: var(--title-color);
}

html[data-theme="dark"] .notifications__dropdown .notifications__dropdown-close {
    color: var(--text-color);
}

html[data-theme="dark"] .notifications__dropdown-close:hover {
    background-color: var(--PB-bg-color) !important;
    color: var(--title-color);
}

html[data-theme="dark"] .notifications__tabs-btn {
    color: var(--text-color);
}

html[data-theme="dark"] .notifications__dropdown .notifications__tabs-btn:hover,
html[data-theme="dark"] .notifications__dropdown .notifications__tabs-btn.active {
    background-color: rgba(125, 145, 190, 0.35);
    color: var(--color-white);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list a {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list a:before {
    background-color: var(--border-color);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list a.unread {
    background-color: rgba(173, 70, 255, 0.12);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list a:hover {
    background-color: var(--PB_hover-bg);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list a.unread:before {
    background-color: #C084FC;
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list a.unread p {
    color: var(--title-color);
}

html[data-theme="dark"] .notifications__dropdown .notification__tag {
    color: #C084FC;
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list .notification__source-badge {
    color: #FFB070;
    background-color: rgba(230, 92, 0, 0.18);
    border-color: rgba(255, 167, 77, 0.45);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list .rc-alert-card__title {
    color: var(--title-color);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list .rc-alert-card__from {
    color: #FFB070;
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list .rc-alert-card__related {
    color: var(--text-color);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list .rc-alert-card__lead-link {
    color: #A5B4FC;
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list .rc-alert-card__time {
    color: var(--muted-color);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list li.notifications__list-item {
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list .notifications__dismiss {
    border-left-color: var(--border-color);
    color: var(--text-color);
}

html[data-theme="dark"] .notifications__tabs-content .notifications__list .notifications__dismiss:hover {
    background: var(--PB_hover-bg);
    color: var(--title-color);
}

html[data-theme="dark"] .sms-group-card__chevron,
html[data-theme="dark"] .alert-quick-panel__chevron {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(165, 180, 252, 0.45);
    color: #C7D2FE;
}

html[data-theme="dark"] .alert-quick-panel {
    background: rgba(15, 23, 42, 0.35);
    border-top-color: var(--border-color);
}

html[data-theme="dark"] .alert-quick-panel__bubble.is-inbound {
    background: rgba(30, 41, 59, 0.8);
    border-color: var(--border-color);
    color: var(--title-color);
}

html[data-theme="dark"] .alert-quick-panel__bubble.is-outbound {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(165, 180, 252, 0.4);
    color: var(--title-color);
}

html[data-theme="dark"] .alert-quick-panel__input {
    background: var(--color-white);
    border-color: var(--border-color);
    color: var(--title-color);
}

html[data-theme="dark"] .alert-quick-panel__empty,
html[data-theme="dark"] .alert-quick-panel__hint,
html[data-theme="dark"] .alert-quick-panel__bubble-time {
    color: var(--muted-color);
}

html[data-theme="dark"] .notifications__dropdown-footer .btn {
    color: var(--title-color);
}

/* RingCentral email banner + email detail */
html[data-theme="dark"] .rc-banner {
    background: linear-gradient(135deg, var(--PB-surface) 0%, #2A2118 100%);
    border-color: rgba(255, 122, 0, 0.35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .rc-banner__logo-ring {
    color: #93C5FD;
}

html[data-theme="dark"] .rc-banner__pill {
    color: #7DD3FC;
    background: rgba(0, 115, 174, 0.22);
    border-color: rgba(125, 211, 252, 0.35);
}

html[data-theme="dark"] .rc-banner__line {
    color: var(--title-color);
}

html[data-theme="dark"] .rc-banner__label {
    color: var(--muted-color);
}

html[data-theme="dark"] .rc-banner__vehicle {
    color: var(--text-color);
}

html[data-theme="dark"] .email-detail-toolbar input.btn-secondary {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color-secondary) !important;
}

html[data-theme="dark"] .email-detail-toolbar input.btn-secondary:hover {
    background-color: var(--PB_hover-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .detail.view.email-detail-view {
    background-color: var(--PB-surface);
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ===================================
   Action dropdown (DetailView / cards)
=================================== */
html[data-theme="dark"] .action-main,
html[data-theme="dark"] .action-toggle {
    background: #3B6EF5;
    color: #fff;
}

html[data-theme="dark"] .action-toggle {
    border-left-color: rgba(255, 255, 255, 0.25);
}

html[data-theme="dark"] .action-dropdown .btn+.btn {
    border-left-color: rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="dark"] .action-menu {
    background: var(--PB-surface-elevated);
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .action-menu li a {
    color: var(--title-color);
}

html[data-theme="dark"] .action-menu li a:hover {
    background: var(--PB_hover-bg);
    color: var(--title-color);
}

html[data-theme="dark"] .action-menu .active {
    background: var(--PB_hover-bg) !important;
    color: #93B4FF !important;
}

html[data-theme="dark"] .action-delete-item:hover {
    background-color: rgba(231, 0, 11, 0.18) !important;
    color: #FF6B73 !important;
}

/* ===================================
   Detail sticky header / nav tabs
=================================== */
html[data-theme="dark"] .opportunities-sticky-header {
    background-color: var(--PB-surface);
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] body .upsheets_detail_view {
    background-color: var(--PB-surface);
    border-color: var(--border-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] table.list.report-team thead th,
html[data-theme="dark"] table.list.report-team thead th a {
    color: var(--title-color) !important;
}

html[data-theme="dark"] .detail_nav {
    background: rgba(42, 47, 58, 0.85);
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .detail_nav>li>a {
    color: var(--text-color-secondary) !important;
}

html[data-theme="dark"] .detail_nav>li>a path {
    fill: var(--text-color-secondary);
}

html[data-theme="dark"] .detail_nav>li.active>a,
html[data-theme="dark"] .detail_nav>li>a:hover {
    background: var(--PB-surface-elevated) !important;
    color: #93B4FF !important;
}

html[data-theme="dark"] .detail_nav>li.active>a path,
html[data-theme="dark"] .detail_nav>li>a:hover path {
    fill: #93B4FF;
}

html[data-theme="dark"] .detail-view-tab-header {
    background: var(--PB_hover-bg);
}

html[data-theme="dark"] .tab-header-title {
    color: var(--title-color);
}

html[data-theme="dark"] .overview-cards .status-highlight-card,
html[data-theme="dark"] .overview-cards .status-detail-highlight-card {
    border-color: rgba(74, 110, 183, 0.45);
    border-left-color: #6B8FD4;
    background: linear-gradient(180deg, #1A2333 0%, #151C2A 100%);
    box-shadow: inset 0 0 0 1px rgba(74, 110, 183, 0.25);
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .ovreview__inner-box-content.with__bg {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .PB__header .PB__header-action-btn {
    background-color: var(--PB-surface-elevated) !important;
}

 html[data-theme="dark"] .overview-cards .detail-info-group {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
 }
 html[data-theme="dark"] .overview-cards .seller-info-edit .detail-view-value {
    color: var(--text-color-secondary) !important;
 }
 /* html[data-theme="dark"] .overview-cards .seller-info-edit .detail-view-label {
    color: var(--text-color-secondary) !important;
 } */

 html[data-theme="dark"] #subpanel_list .noBullet {
    background-color: var(--PB-surface-elevated) !important;
 }
 html[data-theme="dark"] .bidsTab .titleBar {
    background-color: var(--PB-surface-elevated) !important;
    color: var(--text-color-secondary) !important;
 }
 html[data-theme="dark"] .bidsTab .titleBar .title {
    color: var(--text-color-secondary) !important;
 }
 html[data-theme="dark"] .bidsTab .titleBar .titleBar__right {
    color: var(--text-color-secondary) !important;
 }

 html[data-theme="dark"] .list thead,
 html[data-theme="dark"] .list .pagination,
 html[data-theme="dark"] .list .pagination tr{
    background-color: transparent !important;
 }
 
/* ===================================
   Sidebar
=================================== */
html[data-theme="dark"] .PB__sidebar {
    background: var(--PB_primary-gradient);
    color: var(--color-white);
    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.06) !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .PB__sidebar::-webkit-scrollbar-track,
html[data-theme="dark"] .PB__sidebar .sidebar__recent-list::-webkit-scrollbar-track,
html[data-theme="dark"] .PB__sidebar .PB__sidebar-flyout__content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .PB__sidebar::-webkit-scrollbar-thumb,
html[data-theme="dark"] .PB__sidebar .sidebar__recent-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] .PB__sidebar .PB__sidebar-flyout__content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.35) !important;
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-logo a {
    color: var(--color-white) !important;
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-logo svg path,
html[data-theme="dark"] .PB__sidebar .PB__sidebar-toggle svg path,
html[data-theme="dark"] .PB__sidebar .PB__sidebar-mobile-close svg path {
    stroke: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-logo svg path[fill="white"],
html[data-theme="dark"] .PB__sidebar .PB__sidebar-logo svg circle[fill="white"] {
    fill: rgba(255, 255, 255, 0.95);
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-link {
    color: var(--PB-sidebar-link) !important;
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-link i {
    color: inherit;
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-link:hover,
html[data-theme="dark"] .PB__sidebar .PB__sidebar-link.active,
html[data-theme="dark"] .PB__sidebar .PB__sidebar-item--active>.PB__sidebar-link {
    background: var(--PB-sidebar-active-bg);
    color: var(--color-white) !important;
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-nav .PB__sidebar-chevron {
    color: var(--PB-sidebar-link-muted);
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-submenu-link {
    color: var(--PB-sidebar-link) !important;
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-submenu-link:hover,
html[data-theme="dark"] .PB__sidebar .PB__sidebar-submenu-link.active {
    background: var(--PB-sidebar-hover-bg);
    color: var(--color-white) !important;
}

/* Flyout (collapsed sidebar hover) */
html[data-theme="dark"] .PB__sidebar .PB__sidebar-flyout__content {
    background: var(--PB_primary-gradient);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    border: 1px solid var(--PB-sidebar-border);
    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-flyout__content::before {
    border-right-color: #1B2438;
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-flyout__title {
    color: var(--color-white);
    border-bottom-color: var(--PB-sidebar-border);
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-flyout__list li a {
    color: var(--color-white) !important;
}

html[data-theme="dark"] .PB__sidebar .PB__sidebar-flyout__list li a:hover {
    background: var(--PB-sidebar-hover-bg);
    color: var(--color-white) !important;
}

/* Favorites / recent */
html[data-theme="dark"] .PB__sidebar .sidebar__recent-head,
html[data-theme="dark"] .PB__sidebar .sidebar__status-head {
    color: var(--PB-sidebar-link-muted) !important;
}

html[data-theme="dark"] .PB__sidebar .sidebar__recent-list,
html[data-theme="dark"] .PB__sidebar .sidebar__status-list {
    background: var(--PB-sidebar-panel-bg);
    border-color: var(--PB-sidebar-border);
}

html[data-theme="dark"] .PB__sidebar .sidebar__recent-list li a {
    color: var(--PB-sidebar-link) !important;
}

html[data-theme="dark"] .PB__sidebar .sidebar__recent-list a:hover {
    background: var(--PB-sidebar-hover-bg);
    color: var(--color-white) !important;
}

html[data-theme="dark"] .favorites-view-all-link {
    color: var(--PB-sidebar-link-muted) !important;
}

html[data-theme="dark"] .favorites-view-all-link:hover,
html[data-theme="dark"] .favorites-view-all-link:visited {
    color: var(--color-white) !important;
}

/* Service status row */
html[data-theme="dark"] .PB__sidebar .PB__sb-status {
    color: var(--PB-sidebar-link) !important;
}

html[data-theme="dark"] .PB__sidebar .PB__sb-status:hover {
    background: var(--PB-sidebar-hover-bg);
    color: var(--color-white) !important;
}

html[data-theme="dark"] .PB__sidebar .PB__sb-status-icon {
    color: var(--PB-sidebar-link);
}

html[data-theme="dark"] .PB__sidebar.inactive .sidebar__status-box {
    border-top-color: var(--PB-sidebar-border);
}

html[data-theme="dark"] .PB__sidebar.inactive .PB__sb-status-dot {
    box-shadow: 0 0 0 2px #1B2438;
}

html[data-theme="dark"] .PB__sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.72);
}

/* ===================================
   Suite list / detail / edit shells
=================================== */
html[data-theme="dark"] .listViewBody,
html[data-theme="dark"] .list.view,
html[data-theme="dark"] .listViewEmpty,
html[data-theme="dark"] .detail-view,
html[data-theme="dark"] .edit-view,
html[data-theme="dark"] #content,
html[data-theme="dark"] #pagecontent,
html[data-theme="dark"] .bootstrap-container,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] table.list.view,
html[data-theme="dark"] .listViewTable {
    background-color: var(--PB-surface) !important;
    color: var(--text-color-secondary);
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-heading h4,
html[data-theme="dark"] .panel-heading a,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] .moduleTitle h2,
html[data-theme="dark"] .moduleTitle h2 a {
    color: var(--title-color) !important;
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea,
html[data-theme="dark"] textarea.form-control {
    background-color: var(--PB-bg-color) !important;
    color: var(--title-color) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] table.list.view th,
html[data-theme="dark"] table.list.view td,
html[data-theme="dark"] .list tr td,
html[data-theme="dark"] .list tr th {
    background-color: transparent !important;
    color: var(--text-color-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] table.list.view tr:hover td,
html[data-theme="dark"] .list tr:hover td {
    background-color: var(--PB_hover-bg) !important;
}

html[data-theme="dark"] a:not(.btn):not(.button):not(.PB__sidebar-link):not(.PB__sidebar-submenu-link) {
    color: #7EB6FF;
}

html[data-theme="dark"] .btn-default,
html[data-theme="dark"] button.button,
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="submit"].button {
    background-color: var(--PB-bg-color);
    color: var(--title-color);
    border-color: var(--border-color);
}

/* ===================================
   Legacy Suite screens
=================================== */
html[data-theme="dark"] .yui-layout-bd,
html[data-theme="dark"] .yui-layout-unit-top .yui-layout-bd,
html[data-theme="dark"] .yui-navset .yui-content,
html[data-theme="dark"] .bd {
    background-color: var(--PB-surface) !important;
    color: var(--text-color-secondary);
}

html[data-theme="dark"] .detail-view-row,
html[data-theme="dark"] .detail-view-row-item,
html[data-theme="dark"] .edit-view-row,
html[data-theme="dark"] .edit-view-row-item,
html[data-theme="dark"] .label,
html[data-theme="dark"] td.label,
html[data-theme="dark"] .detail-view-field,
html[data-theme="dark"] .edit-view-field {
    color: var(--text-color-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .subpanel-table,
html[data-theme="dark"] .subpanel-table th,
html[data-theme="dark"] .subpanel-table td,
html[data-theme="dark"] .listViewThLinkS1,
html[data-theme="dark"] .listViewTdLinkS1 {
    background-color: transparent !important;
    color: var(--text-color-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .pagination button.button,
html[data-theme="dark"] #dt-pag-nav {
    background-color: var(--PB-surface) !important;
    color: var(--title-color) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-body {
    background-color: var(--PB-surface) !important;
    color: var(--text-color-secondary);
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert-danger {
    color: var(--title-color) !important;
}
html[data-theme="dark"] .alert-success{
    color: #000000 !important;
}

html[data-theme="dark"] table.scoreboad thead th,
html[data-theme="dark"] table.scoreboad tbody td {
    background-color: var(--PB-surface) !important;
    color: var(--text-color-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] table.scoreboad tbody tr:hover>td {
    background: var(--PB_hover-bg) !important;
}

html[data-theme="dark"] table.scoreboad tbody tr#totals>td {
    background: var(--PB-bg-color) !important;
}

html[data-theme="dark"] .PB__card {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .functional__table {
    background-color: var(--PB-surface-elevated) !important;
}

html[data-theme="dark"] .functional__table .functional__table-head {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .functional__table table td {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .functional__table table th {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}


html[data-theme="dark"] .functional__table .sugar_action_button,
html[data-theme="dark"] .functional__table button {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .functional__table-pagination button svg path {
    stroke: var(--title-color) !important;
}

html[data-theme="dark"] .functional__table .listview-col-resize-handle {
    background-color: #404247 !important;
}

html[data-theme="dark"] ul.chooserList.blue.ui-sortable>li {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}




html[data-theme="dark"] .action-link-top .sugar_action_button .subnav.ddopen li,
html[data-theme="dark"] .functional__table #actionLinkTop .sugar_action_button .subnav li,
html[data-theme="dark"] .functional__table #actionLinkTop .sugar_action_button .subnav li a,
html[data-theme="dark"] .action-link-top>.sugar_action_button>.subnav a {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}




ul.clickMenu>li>span{
    color: var(--title-color) !important;
}

/* Home Page CSS */

html[data-theme="dark"] .pb-dashboard-card {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}



html[data-theme="dark"] .btn.btn-outline-light {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}

html[data-theme="dark"] .btn.btn-outline-light:hover {
    background-color: rgba(255,255,255,0.05) !important; /* subtle light background on hover */
    border-color: var(--title-color) !important; /* make border pop a bit more */
    color: var(--title-color) !important;
}

html[data-theme="dark"] .leads-sticky-header {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .dashlet-header {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}


html[data-theme="dark"] .dashletPanel thead,
html[data-theme="dark"] .dashletPanel thead th,
html[data-theme="dark"] .dashletPanel tbody tr {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}

html[data-theme="dark"] .dashletPanel .table-striped>tbody>tr:nth-of-type(odd)
{
    background-color: #686868ab !important;
    border-color: #686868ab !important;
    color: #000000 !important;
}
html[data-theme="dark"] .dashletPanel .table-striped>tbody>tr:nth-of-type(even) td{
    background-color: transparent !important;
}

/* Detail View CSS */

html[data-theme="dark"] .status-highlight-card,
html[data-theme="dark"] .status-detail-highlight-card {

}

html[data-theme="dark"] .GMTV__upload-card {
    background-color: var(--PB-surface-elevated) !important;
}

html[data-theme="dark"] .GMTV__upload-card .GMTV__upload-mask {
    background: rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .pb-ms-toggle {
    background: var(--PB-surface-elevated, #1f2937) !important;
    color: var(--title-color, #f8fafc) !important;
    border-color: var(--border-color, #374151) !important;
}

html[data-theme="dark"] .pb-ms-menu {
    background: var(--PB-surface-elevated, #1f2937);
    border-color: var(--border-color, #374151);
}

html[data-theme="dark"] .pb-ms-option {
    color: var(--title-color, #f8fafc);
}

html[data-theme="dark"] .pb-ms-option:hover:not(.is-selected) {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .detail-view-row .detail-view-row-item .detail-value,
html[data-theme="dark"] .detail-view-row .detail-view-row-item .detail-view-value,
html[data-theme="dark"] .edit-view-row .edit-view-row-item .edit-value,
html[data-theme="dark"] .edit-view-row .edit-view-row-item .edit-view-value,
html[data-theme="dark"] .edit-view-row .detail-view-row-item .detail-value,
    html[data-theme="dark"] .edit-view-row .detail-view-row-item .detail-view-value {
    color: var(--title-color) !important;
    /* Use a slightly larger font-weight for values for stronger distinction */
    font-weight: 500;
}

html[data-theme="dark"] .detail-view-row .detail-view-row-item .detail-label,
html[data-theme="dark"] .edit-view-row .edit-view-row-item .edit-label {
    color: var(--text-color-secondary) !important;
    /* Use a lighter font-weight and color for labels */
    font-weight: 400;
    opacity: 0.85;
}

html[data-theme="dark"] .right_side .vhr-card {
    background-color: var(--PB-surface-elevated) !important;
}
html[data-theme="dark"] .right_side .pricing__card {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .right_side .vhr-card .mileage-span {
    color: black !important;
}


/* Upsheets Edit View CSS */

html[data-theme="dark"] .leads_editview {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] body .k-input,
html[data-theme="dark"] body #EditView_tabs select,
html[data-theme="dark"] body #EditView_tabs textarea,
html[data-theme="dark"] body #EditView_tabs input:not([type="checkbox"]):not([type="radio"]):not([type="button"]) {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}

html[data-theme="dark"] .email-address-widget-wrap .email-address-row {
    background-color: var(--PB-surface-elevated) !important;
}
html[data-theme="dark"] body .k-button.k-icon-button {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}

html[data-theme="dark"] body .k-button.k-icon-button:hover {
    background-color: rgba(255,255,255,0.05) !important;
    border-color: var(--title-color) !important;
    color: var(--title-color) !important;
}


html[data-theme="dark"] .edit-view-row-item table:not(.mceToolbar) {
    background-color: var(--PB-surface-elevated) !important;
}



/* Upsheets Advance Filters CSS */

html[data-theme="dark"] body .filters_tabs.filters_tabs--stacked>.filters__modal-box:nth-child(odd) {
    background-color: var(--PB-surface-elevated) !important;
}

html[data-theme="dark"] body .filters_tabs.filters_tabs--stacked>.filters__modal-box:nth-child(even) {
    background-color: var(--PB-surface-elevated) !important;
}

html[data-theme="dark"] body .filters_tabs.filters_tabs--stacked>.filters__modal-box:nth-child(odd) .filters__modal-box-head {
    background-color: var(--PB-surface-elevated) !important;
}

html[data-theme="dark"] body .filters_tabs.filters_tabs--stacked>.filters__modal-box {
    border-top: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] body .filters_tabs.filters_tabs--stacked .form-check.form-switch .slider {
    background-color: var(--PB-surface-elevated) !important;
}

html[data-theme="dark"] .advanced__filters-modal .date-range-container-wrapper .btn {
    background-color: var(--PB-surface-elevated) !important;
    /* border-color: var(--border-color) !important; */
    color: var(--title-color) !important;
}

html[data-theme="dark"] .nav-tabs>li.active>a {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}
html[data-theme="dark"] .nav-tabs>li>a:hover {
    background-color: rgba(255,255,255,0.05) !important;
    border-color: var(--title-color) !important;
    color: var(--title-color) !important;
}




/* Calendar Page CSS */

html[data-theme="dark"] .fc-bg table>tbody>tr .fc-today {
    background-color: #253684 !important; /* A deep, but vibrant blue to highlight today in dark mode */
    color: #fff !important;
}

html[data-theme="dark"] #scheduler .schedulerDiv {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}


html[data-theme="dark"] #scheduler .schedulerDiv table tr.schedulerAttendeeRow td {
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}

html[data-theme="dark"] #create-invitees,
html[data-theme="dark"] .schedulerInvitees,
html[data-theme="dark"] .schedulerInvitees table,
html[data-theme="dark"] table.edit.view {
    background-color: var(--PB-surface-elevated) !important;
    /* border-color: var(--border-color) !important;
    color: var(--title-color) !important; */
}

html[data-theme="dark"] table.table.table-bordered>thead>tr>th {
    background-color: var(--PB-surface-elevated) !important;
}

html[data-theme="dark"] table.table.table-bordered>thead>tr>th {
    border: 1px solid #dddddd !important;
}

html[data-theme="dark"] .PB__login-form{
    background-color: var(--PB-surface-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--title-color) !important;
}

/* ===================================
   List view mobile cards
=================================== */
html[data-theme="dark"] .list__view-mobile-card {
    background: var(--PB-surface-elevated);
    border-color: var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    color: var(--text-color-secondary);
}

html[data-theme="dark"] .list__view-mobile-badge {
    background: var(--PB_color-primary, #3B7CFF);
    color: #fff;
}

html[data-theme="dark"] .list__view-mobile-photo-label {
    color: var(--text-color);
}

html[data-theme="dark"] .list__view-mobile-label {
    color: var(--muted-color, #9CA3AF);
}

html[data-theme="dark"] .list__view-mobile-name-link,
html[data-theme="dark"] .list__view-mobile-value-link,
html[data-theme="dark"] .list__view-mobile-action {
    color: #7EB6FF;
}

html[data-theme="dark"] .list__view-mobile-name-link:hover,
html[data-theme="dark"] .list__view-mobile-value-link:hover,
html[data-theme="dark"] .list__view-mobile-action:hover {
    color: #93C5FD;
}

html[data-theme="dark"] .list__view-mobile-name-value,
html[data-theme="dark"] .list__view-mobile-value,
html[data-theme="dark"] .list__view-mobile-fourcol-item .list__view-mobile-value {
    color: var(--title-color);
}

html[data-theme="dark"] .list__view-mobile-dates-item .list__view-mobile-value {
    color: var(--text-color);
}

html[data-theme="dark"] .list__view-mobile-empty {
    color: var(--text-color);
}

html[data-theme="dark"] .list__view-mobile-card__actions {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 4px;
}


html[data-theme="dark"] table.view,
html[data-theme="dark"] table.view td {
    background-color: var(--PB-surface-elevated) !important;
    background: var(--PB-surface-elevated) !important;
    color: var(--title-color) !important;
}

html[data-theme="dark"] #table_actions_upsheets {
    background-color: var(--PB-surface-elevated) !important;
}