/* Accent from Stripe docs (Sail purple500). Surfaces stay as they are. */
:root {
  --primary: #625afa;
  --primary-foreground: #fff;
  --ring: #625afa;
}
.dark {
  --primary: #8d7ffa;
  --ring: #8d7ffa;
}

.page-bg { background-image: url('../media/images/2600x1200/bg-10.png'); }
.dark .page-bg { background-image: url('../media/images/2600x1200/bg-10-dark.png'); }
.brand { font-weight: 600; font-size: .9375rem; letter-spacing: -0.01em; line-height: 1; }
.chat-log { height: 340px; overflow-y: auto; }
.chat-dock { position: fixed; top: var(--header-height, 70px); inset-inline-end: 0; bottom: 32px; z-index: 20; display: flex; flex-direction: column; width: 22.5rem; background: var(--background, var(--color-background)); border-inline-start: 1px solid var(--color-border); }
.chat-dock[hidden], .chat-toggle[hidden] { display: none !important; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem; }
.chat-compose { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--color-border); flex-shrink: 0; }
.chat-proposal { align-self: flex-start; width: 100%; border: 1px solid var(--color-border); border-radius: .5rem; padding: .625rem .75rem; background: var(--color-background); }
.chat-toggle { position: fixed; bottom: calc(32px + 1rem); inset-inline-end: 1rem; z-index: 20; }
@media (min-width: 1100px) {
  body.chat-open .kt-header { inset-inline-end: 22.5rem; }
  body.chat-open .kt-wrapper { padding-inline-end: 22.5rem; }
  body.chat-open .app-bottom { inset-inline-end: 22.5rem; }
}
@media (max-width: 1099px) { .chat-dock { width: min(22.5rem, 100%); } }
.channel-stats-bg { background-image: url('../media/images/2600x1600/bg-3.png'); }
.dark .channel-stats-bg { background-image: url('../media/images/2600x1600/bg-3-dark.png'); }
.avatar-initial { display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 600; background: var(--color-accent); color: var(--color-foreground); }

