/**
 * CallDrive theme for CallHub
 * Brandkit tokens + Metronic dark shell overrides
 */
:root {
  --cd-bg: #040404;
  --cd-bg-elevated: #0b0b10;
  --cd-surface: #151521;
  --cd-surface-2: #1a1a24;
  --cd-border: rgba(255, 255, 255, 0.08);
  --cd-cyan: #00c9f6;
  --cd-blue: #008cf8;
  --cd-purple: #c209fa;
  --cd-lavender: #c680e4;
  --cd-royal: #645be9;
  --cd-text: #ffffff;
  --cd-text-muted: #a0a0b0;
  --cd-success: #10b981;
  --cd-radius: 12px;
  --cd-radius-sm: 8px;
  --cd-gradient: linear-gradient(90deg, #00c9f6 0%, #c209fa 100%);
  --cd-gradient-soft: linear-gradient(135deg, rgba(0, 201, 246, 0.2), rgba(194, 9, 250, 0.2));
}

/* Base shell */
body.m-page--fluid,
body.cd-theme {
  background-color: var(--cd-bg) !important;
  color: var(--cd-text);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

body.m-content--skin-light2 {
  /* keep class for Metronic JS; force dark content */
}

.m-body,
.m-wrapper,
.m-content,
#vueRoot {
  background-color: var(--cd-bg-elevated) !important;
  color: var(--cd-text);
}

/* Header / brand */
.m-header,
#m_header {
  background-color: var(--cd-bg) !important;
  border-bottom: 1px solid var(--cd-border);
  box-shadow: none !important;
}

.m-brand,
.m-brand--skin-dark {
  background-color: var(--cd-bg) !important;
}

.m-brand {
  min-width: 320px;
  height: 78px !important;
}

.m-header {
  height: 78px !important;
}

.m-brand__logo.w-75 {
  width: 90% !important;
}

.m-brand__logo-wrapper img.cd-brand-logo {
  max-height: 72px;
  height: 72px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
}

.m-brand__toggler span,
.m-brand__toggler span::before,
.m-brand__toggler span::after {
  background-color: var(--cd-text-muted) !important;
}

.m-header-menu.m-header-menu--skin-light,
.m-header-menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {
  color: var(--cd-text-muted) !important;
}

.m-header-menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text,
.m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
  color: var(--cd-text) !important;
}

.m-topbar .m-topbar__nav-wrapper .m-topbar__nav .m-nav__item .m-nav__link .m-nav__link-icon {
  color: var(--cd-text-muted) !important;
}

/* Sidebar */
.m-aside-left,
.m-aside-left--skin-dark,
#m_aside_left {
  background-color: var(--cd-bg) !important;
  border-right: 1px solid var(--cd-border);
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
  color: var(--cd-text-muted) !important;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link {
  background: var(--cd-gradient-soft) !important;
  border-radius: var(--cd-radius-sm);
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon {
  color: var(--cd-cyan) !important;
}

.m-aside-menu .m-menu__section .m-menu__section-text {
  color: var(--cd-text-muted) !important;
  opacity: 0.7;
  letter-spacing: 0.06em;
}

/* Footer */
.m-footer {
  background-color: var(--cd-bg) !important;
  border-top: 1px solid var(--cd-border) !important;
  color: var(--cd-text-muted) !important;
}

.m-footer__copyright,
.m-footer__copyright b {
  color: var(--cd-text-muted) !important;
  font-weight: 500;
}

.cd-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}

.cd-footer-product {
  color: var(--cd-cyan) !important;
  font-weight: 600;
}

/* Cards / portlets / content surfaces */
.m-portlet,
.card,
.m-portlet.m-portlet--bordered-semi,
.m-portlet .m-portlet__head,
.m-portlet .m-portlet__body {
  background-color: var(--cd-surface) !important;
  color: var(--cd-text) !important;
  border-color: var(--cd-border) !important;
  border-radius: var(--cd-radius) !important;
  box-shadow: none !important;
}

.m-portlet .m-portlet__head .m-portlet__head-text,
.m-portlet .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-text,
.card-title,
label,
.form-label,
.m-form .form-control-label {
  color: var(--cd-text) !important;
}

.m-subheader .m-subheader__title,
.m-subheader__breadcrumbs-link,
h1, h2, h3, h4, h5, h6 {
  color: var(--cd-text) !important;
}

/* Forms */
.form-control,
.bootstrap-select .dropdown-toggle,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.m-input {
  background-color: var(--cd-surface-2) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
  border-radius: var(--cd-radius-sm) !important;
}

.form-control:focus {
  border-color: var(--cd-cyan) !important;
  box-shadow: 0 0 0 0.15rem rgba(0, 201, 246, 0.25) !important;
}

.form-control::placeholder {
  color: var(--cd-text-muted) !important;
}

/* Buttons */
.btn-primary,
.m-btn--custom.btn-primary,
.btn.btn-brand {
  background: var(--cd-gradient) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--cd-radius-sm) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(1.08);
  color: #fff !important;
}

.btn-secondary,
.btn-outline-metal,
.m-btn--custom.btn-secondary {
  background-color: var(--cd-surface-2) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
  border-radius: var(--cd-radius-sm) !important;
}

