/* ═══════════════════════════════════════════════════════════════
   App Design System — Stripe-inspired SaaS B2B theme
   Minimal, structured, fine borders, zero parasitic shadows
   ═══════════════════════════════════════════════════════════════ */

/* Alpine.js — hide x-cloak elements before init */
[x-cloak] { display: none !important; }

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --shift-white:    #FFFFFF;
  --shift-bg:       #F6F8FA;      /* page background: very soft gray */
  --shift-bg-soft:  #F3F4F6;
  --shift-border:   #E4E4E7;      /* standard border */
  --shift-border-l: #F0F0F0;      /* light border (table rows) */
  --shift-text:     #111827;      /* primary text */
  --shift-muted:    #6B7280;      /* secondary text */
  --shift-subtle:   #9CA3AF;      /* very subtle text */
  --shift-indigo:   #8B2D4F;      /* primary accent */
  --shift-indigo-h: #6D203D;      /* hover accent */
  --shift-indigo-bg:#F7E8ED;      /* very soft accent bg */
  --shift-success:  #059669;
  --shift-success-bg: #D1FAE5;
  --shift-warning:  #D97706;
  --shift-warning-bg: #FEF3C7;
  --shift-error:    #DC2626;
  --shift-error-bg: #FEE2E2;
  --shift-gray-bg:  #F3F4F6;      /* neutral badge bg */
  --shift-tooltip-bg: #1F2937;
  --shift-tooltip-text: #F9FAFB;
  --shift-focus-ring: rgba(139, 45, 79, 0.14);
  --shift-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shift-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shift-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shift-success-text: #065F46;
  --shift-warning-text: #92400E;
  --shift-error-text: #991B1B;
  --shift-indigo-text: #6D203D;
  --shift-pink-bg: #FCE7F3;
  --shift-pink-text: #9D174D;
  --shift-pink-dot: #EC4899;
  --shift-danger-hover: #FEF2F2;
  --shift-danger-text: #DC2626;
  --shift-scrollbar-hover: #D1D5DB;
  --shift-indigo-border-soft: rgba(139, 45, 79, 0.22);
  --shift-indigo-hover-soft: rgba(139, 45, 79, 0.14);
}

/* ── DaisyUI theme ──────────────────────────────────────────── */
[data-theme="shift"],
[data-theme="shift-dark"] {
  --color-base-100: var(--shift-white);
  --color-base-200: var(--shift-bg);
  --color-base-300: var(--shift-border);
  --color-base-content: var(--shift-text);
  --color-primary: var(--shift-indigo);
  --color-primary-content: #FFFFFF;
  --color-secondary: #A44567;
  --color-secondary-content: #FFFFFF;
  --color-success: var(--shift-success);
  --color-success-content: #FFFFFF;
  --color-warning: var(--shift-warning);
  --color-warning-content: #FFFFFF;
  --color-error: var(--shift-error);
  --color-error-content: #FFFFFF;
  --color-info: #2563EB;
  --color-info-content: #FFFFFF;
  --color-neutral: #6B7280;
  --color-neutral-content: #FFFFFF;
  --radius-btn: 0.375rem;
  --radius-box: 0.375rem;
  --radius-badge: 0.25rem;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

[data-theme="shift"] {
  color-scheme: light;
}

[data-theme="shift-dark"] {
  color-scheme: dark;
  --shift-white: #0F172A;
  --shift-bg: #09111F;
  --shift-bg-soft: #172133;
  --shift-border: #263243;
  --shift-border-l: #1D2736;
  --shift-text: #E5EEF9;
  --shift-muted: #A9B7CA;
  --shift-subtle: #7F8EA3;
  --shift-indigo: #D98CA8;
  --shift-indigo-h: #C46B8E;
  --shift-indigo-bg: #341722;
  --shift-success: #34D399;
  --shift-success-bg: #0B3A2D;
  --shift-warning: #F59E0B;
  --shift-warning-bg: #4A3208;
  --shift-error: #F87171;
  --shift-error-bg: #4A171B;
  --shift-gray-bg: #172133;
  --shift-tooltip-bg: #111827;
  --shift-tooltip-text: #F9FAFB;
  --shift-focus-ring: rgba(217, 140, 168, 0.2);
  --shift-shadow-sm: 0 8px 24px rgba(0,0,0,0.28);
  --shift-shadow-md: 0 12px 32px rgba(0,0,0,0.35);
  --shift-shadow-lg: 0 16px 40px rgba(0,0,0,0.4);
  --shift-success-text: #A7F3D0;
  --shift-warning-text: #FCD34D;
  --shift-error-text: #FECACA;
  --shift-indigo-text: #F7D1DE;
  --shift-pink-bg: #3B1024;
  --shift-pink-text: #F9A8D4;
  --shift-pink-dot: #F472B6;
  --shift-danger-hover: rgba(248, 113, 113, 0.12);
  --shift-danger-text: #FCA5A5;
  --shift-scrollbar-hover: #4B5563;
  --shift-indigo-border-soft: rgba(217, 140, 168, 0.34);
  --shift-indigo-hover-soft: rgba(217, 140, 168, 0.18);
}

/* ── Base reset ─────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--shift-text);
  background: var(--shift-bg);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.shift-sidebar {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  background: var(--shift-white);
  border-right: 1px solid var(--shift-border);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shift-sidebar-logo {
  padding: 0 1rem;
  height: 56px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--shift-border);
  flex-shrink: 0;
}

.shift-nav-section {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--shift-subtle);
  padding: 1.25rem 0.75rem 0.375rem;
  display: block;
  user-select: none;
}

.shift-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--shift-muted);
  text-decoration: none;
  transition: background 100ms, color 100ms;
  line-height: 1.4;
  cursor: pointer;
  margin: 0.0625rem 0;
}
.shift-nav-link:hover {
  background: var(--shift-bg);
  color: var(--shift-text);
}
.shift-nav-link.active {
  background: var(--shift-indigo-bg);
  color: var(--shift-indigo);
  font-weight: 500;
}
.shift-nav-link svg { flex-shrink: 0; }

.shift-sidebar-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--shift-border);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════ */
.shift-topbar {
  height: 56px;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--shift-white);
  border-bottom: 1px solid var(--shift-border);
  flex-shrink: 0;
}
.shift-topbar-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--shift-text);
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.shift-card {
  background: var(--shift-white);
  border: 1px solid var(--shift-border);
  border-radius: 0.375rem;
}

