/* Omniva Custom Styles */

/* Sidebar */
.sidebar {
  position: fixed;
  top: 56px;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
  padding: 0.75rem 1rem;
}

.sidebar .nav-link:hover {
  color: var(--bs-primary);
  background-color: var(--omniva-sidebar-link-active-bg);
}

.sidebar .nav-link.active {
  color: var(--bs-primary);
  background-color: var(--omniva-sidebar-link-active-bg);
  border-left: 3px solid var(--bs-primary);
}

.sidebar .nav-link i {
  margin-right: 0.5rem;
}

.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* Main content area */
main {
  margin-top: 56px;
}

/* Cards */
.card {
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Help markdown content */
.help-markdown {
  line-height: 1.65;
}

.help-markdown h1,
.help-markdown h2,
.help-markdown h3,
.help-markdown h4 {
  margin-top: 1.25rem;
}

.help-markdown pre,
.help-markdown code {
  background: var(--omniva-surface-2);
}

.help-markdown pre {
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.help-markdown code {
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
}

/* Highlight for jump-to-message */
.message.highlight .bubble {
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.45);
  transition: box-shadow 0.3s ease;
}

/* LINE brand color */
.bi-line {
  color: #00B900 !important;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .sidebar {
    position: static;
    height: auto;
  }
  
  main {
    margin-top: 0;
  }
}

/* -----------------------------------------------------------------------------
 * Landing page (LINE-inspired, blue tone)
 * -------------------------------------------------------------------------- */
.landing-hero {
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #0b5ed7 0%, #0a58ca 40%, #0d6efd 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.text-white-75 {
  color: rgba(255, 255, 255, 0.78) !important;
}

.landing-badge {
  color: #0d6efd;
  background: rgba(255, 255, 255, 0.92) !important;
}

.landing-device {
  width: min(420px, 100%);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.landing-device-topbar {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  gap: 8px;
  align-items: center;
}

.landing-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
}

