/* ================================================================
   KINETIC AUTHORITY — Design System Overrides
   Applies DESIGN.md on top of Metronic base
   ================================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────────────── */
:root {
  --ds-primary:             #FE1420;
  --ds-primary-dark:        #D20E1B;
  --ds-on-primary:          #FFFFFF;
  --ds-primary-container:   #FFE0E0;

  /* Surface stack — tonal layering, no borders */
  --ds-surface:             #F4F4F4;
  --ds-surface-low:         #EBEBEB;
  --ds-surface-lowest:      #FFFFFF;
  --ds-surface-high:        #E2E2E2;
  --ds-surface-highest:     #D5D5D5;

  /* Text — never pure black */
  --ds-on-surface:          #1A1C1C;
  --ds-on-surface-variant:  #4A4D4D;
  --ds-on-surface-faint:    #8C8F8F;

  /* Ghost border — felt, not seen */
  --ds-outline-variant:     rgba(26, 28, 28, 0.07);

  /* Elevation — ambient only */
  --ds-shadow-card:         0 2px 16px rgba(26, 28, 28, 0.04);
  --ds-shadow-float:        0 8px 40px rgba(26, 28, 28, 0.06);

  /* Radius scale */
  --ds-r-sm:   0.375rem;
  --ds-r-md:   0.5rem;
  --ds-r-lg:   0.75rem;
  --ds-r-xl:   1rem;
  --ds-r-2xl:  1.25rem;
}

/* ── 2. Typography ────────────────────────────────────────────────── */
body {
  font-family: 'Work Sans', sans-serif !important;
  color: var(--ds-on-surface) !important;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ds-surface) !important;
}

/* Display / Editorial headings */
h1, h2, h3, h4, h5, h6,
.card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.02em;
  color: var(--ds-on-surface) !important;
}

.text-xl, .text-2xl, .text-3xl {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.02em;
}

/* Label / data layer */
.badge,
th,
.form-label,
.text-xs,
.text-2sm,
code, .font-mono {
  font-family: 'Inter', sans-serif !important;
}

/* ── 3. Canvas & Surface ──────────────────────────────────────────── */
body,
.bg-\[--tw-page-bg\] {
  background-color: var(--ds-surface) !important;
}

.content,
#kt_content {
  background-color: var(--ds-surface) !important;
}

/* ── 4. Cards — tonal lift, no borders ───────────────────────────── */
.card {
  background-color: var(--ds-surface-lowest) !important;
  border: none !important;
  box-shadow: var(--ds-shadow-card) !important;
  border-radius: var(--ds-r-xl) !important;
  overflow: hidden;
}

.card-header {
  border-bottom: none !important;
  background-color: transparent !important;
  padding-bottom: 0.5rem !important;
}

.card-body {
  color: var(--ds-on-surface);
}

/* Filter card: slightly inset look (low surface) */
.card.filter-card {
  background-color: var(--ds-surface-low) !important;
  box-shadow: none !important;
}

/* ── 5. No-Line Rule — Tables ─────────────────────────────────────── */
.table > :not(caption) > * > * {
  border-bottom: none !important;
  border-color: transparent !important;
}

.table-row-bordered > tbody > tr,
.table-row-bordered > thead > tr {
  border-bottom: none !important;
}

/* Tonal alternating rows — replaces dividers */
.table > thead > tr {
  background-color: var(--ds-surface-low) !important;
}

.table > tbody > tr:nth-child(even) {
  background-color: var(--ds-surface-low) !important;
}

.table > tbody > tr:nth-child(odd) {
  background-color: var(--ds-surface-lowest) !important;
}

.table > tbody > tr:hover td {
  background-color: var(--ds-surface-high) !important;
}

/* Table total row */
.table > tbody > tr.totals-row {
  background-color: var(--ds-surface-low) !important;
}