/* Header search and the icon row, scaled like the example. */
#headerContainer {
  gap: 16px;
}
.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 220px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background: #f3f7fa;
  color: #687385;
}
.header-search i { font-size: 14px; line-height: 1; }
.header-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--foreground);
}
.header-search input::placeholder { color: #687385; }
#breadcrumb { flex: 1; }
.crumb-home { display: inline-flex; align-items: center; flex: none; }
.crumb-home i { font-size: 14px; line-height: 1; }
.header-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.header-menu { display: flex; }
.header-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: none;
  padding: 0;
  color: #687385;
  cursor: pointer;
}
.header-icon i { font-size: 16px; line-height: 1; }
.header-icon:hover,
.header-menu.open > .header-icon,
.header-icon.active { background: rgba(15, 23, 42, 0.05); color: var(--foreground); }
.header-avatar {
  width: 22px;
  height: 22px;
  margin-inline-start: 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #625afa;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.header-avatar.lg { width: 32px; height: 32px; margin: 0; font-size: 13px; }
.dark .header-search { background: color-mix(in srgb, #fff 7%, #111114); }
.dark .header-icon,
.dark .header-search { color: #a3acba; }
.dark .header-search input::placeholder { color: #a3acba; }
.dark .header-icon:hover,
.dark .header-menu.open > .header-icon,
.dark .header-icon.active { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--foreground); }
@media (max-width: 1023px) {
  .header-search { width: 140px; }
}
.bubble { white-space: pre-wrap; max-width: 85%; padding: 0.625rem 0.875rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.4; }
.bubble.bot { background: var(--color-accent, #f1f1f4); color: var(--color-foreground); align-self: flex-start; }
.bubble.user { background: var(--color-primary); color: var(--color-primary-foreground, #fff); align-self: flex-end; }
.progress-track { height: 6px; border-radius: 9999px; background: var(--color-accent, #e5e7eb); overflow: hidden; }
.progress-bar { width: 0; height: 100%; background: var(--color-primary); transition: width .3s; }
.toast-err { color: var(--color-destructive, #d33); }
.list-decimal { list-style-type: decimal; }
.link { color: var(--color-primary); }
.link:hover { text-decoration: underline; }
.field-error { color: var(--color-destructive, #d33); }
.tabs-strip { display: flex; gap: .25rem; border-bottom: 1px solid var(--color-border); }
.tab-link { padding: 0 .5rem .5rem; font-size: .8125rem; color: var(--color-secondary-foreground); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab-link:hover { color: var(--color-primary); }
.tab-link.active { color: var(--color-primary); font-weight: 500; border-bottom-color: var(--color-primary); }
.phase-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600; background: var(--color-accent); color: var(--color-muted-foreground); }
.phase-dot.done { background: var(--color-primary); color: #fff; }
.phase-dot.current { border: 2px solid var(--color-primary); color: var(--color-primary); background: transparent; }
.phase-line { width: 1.5rem; height: 1px; background: var(--color-border); }
.w-fit { width: fit-content; }
/* utilities the purged Metronic build does not include */
.gap-x-2 { column-gap: .5rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-2 { row-gap: .5rem; }
.list-disc { list-style-type: disc; }
.opacity-60 { opacity: .6; }
.tracking-wide { letter-spacing: .025em; }
.w-64 { width: 16rem; }
.text-warning { color: var(--color-yellow-500, #f6b100); }
@media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
button.quick-card { width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; }
a.report-hit { color: inherit; text-decoration: none; border-radius: 0.375rem; }
a.report-bar.report-hit { margin-inline: -0.4rem; padding-inline: 0.4rem; }
a.report-legend-row.report-hit { margin-inline: -0.35rem; padding-inline: 0.35rem; }
a.report-hit:hover { background: color-mix(in srgb, var(--foreground, #111) 6%, transparent); }
a.report-hit:hover .report-bar-label,
a.report-hit:hover .report-legend-label { color: var(--primary, #625afa); }
a.report-hit:focus-visible { outline: 2px solid var(--primary, #625afa); outline-offset: 2px; }
.poc-filter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.poc-filter-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.45rem 0.15rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #625afa) 12%, transparent);
  color: var(--primary, #625afa); font-size: 12px; line-height: 1.3; text-decoration: none;
}
.poc-filter-chip span { font-size: 14px; line-height: 1; }
.report-card-header { padding-block: 1.125rem; }
html.compact .report-card-header { min-height: auto; padding-block: 0.85rem; }
.report-kpi { font-size: 1.75rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.report-bars { display: flex; flex-direction: column; gap: 0.7rem; }
.report-bar { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; }
.report-bar-label { font-size: 0.8125rem; color: var(--secondary-foreground, #687385); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-bar-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--foreground, #111) 8%, transparent); overflow: hidden; }
.report-bar-fill { height: 100%; border-radius: 999px; }
.report-bar-value { font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.report-donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.report-donut-box { position: relative; width: 148px; height: 148px; flex: none; }
.report-donut { width: 148px; height: 148px; display: block; }
.report-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.report-donut-num { font-size: 1.5rem; font-weight: 500; line-height: 1; }
.report-donut-cap { margin-top: 0.2rem; font-size: 0.6875rem; color: var(--secondary-foreground, #687385); }
.report-legend { display: flex; flex-direction: column; gap: 0.4rem; min-width: 10rem; }
.report-legend-row { display: grid; grid-template-columns: 0.5rem 1fr auto; gap: 0.5rem; align-items: center; font-size: 0.8125rem; }
.report-swatch { width: 0.5rem; height: 0.5rem; border-radius: 999px; }
.report-legend-label { color: var(--secondary-foreground, #687385); }
.report-legend-value { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .report-bar { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
}
button.poc-template {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem;
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.poc-template-mark {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.poc-template-copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.poc-template-title { font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: var(--color-mono, inherit); }
.poc-template-sub { font-size: 0.75rem; line-height: 1.3; color: var(--color-secondary-foreground); }
.poc-template:hover,
.poc-template.is-selected { border-color: var(--color-primary); }
.poc-template.is-selected { box-shadow: inset 0 0 0 1px var(--color-primary); }
.quick-card:hover { border-color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.kt-dropdown-menu-link.text-destructive,
.kt-dropdown-menu-link.text-destructive i { color: var(--color-destructive, #d33); }
/* Same tile treatment as the Metronic channel cards: the grid sits in the top corner, behind the icon. */
.quick-card.channel-stats-bg {
  min-height: 7.25rem;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 11rem auto;
  background-position: right -0.35rem top -1.35rem;
}
.event-row:last-child { border-bottom: 0; }
.target-row { display: grid; gap: .5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 768px) { .target-row { grid-template-columns: 11rem minmax(0, 1fr) auto auto; } }
.stk-row { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .stk-row { grid-template-columns: 1fr 1fr 1fr auto; } }

@media (min-width: 80rem) { .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quick-body { display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; }
.quick-icon { flex: none; width: 1.75rem; height: 1.75rem; border-radius: .375rem; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.link-dashed { text-decoration: underline dashed; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--color-primary) 55%, transparent); }
.stepper-bar { padding: .5rem 1.25rem; }
/* uniform form sections: one heading style, hairline dividers, same rhythm everywhere */
.form-section { display: flex; flex-direction: column; gap: .625rem; }
.form-section-body { display: flex; flex-direction: column; gap: inherit; }
.form-section-body.is-collapsed { display: none; }
.form-section-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  cursor: pointer; text-align: start;
}
.form-section-toggle:hover .text-mono { color: var(--color-primary); }
.section-chevron { font-size: .75rem; color: var(--muted-foreground, #99a1b7); transition: transform .15s ease; }
.form-section-toggle[aria-expanded="false"] .section-chevron { transform: rotate(-90deg); }
.kt-form-label:has(.field-tip) { display: inline-flex; align-items: center; gap: .25rem; }
.field-tip { position: relative; display: inline-flex; color: var(--muted-foreground, #99a1b7); cursor: help; }
.field-tip .ki-information-2 { font-size: .8rem; }
.field-tip-bubble {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  width: max-content; max-width: 16rem; padding: .35rem .5rem; border-radius: .375rem;
  background: #1e2129; color: #fff; font-size: .75rem; font-weight: 400; line-height: 1.35;
  white-space: normal; z-index: 30; pointer-events: none;
}
.field-tip:hover .field-tip-bubble, .field-tip:focus .field-tip-bubble { display: block; }

.activity-list { display: flex; flex-direction: column; }
.activity-item { position: relative; display: flex; align-items: flex-start; }
.activity-line { position: absolute; top: 36px; bottom: 0; left: 0; width: 36px; display: flex; justify-content: center; }
.activity-line::before { content: ''; border-left: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); }
.activity-mark {
  position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary);
}
.activity-mark.is-stage { background: var(--primary); border-color: var(--primary); color: #fff; }
.activity-mark.is-add { background: color-mix(in srgb, #17c653 16%, transparent); border-color: color-mix(in srgb, #17c653 42%, transparent); color: #0b9b45; }
.activity-mark.is-chat { background: color-mix(in srgb, #1b84ff 14%, transparent); border-color: color-mix(in srgb, #1b84ff 40%, transparent); color: #1b84ff; }
.activity-mark.is-edit { background: color-mix(in srgb, #f6b100 20%, transparent); border-color: color-mix(in srgb, #d99a00 48%, transparent); color: #b78103; }
.activity-mark.is-remove { background: color-mix(in srgb, var(--destructive, #f8285a) 12%, transparent); border-color: color-mix(in srgb, var(--destructive, #f8285a) 40%, transparent); color: var(--destructive, #f8285a); }
.dark .activity-mark.is-add { color: #3ddc78; }
.dark .activity-mark.is-edit { color: #f6c945; }
.activity-mark i { font-size: 1rem; }
.activity-body { padding-inline-start: 10px; padding-bottom: 28px; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.activity-item:last-child .activity-body { padding-bottom: 0; }
.activity-changes { margin: 4px 0 0; padding-inline-start: 1rem; font-size: .75rem; color: var(--secondary-foreground); }
.form-section + .form-section { border-top: 1px solid var(--color-border); padding-top: .75rem; }
.form-grid { display: grid; gap: .625rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 64rem) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-grid > .span-all { grid-column: 1 / -1; }
.date-field { position: relative; }
.date-field > .kt-input { padding-inline-end: 1.75rem; }
.date-field-icon {
  position: absolute;
  inset-inline-end: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-muted-foreground);
  font-size: 0.875rem;
  line-height: 1;
}
.date-picker {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 2rem;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
@media (min-width: 80rem) { .form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.msg-slot:empty { display: none; }
.prompt-hint-icon { flex: none; font-size: 14px; line-height: 1; color: var(--primary); }

.poc-list-head { align-items: center; gap: 12px; min-height: 68px; padding-block: 14px; }
html.compact .poc-list-head { min-height: 68px; padding-block: 14px; }
.poc-list-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.poc-list-heading { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--primary); }
.poc-list-count { font-size: 13px; line-height: 1.3; color: var(--secondary-foreground, #78829d); }
.poc-list-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end; }
.poc-list-tools .kt-input { width: 180px; }

/* ---- Compact view (default; the avatar-menu switch turns it off) ----
   Explicit sizes for chrome, controls, tables and rhythm. Root font size and --spacing are left alone so
   text stays crisp and every component keeps its proportions. */
html.compact .demo1 { --sidebar-width: 220px; --sidebar-default-width: 220px; --header-height: 54px; }
@media (max-width: 64rem) { html.compact .demo1 { --sidebar-width: 220px; --header-height: 54px; } }
/* Compact sets --sidebar-width after the layout stylesheet, which otherwise keeps the rail from narrowing. */
@media (min-width: 64rem) {
  html.compact .demo1.kt-sidebar-collapse { --sidebar-width: var(--sidebar-width-collapse); }
}
html.compact .kt-container-fixed { padding-inline: 1.5rem; }
html.compact #view { gap: 1rem; padding-block: 1rem; }
html.compact h1.text-xl { font-size: 1.125rem; }
html.compact .kt-menu-link { padding-block: 4px; }
/* cards */
html.compact .kt-card-header { min-height: 2.75rem; padding-inline: 1rem; }
html.compact .kt-card-title { font-size: .9375rem; }
html.compact .kt-card-content { padding: 1rem; }
html.compact .kt-card-content:has(> .kt-table-wrapper) { padding: 0; }
/* controls */
html.compact .kt-input, html.compact .kt-select, html.compact .kt-textarea { font-size: .8125rem; }
html.compact .kt-input, html.compact .kt-select { height: 1.875rem; padding-inline: .625rem; }
html.compact .kt-textarea { padding: .375rem .625rem; }
html.compact .kt-btn:not(.kt-btn-icon):not(.kt-btn-sm) { height: 1.875rem; padding-inline: .75rem; font-size: .8125rem; }
html.compact .kt-btn-sm { height: 1.625rem; font-size: .75rem; }
html.compact .kt-form-label { font-size: .8125rem; }
/* tables */
html.compact .kt-table { font-size: .8125rem; }
html.compact .kt-table thead th { height: 2rem; padding-block: 0; }
html.compact .kt-table td { padding: .4375rem .75rem; }
html.compact .kt-table th { padding-inline: .75rem; }
/* forms */
html.compact .form-section { gap: .75rem; }
html.compact .form-section + .form-section { padding-top: 1rem; }
html.compact .form-grid { gap: .75rem 1rem; }
html.compact .form-section > .text-base { font-size: .9375rem; }
html.compact .kt-card-content form { gap: 1rem; }
/* page furniture */
html.compact .tab-link { padding-bottom: .625rem; font-size: .8125rem; }
html.compact .kt-alert { padding-block: .5rem; font-size: .8125rem; }
html.compact .prompt-box .prompt-input { min-height: 2.25rem; }
html.compact .quick-body { padding: .5rem .625rem; }
html.compact .phase-dot { width: 1.375rem; height: 1.375rem; }

/* ---- Compact, round 2: smaller spacing unit and a tighter vertical rhythm ----
   --spacing drives Metronic's own paddings, gaps and control sizes. Root font stays 16px so text is unchanged. */
html.compact { --spacing: 0.22rem; }
html.compact .form-section { gap: .5rem; }
html.compact .form-section + .form-section { padding-top: .75rem; }
html.compact .form-grid { gap: .5rem .875rem; }
html.compact .kt-card-content form { gap: .75rem; }
html.compact .kt-form-label { margin-bottom: 0; line-height: 1.25; }
html.compact .stepper-bar { padding: .375rem 1rem; }
html.compact #view { gap: .875rem; padding-block: .875rem; }
html.compact .tab-link { padding-bottom: .5rem; }
html.compact .kt-alert { padding-block: .375rem; }
html.compact .form-section > .text-base { font-size: .875rem; line-height: 1.2; }
html.compact .kt-card-header { min-height: 2.5rem; }
html.compact .kt-card-content { padding: .75rem 1rem; }
html.compact .kt-textarea { min-height: 0; }
html.compact .event-row { padding-bottom: .5rem; }
html.compact .kt-label, html.compact .kt-checkbox-label { line-height: 1.3; }
html.compact .kt-label { align-items: flex-start; gap: .5rem; }

/* Left nav scaled like the reference: a 220px rail, 14px icons, 13px labels. */
.demo1 { --sidebar-width: 220px; --sidebar-default-width: 220px; }
.demo1 .kt-sidebar { background: #f4f4f5; border-inline-end-color: #e6e8eb; overflow: visible; }
.dark .demo1 .kt-sidebar { background: var(--background); }
.demo1 .kt-header { border-bottom: 1px solid #e6e8eb; }
.dark .demo1 .kt-header { border-bottom-color: #2a2a2e; }
.demo1 .kt-sidebar .kt-sidebar-header { height: 54px; padding: 10px 16px 0; gap: 8px; }
.nav-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav-brand .default-logo { display: block; height: 22px; width: auto; }
.nav-brand .small-logo { display: none; height: 22px; width: auto; }
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .nav-brand .default-logo { display: none; }
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .nav-brand .small-logo { display: block; }
.nav-collapse {
  position: absolute;
  z-index: 5;
  top: 18px;
  inset-inline-end: 0;
  transform: translateX(50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  background: #fff;
  color: #687385;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}
.nav-collapse-icon { width: 14px; height: 14px; display: block; }
.nav-collapse:hover { background: #f6f8fa; color: var(--foreground); }
.dark .nav-collapse { background: #1c1c21; border-color: #2a2a2e; color: #a3acba; }
#sidebar_content { padding: 4px 8px 12px; }
#sidebar_menu { gap: 1px; }
#sidebar .kt-menu-heading { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--muted-foreground); padding: 14px 8px 4px; }
#sidebar .kt-menu-link,
#sidebar .kt-menu-label { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 8px; border: 0; border-radius: 6px; }
#sidebar .kt-menu-icon { width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); }
#sidebar .kt-menu-icon i { font-size: 14px; line-height: 1; transform-origin: center; }
#sidebar .kt-menu-link:hover .kt-menu-icon i,
#sidebar .kt-menu-label:hover .kt-menu-icon i { animation: nav-icon-rock .8s ease-in-out; }
@keyframes nav-icon-rock {
  0% { transform: rotate(0deg); }
  16.7% { transform: rotate(11deg); }
  33.3% { transform: rotate(0deg); }
  50% { transform: rotate(-11deg); }
  66.7% { transform: rotate(0deg); }
  83.3% { transform: rotate(11deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar .kt-menu-link:hover .kt-menu-icon i,
  #sidebar .kt-menu-label:hover .kt-menu-icon i { animation: none; }
}
#sidebar .kt-menu-title { font-size: 13px; font-weight: 400; line-height: 16px; color: var(--foreground); }
#sidebar .kt-menu-link:hover { background: #fff; }
.dark #sidebar .kt-menu-link:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
#sidebar .kt-menu-item.active > .kt-menu-link { background: transparent; }
#sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-icon,
#sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-title { color: var(--primary); font-weight: 500; }
.nav-soon { margin-inline-start: auto; font-size: 11px; line-height: 16px; color: var(--muted-foreground); }
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .nav-soon { display: none; }
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-heading { display: none; }
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-sidebar-header { justify-content: center; padding-inline: 0; }
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) #sidebar_content { padding-inline: 0; }
.demo1.kt-sidebar-collapse #sidebar:not(:hover) .kt-menu-link,
.demo1.kt-sidebar-collapse #sidebar:not(:hover) .kt-menu-label { justify-content: center; padding-inline: 0; }

/* Thin bar along the bottom of the viewport, same scale as the left nav. */
.app-bottom {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 32px;
  background: #f3f7fa;
  border-top: 1px solid #e6e8eb;
}
.app-bottom-start {
  width: var(--sidebar-width);
  flex: none;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding-inline-start: 16px;
}
.app-bottom-link {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 24px;
  margin: 0;
  padding: 0 8px 0 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--foreground);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  cursor: pointer;
}
.app-bottom-link i { width: 16px; flex: none; font-size: 14px; line-height: 1; text-align: center; color: #687385; }
.app-bottom-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bottom-link:hover,
.app-bottom-start.open > .app-bottom-link { background: #f4f2ff; }
.dev-menu { width: 200px; padding: 6px 0; border-radius: 8px; }
.dev-label { padding: 6px 12px 2px; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--foreground); }
.dev-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 4px 12px;
  border: 0;
  background: none;
  text-align: start;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--foreground);
  cursor: pointer;
}
.dev-item:hover,
.kt-menu-item.open > .dev-item { background: #f6f8fa; }
.dev-item i { flex: none; font-size: 12px; line-height: 1; color: #687385; }
.dev-rule { height: 1px; margin: 6px 0; background: #e6e8eb; }
.dark .dev-item:hover,
.dark .kt-menu-item.open > .dev-item { background: color-mix(in srgb, #fff 8%, transparent); }
.dark .dev-rule { background: #2a2a2e; }
.dark .dev-item i { color: #a3acba; }
.app-bottom-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; padding-inline-end: 8px; }
.app-bottom-menu { display: flex; }
.app-bottom-menu.open > .app-bottom-icon,
.app-bottom-icon.active { background: rgba(15, 23, 42, 0.06); color: var(--foreground); }
.app-bottom-pop { width: 220px; padding: 6px; }
.app-bottom-pop-head { padding: 4px 8px 6px; font-size: 11px; font-weight: 500; line-height: 16px; color: var(--muted-foreground); }
.app-bottom-note { padding: 4px 8px 8px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.app-bottom-pop .kt-dropdown-menu-link { gap: 8px; min-height: 28px; padding: 4px 8px; border: 0; background: none; font-size: 14px; font-weight: 400; line-height: 20px; }
.app-bottom .app-bottom-pop .kt-dropdown-menu-link,
.app-bottom .app-bottom-row { font-size: 12px; line-height: 16px; }
.app-bottom-pop .kt-dropdown-menu-link i { font-size: 14px; }
.app-bottom-pop .kt-dropdown-menu-link > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bottom-meta { margin-inline-start: auto; flex: none; font-size: 11px; line-height: 16px; color: var(--muted-foreground); }
.app-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; padding: 4px 8px; font-size: 12px; line-height: 16px; color: var(--foreground); cursor: pointer; }
.app-bottom-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: none;
  padding: 0;
  color: #687385;
  cursor: pointer;
}
.app-bottom-icon i { font-size: 14px; line-height: 1; }
.app-bottom-icon:hover { background: rgba(15, 23, 42, 0.05); color: var(--foreground); }
.demo1 .kt-sidebar { top: 0; bottom: 32px; }
.demo1 .kt-wrapper { padding-bottom: 32px; }
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) ~ .app-bottom .app-bottom-label { display: none; }
.demo1.kt-sidebar-collapse .kt-sidebar:hover ~ .app-bottom .app-bottom-start { width: var(--sidebar-default-width); }
.dark .app-bottom { background: color-mix(in srgb, #fff 7%, #111114); border-top-color: #2a2a2e; }
.dark .app-bottom-link i,
.dark .app-bottom-icon { color: #a3acba; }
.dark .app-bottom-link:hover,
.dark .app-bottom-start.open > .app-bottom-link,
.dark .app-bottom-icon:hover,
.dark .app-bottom-menu.open > .app-bottom-icon,
.dark .app-bottom-icon.active { background: color-mix(in srgb, var(--primary) 18%, transparent); }
@media (max-width: 1023px) {
  .app-bottom-start { width: auto; padding-inline-start: 12px; }
}