/* Köhler Intelligenz Core Design
   Shared platform overrides derived from Kohler-designpages/Core-designs. */

:root {
  --brand-red: #C20019;
  --brand-red-hover: #A00015;
  --brand-red-dark: #9B0B22;
  --brand-red-wash: #FBEBEE;
  --brand-black: #0A0A0B;
  --n-0: #FFFFFF;
  --n-25: #FCFCFD;
  --n-50: #F7F8FA;
  --n-100: #F1F2F5;
  --n-150: #E8EAEE;
  --n-200: #DEE1E6;
  --n-300: #C4C9D1;
  --n-400: #9AA1AC;
  --n-500: #6F7682;
  --n-600: #545B66;
  --n-700: #3A4049;
  --n-800: #232830;
  --n-900: #14171C;
  --success-700: #117A3D;
  --success-500: #1F9D58;
  --success-50: #E8F6EE;
  --warning-700: #8A4B00;
  --warning-500: #B86E00;
  --warning-50: #FCF1E0;
  --danger-700: #A60E14;
  --danger-500: #D02331;
  --danger-50: #FCEAEC;
  --info-700: #1A4D8F;
  --info-500: #2E6FBE;
  --info-50: #EAF1FB;
  --fg-1: var(--n-900);
  --fg-2: var(--n-700);
  --fg-3: var(--n-500);
  --fg-muted: var(--n-400);
  --fg-link: var(--info-700);
  --bg-canvas: var(--n-25);
  --bg-surface: var(--n-0);
  --bg-subtle: var(--n-50);
  --bg-hover: var(--n-100);
  --bg-selected: var(--brand-red-wash);
  --border-soft: var(--n-150);
  --border-default: var(--n-200);
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-card: 6px;
  --radius-control: 4px;
  --shadow-card: 0 1px 2px rgba(20, 23, 28, 0.04), 0 0 0 1px rgba(20, 23, 28, 0.04);
  --shadow-pop: 0 16px 48px rgba(20, 23, 28, 0.18), 0 0 0 1px rgba(20, 23, 28, 0.08);
  --ring-focus: 0 0 0 3px rgba(194, 0, 25, 0.18);
  --fs-display: 32px;
  --fs-h1: 24px;
  --fs-h2: 18px;
  --fs-h3: 15px;
  --fs-body: 13px;
  --fs-sm: 12px;
  --fs-xs: 11px;
  --fs-micro: 10px;
}

html,
body {
  background: var(--bg-canvas) !important;
  color: var(--n-700) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

main {
  background: var(--bg-canvas);
}

main h1.font-heading,
main .kix-page-title {
  font-size: var(--fs-h1) !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  color: var(--fg-1) !important;
}

main h2.font-heading,
main .kix-section-title {
  font-size: var(--fs-h2) !important;
  line-height: 1.3 !important;
  font-weight: 750 !important;
  color: var(--fg-1) !important;
}

main h3.font-heading,
main .kix-card-title {
  font-size: var(--fs-h3) !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  color: var(--fg-1) !important;
}

main p,
main li,
main label,
main input,
main select,
main textarea {
  font-size: var(--fs-body);
}

* {
  letter-spacing: 0 !important;
}

.font-heading,
.font-body,
.kt-sidebar-link,
.mobile-nav-link,
.kt-sidebar-section,
.kt-nav-pill,
.kt-btn-primary,
.kt-btn-secondary,
.kt-input,
.kt-table th,
.kt-table td,
.kt-badge,
.kt-section-label,
.agent-tag,
.kc-eyebrow,
.kc-title,
.kc-body,
.kc-btn {
  font-family: var(--font-sans) !important;
}

.font-mono,
code,
pre,
kbd,
samp {
  font-family: var(--font-mono) !important;
}

.text-kt-red,
.hover\:text-kt-red:hover {
  color: var(--brand-red) !important;
}

.bg-kt-red,
.hover\:bg-kt-red:hover {
  background-color: var(--brand-red) !important;
}

.text-kt-sales,
.hover\:text-kt-sales:hover {
  color: var(--brand-red) !important;
}

.bg-kt-sales,
.hover\:bg-kt-sales:hover {
  background-color: var(--brand-red) !important;
}

.border-kt-sales {
  border-color: var(--brand-red) !important;
}

.bg-gradient-to-br.from-kt-red,
.bg-gradient-to-r.from-kt-red,
.bg-gradient-to-l.from-kt-red,
.bg-gradient-to-t.from-kt-red,
.bg-gradient-to-b.from-kt-red,
.bg-gradient-to-br.from-kt-sales,
.bg-gradient-to-r.from-kt-sales {
  background-image: none !important;
  background-color: var(--brand-red) !important;
}

.bg-gradient-to-br.from-blue-50,
.bg-gradient-to-r.from-blue-50,
.bg-gradient-to-br.from-purple-50,
.bg-gradient-to-r.from-purple-50,
.bg-gradient-to-br.from-indigo-50,
.bg-gradient-to-r.from-indigo-50 {
  background-image: none !important;
  background-color: var(--bg-subtle) !important;
}

.border-kt-red,
.border-l-kt-red,
.border-l-kt-sales {
  border-color: var(--brand-red) !important;
}

.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: var(--radius-card) !important;
}