.table > thead > tr > th {
  border-bottom: none !important;
  color: var(--ds-on-surface-faint) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

/* ── 6. Sidebar — Focus-Strip Architecture ────────────────────────── */
.sidebar {
  background-color: var(--ds-surface-lowest) !important;
  border-inline-end: none !important;
  border-right: none !important;
  /* Ghost border fallback */
  box-shadow: 1px 0 0 var(--ds-outline-variant) !important;
}

.sidebar-header {
  border-bottom: none !important;
}

/* New menu link base — clean slate */
.ds-menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-left: 3px solid transparent;
  color: var(--ds-on-surface-variant);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.12s ease;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.ds-menu-link:hover {
  color: var(--ds-on-surface);
  border-left-color: var(--ds-outline-variant);
  background-color: transparent !important;
}

/* Focus-Strip: 3px primary bar on active item */
.menu-item.active > .ds-menu-link {
  border-left-color: var(--ds-primary) !important;
  color: var(--ds-on-surface) !important;
}

.menu-item.active > .ds-menu-link .ds-menu-icon {
  color: var(--ds-primary) !important;
}

.ds-menu-icon {
  width: 20px;
  color: var(--ds-on-surface-faint);
  transition: color 0.12s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ds-menu-title {
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: 'Work Sans', sans-serif;
  color: inherit;
  transition: color 0.12s ease;
}

.ds-menu-link:hover .ds-menu-icon {
  color: var(--ds-on-surface-variant);
}

/* Section separator — tonal, not a line */
.ds-menu-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.ds-menu-section::before {
  content: '';
  display: block;
  height: 1px;
  background-color: var(--ds-outline-variant);
  margin: 0 12px 0.75rem;
}

.ds-menu-section-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.575rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-on-surface-faint);
  padding: 0 12px 0.375rem;
  display: block;
}

/* ── 7. Header — Glassmorphism ────────────────────────────────────── */
#header,
.header {
  background: rgba(244, 244, 244, 0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--ds-outline-variant) !important;
}

/* ── 8. Buttons ───────────────────────────────────────────────────── */

/* Primary — the "money action" */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background: linear-gradient(150deg, #FE1420 0%, #D20E1B 100%) !important;
  border: none !important;
  border-radius: var(--ds-r-lg) !important;
  color: #fff !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease, transform 0.1s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(150deg, #E81020, #BB0C17) !important;
  box-shadow: 0 4px 18px rgba(254, 20, 32, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* Secondary / light — surface-high */
.btn-light,
.btn-secondary {
  background-color: var(--ds-surface-high) !important;
  border: none !important;
  border-radius: var(--ds-r-lg) !important;
  color: var(--ds-on-surface) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease !important;
}

.btn-light:hover {
  background-color: var(--ds-surface-highest) !important;
  color: var(--ds-on-surface) !important;
}

/* Danger — same gradient as primary (red is red) */
.btn-danger {
  background: linear-gradient(150deg, #FE1420 0%, #D20E1B 100%) !important;
  border: none !important;
  border-radius: var(--ds-r-lg) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-danger:hover {
  box-shadow: 0 4px 18px rgba(254, 20, 32, 0.22) !important;
}

.btn-icon {
  border-radius: var(--ds-r-md) !important;
}

/* Avatar toggle — keep circular, don't clip */
#header_user_menu .menu-toggle.btn-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── 9. Inputs — white background, bottom-border on focus ────────────── */

/* Raw HTML elements — widest possible catch */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea,
select {
  background-color: #ffffff !important;
}

/* Metronic .input wrapper */
.input,
.\!input {
  background-color: #ffffff !important;
  border: 1px solid var(--ds-outline-variant) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--ds-r-md) var(--ds-r-md) 0 0 !important;
  box-shadow: none !important;
  transition: border-bottom-color 0.2s ease !important;
}

.input:focus-within,
.\!input:focus-within {
  border-bottom-color: var(--ds-primary) !important;
  box-shadow: none !important;
}

.input > input,
.input > input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: 'Work Sans', sans-serif !important;
  color: var(--ds-on-surface) !important;
}

/* Metronic .select */
.select,
.\!select {
  background-color: #ffffff !important;
  border: 1px solid var(--ds-outline-variant) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--ds-r-md) var(--ds-r-md) 0 0 !important;
  font-family: 'Work Sans', sans-serif !important;
  color: var(--ds-on-surface) !important;
  box-shadow: none !important;
  transition: border-bottom-color 0.2s ease !important;
}

.select:focus,
.\!select:focus {
  border-bottom-color: var(--ds-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Tom Select — white control to match */
.ts-wrapper .ts-control {
  background-color: #ffffff !important;
  border: 1px solid var(--ds-outline-variant) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--ds-r-md) var(--ds-r-md) 0 0 !important;
  box-shadow: none !important;
  transition: border-bottom-color 0.2s ease !important;
}

.ts-wrapper.focus .ts-control {
  border-bottom-color: var(--ds-primary) !important;
  box-shadow: none !important;
}

.form-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ds-on-surface-faint) !important;
}