.landing-device-body {
  padding: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.landing-bubble {
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 12px;
  max-width: 85%;
}

.landing-bubble-title {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 4px;
}

.landing-bubble-text {
  font-weight: 600;
  line-height: 1.25;
}

.landing-bubble-user {
  background: rgba(255, 255, 255, 0.92);
  color: #0b2f6b;
}

.landing-bubble-agent {
  background: rgba(13, 110, 253, 0.9);
  color: #fff;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.landing-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  margin-top: 8px;
}

/* -----------------------------------------------------------------------------
 * Home page refresh
 * -------------------------------------------------------------------------- */
.home-page {
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.home-hero {
  position: relative;
  color: #fff;
  background: radial-gradient(900px 500px at 15% 15%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, #0b1f3b 0%, #0d2a52 55%, #143a74 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.35;
  pointer-events: none;
}

.home-title {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  letter-spacing: -0.02em;
}

.home-subtitle {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.1rem;
}

.home-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.home-meta {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
}

.home-panel {
  width: min(440px, 100%);
  margin-left: auto;
  border-radius: 26px;
  background: rgba(12, 24, 46, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.home-panel-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
}

.home-panel-body {
  padding: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.home-bubble {
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 12px;
  max-width: 85%;
  font-weight: 600;
}

.home-bubble-label {
  font-size: 0.72rem;
  opacity: 0.7;
  margin-bottom: 4px;
}

.home-bubble-user {
  background: rgba(255, 255, 255, 0.92);
  color: #0b1f3b;
}

.home-bubble-agent {
  background: rgba(45, 123, 255, 0.9);
  color: #fff;
  margin-left: auto;
}

.home-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.home-metrics {
  position: relative;
  z-index: 1;
}

.home-metric {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(10px);
}

.home-metric-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.home-metric-label {
  color: rgba(255, 255, 255, 0.7);
}

.home-section-title {
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
}

.home-card {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(14, 31, 56, 0.08);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
  height: 100%;
}

.home-card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef2ff;
  color: #2d7bff;
  font-size: 1.3rem;
}

.home-steps {
  display: grid;
  gap: 14px;
}

.home-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.05);
}

.home-step-num {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #0d2a52;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.home-step-body {
  flex: 1;
}

.home-callout {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.home-page.botnoi-style {
  background: #f7f8fc;
}

.home-page.botnoi-style .home-hero-alt {
  position: relative;
  color: #fff;
  background: radial-gradient(800px 500px at 10% 10%, rgba(255, 255, 255, 0.25), transparent 60%),
    linear-gradient(135deg, #0b1f3b 0%, #0b2f5b 50%, #155a8f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.home-page.botnoi-style .home-hero-alt::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
  pointer-events: none;
}

.home-page.botnoi-style .home-title {
  color: #fff;
}

.home-page.botnoi-style .home-title-accent {
  display: inline-block;
  margin-left: 8px;
  color: #7ef2c4;
}

.home-page.botnoi-style .home-subtitle {
  color: rgba(255, 255, 255, 0.78);
}

.home-page.botnoi-style .home-hero-card {
  border-radius: 22px;
  background: rgba(10, 20, 38, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.home-page.botnoi-style .home-hero-card-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}

.home-page.botnoi-style .home-hero-card-body {
  padding: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.home-page.botnoi-style .home-dot {
  background: rgba(255, 255, 255, 0.6);
}

.home-page.botnoi-style .home-bubble-user {
  background: rgba(255, 255, 255, 0.95);
  color: #0b1f3b;
}

.home-page.botnoi-style .home-bubble-agent {
  background: rgba(33, 150, 243, 0.92);
  color: #fff;
}

.home-page.botnoi-style .home-pill {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.home-page.botnoi-style .home-metric {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.home-page.botnoi-style .home-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
}

.home-page.botnoi-style .home-card-icon {
  background: #e8f3ff;
  color: #1b66c9;
}

.home-page.botnoi-style .home-case {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.home-page.botnoi-style .home-cta {
  background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
  border-radius: 20px;
  padding: 26px 28px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.1);
}

/* -----------------------------------------------------------------------------
 * Contacts tabs styling
 * -------------------------------------------------------------------------- */
.card-header .nav-tabs {
  border-bottom: none;
}

.card-header .nav-tabs .nav-link {
  border: none;
  color: var(--omniva-muted);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 12px 12px 0 0;
  background: transparent;
}

.card-header .nav-tabs .nav-link.active {
  color: var(--omniva-text);
  background: var(--omniva-surface-2);
  border: 1px solid var(--omniva-border);
  border-bottom-color: transparent;
}

.card-header .nav-tabs .nav-link:hover {
  color: var(--omniva-text);
  background: rgba(13, 110, 253, 0.08);
}

/* -----------------------------------------------------------------------------
 * Themed tabs/pills (Commands)
 * -------------------------------------------------------------------------- */
.omniva-theme-tabs {
  border-bottom: 1px solid var(--omniva-border);
}

.omniva-theme-tabs .nav-link {
  color: var(--omniva-muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
}

.omniva-theme-tabs .nav-link:hover {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.08);
  border-color: var(--omniva-border);
  border-bottom-color: transparent;
}

.omniva-theme-tabs .nav-link.active {
  color: var(--bs-primary);
  background: var(--omniva-surface);
  border-color: var(--omniva-border);
  border-bottom-color: var(--omniva-surface);
}

#stageTabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

#stageTabs .nav-item {
  flex: 0 0 auto;
}

.omniva-theme-pills .nav-link {
  color: var(--omniva-muted);
  border: 1px solid var(--omniva-border);
  background: var(--omniva-surface);
}

.omniva-theme-pills .nav-link:hover {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.08);
}

.omniva-theme-pills .nav-link.active {
  color: #fff;
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* -----------------------------------------------------------------------------
 * CRM Pipeline drag/drop
 * -------------------------------------------------------------------------- */
.pipeline-board {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  overflow: auto;
  padding-bottom: 0.5rem;
  max-height: calc(100vh - 240px);
  scroll-snap-type: x proximity;
}

.pipeline-stage-column {
  flex: 0 0 320px;
  min-width: 280px;
  scroll-snap-align: start;
}

.pipeline-stage-column .card {
  height: 100%;
}

.pipeline-stage-column .card-body {
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}

.lead-dropzone.bg-light {
  border: 1px dashed var(--omniva-border);
  min-height: 48px;
}

.lead-card {
  cursor: grab;
}

.lead-card-item {
  padding: 0;
  border: 1px solid var(--omniva-border);
  border-radius: 0.6rem;
  background: var(--omniva-surface);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.lead-card-body {
  padding: 0.65rem 0.8rem;
}

.lead-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.lead-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--omniva-border);
  background: var(--omniva-surface-2);
}

.lead-card-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--omniva-muted);
}

.lead-card-title {
  display: block;
  font-weight: 600;
  color: var(--omniva-text);
  text-decoration: none;
}

.lead-card-title:hover {
  color: var(--bs-primary);
}

.lead-card-meta {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--omniva-muted);
  word-break: break-all;
}

.context-menu {
  position: absolute;
  z-index: 1050;
  display: none;
  min-width: 180px;
  background: var(--omniva-surface);
  border: 1px solid var(--omniva-border);
  border-radius: 0.5rem;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  padding: 0.35rem;
}

.context-menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  color: var(--omniva-text);
}

.context-menu-item:hover {
  background: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
}

/* -----------------------------------------------------------------------------
 * CRM Lead Detail
 * -------------------------------------------------------------------------- */
.lead-detail-header {
  padding: 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.12), rgba(46, 125, 90, 0.08));
  border: 1px solid var(--omniva-border);
}

