/* Mekari Pixel compatibility layer
 * Source: https://storybook.mekari.design/?path=/docs/guides-design-token--page
 * Keep this file loaded last so legacy per-view CSS resolves to one token system.
 */
:root {
  --mp-color-background: #f1f5f9;
  --mp-color-dark: #232933;
  --mp-color-white: #fff;
  --mp-color-gray-25: #f8f9fb;
  --mp-color-gray-50: #edf0f2;
  --mp-color-gray-100: #d0d6dd;
  --mp-color-gray-400: #8b95a5;
  --mp-color-gray-600: #626b79;
  --mp-color-blue-50: #eaecfb;
  --mp-color-blue-100: #d6dfff;
  --mp-color-blue-400: #4b61dd;
  --mp-color-blue-500: #1c44d5;
  --mp-color-blue-700: #0031be;
  --mp-color-green-50: #e8f5eb;
  --mp-color-green-500: #4fb262;
  --mp-color-green-700: #3c914d;
  --mp-color-orange-50: #fbf3dd;
  --mp-color-orange-500: #de9400;
  --mp-color-orange-700: #db8000;
  --mp-color-red-50: #fdecee;
  --mp-color-red-500: #c83e39;
  --mp-color-red-700: #ab3129;
  --mp-font-body: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mp-font-xs: .625rem;
  --mp-font-sm: .75rem;
  --mp-font-md: .875rem;
  --mp-font-lg: 1rem;
  --mp-font-xl: 1.25rem;
  --mp-font-2xl: 1.5rem;
  --mp-weight-regular: 400;
  --mp-weight-semibold: 600;
  --mp-line-sm: 1;
  --mp-line-md: 1.4;
  --mp-line-lg: 1.5;
  --mp-radius-xs: .125rem;
  --mp-radius-sm: .25rem;
  --mp-radius-md: .375rem;
  --mp-radius-lg: .5rem;
  --mp-radius-xl: .75rem;
  --mp-shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --mp-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --mp-shadow-outline: 0 0 0 3px #e0eeff;

  /* Legacy aliases */
  --bg: var(--mp-color-background) !important;
  --sidebar-bg: var(--mp-color-white) !important;
  --sidebar-border: var(--mp-color-gray-100) !important;
  --topbar-border: var(--mp-color-gray-100) !important;
  --accent: var(--mp-color-blue-400) !important;
  --accent-hover: var(--mp-color-blue-500) !important;
  --accent-light: var(--mp-color-blue-50) !important;
  --text-dark: var(--mp-color-dark) !important;
  --text-body: var(--mp-color-gray-600) !important;
  --text-muted: var(--mp-color-gray-400) !important;
  --card-border: var(--mp-color-gray-100) !important;
  --card-radius: var(--mp-radius-lg) !important;
  --input-border: var(--mp-color-gray-100) !important;
  --input-focus: var(--mp-color-blue-400) !important;
  --divider: var(--mp-color-gray-100) !important;
  --green: var(--mp-color-green-700) !important;
  --green-light: var(--mp-color-green-50) !important;
  --orange: var(--mp-color-orange-700) !important;
  --orange-light: var(--mp-color-orange-50) !important;
  --red: var(--mp-color-red-700) !important;
  --red-light: var(--mp-color-red-50) !important;
}

