/* ============================================================
   chatos UI theme — loaded last so it refines master.css.
   Scope: dashboard chrome (sidebar). Does not touch login.
   ============================================================ */

:root{
  --c-brand:#0d9488;
  --c-brand-deep:#0f766e;
  --c-brand-tint:#ecfdf5;
  --c-ink:#1f2430;
  --c-slate:#374151;
  --c-muted:#6b7280;
  --c-faint:#9aa1ad;
  --c-hair:#ecedf1;
  --c-surface:#f5f6f8;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── header ────────────────────────────────────────────── */
.dashboard__pageTitle{
  font-size:19px; font-weight:800; letter-spacing:-.015em;
  color:var(--c-ink); margin:0; line-height:1.1;
}
.dashboard__header{ border-bottom:1px solid var(--c-hair); }
@media (max-width:640px){ .dashboard__pageTitle{font-size:16px} }

/* ── shell ─────────────────────────────────────────────── */
.dashboard__sidebar{
  background:#fff;
  border-right:1px solid var(--c-hair);
}
.dashboard__sidebar .dashboard__logo{
  padding-block:15px;
  border-bottom:1px solid var(--c-hair) !important;
  margin-bottom:6px !important;
}
.dashboard__sidebar .dashboard__nav{
  padding-inline:13px;
  padding-bottom:22px;
  overflow-y:auto;
  height:calc(100vh - 86px);
  scrollbar-width:thin;
  scrollbar-color:#dfe2ea transparent;
}
.dashboard__sidebar .dashboard__nav::-webkit-scrollbar{width:7px}
.dashboard__sidebar .dashboard__nav::-webkit-scrollbar-thumb{background:#e1e4ec;border-radius:99px}
.dashboard__sidebar .dashboard__nav::-webkit-scrollbar-thumb:hover{background:#cfd3dd}

/* tighten the Bootstrap gap-3 (1rem) between items */
.dashboard__sidebar .dashboard__navLinks{gap:3px !important}

/* ── section labels ────────────────────────────────────── */
.dashboard__navSection{padding:15px 12px 5px;list-style:none}
.dashboard__navSection:first-child{padding-top:2px}
.dashboard__navSection span{
  font-size:10.5px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--c-faint)
}
.dashboard__sidebar--close .dashboard__navSection{display:none}

/* ── nav items ─────────────────────────────────────────── */
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink{border-radius:10px;overflow:visible}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link{
  padding:9px 11px;
  gap:13px;
  border-radius:10px;
  color:var(--c-muted);
  position:relative;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link .dashboard__navLink-icon{
  min-width:22px;width:22px;height:22px
}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link .dashboard__navLink-icon svg{
  stroke:#6b7280;transition:stroke .15s var(--ease)
}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link span{
  font-size:14.5px;font-weight:500;color:var(--c-slate);transition:color .15s var(--ease)
}

/* hover */
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link:hover{background:var(--c-surface)}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link:hover span{color:var(--c-ink)}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link:hover .dashboard__navLink-icon svg{stroke:#475569}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link:focus-visible{
  outline:2px solid var(--c-brand);outline-offset:-1px
}

/* active */
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link.active{
  background:var(--c-brand-tint);color:var(--c-brand)
}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link.active::before{
  content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--c-brand)
}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link.active span{
  color:var(--c-brand-deep);font-weight:600
}
.dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link.active .dashboard__navLink-icon svg{
  stroke:var(--c-brand)
}

/* collapsed-rail polish: keep flyout label readable */
.dashboard__sidebar--close .dashboard__navLinks .dashboard__navLink a span{
  box-shadow:0 8px 24px -8px rgba(20,24,40,.35);border:1px solid var(--c-hair)
}

@media (prefers-reduced-motion: reduce){
  .dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link,
  .dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link span,
  .dashboard__sidebar .dashboard__navLinks .dashboard__navLink a.nav-link .dashboard__navLink-icon svg{transition:none}
}

/* ============================================================
   Bootstrap brand remap — default blue primary → chatos teal.
   Unifies buttons, links, badges, form focus across the app.
   ============================================================ */
:root{
  --bs-primary:#0d9488;
  --bs-primary-rgb:13,148,136;
  --bs-link-color:#0f766e;
  --bs-link-color-rgb:15,118,110;
  --bs-link-hover-color:#0a4f48;
}
.btn-primary{
  --bs-btn-bg:#0d9488; --bs-btn-border-color:#0d9488;
  --bs-btn-hover-bg:#0f766e; --bs-btn-hover-border-color:#0f766e;
  --bs-btn-active-bg:#0f766e; --bs-btn-active-border-color:#0f766e;
  --bs-btn-disabled-bg:#0d9488; --bs-btn-disabled-border-color:#0d9488;
}
.btn-outline-primary{
  --bs-btn-color:#0f766e; --bs-btn-border-color:#0d9488;
  --bs-btn-hover-bg:#0d9488; --bs-btn-hover-border-color:#0d9488;
  --bs-btn-active-bg:#0f766e; --bs-btn-active-border-color:#0f766e;
}
.btn-link{ --bs-btn-color:#0f766e; --bs-btn-hover-color:#0a4f48; }
.text-primary{ color:#0f766e !important; }
.bg-primary{ background-color:#0d9488 !important; }
.badge.bg-primary{ background-color:#0d9488 !important; }
a:not(.btn):not(.nav-link):not(.dropdown-item){ color:#0f766e; }
a:not(.btn):not(.nav-link):not(.dropdown-item):hover{ color:#0a4f48; }
.form-check-input:checked{ background-color:#0d9488; border-color:#0d9488; }
.form-control:focus, .form-select:focus{ border-color:#5eccc0; box-shadow:0 0 0 .2rem rgba(13,148,136,.2); }
.page-link{ color:#0f766e; }
.page-item.active .page-link{ background-color:#0d9488; border-color:#0d9488; }
.nav-pills .nav-link.active{ background-color:#0d9488; }

/* ============================================================
   Global component polish — applies under .dashboard__content
   (the app content area) so it lifts every page but never the
   login screen or Syncfusion's own .e-* widgets.
   ============================================================ */
.dashboard__content{ --tealc:#0d9488; --tealc-deep:#0f766e; --hairc:#e9ebf0; --inkc:#1f2430; --mutedc:#6b7280; }

/* cards */
.dashboard__content .card{
  border:1px solid var(--hairc);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(20,24,40,.04);
}
.dashboard__content .card.shadow-sm{ box-shadow:0 1px 2px rgba(20,24,40,.04) !important; }
.dashboard__content .card .card-header{
  background:#fcfcfd; border-bottom:1px solid var(--hairc);
  font-weight:700; color:var(--inkc); padding:13px 18px;
}
.dashboard__content .card .card-body{ padding:18px; }

/* tables (plain Bootstrap only, not Syncfusion .e-grid) */
.dashboard__content table.table:not(.e-table) thead th{
  font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--mutedc); border-bottom:1px solid var(--hairc); background:#fafbfc;
  padding:11px 12px;
}
.dashboard__content table.table:not(.e-table) tbody td{ padding:11px 12px; vertical-align:middle; border-color:#f1f2f5; }
.dashboard__content table.table:not(.e-table) tbody tr{ transition:background .12s ease; }
.dashboard__content table.table:not(.e-table) tbody tr:hover{ background:#f7f8fa; }

/* buttons */
.dashboard__content .btn{ border-radius:9px; font-weight:600; }
.dashboard__content .btn-sm{ border-radius:8px; }

/* badges */
.dashboard__content .badge{ font-weight:600; border-radius:7px; padding:.36em .6em; }

/* inputs (radius + teal focus already set globally) */
.dashboard__content .form-control, .dashboard__content .form-select{ border-radius:9px; border-color:#e2e5ec; }
.dashboard__content .form-label{ font-weight:600; font-size:13px; color:#374151; }

/* section page titles inside body (legacy h1/h3) — slightly smaller since header now carries the name */
.dashboard__content h1.h3{ font-size:18px; font-weight:800; letter-spacing:-.01em; }