.lead-avatar {
  width: 56px;
  height: 56px;
}

.lead-kpi {
  border: 1px solid var(--omniva-border);
  border-radius: 0.85rem;
  background: var(--omniva-surface);
}

/* Lead detail layout now uses single column */

/* -----------------------------------------------------------------------------
 * Personalization (theme, density, font size)
 * -------------------------------------------------------------------------- */
:root {
  --omniva-bg: #f8f9fa;
  --omniva-surface: #ffffff;
  --omniva-surface-2: #f1f3f5;
  --omniva-text: #212529;
  --omniva-muted: #6c757d;
  --omniva-border: #dee2e6;
  --omniva-sidebar-bg: #f8f9fa;
  --omniva-sidebar-link: #333333;
  --omniva-sidebar-link-active-bg: rgba(13, 110, 253, 0.1);
}

html[data-bs-theme='dark'] {
  --omniva-bg: #0f1115;
  --omniva-surface: #151923;
  --omniva-surface-2: #1b2231;
  --omniva-text: #e6e9ef;
  --omniva-muted: #a5adbb;
  --omniva-border: #2b3245;
  --omniva-sidebar-bg: #11151d;
  --omniva-sidebar-link: #cbd3e1;
  --omniva-sidebar-link-active-bg: rgba(88, 128, 255, 0.2);
}

html[data-bs-theme='brand'] {
  --omniva-bg: #f0f6ff;
  --omniva-surface: #ffffff;
  --omniva-surface-2: #e8f1ff;
  --omniva-text: #0b2f6b;
  --omniva-muted: #5b6b89;
  --omniva-border: #d7e4ff;
  --omniva-sidebar-bg: #edf3ff;
  --omniva-sidebar-link: #0b2f6b;
  --omniva-sidebar-link-active-bg: rgba(13, 110, 253, 0.15);
}

html[data-bs-theme='slate'] {
  --omniva-bg: #12161e;
  --omniva-surface: #1a2130;
  --omniva-surface-2: #212a3d;
  --omniva-text: #e3e7ef;
  --omniva-muted: #9aa6bf;
  --omniva-border: #2c364a;
  --omniva-sidebar-bg: #161c27;
  --omniva-sidebar-link: #cfd7e6;
  --omniva-sidebar-link-active-bg: rgba(120, 141, 255, 0.2);
}

html[data-bs-theme='sand'] {
  --omniva-bg: #fbf6ee;
  --omniva-surface: #fffaf3;
  --omniva-surface-2: #f6efe3;
  --omniva-text: #4a3f2f;
  --omniva-muted: #7c6a52;
  --omniva-border: #e6d9c3;
  --omniva-sidebar-bg: #f6efe3;
  --omniva-sidebar-link: #4a3f2f;
  --omniva-sidebar-link-active-bg: rgba(193, 136, 72, 0.18);
}