/* Tables */
.table,
.m-table,
.dataTables_wrapper,
.table thead th,
.table td,
.table th {
  color: var(--cd-text-muted) !important;
  border-color: var(--cd-border) !important;
}

.table thead th {
  background-color: var(--cd-surface-2) !important;
  color: var(--cd-text) !important;
}

.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Modals */
.modal-content {
  background-color: var(--cd-surface) !important;
  color: var(--cd-text) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-radius) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--cd-border) !important;
}

.btn-close {
  filter: invert(1);
}

/* Scroll top */
.m-scroll-top {
  background: var(--cd-gradient) !important;
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--cd-surface) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
}

.dropdown-item {
  color: var(--cd-text-muted) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--cd-surface-2) !important;
  color: var(--cd-cyan) !important;
}

/* CallDrive KPI / dashboard helpers */
.cd-card {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  padding: 1.25rem 1.5rem;
  color: var(--cd-text);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.cd-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--cd-gradient);
  opacity: 0.9;
}

.cd-card__label {
  color: var(--cd-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.cd-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cd-text);
  line-height: 1.2;
}

.cd-card__trend {
  color: var(--cd-success);
  font-size: 0.85rem;
  font-weight: 600;
}

.cd-filter-bar {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.cd-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cd-text);
  margin-bottom: 0.25rem;
}

.cd-page-subtitle {
  color: var(--cd-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

/* Auth / welcome */
.cd-auth-body {
  background: var(--cd-bg) !important;
  color: var(--cd-text) !important;
  min-height: 100vh;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.cd-auth-panel {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.cd-auth-logo {
  max-width: 280px;
  width: 80%;
  height: auto;
  margin-bottom: 1.5rem;
}

.cd-auth-links a {
  color: var(--cd-cyan) !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 0 0.75rem;
}

.cd-auth-links a:hover {
  color: var(--cd-lavender) !important;
}

.cd-auth-footer {
  color: var(--cd-text-muted);
  font-size: 0.85rem;
}

/* Bootstrap / Metronic text helpers on dark */
.text-dark,
.text-black-50,
.m--font-dark {
  color: var(--cd-text) !important;
}

.text-muted {
  color: var(--cd-text-muted) !important;
}

.alert {
  border-radius: var(--cd-radius-sm);
}

/* DataTables length/filter labels */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--cd-text-muted) !important;
}

/* Selectpicker dropdown */
.bootstrap-select .dropdown-menu {
  background: var(--cd-surface) !important;
}

.bootstrap-select .dropdown-menu li a {
  color: var(--cd-text-muted) !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a {
  background: var(--cd-surface-2) !important;
  color: var(--cd-cyan) !important;
}

/* Topbar user / notification dropdowns — force dark */
.m-topbar .m-dropdown__inner,
.m-topbar .m-dropdown__body,
.m-topbar .m-dropdown__content,
.m-topbar__user-profile .m-dropdown__inner,
.m-topbar__user-profile .m-dropdown__body {
  background-color: var(--cd-surface) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-radius) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
  color: var(--cd-text) !important;
}

.m-topbar .m-dropdown__header,
.m-topbar__user-profile .m-dropdown__header {
  background: linear-gradient(135deg, #0b0b10 0%, #151521 55%, #1a1228 100%) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-radius) var(--cd-radius) 0 0 !important;
}

.m-topbar .m-dropdown__arrow,
.m-topbar .m-dropdown__arrow:before {
  color: var(--cd-surface) !important;
  background: var(--cd-surface) !important;
}

.m-topbar .m-card-user__name,
.m-topbar .m-dropdown__header-title {
  color: var(--cd-text) !important;
}

.m-topbar .m-card-user__email,
.m-topbar .m-dropdown__header-subtitle,
.m-topbar .m-card-user__email.m-link {
  color: var(--cd-text-muted) !important;
}

.m-topbar .m-nav .m-nav__link .m-nav__link-text,
.m-topbar .m-nav .m-nav__link .m-nav__link-icon,
.m-topbar .m-nav--skin-light .m-nav__link .m-nav__link-text,
.m-topbar .m-nav--skin-dark .m-nav__link .m-nav__link-text {
  color: var(--cd-text-muted) !important;
}

.m-topbar .m-nav .m-nav__item:hover > .m-nav__link .m-nav__link-text,
.m-topbar .m-nav .m-nav__item:hover > .m-nav__link .m-nav__link-icon {
  color: var(--cd-cyan) !important;
}

.m-topbar .m-nav__separator {
  border-bottom-color: var(--cd-border) !important;
}

.m-topbar__user-profile .btn.btn-secondary,
.m-topbar__user-profile .m-btn--label-brand {
  background: var(--cd-surface-2) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-text) !important;
}

.m-topbar__user-profile .btn.btn-secondary:hover {
  background: var(--cd-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.m-topbar__userpic img {
  border: 2px solid rgba(0, 201, 246, 0.35);
  background: var(--cd-surface-2);
}

/* Pagination active: brand blue instead of Metronic orange where possible */
.m-datatable__pager-link--active,
.dataTables_paginate .paginate_button.current,
.page-item.active .page-link {
  background: var(--cd-blue) !important;
  border-color: var(--cd-blue) !important;
  color: #fff !important;
}