/* ============================================================
   KIRA THEME OVERRIDE  —  re-skins the Admio template to the real
   Kira app design system (tokens taken from the Kira app source).
   Loaded AFTER admio.css so it wins. Layout untouched; only
   colour / surface / font tokens change.

   Brand:  indigo  #4F46E5   (primary, logo, links)
           azure   #0DA2FF   (secondary / CTA gradient end)
   CTA:    linear-gradient(#4F46E5 -> #0DA2FF)
   Active: pastel  #faf5ff -> #dcc0fa -> #9db9fb -> #6fcff4
   Font:   Manrope
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Zalando+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Native UI (scrollbars, form controls) follows the theme. */
  color-scheme: light;
  /* Brand */
  --tmv-primary: #4f46e5;
  --tmv-primary-dark: #4338ca;
  --tmv-primary-light: #6366f1;
  --tmv-primary-xlight: #eef2ff;
  --tmv-primary-xxlight: rgba(79, 70, 229, 0.08);
  --tmv-secondary: #0da2ff;
  --tmv-secondary-light: #d2eaff;
  --tmv-secondary-xlight: #eaf6ff;
  --tmv-info: #0088ff;
  --tmv-info-light: #e0f0ff;
  --tmv-blue: #2f7bf0;
  --tmv-cyan: #22d3ee;

  /* Light surfaces */
  --tmv-body-bg: #eaeef6;
  --tmv-card-bg: #ffffff;
  --tmv-border-color: #e5e5e5;
  --tmv-border-light: #f0f0f3;

  /* Text */
  --tmv-text-primary: #111827;
  --tmv-text-secondary: #696d7d;
  --tmv-text-muted: #737373;
  --tmv-white: #ffffff;

  /* Sidebar — WHITE in light mode (Kira) */
  --tmv-sidebar-bg: #ffffff;
  --tmv-sidebar-bg-2: #f7f8fb;
  --tmv-sidebar-hover: rgba(17, 24, 39, 0.04);
  --tmv-sidebar-active-bg: #eef2ff;
  --tmv-sidebar-active-border: transparent;
  --tmv-sidebar-text: #696d7d;
  --tmv-sidebar-text-active: #111827;
  --tmv-sidebar-text-muted: #9aa0b0;
  --tmv-sidebar-section-color: #9aa0b0;

  --tmv-font-sans: 'Manrope', 'Zalando Sans', system-ui, -apple-system, sans-serif;
  --tmv-shadow-ai: 0 6px 20px rgba(79, 70, 229, 0.2);
}

[data-theme='dark'] {
  /* Dark scrollbars/inputs instead of the default white track. */
  color-scheme: dark;
  /* Dark surfaces (Kira slate/navy) */
  --tmv-body-bg: #0e1629;
  --tmv-card-bg: #111827;
  --tmv-border-color: #272727;
  --tmv-border-light: #1e293b;
  --tmv-text-primary: #f5f5f5;
  --tmv-text-secondary: #94a3b8;
  --tmv-text-muted: #737373;
  --tmv-white: #111827;

  /* Sidebar — navy in dark mode (Kira) */
  --tmv-sidebar-bg: #0f172a;
  --tmv-sidebar-bg-2: #0b1220;
  --tmv-sidebar-hover: rgba(255, 255, 255, 0.06);
  --tmv-sidebar-active-bg: rgba(79, 70, 229, 0.18);
  --tmv-sidebar-text: #cbd5e1;
  --tmv-sidebar-text-active: #1f2430;
  --tmv-sidebar-text-muted: #64748b;
  --tmv-sidebar-section-color: #64748b;
}

/* Body / content carry the Kira ambient glow; cards sit on top, opaque. */
body {
  font-family: var(--tmv-font-sans);
}
body,
.admio-main,
.admio-content {
  background-color: var(--tmv-body-bg);
  background-image:
    radial-gradient(
      760px 620px at 100% -6%,
      rgba(214, 190, 250, 0.65) 0%,
      rgba(214, 190, 250, 0) 60%
    ),
    radial-gradient(
      560px 520px at -4% 108%,
      rgba(206, 196, 250, 0.55) 0%,
      rgba(206, 196, 250, 0) 60%
    ),
    radial-gradient(
      780px 520px at 22% 118%,
      rgba(168, 196, 244, 0.45) 0%,
      rgba(168, 196, 244, 0) 60%
    );
  background-attachment: fixed;
}
.admio-main {
  background-color: transparent;
}
[data-theme='dark'] body,
[data-theme='dark'] .admio-main,
[data-theme='dark'] .admio-content {
  background-color: var(--tmv-body-bg);
  background-image:
    radial-gradient(880px 720px at 100% -8%, rgba(78, 50, 130, 0.55) 0%, rgba(78, 50, 130, 0) 62%),
    radial-gradient(540px 540px at -5% 110%, rgba(99, 67, 165, 0.55) 0%, rgba(99, 67, 165, 0) 60%),
    radial-gradient(820px 560px at 24% 120%, rgba(46, 86, 138, 0.5) 0%, rgba(46, 86, 138, 0) 60%);
}

/* Hover — admio.css hard-codes color:#E5E7EB which vanishes on the white
   light-mode sidebar. Re-tie hover to the theme tokens (skip active items,
   which own the gradient pill below). */
.admio-sidebar .nav-link:not(.active):hover,
.admio-sidebar .nav-link:not(.active):focus {
  background: var(--tmv-sidebar-hover) !important;
  color: var(--tmv-sidebar-text-active) !important;
}
.admio-sidebar .nav-link:not(.active):hover .nav-icon,
.admio-sidebar .nav-link:not(.active):hover .nav-text,
.admio-sidebar .nav-link:not(.active):focus .nav-icon,
.admio-sidebar .nav-link:not(.active):focus .nav-text {
  color: var(--tmv-sidebar-text-active) !important;
}