.shift-card-hover {
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.shift-card-hover:hover {
  box-shadow: var(--shift-shadow-lg);
  border-color: var(--shift-indigo-border-soft);
}

/* ═══════════════════════════════════════════════════════════════
   KPI STATS
   ═══════════════════════════════════════════════════════════════ */
.shift-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.shift-kpi {
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--shift-border);
}
.shift-kpi:last-child { border-right: none; }

.shift-kpi-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--shift-text);
  letter-spacing: -0.02em;
  display: block;
}
.shift-kpi-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--shift-muted);
  margin-top: 0.375rem;
  display: block;
}
.shift-kpi-sub {
  font-size: 0.6875rem;
  color: var(--shift-subtle);
  display: block;
  margin-top: 0.125rem;
}

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */
.shift-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.shift-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--shift-subtle);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--shift-border);
  text-align: left;
  white-space: nowrap;
  background: var(--shift-bg);
}
.shift-table td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--shift-border-l);
  font-size: 0.8125rem;
  color: var(--shift-text);
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.shift-table td.td-ellipsis {
  text-overflow: ellipsis;
  max-width: 0;
}
.shift-table tbody tr:last-child td { border-bottom: none; }
.shift-table tbody tr:hover td { background: var(--shift-bg); }

/* ── Global tooltip ─────────────────────────────────────────── */
#shift-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--shift-tooltip-bg);
  color: var(--shift-tooltip-text);
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.375rem;
  white-space: normal;
  max-width: 280px;
  word-break: break-word;
  box-shadow: var(--shift-shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════════════════════════════════ */
.shift-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--shift-border);
}
.shift-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--shift-text);
}
.shift-section-link {
  font-size: 0.75rem;
  color: var(--shift-indigo);
  text-decoration: none;
  font-weight: 500;
}
.shift-section-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */
.shift-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  vertical-align: middle;
}
.shift-badge.success {
  background: var(--shift-success-bg);
  color: var(--shift-success-text);
}
.shift-badge.warning {
  background: var(--shift-warning-bg);
  color: var(--shift-warning-text);
}
.shift-badge.error {
  background: var(--shift-error-bg);
  color: var(--shift-error-text);
}
.shift-badge.neutral {
  background: var(--shift-gray-bg);
  color: var(--shift-muted);
}
.shift-badge.indigo {
  background: var(--shift-indigo-bg);
  color: var(--shift-indigo-text);
}
.shift-badge.pink {
  background: var(--shift-pink-bg);
  color: var(--shift-pink-text);
}

