:root{
  --erp-bg:#141925;
  --erp-bg-2:#1f2433;
  --erp-card:#252b3a;
  --erp-card-2:#2c3446;
  --erp-text:#f1f5f9;
  --erp-muted:#9aa4b2;
  --erp-border:rgba(255,255,255,.08);
  --erp-primary:#14b8ff;
  --erp-primary-2:#5b6bff;
  --erp-green:#22c55e;
  --erp-amber:#f59e0b;
  --erp-red:#ef4444;
  --erp-hover:rgba(255,255,255,.05);

  --surface-light:#ffffff;
  --surface-light-2:#f8fafc;
  --text-dark:#111827;
  --muted-dark:#6b7280;
  --border-light:#e5e7eb;

  --erp-input-bg:#171b26;
  --erp-input-color:#ffffff;
  --erp-input-border:#31384a;
}

html,
body{
  min-height:100%;
}

body{
  background:var(--erp-bg);
  color:var(--erp-text);
}

/* ---------- Global text strategy ----------
   Dark app by default.
   White CRM surfaces get an explicit dark override below.
*/
.container,
.container-fluid,
.row,
[class^="col-"],
[class*=" col-"]{
  color:inherit;
}

h1,h2,h3,h4,h5,h6,
p,span,div,small,label,strong,em,li,td,th{
  color:inherit;
}

.text-dark,
.text-black,
.text-body,
.text-white{
  color:inherit !important;
}

/* Badge and button text color safeguards */
.badge.text-white,
.btn.text-white,
.text-white-force {
  color: #ffffff !important;
}

.badge.text-dark,
.btn.text-dark,
.text-dark-force {
  color: #212529 !important;
}

.text-muted,
.text-secondary,
.text-secondary-emphasis{
  color:var(--erp-muted) !important;
  opacity:1 !important;
}

small,
.small,
.form-text{
  color:inherit;
}

a{
  color:#9edcff;
}

a:hover{
  color:#d8f2ff;
}