/* Dark mode: --tmv-sidebar-text-active is near-black (#1f2430), which is
   invisible on the dark navy sidebar. Override hover/focus to use white text. */
[data-theme='dark'] .admio-sidebar .nav-link:not(.active):hover,
[data-theme='dark'] .admio-sidebar .nav-link:not(.active):focus {
  color: #f1f5f9 !important;
}
[data-theme='dark'] .admio-sidebar .nav-link:not(.active):hover .nav-icon,
[data-theme='dark'] .admio-sidebar .nav-link:not(.active):hover .nav-text,
[data-theme='dark'] .admio-sidebar .nav-link:not(.active):focus .nav-icon,
[data-theme='dark'] .admio-sidebar .nav-link:not(.active):focus .nav-text {
  color: #f1f5f9 !important;
}

/* Active nav pill — the signature Kira pastel gradient (both modes). */
.admio-sidebar .nav-link.active,
.admio-sidebar .nav-link.active:hover {
  background: linear-gradient(
    90deg,
    #faf5ff 0%,
    #faf5ff 36%,
    #dcc0fa 58%,
    #9db9fb 80%,
    #6fcff4 100%
  ) !important;
  color: #1f2430 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.2);
}
.admio-sidebar .nav-link.active .nav-icon,
.admio-sidebar .nav-link.active .nav-text {
  color: #1f2430 !important;
}
.admio-sidebar .nav-link.active::before,
.admio-sidebar .nav-link.active::after {
  display: none !important;
}
.admio-sidebar .nav-sublink.active {
  color: var(--tmv-primary) !important;
  background: var(--tmv-primary-xlight);
  border-radius: 8px;
}

/* CTA / AI buttons — Kira indigo->azure gradient. */
.btn-admio.btn-ai,
.btn-admio.btn-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #0da2ff 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28);
}
.btn-admio.btn-ai:hover,
.btn-admio.btn-primary:hover {
  filter: brightness(0.97);
}

/* Sidebar accents Admio hard-codes -> Kira indigo. */
.sidebar-ai-status {
  background: rgba(79, 70, 229, 0.1);
}
.ai-status-text {
  color: #6366f1;
}

/* AI insight banner — remove Admio's dark aubergine; use a clean Kira blue sweep. */
.ai-insight-banner {
  background: linear-gradient(120deg, #4f46e5 0%, #2f7bf0 52%, #0da2ff 100%) !important;
}
[data-theme='dark'] .ai-insight-banner {
  background: linear-gradient(120deg, #3f37c9 0%, #2456c9 52%, #0a86d8 100%) !important;
}

/* Kira logo: show the right mark per theme; strip Admio's coloured logo box. */
.kira-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.kira-logo-dark {
  display: none;
}
[data-theme='dark'] .kira-logo-light {
  display: none;
}
[data-theme='dark'] .kira-logo-dark {
  display: block;
}
.sidebar-brand .brand-icon,
.admio-topbar .brand-icon {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 0 !important;
  display: flex !important;
  align-items: center;
}
/* Keep the mark and the wordmark on the same vertical centre. */
.sidebar-brand .brand-link {
  align-items: center;
}
.brand-text {
  display: flex;
  align-items: center;
  overflow: visible;
}
[data-theme='dark'] .kira-logo-light,
[data-theme='dark'] .kira-logo-dark {
  vertical-align: middle;
}
/* "Kira AI" wordmark: AI in indigo. */
.brand-name > span {
  color: var(--tmv-primary);
}

/* Wordmark image as the brand text (themed, hidden when sidebar collapses). */
.kira-wordmark {
  height: 22px;
  width: auto;
  display: block;
}
.admio-sidebar.collapsed .kira-wordmark {
  display: none;
}

/* Profile avatar photo (topbar + dropdown). */
.kira-avatar {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.topbar-user-avatar.kira-avatar {
  width: 36px;
  height: 36px;
}
.udm-avatar.kira-avatar {
  width: 40px;
  height: 40px;
}

/* Topbar: keep everything on one level; hamburger is mobile-only now. */
.admio-topbar,
.topbar-left,
.topbar-center,
.topbar-right {
  display: flex;
  align-items: center;
}
.admio-topbar .sidebar-toggle-btn {
  display: none;
}
@media (max-width: 991.98px) {
  .admio-topbar .sidebar-toggle-btn {
    display: inline-flex;
  }
}

/* In-sidebar open/close control — sits at the right of the brand row, vertically
   centred with the logo. (#sidebarCollapseToggle is wired by admio.js, which flips
   the chevron direction.) */
.sidebar-brand-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-collapse-toggle {
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--tmv-card-bg);
  color: var(--tmv-text-secondary);
  border: 1px solid var(--tmv-border-color);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}
.sidebar-collapse-toggle:hover {
  color: var(--tmv-primary);
  border-color: var(--tmv-primary);
  background: var(--tmv-primary-xlight);
}
.sidebar-collapse-toggle i {
  font-size: 16px;
  line-height: 1;
}
@media (min-width: 992px) {
  .sidebar-collapse-toggle {
    display: inline-flex;
  }
}

/* Collapsed: stack the mark + toggle vertically in the narrow rail. */
.admio-sidebar.collapsed .sidebar-brand {
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  padding: 18px 0 16px;
}
.admio-sidebar.collapsed .brand-link {
  justify-content: center;
}