/* Status dot */
.shift-badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.shift-badge.success::before { background: var(--shift-success); }
.shift-badge.warning::before  { background: var(--shift-warning); }
.shift-badge.error::before    { background: var(--shift-error); }
.shift-badge.neutral::before  { background: var(--shift-subtle); }
.shift-badge.indigo::before   { background: var(--shift-indigo); }
.shift-badge.pink::before     { background: var(--shift-pink-dot); }

/* Plain badge (no dot) */
.shift-badge-plain {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--shift-gray-bg);
  color: var(--shift-muted);
  white-space: nowrap;
}

/* ── Tags overflow ──────────────────────────────────────────── */
.tag-overflow-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}
.tag-overflow-row .tag-item {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--shift-gray-bg);
  color: var(--shift-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.tag-overflow-row .tag-more {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--shift-indigo-bg);
  color: var(--shift-indigo);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;
  position: relative;
}
.tag-more-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--shift-tooltip-bg);
  color: var(--shift-tooltip-text);
  font-size: 0.6875rem;
  font-weight: 400;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  box-shadow: var(--shift-shadow-md);
  z-index: 100;
  min-width: 160px;
  max-width: 280px;
  white-space: normal;
  line-height: 1.5;
}
.tag-more:hover .tag-more-tooltip { display: block; }

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */
.shift-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--shift-indigo-bg);
  border-left: 3px solid var(--shift-indigo);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: var(--shift-indigo-text);
  background: var(--shift-indigo-bg);
  line-height: 1.5;
}
.shift-alert.warning {
  border-color: var(--shift-warning-bg);
  border-left-color: var(--shift-warning);
  background: var(--shift-warning-bg);
  color: var(--shift-warning-text);
}
.shift-alert.error {
  border-color: var(--shift-error-bg);
  border-left-color: var(--shift-error);
  background: var(--shift-error-bg);
  color: var(--shift-error-text);
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.shift-empty {
  padding: 3rem 2rem;
  text-align: center;
}
.shift-empty p { margin: 0; }
.shift-empty .shift-empty-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--shift-text);
  margin-bottom: 0.25rem;
}
.shift-empty .shift-empty-sub {
  font-size: 0.8125rem;
  color: var(--shift-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.shift-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.shift-btn-primary {
  background: var(--shift-indigo);
  color: #FFFFFF;
  border-color: var(--shift-indigo);
}
.shift-btn-primary:hover {
  background: var(--shift-indigo-h);
  border-color: var(--shift-indigo-h);
}
.shift-btn-ghost {
  background: transparent;
  color: var(--shift-muted);
  border-color: var(--shift-border);
}
.shift-btn-ghost:hover {
  background: var(--shift-bg);
  color: var(--shift-text);
}

.shift-link-muted {
  font-size: 0.75rem;
  color: var(--shift-subtle);
  text-decoration: none;
  transition: color 120ms ease;
}

.shift-link-muted:hover {
  color: var(--shift-indigo);
}

.shift-avatar-fallback {
  border-radius: 50%;
  background: var(--shift-indigo-bg);
  color: var(--shift-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
}

.shift-inline-label { color: var(--shift-muted); }
.shift-inline-help { color: var(--shift-subtle); }
.shift-soft-surface {
  background: var(--shift-bg-soft);
  border-radius: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════════════════ */
.shift-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--shift-border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--shift-text);
  background: var(--shift-white);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  font-family: inherit;
}
.shift-input:focus {
  border-color: var(--shift-indigo);
  box-shadow: 0 0 0 3px var(--shift-focus-ring);
}
.shift-input::placeholder { color: var(--shift-subtle); }

/* ═══════════════════════════════════════════════════════════════
   TOM-SELECT theme
   ═══════════════════════════════════════════════════════════════ */

.ts-hidden-accessible,
select.tomselected {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ts-wrapper.shift-input,
.ts-wrapper {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
}
.ts-wrapper.focus,
.ts-wrapper.dropdown-active {
  z-index: 100 !important;
}
form[style*="flex"] .ts-wrapper {
  flex-shrink: 0;
  flex-grow: 0;
}
form[method="get"] .ts-control input {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
}
.ts-control {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  color: var(--shift-text) !important;
  background: var(--shift-white) !important;
  border: 1px solid var(--shift-border) !important;
  border-radius: 0.375rem !important;
  padding: 0.4375rem 0.75rem !important;
  min-height: 36px !important;
  height: 36px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: border-color 150ms, box-shadow 150ms !important;
}
.ts-wrapper.multi .ts-control {
  height: auto !important;
  min-height: 36px !important;
  white-space: normal !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.25rem 0.5rem !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}
.ts-control:focus,
.focus .ts-control {
  border-color: var(--shift-indigo) !important;
  box-shadow: 0 0 0 3px var(--shift-focus-ring) !important;
  outline: none !important;
}
.ts-control::after {
  border-color: var(--shift-subtle) transparent transparent !important;
}
.focus .ts-control::after {
  border-color: var(--shift-indigo) transparent transparent !important;
}

.ts-dropdown {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.8125rem !important;
  color: var(--shift-text) !important;
  background: var(--shift-white) !important;
  border: 1px solid var(--shift-border) !important;
  border-radius: 0.375rem !important;
  box-shadow: var(--shift-shadow-md) !important;
  margin-top: 3px !important;
  padding: 0.25rem !important;
  z-index: 1000 !important;
  position: absolute !important;
}
.ts-dropdown-content,
.ts-dropdown .optgroup {
  background: var(--shift-white) !important;
}
.ts-dropdown .option {
  padding: 0.375rem 0.625rem !important;
  border-radius: 0.25rem !important;
  color: var(--shift-text) !important;
  background: transparent !important;
  cursor: pointer !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: var(--shift-bg) !important;
  color: var(--shift-text) !important;
}
.ts-dropdown .option.selected {
  background: var(--shift-indigo-bg) !important;
  color: var(--shift-indigo) !important;
  font-weight: 500 !important;
}
.ts-dropdown .option[data-value=""] {
  color: var(--shift-subtle) !important;
}
.ts-dropdown .optgroup {
  border-top: 1px solid var(--shift-border-l) !important;
}
.ts-dropdown .optgroup:first-child {
  border-top: none !important;
}
.ts-dropdown .optgroup-header,
.ts-dropdown [data-selectable].optgroup-header,
.ts-dropdown [data-disabled].optgroup-header {
  padding: 0.5rem 0.625rem !important;
  color: var(--shift-subtle) !important;
  background: var(--shift-bg-soft) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--shift-border) !important;
}
.ts-dropdown .no-results {
  padding: 0.5rem 0.625rem !important;
  color: var(--shift-subtle) !important;
  font-size: 0.8125rem !important;
}

.ts-control input {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  color: var(--shift-text) !important;
  caret-color: var(--shift-indigo) !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.ts-control input::placeholder { color: var(--shift-subtle) !important; }

.ts-wrapper.single .ts-control .item {
  display: inline !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--shift-text) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
}

.ts-wrapper.multi .ts-control .item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.125rem 0.4375rem !important;
  background: var(--shift-indigo-bg) !important;
  color: var(--shift-indigo) !important;
  border: 1px solid var(--shift-indigo-border-soft) !important;
  border-radius: 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.ts-wrapper.multi .ts-control .item .remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--shift-indigo) !important;
  border: none !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0.6 !important;
  padding: 0 !important;
  margin-left: 0.125rem !important;
}
.ts-wrapper.multi .ts-control .item .remove:hover {
  opacity: 1 !important;
  background: var(--shift-indigo-hover-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════
   EASYMDE theme
   ═══════════════════════════════════════════════════════════════ */

.EasyMDEContainer {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

.editor-toolbar {
  background: var(--shift-bg) !important;
  border: 1px solid var(--shift-border) !important;
  border-bottom: none !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
  padding: 0.25rem 0.5rem !important;
  opacity: 1 !important;
}
.editor-toolbar button {
  color: var(--shift-muted) !important;
  border: none !important;
  background: none !important;
  border-radius: 0.25rem !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 0.8125rem !important;
  transition: background 100ms, color 100ms !important;
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
  background: var(--shift-white) !important;
  color: var(--shift-indigo) !important;
  border-color: transparent !important;
}
.editor-toolbar i.separator {
  border-left: 1px solid var(--shift-border) !important;
  margin: 0 0.25rem !important;
}

.CodeMirror {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  color: var(--shift-text) !important;
  background: var(--shift-white) !important;
  border: 1px solid var(--shift-border) !important;
  border-top: none !important;
  border-radius: 0 0 0.375rem 0.375rem !important;
  padding: 0.5rem 0.25rem !important;
  box-shadow: none !important;
  transition: border-color 150ms, box-shadow 150ms !important;
}
.CodeMirror-focused {
  border-color: var(--shift-indigo) !important;
  box-shadow: 0 0 0 3px var(--shift-focus-ring) !important;
}
.EasyMDEContainer:focus-within .editor-toolbar {
  border-color: var(--shift-indigo) !important;
  border-bottom-color: var(--shift-border) !important;
}
.CodeMirror-placeholder { color: var(--shift-subtle) !important; }
.CodeMirror-cursor { border-left-color: var(--shift-indigo) !important; }
.CodeMirror-selected { background: var(--shift-indigo-bg) !important; }

.editor-preview {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  color: var(--shift-text) !important;
  background: var(--shift-white) !important;
  border: 1px solid var(--shift-border) !important;
  border-top: none !important;
  border-radius: 0 0 0.375rem 0.375rem !important;
  padding: 0.75rem 1rem !important;
}
.editor-preview h1, .editor-preview h2, .editor-preview h3 {
  font-weight: 600 !important;
  color: var(--shift-text) !important;
  margin: 0.75rem 0 0.25rem !important;
}
.editor-preview p { margin: 0.25rem 0 !important; }
.editor-preview code {
  background: var(--shift-bg) !important;
  padding: 0.125rem 0.3rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.8125rem !important;
}
.editor-preview a { color: var(--shift-indigo) !important; }

/* ═══════════════════════════════════════════════════════════════
   PROSE (markdown rendering)
   ═══════════════════════════════════════════════════════════════ */
.shift-prose p          { margin: 0 0 0.5rem; }
.shift-prose p:last-child { margin-bottom: 0; }
.shift-prose ul, .shift-prose ol { margin: 0.25rem 0 0.5rem 1.25rem; }
.shift-prose li         { margin-bottom: 0.125rem; }
.shift-prose strong     { font-weight: 600; color: var(--shift-text); }
.shift-prose em         { font-style: italic; }
.shift-prose code {
  background: var(--shift-bg);
  padding: 0.125rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.8125em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
.shift-prose a          { color: var(--shift-indigo); text-decoration: underline; }
.shift-prose h1, .shift-prose h2, .shift-prose h3 {
  font-weight: 600; color: var(--shift-text); margin: 0.75rem 0 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   FLATPICKR theme
   ═══════════════════════════════════════════════════════════════ */

.flatpickr-calendar {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  border: 1px solid var(--shift-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--shift-shadow-lg) !important;
  background: var(--shift-white) !important;
}
.flatpickr-months .flatpickr-month {
  color: var(--shift-text) !important;
  fill: var(--shift-text) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--shift-text) !important;
}
span.flatpickr-weekday {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  color: var(--shift-subtle) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
}
.flatpickr-day {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  color: var(--shift-text) !important;
  border-radius: 0.25rem !important;
  font-size: 0.8125rem !important;
}
.flatpickr-day:hover {
  background: var(--shift-bg) !important;
  border-color: transparent !important;
}
.flatpickr-day.selected {
  background: var(--shift-indigo) !important;
  border-color: var(--shift-indigo) !important;
  color: #fff !important;
}
.flatpickr-day.today:not(.selected) {
  border-color: var(--shift-indigo) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--shift-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--shift-scrollbar-hover); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Body layout class (replaces inline style) */
.shift-body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--shift-bg);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.shift-theme-toggle {
  min-width: 0;
}

.shift-theme-toggle .theme-icon-sun {
  display: none;
}

[data-theme="shift-dark"] .shift-theme-toggle .theme-icon-sun {
  display: inline-flex;
}

[data-theme="shift-dark"] .shift-theme-toggle .theme-icon-moon {
  display: none;
}

.shift-auth-body {
  background: var(--shift-bg);
  color: var(--shift-text);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.shift-auth-shell {
  width: 100%;
  max-width: 400px;
  position: relative;
}

.shift-auth-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.shift-auth-brand {
  text-align: center;
  margin-bottom: 2rem;
}

.shift-auth-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.shift-auth-brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shift-indigo);
  color: #fff;
}

.shift-auth-brand-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--shift-text);
  letter-spacing: -0.02em;
}