html[data-bs-theme='forest'] {
  --omniva-bg: #f3f7f2;
  --omniva-surface: #ffffff;
  --omniva-surface-2: #e9f2ec;
  --omniva-text: #1f3b2d;
  --omniva-muted: #4f6b5a;
  --omniva-border: #d6e3da;
  --omniva-sidebar-bg: #edf4ef;
  --omniva-sidebar-link: #1f3b2d;
  --omniva-sidebar-link-active-bg: rgba(46, 125, 90, 0.16);
}

html[data-bs-theme='sunset'] {
  --omniva-bg: #fff2ef;
  --omniva-surface: #ffffff;
  --omniva-surface-2: #ffe9e4;
  --omniva-text: #5a2b2b;
  --omniva-muted: #8a5a5a;
  --omniva-border: #f0d2cf;
  --omniva-sidebar-bg: #ffe9e4;
  --omniva-sidebar-link: #5a2b2b;
  --omniva-sidebar-link-active-bg: rgba(233, 97, 88, 0.18);
}

html[data-bs-theme='dracula'] {
  --omniva-bg: #282a36;
  --omniva-surface: #303445;
  --omniva-surface-2: #3a3f54;
  --omniva-text: #f8f8f2;
  --omniva-muted: #b1b5c3;
  --omniva-border: #44475a;
  --omniva-sidebar-bg: #2b2d3a;
  --omniva-sidebar-link: #f8f8f2;
  --omniva-sidebar-link-active-bg: rgba(189, 147, 249, 0.25);
}

html[data-bs-theme='nord'] {
  --omniva-bg: #2e3440;
  --omniva-surface: #3b4252;
  --omniva-surface-2: #434c5e;
  --omniva-text: #eceff4;
  --omniva-muted: #c3c9d4;
  --omniva-border: #4c566a;
  --omniva-sidebar-bg: #343b4a;
  --omniva-sidebar-link: #eceff4;
  --omniva-sidebar-link-active-bg: rgba(136, 192, 208, 0.25);
}

html[data-bs-theme='tokyo'] {
  --omniva-bg: #1a1b26;
  --omniva-surface: #24283b;
  --omniva-surface-2: #2f3552;
  --omniva-text: #c0caf5;
  --omniva-muted: #9aa5ce;
  --omniva-border: #414868;
  --omniva-sidebar-bg: #1f2335;
  --omniva-sidebar-link: #c0caf5;
  --omniva-sidebar-link-active-bg: rgba(125, 207, 255, 0.2);
}

html[data-bs-theme='catppuccin'] {
  --omniva-bg: #eff1f5;
  --omniva-surface: #ffffff;
  --omniva-surface-2: #e6e9ef;
  --omniva-text: #4c4f69;
  --omniva-muted: #6c6f85;
  --omniva-border: #dce0e8;
  --omniva-sidebar-bg: #e6e9ef;
  --omniva-sidebar-link: #4c4f69;
  --omniva-sidebar-link-active-bg: rgba(136, 57, 239, 0.18);
}

html[data-bs-theme='gruvbox'] {
  --omniva-bg: #fbf1c7;
  --omniva-surface: #f9f5d7;
  --omniva-surface-2: #ebdbb2;
  --omniva-text: #3c3836;
  --omniva-muted: #665c54;
  --omniva-border: #d5c4a1;
  --omniva-sidebar-bg: #f2e5bc;
  --omniva-sidebar-link: #3c3836;
  --omniva-sidebar-link-active-bg: rgba(214, 93, 14, 0.2);
}

html[data-bs-theme='dark'],
html[data-bs-theme='slate'] {
  color-scheme: dark;
}

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

[data-bs-theme] body,
[data-bs-theme] .container-fluid {
  background-color: var(--omniva-bg);
}

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

.card {
  background-color: var(--omniva-surface);
  border-color: var(--omniva-border);
}

.table {
  color: var(--omniva-text);
}

.border, .border-top, .border-end, .border-start, .border-bottom {
  border-color: var(--omniva-border) !important;
}

.sidebar {
  background-color: var(--omniva-sidebar-bg);
}

.sidebar .nav-link {
  color: var(--omniva-sidebar-link);
}

.sidebar .nav-link.active {
  background-color: var(--omniva-sidebar-link-active-bg);
}

[data-bs-theme] .dropdown-menu {
  background-color: var(--omniva-surface);
  border-color: var(--omniva-border);
}