.rounded-lg,
.rounded-md {
  border-radius: var(--radius-control) !important;
}

.font-black {
  font-weight: 850 !important;
}

.text-kt-black,
.text-kt-dark {
  color: var(--fg-1) !important;
}

.text-kt-muted {
  color: var(--fg-3) !important;
}

.text-gray-900,
.text-slate-900,
.text-neutral-900,
.text-zinc-900,
.text-gray-800,
.text-slate-800,
.text-neutral-800,
.text-zinc-800 {
  color: var(--fg-1) !important;
}

.text-gray-700,
.text-slate-700,
.text-neutral-700,
.text-zinc-700,
.text-gray-600,
.text-slate-600,
.text-neutral-600,
.text-zinc-600 {
  color: var(--fg-2) !important;
}

.text-gray-500,
.text-slate-500,
.text-neutral-500,
.text-zinc-500,
.text-gray-400,
.text-slate-400,
.text-neutral-400,
.text-zinc-400 {
  color: var(--fg-3) !important;
}

.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-cyan-500,
.text-cyan-600,
.text-cyan-700,
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-purple-500,
.text-purple-600,
.text-purple-700,
.text-sky-500,
.text-sky-600,
.text-sky-700,
.text-violet-500,
.text-violet-600,
.text-violet-700 {
  color: var(--fg-2) !important;
}

.text-green-500,
.text-green-600,
.text-green-700,
.text-emerald-500,
.text-emerald-600,
.text-emerald-700,
.text-kt-success {
  color: var(--success-700) !important;
}

.text-amber-500,
.text-amber-600,
.text-amber-700,
.text-orange-500,
.text-orange-600,
.text-orange-700,
.text-kt-warning {
  color: var(--warning-700) !important;
}

.text-red-500,
.text-red-600,
.text-red-700,
.text-rose-500,
.text-rose-600,
.text-rose-700,
.text-kt-danger {
  color: var(--danger-700) !important;
}

.bg-kt-surface,
.bg-gray-50,
.bg-slate-50,
.bg-neutral-50,
.bg-zinc-50 {
  background-color: var(--bg-subtle) !important;
}

.bg-gray-100,
.bg-slate-100,
.bg-neutral-100,
.bg-zinc-100 {
  background-color: var(--bg-hover) !important;
}

.bg-blue-50,
.bg-blue-50\/30,
.bg-blue-50\/40,
.bg-blue-50\/50,
.bg-blue-50\/60,
.bg-blue-50\/70,
.bg-cyan-50,
.bg-cyan-100,
.bg-indigo-50,
.bg-indigo-100,
.bg-purple-50,
.bg-purple-50\/30,
.bg-purple-50\/50,
.bg-purple-100,
.bg-sky-50,
.bg-sky-100,
.bg-violet-50,
.bg-violet-50\/30,
.bg-orange-50,
.bg-orange-100 {
  background-color: var(--bg-subtle) !important;
}

.bg-green-50,
.bg-green-100,
.bg-emerald-50,
.bg-emerald-100 {
  background-color: var(--success-50) !important;
}