.shift-auth-brand-subtitle {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--shift-subtle);
}

.shift-auth-card {
  background: var(--shift-white);
  border: 1px solid var(--shift-border);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: var(--shift-shadow-sm);
}

/* Dark-mode compatibility layer for common inline text colors */
[data-theme="shift-dark"] [style*="color:#111827"],
[data-theme="shift-dark"] [style*="color: #111827"],
[data-theme="shift-dark"] [style*="color:#37352F"],
[data-theme="shift-dark"] [style*="color: #37352F"],
[data-theme="shift-dark"] [style*="color:#374151"],
[data-theme="shift-dark"] [style*="color: #374151"],
[data-theme="shift-dark"] [style*="color:#1a1a1a"],
[data-theme="shift-dark"] [style*="color: #1a1a1a"] {
  color: var(--shift-text) !important;
}

[data-theme="shift-dark"] [style*="color:#6B7280"],
[data-theme="shift-dark"] [style*="color: #6B7280"],
[data-theme="shift-dark"] [style*="color:#9CA3AF"],
[data-theme="shift-dark"] [style*="color: #9CA3AF"],
[data-theme="shift-dark"] [style*="color:#9B9A97"],
[data-theme="shift-dark"] [style*="color: #9B9A97"] {
  color: var(--shift-subtle) !important;
}

