/* =======================================================================
   Dark theme overrides for PreClinic (scope: html.dark)
   ======================================================================= */

html.dark {
  --dark-body: #0f1218;
  --dark-surface-1: #161b23;
  --dark-surface-2: #1a202a;
  --dark-surface-3: #1f2532;
  --dark-surface-4: #252c3a;
  --dark-overlay: rgba(12, 15, 22, 0.82);
  --dark-border: #2d3441;
  --dark-border-soft: #353d4b;
  --dark-border-strong: #404757;
  --dark-shadow-soft: 0 12px 26px rgba(0, 0, 0, 0.38);
  --dark-shadow-strong: 0 18px 36px rgba(0, 0, 0, 0.48);
  --dark-text: #e3e9f3;
  --dark-text-soft: #d7deea;
  --dark-text-muted: #b4becf;
  --dark-link: #63b6ff;
  --dark-link-hover: #ff886f;
}

/* -----------------------------------------------------------------------
   1. Base document and typography
   ----------------------------------------------------------------------- */
html.dark body {
  background: var(--dark-body);
  color: var(--dark-text);
  text-rendering: optimizeLegibility;
}

html.dark body,
html.dark .page-wrapper {
  background: var(--dark-body);
}

html.dark ::selection {
  background: rgba(99, 182, 255, 0.32);
  color: #ffffff;
}

html.dark a,
html.dark .table a,
html.dark .card-title > a {
  color: var(--dark-link);
}

html.dark a:hover,
html.dark .table a:hover,
html.dark .card-title > a:hover {
  color: var(--dark-link-hover);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .page-title,
html.dark .page-sub-title,
html.dark .card-title,
html.dark .table h5,
html.dark .table h5 + p {
  color: var(--dark-text);
}

html.dark .text-muted,
html.dark .account-subtitle,
html.dark .dash-content p,
html.dark .departments-list p,
html.dark .activity-list > li .time,
html.dark .timeline-group h4,
html.dark .timeline-body > p,
html.dark .message-time,
html.dark .blog-content p,
html.dark .blog-info,
html.dark .blog-info a,
html.dark .mailview-content p,
html.dark .mailview-inner p,
html.dark .invoice-info p,
html.dark .invoice-details h4 span,
html.dark .invoice-details-two,
html.dark .custom_check,
html.dark .remember-me .custom_check,
html.dark .note-checkit .custom_check,
html.dark .weight-checkit,
html.dark .table h5 + p {
  color: var(--dark-text-muted);
}

html.dark .text-muted-light {
  color: var(--dark-text-soft) !important;
}

html.dark .text-dark,
html.dark .text-body,
html.dark .text-body-emphasis,
html.dark .text-black,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark .text-gray-600 {
  color: var(--dark-text) !important;
}

html.dark .text-secondary,
html.dark .text-secondary-emphasis,
html.dark .text-body-secondary,
html.dark .text-body-tertiary,
html.dark .text-black-50,
html.dark .text-white-50 {
  color: var(--dark-text-soft) !important;
}

html.dark .form-text,
html.dark .form-text.text-muted {
  color: var(--dark-text-soft);
}

html.dark .form-text[style*="color:black"],
html.dark .form-text[style*="color: black"],
html.dark .form-text[style*="color:#000"],
html.dark .form-text[style*="color: #000"] {
  color: var(--dark-text) !important;
}

html.dark hr,
html.dark .table > :not(:first-child),
html.dark .border,
html.dark .border-right,
html.dark .card .card-header,
html.dark .card .card-footer,
html.dark .modal-header,
html.dark .modal-footer,
html.dark .dropdown-menu,
html.dark .list-group-item,
html.dark .invoice-total-footer,
html.dark .invoice-inner-head,
html.dark .invoice-item-one,
html.dark .wizard .nav-tabs li::after {
  border-color: var(--dark-border);
}

/* Utility backgrounds --------------------------------------------------- */
html.dark .bg-light,
html.dark .card.bg-light,
html.dark .alert.bg-light,
html.dark .list-group-item.bg-light {
  background-color: var(--dark-surface-2) !important;
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .bg-light .text-muted,
html.dark .bg-light.text-muted,
html.dark .bg-light .small,
html.dark .bg-light small {
  color: var(--dark-text-soft) !important;
}

html.dark .bg-body-tertiary,
html.dark .card.bg-body-tertiary,
html.dark .bg-white,
html.dark .card.bg-white,
html.dark .alert.bg-white,
html.dark .list-group-item.bg-white {
  background-color: var(--dark-surface-1) !important;
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .bg-body-tertiary .text-muted,
html.dark .bg-white .text-muted,
html.dark .bg-white .small,
html.dark .bg-body-tertiary .small {
  color: var(--dark-text-soft) !important;
}

html.dark .bg-secondary-subtle,
html.dark .badge.bg-secondary-subtle {
  background-color: rgba(215, 222, 234, 0.14) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border-soft) !important;
}

html.dark .badge.bg-secondary-subtle {
  box-shadow: none;
}

html.dark .badge.bg-light {
  background-color: var(--dark-surface-3) !important;
  color: var(--dark-text-soft) !important;
  border-color: var(--dark-border-soft) !important;
}

html.dark .border-light {
  border-color: var(--dark-border-soft) !important;
}
/* -----------------------------------------------------------------------
   2. Header and navigation
   ----------------------------------------------------------------------- */
html.dark .header {
  background: var(--dark-surface-2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

html.dark .header .header-left {
  background: var(--dark-surface-2);
  border-right: 1px solid var(--dark-border);
}

/* Brand marks ----------------------------------------------------------- */
html.dark .header .logo img[src$="logotipo.svg"],
html.dark .header .logo img[src$="logo-color.svg"],
html.dark .account-logo img[src$="logotipo.svg"],
html.dark .account-logo img[src$="logo-color.svg"] {
  filter: brightness(0) invert(1);
}

html.dark .page-title-box,
html.dark .page-title-box h3 {
  background: var(--dark-surface-3);
  color: var(--dark-text);
}

html.dark .user-menu,
html.dark .user-menu.nav > li > a,
html.dark .user-menu.nav > li > a i,
html.dark .user-menu.nav > li > a span,
html.dark .mobile-user-menu > a {
  color: var(--dark-text);
}

html.dark .user-menu.nav > li > a:hover,
html.dark .user-menu.nav > li > a:focus {
  background: var(--dark-surface-3);
}

html.dark .top-nav-search form,
html.dark .top-nav-search .form-control,
html.dark .top-nav-search .btn,
html.dark .top-liv-search .form-control,
html.dark .top-liv-search .btn,
html.dark .top-liv-search .btn i,
html.dark .top-nav-search .btn i {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .top-nav-search .form-control::placeholder,
html.dark .top-nav-search .form-control::-webkit-input-placeholder,
html.dark .top-liv-search .form-control::placeholder {
  color: var(--dark-text-muted);
}

html.dark .top-inbox-blk {
  background: var(--dark-surface-3);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .top-inbox-blk .dropdown-menu {
  background: var(--dark-surface-2);
  box-shadow: var(--dark-shadow-soft);
  border-color: var(--dark-border);
}

html.dark .top-inbox-blk .dropdown-menu .dropdown-item {
  color: var(--dark-text);
  border-bottom: 1px solid var(--dark-border);
}

html.dark .top-inbox-blk .dropdown-menu .dropdown-item:last-child {
  border-bottom: 0;
}

html.dark li.breadcrumb-item.invoices-breadcrumb-item > a,
html.dark .breadcrumb-item a {
  color: var(--dark-text-soft);
}
/* -----------------------------------------------------------------------
   3. Sidebar
   ----------------------------------------------------------------------- */
html.dark .sidebar {
  background: var(--dark-surface-1);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.55);
  border-right: 1px solid var(--dark-border);
}

html.dark .sidebar-menu > ul > li > a,
html.dark .sidebar-menu ul ul a,
html.dark .sidebar-menu li.menu-title a,
html.dark .menu-title,
html.dark .sidebar-menu a {
  color: var(--dark-text-soft);
}

html.dark .sidebar-menu li.active > a,
html.dark .sidebar-menu li a:hover,
html.dark .sidebar-menu li a:focus,
html.dark .sidebar-menu ul li .active,
html.dark .sidebar-menu ul .submenu .active {
  color: #ffffff;
  background: var(--dark-surface-3);
}

html.dark .sidebar-menu ul li a img,
html.dark .sidebar-menu ul .submenu .active img,
html.dark .sidebar-menu li a:hover img {
  filter: brightness(6) saturate(0);
}

html.dark .sidebar-menu .menu-title,
html.dark .sidebar-menu li.menu-title a {
  color: var(--dark-text-muted);
}

html.dark .logout-btn a {
  color: var(--dark-text);
}

html.dark .sidebar-menu .menu-arrow,
html.dark .sidebar-menu li a span.menu-side {
  color: var(--dark-text-muted);
  background: var(--dark-surface-3);
  border-radius: 8px;
}

html.dark .sidebar-menu .menu-arrow:before {
  color: var(--dark-text);
  content: '\f105';
}

html.dark .sidebar .sidebar-menu > ul > li > a span.badge {
  background: var(--color-primary);
  color: #ffffff;
}
/* -----------------------------------------------------------------------
   4. Core panels and containers
   ----------------------------------------------------------------------- */
html.dark .card,
html.dark .card .card,
html.dark .card-box,
html.dark .dash-widget,
html.dark .widget,
html.dark .profile-widget,
html.dark .doctor-list-blk,
html.dark .doctor-sub-list,
html.dark .status-staff,
html.dark .good-morning-blk,
html.dark .activity-list > li .activity-content,
html.dark .comman-activitys,
html.dark .activity-maps,
html.dark .wallet-widget,
html.dark .wallet-widget.general-health,
html.dark .treat-box,
html.dark .doctor-profile-head,
html.dark .weight-blk,
html.dark .doctor-table-blk,
html.dark .doctor-search-blk,
html.dark .status-staff .dropdown-item,
html.dark .table-inbox tbody tr,
html.dark .timeline > li > .timeline-panel,
html.dark .timeline-badge,
html.dark .cd-horizontal-timeline .events-content,
html.dark .icons-list li,
html.dark .blog,
html.dark .blog-info,
html.dark .widget,
html.dark .latest-posts li,
html.dark .post-info,
html.dark .categories li,
html.dark .tag,
html.dark .tags,
html.dark .comment-block,
html.dark .about-author,
html.dark .author-details,
html.dark .alertify .ajs-dialog,
html.dark .swal2-popup,
html.dark .swal2-toast,
html.dark .notification-box,
html.dark .list-item,
html.dark .files-icon,
html.dark .message-content {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

/* Home dashboard widgets ------------------------------------------------- */
html.dark .good-morning-blk .morning-user h2,
html.dark .good-morning-blk .morning-user p {
  color: var(--dark-text);
}

html.dark #weather-card {
  background: var(--dark-surface-1);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
  color: var(--dark-text);
}

html.dark #weather-card .card-body,
html.dark #weather-card .card-footer {
  background: transparent;
  color: var(--dark-text);
}

html.dark #weather-card #weather-temp {
  color: var(--dark-text);
  opacity: 1;
}

html.dark #weather-card #weather-title,
html.dark #weather-card #weather-location,
html.dark #weather-card #weather-alt,
html.dark #weather-card #weather-humidity,
html.dark #weather-card #weather-wind {
  color: var(--dark-text) !important;
}

html.dark #weather-card .text-muted,
html.dark #weather-card .text-muted * {
  color: var(--dark-text) !important;
  opacity: 1;
}

html.dark #weather-card #weather-daily,
html.dark #weather-card #weather-daily .small {
  color: var(--dark-text);
}

html.dark #weather-card #weather-alert {
  background: rgba(253, 209, 119, 0.12);
  border-radius: 10px;
  border: 1px solid rgba(253, 209, 119, 0.38);
  padding: 0.5rem 0.75rem;
}