/* ---------- Navbar ---------- */
.navbar{
  background:#111621 !important;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-toggle,
.navbar .dropdown-item,
.navbar .navbar-text{
  color:#f8fafc !important;
}

.navbar .dropdown-menu{
  background:#252b3a;
  border:1px solid var(--erp-border);
  border-radius:14px;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
  background:#313a4e;
  color:#fff !important;
}

/* ---------- Buttons ---------- */
.btn-erp-primary,
.btn-primary{
  background:linear-gradient(135deg,var(--erp-primary),var(--erp-primary-2));
  border:0;
  color:#fff !important;
}

.btn-erp-primary:hover,
.btn-primary:hover{
  color:#fff !important;
  opacity:.96;
}

.btn-outline-secondary,
.btn-outline-light{
  border-color:#4a5568;
  color:#dce3ea !important;
  background:transparent;
}

.btn-outline-secondary:hover,
.btn-outline-light:hover{
  background:#3b4355;
  color:#fff !important;
  border-color:#616e88;
}

.btn-link{
  color:inherit;
}

/* ---------- Inputs ---------- */
.form-control,
.form-select,
.input-group-text,
textarea{
  background:var(--erp-input-bg) !important;
  color:var(--erp-input-color) !important;
  border-color:var(--erp-input-border) !important;
}

.form-control option,
.form-select option{
  background:var(--erp-input-bg);
  color:var(--erp-input-color);
}

.form-control::placeholder,
textarea::placeholder{
  color:#9aa4b2 !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus{
  box-shadow:0 0 0 .2rem rgba(20,184,255,.15);
  border-color:#40c8ff !important;
}


.form-select{
  background-repeat:no-repeat !important;
  background-position:right .75rem center !important;
  background-size:16px 12px !important;
  padding-right:2.35rem !important;
}
.form-select[multiple],
.form-select[size]:not([size="1"]),
select[multiple].form-select,
select[size]:not([size="1"]).form-select{
  background-image:none !important;
  padding-right:.75rem !important;
}

/* ---------- Cards / shells ---------- */
.card,
.erp-shell,
.proj-shell,
.erp-module-card,
.erp-stat,
.erp-card-soft,
.soft-card,
.kan-card,
.stage-card,
.dark-card,
.subtask-card,
.mini-chip{
  background:var(--erp-card);
  color:var(--erp-text);
  border:1px solid var(--erp-border);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.erp-shell,
.proj-shell{
  background:var(--erp-bg-2);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.erp-card-soft,
.soft-card,
.kan-card,
.stage-card{
  background:var(--erp-card);
}

.erp-stat{
  background:linear-gradient(135deg,#252b3a 0%,#2d3650 100%);
  padding:.75rem .85rem;
  height:100%;
  border-radius:12px;
  transition:border-color .2s ease, transform .2s ease;
}
.erp-stat:hover{
  border-color:var(--erp-primary) !important;
  transform:translateY(-2px);
}
.erp-stat .label{
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.2rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.erp-stat .value{
  font-size:1.35rem !important;
  font-weight:700;
  line-height:1.2;
}

.card *,
.erp-shell *,
.proj-shell *,
.erp-module-card *,
.erp-stat *,
.erp-card-soft *,
.soft-card *,
.kan-card *,
.stage-card *,
.dark-card *,
.subtask-card *,
.mini-chip *{
  color:inherit;
}

.erp-title,
.display-6,
.card-title,
.erp-module-card h2,
.erp-module-card h3,
.erp-module-card h4,
.erp-shell h1,
.erp-shell h2,
.erp-shell h3,
.erp-shell h4,
.erp-shell h5,
.erp-shell h6,
.proj-shell h1,
.proj-shell h2,
.proj-shell h3,
.proj-shell h4,
.proj-shell h5,
.proj-shell h6{
  color:var(--erp-text) !important;
}

.erp-subtitle,
.erp-stat .label,
.erp-shell .text-muted,
.proj-shell .text-muted,
.erp-module-card .text-muted,
.erp-stat .text-muted,
.dark-card .text-muted,
.subtask-card .text-muted,
.mini-chip .text-muted{
  color:var(--erp-muted) !important;
}

.badge.text-bg-light{
  background:#3a4157 !important;
  color:#fff !important;
}

.badge.bg-info.text-dark,
.badge.bg-warning.text-dark{
  color:#111827 !important;
}

.bg-light{
  background:var(--erp-bg-2) !important;
  color:var(--erp-text) !important;
}

.bg-white{
  background:#fff !important;
  color:var(--text-dark) !important;
}

/* ---------- Tables ---------- */
.table{
  color:inherit;
}

.table > :not(caption) > * > *{
  background:transparent;
  border-color:var(--erp-border);
  color:inherit;
}

.table thead th,
.table-light{
  color:#dce3ea !important;
  background:#1d2331 !important;
}

.erp-table-wrap{
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--erp-border);
  background:var(--erp-card);
}

/* ---------- ERP helpers ---------- */
.erp-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--erp-text, #fff);
  white-space: normal;
}
@media (min-width: 992px) {
  .erp-title {
    font-size: 1.45rem;
    white-space: nowrap;
  }
}

.erp-toolbar{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
}
@media (min-width: 992px) {
  .erp-toolbar {
    flex-wrap: nowrap !important;
  }
  .erp-toolbar > div:first-child {
    max-width: 50% !important;
    min-width: 0;
    flex: 0 1 auto;
  }
  .erp-toolbar .module-nav-pills {
    flex: 0 1 auto;
  }
}

.erp-module-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
}

.erp-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:.75rem;
}

.erp-link-list a{
  display:inline-flex;
  margin:.2rem .35rem .2rem 0;
}

.erp-chip{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.22rem .7rem;
  font-size:.78rem;
  font-weight:600;
  background:#313a4e !important;
  color:#fff !important;
}

.erp-chip.success{ background:rgba(34,197,94,.18) !important; color:#8ef0ae !important; }
.erp-chip.warning{ background:rgba(245,158,11,.18) !important; color:#ffd28d !important; }
.erp-chip.danger{ background:rgba(239,68,68,.18) !important; color:#ffb0b0 !important; }

html[data-theme="light"] .erp-chip,
body[data-theme="light"] .erp-chip,
[data-theme="light"] .erp-chip {
  background: #e2e8f0 !important;
  color: #334155 !important;
}
html[data-theme="light"] .erp-chip.success,
body[data-theme="light"] .erp-chip.success,
[data-theme="light"] .erp-chip.success {
  background: #dcfce7 !important;
  color: #15803d !important;
}
html[data-theme="light"] .erp-chip.warning,
body[data-theme="light"] .erp-chip.warning,
[data-theme="light"] .erp-chip.warning {
  background: #fef9c3 !important;
  color: #a16207 !important;
}
html[data-theme="light"] .erp-chip.danger,
body[data-theme="light"] .erp-chip.danger,
[data-theme="light"] .erp-chip.danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

.module-nav-pills{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  align-items:center;
}
@media (min-width: 992px) {
  .module-nav-pills {
    flex-wrap: nowrap !important;
  }
}

.module-nav-pills > a,
.module-nav-pills .dropdown-toggle {
  padding:.28rem .55rem;
  font-size:.8rem;
  border-radius:999px;
  background:#171b26;
  color:#dce3ea;
  text-decoration:none;
  border:1px solid #31384a;
  white-space:nowrap;
  transition:all 0.15s ease-in-out;
}

.module-nav-pills > a:hover,
.module-nav-pills > a.active,
.module-nav-pills .dropdown-toggle:hover,
.module-nav-pills .dropdown-toggle.active {
  background:#14b8ff;
  color:#111827;
  border-color:#14b8ff;
}

/* ---------- CRM white surfaces ---------- */
.crm-page .card{
  box-shadow:0 8px 24px rgba(15,23,42,.06) !important;
}

.crm-app-shell,
.crm-card,
.crm-list-card,
.crm-detail-card,
.crm-side-card,
.crm-comment-card,
.crm-activity-item,
.crm-page .bg-white,
.crm-page .card.bg-white,
.crm-page .card.bg-light,
.crm-page .bg-light{
  background:var(--erp-card) !important;
  color:var(--erp-text) !important;
  border-color:var(--erp-border) !important;
}

.crm-app-shell *,
.crm-stage-column *,
.crm-card *,
.crm-list-card *,
.crm-detail-card *,
.crm-side-card *,
.crm-comment-card *,
.crm-activity-item *{
  color:inherit;
}

.crm-app-shell{
  border-radius:18px;
  padding:1rem 1.25rem;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}

.crm-app-title{
  font-size:1.6rem;
  font-weight:700;
}

.crm-app-link{
  color:#1f2937 !important;
  text-decoration:none;
  font-weight:600;
  padding:.4rem 0;
  display:inline-block;
}

.crm-app-link.active,
.crm-app-link:hover{
  color:#7c3aed !important;
}

.crm-dark-menu{
  border:0;
  box-shadow:0 14px 26px rgba(15,23,42,.16);
  border-radius:14px;
}

.crm-toolbar{
  border-radius:18px;
}

.crm-search-wrap{ position:relative; }
.crm-search{ padding-left:1rem; }
.crm-board-wrap{ overflow:auto; padding-bottom:.5rem; }
.crm-board{ display:flex; gap:1rem; align-items:flex-start; min-width:max-content; }

.crm-stage-column{
  width:320px;
  background:var(--erp-card-2) !important;
  border-radius:20px;
  padding:.85rem;
  transition:.2s;
  color:var(--erp-text) !important;
  border-color:var(--erp-border) !important;
}

.crm-stage-column.folded{ width:220px; }
.crm-stage-column.drag-over{ outline:2px dashed #7c3aed; background:#f3f0ff !important; }
.crm-stage-head{ padding:.25rem .2rem .75rem; }
.crm-stage-title{ font-weight:700; font-size:1.15rem; color:var(--erp-text) !important; }
.crm-stage-progress{ display:flex; height:12px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.crm-stage-progress .green{ background:#22c55e; }
.crm-stage-progress .amber{ background:#f59e0b; }
.crm-stage-progress .red{ background:#ef4444; }
.drop-zone{ min-height:240px; }
.crm-empty{ padding:1rem; color:#6b7280 !important; font-size:.9rem; }

.crm-card{
  border-radius:18px;
  padding:1rem;
  margin-bottom:.9rem;
  box-shadow:0 8px 16px rgba(15,23,42,.05);
}

.crm-card.dragging{ opacity:.55; }
.crm-card-title a{ color:var(--erp-text) !important; font-weight:700; }
.crm-card-money{ font-size:1.1rem; margin-top:.15rem; }
.crm-card-meta,
.crm-page .text-muted,
.crm-page .small.text-muted,
.crm-page .text-secondary,
.crm-page .text-secondary-emphasis,
.crm-page .crm-comment-card .text-muted,
.crm-page .crm-activity-item .text-muted{
  color:var(--erp-muted) !important;
}

.crm-stars{ font-size:1rem; color:#fbbf24 !important; letter-spacing:1px; }
.crm-stars .muted{ color:#d1d5db !important; }
.crm-tag{ display:inline-flex; align-items:center; padding:.22rem .55rem; border-radius:999px; background:#efe7ff; color:#6d28d9 !important; font-size:.78rem; font-weight:600; }
.crm-tag.alt{ display:inline-flex; align-items:center; padding:.22rem .55rem; border-radius:999px; background:#e0f2fe; color:#0369a1 !important; }
.crm-chip{ display:inline-flex; align-items:center; border-radius:999px; padding:.2rem .6rem; background:#eef2ff; color:#4338ca !important; font-size:.78rem; font-weight:600; }
.crm-chip.success{ display:inline-flex; align-items:center; border-radius:999px; padding:.2rem .6rem; background:#dcfce7; color:#166534 !important; }
.crm-chip.danger{ display:inline-flex; align-items:center; border-radius:999px; padding:.2rem .6rem; background:#fee2e2; color:#991b1b !important; }
.crm-list-card thead th{ background:var(--erp-card-2) !important; font-weight:700; color:var(--erp-text) !important; border-bottom:1px solid var(--erp-border); }
.crm-stage-chip{ display:inline-flex; padding:.28rem .65rem; border-radius:999px; background:#eef2ff; color:#4338ca !important; font-size:.8rem; font-weight:600; }
.crm-detail-card,
.crm-side-card{ border-radius:20px; }
.crm-detail-title{ font-size:2.3rem; font-weight:700; }
.crm-big-money{ font-size:1.8rem; font-weight:700; }
.crm-inner-tabs .nav-link{ color:var(--erp-muted) !important; border:0; border-bottom:2px solid transparent; border-radius:0; }
.crm-inner-tabs .nav-link.active{ color:#7c3aed !important; border-color:#7c3aed; font-weight:700; }
.crm-side-heading{ font-weight:700; font-size:1.05rem; }
.crm-comment-card.message{ background:rgba(20,184,255,.08) !important; border-color:rgba(20,184,255,.18) !important; }
.crm-team-card .list-group-item{ border-color:var(--erp-border) !important; }

.crm-page .table,
.crm-page .table td,
.crm-page .table th,
.crm-page .table a,
.crm-page .table span,
.crm-page .table div,
.crm-page .card .card-header,
.crm-page .card .card-body{
  color:var(--erp-text) !important;
}

.crm-page .table tbody tr td{
  background:transparent !important;
}

.crm-page .table thead th{
  background:var(--erp-card-2) !important;
  color:var(--erp-text) !important;
  border-color:var(--erp-border) !important;
}

/* ---------- Contacts / other light blocks ---------- */
.contacts-page .page-title,
.contacts-page .page-subtitle{
  color:var(--erp-text) !important;
}

.contacts-page .table thead th{
  color:#dce3ea !important;
}

.contacts-page .table tbody td,
.contacts-page .table tbody a,
.contacts-page .table tbody span{
  color:var(--erp-text) !important;
}

/* ---------- Stage pills ---------- */
.stage-pill-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.stage-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.55rem .8rem;
  background:#20283a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  min-width:180px;
  max-width:240px;
  color:#f8fafc;
}

.stage-pill .name,
.kan-stage-title{
  white-space:normal;
  word-break:break-word;
  line-height:1.15;
  max-width:100%;
}

.stage-board{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  align-items:start;
}

.stage-board > .stage-col{
  min-width:0;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .crm-stage-column,
  .crm-stage-column.folded{
    width:280px;
  }

  .crm-detail-title{
    font-size:1.65rem;
  }
}

@media (max-width: 768px){
  .stage-pill{
    min-width:100%;
    max-width:100%;
  }
}

/* Responsive helpers */
img { max-width: 100%; height: auto; }
.table-responsive { overflow-x: auto; }
.crm-page .card, .erp-shell, .proj-shell { overflow: hidden; }
@media (max-width: 991.98px) {
  .navbar .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
  .erp-shell, .proj-shell { padding: 14px; border-radius: 16px; }
  .erp-toolbar, .d-flex.justify-content-between.align-items-start.flex-wrap.gap-3.mb-3 { flex-direction: column; align-items: stretch !important; }
  .module-nav-pills, .crm-top-pills, .d-flex.gap-2.flex-wrap { width: 100%; }
  .module-nav-pills > a, .module-nav-pills .dropdown-toggle, .crm-top-pills a, .btn { white-space: normal; }
}
@media (max-width: 767.98px) {
  body { font-size: 0.95rem; }
  .container, .container-fluid { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
  .card, .erp-shell, .proj-shell { border-radius: 14px; }
  .table th, .table td { white-space: nowrap; }
  .crm-detail-title, .erp-title, h1, .h1, .h2, .h3, .h4 { line-height: 1.2; }
  .btn, .form-control, .form-select { min-height: 42px; }
}


/* ---------- Theme toggle ---------- */
html[data-theme="light"] body,
body[data-theme="light"]{
  --erp-bg:#f3f6fb;
  --erp-bg-2:#ffffff;
  --erp-card:#ffffff;
  --erp-card-2:#f8fafc;
  --erp-text:#0f172a;
  --erp-muted:#64748b;
  --erp-border:rgba(15,23,42,.08);
  --erp-hover:rgba(15,23,42,.04);
  --erp-input-bg:#ffffff;
  --erp-input-color:#0f172a;
  --erp-input-border:#d6deea;
  background:var(--erp-bg);
  color:var(--erp-text);
}

html[data-theme="light"] .navbar,
body[data-theme="light"] .navbar{
  background:#0f172a !important;
}

html[data-theme="light"] .navbar .dropdown-menu,
body[data-theme="light"] .navbar .dropdown-menu{
  background:#ffffff;
  border:1px solid #dbe3ee;
}

html[data-theme="light"] .navbar .dropdown-item,
body[data-theme="light"] .navbar .dropdown-item{
  color:#0f172a !important;
}

html[data-theme="light"] .navbar .dropdown-item:hover,
body[data-theme="light"] .navbar .dropdown-item:hover{
  background:#f1f5f9;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .input-group-text,
html[data-theme="light"] textarea,
body[data-theme="light"] .form-control,
body[data-theme="light"] .form-select,
body[data-theme="light"] .input-group-text,
body[data-theme="light"] textarea{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:#d6deea !important;
  color-scheme: light !important;
}

html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] textarea::placeholder,
body[data-theme="light"] .form-control::placeholder,
body[data-theme="light"] textarea::placeholder{
  color:#94a3b8 !important;
}

html[data-theme="light"] .table thead th,
html[data-theme="light"] .table-light,
body[data-theme="light"] .table thead th,
body[data-theme="light"] .table-light{
  color:#0f172a !important;
  background:#eef2f7 !important;
}

html[data-theme="light"] .btn-outline-secondary,
html[data-theme="light"] .btn-outline-light,
body[data-theme="light"] .btn-outline-secondary,
body[data-theme="light"] .btn-outline-light{
  color:#334155 !important;
  border-color:#cbd5e1;
}

html[data-theme="light"] .btn-outline-secondary:hover,
html[data-theme="light"] .btn-outline-light:hover,
body[data-theme="light"] .btn-outline-secondary:hover,
body[data-theme="light"] .btn-outline-light:hover{
  background:#e2e8f0;
  color:#0f172a !important;
}

.applicant-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.applicant-avatar-placeholder{
  width:64px;
  height:64px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--erp-primary),var(--erp-primary-2));
  color:#fff;
  font-weight:700;
}

.public-apply-shell{
  max-width:960px;
  margin:0 auto;
}

.public-apply-card .card-body{
  padding:1.25rem;
}

.file-rule-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(20,184,255,.12);
  border:1px solid rgba(20,184,255,.18);
  font-size:.82rem;
  margin:.15rem .2rem .15rem 0;
}


/* ---------- Theme switch ---------- */
.theme-switch{
  position:relative;
  display:inline-flex;
  width:54px;
  height:30px;
  margin:0;
}
.theme-switch input{
  opacity:0;
  width:0;
  height:0;
}
.theme-switch-slider{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:#334155;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  transition:.2s ease;
}
.theme-switch-slider::before{
  content:'';
  position:absolute;
  width:22px;
  height:22px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s ease;
}
.theme-switch input:checked + .theme-switch-slider{
  background:#14b8ff;
}
.theme-switch input:checked + .theme-switch-slider::before{
  transform:translateX(24px);
}

/* ---------- Form help / admin helpers ---------- */
.field-help{
  display:block;
  margin-top:.2rem;
  font-size:.78rem;
  color:var(--erp-muted);
}
.required-asterisk{ color:#f87171; }
.sticky-table-head thead th{
  position:sticky;
  top:0;
  z-index:2;
}
.max-h-320{ max-height:320px; overflow:auto; }
.max-h-420{ max-height:420px; overflow:auto; }

.module-box summary{
  list-style:none;
  cursor:pointer;
}
.module-box summary::-webkit-details-marker{ display:none; }
.module-box[open] summary .collapse-indicator{
  transform:rotate(180deg);
}
.collapse-indicator{
  display:inline-block;
  transition:transform .2s ease;
}

.overdue-highlight{
  border-left:4px solid var(--erp-red) !important;
  box-shadow:0 0 0 1px rgba(239,68,68,.18);
}


.dashboard-sheet > summary{
  list-style:none;
  cursor:pointer;
}
.dashboard-sheet > summary::-webkit-details-marker{display:none;}
.dashboard-scroll-15{max-height:26rem;}
.dashboard-scroll-25{max-height:36rem;}
.dashboard-scroll-15,.dashboard-scroll-25{overflow:auto;}
.erp-avatar-mini{
  display:inline-flex;
  width:34px;height:34px;border-radius:999px;
  align-items:center;justify-content:center;
  background:#334155;color:#fff;font-weight:700;
}
.crm-board .drop-zone{
  max-height:36rem;
  overflow:auto;
}
.crm-team-card,
.crm-team-card .card-body,
.crm-team-card .list-group-item{
  background:var(--erp-card) !important;
  color:var(--erp-text) !important;
}


/* theme consistency refined in v7 */
.negative-text{ color:#ef4444 !important; }


/* ---------- v7 theme refinement ---------- */
html[data-theme="dark"],
body[data-theme="dark"]{
  color-scheme: dark;
}
html[data-theme="light"],
body[data-theme="light"]{
  color-scheme: light;
}
:root{
  --surface-dark:#171b26;
  --surface-dark-2:#202637;
}
body{
  transition:background-color .15s ease,color .15s ease;
}
.modal-content{
  background:var(--erp-card);
  color:var(--erp-text);
  border:1px solid var(--erp-border);
  box-shadow:0 20px 45px rgba(0,0,0,.24);
}
.modal-header,
.modal-footer{
  border-color:var(--erp-border);
}
.dropdown-menu,
.list-group-item,
.offcanvas{
  background:var(--erp-card);
  color:var(--erp-text);
  border-color:var(--erp-border);
}
.list-group-item{
  border-left:0;
  border-right:0;
}
.list-group-item:first-child{ border-top:0; }
.list-group-item:last-child{ border-bottom:0; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
body[data-theme="dark"] .input-group-text,
body[data-theme="dark"] textarea{
  background:var(--surface-dark) !important;
  color:var(--erp-text) !important;
  border-color:#3a4357 !important;
  color-scheme: dark !important;
}
html[data-theme="dark"] .form-control option,
html[data-theme="dark"] .form-select option,
body[data-theme="dark"] .form-control option,
body[data-theme="dark"] .form-select option{
  background:var(--surface-dark);
  color:var(--erp-text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder{
  color:#94a3b8 !important;
}
html[data-theme="dark"] .modal-content,
body[data-theme="dark"] .modal-content{
  background:var(--erp-card) !important;
  color:var(--erp-text) !important;
}
html[data-theme="light"] .table tbody tr td,
body[data-theme="light"] .table tbody tr td{
  background:transparent !important;
}
html[data-theme="light"] .navbar .navbar-brand,
html[data-theme="light"] .navbar .nav-link,
html[data-theme="light"] .navbar .dropdown-toggle,
html[data-theme="light"] .navbar .navbar-text,
body[data-theme="light"] .navbar .navbar-brand,
body[data-theme="light"] .navbar .nav-link,
body[data-theme="light"] .navbar .dropdown-toggle,
body[data-theme="light"] .navbar .navbar-text{
  color:#f8fafc !important;
}
.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"]{
  min-width:0;
}
/* Calendar and time picker icon visibility fixes across different markup/specificity variations */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
body[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .form-control::-webkit-calendar-picker-indicator,
body[data-theme="dark"] .form-control::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-control::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ffffff" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  cursor: pointer !important;
  filter: none !important;
}

html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
body[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .form-control::-webkit-time-picker-indicator,
body[data-theme="dark"] .form-control::-webkit-time-picker-indicator,
[data-theme="dark"] .form-control::-webkit-time-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ffffff" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  cursor: pointer !important;
  filter: none !important;
}

html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
body[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] .form-control::-webkit-calendar-picker-indicator,
body[data-theme="light"] .form-control::-webkit-calendar-picker-indicator,
[data-theme="light"] .form-control::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23334155" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  cursor: pointer !important;
  filter: none !important;
}

html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
body[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] .form-control::-webkit-time-picker-indicator,
body[data-theme="light"] .form-control::-webkit-time-picker-indicator,
[data-theme="light"] .form-control::-webkit-time-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23334155" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  cursor: pointer !important;
  filter: none !important;
}
.table > :not(caption) > * > *{
  vertical-align:middle;
}
.table tbody tr.table-danger > *{
  box-shadow: inset 4px 0 0 rgba(239,68,68,.8);
}
.table tbody tr.table-warning > *{
  box-shadow: inset 4px 0 0 rgba(245,158,11,.8);
}
.sortable-hint::after{
  content:' ↕';
  opacity:.55;
  font-size:.8em;
}
.js-sortable th.sorted-asc::after{
  content:' ↑';
}
.js-sortable th.sorted-desc::after{
  content:' ↓';
}

.picker-shell{
  display:flex;
  gap:.5rem;
  align-items:flex-start;
}
.picker-shell .picker-label{
  flex:1 1 auto;
}
.picker-shell .picker-label[readonly]{
  cursor:pointer;
  background-image:none;
}
.picker-meta{
  font-size:.8rem;
  color:var(--erp-muted);
}
.assign-picker-modal .modal-body{
  max-height:70vh;
  overflow:auto;
}
.assign-picker-table thead th{
  position:sticky;
  top:0;
  z-index:2;
}
.assign-picker-avatar{
  width:28px;
  height:28px;
  border-radius:999px;
  object-fit:cover;
  flex:0 0 auto;
}
.assign-picker-avatar-fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#334155;
  color:#fff;
  font-weight:700;
  font-size:.8rem;
}
.assign-picker-table td,
.assign-picker-table th{
  white-space:nowrap;
}
.assign-picker-table .text-wrap-cell{
  white-space:normal;
}
.assign-picker-empty{
  padding:1rem;
  color:var(--erp-muted);
  text-align:center;
}
.no-native-scroll-jump{
  overflow-anchor:none;
}
.dashboard-alert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
}

/* Modern Dashboard Stats Cards */
.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: var(--erp-card);
  border: 1px solid var(--erp-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.stat-icon {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}
.stat-content {
  flex: 1;
  min-width: 0;
}
.stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  margin-bottom: 2px;
}
.stat-desc {
  font-size: 0.82rem;
  color: var(--erp-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-action {
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s;
  border-bottom: 1px dashed currentColor;
}
.stat-action:hover {
  opacity: 0.8;
}
.stat-value {
  font-size: 2rem;
  font-weight: 850;
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Color Themes for Stats Cards */
.alert-red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.09) 0%, rgba(239, 68, 68, 0.03) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}
.alert-red .stat-icon {
  background: rgba(239, 68, 68, 0.12);
}
.alert-red .stat-label {
  color: #fca5a5;
}
.alert-red .stat-value {
  color: #f87171;
}
.alert-red .stat-action {
  color: #fca5a5;
}
html[data-theme="light"] .alert-red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(239, 68, 68, 0.02) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.18) !important;
}
html[data-theme="light"] .alert-red .stat-label,
html[data-theme="light"] .alert-red .stat-action {
  color: #b91c1c;
}
html[data-theme="light"] .alert-red .stat-value {
  color: #dc2626;
}

.alert-orange {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.09) 0%, rgba(245, 158, 11, 0.03) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}
.alert-orange .stat-icon {
  background: rgba(245, 158, 11, 0.12);
}
.alert-orange .stat-label {
  color: #fde047;
}
.alert-orange .stat-value {
  color: #facc15;
}
.alert-orange .stat-action {
  color: #fde047;
}
html[data-theme="light"] .alert-orange {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0.02) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.18) !important;
}
html[data-theme="light"] .alert-orange .stat-label,
html[data-theme="light"] .alert-orange .stat-action {
  color: #b45309;
}
html[data-theme="light"] .alert-orange .stat-value {
  color: #d97706;
}

.alert-blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.09) 0%, rgba(59, 130, 246, 0.03) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}
.alert-blue .stat-icon {
  background: rgba(59, 130, 246, 0.12);
}
.alert-blue .stat-label {
  color: #93c5fd;
}
.alert-blue .stat-value {
  color: #60a5fa;
}
.alert-blue .stat-action {
  color: #93c5fd;
}
html[data-theme="light"] .alert-blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(59, 130, 246, 0.02) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.18) !important;
}
html[data-theme="light"] .alert-blue .stat-label,
html[data-theme="light"] .alert-blue .stat-action {
  color: #1d4ed8;
}
html[data-theme="light"] .alert-blue .stat-value {
  color: #2563eb;
}

.alert-purple {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.09) 0%, rgba(147, 51, 234, 0.03) 100%) !important;
  border: 1px solid rgba(147, 51, 234, 0.2) !important;
}
.alert-purple .stat-icon {
  background: rgba(147, 51, 234, 0.12);
}
.alert-purple .stat-label {
  color: #d8b4fe;
}
.alert-purple .stat-value {
  color: #c084fc;
}
.alert-purple .stat-action {
  color: #d8b4fe;
}
html[data-theme="light"] .alert-purple {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.06) 0%, rgba(147, 51, 234, 0.02) 100%) !important;
  border: 1px solid rgba(147, 51, 234, 0.18) !important;
}
html[data-theme="light"] .alert-purple .stat-label,
html[data-theme="light"] .alert-purple .stat-action {
  color: #6b21a8;
}
html[data-theme="light"] .alert-purple .stat-value {
  color: #7e22ce;
}

/* Modern Dashboard Collapsible Sheets */
.dashboard-sheet {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid var(--erp-border) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.dashboard-sheet:hover {
  border-color: rgba(20, 184, 255, 0.3) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.dashboard-sheet > summary {
  padding: 1rem 1.25rem !important;
  background: var(--erp-card);
  transition: background 0.15s;
  user-select: none;
}
.dashboard-sheet > summary:hover {
  background: var(--erp-hover);
}
.dashboard-sheet[open] > summary {
  border-bottom: 1px solid var(--erp-border);
}
.dashboard-sheet .collapse-indicator {
  transition: transform 0.25s ease;
  font-size: 1.15rem;
  display: inline-block;
  line-height: 1;
}
.dashboard-sheet[open] .collapse-indicator {
  transform: rotate(180deg);
}

.picker-source-select{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important;}



.erp-stat .label,
.erp-stat .value,
.dashboard-sheet summary,
.dashboard-sheet summary h2,
.dashboard-sheet summary .small,
.card .form-label,
.card .form-check-label,
.erp-shell .form-label,
.erp-shell .form-check-label,
.proj-shell .form-label,
.proj-shell .form-check-label{
  color:inherit;
}

html[data-theme="dark"] .erp-stat,
body[data-theme="dark"] .erp-stat{
  background:linear-gradient(135deg,#252b3a 0%,#2d3650 100%) !important;
  color:#f8fafc !important;
}
html[data-theme="dark"] .erp-stat .label,
body[data-theme="dark"] .erp-stat .label{
  color:#b9c4d6 !important;
}
html[data-theme="dark"] .erp-stat .value,
body[data-theme="dark"] .erp-stat .value{
  color:#ffffff !important;
}
html[data-theme="light"] .erp-stat,
body[data-theme="light"] .erp-stat{
  background:linear-gradient(135deg,#eff6ff 0%,#e2e8f0 100%) !important;
  color:#0f172a !important;
  border-color:#d6deea !important;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
html[data-theme="light"] .erp-stat .label,
body[data-theme="light"] .erp-stat .label{
  color:#475569 !important;
}
html[data-theme="light"] .erp-stat .value,
body[data-theme="light"] .erp-stat .value{
  color:#0f172a !important;
}

html[data-theme="dark"] .table-danger,
html[data-theme="dark"] .table-warning,
html[data-theme="dark"] .table-danger td,
html[data-theme="dark"] .table-warning td,
html[data-theme="dark"] .table-danger th,
html[data-theme="dark"] .table-warning th,
body[data-theme="dark"] .table-danger,
body[data-theme="dark"] .table-warning,
body[data-theme="dark"] .table-danger td,
body[data-theme="dark"] .table-warning td,
body[data-theme="dark"] .table-danger th,
body[data-theme="dark"] .table-warning th{
  color:var(--erp-text) !important;
}
html[data-theme="dark"] .table-danger > :not(caption) > * > *,
body[data-theme="dark"] .table-danger > :not(caption) > * > *{
  background:rgba(127,29,29,.28) !important;
}
html[data-theme="dark"] .table-warning > :not(caption) > * > *,
body[data-theme="dark"] .table-warning > :not(caption) > * > *{
  background:rgba(120,53,15,.28) !important;
}
html[data-theme="dark"] .text-body-secondary,
html[data-theme="dark"] .text-body-tertiary,
body[data-theme="dark"] .text-body-secondary,
body[data-theme="dark"] .text-body-tertiary{
  color:var(--erp-muted) !important;
}

/* ---------- v8 theme hardening ---------- */
:root{
  --surface-dark:#171b26;
  --surface-dark-2:#202637;
}

a,
.btn,
.dropdown-item,
.nav-link,
.form-check-label,
.summary,
summary,
label,
th,
td,
small,
code{
  transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}

.card-header,
.card-footer{
  background:rgba(255,255,255,.03);
  color:inherit;
  border-color:var(--erp-border);
}

code,
pre,
kbd{
  color:inherit;
  background:rgba(148,163,184,.12);
  border-radius:.5rem;
  padding:.12rem .35rem;
}
pre{ padding:.75rem 1rem; }

.border,
hr,
.img-thumbnail{
  border-color:var(--erp-border) !important;
}

.btn-close{ opacity:.8; }
html[data-theme="dark"] .btn-close,
body[data-theme="dark"] .btn-close{
  filter:invert(1) grayscale(100%) brightness(1.8);
}
html[data-theme="light"] .btn-close,
body[data-theme="light"] .btn-close{
  filter:none;
}

.form-check-input{
  border-color:#64748b;
  background-color:transparent;
  box-shadow:none !important;
}
.form-check-input:focus{
  border-color:var(--erp-primary);
  box-shadow:0 0 0 .2rem rgba(20,184,255,.16) !important;
}
.form-check-input:checked{
  background-color:var(--erp-primary);
  border-color:var(--erp-primary);
}
html[data-theme="dark"] .form-check-input,
body[data-theme="dark"] .form-check-input{
  background-color:var(--surface-dark);
}
html[data-theme="light"] .form-check-input,
body[data-theme="light"] .form-check-input{
  background-color:#ffffff;
  border-color:#94a3b8;
}

/* Use the browser's native select caret everywhere.
   The prior SVG caret override was repeating in Chromium on some Windows controls,
   especially around themed selects and datetime-adjacent layouts. */
html[data-theme="dark"] .form-select,
body[data-theme="dark"] .form-select,
html[data-theme="light"] .form-select,
body[data-theme="light"] .form-select,
.form-select,
select.form-select{
  -webkit-appearance:auto !important;
  -moz-appearance:auto !important;
  appearance:auto !important;
  background-image:none !important;
  background-repeat:no-repeat !important;
  background-size:0 0 !important;
  padding-right:.75rem !important;
}
.form-select::-ms-expand,
select.form-select::-ms-expand{
  display:block;
}
html[data-theme="dark"] .dropdown-toggle::after,
body[data-theme="dark"] .dropdown-toggle::after{
  border-top-color:#e2e8f0;
}
html[data-theme="light"] .dropdown-toggle::after,
body[data-theme="light"] .dropdown-toggle::after{
  border-top-color:currentColor;
}

.navbar .form-control,
.navbar .form-select{
  background:rgba(255,255,255,.06) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.14) !important;
}
.navbar .form-control::placeholder{ color:rgba(248,250,252,.72) !important; }
.navbar .btn-outline-light,
.navbar .btn-outline-secondary{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.18);
  color:#f8fafc !important;
}
.navbar .btn-outline-light:hover,
.navbar .btn-outline-secondary:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.28);
  color:#ffffff !important;
}
.navbar .text-white-50{ color:rgba(248,250,252,.78) !important; }
.navbar form .btn[title="Search"]{ min-width:42px; width:42px; padding:.25rem .5rem; display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:1rem; }

.bg-white,
.bg-light,
.card.bg-white,
.card.bg-light,
.tab-content.bg-white,
.tab-content.bg-light{
  border-color:var(--erp-border) !important;
}
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .card.bg-white,
html[data-theme="dark"] .card.bg-light,
html[data-theme="dark"] .tab-content.bg-white,
html[data-theme="dark"] .tab-content.bg-light,
body[data-theme="dark"] .bg-white,
body[data-theme="dark"] .bg-light,
body[data-theme="dark"] .card.bg-white,
body[data-theme="dark"] .card.bg-light,
body[data-theme="dark"] .tab-content.bg-white,
body[data-theme="dark"] .tab-content.bg-light{
  background:var(--erp-card) !important;
  color:var(--erp-text) !important;
}
html[data-theme="light"] .bg-white,
html[data-theme="light"] .bg-light,
html[data-theme="light"] .card.bg-white,
html[data-theme="light"] .card.bg-light,
html[data-theme="light"] .tab-content.bg-white,
html[data-theme="light"] .tab-content.bg-light,
body[data-theme="light"] .bg-white,
body[data-theme="light"] .bg-light,
body[data-theme="light"] .card.bg-white,
body[data-theme="light"] .card.bg-light,
body[data-theme="light"] .tab-content.bg-white,
body[data-theme="light"] .tab-content.bg-light{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:#d6deea !important;
}

.table-dark{
  --bs-table-color:var(--erp-text);
  --bs-table-bg:var(--erp-card);
  --bs-table-border-color:var(--erp-border);
  --bs-table-striped-bg:rgba(148,163,184,.06);
  --bs-table-striped-color:var(--erp-text);
  --bs-table-active-bg:rgba(148,163,184,.1);
  --bs-table-active-color:var(--erp-text);
  --bs-table-hover-bg:rgba(148,163,184,.08);
  --bs-table-hover-color:var(--erp-text);
}
html[data-theme="light"] .table-dark,
body[data-theme="light"] .table-dark{
  --bs-table-color:#0f172a;
  --bs-table-bg:#ffffff;
  --bs-table-border-color:#d6deea;
  --bs-table-striped-bg:#f8fafc;
  --bs-table-striped-color:#0f172a;
  --bs-table-active-bg:#eef2f7;
  --bs-table-active-color:#0f172a;
  --bs-table-hover-bg:#f8fafc;
  --bs-table-hover-color:#0f172a;
}

.table a,
.table td,
.table th,
.table small,
.table span,
.table div{
  color:inherit;
}
.table .text-info,
.table a.text-info,
a.text-info{
  color:#7dd3fc !important;
}
html[data-theme="light"] .table .text-info,
html[data-theme="light"] .table a.text-info,
html[data-theme="light"] a.text-info,
body[data-theme="light"] .table .text-info,
body[data-theme="light"] .table a.text-info,
body[data-theme="light"] a.text-info{
  color:#0369a1 !important;
}

.text-bg-light{
  background:rgba(148,163,184,.18) !important;
  color:inherit !important;
  border:1px solid rgba(148,163,184,.22);
}
html[data-theme="light"] .badge.text-bg-light,
body[data-theme="light"] .badge.text-bg-light,
[data-theme="light"] .badge.text-bg-light,
html[data-theme="light"] .text-bg-light,
body[data-theme="light"] .text-bg-light,
[data-theme="light"] .text-bg-light {
  background:#eef2f7 !important;
  color:#334155 !important;
  border-color:#d6deea !important;
}

.btn-outline-primary,
.btn-outline-info,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger{
  font-weight:500;
}
html[data-theme="dark"] .btn-outline-primary,
body[data-theme="dark"] .btn-outline-primary{ color:#93c5fd; border-color:rgba(147,197,253,.45); }
html[data-theme="dark"] .btn-outline-info,
body[data-theme="dark"] .btn-outline-info{ color:#7dd3fc; border-color:rgba(125,211,252,.45); }
html[data-theme="dark"] .btn-outline-success,
body[data-theme="dark"] .btn-outline-success{ color:#86efac; border-color:rgba(134,239,172,.45); }
html[data-theme="dark"] .btn-outline-warning,
body[data-theme="dark"] .btn-outline-warning{ color:#fcd34d; border-color:rgba(252,211,77,.45); }
html[data-theme="dark"] .btn-outline-danger,
body[data-theme="dark"] .btn-outline-danger{ color:#fca5a5; border-color:rgba(252,165,165,.45); }

html[data-theme="dark"] .btn-outline-primary:hover,
body[data-theme="dark"] .btn-outline-primary:hover{ background:rgba(147,197,253,.12); color:#dbeafe; }
html[data-theme="dark"] .btn-outline-info:hover,
body[data-theme="dark"] .btn-outline-info:hover{ background:rgba(125,211,252,.12); color:#e0f2fe; }
html[data-theme="dark"] .btn-outline-success:hover,
body[data-theme="dark"] .btn-outline-success:hover{ background:rgba(134,239,172,.12); color:#dcfce7; }
html[data-theme="dark"] .btn-outline-warning:hover,
body[data-theme="dark"] .btn-outline-warning:hover{ background:rgba(252,211,77,.12); color:#fef3c7; }
html[data-theme="dark"] .btn-outline-danger:hover,
body[data-theme="dark"] .btn-outline-danger:hover{ background:rgba(252,165,165,.12); color:#fee2e2; }

html[data-theme="dark"] .crm-page .crm-stage-column.drag-over,
body[data-theme="dark"] .crm-page .crm-stage-column.drag-over{
  background:rgba(20,184,255,.08) !important;
  outline:2px dashed var(--erp-primary);
}
html[data-theme="dark"] .crm-page .crm-stage-progress,
body[data-theme="dark"] .crm-page .crm-stage-progress{
  background:#334155;
}
html[data-theme="dark"] .crm-page .crm-tag,
body[data-theme="dark"] .crm-page .crm-tag{
  background:rgba(124,58,237,.18);
  color:#ddd6fe !important;
}
html[data-theme="dark"] .crm-page .crm-tag.alt,
body[data-theme="dark"] .crm-page .crm-tag.alt{
  background:rgba(56,189,248,.18);
  color:#bae6fd !important;
}
html[data-theme="dark"] .crm-page .crm-chip,
html[data-theme="dark"] .crm-page .crm-stage-chip,
body[data-theme="dark"] .crm-page .crm-chip,
body[data-theme="dark"] .crm-page .crm-stage-chip{
  background:rgba(91,107,255,.18);
  color:#c7d2fe !important;
}
html[data-theme="dark"] .crm-page .crm-chip.success,
body[data-theme="dark"] .crm-page .crm-chip.success{
  background:rgba(34,197,94,.18);
  color:#bbf7d0 !important;
}
html[data-theme="dark"] .crm-page .crm-chip.danger,
body[data-theme="dark"] .crm-page .crm-chip.danger{
  background:rgba(239,68,68,.18);
  color:#fecaca !important;
}
html[data-theme="dark"] .crm-page .crm-stars,
body[data-theme="dark"] .crm-page .crm-stars{ color:#fbbf24 !important; }
html[data-theme="dark"] .crm-page .crm-stars .muted,
body[data-theme="dark"] .crm-page .crm-stars .muted{ color:#475569 !important; }

.search-dark{
  background:var(--surface-dark) !important;
  color:var(--erp-text) !important;
  border-color:#3a4357 !important;
}
.search-dark::placeholder{ color:#94a3b8 !important; }
html[data-theme="light"] .search-dark,
body[data-theme="light"] .search-dark{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:#d6deea !important;
}
html[data-theme="light"] .search-dark::placeholder,
body[data-theme="light"] .search-dark::placeholder{ color:#94a3b8 !important; }

.tag-pill{
  background:rgba(20,184,255,.12);
  color:var(--erp-text);
  border:1px solid rgba(20,184,255,.18);
  border-radius:999px;
  padding:2px 10px;
  font-size:.78rem;
  cursor: pointer;
  transition: all .15s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tag-pill:hover{
  background: rgba(20,184,255,.24);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(20,184,255,.35);
  border-color: rgba(20,184,255,.6);
  color: #fff !important;
}
th.erp-shareable{
  cursor: pointer !important;
  transition: all .15s ease-in-out;
}
th.erp-shareable:hover{
  color: #38bdf8 !important;
  text-decoration: underline dotted 1px rgba(56,189,248,0.7) !important;
}
.erp-header-tip-icon{
  display: inline-block;
  opacity: 0.35;
  font-size: 0.72rem;
  margin-left: 3px;
  transition: opacity .15s ease;
  vertical-align: middle;
}
th.erp-shareable:hover .erp-header-tip-icon{
  opacity: 1;
}
.chat-item{
  border-left:3px solid rgba(148,163,184,.35);
  padding-left:10px;
  margin-bottom:14px;
}
html[data-theme="light"] .chat-item,
body[data-theme="light"] .chat-item{
  border-left-color:rgba(15,23,42,.18);
}


/* --- Phase update: split nav dropdowns, compact module pills, pagination --- */
.nav-split-dropdown{
  display:flex;
  align-items:center;
}
.nav-split-dropdown .nav-main-link{
  padding-right:.35rem;
}
.nav-split-dropdown .dropdown-toggle-split{
  padding-left:.15rem;
  padding-right:.55rem;
}
.nav-split-dropdown .dropdown-toggle-split::after{
  margin-left:0;
}
.module-pill-dropdown{
  display:inline-flex;
  align-items:center;
}
.module-pill-dropdown > .dropdown-toggle{
  padding:.45rem .85rem;
  border-radius:999px;
  background:#171b26;
  color:#dce3ea;
  text-decoration:none;
  border:1px solid #31384a;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.module-pill-dropdown > .dropdown-toggle:hover,
.module-pill-dropdown > .dropdown-toggle.active{
  background:#14b8ff;
  color:#111827;
  border-color:#14b8ff;
}
.module-pill-dropdown .dropdown-menu{
  min-width:220px;
}
.module-page-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.75rem;
}
.module-page-actions .btn{
  min-width:120px;
}
.erp-pageable-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  flex-wrap:nowrap;
  padding:.35rem .6rem;
  border:1px solid var(--erp-border);
  border-bottom:none;
  border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,var(--erp-card),var(--erp-card-2));
}
.erp-pageable-meta{
  font-size:.8rem;
  color:var(--erp-muted);
  white-space:nowrap;
}
.erp-pageable-nav{
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:nowrap;
}
.erp-pageable-nav .btn{
  min-width:auto;
  padding:.2rem .4rem;
  font-size:.78rem;
  line-height:1.2;
}
.erp-pageable-nav span{
  white-space:nowrap;
  font-size:.78rem;
}
.erp-pageable-nav label{
  white-space:nowrap;
  font-size:.78rem;
}
.erp-pageable-size{
  max-width:80px;
  height:28px !important;
  padding:2px 4px !important;
  font-size:.78rem !important;
  min-height:auto !important;
}
.kpi-link-reset{
  color:inherit;
  text-decoration:none;
}
.kpi-link-reset:hover{
  color:inherit;
  text-decoration:none;
}
.erp-kpi-grid a .erp-stat{
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.erp-kpi-grid a:hover .erp-stat{
  transform:translateY(-2px);
  border-color:rgba(20,184,255,.55);
  box-shadow:0 12px 26px rgba(15,23,42,.10);
}
.responsive-side-sections{
  display:grid;
  grid-template-columns:minmax(240px,25%) minmax(420px,1fr) minmax(260px,25%);
  gap:1rem;
}
@media (max-width: 1199px){
  .responsive-side-sections{
    grid-template-columns:1fr;
  }
}
.compact-stat-table td,
.compact-stat-table th{
  white-space:nowrap;
}
.table td.text-wrap-cell,
.table th.text-wrap-cell{
  white-space:normal !important;
}
.bulk-utility-box{
  border:1px solid var(--erp-border);
  border-radius:14px;
  background:linear-gradient(180deg,var(--erp-card),var(--erp-card-2));
  padding:.65rem .85rem;
}
.hidden-placeholder{
  color:var(--erp-muted) !important;
}


/* ═══ v52 Enhancements ═══ */

/* Tag badges in contact list */
.tag-badge {
  display: inline-block;
  padding: .25em .6em;
  font-size: .78em;
  border-radius: 4px;
  background: var(--erp-accent, #0d6efd22);
  color: var(--erp-text);
  text-decoration: none;
  transition: background .15s;
}
.tag-badge:hover { background: var(--erp-accent, #0d6efd44); }

/* Communication history - clickable rows */
.chat-item {
  cursor: pointer;
  padding: .6rem .8rem;
  border-radius: 8px;
  margin-bottom: .5rem;
  border: 1px solid var(--erp-border);
  transition: background .15s, border-color .15s;
}
.chat-item:hover { background: var(--erp-hover, rgba(0,0,0,.06)); border-color: var(--bs-primary, #0d6efd); }

/* Quick action button sizing */
.btn-xs { padding: .15rem .4rem; font-size: .78rem; line-height: 1.4; }

/* Nav avatar circle */
.nav-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.3);
  flex-shrink: 0;
}

/* Flicker prevention for theme switching */
html:not([data-theme]) body { opacity: 0; }
html[data-theme] body { opacity: 1; transition: opacity .1s; }

/* Call timer display */
#callTimerDisplay {
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  color: var(--bs-success, #198754);
}

/* Group classification badges */
[data-grp-class="vip"] .erp-chip { background: gold; color: #333; }
[data-grp-class="customer"] .erp-chip { background: #198754; color: #fff; }
[data-grp-class="lead"] .erp-chip { background: #0d6efd; color: #fff; }
[data-grp-class="churned"] .erp-chip { background: #dc3545; color: #fff; }

/* HTML preview modal iframe */
#htmlPreviewFrame, #tplPreviewFrame {
  border: none;
  background: #fff;
  border-radius: 0 0 8px 8px;
}

/* Manage Tags section tag cloud */
#tagCloud .badge {
  cursor: pointer;
  transition: transform .1s, opacity .1s;
}
#tagCloud .badge:hover { transform: scale(1.08); }

/* Comm detail expand animation */
.comm-detail {
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ═══ v52 Update 2 — Additional styles ═══ */

/* Drag-to-select row highlight */
tr[data-selectable]:not(.no-drag):hover { cursor: crosshair; }
tr[data-selectable].drag-selecting { background: rgba(13,110,253,.12) !important; }

/* Tag typeahead suggestion box */
#tagSuggestionBox .suggestion-item { font-size:.875rem; border-bottom:1px solid var(--erp-border); }
#tagSuggestionBox .suggestion-item:last-child { border-bottom:none; }

/* Advanced filter panel open indicator */
#advFilterPanel[open] > summary { color: var(--bs-primary); }

/* Config module rule cards */
.rule-type-call_next { border-left: 3px solid var(--bs-primary); }
.rule-type-priority_sort { border-left: 3px solid var(--bs-warning); }
.rule-type-time_schedule { border-left: 3px solid var(--bs-info); }
.rule-type-auto_skip { border-left: 3px solid var(--bs-secondary); }
.rule-type-auto_close { border-left: 3px solid var(--bs-danger); }
.rule-type-status_change { border-left: 3px solid var(--bs-success); }

/* Custom fields tab */
.custom-field-row { border-bottom: 1px solid var(--erp-border); padding-bottom:.5rem; }
.custom-field-row:last-of-type { border-bottom: none; }

/* Quality observation note */
label .text-muted[title] { cursor: help; text-decoration: underline dotted; }

/* Participant status multiselect badge */
#participantStatusFilter option:checked { background: var(--bs-primary); color: #fff; }

/* Tag cloud hover */
#tagCloud .badge, .d-flex .badge[href] {
  transition: transform .12s, opacity .12s;
  cursor: pointer;
}
#tagCloud .badge:hover, .d-flex .badge[href]:hover { transform: scale(1.1); }

/* Group ID display in dropdowns */
option .group-id { opacity: .6; font-size: .8em; }

/* Timeline all-fields expand */
.comm-detail .row > div { border-right: 1px solid var(--erp-border); padding-right: .75rem; }
.comm-detail .row > div:last-child { border-right: none; }

/* ═══ v54 Patch CSS ═══ */

/* Participant done rows - visually separated */
.participant-done {
  opacity: .55 !important;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 6px,
    rgba(0,0,0,.025) 6px, rgba(0,0,0,.025) 7px
  ) !important;
}
.participant-done td { font-style: italic; }
[data-theme='light'] .participant-done { background-color: #f5f5f5 !important; }

/* Disposition badge in history */
.history-entry { transition: background .12s, border-color .12s; }
.history-entry:hover { background: var(--erp-hover) !important; border-color: var(--bs-primary) !important; }

/* Timer display */
#callTimerDisplay { transition: color .3s; letter-spacing:.05em; }
#timerBtn.btn-danger { animation: timerPulse 1s ease infinite; }
@keyframes timerPulse { 0%,100%{opacity:1} 50%{opacity:.75} }

/* Save buttons bar in action popup */
.col-12 > .d-flex.p-2.rounded { position: sticky; bottom: 0; z-index: 5; backdrop-filter: blur(4px); }

/* Master contact update collapse */
#masterUpdatePanel { animation: erpSlideIn .15s ease; }

/* Dashboard drilldown contact link */
.fw-semibold.text-decoration-none:hover { text-decoration: underline !important; }

/* btn-xs utility */
.btn-xs { padding: .1rem .4rem; font-size: .75rem; line-height: 1.4; }

/* Interaction count badges */
td .badge[title*="interaction"] { cursor: default; }

/* Page size selector in participants */
#participantPageSize { font-size: .8rem; padding: .2rem .5rem; }
#participantCountLabel { opacity: .7; }

/* ═══ Dropdown overflow fix — prevents clipping in scrollable containers ═══ */
#tableScroller { position: relative; }
#tableScroller .dropdown-menu {
  position: fixed !important;
  z-index: 9999 !important;
}
/* Ensure action column never wraps */
#contactTable td:last-child,
#contactTable th:last-child {
  white-space: nowrap;
  text-align: right;
}
/* Fix: Columns dropdown stays clean */
#colToggleMenu label { user-select: none; }
#colToggleMenu label:hover { background: var(--erp-hover, rgba(0,0,0,.06)); }

/* ═══ Contacts table improvements ═══ */
#contactTable { min-width: 900px; }
#contactTable tbody tr:hover { background: var(--erp-hover, rgba(0,0,0,.04)) !important; cursor: default; }
#contactTable td { vertical-align: middle; padding: .45rem .6rem; font-size: .875rem; }
#contactTable th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }

/* ═══ Dropdown Solid Background Fix — v2 COMPLETE ═══ */

/* 1. Set Bootstrap 5.3's own CSS variables for dropdown */
:root,
html[data-theme="dark"],
body[data-theme="dark"] {
  --bs-dropdown-bg: #252b3a;
  --bs-dropdown-color: #e2e8f0;
  --bs-dropdown-border-color: rgba(148,163,184,.25);
  --bs-dropdown-link-color: #e2e8f0;
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: rgba(255,255,255,.08);
  --bs-dropdown-link-active-bg: #3b82f6;
  --bs-dropdown-divider-bg: rgba(148,163,184,.2);
  --bs-dropdown-box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

html[data-theme="light"],
body[data-theme="light"] {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-color: #212529;
  --bs-dropdown-border-color: rgba(0,0,0,.15);
  --bs-dropdown-link-color: #212529;
  --bs-dropdown-link-hover-color: #000;
  --bs-dropdown-link-hover-bg: #f0f2f5;
  --bs-dropdown-link-active-bg: #0d6efd;
  --bs-dropdown-divider-bg: rgba(0,0,0,.1);
  --bs-dropdown-box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* 2. Explicit solid override — catch ALL cases */
.dropdown-menu {
  background-color: var(--bs-dropdown-bg) !important;
  color: var(--bs-dropdown-color) !important;
  border: 1px solid var(--bs-dropdown-border-color) !important;
  box-shadow: var(--bs-dropdown-box-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3. Fix z-index in ALL scroll/table contexts */
.dropdown-menu.show {
  z-index: 9999 !important;
}

/* 4. Dropdown items */
.dropdown-item {
  color: var(--bs-dropdown-link-color) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-dropdown-link-hover-bg) !important;
  color: var(--bs-dropdown-link-hover-color) !important;
}
.dropdown-item.text-danger { color: #dc3545 !important; }
.dropdown-item.text-danger:hover { background-color: rgba(220,53,69,.12) !important; }
.dropdown-item.text-success { color: #198754 !important; }
.dropdown-item.text-success:hover { background-color: rgba(25,135,84,.12) !important; }
.dropdown-item.text-info { color: #0dcaf0 !important; }
.dropdown-divider {
  border-color: var(--bs-dropdown-divider-bg) !important;
}

/* ═══ Table Height Optimization — 50% viewport across all modules ═══
   Constrains all data tables to 50% screen height with sticky headers.
   Allows seeing both table content and other page elements simultaneously. */
.erp-table-wrap {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: 8px;
  position: relative;
}
.erp-table-wrap table thead th,
.erp-table-wrap table thead td {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--erp-card, #1e2130) !important;
  box-shadow: 0 1px 0 var(--erp-border, rgba(148,163,184,.2));
}
[data-theme="light"] .erp-table-wrap table thead th,
[data-theme="light"] .erp-table-wrap table thead td {
  background: #f8f9fa !important;
}
/* Scrollbar styling for tables */
.erp-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.erp-table-wrap::-webkit-scrollbar-track { background: transparent; }
.erp-table-wrap::-webkit-scrollbar-thumb { background: rgba(148,163,184,.3); border-radius: 3px; }
.erp-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.5); }

/* Override for contacts table (uses inner tableScroller) */
#tableScroller {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: auto;
}
#tableScroller::-webkit-scrollbar { width: 6px; height: 6px; }
#tableScroller::-webkit-scrollbar-thumb { background: rgba(148,163,184,.3); border-radius: 3px; }

/* Global list/table scroll fix
   Keep data lists scrollable inside their cards/modules.
   The previous overflow:visible override broke scrolling across Users,
   Campaigns, CRM and other modules using .erp-table-wrap. */
.erp-table-wrap {
  overflow-y: auto !important;
  overflow-x: auto !important;
}
#tableScroller {
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* Let Bootstrap/Popper handle table action dropdowns without breaking scroll */
.erp-table-wrap .dropdown-menu,
#tableScroller .dropdown-menu {
  z-index: 10000;
}


/* Ensure scrollable data grids can shrink correctly inside cards/shells */
.erp-table-wrap, #tableScroller { min-height: 0; }

/* ---------- Accordion Theme & Contrast Fixes ---------- */
.accordion-item {
  background-color: var(--erp-card) !important;
  border: 1px solid var(--erp-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.accordion-header {
  margin-bottom: 0 !important;
}

.accordion-button {
  background-color: var(--erp-card) !important;
  color: var(--erp-text) !important;
  font-weight: 600;
  box-shadow: none !important;
  padding: 0.85rem 1.25rem;
  border: 0 !important;
}

/* Expanded state color tint */
.accordion-button:not(.collapsed) {
  background-color: rgba(20, 184, 255, 0.1) !important;
  color: var(--erp-primary) !important;
}

/* Chevron icon adjustments */
.accordion-button::after {
  filter: invert(1) grayscale(1) brightness(1.8); /* makes default bootstrap dark chevron white */
}

/* Light mode adjustments */
html[data-theme="light"] .accordion-button::after,
body[data-theme="light"] .accordion-button::after {
  filter: none; /* keep default dark chevron in light mode */
}

html[data-theme="light"] .accordion-button,
body[data-theme="light"] .accordion-button {
  background-color: var(--erp-card) !important;
  color: var(--erp-text) !important;
}

html[data-theme="light"] .accordion-button:not(.collapsed),
body[data-theme="light"] .accordion-button:not(.collapsed) {
  background-color: rgba(20, 184, 255, 0.08) !important;
  color: var(--erp-primary) !important;
}

/* ---------- Campaign Action Page (Log Interaction) ---------- */
.campaign-action-shell .card {
  border-radius: 12px;
}
.campaign-action-shell .btn {
  border-radius: 6px;
}
.campaign-action-shell textarea {
  resize: vertical;
}

@media (max-width: 767.98px) {
  /* On mobile, make quick disposition buttons larger and full width */
  #dispositionPills {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem !important;
  }
  #dispositionPills label {
    width: 100% !important;
    text-align: center;
    padding: 0.35rem 0.2rem !important;
    font-size: 0.78rem !important;
    margin: 0 !important;
  }
  
  /* Make primary save buttons larger and thumb-friendly on mobile */
  .campaign-action-shell button[type="submit"],
  .campaign-action-shell a.btn-outline-secondary {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    flex-grow: 1;
  }
}

/* ==========================================================================
   v58 UI Overhaul Enhancements (Universal Lists, Activities & Calendar)
   ========================================================================== */

/* Modernized Navbar (Translucent Glassmorphism) */
.navbar {
  background: rgba(17, 22, 33, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.navbar .navbar-brand {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 30%, #14b8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 15px;
}

.navbar .nav-link {
  color: rgba(248, 250, 252, 0.85) !important;
  font-weight: 600 !important;
  font-size: 0.9rem;
  padding: 4px 8px !important;
  border-radius: 8px;
  transition: all 0.2s ease !important;
}

.navbar .nav-link.dropdown-toggle-split {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.navbar .nav-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08);
}

.navbar .nav-link.active,
.navbar .nav-link.show {
  color: var(--erp-primary, #14b8ff) !important;
  background: rgba(20, 184, 255, 0.12) !important;
}

.navbar .dropdown-menu {
  background: #1e2433 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
  padding: 6px !important;
}

.navbar .dropdown-item {
  color: rgba(248, 250, 252, 0.8) !important;
  font-size: 0.85rem;
  font-weight: 550;
  border-radius: 8px;
  padding: 8px 12px !important;
  transition: all 0.15s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Ensure buttons in the navbar are ALWAYS light colored since the navbar background is always dark */
.navbar .btn-outline-light,
.navbar .btn-outline-secondary,
body[data-theme="light"] .navbar .btn-outline-light,
body[data-theme="light"] .navbar .btn-outline-secondary,
html[data-theme="light"] .navbar .btn-outline-light,
html[data-theme="light"] .navbar .btn-outline-secondary {
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.navbar .btn-outline-light:hover,
.navbar .btn-outline-secondary:hover,
body[data-theme="light"] .navbar .btn-outline-light:hover,
body[data-theme="light"] .navbar .btn-outline-secondary:hover,
html[data-theme="light"] .navbar .btn-outline-light:hover,
html[data-theme="light"] .navbar .btn-outline-secondary:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

/* Light Mode Overrides for dropdown menus */
body[data-theme="light"] .navbar .dropdown-menu,
html[data-theme="light"] .navbar .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08) !important;
}

body[data-theme="light"] .navbar .dropdown-item,
html[data-theme="light"] .navbar .dropdown-item {
  color: #0f172a !important;
}

body[data-theme="light"] .navbar .dropdown-item:hover,
html[data-theme="light"] .navbar .dropdown-item:hover {
  background: #f1f5f9 !important;
  color: #000000 !important;
}

/* Premium Tabbed Admin Module Styling */
.erp-tabs {
  border-bottom: 1px solid var(--erp-border) !important;
  gap: 6px;
}
.erp-tabs .nav-link {
  color: var(--erp-muted) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}
.erp-tabs .nav-link:hover {
  color: var(--erp-text) !important;
  background: var(--erp-hover) !important;
}
.erp-tabs .nav-link.active {
  color: #ffffff !important;
  background: var(--erp-primary, #14b8ff) !important;
  box-shadow: 0 4px 12px rgba(20, 184, 255, 0.22) !important;
}
body[data-theme="light"] .erp-tabs .nav-link.active,
html[data-theme="light"] .erp-tabs .nav-link.active {
  color: #ffffff !important;
  background: var(--erp-primary, #14b8ff) !important;
}

/* User Contact Directory Cards styling */
.directory-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.directory-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* Timesheet Description Ellipsis & Expandable styling */
.ts-desc-cell {
  line-height: 1.4;
  word-break: break-word;
}
.ts-desc-truncated, .ts-desc-full {
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.15s ease;
}
.ts-desc-truncated:hover, .ts-desc-full:hover {
  opacity: 0.85;
}
.ts-desc-truncated .badge, .ts-desc-full .badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ==========================================================================
   Universal Table Formatting & Alignment (Left & Top Aligned)
   ========================================================================== */
.table th, .table td,
.erp-table-wrap th, .erp-table-wrap td,
.table > :not(caption) > * > *,
.table-responsive th, .table-responsive td,
#contactTable th, #contactTable td {
  text-align: left !important;
  vertical-align: top !important;
}

/* Ensure column resizer header position relative */
.table th.has-col-resizer {
  position: relative !important;
  background-clip: padding-box;
}

/* Universal Column Resizer Handle */
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  bottom: 0;
  cursor: col-resize;
  user-select: none;
  z-index: 10;
  background: transparent;
  transition: background-color 0.15s ease;
}

.col-resizer:hover,
.col-resizer.is-resizing {
  background-color: var(--erp-primary, #0284c7) !important;
  box-shadow: 0 0 5px rgba(2, 132, 199, 0.6);
}

body.resizing-col,
body.resizing-col * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* ==========================================================================
   Universal Smart Ellipsis ("Dot dot ...") Cell Styling
   ========================================================================== */
.erp-ellipsis-cell {
  line-height: 1.4;
  word-break: break-word;
}

.erp-ellipsis-truncated, .erp-ellipsis-full {
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.15s ease;
}

.erp-ellipsis-truncated:hover, .erp-ellipsis-full:hover {
  opacity: 0.85;
}

.erp-ellipsis-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 4px;
  font-weight: 500;
  display: inline-block;
  background: rgba(148, 163, 184, 0.2);
  color: inherit;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.erp-ellipsis-truncated:hover .erp-ellipsis-badge,
.erp-ellipsis-full:hover .erp-ellipsis-badge {
  background: var(--erp-primary, #0284c7);
  color: #ffffff;
  border-color: transparent;
}

/* ==========================================================================
   Batch 8: Activities Enhancements
   ========================================================================== */

/* 1. Day Box 3.5 Activities Limit & Internal Scrolling */
.act-day .act-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 206px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scroll-behavior: smooth;
}

.act-day .act-items::-webkit-scrollbar {
  width: 4px;
}

.act-day .act-items::-webkit-scrollbar-track {
  background: transparent;
}

.act-day .act-items::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 4px;
}

.act-day .act-items::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.7);
}

/* 2. Proportional Card Heights & Time Visual Borders */
.act-item.act-time-xs {
  min-height: 44px;
  border-left: 3px solid #0ea5e9 !important;
}

.act-item.act-time-sm {
  min-height: 56px;
  border-left: 4px solid #3b82f6 !important;
}

.act-item.act-time-md {
  min-height: 74px;
  border-left: 5px solid #f59e0b !important;
}

.act-item.act-time-lg {
  min-height: 96px;
  border-left: 6px solid #ef4444 !important;
}

/* 3. Free Hours Pill in Calendar Day Headers */
.act-free-pill {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
  white-space: nowrap;
}

.act-free-pill.is-free {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

html[data-theme="dark"] .act-free-pill.is-free {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.act-free-pill.is-full {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

html[data-theme="dark"] .act-free-pill.is-full {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* 4. Datasheet & List View Port Containment Window */
.act-sheet-window {
  max-height: calc(100vh - 270px);
  min-height: 480px;
  overflow: auto;
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid var(--erp-border);
}

.act-sheet-window table {
  margin-bottom: 0;
}

.act-sheet-window thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--erp-card-2) !important;
  box-shadow: inset 0 -1px 0 var(--erp-border);
  white-space: nowrap;
}

/* 5. DND Focus Mode Badge */
.badge-dnd {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.35);
}

/* 6. Compact Single-Line Calendar Toolbar */
.act-calendar-toolbar-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.75rem;
}