[data-theme="shift-dark"] [style*="color:#4F46E5"],
[data-theme="shift-dark"] [style*="color: #4F46E5"],
[data-theme="shift-dark"] [style*="color:#4338CA"],
[data-theme="shift-dark"] [style*="color: #4338CA"],
[data-theme="shift-dark"] [style*="color:#8B2D4F"],
[data-theme="shift-dark"] [style*="color: #8B2D4F"],
[data-theme="shift-dark"] [style*="color:#6D203D"],
[data-theme="shift-dark"] [style*="color: #6D203D"],
[data-theme="shift-dark"] [style*="color:#A44567"],
[data-theme="shift-dark"] [style*="color: #A44567"] {
  color: var(--shift-indigo) !important;
}

[data-theme="shift-dark"] [style*="color:#059669"],
[data-theme="shift-dark"] [style*="color: #059669"],
[data-theme="shift-dark"] [style*="color:#16A34A"],
[data-theme="shift-dark"] [style*="color: #16A34A"],
[data-theme="shift-dark"] [style*="color:#166534"],
[data-theme="shift-dark"] [style*="color: #166534"] {
  color: var(--shift-success) !important;
}

[data-theme="shift-dark"] [style*="color:#D97706"],
[data-theme="shift-dark"] [style*="color: #D97706"],
[data-theme="shift-dark"] [style*="color:#92400E"],
[data-theme="shift-dark"] [style*="color: #92400E"] {
  color: var(--shift-warning) !important;
}