.bg-amber-50,
.bg-amber-50\/40,
.bg-amber-100 {
  background-color: var(--warning-50) !important;
}

.bg-red-50,
.bg-red-50\/30,
.bg-red-50\/40,
.bg-red-100,
.bg-rose-50,
.bg-rose-100 {
  background-color: var(--danger-50) !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-cyan-500,
.bg-cyan-600,
.bg-indigo-500,
.bg-indigo-600,
.bg-purple-500,
.bg-purple-600,
.bg-sky-500,
.bg-sky-600,
.bg-violet-500 {
  background-color: var(--brand-red) !important;
}

.bg-green-400,
.bg-green-500,
.bg-emerald-400,
.bg-emerald-500 {
  background-color: var(--success-500) !important;
}

.bg-amber-400,
.bg-amber-500,
.bg-orange-400,
.bg-orange-500 {
  background-color: var(--warning-500) !important;
}

.bg-red-400,
.bg-red-500,
.bg-rose-400,
.bg-rose-500 {
  background-color: var(--danger-500) !important;
}

.border-kt-border,
.border-gray-100,
.border-gray-200,
.border-slate-100,
.border-slate-200,
.border-neutral-100,
.border-neutral-200,
.border-zinc-100,
.border-zinc-200,
.border-blue-100,
.border-blue-200,
.border-blue-300,
.border-cyan-100,
.border-cyan-200,
.border-indigo-100,
.border-indigo-200,
.border-purple-100,
.border-purple-200,
.border-sky-100,
.border-sky-200,
.border-violet-100,
.border-violet-200,
.border-orange-100,
.border-orange-200 {
  border-color: var(--border-soft) !important;
}

.border-green-200,
.border-green-300,
.border-emerald-200,
.border-emerald-300 {
  border-color: rgba(17, 122, 61, 0.2) !important;
}

.border-amber-200,
.border-amber-300 {
  border-color: rgba(138, 75, 0, 0.22) !important;
}

.border-red-200,
.border-red-300,
.border-rose-200,
.border-rose-300 {
  border-color: rgba(166, 14, 20, 0.2) !important;
}

.kt-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card);
  padding: 18px;
}

[class*="rounded-xl"],
[class*="rounded-2xl"],
[class*="rounded-3xl"] {
  border-radius: var(--radius-card) !important;
}

[class*="shadow-xl"],
[class*="shadow-2xl"],
[class*="shadow-lg"] {
  box-shadow: var(--shadow-pop) !important;
}

.kt-card [class*="shadow-"],
main [class*="hover:shadow-"]:hover {
  box-shadow: var(--shadow-card) !important;
}

@media (max-width: 768px) {
  .kt-card { padding: 14px; }
  main h1.font-heading,
  main .kix-page-title {
    font-size: 22px !important;
  }
  main h2.font-heading,
  main .kix-section-title {
    font-size: 17px !important;
  }
  .kt-btn-primary,
  .kt-btn-secondary,
  button[type="submit"] {
    font-size: 13px !important;
    padding: 10px 16px !important;
  }
}

.kt-btn-primary,
.kt-btn-secondary,
button[type="submit"],
a.kt-btn-primary,
a.kt-btn-secondary,
.kt-nav-link,
.kt-nav-pill {
  border-radius: var(--radius-control) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1.15;
}

button,
a,
input,
select,
textarea {
  transition-duration: 140ms;
}

.kt-btn-primary {
  background: var(--brand-red) !important;
  color: #fff !important;
}

.kt-btn-primary:hover {
  background: var(--brand-red-hover) !important;
}

.kt-btn-secondary {
  background: #fff !important;
  border-color: var(--border-default) !important;
  color: var(--brand-black) !important;
}

.kt-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  border-color: var(--border-default) !important;
  border-radius: var(--radius-control) !important;
  color: var(--n-900) !important;
  font-family: var(--font-sans) !important;
}

.kt-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-red) !important;
  box-shadow: var(--ring-focus);
  outline: none;
}

.kt-table th,
table th {
  background: var(--bg-subtle) !important;
  color: var(--fg-3) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-transform: uppercase;
  border-bottom-color: var(--border-default) !important;
}