html { font-size: 16px !important; }
*, *::before, *::after { box-sizing: border-box; }
body, input, select, textarea, button { font-family: var(--mp-font-body) !important; }
body { margin: 0; color: var(--mp-color-dark) !important; background: var(--mp-color-background) !important; font-size: var(--mp-font-md) !important; line-height: var(--mp-line-md) !important; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { color: var(--mp-color-dark) !important; font-weight: var(--mp-weight-semibold) !important; letter-spacing: -.025em !important; line-height: 1.3 !important; }
h1 { font-size: var(--mp-font-2xl) !important; }
h2 { font-size: var(--mp-font-xl) !important; }
h3,h4,h5,h6 { font-size: var(--mp-font-lg) !important; }
p { line-height: var(--mp-line-lg); }
small,.form-hint,.breadcrumb { font-size: var(--mp-font-sm) !important; color: var(--mp-color-gray-400) !important; }
a { color: var(--mp-color-blue-400); }
a:hover { color: var(--mp-color-blue-500); }

/* Shell */
.sidebar { background: var(--mp-color-white) !important; border-right: 1px solid var(--mp-color-gray-100) !important; box-shadow: none !important; }
.sidebar-brand,.topbar { background: var(--mp-color-white) !important; border-color: var(--mp-color-gray-100) !important; }
.brand-logo,.auth-mark { background: var(--mp-color-blue-400) !important; color: var(--mp-color-white) !important; border-radius: var(--mp-radius-lg) !important; }
.nav-section-label { color: var(--mp-color-gray-400) !important; font-size: var(--mp-font-xs) !important; font-weight: var(--mp-weight-semibold) !important; }
.nav-link { color: var(--mp-color-gray-600) !important; border-radius: var(--mp-radius-md) !important; font-size: var(--mp-font-md) !important; font-weight: var(--mp-weight-regular) !important; }
.nav-link:hover { background: var(--mp-color-gray-50) !important; color: var(--mp-color-blue-500) !important; }
.nav-link.active { background: var(--mp-color-blue-50) !important; color: var(--mp-color-blue-500) !important; font-weight: var(--mp-weight-semibold) !important; }
.nav-icon { color: currentColor !important; }

/* Page hierarchy: one canvas, cards only for meaningful groups */
.page-header { padding: 1.5rem 1.5rem 1rem !important; margin: 0 !important; background: transparent !important; }
.page-header h1 { margin: 0 !important; font-size: var(--mp-font-2xl) !important; }
.page-content { margin: 0 1.5rem 2rem !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.card,.card-table,.card-filter,.filter-card,.card-form,.stat-card,.summary-card,.slot-card,.strategy-card,.type-card,.tl-panel,.flow-board {
  border: 1px solid var(--mp-color-gray-100) !important;
  border-radius: var(--mp-radius-lg) !important;
  background: var(--mp-color-white) !important;
  box-shadow: none !important;
}
.card + .card,.card-form + .card-form { margin-top: 1rem; }
.card-filter,.filter-card,.card-form,.strategy-card,.type-card,.tl-panel { padding: 1rem !important; }
.stat-card,.summary-card { padding: 1rem !important; }
.form-section-title { margin: 0 0 1rem !important; padding: 0 0 .75rem !important; border-bottom: 1px solid var(--mp-color-gray-50) !important; color: var(--mp-color-dark) !important; font-size: var(--mp-font-md) !important; font-weight: var(--mp-weight-semibold) !important; letter-spacing: 0 !important; text-transform: none !important; }
.form-section-title i { width: auto !important; height: auto !important; margin-right: .375rem !important; background: transparent !important; color: var(--mp-color-blue-400) !important; }

/* Forms */
.form-group label,.card-filter label,.form-label,label { display: block; margin-bottom: .375rem; color: var(--mp-color-dark) !important; font-size: var(--mp-font-sm) !important; font-weight: var(--mp-weight-semibold) !important; letter-spacing: 0 !important; text-transform: none !important; }
.input-wrap,.form-control,.form-select,input:not([type=checkbox]):not([type=radio]),select,textarea {
  min-height: 2.375rem !important;
  border: 1px solid var(--mp-color-gray-100) !important;
  border-radius: var(--mp-radius-md) !important;
  background: var(--mp-color-white) !important;
  color: var(--mp-color-dark) !important;
  font-size: var(--mp-font-md) !important;
  line-height: var(--mp-line-md) !important;
  box-shadow: none !important;
}
input:not([type=checkbox]):not([type=radio]),select,textarea { padding: .5rem .75rem !important; }
textarea { min-height: 5rem !important; resize: vertical; }
input::placeholder,textarea::placeholder { color: var(--mp-color-gray-400) !important; opacity: 1; }
.input-wrap:focus-within,.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus { border-color: var(--mp-color-blue-400) !important; box-shadow: var(--mp-shadow-outline) !important; outline: 0 !important; }
input:disabled,select:disabled,textarea:disabled { background: var(--mp-color-gray-50) !important; color: var(--mp-color-gray-400) !important; cursor: not-allowed; }
input[type=checkbox],input[type=radio] { accent-color: var(--mp-color-blue-400); }

/* Pixel button sizes and variants */
button,.btn,.btn-primary,.btn-primary-sm,.btn-outline-sm,.btn-outline-primary,.btn-secondary,.btn-sm,.btn-light,.btn-danger,.btn-danger-sm,.btn-scan,.btn-signin,.btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  min-width: 2.5rem;
  height: 2.375rem !important;
  min-height: 2.375rem !important;
  padding: 0 1rem !important;
  border: 1px solid transparent !important;
  border-radius: var(--mp-radius-md) !important;
  font-size: var(--mp-font-md) !important;
  font-weight: var(--mp-weight-semibold) !important;
  line-height: var(--mp-line-md) !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.btn-sm,.btn-primary-sm,.btn-outline-sm,.btn-danger-sm { height: 1.875rem !important; min-height: 1.875rem !important; min-width: 2rem; padding: 0 .75rem !important; font-weight: var(--mp-weight-regular) !important; border-radius: var(--mp-radius-sm) !important; }
.btn-primary,.btn-primary-sm,.btn.btn-primary,button[type=submit]:not(.btn-outline-sm):not(.btn-danger) { color: var(--mp-color-white) !important; background: var(--mp-color-blue-400) !important; border-color: var(--mp-color-blue-400) !important; }
.btn-primary:hover,.btn-primary-sm:hover,.btn.btn-primary:hover,button[type=submit]:not(.btn-outline-sm):not(.btn-danger):hover { background: var(--mp-color-blue-500) !important; border-color: var(--mp-color-blue-500) !important; }
.btn-outline-sm,.btn-outline-primary,.btn-secondary,.btn.btn-light { color: var(--mp-color-blue-400) !important; background: var(--mp-color-white) !important; border-color: var(--mp-color-gray-100) !important; }
.btn-outline-sm:hover,.btn-outline-primary:hover,.btn-secondary:hover,.btn.btn-light:hover { background: var(--mp-color-blue-50) !important; border-color: var(--mp-color-blue-50) !important; }
.btn-danger,.btn-danger-sm,.btn.btn-danger { color: var(--mp-color-white) !important; background: var(--mp-color-red-500) !important; border-color: var(--mp-color-red-500) !important; }
.btn-danger:hover,.btn-danger-sm:hover,.btn.btn-danger:hover { background: var(--mp-color-red-700) !important; border-color: var(--mp-color-red-700) !important; }
.btn-scan { color: var(--mp-color-gray-600) !important; background: transparent !important; border-color: transparent !important; font-weight: var(--mp-weight-regular) !important; }
.btn-scan:hover { background: var(--mp-color-gray-50) !important; border-color: var(--mp-color-gray-50) !important; }
.btn-signin { color: var(--mp-color-white) !important; background: var(--mp-color-blue-400) !important; border-color: var(--mp-color-blue-400) !important; }
.btn-signin:hover { background: var(--mp-color-blue-500) !important; border-color: var(--mp-color-blue-500) !important; }
.btn-icon { width: 2.375rem !important; min-width: 2.375rem !important; padding: 0 !important; color: var(--mp-color-gray-600) !important; background: transparent !important; border-color: transparent !important; }
.btn-icon:hover { background: var(--mp-color-gray-50) !important; }
button:focus-visible,.btn:focus-visible { outline: 0 !important; box-shadow: var(--mp-shadow-outline) !important; }
button:disabled,.btn.disabled,.btn[disabled] { color: var(--mp-color-gray-400) !important; background: var(--mp-color-gray-50) !important; border-color: var(--mp-color-gray-50) !important; box-shadow: none !important; cursor: not-allowed !important; opacity: 1 !important; }

/* Tables */
.card-table { overflow: auto !important; }
.card-table table,table { width: 100%; border-collapse: collapse; background: var(--mp-color-white); }
.card-table thead tr,table thead tr { background: var(--mp-color-gray-25) !important; }
.card-table th,table th { padding: .625rem .75rem !important; border-bottom: 1px solid var(--mp-color-gray-100) !important; color: var(--mp-color-gray-600) !important; font-size: var(--mp-font-sm) !important; font-weight: var(--mp-weight-semibold) !important; line-height: var(--mp-line-md) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; }
.card-table td,table td { padding: .75rem !important; border-bottom: 1px solid var(--mp-color-gray-50) !important; color: var(--mp-color-dark) !important; font-size: var(--mp-font-md) !important; line-height: var(--mp-line-md) !important; vertical-align: middle; }
.card-table tbody tr:hover,table tbody tr:hover { background: var(--mp-color-gray-25) !important; }
.card-table tbody tr:last-child td,table tbody tr:last-child td { border-bottom: 0 !important; }
.page-content td small,.page-content td [class*=meta],.page-content .form-hint { font-size: var(--mp-font-sm) !important; line-height: var(--mp-line-md) !important; }
.page-content [class*=subtitle],.page-content [class*=description],.page-content [class*=caption] { color: var(--mp-color-gray-400) !important; font-size: var(--mp-font-sm) !important; line-height: var(--mp-line-md) !important; }

/* Status */
.badge,.badge-loc,.badge-neutral,.badge-success,.badge-danger,.badge-warning,[class^=badge-] { display: inline-flex; align-items: center; gap: .25rem; min-height: 1.5rem; padding: .25rem .5rem !important; border: 0 !important; border-radius: 624.938rem !important; font-size: var(--mp-font-sm) !important; font-weight: var(--mp-weight-semibold) !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; }
.badge-neutral { background: var(--mp-color-gray-50) !important; color: var(--mp-color-gray-600) !important; }
.badge-success { background: var(--mp-color-green-50) !important; color: var(--mp-color-green-700) !important; }
.badge-warning { background: var(--mp-color-orange-50) !important; color: var(--mp-color-orange-700) !important; }
.badge-danger { background: var(--mp-color-red-50) !important; color: var(--mp-color-red-700) !important; }
.badge-loc { background: var(--mp-color-blue-50) !important; color: var(--mp-color-blue-500) !important; }
.alert,.alert-flash,.tl-error { padding: .75rem 1rem !important; border-radius: var(--mp-radius-md) !important; font-size: var(--mp-font-md) !important; font-weight: var(--mp-weight-regular) !important; }

/* Modals and empty states */
.modal-content { border: 1px solid var(--mp-color-gray-100) !important; border-radius: var(--mp-radius-xl) !important; background: var(--mp-color-white) !important; box-shadow: var(--mp-shadow-md) !important; }
.modal-header,.modal-footer { padding: 1rem !important; border-color: var(--mp-color-gray-100) !important; }
.modal-body { padding: 1rem !important; }
.empty-state,.wms-empty-inline { min-height: 12rem !important; padding: 2rem 1rem !important; color: var(--mp-color-gray-400) !important; font-size: var(--mp-font-md) !important; }

/* Control Center: lighter visual hierarchy and fewer nested-card effects */
.control-center-header { padding: 1.25rem 1.5rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.control-center-header::after,.control-center-header-icon { display: none !important; }
.control-center-header h1 { font-size: var(--mp-font-2xl) !important; }
.control-center-header p { margin-top: .5rem !important; font-size: var(--mp-font-md) !important; }
.control-center-kicker { color: var(--mp-color-blue-400) !important; font-size: var(--mp-font-xs) !important; font-weight: var(--mp-weight-semibold) !important; }
.flow-board { padding: 1rem !important; }
.flow-board-head { margin-bottom: 1rem !important; }
.flow-board-head h2 { font-size: var(--mp-font-lg) !important; }
.tire-flow .flow-step { min-height: 5rem !important; padding: .75rem !important; border: 1px solid var(--mp-color-gray-100) !important; border-top-width: 1px !important; border-radius: var(--mp-radius-md) !important; background: var(--mp-color-gray-25) !important; }
.tire-flow .flow-step > span { color: var(--mp-color-dark) !important; font-size: var(--mp-font-sm) !important; font-weight: var(--mp-weight-semibold) !important; }
.tire-flow .flow-step b { border-radius: var(--mp-radius-sm) !important; }
.tire-flow .flow-step.prepare b { background: var(--mp-color-blue-50) !important; color: var(--mp-color-blue-500) !important; }
.tire-flow .flow-step.reject b { background: var(--mp-color-red-50) !important; color: var(--mp-color-red-700) !important; }
.tire-flow .flow-step.accept b { background: var(--mp-color-green-50) !important; color: var(--mp-color-green-700) !important; }
.tire-flow .flow-step.finish b { background: var(--mp-color-blue-50) !important; color: var(--mp-color-blue-500) !important; }
.tl-title { margin: 1.5rem 0 .75rem !important; color: var(--mp-color-dark) !important; font-size: var(--mp-font-lg) !important; font-weight: var(--mp-weight-semibold) !important; letter-spacing: -.025em !important; text-transform: none !important; }
.control-strip > div,.manifest-checks label,.suggestion,.waybill { border-radius: var(--mp-radius-md) !important; box-shadow: none !important; }
.control-strip small { font-size: var(--mp-font-xs) !important; }
.control-strip b,.tl-help { font-size: var(--mp-font-md) !important; }

/* Authentication pages share the same tokens */
.auth-shell { background: var(--mp-color-white) !important; }
.auth-visual::before { background: linear-gradient(90deg,rgba(3,20,38,.94),rgba(7,31,55,.72) 58%,rgba(7,31,55,.45)) !important; }
.auth-copy { max-width: 44rem !important; }
.auth-copy h1 { margin: 1.75rem 0 1rem !important; color: var(--mp-color-white) !important; font-size: clamp(2.5rem,4.25vw,4rem) !important; line-height: 1.08 !important; letter-spacing: -.05em !important; }
.auth-copy h1 span { margin-top: .25rem; color: #40c3ff !important; }
.auth-copy > p { color: rgba(255,255,255,.72) !important; font-size: var(--mp-font-lg) !important; line-height: 1.7 !important; }
.auth-kicker { border-color: rgba(64,195,255,.68) !important; border-radius: var(--mp-radius-md) !important; color: #8bdcff !important; font-size: var(--mp-font-sm) !important; }
.auth-features b { color: var(--mp-color-white) !important; font-size: var(--mp-font-sm) !important; }
.auth-features small { color: rgba(255,255,255,.6) !important; font-size: var(--mp-font-sm) !important; }
.auth-features span { border-left-color: #40c3ff !important; }
.auth-panel { position: relative; background: var(--mp-color-white) !important; }
.auth-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: .25rem; background: var(--mp-color-blue-400); }
.auth-card { width: min(100%,30rem) !important; color: var(--mp-color-dark) !important; font-family: var(--mp-font-body) !important; }
.auth-brand { margin-bottom: 3rem !important; }
.auth-brand strong { color: var(--mp-color-dark) !important; font-size: var(--mp-font-xl) !important; }
.auth-brand small { margin-top: .125rem !important; color: var(--mp-color-gray-400) !important; font-size: var(--mp-font-sm) !important; letter-spacing: .025em !important; }
.auth-mark { width: 3rem !important; height: 3rem !important; border-radius: var(--mp-radius-lg) !important; box-shadow: 0 0 0 .25rem var(--mp-color-blue-50) !important; }
.auth-card h2 { margin-bottom: .5rem !important; font-size: var(--mp-font-2xl) !important; line-height: 1.3 !important; }
.auth-intro { margin-bottom: 2rem !important; color: var(--mp-color-gray-400) !important; font-size: var(--mp-font-md) !important; }
.auth-card form > div { margin-bottom: 1.25rem !important; }
.auth-card label { margin-bottom: .5rem !important; color: var(--mp-color-dark) !important; font-size: var(--mp-font-sm) !important; }
.auth-card .input-group { position: relative !important; display: block !important; }
.auth-card .input-group-text { position: absolute !important; z-index: 2 !important; inset: 0 auto 0 0 !important; display: grid !important; place-items: center !important; width: 2.75rem !important; height: 2.875rem !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--mp-color-gray-400) !important; pointer-events: none !important; }
.auth-card .input-group-text i { display: block !important; font-size: var(--mp-font-lg) !important; line-height: 1 !important; }
.auth-card input,.auth-card input.form-control { width: 100% !important; height: 2.875rem !important; min-height: 2.875rem !important; padding: .625rem .875rem .625rem 2.75rem !important; border: 1px solid var(--mp-color-gray-100) !important; border-radius: var(--mp-radius-md) !important; background: var(--mp-color-white) !important; color: var(--mp-color-dark) !important; font-size: var(--mp-font-md) !important; line-height: var(--mp-line-md) !important; }
.auth-card input:focus { border-color: var(--mp-color-blue-400) !important; box-shadow: var(--mp-shadow-outline) !important; }
.auth-card input:focus + *,.auth-card .input-group:focus-within .input-group-text { color: var(--mp-color-blue-400) !important; }
.auth-card input::placeholder { color: var(--mp-color-gray-400) !important; opacity: 1 !important; }
.auth-card button[type=submit] { width: 100% !important; height: 2.875rem !important; margin-top: .25rem !important; border-radius: var(--mp-radius-md) !important; }
.auth-foot { margin-top: 2rem !important; padding-top: 1.25rem !important; border-color: var(--mp-color-gray-100) !important; color: var(--mp-color-gray-400) !important; font-size: var(--mp-font-sm) !important; }
.auth-security { gap: .375rem !important; }
.trial-option { display: flex !important; align-items: flex-start !important; gap: .75rem !important; margin: 1rem 0 !important; padding: 1rem !important; border: 1px solid var(--mp-color-blue-100) !important; border-radius: var(--mp-radius-lg) !important; background: var(--mp-color-blue-50) !important; cursor: pointer; }
.trial-option input { flex: 0 0 auto; width: 1rem !important; height: 1rem !important; min-height: 1rem !important; margin: .125rem 0 0 !important; padding: 0 !important; }
.trial-option span { display: grid; gap: .25rem; }
.trial-option b { color: var(--mp-color-dark); font-size: var(--mp-font-md); }
.trial-option small { color: var(--mp-color-gray-600) !important; line-height: var(--mp-line-md); }
.trial-badge { display: inline-flex; margin-left: .375rem; padding: .125rem .375rem; border-radius: 624.938rem; background: var(--mp-color-orange-50); color: var(--mp-color-orange-700); font-size: var(--mp-font-xs); font-weight: var(--mp-weight-semibold); line-height: 1.4; }

@media (max-width: 768px) {
  .page-header { padding: 1rem .75rem .75rem !important; }
  .page-content { margin: 0 .75rem 1.25rem !important; }
  .card-filter,.filter-card,.card-form,.strategy-card,.type-card,.tl-panel { padding: .75rem !important; }
  .form-row { gap: .75rem !important; }
  .card-table th,.card-table td,table th,table td { padding: .625rem !important; }
  .auth-panel { padding: 1.5rem !important; }
  .auth-brand { margin-bottom: 2.5rem !important; }
}