[data-theme="shift-dark"] [style*="color:#DC2626"],
[data-theme="shift-dark"] [style*="color: #DC2626"],
[data-theme="shift-dark"] [style*="color:#E11D48"],
[data-theme="shift-dark"] [style*="color: #E11D48"] {
  color: var(--shift-error) !important;
}

[data-theme="shift-dark"] [style*="color:#9D174D"],
[data-theme="shift-dark"] [style*="color: #9D174D"] {
  color: var(--shift-pink-text) !important;
}

[data-theme="shift-dark"] [style*="background:#FFFFFF"],
[data-theme="shift-dark"] [style*="background: #FFFFFF"],
[data-theme="shift-dark"] [style*="background:#fff"],
[data-theme="shift-dark"] [style*="background: #fff"] {
  background: var(--shift-white) !important;
}

[data-theme="shift-dark"] [style*="background:#F3F4F6"],
[data-theme="shift-dark"] [style*="background: #F3F4F6"],
[data-theme="shift-dark"] [style*="background:#F6F8FA"],
[data-theme="shift-dark"] [style*="background: #F6F8FA"] {
  background: var(--shift-bg-soft) !important;
}

[data-theme="shift-dark"] [style*="background:#EEF2FF"],
[data-theme="shift-dark"] [style*="background: #EEF2FF"],
[data-theme="shift-dark"] [style*="background:#F7E8ED"],
[data-theme="shift-dark"] [style*="background: #F7E8ED"] {
  background: var(--shift-indigo-bg) !important;
}

[data-theme="shift-dark"] [style*="background:#FEF2F2"],
[data-theme="shift-dark"] [style*="background: #FEF2F2"],
[data-theme="shift-dark"] [style*="background:#FEE2E2"],
[data-theme="shift-dark"] [style*="background: #FEE2E2"] {
  background: var(--shift-error-bg) !important;
}

