/*
 * Tema v2 (tki) - menus suspensos (.dropdown-menu), abas (.nav-tabs),
 * pilulas (.nav-pills), .list-group, .accordion, tooltip e popover.
 * Abas do tki: linha embaixo, texto cinza, ativa com texto forte e traco de
 * 2px na cor da marca. Dropdown: superficie, borda, sombra, itens 14px.
 */

/* ---------- Dropdown ---------- */

html.tki-layout .dropdown-menu {
  --bs-dropdown-bg: var(--tki-card);
  --bs-dropdown-color: var(--tki-fg);
  --bs-dropdown-border-color: var(--tki-border);
  --bs-dropdown-border-radius: var(--tki-radius-control);
  --bs-dropdown-box-shadow: var(--tki-shadow-pop);
  --bs-dropdown-link-color: var(--tki-fg-2);
  --bs-dropdown-link-hover-color: var(--tki-fg);
  --bs-dropdown-link-hover-bg: var(--tki-hover);
  --bs-dropdown-link-active-color: var(--tki-fg);
  --bs-dropdown-link-active-bg: var(--tki-hover);
  --bs-dropdown-link-disabled-color: var(--tki-subtle);
  --bs-dropdown-header-color: var(--tki-muted);
  --bs-dropdown-divider-bg: var(--tki-border);
  --bs-dropdown-item-border-radius: 8px;
  background-color: var(--tki-card) !important;
  color: var(--tki-fg) !important;
  border: 1px solid var(--tki-border) !important;
  border-radius: var(--tki-radius-control) !important;
  box-shadow: var(--tki-shadow-pop) !important;
  padding: 4px;
  font-size: 14px;
}