[data-bs-theme] .dropdown-item {
  color: var(--omniva-text);
}

[data-bs-theme] .dropdown-item:hover,
[data-bs-theme] .dropdown-item:focus {
  background-color: var(--omniva-sidebar-link-active-bg);
}

[data-bs-theme] .navbar {
  background-color: var(--omniva-surface);
  border-bottom: 1px solid var(--omniva-border);
}

[data-bs-theme] .navbar.bg-primary,
[data-bs-theme] .navbar.navbar-dark.bg-primary {
  background-color: var(--omniva-surface) !important;
}

[data-bs-theme] .navbar .navbar-brand,
[data-bs-theme] .navbar .nav-link,
[data-bs-theme] .navbar .navbar-text {
  color: var(--omniva-text) !important;
}

[data-bs-theme] .navbar .nav-link:hover,
[data-bs-theme] .navbar .nav-link:focus {
  color: var(--bs-primary) !important;
}

[data-bs-theme] .navbar-dark .navbar-toggler {
  border-color: var(--omniva-border);
}

[data-bs-theme] .navbar-dark .navbar-toggler-icon {
  filter: invert(0.7);
}

[data-bs-theme] .bg-white {
  background-color: var(--omniva-surface) !important;
}

[data-bs-theme] .bg-light {
  background-color: var(--omniva-sidebar-bg) !important;
}

[data-bs-theme] .text-body {
  color: var(--omniva-text) !important;
}

[data-bs-theme] .card-header {
  background-color: var(--omniva-surface-2);
  border-color: var(--omniva-border);
  color: var(--omniva-text);
}

[data-bs-theme] .card-body,
[data-bs-theme] .card-title,
[data-bs-theme] .card-text,
[data-bs-theme] .card-subtitle,
[data-bs-theme] .card-footer {
  color: var(--omniva-text);
}

[data-bs-theme] .table {
  --bs-table-color: var(--omniva-text);
  --bs-table-bg: var(--omniva-surface);
  --bs-table-border-color: var(--omniva-border);
}

[data-bs-theme] .table thead th {
  background-color: var(--omniva-surface-2);
  color: var(--omniva-text);
}

[data-bs-theme] .table-hover > tbody > tr:hover > * {
  background-color: var(--omniva-surface-2) !important;
  color: var(--omniva-text);
}

[data-bs-theme] .table-light {
  --bs-table-bg: var(--omniva-surface-2);
  --bs-table-color: var(--omniva-text);
}

[data-bs-theme] .list-group-item {
  background-color: var(--omniva-surface);
  color: var(--omniva-text);
  border-color: var(--omniva-border);
}

[data-bs-theme] .modal-content {
  background-color: var(--omniva-surface);
  color: var(--omniva-text);
  border-color: var(--omniva-border);
}

[data-bs-theme] .form-control,
[data-bs-theme] .form-select,
[data-bs-theme] .input-group-text {
  background-color: var(--omniva-surface);
  color: var(--omniva-text);
  border-color: var(--omniva-border);
}

[data-bs-theme] .form-control::placeholder {
  color: var(--omniva-muted);
}

[data-bs-theme] .badge.bg-light {
  background-color: var(--omniva-surface-2) !important;
  color: var(--omniva-text) !important;
  border: 1px solid var(--omniva-border);
}

[data-bs-theme='dark'] {
  --bs-body-bg: var(--omniva-bg);
  --bs-body-color: var(--omniva-text);
  --bs-secondary-color: var(--omniva-muted);
  --bs-border-color: var(--omniva-border);
  --bs-secondary-bg: var(--omniva-surface);
  --bs-tertiary-bg: var(--omniva-sidebar-bg);
}

[data-bs-theme='brand'],
[data-bs-theme='slate'],
[data-bs-theme='sand'],
[data-bs-theme='forest'],
[data-bs-theme='sunset'] {
  --bs-body-bg: var(--omniva-bg);
  --bs-body-color: var(--omniva-text);
  --bs-secondary-color: var(--omniva-muted);
  --bs-border-color: var(--omniva-border);
  --bs-secondary-bg: var(--omniva-surface);
  --bs-tertiary-bg: var(--omniva-sidebar-bg);
}