[data-theme="shift-dark"] [style*="background:#FEF3C7"],
[data-theme="shift-dark"] [style*="background: #FEF3C7"],
[data-theme="shift-dark"] [style*="background:#FFFBEB"],
[data-theme="shift-dark"] [style*="background: #FFFBEB"],
[data-theme="shift-dark"] [style*="background:#FFF7ED"],
[data-theme="shift-dark"] [style*="background: #FFF7ED"] {
  background: var(--shift-warning-bg) !important;
}

[data-theme="shift-dark"] [style*="background:#DCFCE7"],
[data-theme="shift-dark"] [style*="background: #DCFCE7"],
[data-theme="shift-dark"] [style*="background:#D1FAE5"],
[data-theme="shift-dark"] [style*="background: #D1FAE5"],
[data-theme="shift-dark"] [style*="background:#F0FDF4"],
[data-theme="shift-dark"] [style*="background: #F0FDF4"] {
  background: var(--shift-success-bg) !important;
}

[data-theme="shift-dark"] [style*="background:#FCE7F3"],
[data-theme="shift-dark"] [style*="background: #FCE7F3"],
[data-theme="shift-dark"] [style*="background:#FDF4FF"],
[data-theme="shift-dark"] [style*="background: #FDF4FF"] {
  background: var(--shift-pink-bg) !important;
}

[data-theme="shift-dark"] [style*="background:#F5F3FF"],
[data-theme="shift-dark"] [style*="background: #F5F3FF"] {
  background: var(--shift-bg-soft) !important;
}

[data-theme="shift-dark"] [style*="background:#FAFAFA"],
[data-theme="shift-dark"] [style*="background: #FAFAFA"],
[data-theme="shift-dark"] [style*="background:#F9FAFB"],
[data-theme="shift-dark"] [style*="background: #F9FAFB"] {
  background: var(--shift-bg-soft) !important;
}

[data-theme="shift-dark"] [style*="border:1px solid #E4E4E7"],
[data-theme="shift-dark"] [style*="border: 1px solid #E4E4E7"],
[data-theme="shift-dark"] [style*="border:1px solid #D1D5DB"],
[data-theme="shift-dark"] [style*="border: 1px solid #D1D5DB"],
[data-theme="shift-dark"] [style*="border:1px solid #E0E0E0"],
[data-theme="shift-dark"] [style*="border: 1px solid #E0E0E0"] {
  border-color: var(--shift-border) !important;
}

[data-theme="shift-dark"] [style*="border-top:1px solid #E4E4E7"],
[data-theme="shift-dark"] [style*="border-top: 1px solid #E4E4E7"],
[data-theme="shift-dark"] [style*="border-top:1px solid #F0F0F0"],
[data-theme="shift-dark"] [style*="border-top: 1px solid #F0F0F0"],
[data-theme="shift-dark"] [style*="border-top:1px solid #E0E0E0"],
[data-theme="shift-dark"] [style*="border-top: 1px solid #E0E0E0"] {
  border-top-color: var(--shift-border) !important;
}

[data-theme="shift-dark"] [style*="border-bottom:1px solid #E4E4E7"],
[data-theme="shift-dark"] [style*="border-bottom: 1px solid #E4E4E7"],
[data-theme="shift-dark"] [style*="border-bottom:1px solid #F0F0F0"],
[data-theme="shift-dark"] [style*="border-bottom: 1px solid #F0F0F0"] {
  border-bottom-color: var(--shift-border) !important;
}

[data-theme="shift-dark"] [style*="border-top:1px dashed #D1D5DB"],
[data-theme="shift-dark"] [style*="border-top: 1px dashed #D1D5DB"] {
  border-top-color: var(--shift-border) !important;
}

[data-theme="shift-dark"] [style*="border:1px solid #FCA5A5"],
[data-theme="shift-dark"] [style*="border: 1px solid #FCA5A5"] {
  border-color: var(--shift-error) !important;
}

[data-theme="shift-dark"] [style*="accent-color:#4F46E5"],
[data-theme="shift-dark"] [style*="accent-color: #4F46E5"],
[data-theme="shift-dark"] [style*="accent-color:#4338CA"],
[data-theme="shift-dark"] [style*="accent-color: #4338CA"],
[data-theme="shift-dark"] [style*="accent-color:#8B2D4F"],
[data-theme="shift-dark"] [style*="accent-color: #8B2D4F"],
[data-theme="shift-dark"] [style*="accent-color:#6D203D"],
[data-theme="shift-dark"] [style*="accent-color: #6D203D"] {
  accent-color: var(--shift-indigo) !important;
}