/* ── 10. Badges ───────────────────────────────────────────────────── */
.badge {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  border-radius: var(--ds-r-sm) !important;
  border: none !important;
}

/* Semantic status palette */
.badge-warning {
  background-color: #FFF3CD !important;
  color: #92400E !important;
}

.badge-primary {
  background-color: #DBEAFE !important;
  color: #1E3A8A !important;
}

.badge-info {
  background-color: #CFFAFE !important;
  color: #164E63 !important;
}

.badge-light-primary {
  background-color: #F3E8FF !important;
  color: #6B21A8 !important;
}

.badge-success {
  background-color: #D1FAE5 !important;
  color: #065F46 !important;
}

.badge-danger {
  background-color: #FFE4E6 !important;
  color: #9F1239 !important;
}

.badge-gray,
.badge-outline.badge-gray {
  background-color: var(--ds-surface-high) !important;
  color: var(--ds-on-surface-variant) !important;
  border: none !important;
}

/* ── 11. User menu dropdown ───────────────────────────────────────── */
.menu-dropdown {
  background-color: var(--ds-surface-lowest) !important;
  border: none !important;
  box-shadow: var(--ds-shadow-float) !important;
  border-radius: var(--ds-r-xl) !important;
}

.menu-separator {
  background-color: var(--ds-outline-variant) !important;
  height: 1px !important;
  border: none !important;
}

.menu-link {
  color: var(--ds-on-surface-variant) !important;
  font-family: 'Work Sans', sans-serif !important;
}

.menu-link:hover {
  background-color: var(--ds-surface-low) !important;
}

.menu-title {
  font-family: 'Work Sans', sans-serif !important;
}

/* ── 12. Alerts / Flash messages ──────────────────────────────────── */
.alert {
  border: none !important;
  border-radius: var(--ds-r-lg) !important;
}

/* ── 13. Kanban board ─────────────────────────────────────────────── */
.kanban-column {
  background-color: var(--ds-surface-low) !important;
  border: none !important;
  border-radius: var(--ds-r-xl) !important;
}

.kanban-column-header {
  border-bottom: none !important;
  background-color: transparent !important;
}

.kanban-card {
  background-color: var(--ds-surface-lowest) !important;
  border: none !important;
  box-shadow: 0 1px 6px rgba(26, 28, 28, 0.06) !important;
  border-radius: var(--ds-r-lg) !important;
  transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}

.kanban-card:hover {
  box-shadow: 0 4px 20px rgba(26, 28, 28, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* ── 14. Status history timeline ──────────────────────────────────── */
.ds-timeline-dot {
  background-color: var(--ds-primary) !important;
}

/* ── 15. Color utilities used in templates ────────────────────────── */
.text-gray-900 { color: var(--ds-on-surface) !important; }
.text-gray-800 { color: var(--ds-on-surface) !important; }
.text-gray-700 { color: var(--ds-on-surface-variant) !important; }
.text-gray-600 { color: var(--ds-on-surface-variant) !important; }
.text-gray-500 { color: var(--ds-on-surface-faint) !important; }
.text-gray-400 { color: var(--ds-on-surface-faint) !important; }

/* ── 16. Detail page — section dividers via tonal shift ───────────── */
.ds-section-divider {
  height: 1px;
  background-color: var(--ds-outline-variant);
  margin: 1rem 0;
}

/* ── 17. Inline stat blocks (order detail fields) ─────────────────── */
.ds-field-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-on-surface-faint);
  margin-bottom: 0.2rem;
}

.ds-field-value {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.875rem;
  color: var(--ds-on-surface);
}

.ds-field-value-large {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ds-on-surface);
}

/* ── 18. Sidebar collapse — hide labels, center icons ────────────── */
.sidebar-collapse .sidebar:not(:hover) .ds-menu-title,
.sidebar-collapse .sidebar:not(:hover) .ds-menu-section-label {
  display: none !important;
}

.sidebar-collapse .sidebar:not(:hover) .ds-menu-section::before {
  margin: 0 auto 0.5rem;
  width: calc(100% - 24px);
}

.sidebar-collapse .sidebar:not(:hover) .ds-menu-section {
  padding-top: 0.5rem;
}

.sidebar-collapse .sidebar:not(:hover) .ds-menu-link {
  justify-content: center;
  gap: 0;
  padding: 9px 0;
}

/* ── 19. Page-level header ────────────────────────────────────────── */
.ds-page-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ds-on-surface) !important;
}

.ds-page-subtitle {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.8125rem;
  color: var(--ds-on-surface-faint);
}