html.tki-layout .dropdown-menu .dropdown-item {
  color: var(--tki-fg-2) !important;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

html.tki-layout .dropdown-menu .dropdown-item:hover,
html.tki-layout .dropdown-menu .dropdown-item:focus {
  background: var(--tki-hover) !important;
  color: var(--tki-fg) !important;
}

html.tki-layout .dropdown-menu .dropdown-item.active,
html.tki-layout .dropdown-menu .dropdown-item:active {
  background: var(--tki-hover) !important;
  color: var(--tki-fg) !important;
  font-weight: 600;
}

html.tki-layout .dropdown-menu .dropdown-item:is(.text-danger, .danger) { color: var(--tki-danger-text) !important; }
html.tki-layout .dropdown-menu .dropdown-item i:not([class*='text-']),
html.tki-layout .dropdown-menu .dropdown-item svg:not([class*='text-']) { color: var(--tki-muted); }
html.tki-layout .dropdown-menu .dropdown-header { color: var(--tki-muted) !important; font-size: 12px; font-weight: 600; padding: 6px 10px; }
html.tki-layout .dropdown-menu .dropdown-divider { border-top-color: var(--tki-border) !important; margin: 4px -4px; opacity: 1; }
html.tki-layout .dropdown-menu .dropdown-item-text { color: var(--tki-muted); }

/* ---------- Abas (nav-tabs) ---------- */

html.tki-layout .nav-tabs {
  --bs-nav-tabs-border-color: var(--tki-border);
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: var(--tki-fg);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  border-bottom: 1px solid var(--tki-border) !important;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

html.tki-layout .nav-tabs::-webkit-scrollbar { display: none; }

html.tki-layout .nav-tabs .nav-link {
  color: var(--tki-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px;
  padding: 8px 12px 10px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

html.tki-layout .nav-tabs .nav-link:hover { color: var(--tki-fg) !important; }

html.tki-layout .nav-tabs .nav-link.active,
html.tki-layout .nav-tabs .nav-item.show .nav-link {
  color: var(--tki-fg) !important;
  border-bottom-color: var(--tki-primary) !important;
  background: transparent !important;
}

html.tki-layout .nav-tabs .nav-link i,
html.tki-layout .nav-tabs .nav-link.active i { color: inherit !important; }

/* ---------- Pilulas (nav-pills): segmentado cinza do tki ---------- */

html.tki-layout .nav-pills {
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: var(--tki-primary);
  --bs-nav-pills-border-radius: 10px;
  gap: 4px;
}

html.tki-layout .nav-pills .nav-link {
  color: var(--tki-muted) !important;
  background: transparent !important;
  border-radius: 10px !important;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
}

html.tki-layout .nav-pills .nav-link:hover { color: var(--tki-fg) !important; background: var(--tki-hover) !important; }

html.tki-layout .nav-pills .nav-link.active,
html.tki-layout .nav-pills .show > .nav-link {
  color: #fff !important;
  background: var(--tki-primary) !important;
  box-shadow: 0 6px 16px -8px rgba(var(--bs-primary-rgb, 37, 99, 235), 0.6);
}

html.tki-layout .nav-pills .nav-link.active i { color: inherit !important; }

/* Link generico de .nav fora do menu lateral/topo */
html.tki-layout .page-content .nav:not(.nav-tabs):not(.nav-pills) .nav-link { color: var(--tki-muted); }
html.tki-layout .page-content .nav:not(.nav-tabs):not(.nav-pills) .nav-link.active { color: var(--tki-fg); }

/* ---------- List group ---------- */

html.tki-layout .list-group {
  --bs-list-group-color: var(--tki-fg-2);
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--tki-border);
  --bs-list-group-border-radius: var(--tki-radius-control);
  --bs-list-group-action-color: var(--tki-fg-2);
  --bs-list-group-action-hover-color: var(--tki-fg);
  --bs-list-group-action-hover-bg: var(--tki-hover);
  --bs-list-group-action-active-color: var(--tki-fg);
  --bs-list-group-action-active-bg: var(--tki-hover);
  --bs-list-group-disabled-color: var(--tki-subtle);
  --bs-list-group-active-color: var(--tki-fg);
  --bs-list-group-active-bg: var(--tki-soft-primary-bg);
  --bs-list-group-active-border-color: var(--tki-soft-primary-bd);
}

html.tki-layout .list-group-item {
  color: var(--tki-fg-2);
  background-color: transparent;
  border-color: var(--tki-border);
}

html.tki-layout .list-group-item.active {
  color: var(--tki-fg) !important;
  background-color: var(--tki-soft-primary-bg) !important;
  border-color: var(--tki-soft-primary-bd) !important;
}

html.tki-layout .list-group-item-action:hover { background-color: var(--tki-hover); color: var(--tki-fg); }

/* ---------- Accordion ---------- */

html.tki-layout .accordion {
  --bs-accordion-color: var(--tki-fg);
  --bs-accordion-bg: var(--tki-card);
  --bs-accordion-border-color: var(--tki-border);
  --bs-accordion-border-radius: var(--tki-radius-control);
  --bs-accordion-inner-border-radius: calc(var(--tki-radius-control) - 1px);
  --bs-accordion-btn-color: var(--tki-fg);
  --bs-accordion-btn-bg: var(--tki-card);
  --bs-accordion-active-color: var(--tki-fg);
  --bs-accordion-active-bg: var(--tki-surface-2);
  --bs-accordion-btn-focus-box-shadow: var(--tki-ring);
  --bs-accordion-btn-focus-border-color: var(--tki-primary);
  --bs-accordion-btn-icon-width: 16px;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

html.tki-layout .accordion-button {
  font-size: 15px;
  font-weight: 600;
  color: var(--tki-fg) !important;
  background-color: var(--tki-card);
  box-shadow: none !important;
}

html.tki-layout .accordion-button:not(.collapsed) { background-color: var(--tki-surface-2); }
html.tki-layout .accordion-item { background-color: var(--tki-card); border-color: var(--tki-border); color: var(--tki-fg); }
html.tki-layout .accordion-body { color: var(--tki-fg-2); }

/* ---------- Tooltip e popover ---------- */

html.tki-layout .tooltip {
  --bs-tooltip-bg: #18181b;
  --bs-tooltip-color: #fff;
  --bs-tooltip-border-radius: 8px;
  --bs-tooltip-font-size: 12px;
  --bs-tooltip-padding-x: 10px;
  --bs-tooltip-padding-y: 6px;
  --bs-tooltip-opacity: 1;
  font-family: 'DM Sans', sans-serif;
}

html.tki-layout[data-bs-theme='dark'] .tooltip {
  --bs-tooltip-bg: #f4f4f5;
  --bs-tooltip-color: #18181b;
}

html.tki-layout .popover {
  --bs-popover-bg: var(--tki-card);
  --bs-popover-border-color: var(--tki-border);
  --bs-popover-border-radius: var(--tki-radius-control);
  --bs-popover-box-shadow: var(--tki-shadow-pop);
  --bs-popover-header-bg: var(--tki-card);
  --bs-popover-header-color: var(--tki-fg);
  --bs-popover-body-color: var(--tki-fg-2);
  --bs-popover-arrow-border: var(--tki-border);
  font-family: 'DM Sans', sans-serif;
  box-shadow: var(--tki-shadow-pop);
}

html.tki-layout .popover-header { border-bottom-color: var(--tki-border); font-weight: 600; }