[data-theme="shift-dark"] svg[stroke="#D1D5DB"] {
  stroke: var(--shift-border) !important;
}

[data-theme="shift-dark"] svg[stroke="#4F46E5"] {
  stroke: var(--shift-indigo) !important;
}

[data-theme="shift-dark"] svg[stroke="#8B2D4F"] {
  stroke: var(--shift-indigo) !important;
}

[data-theme="shift-dark"] svg[stroke="#D97706"] {
  stroke: var(--shift-warning) !important;
}

[data-theme="shift-dark"] svg[stroke="#DC2626"] {
  stroke: var(--shift-error) !important;
}

/* Onboarding */
.ob-hero { padding: 1.5rem; }
.ob-hero-title {
  font-size: 1.75rem; line-height: 1.2; font-weight: 700;
  color: var(--shift-text); margin: 0 0 0.75rem;
}
.ob-hero-desc {
  font-size: 0.9375rem; line-height: 1.7;
  color: var(--shift-muted); max-width: 720px; margin: 0 0 1.5rem;
}
.ob-hero-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ob-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.ob-step { padding: 1.25rem 1.5rem; }
.ob-step-icon {
  width: 36px; height: 36px; border-radius: 0.75rem;
  background: var(--shift-indigo-bg); color: var(--shift-indigo);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.875rem;
}
.ob-step-title {
  font-size: 1rem; font-weight: 600;
  color: var(--shift-text); margin: 0 0 0.5rem;
}
.ob-step-desc {
  font-size: 0.8125rem; line-height: 1.6;
  color: var(--shift-muted); margin: 0;
}

/* Utility classes */
.shift-content-pad { padding: 2rem; }
.shift-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shift-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.shift-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.shift-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.shift-kpi-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* Burger button */
.shift-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--shift-muted);
  flex-shrink: 0;
  border-radius: 0.375rem;
  transition: background 100ms;
}
.shift-burger:hover { background: var(--shift-bg); }

/* Sidebar overlay */
.shift-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 40;
  opacity: 0;
  transition: opacity 200ms;
}

/* Topbar actions wrap */
.shift-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Messages padding */
.shift-messages-pad { padding: 0.75rem 2rem 0; }

/* ── Mobile ≤767px ────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Sidebar: hidden by default on mobile, shown as fixed overlay when open */
  .shift-sidebar {
    display: none;
  }
  .shift-sidebar.is-open {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
  }

  /* Overlay */
  .shift-sidebar-overlay {
    display: block;
    pointer-events: none;
    opacity: 0;
  }
  .shift-sidebar-overlay.is-open {
    pointer-events: auto;
    opacity: 1;
  }

  /* Burger visible */
  .shift-burger { display: flex; }

  /* Topbar: stack title + actions vertically */
  .shift-topbar {
    height: auto;
    min-height: 48px;
    padding: 0.5rem 1rem;
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .shift-topbar-actions {
    flex-wrap: nowrap;
    gap: 0.375rem;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .shift-topbar-actions .shift-btn {
    font-size: 0.75rem;
    padding: 0.3125rem 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* Hide button labels on very small screens, keep icons */
  .shift-topbar-actions .shift-btn svg { flex-shrink: 0; }

  /* Content padding */
  .shift-content-pad { padding: 1rem; }
  .shift-messages-pad { padding: 0.75rem 1rem 0; }

  /* Table scroll */
  .shift-table-wrap { margin: 0 -1px; }
  .shift-table { table-layout: auto; min-width: 500px; }

  /* Form grids collapse */
  .shift-form-grid-2,
  .shift-form-grid-3 { grid-template-columns: 1fr; }

  /* Detail grids collapse */
  .shift-detail-grid { grid-template-columns: 1fr; }

  /* KPI cards collapse */
  .shift-kpi-cards { grid-template-columns: 1fr; }

  /* KPI grid (dashboard) collapse */
  .shift-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .shift-kpi { border-right: none; border-bottom: 1px solid var(--shift-border); }
  .shift-kpi:nth-child(odd) { border-right: 1px solid var(--shift-border); }
  .shift-kpi:nth-last-child(-n+2) { border-bottom: none; }

  /* Prevent iOS zoom on focus (requires font-size >= 16px) */
  .chat-input-bar textarea,
  .shift-input,
  select { font-size: 16px !important; }
}

/* ── Desktop ≥768px ───────────────────────────────────────── */
@media (min-width: 768px) {
  .shift-burger { display: none; }
  .shift-sidebar-overlay { display: none; }
}