/* Shared Email Channel mailbox */
#emailWorkspace {
  height: calc(100vh - 185px);
  min-height: 580px;
  background-color: var(--omniva-surface);
  color: var(--omniva-text);
}

#emailWorkspace aside,
#emailWorkspace main {
  height: 100%;
  min-height: 0;
  background-color: var(--omniva-surface);
}

#emailWorkspace main {
  margin-top: 0;
  overflow: hidden;
}

#emailWorkspace .list-group-item:not(.active) {
  background-color: var(--omniva-surface);
  color: var(--omniva-text);
}

#emailWorkspace .list-group-item.active {
  background-color: var(--omniva-sidebar-link-active-bg);
  color: var(--omniva-text);
  border-color: var(--omniva-border);
}

#emailWorkspace .list-group-item.active .opacity-75,
#emailWorkspace .list-group-item.active small {
  color: var(--omniva-muted) !important;
}

#messageThread {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  background-color: var(--omniva-bg);
  color: var(--omniva-text);
  overscroll-behavior: contain;
}

.email-message {
  color: var(--omniva-text);
  border-color: var(--omniva-border) !important;
}

.email-message-inbound {
  background-color: var(--omniva-surface);
}

.email-message-outbound {
  background-color: var(--omniva-surface-2);
}

.email-message-body {
  overflow-wrap: anywhere;
}

.email-reply {
  flex: 0 0 auto;
  background-color: var(--omniva-surface);
}

@media (max-width: 991.98px) {
  #emailWorkspace {
    height: auto;
    min-height: 0;
  }

  #emailWorkspace aside,
  #emailWorkspace main {
    height: auto;
  }

  #conversationList {
    max-height: 360px;
  }

  #messageThread {
    max-height: 60vh;
  }
}

html[data-density='compact'] .sidebar .nav-link {
  padding: 0.5rem 0.75rem;
}

html[data-density='compact'] .card-body {
  padding: 0.75rem;
}

html[data-density='compact'] .table > :not(caption) > * > * {
  padding: 0.4rem 0.5rem;
}

html[data-font='sm'] {
  font-size: 14px;
}

html[data-font='lg'] {
  font-size: 16.5px;
}

.landing-card {
  border: 1px solid #e9ecef;
  box-shadow: 0 8px 24px rgba(13, 110, 253, 0.06);
}

.landing-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
  font-size: 1.25rem;
}

.landing-steps {
  display: grid;
  gap: 12px;
}

.landing-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.landing-step-num {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 110, 253, 0.12);
  color: #0d6efd;
  font-weight: 800;
}

.landing-step-body {
  padding-top: 3px;
}

.landing-callout {
  border: 1px solid #e9ecef;
  box-shadow: 0 12px 30px rgba(13, 110, 253, 0.08);
}

/* =============================================================================
 * LIFF UI (standalone service)
 * ============================================================================= */
body.liff-mode {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --divider: #eeeeee;
  --bubble: #f3f4f6;
  --accent: #0d6efd;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.liff-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.liff-search {
  padding: 0 1rem 0.75rem;
}

.liff-search .form-control {
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e6e9ef;
}

.liff-inbox .list-group-item {
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
}

.liff-inbox .list-group-item {
  padding: 0.85rem 1rem;
  border: 1px solid #e6e9ef;
}

.liff-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}

.liff-avatar img,
.liff-avatar .avatar-fallback {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
}

.liff-status-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #adb5bd;
  border: 2px solid #fff;
}

.liff-status-dot.is-open {
  background: #22c55e;
}

.liff-status-dot.is-pending {
  background: #f59e0b;
}

.liff-status-dot.is-resolved {
  background: #9ca3af;
}

.liff-status-dot.is-closed {
  background: #111827;
}

.liff-inbox-text {
  min-width: 0;
}

.liff-inbox-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}

.liff-inbox-meta {
  min-width: 56px;
}

.liff-contact-list .list-group-item {
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e6e9ef;
}

.liff-settings-card {
  border: 1px solid #e6e9ef;
  border-radius: 0.75rem;
  padding: 1rem;
  background: #fff;
}

.liff-settings-list .list-group-item {
  border: 1px solid #e6e9ef;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 480px) {
  .liff-inbox-preview {
    max-width: 42vw;
  }
}