.kt-table td,
table td {
  color: var(--fg-2);
  font-size: 13px !important;
  border-bottom-color: var(--border-soft) !important;
}

tbody tr:hover > td,
.kt-table tr:hover td {
  background: rgba(194, 0, 25, 0.035) !important;
}

.kt-kpi-card {
  border-radius: var(--radius-card) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-card);
}

.kt-kpi-card .kpi-value {
  font-family: var(--font-sans) !important;
  color: var(--fg-1) !important;
  font-size: 32px !important;
  font-weight: 850;
}

.kt-sidebar {
  background: #fff !important;
  border-right-color: var(--border-soft) !important;
}

.kt-sidebar-link,
.mobile-nav-link {
  color: var(--fg-2) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease !important;
}

.kt-sidebar-link--plain {
  gap: 0 !important;
}

.kt-sidebar-link:hover,
.mobile-nav-link:hover {
  background: var(--bg-hover) !important;
  color: var(--brand-black) !important;
}

.kt-sidebar-link.active,
.mobile-nav-link.active,
.kt-sidebar-action.active {
  color: var(--brand-red) !important;
  background: rgba(194, 0, 25, 0.055) !important;
  border-left-color: var(--brand-red) !important;
  box-shadow: inset 2px 0 0 var(--brand-red);
}

.kt-sidebar-section,
.mobile-nav-section,
.kt-section-label {
  color: var(--fg-3) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.kt-sidebar-badge {
  border-radius: 6px !important;
  border-color: var(--border-soft) !important;
  background: color-mix(in srgb, var(--kt-badge-bg, var(--brand-red)) 10%, white) !important;
}

.kt-sidebar-action {
  border-radius: 6px !important;
}

.kt-sidebar-action--text {
  width: auto !important;
  min-width: 42px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.kt-badge,
.fdl-chip,
.status {
  border-radius: 999px !important;
}

.agent-tag,
.kt-badge-processing,
.kt-badge-sales,
.kt-badge-marketing {
  background: var(--bg-subtle) !important;
  border-color: var(--border-soft) !important;
  color: var(--fg-2) !important;
}

[class*="from-purple-"],
[class*="from-indigo-"],
[class*="from-blue-"],
[class*="from-cyan-"],
[class*="from-sky-"],
[class*="to-purple-"],
[class*="to-indigo-"],
[class*="to-blue-"],
[class*="to-cyan-"],
[class*="to-sky-"] {
  background-image: none !important;
}

.kc-card {
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 16px 48px rgba(20, 23, 28, 0.18), 0 0 0 1px rgba(20, 23, 28, 0.08) !important;
}

.kc-btn-confirm {
  background: var(--brand-red) !important;
  box-shadow: 0 4px 12px -2px rgba(194, 0, 25, 0.34) !important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: var(--shadow-card) !important;
}

.hover\:shadow-md:hover,
.hover\:shadow-lg:hover,
.hover\:shadow-xl:hover {
  box-shadow: 0 2px 6px rgba(20, 23, 28, 0.05), 0 0 0 1px rgba(20, 23, 28, 0.05) !important;
}

.kix-eyebrow,
.kt-section-label,
.kt-sidebar-section,
table th,
.kt-table th {
  text-transform: uppercase;
}

.kix-display {
  font: 600 var(--fs-display)/1.15 var(--font-sans);
  color: var(--fg-1);
}

.kix-h1 {
  font: 600 var(--fs-h1)/1.15 var(--font-sans);
  color: var(--fg-1);
}

.kix-h2 {
  font: 600 var(--fs-h2)/1.35 var(--font-sans);
  color: var(--fg-1);
}

.kix-h3 {
  font: 600 var(--fs-h3)/1.35 var(--font-sans);
  color: var(--fg-1);
}

.kix-body {
  font: 400 var(--fs-body)/1.5 var(--font-sans);
  color: var(--fg-2);
}

main::-webkit-scrollbar,
aside::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

main::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb {
  background: var(--n-200);
  border-radius: 4px;
}

main::-webkit-scrollbar-thumb:hover,
aside::-webkit-scrollbar-thumb:hover {
  background: var(--n-300);
}

::selection {
  background: var(--brand-red-wash);
  color: var(--brand-red);
}