html.dark .panel,
html.dark .panel-default,
html.dark .panel-group .panel {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .panel-heading {
  background: var(--dark-surface-2);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

html.dark .panel-title,
html.dark .panel-title a {
  color: var(--dark-text);
}

html.dark .panel-body {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .alertify .ajs-header,
html.dark .alertify .ajs-footer {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .alertify .ajs-footer .ajs-buttons .ajs-button {
  color: var(--dark-text-soft);
}

html.dark .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
  color: var(--color-primary);
}

html.dark .alertify .ajs-body .ajs-content .ajs-input {
  background: var(--dark-surface-3);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .alertify .ajs-commands {
  color: var(--dark-text-muted);
}

html.dark .alertify-notifier .ajs-message {
  box-shadow: var(--dark-shadow-strong);
}
html.dark .invoice-info-card,
html.dark .invoice-item,
html.dark .invoice-item-one,
html.dark .invoice-item-two,
html.dark .invoice-item-bg,
html.dark .invoice-item-box,
html.dark .invoice-payment-box,
html.dark .invoice-total-box,
html.dark .invoice-total-inner,
html.dark .invoice-total-card,
html.dark .invoice-issues-box,
html.dark .invoices-grid-card,
html.dark .invoice-grid-card,
html.dark .invoice-item-bg .invoice-info,
html.dark .invoice-table-wrap,
html.dark .invoice-main-form,
html.dark .invoice-item-bg .invoice-info-one,
html.dark .invoice-payment-box .payment-details,
html.dark .invoice-total-box .service-amount,
html.dark .invoice-total-box .service-trash,
html.dark .invoice-total-box .service-trash1,
html.dark .invoice-total-box .service-trash-one,
html.dark .invoice-setting-btn .btn,
html.dark .paid-continue-btn,
html.dark .paid-cancel-btn,
html.dark .forward-send .btn-primary,
html.dark .forward-send .forwrd-btn,
html.dark .card-middle,
html.dark .card-middle-avatar,
html.dark .card-middle-avatar a,
html.dark .card-middle-avatar span {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .invoice-payment-box .payment-details {
  box-shadow: var(--dark-shadow-soft);
}
html.dark .mailview-content,
html.dark .mailview-inner,
html.dark .compose-mail,
html.dark .mailview-header,
html.dark .mailview-footer,
html.dark .mailview-inner p,
html.dark .mailview-inner span,
html.dark .mailview-inner h4,
html.dark .mailview-inner h5,
html.dark .mailview-content p,
html.dark .mailview-content span,
html.dark .mail-attach,
html.dark .email-menu-blk ul li a,
html.dark .email-menu-blk ul li span,
html.dark .mail-view-list,
html.dark .mail-view-list li,
html.dark .attachments li,
html.dark .attach-info,
html.dark .attach-file,
html.dark .compose-mail .btn-primary,
html.dark .email-menu-blk ul li.active a,
html.dark .email-menu-blk ul li.active span {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .email-menu-blk ul li a:hover,
html.dark .email-menu-blk ul li.active a {
  background: var(--dark-surface-3);
  color: #ffffff;
}
html.dark .voice-call-user,
html.dark .voice-time,
html.dark .voice-menu ul,
html.dark .voice-menu ul li a,
html.dark .voice-menu-income .btn-primary,
html.dark .voice-menu-income .call-remove,
html.dark .voice-menu-income .call-received,
html.dark .call-list-add,
html.dark .call-list-add li,
html.dark .call-list-add li a,
html.dark .call-details,
html.dark .call-info,
html.dark .call-description,
html.dark .call-users ul li,
html.dark .call-users ul li img,
html.dark .call-users ul li a:hover .call-mute,
html.dark .voice-icon,
html.dark a.voice-icon,
html.dark .vert-icon,
html.dark a.vert-icon,
html.dark .meet-icons,
html.dark .meet-icons .meet-items .meet-item > a,
html.dark .action-items .action-item a,
html.dark .meet-icons .meet-items .meet-item > a.mute-video.stop,
html.dark .meet-icons .meet-items .meet-item > a.mute-bt.stop,
html.dark .video-call-blk.chat-user-group,
html.dark .video-chat-show .message-sub-box p,
html.dark .video-chat-show ul,
html.dark .video-chat-show ul li,
html.dark .chat-box,
html.dark .chat-box-clinic,
html.dark .chat-user-group,
html.dark .chat-user-group-head,
html.dark .chat-message-box,
html.dark .message-sub-box p,
html.dark .msg-sub-list li,
html.dark .footer-discussion .inputgroups,
html.dark .inputgroups input[type='text'],
html.dark .send-chat,
html.dark .symple-text ul li,
html.dark .call-all,
html.dark .call-all h5 a {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .voice-menu ul li a:hover,
html.dark .chat-user-group:hover,
html.dark .chat-box-clinic .chat-user-group:hover,
html.dark .video-call-blk.chat-user-group:hover,
html.dark .call-list-add li a:hover {
  background: var(--dark-surface-3);
}
html.dark .join-call,
html.dark .join-video,
html.dark .join-video.user-active,
html.dark .join-video.single-user,
html.dark .join-video .overlay-icon,
html.dark .join-video .overlay-icon a,
html.dark .join-video .more-icon a,
html.dark .meeting-wrapper,
html.dark .meeting,
html.dark .join-contents,
html.dark .join-contents.vertical-view,
html.dark .join-contents.grid-view,
html.dark .join-contents.vertical,
html.dark .meeting-list,
html.dark .part-name h4,
html.dark .ripple,
html.dark .text-avatar,
html.dark .overlay-icon,
html.dark .overlay-icon a {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .join-video.single-user::before,
html.dark .meeting .join-video::before,
html.dark .join-video:hover::before {
  background: rgba(28, 35, 47, 0.78);
}
/* Soft surfaces translated from light rgba backgrounds */
html.dark .dash-boxs,
html.dark .activity-boxs,
html.dark .user-dot-list,
html.dark .add-search a,
html.dark .chat-search-list ul li,
html.dark .call-list-add,
html.dark .call-list-add li,
html.dark .call-list-add li a,
html.dark .voice-time,
html.dark .voice-menu ul,
html.dark .voice-menu ul li a,
html.dark .tag,
html.dark .list-add-blogs ul li,
html.dark .date-posts h5,
html.dark .average-health h5,
html.dark .average-health h5 span,
html.dark .new-dot,
html.dark .schedule-time li,
html.dark .doctor-date-list li,
html.dark .doctor-date-list .new-dot,
html.dark .doctor-date-list .ongoing-drapt i,
html.dark .weight-checkit,
html.dark .pulse,
html.dark .activity-feed,
html.dark .activity-feed::after,
html.dark .activity-feed .feed-item:after,
html.dark .timeline::before,
html.dark .timeline-badge,
html.dark .timeline-body,
html.dark .cd-horizontal-timeline .events-wrapper,
html.dark .calendar,
html.dark .calendar header,
html.dark .calendar header .month,
html.dark .bar-chart,
html.dark .bar-chart > .legend,
html.dark .bar-chart > .chart > .item,
html.dark .new-patient-table tr,
html.dark .custom-table tbody tr,
html.dark .custom-table tbody tr td,
html.dark .custom-table thead tr th,
html.dark .comman-table.custom-table thead tr th,
html.dark .comman-table.custom-table tbody tr td,
html.dark .bg-primary-light,
html.dark .bg-success-light,
html.dark .bg-danger-light,
html.dark .bg-default-light,
html.dark .bg-purple-light,
html.dark .voice-menu-income .btn-primary,
html.dark .voice-menu-income .call-remove,
html.dark .voice-menu-income .call-received,
html.dark .status-gray,
html.dark .status-gray.re-shedule,
html.dark .status-staff,
html.dark .doctor-date-list .active-doctor,
html.dark .status-staff .dropdown-item,
html.dark .call-all h4 span {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}
/* Buttons -------------------------------------------------------------- */
html.dark .btn {
  box-shadow: none;
}

html.dark .btn-light {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .btn-light:hover,
html.dark .btn-light:focus {
  background: var(--dark-surface-4);
  color: #ffffff;
  border-color: var(--dark-border-strong);
}

html.dark .btn-white,
html.dark .btn-outline-light,
html.dark .btn-link,
html.dark .btn-primary.cancel-form,
html.dark .cancel-form.btn-primary,
html.dark .btn-primary-one,
html.dark .btn-primary-two,
html.dark .btn-primary-three,
html.dark .btn-primary-four {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .btn-link:hover {
  color: var(--dark-link);
}

html.dark .btn-outline-primary,
html.dark .btn-outline-secondary,
html.dark .btn-outline-info {
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .btn-outline-primary:hover,
html.dark .btn-outline-secondary:hover,
html.dark .btn-outline-info:hover {
  background: var(--dark-surface-4);
  color: #ffffff;
  border-color: var(--dark-border-strong);
}

html.dark .btn-primary.cancel-form:hover,
html.dark .cancel-form.btn-primary:hover {
  background: var(--dark-surface-4);
  border-color: var(--dark-border-strong);
}

html.dark .btn-primary:disabled,
html.dark .btn.btn-primary:disabled {
  color: #ffffff;
  background: rgba(6, 152, 52, 0.45);
  border-color: rgba(6, 152, 52, 0.45);
}
/* Breadcrumbs & badges ------------------------------------------------- */
html.dark .breadcrumb.breadcrumb-colored:not(.bg-primary):not(.bg-secondary) {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
  color: var(--dark-text-soft);
}

html.dark .breadcrumb.breadcrumb-colored:not(.bg-primary):not(.bg-secondary) li,
html.dark .breadcrumb.breadcrumb-colored:not(.bg-primary):not(.bg-secondary) li a {
  color: inherit;
}

html.dark .breadcrumb.breadcrumb-colored .breadcrumb-item + .breadcrumb-item::before {
  color: currentColor;
}

html.dark .breadcrumb.breadcrumb-colored.bg-primary li,
html.dark .breadcrumb.breadcrumb-colored.bg-primary li a,
html.dark .breadcrumb.breadcrumb-colored.bg-secondary li,
html.dark .breadcrumb.breadcrumb-colored.bg-secondary li a {
  color: #ffffff;
}
/* Ion range slider ----------------------------------------------------- */
html.dark .irs--flat .irs-line,
html.dark .irs--sharp .irs-line,
html.dark .irs--flat .irs-grid-pol,
html.dark .irs--sharp .irs-grid-pol {
  background: var(--dark-border);
}

html.dark .irs--flat .irs-min,
html.dark .irs--flat .irs-max,
html.dark .irs--flat .irs-grid-text,
html.dark .irs--sharp .irs-min,
html.dark .irs--sharp .irs-max,
html.dark .irs--sharp .irs-grid-text {
  color: var(--dark-text-muted);
}

html.dark .irs--sharp .irs-handle,
html.dark .irs--flat .irs-handle {
  box-shadow: 0 0 0 2px rgba(6, 152, 52, 0.2);
}

html.dark .irs--flat .irs-bar,
html.dark .irs--flat .irs-from,
html.dark .irs--flat .irs-to,
html.dark .irs--flat .irs-single,
html.dark .irs--flat .irs-handle > i:first-child,
html.dark .irs--sharp .irs-handle,
html.dark .irs--sharp .irs-from,
html.dark .irs--sharp .irs-to,
html.dark .irs--sharp .irs-single,
html.dark .irs--sharp .irs-min,
html.dark .irs--sharp .irs-max {
  color: #ffffff;
}
/* Forms ---------------------------------------------------------------- */
html.dark .form-control,
html.dark textarea.form-control,
html.dark select.form-control,
html.dark .form-select,
html.dark .input-group-text,
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple,
html.dark .select2-dropdown,
html.dark .select2-search__field,
html.dark .select2-results__option,
html.dark .form-control:disabled,
html.dark .form-control[readonly],
html.dark .note-editor.note-frame .note-editable,
html.dark .note-editor.note-frame .note-statusbar,
html.dark .custom-file-upload,
html.dark .custom-file-upload .file-upload-text,
html.dark .custom-file-container__custom-file__custom-file-control,
html.dark .custom-file-container__image-preview,
html.dark .custom-file-container__image-multi-preview,
html.dark .settings-form .bootstrap-tagsinput {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .form-control::placeholder,
html.dark textarea.form-control::placeholder,
html.dark .select2-search__field::placeholder,
html.dark .custom-file-upload .file-upload-text {
  color: var(--dark-text-muted);
}

html.dark .form-control:focus,
html.dark textarea.form-control:focus,
html.dark .select2-container--default .select2-selection--single:focus,
html.dark .select2-container--default .select2-selection--multiple:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(6, 152, 52, 0.35);
}

html.dark .input-group-text {
  background: var(--dark-surface-4);
  color: var(--dark-text);
}

html.dark .form-focus .focus-label,
html.dark .local-forms label,
html.dark .settings-form .input-block label,
html.dark .settings-label,
html.dark .custom-file-container label,
html.dark .custom-file-container__custom-file__custom-file-control__button {
  color: var(--dark-text-soft);
}

html.dark .custom_check .checkmark,
html.dark .remember-me .custom_check .checkmark,
html.dark .note-checkit .custom_check .checkmark,
html.dark .checktoggles,
html.dark .checktoggle,
html.dark .settings-form .custom_radio .checkmark {
  background: var(--dark-surface-3);
  border: 1px solid var(--dark-border);
}

html.dark .custom_check input:checked ~ .checkmark,
html.dark .note-checkit .custom_check input:checked ~ .checkmark,
html.dark .check:checked + .checktoggles,
html.dark .check:checked + .checktoggle,
html.dark .settings-form .custom_radio input:checked ~ .checkmark {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

html.dark .custom_check .checkmark::after,
html.dark .checktoggles:after,
html.dark .settings-form .custom_radio .checkmark:after {
  color: #ffffff;
}

html.dark .custom_file_container__image-multi-preview__single-image-clear,
html.dark .custom-file-container__image-multi-preview__single-image-clear {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  box-shadow: var(--dark-shadow-soft);
}
/* Settings uploads & tag inputs ---------------------------------------- */
html.dark .settings-btn {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

html.dark .settings-btn .upload {
  background: linear-gradient(135deg, var(--color-primary), #1f9c6b);
  color: #ffffff;
}

html.dark .settings-size {
  color: var(--dark-text-muted);
}

html.dark .settings-size span {
  color: var(--dark-text);
}

html.dark .upload-images {
  background: rgba(22, 27, 35, 0.85);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .upload-images .btn-icon {
  color: var(--color-primary);
  background: var(--dark-surface-3);
  border-radius: 50%;
}

html.dark .settings-form .bootstrap-tagsinput .tag {
  background: var(--dark-surface-4) !important;
  color: var(--dark-text);
  border-radius: 4px;
}

html.dark .settings-form .bootstrap-tagsinput input::placeholder {
  color: var(--dark-text-muted);
}
/* Tables --------------------------------------------------------------- */
html.dark table,
html.dark .table,
html.dark .table.table-white,
html.dark .table.custom-table,
html.dark table.dataTable,
html.dark .table-nowrap td,
html.dark .table-nowrap th {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .table thead th,
html.dark table.dataTable thead th,
html.dark table.dataTable thead td,
html.dark .table thead td {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .table tbody tr,
html.dark table.dataTable tbody tr {
  background: var(--dark-surface-1);
  color: var(--dark-text);
}

html.dark .table-striped > tbody > tr:nth-of-type(2n + 1),
html.dark table.dataTable.stripe tbody tr.odd,
html.dark table.dataTable.display tbody tr.odd {
  background: var(--dark-surface-3);
}

html.dark .table > tbody > tr:hover,
html.dark table.dataTable.hover tbody tr:hover,
html.dark table.dataTable.display tbody tr:hover {
  background: var(--dark-surface-4);
}

html.dark .table-bordered td,
html.dark .table-bordered th,
html.dark table.dataTable.no-footer {
  border-color: var(--dark-border);
}

html.dark .table h5,
html.dark .table h5 + p,
html.dark .table .invoice-link,
html.dark .table .bg-success-dark,
html.dark .table .bg-danger-dark,
html.dark .custom-table tbody tr td,
html.dark .custom-table thead tr th {
  color: var(--dark-text);
}

html.dark .table .invoice-link:hover {
  color: var(--dark-link);
}

html.dark table.table td h2 a {
  color: var(--dark-text);
}

html.dark table.table td h2 span {
  color: var(--dark-text-muted);
}
/* DataTables ----------------------------------------------------------- */
html.dark table.dataTable,
html.dark .dataTables_wrapper table.dataTable {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark table.dataTable > thead > tr > th,
html.dark table.dataTable > thead > tr > td,
html.dark table.dataTable > tfoot > tr > th,
html.dark table.dataTable > tfoot > tr > td {
  background-color: var(--dark-surface-2);
  color: var(--dark-text);
  border-color: var(--dark-border) !important;
}

html.dark table.dataTable > tbody,
html.dark table.dataTable > tbody > tr {
  background-color: var(--dark-surface-1);
}

html.dark table.dataTable > tbody > tr > th,
html.dark table.dataTable > tbody > tr > td {
  background-color: transparent !important;
  color: var(--dark-text);
  border-color: var(--dark-border) !important;
}

html.dark table.dataTable > tbody > tr > td.dataTables_empty,
html.dark .dt-container table.dataTable > tbody > tr > td.dt-empty {
  background-color: var(--dark-surface-2) !important;
  color: var(--dark-text);
}

html.dark table.dataTable.stripe > tbody > tr.odd > *,
html.dark table.dataTable.display > tbody > tr.odd > * {
  background-color: var(--dark-surface-3) !important;
}

html.dark .dt-container table.dataTable > tbody > tr.dt-rowOdd > * {
  background-color: var(--dark-surface-3) !important;
}

html.dark .dt-container table.dataTable > tbody > tr.dt-rowEven > * {
  background-color: var(--dark-surface-1) !important;
}

html.dark table.dataTable.hover > tbody > tr:hover > *,
html.dark table.dataTable.display > tbody > tr:hover > * {
  background-color: var(--dark-surface-4) !important;
  color: var(--dark-text);
}

html.dark .dt-container table.dataTable > tbody > tr.dt-rowHover > * {
  background-color: var(--dark-surface-4) !important;
  color: var(--dark-text);
}

html.dark table.dataTable > tbody > tr.child > td {
  background-color: var(--dark-surface-2) !important;
  color: var(--dark-text);
}

html.dark table.dataTable tbody tr > .sorting_1,
html.dark table.dataTable tbody tr > .sorting_2,
html.dark table.dataTable tbody tr > .sorting_3 {
  background-color: rgba(99, 182, 255, 0.14) !important;
  color: var(--dark-text);
}

html.dark table.dataTable tbody tr.odd > .sorting_1,
html.dark table.dataTable.display tbody tr.odd > .sorting_1 {
  background-color: rgba(99, 182, 255, 0.18) !important;
}

html.dark table.dataTable tbody tr.selected > *,
html.dark table.dataTable tbody tr.selected > .sorting_1,
html.dark table.dataTable tbody tr.selected > .sorting_2,
html.dark table.dataTable tbody tr.selected > .sorting_3,
html.dark .dt-container .dt-rowSelected > * {
  background-color: rgba(99, 182, 255, 0.24) !important;
  color: var(--dark-text);
}

html.dark .dataTables_wrapper .dataTables_filter label,
html.dark .dataTables_wrapper .dataTables_length label,
html.dark .dataTables_wrapper .dataTables_info,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--dark-text);
}

html.dark .dt-container .dt-length label,
html.dark .dt-container .dt-search label {
  color: var(--dark-text) !important;
}

html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  border-radius: 8px;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: var(--dark-surface-3) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--dark-surface-4) !important;
  border-color: var(--dark-border-strong) !important;
  color: #ffffff !important;
}

html.dark .dt-container .dt-search input.dt-input,
html.dark .dt-container .dt-length select.dt-input,
html.dark .dt-container .dt-input {
  background: var(--dark-surface-3) !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-border) !important;
}

html.dark .dt-container .dt-info {
  color: var(--dark-text) !important;
}

html.dark .dt-container .dt-paging .dt-paging-button {
  background: var(--dark-surface-3) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .dt-container .dt-paging .dt-paging-button.current,
html.dark .dt-container .dt-paging .dt-paging-button:hover {
  background: var(--dark-surface-4) !important;
  border-color: var(--dark-border-strong) !important;
  color: #ffffff !important;
}

html.dark .dt-container .dt-scroll,
html.dark .dt-container .dt-scroll-head,
html.dark .dt-container .dt-scroll-body,
html.dark .dt-container .dt-scroll-foot {
  background: var(--dark-surface-2) !important;
}
/* Dropdowns & modals --------------------------------------------------- */
html.dark .dropdown-menu,
html.dark .modal-content,
html.dark .modal-header,
html.dark .modal-footer,
html.dark .list-group-item {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .dropdown-item,
html.dark .dropdown-item i {
  color: var(--dark-text-soft);
}

html.dark .dropdown-item:hover {
  background: var(--dark-surface-3);
  color: #ffffff;
}

html.dark .modal-header,
html.dark .card-header,
html.dark .mailview-header {
  background: var(--dark-surface-2);
}

html.dark .modal-footer,
html.dark .card-footer,
html.dark .mailview-footer {
  background: var(--dark-surface-2);
}
/* Tabs & pills --------------------------------------------------------- */
html.dark .nav-tabs .nav-link,
html.dark .nav-tabs > li > a,
html.dark .nav-tabs.nav-tabs-solid > li > a,
html.dark .nav-tabs.nav-tabs-solid,
html.dark .nav-tabs.menu-tabs,
html.dark ul.nav.nav-tabs.menu-tabs,
html.dark .nav-pills .nav-link,
html.dark .wizard .nav-item .nav-link {
  background: var(--dark-surface-2);
  color: var(--dark-text-muted);
  border-color: var(--dark-border);
}

html.dark .nav-tabs .nav-link:hover,
html.dark .nav-tabs > li > a:hover,
html.dark .wizard .nav-item .nav-link:hover,
html.dark .nav-pills .nav-link:hover {
  color: var(--dark-text);
  background: var(--dark-surface-3);
}

html.dark .nav-tabs .nav-link.active,
html.dark .nav-tabs > li > a.active,
html.dark .nav-tabs.nav-tabs-solid > li > a.active,
html.dark .nav-tabs.menu-tabs .nav-link.active,
html.dark .wizard .nav-item .nav-link.active,
html.dark .nav-pills .nav-link.active {
  background: var(--dark-surface-4);
  border-color: var(--dark-border-strong);
  color: #ffffff;
}
/* Login & authentication ----------------------------------------------- */
html.dark .login-wrap {
  background: linear-gradient(140deg, var(--dark-surface-2), var(--dark-surface-4));
}

html.dark .login-wrapper .loginbox {
  background: var(--dark-surface-1);
  box-shadow: var(--dark-shadow-strong);
  border: 1px solid var(--dark-border);
}

html.dark .login-wrapper .loginbox .login-right,
html.dark .login-wrapper .loginbox .login-right .input-block label,
html.dark .login-right .form-control {
  color: var(--dark-text);
}

html.dark .login-wrapper .loginbox .login-right .forgotpass a,
html.dark .login-wrapper .loginbox .login-right .dont-have a,
html.dark .account-subtitle a {
  color: var(--dark-link);
}

html.dark .login-wrapper .loginbox .login-right .forgotpass a:hover,
html.dark .login-wrapper .loginbox .login-right .dont-have a:hover {
  color: var(--dark-link-hover);
}

html.dark .social-login > a {
  background: var(--dark-surface-3);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .social-login > a:hover {
  background: var(--dark-surface-4);
  color: #ffffff;
}
/* Ribbons -------------------------------------------------------------- */
html.dark .ribbon,
html.dark .ribbon-right,
html.dark .ribbon-vertical-left,
html.dark .ribbon-vertical-right {
  box-shadow: var(--dark-shadow-soft);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

html.dark .ribbon-primary {
  --ribbon-main: var(--color-primary);
  --ribbon-alt: #0bbf4a;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-secondary {
  --ribbon-main: #f73164;
  --ribbon-alt: #d4224c;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-success {
  --ribbon-main: #51bb25;
  --ribbon-alt: #3f901d;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-danger {
  --ribbon-main: #dc3545;
  --ribbon-alt: #bd2130;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-info {
  --ribbon-main: #03a9f3;
  --ribbon-alt: #2e82ff;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-warning {
  --ribbon-main: #f8d62b;
  --ribbon-alt: #e8c308;
  --ribbon-contrast: #1f1500;
}

html.dark .ribbon-light {
  --ribbon-main: var(--dark-surface-4);
  --ribbon-alt: var(--dark-border);
  --ribbon-contrast: var(--dark-text);
}

html.dark .ribbon-dark {
  --ribbon-main: #343b4c;
  --ribbon-alt: #242a37;
  --ribbon-contrast: #ffffff;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ) {
  background: var(--ribbon-main);
  color: var(--ribbon-contrast);
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-corner:before {
  border-top-color: var(--ribbon-alt);
  border-left-color: var(--ribbon-alt);
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-corner.ribbon-right:before {
  border-right-color: var(--ribbon-alt);
  border-left-color: transparent;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-corner.ribbon-bottom:before {
  border-bottom-color: var(--ribbon-alt);
  border-top-color: transparent;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip:before,
html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-right:before,
html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-bottom:before,
html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-bottom-right:before {
  border-color: transparent;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip:before {
  border-top-color: var(--ribbon-alt);
  border-right-color: var(--ribbon-alt);
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-right:before {
  border-top-color: var(--ribbon-alt);
  border-left-color: var(--ribbon-alt);
  border-right-color: transparent;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-bottom:before {
  border-bottom-color: var(--ribbon-alt);
  border-right-color: var(--ribbon-alt);
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-bottom-right:before {
  border-bottom-color: var(--ribbon-alt);
  border-left-color: var(--ribbon-alt);
}

html.dark .ribbon-bookmark:is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ):before {
  border-color: var(--ribbon-alt);
  border-right-color: transparent;
}

html.dark .ribbon-bookmark.ribbon-right:is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ):before {
  border-right-color: var(--ribbon-alt);
  border-left-color: transparent;
}

html.dark .ribbon-bookmark.ribbon-vertical-left:is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ):before,
html.dark .ribbon-bookmark.ribbon-vertical-right:is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ):before {
  border-right-color: var(--ribbon-alt);
  border-bottom-color: transparent;
}

html.dark .ribbon-warning,
html.dark .ribbon-light {
  text-shadow: none;
}

html.dark .ribbon-warning,
html.dark .ribbon-light,
html.dark .ribbon-primary,
html.dark .ribbon-secondary,
html.dark .ribbon-success,
html.dark .ribbon-danger,
html.dark .ribbon-info,
html.dark .ribbon-dark {
  border: 0;
}
/* Charts, calendar and timeline --------------------------------------- */
html.dark .apexcharts-title-text,
html.dark .apexcharts-subtitle-text,
html.dark .apexcharts-legend-text,
html.dark .apexcharts-datalabel,
html.dark .apexcharts-xaxis text,
html.dark .apexcharts-yaxis text {
  fill: var(--dark-text) !important;
  color: var(--dark-text) !important;
}

html.dark .apexcharts-tooltip {
  background: var(--dark-surface-2) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .apexcharts-tooltip .apexcharts-tooltip-title {
  background: var(--dark-surface-3) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .fc,
html.dark .fc .fc-scrollgrid,
html.dark .fc-day,
html.dark .fc-daygrid-day,
html.dark .fc-daygrid-day-frame,
html.dark .fc-col-header,
html.dark .fc-event,
html.dark .fc-toolbar,
html.dark .calendar {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .fc th.fc-widget-header,
html.dark .fc-col-header-cell {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .fc-event,
html.dark .fc-event-dot,
html.dark .fc-daygrid-event {
  background: var(--color-primary);
  border: 0;
  color: #ffffff;
}

html.dark .fc-toolbar h2,
html.dark .fc-toolbar .fc-button {
  color: var(--dark-text);
}

html.dark .fc-toolbar .fc-button {
  background: var(--dark-surface-3);
  border: 1px solid var(--dark-border);
}

html.dark .fc-toolbar .fc-button:hover,
html.dark .fc-toolbar .fc-button.fc-state-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}
html.dark .tag,
html.dark .tags li,
html.dark .categories li,
html.dark .categories li a {
  color: var(--dark-text);
}

html.dark .tag:hover,
html.dark .categories li a:hover,
html.dark .read-more:hover,
html.dark .blog-info a:hover {
  color: var(--dark-link);
  background: var(--dark-surface-3);
}
/* Avatars -------------------------------------------------------------- */
html.dark .avatar,
html.dark .user-img .status {
  background: var(--dark-surface-4);
  color: var(--dark-text);
}

html.dark .avatar.avatar-online::before,
html.dark .avatar.avatar-offline::before,
html.dark .avatar.avatar-away::before,
html.dark .user-img .status {
  border-color: var(--dark-surface-1);
}
/* Accent helpers ------------------------------------------------------- */
html.dark .bg-primary,
html.dark .bg-success,
html.dark .bg-info,
html.dark .bg-warning,
html.dark .bg-danger,
html.dark .badge-primary,
html.dark .badge-success,
html.dark .badge-info,
html.dark .badge-warning,
html.dark .badge-danger,
html.dark .badge.bg-secondary,
html.dark .badge.rounded-pill {
  color: #ffffff;
}
/* Preloader & alerts --------------------------------------------------- */
html.dark .preloader {
  background: var(--dark-overlay);
}

html.dark .preloader::before {
  background: linear-gradient(var(--dark-overlay), rgba(15, 18, 24, 0));
}

html.dark .circle1,
html.dark .circle2,
html.dark .circle3 {
  background: var(--color-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

html.dark .circle2 {
  background: var(--dark-surface-4);
}

html.dark .notyfcustom {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .notyfcustom:hover {
  background: linear-gradient(120deg, var(--color-primary), var(--dark-surface-4));
}

html.dark .custom-alert-background-text {
  color: rgba(255, 99, 99, 0.12);
}

html.dark .custom-alert-scan-line {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.45) 35%, rgba(255, 255, 255, 0));
}
/* Emoji picker --------------------------------------------------------- */
html.dark .emoji-popup {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-strong);
  color: var(--dark-text);
}

html.dark .emoji-tabs {
  border-bottom: 1px solid var(--dark-border);
}

html.dark .emoji-tab {
  color: var(--dark-text-muted);
}

html.dark .emoji-tab.active {
  border-bottom: 2px solid var(--color-primary);
  color: var(--dark-text);
}

html.dark .emoji-section {
  background: var(--dark-surface-1);
}
/* Progress & metrics --------------------------------------------------- */
html.dark .progress,
html.dark .progress-example .progress,
html.dark .progress.progress-sm,
html.dark .progress.progress-md,
html.dark .progress.progress-lg,
html.dark .weight-bar.progress {
  background: var(--dark-surface-3);
  border-radius: 12px;
}

html.dark .progress .progress-bar,
html.dark .weight-bar .progress-bar {
  box-shadow: none;
}
html.dark .settings-form .social-icon,
html.dark .settings-form .trash,
html.dark .add-links,
html.dark .label-add-list li .add-list-btn,
html.dark .mail-reports ul li .ford-angle,
html.dark .mail-reports ul li .ford-angle.star-bg {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .settings-form .social-icon::after {
  color: var(--dark-text);
}
html.dark .cd-horizontal-timeline .events,
html.dark .cd-horizontal-timeline .events a,
html.dark .cd-horizontal-timeline .events a::after,
html.dark .cd-horizontal-timeline .filling-line,
html.dark .cd-timeline-navigation a,
html.dark .cd-timeline-navigation a::after {
=======
}

html.dark .bg-light .text-muted,
html.dark .bg-light.text-muted,
html.dark .bg-light .small,
html.dark .bg-light small {
  color: var(--dark-text-soft) !important;
}

html.dark .bg-body-tertiary,
html.dark .card.bg-body-tertiary,
html.dark .bg-white,
html.dark .card.bg-white,
html.dark .alert.bg-white,
html.dark .list-group-item.bg-white {
  background-color: var(--dark-surface-1) !important;
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .bg-body-tertiary .text-muted,
html.dark .bg-white .text-muted,
html.dark .bg-white .small,
html.dark .bg-body-tertiary .small {
  color: var(--dark-text-soft) !important;
}

html.dark .bg-secondary-subtle,
html.dark .badge.bg-secondary-subtle {
  background-color: rgba(215, 222, 234, 0.14) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border-soft) !important;
}

html.dark .badge.bg-secondary-subtle {
  box-shadow: none;
}

html.dark .badge.bg-light {
  background-color: var(--dark-surface-3) !important;
  color: var(--dark-text-soft) !important;
  border-color: var(--dark-border-soft) !important;
}

html.dark .border-light {
  border-color: var(--dark-border-soft) !important;
}
/* -----------------------------------------------------------------------
   2. Header and navigation
   ----------------------------------------------------------------------- */
html.dark .header {
  background: var(--dark-surface-2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

html.dark .header .header-left {
  background: var(--dark-surface-2);
  border-right: 1px solid var(--dark-border);
}

html.dark .page-title-box,
html.dark .page-title-box h3 {
  background: var(--dark-surface-3);
  color: var(--dark-text);
}

html.dark .user-menu,
html.dark .user-menu.nav > li > a,
html.dark .user-menu.nav > li > a i,
html.dark .user-menu.nav > li > a span,
html.dark .mobile-user-menu > a {
  color: var(--dark-text);
}

html.dark .user-menu.nav > li > a:hover,
html.dark .user-menu.nav > li > a:focus {
  background: var(--dark-surface-3);
}

html.dark .top-nav-search form,
html.dark .top-nav-search .form-control,
html.dark .top-nav-search .btn,
html.dark .top-liv-search .form-control,
html.dark .top-liv-search .btn,
html.dark .top-liv-search .btn i,
html.dark .top-nav-search .btn i {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .top-nav-search .form-control::placeholder,
html.dark .top-nav-search .form-control::-webkit-input-placeholder,
html.dark .top-liv-search .form-control::placeholder {
  color: var(--dark-text-muted);
}

html.dark .top-inbox-blk {
  background: var(--dark-surface-3);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .top-inbox-blk .dropdown-menu {
  background: var(--dark-surface-2);
  box-shadow: var(--dark-shadow-soft);
  border-color: var(--dark-border);
}

html.dark .top-inbox-blk .dropdown-menu .dropdown-item {
  color: var(--dark-text);
  border-bottom: 1px solid var(--dark-border);
}

html.dark .top-inbox-blk .dropdown-menu .dropdown-item:last-child {
  border-bottom: 0;
}

html.dark li.breadcrumb-item.invoices-breadcrumb-item > a,
html.dark .breadcrumb-item a {
  color: var(--dark-text-soft);
}
/* -----------------------------------------------------------------------
   3. Sidebar
   ----------------------------------------------------------------------- */
html.dark .sidebar {
  background: var(--dark-surface-1);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.55);
  border-right: 1px solid var(--dark-border);
}

html.dark .sidebar-menu > ul > li > a,
html.dark .sidebar-menu ul ul a,
html.dark .sidebar-menu li.menu-title a,
html.dark .menu-title,
html.dark .sidebar-menu a {
  color: var(--dark-text-soft);
}

html.dark .sidebar-menu li.active > a,
html.dark .sidebar-menu li a:hover,
html.dark .sidebar-menu li a:focus,
html.dark .sidebar-menu ul li .active,
html.dark .sidebar-menu ul .submenu .active {
  color: #ffffff;
  background: var(--dark-surface-3);
}

html.dark .sidebar-menu ul li a img,
html.dark .sidebar-menu ul .submenu .active img,
html.dark .sidebar-menu li a:hover img {
  filter: brightness(6) saturate(0);
}

html.dark .sidebar-menu .menu-title,
html.dark .sidebar-menu li.menu-title a {
  color: var(--dark-text-muted);
}

html.dark .logout-btn a {
  color: var(--dark-text);
}

html.dark .sidebar-menu .menu-arrow,
html.dark .sidebar-menu li a span.menu-side {
  color: var(--dark-text-muted);
  background: var(--dark-surface-3);
  border-radius: 8px;
}

html.dark .sidebar-menu .menu-arrow:before {
  color: var(--dark-text);
  content: '\f105';
}

html.dark .sidebar .sidebar-menu > ul > li > a span.badge {
  background: var(--color-primary);
  color: #ffffff;
}
/* -----------------------------------------------------------------------
   4. Core panels and containers
   ----------------------------------------------------------------------- */
html.dark .card,
html.dark .card .card,
html.dark .card-box,
html.dark .dash-widget,
html.dark .widget,
html.dark .profile-widget,
html.dark .doctor-list-blk,
html.dark .doctor-sub-list,
html.dark .status-staff,
html.dark .good-morning-blk,
html.dark .activity-list > li .activity-content,
html.dark .comman-activitys,
html.dark .activity-maps,
html.dark .wallet-widget,
html.dark .wallet-widget.general-health,
html.dark .treat-box,
html.dark .doctor-profile-head,
html.dark .weight-blk,
html.dark .doctor-table-blk,
html.dark .doctor-search-blk,
html.dark .status-staff .dropdown-item,
html.dark .table-inbox tbody tr,
html.dark .timeline > li > .timeline-panel,
html.dark .timeline-badge,
html.dark .cd-horizontal-timeline .events-content,
html.dark .icons-list li,
html.dark .blog,
html.dark .blog-info,
html.dark .widget,
html.dark .latest-posts li,
html.dark .post-info,
html.dark .categories li,
html.dark .tag,
html.dark .tags,
html.dark .comment-block,
html.dark .about-author,
html.dark .author-details,
html.dark .alertify .ajs-dialog,
html.dark .swal2-popup,
html.dark .swal2-toast,
html.dark .notification-box,
html.dark .list-item,
html.dark .files-icon,
html.dark .message-content {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

/* Home dashboard widgets ------------------------------------------------- */
html.dark .good-morning-blk .morning-user h2,
html.dark .good-morning-blk .morning-user p {
  color: var(--dark-text);
}

html.dark #weather-card {
  background: var(--dark-surface-1);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
  color: var(--dark-text);
}

html.dark #weather-card .card-body,
html.dark #weather-card .card-footer {
  background: transparent;
  color: var(--dark-text);
}

html.dark #weather-card #weather-temp {
  color: var(--dark-text);
  opacity: 1;
}

html.dark #weather-card #weather-title,
html.dark #weather-card #weather-location,
html.dark #weather-card #weather-alt,
html.dark #weather-card #weather-humidity,
html.dark #weather-card #weather-wind {
  color: var(--dark-text) !important;
}

html.dark #weather-card .text-muted,
html.dark #weather-card .text-muted * {
  color: var(--dark-text) !important;
  opacity: 1;
}

html.dark #weather-card #weather-daily,
html.dark #weather-card #weather-daily .small {
  color: var(--dark-text);
}

html.dark #weather-card #weather-alert {
  background: rgba(253, 209, 119, 0.12);
  border-radius: 10px;
  border: 1px solid rgba(253, 209, 119, 0.38);
  padding: 0.5rem 0.75rem;
}

html.dark .panel,
html.dark .panel-default,
html.dark .panel-group .panel {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .panel-heading {
  background: var(--dark-surface-2);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

html.dark .panel-title,
html.dark .panel-title a {
  color: var(--dark-text);
}

html.dark .panel-body {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .alertify .ajs-header,
html.dark .alertify .ajs-footer {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .alertify .ajs-footer .ajs-buttons .ajs-button {
  color: var(--dark-text-soft);
}

html.dark .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
  color: var(--color-primary);
}

html.dark .alertify .ajs-body .ajs-content .ajs-input {
  background: var(--dark-surface-3);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .alertify .ajs-commands {
  color: var(--dark-text-muted);
}

html.dark .alertify-notifier .ajs-message {
  box-shadow: var(--dark-shadow-strong);
}
html.dark .invoice-info-card,
html.dark .invoice-item,
html.dark .invoice-item-one,
html.dark .invoice-item-two,
html.dark .invoice-item-bg,
html.dark .invoice-item-box,
html.dark .invoice-payment-box,
html.dark .invoice-total-box,
html.dark .invoice-total-inner,
html.dark .invoice-total-card,
html.dark .invoice-issues-box,
html.dark .invoices-grid-card,
html.dark .invoice-grid-card,
html.dark .invoice-item-bg .invoice-info,
html.dark .invoice-table-wrap,
html.dark .invoice-main-form,
html.dark .invoice-item-bg .invoice-info-one,
html.dark .invoice-payment-box .payment-details,
html.dark .invoice-total-box .service-amount,
html.dark .invoice-total-box .service-trash,
html.dark .invoice-total-box .service-trash1,
html.dark .invoice-total-box .service-trash-one,
html.dark .invoice-setting-btn .btn,
html.dark .paid-continue-btn,
html.dark .paid-cancel-btn,
html.dark .forward-send .btn-primary,
html.dark .forward-send .forwrd-btn,
html.dark .card-middle,
html.dark .card-middle-avatar,
html.dark .card-middle-avatar a,
html.dark .card-middle-avatar span {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .invoice-payment-box .payment-details {
  box-shadow: var(--dark-shadow-soft);
}
html.dark .mailview-content,
html.dark .mailview-inner,
html.dark .compose-mail,
html.dark .mailview-header,
html.dark .mailview-footer,
html.dark .mailview-inner p,
html.dark .mailview-inner span,
html.dark .mailview-inner h4,
html.dark .mailview-inner h5,
html.dark .mailview-content p,
html.dark .mailview-content span,
html.dark .mail-attach,
html.dark .email-menu-blk ul li a,
html.dark .email-menu-blk ul li span,
html.dark .mail-view-list,
html.dark .mail-view-list li,
html.dark .attachments li,
html.dark .attach-info,
html.dark .attach-file,
html.dark .compose-mail .btn-primary,
html.dark .email-menu-blk ul li.active a,
html.dark .email-menu-blk ul li.active span {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .email-menu-blk ul li a:hover,
html.dark .email-menu-blk ul li.active a {
  background: var(--dark-surface-3);
  color: #ffffff;
}
html.dark .voice-call-user,
html.dark .voice-time,
html.dark .voice-menu ul,
html.dark .voice-menu ul li a,
html.dark .voice-menu-income .btn-primary,
html.dark .voice-menu-income .call-remove,
html.dark .voice-menu-income .call-received,
html.dark .call-list-add,
html.dark .call-list-add li,
html.dark .call-list-add li a,
html.dark .call-details,
html.dark .call-info,
html.dark .call-description,
html.dark .call-users ul li,
html.dark .call-users ul li img,
html.dark .call-users ul li a:hover .call-mute,
html.dark .voice-icon,
html.dark a.voice-icon,
html.dark .vert-icon,
html.dark a.vert-icon,
html.dark .meet-icons,
html.dark .meet-icons .meet-items .meet-item > a,
html.dark .action-items .action-item a,
html.dark .meet-icons .meet-items .meet-item > a.mute-video.stop,
html.dark .meet-icons .meet-items .meet-item > a.mute-bt.stop,
html.dark .video-call-blk.chat-user-group,
html.dark .video-chat-show .message-sub-box p,
html.dark .video-chat-show ul,
html.dark .video-chat-show ul li,
html.dark .chat-box,
html.dark .chat-box-clinic,
html.dark .chat-user-group,
html.dark .chat-user-group-head,
html.dark .chat-message-box,
html.dark .message-sub-box p,
html.dark .msg-sub-list li,
html.dark .footer-discussion .inputgroups,
html.dark .inputgroups input[type='text'],
html.dark .send-chat,
html.dark .symple-text ul li,
html.dark .call-all,
html.dark .call-all h5 a {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .voice-menu ul li a:hover,
html.dark .chat-user-group:hover,
html.dark .chat-box-clinic .chat-user-group:hover,
html.dark .video-call-blk.chat-user-group:hover,
html.dark .call-list-add li a:hover {
  background: var(--dark-surface-3);
}
html.dark .join-call,
html.dark .join-video,
html.dark .join-video.user-active,
html.dark .join-video.single-user,
html.dark .join-video .overlay-icon,
html.dark .join-video .overlay-icon a,
html.dark .join-video .more-icon a,
html.dark .meeting-wrapper,
html.dark .meeting,
html.dark .join-contents,
html.dark .join-contents.vertical-view,
html.dark .join-contents.grid-view,
html.dark .join-contents.vertical,
html.dark .meeting-list,
html.dark .part-name h4,
html.dark .ripple,
html.dark .text-avatar,
html.dark .overlay-icon,
html.dark .overlay-icon a {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .join-video.single-user::before,
html.dark .meeting .join-video::before,
html.dark .join-video:hover::before {
  background: rgba(28, 35, 47, 0.78);
}
/* Soft surfaces translated from light rgba backgrounds */
html.dark .dash-boxs,
html.dark .activity-boxs,
html.dark .user-dot-list,
html.dark .add-search a,
html.dark .chat-search-list ul li,
html.dark .call-list-add,
html.dark .call-list-add li,
html.dark .call-list-add li a,
html.dark .voice-time,
html.dark .voice-menu ul,
html.dark .voice-menu ul li a,
html.dark .tag,
html.dark .list-add-blogs ul li,
html.dark .date-posts h5,
html.dark .average-health h5,
html.dark .average-health h5 span,
html.dark .new-dot,
html.dark .schedule-time li,
html.dark .doctor-date-list li,
html.dark .doctor-date-list .new-dot,
html.dark .doctor-date-list .ongoing-drapt i,
html.dark .weight-checkit,
html.dark .pulse,
html.dark .activity-feed,
html.dark .activity-feed::after,
html.dark .activity-feed .feed-item:after,
html.dark .timeline::before,
html.dark .timeline-badge,
html.dark .timeline-body,
html.dark .cd-horizontal-timeline .events-wrapper,
html.dark .calendar,
html.dark .calendar header,
html.dark .calendar header .month,
html.dark .bar-chart,
html.dark .bar-chart > .legend,
html.dark .bar-chart > .chart > .item,
html.dark .new-patient-table tr,
html.dark .custom-table tbody tr,
html.dark .custom-table tbody tr td,
html.dark .custom-table thead tr th,
html.dark .comman-table.custom-table thead tr th,
html.dark .comman-table.custom-table tbody tr td,
html.dark .bg-primary-light,
html.dark .bg-success-light,
html.dark .bg-danger-light,
html.dark .bg-default-light,
html.dark .bg-purple-light,
html.dark .voice-menu-income .btn-primary,
html.dark .voice-menu-income .call-remove,
html.dark .voice-menu-income .call-received,
html.dark .status-gray,
html.dark .status-gray.re-shedule,
html.dark .status-staff,
html.dark .doctor-date-list .active-doctor,
html.dark .status-staff .dropdown-item,
html.dark .call-all h4 span {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}
/* Buttons -------------------------------------------------------------- */
html.dark .btn {
  box-shadow: none;
}

html.dark .btn-light {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .btn-light:hover,
html.dark .btn-light:focus {
  background: var(--dark-surface-4);
  color: #ffffff;
  border-color: var(--dark-border-strong);
}

html.dark .btn-white,
html.dark .btn-outline-light,
html.dark .btn-link,
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .cd-horizontal-timeline .events a.selected::after,
html.dark .cd-horizontal-timeline .events a:hover::after,
html.dark .cd-horizontal-timeline .events a.older-event::after {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

html.dark .cd-timeline-navigation a:hover,
html.dark .cd-timeline-navigation a:focus {
  border-color: var(--color-primary);
}
/* Error & utility pages ----------------------------------------------- */
html.dark .error-pages,
html.dark .error-box,
html.dark .lock-user,
html.dark .voice-call-avatar {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .error-box .btn,
html.dark .submit-btn {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}
html.dark .bar-chart > .legend > .item,
html.dark .bar-chart > .legend > .item:before,
html.dark .bar-chart > .legend > .item h4 {
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .bar-chart > .legend > .item:before {
  background: var(--dark-text);
}
html.dark .table .bg-success-dark,
html.dark .table .bg-danger-dark {
  color: #ffffff;
}
html.dark .status,
html.dark .status.online,
html.dark .status.offline,
html.dark .status.away {
  border: 2px solid var(--dark-surface-1);
}
html.dark .check:checked + .checktoggles:after,
html.dark .check:checked + .checktoggle:after {
  background: #ffffff;
}
html.dark .wave {
  background: radial-gradient(circle at 30% 30%, rgba(70, 136, 109, 0.28), rgba(52, 104, 80, 0.45));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
html.dark .custom-file-container__image-multi-preview__single-image-clear__icon {
  color: var(--color-primary);
}
html.dark .call-icons,
html.dark .call-icons .call-items {
  background: var(--dark-surface-2);
  border-radius: 12px;
}

html.dark .call-icons .call-items .call-item a {
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
}

html.dark .call-icons .call-items .call-item a:hover {
  opacity: 0.85;
}
html.dark .call-mute {
  background: rgba(15, 18, 24, 0.65);
  border: 1px solid var(--dark-border);
}
html.dark .call-timing,
html.dark .voice-call-user p,
html.dark .chat-user-blk .user-text,
html.dark .comman-activitys p,
html.dark .doctor-follows h5,
html.dark .departments-list p,
html.dark .appoint-time span,
html.dark .appoint-time h6,
html.dark .income-value p,
html.dark .steps-history li,
html.dark .doctor-date-list li span,
html.dark .timeline-body > p + p,
html.dark .blog-content p,
html.dark .blog-info a,
html.dark .mailview-content p span {
  color: var(--dark-text-muted);
}
html.dark .income-value h3 span,
html.dark .patient-structure h3 span,
html.dark .doctor-content h4 span:last-child,
html.dark .doctor-content h4 span:nth-child(2),
html.dark .appoint-time span,
html.dark .patient-table tbody tr td:nth-child(3) {
  color: var(--dark-text-muted);
}
html.dark .nav .open > a,
html.dark .nav .open > a:focus,
html.dark .nav .open > a:hover {
  background: var(--dark-surface-3);
}
html.dark .timeline-badge.primary { background-color: #fb9678; }
html.dark .timeline-badge.success { background-color: #00c292; }
html.dark .timeline-badge.warning { background-color: #fec107; }
html.dark .timeline-badge.danger { background-color: #e46a76; }
html.dark .timeline-badge.info { background-color: #03a9f3; }
html.dark .voice-menu-income .call-remove { background: #fe3f51; }
html.dark .voice-menu-income .call-received { background: #0dbf0a; }
html.dark .invoice-info > strong > a,
html.dark .invoice-inner-head span a,
html.dark .invoice-total-box .add-links,
html.dark .invoice-total-box .add-links1,
html.dark .invoice-total-box .add-links-one,
html.dark .invoice-add-table .add-btns,
html.dark .invoice-add-table .copy-btn,
html.dark .invoice-add-table .remove-btn,
html.dark .invoice-total-inner a,
html.dark .field-box > a,
html.dark .invoice-total-footer h4 span,
html.dark .invoice-info.invoice-info2,
html.dark .invoice-name,
html.dark .invoice-head h2,
html.dark .invoice-head p,
html.dark .invoice-grid-card .card-footer .badge,
html.dark .invoices-links,
html.dark .invoices-links.active,
html.dark .invoices-settings-icon,
html.dark .invoice-counts a,
html.dark .invoice-terms h6,
html.dark .invoice-terms p,
html.dark .invoice-sign span,
html.dark .invoice-info-card .customer-text-one,
html.dark .invoice-item .customer-text a {
  color: var(--dark-link);
}

html.dark .invoice-info > strong > a:hover,
html.dark .invoice-inner-head span a:hover,
html.dark .invoice-total-box .add-links:hover,
html.dark .invoice-total-box .add-links1:hover,
html.dark .invoice-total-box .add-links-one:hover,
html.dark .field-box > a:hover,
html.dark .invoices-links:hover,
html.dark .invoice-counts a:hover,
html.dark .invoice-add-table .remove-btn:hover {
  color: var(--dark-link-hover);
}
html.dark .invoice-load-btn .btn span {
  border: 3px solid rgba(99, 182, 255, 0.28);
  border-right-color: var(--dark-text);
}
html.dark .icons-list li {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
html.dark .call-all h4 span {
  background: #0dbf0a;
  color: #ffffff;
}
html.dark .voice-time h3,
html.dark .dash-content h5,
html.dark .dash-content h2,
html.dark .doctor-content h4,
html.dark .doctor-follows h4,
html.dark .patient-structure h3,
html.dark .income-value h3,
html.dark .call-all h4,
html.dark .chat-heading h3,
html.dark .report-head h4,
html.dark .bar-chart > .chart > .item > .bar > .item-progress > .title {
  color: var(--dark-text);
}

/* -----------------------------------------------------------------------
   Medical record floaters & history overlays
   ----------------------------------------------------------------------- */
html.dark .medical-record-modal {
  background-color: rgba(8, 11, 17, 0.85);
  backdrop-filter: blur(2px);
}

html.dark .medical-record-modal .medical-record-content {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-strong);
}

html.dark .medical-record-modal .main-header {
  background: linear-gradient(135deg, var(--dark-surface-3), var(--dark-surface-4));
  border-bottom: 1px solid var(--dark-border-strong);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
}

html.dark .medical-record-modal .patient-info {
  background: var(--dark-surface-3);
  border-bottom: 1px solid var(--dark-border);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

html.dark .medical-record-modal .info-item {
  border-right: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .medical-record-modal .info-item:last-child {
  border-right-color: transparent;
}

html.dark .medical-record-modal .info-item .text-muted,
html.dark .medical-record-modal .info-item .small,
html.dark .medical-record-modal .info-item small {
  color: var(--dark-text-soft) !important;
}

html.dark .medical-record-modal .info-item > div:not(.text-muted) {
  color: var(--dark-text);
}

html.dark .medical-record-modal .text-muted,
html.dark .medical-record-modal .small,
html.dark .medical-record-modal small,
html.dark .medical-record-modal label,
html.dark .medical-record-modal .form-text {
  color: var(--dark-text-soft) !important;
}

html.dark .medical-record-modal .record-item {
  background: linear-gradient(90deg, rgba(99, 182, 255, 0.12), transparent);
  border-left: 4px solid rgba(99, 182, 255, 0.6);
}

html.dark .medical-record-modal .diagnosis-badge {
  background: rgba(99, 182, 255, 0.18);
  color: var(--dark-link);
  border: 1px solid rgba(99, 182, 255, 0.32);
}

html.dark .medical-record-modal .close-button {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

html.dark .medical-record-modal .close-button:hover {
  background: var(--dark-surface-4);
  color: #ffffff;
}

html.dark .medical-record-modal .profile-tabs .nav-tabs {
  background: var(--dark-surface-3);
  border-color: var(--dark-border);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

html.dark .medical-record-modal .tab-content {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  border-top: none;
  box-shadow: var(--dark-shadow-soft);
}

html.dark .medical-record-modal .panel,
html.dark .medical-record-modal .panel-default {
  background: var(--dark-surface-2);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .medical-record-modal .panel-heading {
  background: var(--dark-surface-3);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

html.dark .medical-record-modal .panel-title a {
  color: var(--dark-text);
}

html.dark .medical-record-modal .panel-body {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .medical-record-modal .card,
html.dark .medical-record-modal .card-box {
  background: var(--dark-surface-2);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .medical-record-modal .list-group-item {
  background: var(--dark-surface-1);
  border-color: var(--dark-border);
}

html.dark .medical-record-modal .table thead {
  background: var(--dark-surface-3);
  color: var(--dark-text);
}

html.dark .medical-record-modal .table thead th,
html.dark .medical-record-modal .table tbody td,
html.dark .medical-record-modal .table tbody th {
  border-color: var(--dark-border);
}

html.dark .medical-record-modal .table tbody tr {
  background: var(--dark-surface-1);
}

html.dark .medical-record-modal .table tbody tr:nth-of-type(2n) {
  background: var(--dark-surface-2);
}

html.dark .medical-record-modal .table-hover tbody tr:hover {
  background: var(--dark-surface-3);
}

html.dark .medical-record-modal .btn-historia {
  background: linear-gradient(120deg, #5b82f7, #3f5cc7);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(63, 92, 199, 0.35);
}

html.dark .medical-record-modal .btn-historia:hover {
  background: linear-gradient(120deg, #6b8dff, #4968de);
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(73, 104, 222, 0.4);
}

html.dark .medical-record-modal .archivo-card {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .medical-record-modal .archivo-card:hover {
  border-color: rgba(99, 182, 255, 0.45);
  box-shadow: 0 16px 34px rgba(99, 182, 255, 0.28);
}

html.dark #flotante_detalle_internacion {
  background-color: var(--dark-overlay);
}

html.dark table.table td h2 span {
  color: var(--dark-text-muted);
}
/* DataTables ----------------------------------------------------------- */
html.dark table.dataTable,
html.dark .dataTables_wrapper table.dataTable {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark table.dataTable > thead > tr > th,
html.dark table.dataTable > thead > tr > td,
html.dark table.dataTable > tfoot > tr > th,
html.dark table.dataTable > tfoot > tr > td {
  background-color: var(--dark-surface-2);
  color: var(--dark-text);
  border-color: var(--dark-border) !important;
}

html.dark table.dataTable > tbody,
html.dark table.dataTable > tbody > tr {
  background-color: var(--dark-surface-1);
}

html.dark table.dataTable > tbody > tr > th,
html.dark table.dataTable > tbody > tr > td {
  background-color: transparent !important;
  color: var(--dark-text);
  border-color: var(--dark-border) !important;
}

html.dark table.dataTable > tbody > tr > td.dataTables_empty,
html.dark .dt-container table.dataTable > tbody > tr > td.dt-empty {
  background-color: var(--dark-surface-2) !important;
  color: var(--dark-text);
}

html.dark table.dataTable.stripe > tbody > tr.odd > *,
html.dark table.dataTable.display > tbody > tr.odd > * {
  background-color: var(--dark-surface-3) !important;
}

html.dark .dt-container table.dataTable > tbody > tr.dt-rowOdd > * {
  background-color: var(--dark-surface-3) !important;
}

html.dark .dt-container table.dataTable > tbody > tr.dt-rowEven > * {
  background-color: var(--dark-surface-1) !important;
}

html.dark table.dataTable.hover > tbody > tr:hover > *,
html.dark table.dataTable.display > tbody > tr:hover > * {
  background-color: var(--dark-surface-4) !important;
  color: var(--dark-text);
}

html.dark .dt-container table.dataTable > tbody > tr.dt-rowHover > * {
  background-color: var(--dark-surface-4) !important;
  color: var(--dark-text);
}

html.dark table.dataTable > tbody > tr.child > td {
  background-color: var(--dark-surface-2) !important;
  color: var(--dark-text);
}

html.dark table.dataTable tbody tr > .sorting_1,
html.dark table.dataTable tbody tr > .sorting_2,
html.dark table.dataTable tbody tr > .sorting_3 {
  background-color: rgba(99, 182, 255, 0.14) !important;
  color: var(--dark-text);
}

html.dark table.dataTable tbody tr.odd > .sorting_1,
html.dark table.dataTable.display tbody tr.odd > .sorting_1 {
  background-color: rgba(99, 182, 255, 0.18) !important;
}

html.dark table.dataTable tbody tr.selected > *,
html.dark table.dataTable tbody tr.selected > .sorting_1,
html.dark table.dataTable tbody tr.selected > .sorting_2,
html.dark table.dataTable tbody tr.selected > .sorting_3,
html.dark .dt-container .dt-rowSelected > * {
  background-color: rgba(99, 182, 255, 0.24) !important;
  color: var(--dark-text);
}

html.dark .dataTables_wrapper .dataTables_filter label,
html.dark .dataTables_wrapper .dataTables_length label,
html.dark .dataTables_wrapper .dataTables_info,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--dark-text);
}

html.dark .dt-container .dt-length label,
html.dark .dt-container .dt-search label {
  color: var(--dark-text) !important;
}

html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  border-radius: 8px;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: var(--dark-surface-3) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--dark-surface-4) !important;
  border-color: var(--dark-border-strong) !important;
  color: #ffffff !important;
}

html.dark .dt-container .dt-search input.dt-input,
html.dark .dt-container .dt-length select.dt-input,
html.dark .dt-container .dt-input {
  background: var(--dark-surface-3) !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-border) !important;
}

html.dark .dt-container .dt-info {
  color: var(--dark-text) !important;
}

html.dark .dt-container .dt-paging .dt-paging-button {
  background: var(--dark-surface-3) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .dt-container .dt-paging .dt-paging-button.current,
html.dark .dt-container .dt-paging .dt-paging-button:hover {
  background: var(--dark-surface-4) !important;
  border-color: var(--dark-border-strong) !important;
  color: #ffffff !important;
}

html.dark .dt-container .dt-scroll,
html.dark .dt-container .dt-scroll-head,
html.dark .dt-container .dt-scroll-body,
html.dark .dt-container .dt-scroll-foot {
  background: var(--dark-surface-2) !important;
}
/* Dropdowns & modals --------------------------------------------------- */
html.dark .dropdown-menu,
html.dark .modal-content,
html.dark .modal-header,
html.dark .modal-footer,
html.dark .list-group-item {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .dropdown-item,
html.dark .dropdown-item i {
  color: var(--dark-text-soft);
}

html.dark .dropdown-item:hover {
  background: var(--dark-surface-3);
  color: #ffffff;
}

html.dark .modal-header,
html.dark .card-header,
html.dark .mailview-header {
  background: var(--dark-surface-2);
}

html.dark .modal-footer,
html.dark .card-footer,
html.dark .mailview-footer {
  background: var(--dark-surface-2);
}
/* Tabs & pills --------------------------------------------------------- */
html.dark .nav-tabs .nav-link,
html.dark .nav-tabs > li > a,
html.dark .nav-tabs.nav-tabs-solid > li > a,
html.dark .nav-tabs.nav-tabs-solid,
html.dark .nav-tabs.menu-tabs,
html.dark ul.nav.nav-tabs.menu-tabs,
html.dark .nav-pills .nav-link,
html.dark .wizard .nav-item .nav-link {
  background: var(--dark-surface-2);
  color: var(--dark-text-muted);
  border-color: var(--dark-border);
}

html.dark .nav-tabs .nav-link:hover,
html.dark .nav-tabs > li > a:hover,
html.dark .wizard .nav-item .nav-link:hover,
html.dark .nav-pills .nav-link:hover {
  color: var(--dark-text);
  background: var(--dark-surface-3);
}

html.dark .nav-tabs .nav-link.active,
html.dark .nav-tabs > li > a.active,
html.dark .nav-tabs.nav-tabs-solid > li > a.active,
html.dark .nav-tabs.menu-tabs .nav-link.active,
html.dark .wizard .nav-item .nav-link.active,
html.dark .nav-pills .nav-link.active {
  background: var(--dark-surface-4);
  border-color: var(--dark-border-strong);
  color: #ffffff;
}
/* Login & authentication ----------------------------------------------- */
html.dark .login-wrap {
  background: linear-gradient(140deg, var(--dark-surface-2), var(--dark-surface-4));
}

html.dark .login-wrapper .loginbox {
  background: var(--dark-surface-1);
  box-shadow: var(--dark-shadow-strong);
  border: 1px solid var(--dark-border);
}

html.dark .login-wrapper .loginbox .login-right,
html.dark .login-wrapper .loginbox .login-right .input-block label,
html.dark .login-right .form-control {
  color: var(--dark-text);
}

html.dark .login-wrapper .loginbox .login-right .forgotpass a,
html.dark .login-wrapper .loginbox .login-right .dont-have a,
html.dark .account-subtitle a {
  color: var(--dark-link);
}

html.dark .login-wrapper .loginbox .login-right .forgotpass a:hover,
html.dark .login-wrapper .loginbox .login-right .dont-have a:hover {
  color: var(--dark-link-hover);
}

html.dark .social-login > a {
  background: var(--dark-surface-3);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .social-login > a:hover {
  background: var(--dark-surface-4);
  color: #ffffff;
}
/* Ribbons -------------------------------------------------------------- */
html.dark .ribbon,
html.dark .ribbon-right,
html.dark .ribbon-vertical-left,
html.dark .ribbon-vertical-right {
  box-shadow: var(--dark-shadow-soft);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

html.dark .ribbon-primary {
  --ribbon-main: var(--color-primary);
  --ribbon-alt: #0bbf4a;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-secondary {
  --ribbon-main: #f73164;
  --ribbon-alt: #d4224c;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-success {
  --ribbon-main: #51bb25;
  --ribbon-alt: #3f901d;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-danger {
  --ribbon-main: #dc3545;
  --ribbon-alt: #bd2130;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-info {
  --ribbon-main: #03a9f3;
  --ribbon-alt: #2e82ff;
  --ribbon-contrast: #ffffff;
}

html.dark .ribbon-warning {
  --ribbon-main: #f8d62b;
  --ribbon-alt: #e8c308;
  --ribbon-contrast: #1f1500;
}

html.dark .ribbon-light {
  --ribbon-main: var(--dark-surface-4);
  --ribbon-alt: var(--dark-border);
  --ribbon-contrast: var(--dark-text);
}

html.dark .ribbon-dark {
  --ribbon-main: #343b4c;
  --ribbon-alt: #242a37;
  --ribbon-contrast: #ffffff;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ) {
  background: var(--ribbon-main);
  color: var(--ribbon-contrast);
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-corner:before {
  border-top-color: var(--ribbon-alt);
  border-left-color: var(--ribbon-alt);
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-corner.ribbon-right:before {
  border-right-color: var(--ribbon-alt);
  border-left-color: transparent;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-corner.ribbon-bottom:before {
  border-bottom-color: var(--ribbon-alt);
  border-top-color: transparent;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip:before,
html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-right:before,
html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-bottom:before,
html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-bottom-right:before {
  border-color: transparent;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip:before {
  border-top-color: var(--ribbon-alt);
  border-right-color: var(--ribbon-alt);
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-right:before {
  border-top-color: var(--ribbon-alt);
  border-left-color: var(--ribbon-alt);
  border-right-color: transparent;
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-bottom:before {
  border-bottom-color: var(--ribbon-alt);
  border-right-color: var(--ribbon-alt);
}

html.dark :is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ).ribbon-clip-bottom-right:before {
  border-bottom-color: var(--ribbon-alt);
  border-left-color: var(--ribbon-alt);
}

html.dark .ribbon-bookmark:is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ):before {
  border-color: var(--ribbon-alt);
  border-right-color: transparent;
}

html.dark .ribbon-bookmark.ribbon-right:is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ):before {
  border-right-color: var(--ribbon-alt);
  border-left-color: transparent;
}

html.dark .ribbon-bookmark.ribbon-vertical-left:is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ):before,
html.dark .ribbon-bookmark.ribbon-vertical-right:is(
    .ribbon-primary,
    .ribbon-secondary,
    .ribbon-success,
    .ribbon-danger,
    .ribbon-info,
    .ribbon-warning,
    .ribbon-light,
    .ribbon-dark
  ):before {
  border-right-color: var(--ribbon-alt);
  border-bottom-color: transparent;
}

html.dark .ribbon-warning,
html.dark .ribbon-light {
  text-shadow: none;
}

html.dark .ribbon-warning,
html.dark .ribbon-light,
html.dark .ribbon-primary,
html.dark .ribbon-secondary,
html.dark .ribbon-success,
html.dark .ribbon-danger,
html.dark .ribbon-info,
html.dark .ribbon-dark {
  border: 0;
}
/* Charts, calendar and timeline --------------------------------------- */
html.dark .apexcharts-title-text,
html.dark .apexcharts-subtitle-text,
html.dark .apexcharts-legend-text,
html.dark .apexcharts-datalabel,
html.dark .apexcharts-xaxis text,
html.dark .apexcharts-yaxis text {
  fill: var(--dark-text) !important;
  color: var(--dark-text) !important;
}

html.dark .apexcharts-tooltip {
  background: var(--dark-surface-2) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .apexcharts-tooltip .apexcharts-tooltip-title {
  background: var(--dark-surface-3) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .fc,
html.dark .fc .fc-scrollgrid,
html.dark .fc-day,
html.dark .fc-daygrid-day,
html.dark .fc-daygrid-day-frame,
html.dark .fc-col-header,
html.dark .fc-event,
html.dark .fc-toolbar,
html.dark .calendar {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .fc th.fc-widget-header,
html.dark .fc-col-header-cell {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .fc-event,
html.dark .fc-event-dot,
html.dark .fc-daygrid-event {
  background: var(--color-primary);
  border: 0;
  color: #ffffff;
}

html.dark .fc-toolbar h2,
html.dark .fc-toolbar .fc-button {
  color: var(--dark-text);
}

html.dark .fc-toolbar .fc-button {
  background: var(--dark-surface-3);
  border: 1px solid var(--dark-border);
}

html.dark .fc-toolbar .fc-button:hover,
html.dark .fc-toolbar .fc-button.fc-state-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}
html.dark .tag,
html.dark .tags li,
html.dark .categories li,
html.dark .categories li a {
  color: var(--dark-text);
}

html.dark .tag:hover,
html.dark .categories li a:hover,
html.dark .read-more:hover,
html.dark .blog-info a:hover {
  color: var(--dark-link);
  background: var(--dark-surface-3);
}
/* Avatars -------------------------------------------------------------- */
html.dark .avatar,
html.dark .user-img .status {
  background: var(--dark-surface-4);
  color: var(--dark-text);
}

html.dark .avatar.avatar-online::before,
html.dark .avatar.avatar-offline::before,
html.dark .avatar.avatar-away::before,
html.dark .user-img .status {
  border-color: var(--dark-surface-1);
}
/* Accent helpers ------------------------------------------------------- */
html.dark .bg-primary,
html.dark .bg-success,
html.dark .bg-info,
html.dark .bg-warning,
html.dark .bg-danger,
html.dark .badge-primary,
html.dark .badge-success,
html.dark .badge-info,
html.dark .badge-warning,
html.dark .badge-danger,
html.dark .badge.bg-secondary,
html.dark .badge.rounded-pill {
  color: #ffffff;
}
/* Preloader & alerts --------------------------------------------------- */
html.dark .preloader {
  background: var(--dark-overlay);
}

html.dark .preloader::before {
  background: linear-gradient(var(--dark-overlay), rgba(15, 18, 24, 0));
}

html.dark .circle1,
html.dark .circle2,
html.dark .circle3 {
  background: var(--color-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

html.dark .circle2 {
  background: var(--dark-surface-4);
}

html.dark .notyfcustom {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .notyfcustom:hover {
  background: linear-gradient(120deg, var(--color-primary), var(--dark-surface-4));
}

html.dark .custom-alert-background-text {
  color: rgba(255, 99, 99, 0.12);
}

html.dark .custom-alert-scan-line {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.45) 35%, rgba(255, 255, 255, 0));
}
/* Emoji picker --------------------------------------------------------- */
html.dark .emoji-popup {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-strong);
  color: var(--dark-text);
}

html.dark .emoji-tabs {
  border-bottom: 1px solid var(--dark-border);
}

html.dark .emoji-tab {
  color: var(--dark-text-muted);
}

html.dark .emoji-tab.active {
  border-bottom: 2px solid var(--color-primary);
  color: var(--dark-text);
}

html.dark .emoji-section {
  background: var(--dark-surface-1);
}
/* Progress & metrics --------------------------------------------------- */
html.dark .progress,
html.dark .progress-example .progress,
html.dark .progress.progress-sm,
html.dark .progress.progress-md,
html.dark .progress.progress-lg,
html.dark .weight-bar.progress {
  background: var(--dark-surface-3);
  border-radius: 12px;
}

html.dark .progress .progress-bar,
html.dark .weight-bar .progress-bar {
  box-shadow: none;
}
html.dark .settings-form .social-icon,
html.dark .settings-form .trash,
html.dark .add-links,
html.dark .label-add-list li .add-list-btn,
html.dark .mail-reports ul li .ford-angle,
html.dark .mail-reports ul li .ford-angle.star-bg {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .settings-form .social-icon::after {
  color: var(--dark-text);
}
html.dark .cd-horizontal-timeline .events,
html.dark .cd-horizontal-timeline .events a,
html.dark .cd-horizontal-timeline .events a::after,
html.dark .cd-horizontal-timeline .filling-line,
html.dark .cd-timeline-navigation a,
html.dark .cd-timeline-navigation a::after {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .cd-horizontal-timeline .events a.selected::after,
html.dark .cd-horizontal-timeline .events a:hover::after,
html.dark .cd-horizontal-timeline .events a.older-event::after {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

html.dark .cd-timeline-navigation a:hover,
html.dark .cd-timeline-navigation a:focus {
  border-color: var(--color-primary);
}
/* Error & utility pages ----------------------------------------------- */
html.dark .error-pages,
html.dark .error-box,
html.dark .lock-user,
html.dark .voice-call-avatar {
  background: var(--dark-surface-1);
  color: var(--dark-text);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .error-box .btn,
html.dark .submit-btn {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}
html.dark .bar-chart > .legend > .item,
html.dark .bar-chart > .legend > .item:before,
html.dark .bar-chart > .legend > .item h4 {
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .bar-chart > .legend > .item:before {
  background: var(--dark-text);
}
html.dark .table .bg-success-dark,
html.dark .table .bg-danger-dark {
  color: #ffffff;
}
html.dark .status,
html.dark .status.online,
html.dark .status.offline,
html.dark .status.away {
  border: 2px solid var(--dark-surface-1);
}
html.dark .check:checked + .checktoggles:after,
html.dark .check:checked + .checktoggle:after {
  background: #ffffff;
}
html.dark .wave {
  background: radial-gradient(circle at 30% 30%, rgba(70, 136, 109, 0.28), rgba(52, 104, 80, 0.45));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
html.dark .custom-file-container__image-multi-preview__single-image-clear__icon {
  color: var(--color-primary);
}
html.dark .call-icons,
html.dark .call-icons .call-items {
  background: var(--dark-surface-2);
  border-radius: 12px;
}

html.dark .call-icons .call-items .call-item a {
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
}

html.dark .call-icons .call-items .call-item a:hover {
  opacity: 0.85;
}
html.dark .call-mute {
  background: rgba(15, 18, 24, 0.65);
  border: 1px solid var(--dark-border);
}
html.dark .call-timing,
html.dark .voice-call-user p,
html.dark .chat-user-blk .user-text,
html.dark .comman-activitys p,
html.dark .doctor-follows h5,
html.dark .departments-list p,
html.dark .appoint-time span,
html.dark .appoint-time h6,
html.dark .income-value p,
html.dark .steps-history li,
html.dark .doctor-date-list li span,
html.dark .timeline-body > p + p,
html.dark .blog-content p,
html.dark .blog-info a,
html.dark .mailview-content p span {
  color: var(--dark-text-muted);
}
html.dark .income-value h3 span,
html.dark .patient-structure h3 span,
html.dark .doctor-content h4 span:last-child,
html.dark .doctor-content h4 span:nth-child(2),
html.dark .appoint-time span,
html.dark .patient-table tbody tr td:nth-child(3) {
  color: var(--dark-text-muted);
}
html.dark .nav .open > a,
html.dark .nav .open > a:focus,
html.dark .nav .open > a:hover {
  background: var(--dark-surface-3);
}
html.dark .timeline-badge.primary { background-color: #fb9678; }
html.dark .timeline-badge.success { background-color: #00c292; }
html.dark .timeline-badge.warning { background-color: #fec107; }
html.dark .timeline-badge.danger { background-color: #e46a76; }
html.dark .timeline-badge.info { background-color: #03a9f3; }
html.dark .voice-menu-income .call-remove { background: #fe3f51; }
html.dark .voice-menu-income .call-received { background: #0dbf0a; }
html.dark .invoice-info > strong > a,
html.dark .invoice-inner-head span a,
html.dark .invoice-total-box .add-links,
html.dark .invoice-total-box .add-links1,
html.dark .invoice-total-box .add-links-one,
html.dark .invoice-add-table .add-btns,
html.dark .invoice-add-table .copy-btn,
html.dark .invoice-add-table .remove-btn,
html.dark .invoice-total-inner a,
html.dark .field-box > a,
html.dark .invoice-total-footer h4 span,
html.dark .invoice-info.invoice-info2,
html.dark .invoice-name,
html.dark .invoice-head h2,
html.dark .invoice-head p,
html.dark .invoice-grid-card .card-footer .badge,
html.dark .invoices-links,
html.dark .invoices-links.active,
html.dark .invoices-settings-icon,
html.dark .invoice-counts a,
html.dark .invoice-terms h6,
html.dark .invoice-terms p,
html.dark .invoice-sign span,
html.dark .invoice-info-card .customer-text-one,
html.dark .invoice-item .customer-text a {
  color: var(--dark-link);
}

html.dark .invoice-info > strong > a:hover,
html.dark .invoice-inner-head span a:hover,
html.dark .invoice-total-box .add-links:hover,
html.dark .invoice-total-box .add-links1:hover,
html.dark .invoice-total-box .add-links-one:hover,
html.dark .field-box > a:hover,
html.dark .invoices-links:hover,
html.dark .invoice-counts a:hover,
html.dark .invoice-add-table .remove-btn:hover {
  color: var(--dark-link-hover);
}
html.dark .invoice-load-btn .btn span {
  border: 3px solid rgba(99, 182, 255, 0.28);
  border-right-color: var(--dark-text);
}
html.dark .icons-list li {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
html.dark .call-all h4 span {
  background: #0dbf0a;
  color: #ffffff;
}
html.dark .voice-time h3,
html.dark .dash-content h5,
html.dark .dash-content h2,
html.dark .doctor-content h4,
html.dark .doctor-follows h4,
html.dark .patient-structure h3,
html.dark .income-value h3,
html.dark .call-all h4,
html.dark .chat-heading h3,
html.dark .report-head h4,
html.dark .bar-chart > .chart > .item > .bar > .item-progress > .title {
  color: var(--dark-text);
}

/* -----------------------------------------------------------------------
   Medical record floaters & history overlays
   ----------------------------------------------------------------------- */
html.dark .medical-record-modal {
  background-color: rgba(8, 11, 17, 0.85);
  backdrop-filter: blur(2px);
}

html.dark .medical-record-modal .medical-record-content {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-strong);
}

html.dark .medical-record-modal .main-header {
  background: linear-gradient(135deg, var(--dark-surface-3), var(--dark-surface-4));
  border-bottom: 1px solid var(--dark-border-strong);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
}

html.dark .medical-record-modal .patient-info {
  background: var(--dark-surface-3);
  border-bottom: 1px solid var(--dark-border);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

html.dark .medical-record-modal .info-item {
  border-right: 1px solid var(--dark-border);
  color: var(--dark-text);
}

html.dark .medical-record-modal .info-item:last-child {
  border-right-color: transparent;
}

html.dark .medical-record-modal .info-item .text-muted,
html.dark .medical-record-modal .info-item .small,
html.dark .medical-record-modal .info-item small {
  color: var(--dark-text-soft) !important;
}

html.dark .medical-record-modal .info-item > div:not(.text-muted) {
  color: var(--dark-text);
}

html.dark .medical-record-modal .text-muted,
html.dark .medical-record-modal .small,
html.dark .medical-record-modal small,
html.dark .medical-record-modal label,
html.dark .medical-record-modal .form-text {
  color: var(--dark-text-soft) !important;
}

html.dark .medical-record-modal .record-item {
  background: linear-gradient(90deg, rgba(99, 182, 255, 0.12), transparent);
  border-left: 4px solid rgba(99, 182, 255, 0.6);
}

html.dark .medical-record-modal .diagnosis-badge {
  background: rgba(99, 182, 255, 0.18);
  color: var(--dark-link);
  border: 1px solid rgba(99, 182, 255, 0.32);
}

html.dark .medical-record-modal .close-button {
  background: var(--dark-surface-3);
  color: var(--dark-text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

html.dark .medical-record-modal .close-button:hover {
  background: var(--dark-surface-4);
  color: #ffffff;
}

html.dark .medical-record-modal .profile-tabs .nav-tabs {
  background: var(--dark-surface-3);
  border-color: var(--dark-border);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

html.dark .medical-record-modal .tab-content {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  border-top: none;
  box-shadow: var(--dark-shadow-soft);
}

html.dark .medical-record-modal .panel,
html.dark .medical-record-modal .panel-default {
  background: var(--dark-surface-2);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .medical-record-modal .panel-heading {
  background: var(--dark-surface-3);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

html.dark .medical-record-modal .panel-title a {
  color: var(--dark-text);
}

html.dark .medical-record-modal .panel-body {
  background: var(--dark-surface-2);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .medical-record-modal .card,
html.dark .medical-record-modal .card-box {
  background: var(--dark-surface-2);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .medical-record-modal .list-group-item {
  background: var(--dark-surface-1);
  border-color: var(--dark-border);
}

html.dark .medical-record-modal .table thead {
  background: var(--dark-surface-3);
  color: var(--dark-text);
}

html.dark .medical-record-modal .table thead th,
html.dark .medical-record-modal .table tbody td,
html.dark .medical-record-modal .table tbody th {
  border-color: var(--dark-border);
}

html.dark .medical-record-modal .table tbody tr {
  background: var(--dark-surface-1);
}

html.dark .medical-record-modal .table tbody tr:nth-of-type(2n) {
  background: var(--dark-surface-2);
}

html.dark .medical-record-modal .table-hover tbody tr:hover {
  background: var(--dark-surface-3);
}

html.dark .medical-record-modal .btn-historia {
  background: linear-gradient(120deg, #5b82f7, #3f5cc7);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(63, 92, 199, 0.35);
}

html.dark .medical-record-modal .btn-historia:hover {
  background: linear-gradient(120deg, #6b8dff, #4968de);
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(73, 104, 222, 0.4);
}

html.dark .medical-record-modal .archivo-card {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow-soft);
}

html.dark .medical-record-modal .archivo-card:hover {
  border-color: rgba(99, 182, 255, 0.45);
  box-shadow: 0 16px 34px rgba(99, 182, 255, 0.28);
}

html.dark #flotante_detalle_internacion {
  background-color: var(--dark-overlay);
}

/* =======================================================================
   Chat System - Dark Mode (Buz�n)
   ======================================================================= */

/* Textarea auto-ajustable para mensajes */
html.dark #chatMessageInput {
    background: var(--dark-surface-2);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark #chatMessageInput:focus {
    background: var(--dark-surface-3);
    border-color: var(--dark-link);
    color: var(--dark-text);
    box-shadow: 0 0 0 0.2rem rgba(99, 182, 255, 0.15);
}

html.dark #chatMessageInput::placeholder {
    color: var(--dark-text-muted);
    opacity: 0.7;
}

/* Estado vac�o del chat */
html.dark .chat-empty-state {
    background: var(--dark-surface-1);
    color: var(--dark-text-muted);
}

html.dark .chat-empty-state i {
    color: var(--dark-border-strong);
}

/* Mensajes */
html.dark .chat-message li.received .msg-box,
html.dark .chat-message li.received .message-sub-box {
    background: var(--dark-surface-2);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark .chat-message li.sent .msg-box,
html.dark .chat-message li.sent .message-sub-box {
    background: rgba(99, 182, 255, 0.15);
    color: var(--dark-text);
    border-color: rgba(99, 182, 255, 0.25);
}

html.dark .chat-message li.sent .message-sub-box p {
    color: var(--dark-text-soft);
}

html.dark .message-sub-box span {
    color: var(--dark-text-muted);
    opacity: 0.8;
}

/* Separadores de fecha */
html.dark .date-separator {
    color: var(--dark-text-muted);
}

html.dark .date-separator hr {
    border-color: var(--dark-border);
    opacity: 0.5;
}

html.dark .date-separator .label {
    background: var(--dark-surface-1);
    color: var(--dark-text-muted);
}

/* Lista de conversaciones */
html.dark .conversation-item {
    border-color: var(--dark-border);
}

html.dark .conversation-item:hover {
    background: var(--dark-surface-2);
}

html.dark .conversation-item.active {
    background: var(--dark-surface-3);
    border-left-color: var(--dark-link);
}

html.dark .conversation-item.unread-conversation {
    background: rgba(99, 182, 255, 0.05);
}

html.dark .conversation-item.unread-conversation:hover {
    background: rgba(99, 182, 255, 0.1);
}

html.dark .conversation-item .unread-count-badge {
    background: var(--dark-link);
    color: #ffffff;
}

/* Header del chat */
html.dark #chatHeaderCard {
    background: var(--dark-surface-1);
    border-color: var(--dark-border);
}

html.dark .chat-search-group {
    background: var(--dark-surface-1);
    border-color: var(--dark-border);
}

/* B�squeda de conversaciones */
html.dark .chat-search input.form-control {
    background: var(--dark-surface-2);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark .chat-search input.form-control:focus {
    background: var(--dark-surface-3);
    border-color: var(--dark-link);
    color: var(--dark-text);
}

html.dark .chat-search input.form-control::placeholder {
    color: var(--dark-text-muted);
}

html.dark .chat-search .btn {
    background: transparent;
    border-color: var(--dark-border);
}

html.dark .chat-search .btn:hover {
    background: var(--dark-surface-3);
}

/* Bot�n de nueva conversaci�n */
html.dark .add-search a {
    background: var(--dark-surface-2);
    color: var(--dark-link);
    border-color: var(--dark-border);
}

html.dark .add-search a:hover {
    background: var(--dark-surface-3);
    color: var(--dark-link-hover);
}

/* Footer de env�o de mensajes */
html.dark .chat-footer-box {
    background: var(--dark-surface-1);
    border-color: var(--dark-border);
}

html.dark .footer-discussion {
    background: var(--dark-surface-1);
}

html.dark .footer-discussion .inputgroups {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
}

/* Botones de acci�n del chat */
html.dark .footer-discussion button,
html.dark .footer-discussion .btn {
    background: var(--dark-surface-2);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark .footer-discussion button:hover,
html.dark .footer-discussion .btn:hover {
    background: var(--dark-surface-3);
    color: var(--dark-link);
}

html.dark .footer-discussion button:disabled,
html.dark .footer-discussion .btn:disabled {
    background: var(--dark-surface-1);
    color: var(--dark-text-muted);
    opacity: 0.5;
}

/* Bot�n de env�o */
html.dark #chatSendButton {
    background: var(--dark-link);
    color: #ffffff;
    border-color: var(--dark-link);
}

html.dark #chatSendButton:hover:not(:disabled) {
    background: #75c2ff;
    border-color: #75c2ff;
}

html.dark #chatSendButton:disabled {
    background: var(--dark-surface-2);
    color: var(--dark-text-muted);
    opacity: 0.6;
}

/* =======================================================================
   Emoji Picker - Dark Mode
   ======================================================================= */

html.dark .emoji-popup {
    background: var(--dark-surface-2);
    border-color: var(--dark-border-strong);
    box-shadow: var(--dark-shadow-strong);
}

/* Navegaci�n de tabs de emojis */
html.dark .emoji-tabs-nav {
    background: var(--dark-surface-1);
    border-bottom-color: var(--dark-border);
}

html.dark .emoji-tab {
    color: var(--dark-text-muted);
    opacity: 0.6;
}

html.dark .emoji-tab:hover {
    background: rgba(99, 182, 255, 0.12);
    opacity: 1;
    color: var(--dark-text);
}

html.dark .emoji-tab.active {
    background: rgba(99, 182, 255, 0.2);
    opacity: 1;
    color: var(--dark-link);
}

/* Grid de emojis */
html.dark .emojis-grid {
    background: var(--dark-surface-2);
}

html.dark .emoji-item:hover {
    background: rgba(99, 182, 255, 0.15);
}

html.dark .emoji-item:active {
    background: rgba(99, 182, 255, 0.25);
}

/* Scrollbar personalizado para grid de emojis en dark mode */
html.dark .emojis-grid::-webkit-scrollbar-track {
    background: var(--dark-surface-1);
}

html.dark .emojis-grid::-webkit-scrollbar-thumb {
    background: var(--dark-border-strong);
}

html.dark .emojis-grid::-webkit-scrollbar-thumb:hover {
    background: var(--dark-border-soft);
}

/* Bot�n toggle emoji */
html.dark #emojiToggle {
    background: var(--dark-surface-2);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark #emojiToggle:hover {
    background: var(--dark-surface-3);
    color: var(--dark-link);
}

html.dark #emojiToggle.active {
    background: rgba(99, 182, 255, 0.2);
    color: var(--dark-link);
    border-color: var(--dark-link);
}

/* =======================================================================
   Chat Modals - Dark Mode
   ======================================================================= */

/* Modal de nueva conversaci�n */
html.dark #chatNewConversationModal .modal-content {
    background: var(--dark-surface-1);
    border-color: var(--dark-border);
    box-shadow: var(--dark-shadow-strong);
}

html.dark #chatNewConversationModal .modal-header {
    background: var(--dark-surface-2);
    border-bottom-color: var(--dark-border);
    color: var(--dark-text);
}

html.dark #chatNewConversationModal .modal-body {
    background: var(--dark-surface-1);
}

html.dark #chatNewConversationModal .modal-title {
    color: var(--dark-text);
}

html.dark #chatNewConversationModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Input de b�squeda en modal */
html.dark #newChatSearchInput {
    background: var(--dark-surface-2);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark #newChatSearchInput:focus {
    background: var(--dark-surface-3);
    border-color: var(--dark-link);
    box-shadow: 0 0 0 0.2rem rgba(99, 182, 255, 0.15);
}

html.dark #newChatSearchInput::placeholder {
    color: var(--dark-text-muted);
}

/* Resultados de b�squeda */
html.dark #newChatResults .list-group-item {
    background: var(--dark-surface-2);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark #newChatResults .list-group-item:hover {
    background: var(--dark-surface-3);
    border-color: var(--dark-link);
}

/* =======================================================================
   Chat Scrollbar - Dark Mode
   ======================================================================= */

html.dark .chat-body::-webkit-scrollbar-track,
html.dark .chat-user-list::-webkit-scrollbar-track {
    background: var(--dark-surface-1);
}

html.dark .chat-body::-webkit-scrollbar-thumb,
html.dark .chat-user-list::-webkit-scrollbar-thumb {
    background: var(--dark-border-strong);
    border-radius: 10px;
}

html.dark .chat-body::-webkit-scrollbar-thumb:hover,
html.dark .chat-user-list::-webkit-scrollbar-thumb:hover {
    background: var(--dark-border-soft);
}

/* =======================================================================
   Chat Adjuntos y Archivos - Dark Mode
   ======================================================================= */

html.dark #chatAttachmentPreview {
    background: var(--dark-surface-2);
    color: var(--dark-text-muted);
    border-color: var(--dark-border);
}

html.dark .chat-message img {
    border-color: var(--dark-border);
}

html.dark .chat-message a.btn-outline-primary {
    background: var(--dark-surface-2);
    color: var(--dark-link);
    border-color: var(--dark-link);
}

html.dark .chat-message a.btn-outline-primary:hover {
    background: var(--dark-link);
    color: #ffffff;
}

/* =======================================================================
   Chat Loaders - Dark Mode
   ======================================================================= */

html.dark #chatMessageLoader .spinner-border,
html.dark #chatConversationLoader .spinner-border,
html.dark #olderMessagesLoader .spinner-border {
    color: var(--dark-link);
}

html.dark #chatMessageEmpty,
html.dark #chatConversationEmpty {
    color: var(--dark-text-muted);
}

/* =======================================================================
   Chat Mobile - Dark Mode
   ======================================================================= */

html.dark .mobile-back-btn {
    background: transparent;
    color: var(--dark-text);
}

html.dark .mobile-back-btn:hover {
    background: var(--dark-surface-2);
    color: var(--dark-link);
}

/* =======================================================================
   Chat Notifications Badge - Dark Mode
   ======================================================================= */

html.dark .active-users {
    background: var(--dark-link);
    border-color: var(--dark-surface-1);
}

html.dark .active-users.bg-info {
    background: #17a2b8 !important;
}

html.dark .active-users.bg-primary {
    background: var(--dark-link) !important;
}

/* =======================================================================
   Avatar Initials - Dark Mode
   ======================================================================= */

html.dark .avatar .avatar-initials {
    background: var(--dark-surface-3);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark .avatar-img {
    border-color: var(--dark-border);
}

/* =======================================================================
   Chat Action Icons - Dark Mode
   ======================================================================= */

html.dark .chat-search-list ul li a {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
}

html.dark .chat-search-list ul li a:hover {
    background: var(--dark-surface-3);
    transform: scale(1.05);
}

html.dark .chat-search-list ul li a img {
    filter: brightness(0.9);
}

/* =======================================================================
   Input Group Icons - Dark Mode
   ======================================================================= */

html.dark .input-group-text {
    background: var(--dark-surface-2);
    color: var(--dark-text-muted);
    border-color: var(--dark-border);
}

html.dark .input-group-text i {
    color: var(--dark-text-muted);
}

/* =======================================================================
   Chat Attachments - Dark Mode
   ======================================================================= */

/* Preview de Adjuntos */
html.dark .attachment-preview-container {
    background: var(--dark-surface-1);
    border-bottom-color: var(--dark-border);
}

html.dark .attachment-preview-container::-webkit-scrollbar-track {
    background: var(--dark-surface-2);
}

html.dark .attachment-preview-container::-webkit-scrollbar-thumb {
    background: #555;
}

html.dark .attachment-preview-container::-webkit-scrollbar-thumb:hover {
    background: #777;
}

html.dark .attachment-preview-item {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
}

html.dark .attachment-thumbnail {
    background: var(--dark-surface-3);
}

html.dark .attachment-name {
    color: var(--dark-text);
}

html.dark .attachment-size {
    color: var(--dark-text-muted);
}

html.dark .attachment-remove {
    background: #dc3545;
}

html.dark .attachment-remove:hover {
    background: #c82333;
}

/* Adjuntos en Mensajes */
html.dark .message-attachment-image {
    border-color: var(--dark-border-strong);
}

html.dark .message-attachment-image:hover {
    border-color: var(--dark-link);
}

html.dark .message-attachment-file {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
}

html.dark .message-attachment-file:hover {
    background: var(--dark-surface-3);
    border-color: var(--dark-link);
}

html.dark .message-attachment-file .file-name {
    color: var(--dark-text);
}

html.dark .message-attachment-file .file-download {
    background: var(--dark-link);
}

html.dark .message-attachment-file .file-download:hover {
    background: #75c2ff;
}

/* Lightbox */
html.dark .lightbox-backdrop {
    background: rgba(0, 0, 0, 0.92);
}

html.dark .lightbox-content img {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

html.dark .lightbox-close {
    background: rgba(30, 30, 30, 0.95);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

html.dark .lightbox-close:hover {
    background: var(--dark-surface-2);
    border-color: var(--dark-link);
}

/* ======================================================================
   MENSAJES NO LEÍDOS - DROPDOWN
   ====================================================================== */

html.dark .list-item.new-message.active {
    background-color: rgba(139, 92, 246, 0.15);
    border-left-color: #8b5cf6;
}

html.dark .list-item.active .message-author,
html.dark .list-item.active .message-time,
html.dark .list-item.active .message-content {
    color: var(--dark-text);
    font-weight: 600;
}

html.dark .message-time .badge-primary {
    background-color: #8b5cf6;
    color: #fff;
}

html.dark .list-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

html.dark .list-item.new-message.active:hover {
    background-color: rgba(139, 92, 246, 0.2);
}