/* =========================================================================
   MODAL Hub Design System — Theme Tokens
   Source of truth for colors, type, spacing, radius, shadow.
   Aliases for legacy --color-*, --bg-*, --text-* kept so existing views
   keep rendering while the overhaul lands.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root,
[data-theme="light"] {
  color-scheme: light;

  /* ---- Navy ramp (primary brand) ---- */
  --mh-navy-900: #0F1A2E;
  --mh-navy-800: #1B2A4A;
  --mh-navy-700: #243656;
  --mh-navy-600: #334155;
  --mh-navy-500: #475569;

  /* ---- Orange ramp (accent) ---- */
  --mh-orange-700: #8C5A14;
  --mh-orange-600: #D4841F;
  --mh-orange-500: #E8952C;
  --mh-orange-400: #F1A95D;
  --mh-orange-100: #FDF4E7;

  /* ---- Slate / neutral ramp ---- */
  --mh-slate-900: #0F172A;
  --mh-slate-800: #1E293B;
  --mh-slate-700: #334155;
  --mh-slate-600: #475569;
  --mh-slate-500: #64748B;
  --mh-slate-400: #94A3B8;
  --mh-slate-300: #CBD5E1;
  --mh-slate-200: #E2E8F0;
  --mh-slate-100: #F1F5F9;
  --mh-slate-50:  #F8FAFC;
  --mh-white:     #FFFFFF;
  --mh-border:    #E5E7EB;

  /* ---- Semantic status ---- */
  --mh-success-bg:     #ECFDF5;
  --mh-success-fg:     #047857;
  --mh-success-border: #A7F3D0;

  --mh-warning-bg:     #FFFBEB;
  --mh-warning-fg:     #92400E;
  --mh-warning-border: #FDE68A;

  --mh-danger-bg:      #FEF2F2;
  --mh-danger-fg:      #9F1239;
  --mh-danger-border:  #FECACA;

  --mh-info-bg:        #E0F2FE;
  --mh-info-fg:        #075985;
  --mh-info-border:    #BAE6FD;

  --mh-neutral-bg:     #F1F5F9;
  --mh-neutral-fg:     #334155;
  --mh-neutral-border: #E2E8F0;

  /* ---- Entity accents ---- */
  --mh-entity-modalis:      #1B2A4A;
  --mh-entity-deltarail:    #00A7E1;
  --mh-entity-airflow:      #0065AE;
  --mh-entity-cryologistics:#0FA3B1;
  --mh-entity-traix:        #E8952C;
  --mh-entity-altech:       #475569;

  /* ---- Ticket type tokens (SAP / Internal / Claim) ---- */
  --mh-type-sap-bg:       #EEF2FF;
  --mh-type-sap-fg:       #3730A3;
  --mh-type-sap-border:   #6366F133;
  --mh-type-sap-accent:   #6366F1;

  --mh-type-int-bg:       #ECFEFF;
  --mh-type-int-fg:       #155E75;
  --mh-type-int-border:   #0891B233;
  --mh-type-int-accent:   #0891B2;

  --mh-type-claim-bg:     #FDF4E7;
  --mh-type-claim-fg:     #8C5A14;
  --mh-type-claim-border: #E8952C33;
  --mh-type-claim-accent: #E8952C;

  /* ---- Semantic surfaces & text ---- */
  --mh-fg-primary:  var(--mh-navy-800);
  --mh-fg-body:     var(--mh-slate-700);
  --mh-fg-muted:    var(--mh-slate-500);
  --mh-fg-subtle:   var(--mh-slate-400);
  --mh-fg-inverse:  var(--mh-white);

  --mh-bg-page:     var(--mh-slate-50);
  --mh-bg-surface:  var(--mh-white);
  --mh-bg-subtle:   var(--mh-slate-100);
  --mh-bg-sidebar:  var(--mh-white);
  --mh-bg-topbar:   var(--mh-white);

  --mh-border-default: var(--mh-border);
  --mh-border-strong:  var(--mh-slate-300);
  --mh-border-muted:   var(--mh-slate-100);

  --mh-accent:         var(--mh-orange-500);
  --mh-accent-hover:   var(--mh-orange-600);
  --mh-accent-soft-bg: var(--mh-orange-100);
  --mh-accent-soft-fg: var(--mh-orange-700);

  --mh-primary:        var(--mh-navy-800);
  --mh-primary-hover:  var(--mh-navy-700);

  --mh-focus-ring:     rgba(232, 149, 44, 0.35);

  /* ---- Typography ---- */
  --mh-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, Helvetica, Arial, sans-serif;
  --mh-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                   Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --mh-fw-regular:  400;
  --mh-fw-medium:   500;
  --mh-fw-semibold: 600;
  --mh-fw-bold:     700;

  /* Unified type scale — legible at every step, no sub-11px text.
     The app reads data-dense rows so we lean on 13 / 14px for body-ish
     content and reserve 10.5px strictly for uppercase eyebrow labels. */
  --mh-fs-display: 2.25rem;   /* 36px */
  --mh-fs-h1:      1.625rem;  /* 26px */
  --mh-fs-h2:      1.25rem;   /* 20px */
  --mh-fs-h3:      1.0625rem; /* 17px */
  --mh-fs-h4:      1rem;      /* 16px */
  --mh-fs-body:    0.9375rem; /* 15px */
  --mh-fs-md:      0.875rem;  /* 14px — default for table rows / forms */
  --mh-fs-sm:      0.8125rem; /* 13px — secondary meta */
  --mh-fs-xs:      0.75rem;   /* 12px — smallest comfortable size */
  --mh-fs-meta:    0.65625rem;/* 10.5px — uppercase eyebrow labels only */

  --mh-lh-tight:   1.25;
  --mh-lh-snug:    1.4;
  --mh-lh-normal:  1.55;
  --mh-lh-relaxed: 1.7;

  --mh-tracking-tight:  -0.01em;
  --mh-tracking-normal: 0;
  --mh-tracking-wide:   0.04em;
  --mh-tracking-wider:  0.08em;

  /* ---- Spacing ---- */
  --mh-space-1: 4px;
  --mh-space-2: 8px;
  --mh-space-3: 12px;
  --mh-space-4: 16px;
  --mh-space-5: 24px;
  --mh-space-6: 32px;
  --mh-space-7: 48px;
  --mh-space-8: 64px;

  /* ---- Radius ---- */
  --mh-radius-xs:   4px;
  --mh-radius-sm:   6px;
  --mh-radius-md:   8px;
  --mh-radius-lg:   10px;
  --mh-radius-xl:   14px;
  --mh-radius-pill: 9999px;

  /* ---- Shadows ---- */
  --mh-shadow-card:       0 2px 8px -2px rgba(0, 0, 0, 0.08);
  --mh-shadow-card-hover: 0 4px 16px -4px rgba(15, 26, 46, 0.12);
  --mh-shadow-raised:     0 10px 40px -10px rgba(0, 0, 0, 0.15),
                          0 1px 3px rgba(0, 0, 0, 0.06);
  --mh-shadow-inset:      inset 0 -1px 0 var(--mh-slate-100);

  /* ---- Motion ---- */
  --mh-transition-fast:  120ms cubic-bezier(0.2, 0, 0, 1);
  --mh-transition-base:  180ms cubic-bezier(0.2, 0, 0, 1);
  --mh-transition-slow:  260ms cubic-bezier(0.2, 0, 0, 1);

  /* =======================================================================
     LEGACY ALIASES — preserve old variable names so existing views and
     Bootstrap overrides keep working. All pointed at the MH palette.
     ======================================================================= */

  --font-sans: var(--mh-font-sans);
  --font-mono: var(--mh-font-mono);

  --font-weight-regular:  var(--mh-fw-regular);
  --font-weight-medium:   var(--mh-fw-medium);
  --font-weight-semibold: var(--mh-fw-semibold);
  --font-weight-bold:     var(--mh-fw-bold);

  --font-size-h1:    var(--mh-fs-h1);
  --font-size-h2:    var(--mh-fs-h2);
  --font-size-h3:    var(--mh-fs-h3);
  --font-size-h4:    var(--mh-fs-h4);
  --font-size-h5:    1rem;
  --font-size-h6:    0.875rem;
  --font-size-body:  var(--mh-fs-body);
  --font-size-small: var(--mh-fs-sm);
  --font-size-mono:  var(--mh-fs-sm);

  --line-height-tight:   var(--mh-lh-tight);
  --line-height-normal:  var(--mh-lh-normal);
  --line-height-relaxed: var(--mh-lh-relaxed);

  --space-1: var(--mh-space-1);
  --space-2: var(--mh-space-2);
  --space-3: var(--mh-space-3);
  --space-4: var(--mh-space-4);
  --space-5: var(--mh-space-5);
  --space-6: var(--mh-space-6);
  --space-7: var(--mh-space-7);

  --radius-xs:   var(--mh-radius-xs);
  --radius-sm:   var(--mh-radius-sm);
  --radius-md:   var(--mh-radius-md);
  --radius-lg:   var(--mh-radius-lg);
  --radius-pill: var(--mh-radius-pill);

  --shadow-0: none;
  --shadow-1: var(--mh-shadow-card);
  --shadow-2: var(--mh-shadow-card-hover);
  --shadow-3: var(--mh-shadow-raised);

  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  --bp-sm: 640px;  --bp-md: 900px;  --bp-lg: 1200px; --bp-xl: 1440px;
  --container-sm: 640px; --container-md: 900px;
  --container-lg: 1200px; --container-xl: 1440px;

  --transition-fast: var(--mh-transition-fast);
  --transition-base: var(--mh-transition-base);
  --transition-slow: var(--mh-transition-slow);
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);

  /* Neutral ramp (legacy names → slate) */
  --neutral-0:   var(--mh-white);
  --neutral-25:  var(--mh-slate-50);
  --neutral-50:  var(--mh-slate-50);
  --neutral-100: var(--mh-slate-100);
  --neutral-200: var(--mh-slate-200);
  --neutral-300: var(--mh-slate-300);
  --neutral-400: var(--mh-slate-400);
  --neutral-500: var(--mh-slate-500);
  --neutral-600: var(--mh-slate-600);
  --neutral-700: var(--mh-slate-700);
  --neutral-800: var(--mh-navy-800);
  --neutral-900: var(--mh-navy-900);

  /* Primary = navy (legacy --color-primary kept for Bootstrap buttons/links) */
  --primary-50:  #EEF0F6;
  --primary-100: #D3D9E6;
  --primary-200: #A7B2CB;
  --primary-300: #7B8CB0;
  --primary-400: #4F6796;
  --primary-500: var(--mh-navy-800);
  --primary-600: var(--mh-navy-700);
  --primary-700: var(--mh-navy-900);

  --secondary-500: var(--mh-orange-500);
  --success-500:   var(--mh-success-fg);
  --warning-500:   var(--mh-warning-fg);
  --danger-500:    var(--mh-danger-fg);
  --info-500:      var(--mh-info-fg);

  --color-primary:   var(--mh-primary);
  --color-secondary: var(--mh-accent);
  --color-success:   var(--mh-success-fg);
  --color-warning:   var(--mh-warning-fg);
  --color-danger:    var(--mh-danger-fg);
  --color-info:      var(--mh-info-fg);

  --bg-app:           var(--mh-bg-page);
  --bg-surface:       var(--mh-bg-surface);
  --bg-surface-raised:var(--mh-bg-surface);
  --bg-subtle:        var(--mh-bg-subtle);
  --bg-muted:         var(--mh-slate-100);
  --bg-inverse:       var(--mh-navy-800);

  --text-primary:     var(--mh-fg-primary);
  --text-secondary:   var(--mh-fg-body);
  --text-muted:       var(--mh-fg-muted);
  --text-on-inverse:  var(--mh-white);

  --border-default:   var(--mh-border-default);
  --border-strong:    var(--mh-border-strong);

  --state-hover:       rgba(27, 42, 74, 0.06);
  --state-active:      rgba(27, 42, 74, 0.12);
  --state-selected:    var(--mh-orange-100);
  --state-disabled-bg: var(--mh-slate-100);
  --state-disabled-text: var(--mh-slate-400);
  --state-focus-ring:  var(--mh-orange-500);
  --state-focus-shadow:0 0 0 3px var(--mh-focus-ring);

  --bg-primary-subtle: var(--mh-orange-100);
  --bg-success-subtle: var(--mh-success-bg);
  --bg-warning-subtle: var(--mh-warning-bg);
  --bg-danger-subtle:  var(--mh-danger-bg);
  --bg-info-subtle:    var(--mh-info-bg);

  --text-primary-subtle: var(--mh-orange-700);
  --text-success-subtle: var(--mh-success-fg);
  --text-warning-subtle: var(--mh-warning-fg);
  --text-danger-subtle:  var(--mh-danger-fg);
  --text-info-subtle:    var(--mh-info-fg);

  --outline-default: 2px solid var(--state-focus-ring);

  /* Layout sizing */
  --topbar-height: 56px;
  --sidebar-width: 232px;
  --sidebar-width-collapsed: 64px;

  /* Density defaults */
  --control-height: 38px;
  --control-padding-x: 12px;
  --control-padding-y: 8px;
  --card-padding: 18px;
  --table-cell-padding-y: 12px;
  --table-cell-padding-x: 14px;
  --nav-item-padding-y: 8px;
  --nav-item-padding-x: 10px;
}

/* ==========================================================================
   Base reset & defaults
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--mh-bg-page);
  color: var(--mh-fg-body);
  font-family: var(--mh-font-sans);
  font-size: var(--mh-fs-body);
  line-height: var(--mh-lh-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--topbar-height);
}

/* Force DM Sans inheritance on elements that browsers default to
   platform fonts (form controls, buttons, tables). */
button, input, select, textarea, optgroup {
  font-family: var(--mh-font-sans);
  font-size: var(--mh-fs-md);
  line-height: var(--mh-lh-normal);
  color: inherit;
}

/* Table text: legible 13–14px rows, never the browser default 16px */
table { font-size: var(--mh-fs-md); line-height: var(--mh-lh-snug); }
th    { font-weight: var(--mh-fw-semibold); }

/* Utility text scale — use these classes instead of inline font-size */
.mh-text-meta    { font-size: var(--mh-fs-meta); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--mh-fw-bold); }
.mh-text-xs      { font-size: var(--mh-fs-xs);   line-height: var(--mh-lh-snug); }
.mh-text-sm      { font-size: var(--mh-fs-sm);   line-height: var(--mh-lh-snug); }
.mh-text-md      { font-size: var(--mh-fs-md);   line-height: var(--mh-lh-normal); }
.mh-text-body    { font-size: var(--mh-fs-body); line-height: var(--mh-lh-normal); }
.mh-text-lg      { font-size: var(--mh-fs-h4);   line-height: var(--mh-lh-snug);   font-weight: var(--mh-fw-semibold); }
.mh-text-num     { font-family: var(--mh-font-mono); font-variant-numeric: tabular-nums; }
.mh-text-strong  { font-weight: var(--mh-fw-semibold); color: var(--mh-fg-primary); }
.mh-text-muted   { color: var(--mh-fg-muted); }
.mh-text-danger  { color: var(--mh-danger-fg); }
.mh-text-success { color: var(--mh-success-fg); }

img, svg { display: block; max-width: 100%; }

a {
  color: var(--mh-primary);
  text-decoration: none;
  transition: color var(--mh-transition-fast);
}
a:hover { color: var(--mh-accent); text-decoration: none; }

code, pre, .mono {
  font-family: var(--mh-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--mh-fs-sm);
}

::selection { background: var(--mh-accent-soft-bg); color: var(--mh-fg-primary); }

:focus-visible {
  outline: var(--outline-default);
  outline-offset: 2px;
  box-shadow: var(--state-focus-shadow);
}
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

[disabled],
[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--mh-fg-primary);
  font-family: var(--mh-font-sans);
  font-weight: var(--mh-fw-semibold);
  letter-spacing: var(--mh-tracking-tight);
}
h1, .h1 { font-size: var(--mh-fs-h1); font-weight: var(--mh-fw-bold); line-height: var(--mh-lh-tight); }
h2, .h2 { font-size: var(--mh-fs-h2); line-height: var(--mh-lh-tight); }
h3, .h3 { font-size: var(--mh-fs-h3); line-height: var(--mh-lh-snug); }
h4, .h4 { font-size: var(--mh-fs-h4); line-height: var(--mh-lh-snug); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }

p { margin: 0; }

.small       { font-size: var(--mh-fs-sm);  color: var(--mh-fg-body); line-height: var(--mh-lh-snug); }
.text-muted  { color: var(--mh-fg-muted); }
.text-secondary { color: var(--mh-fg-body); }
.text-right  { text-align: right; }

.mh-eyebrow, .eyebrow {
  font-size: var(--mh-fs-meta);
  font-weight: var(--mh-fw-bold);
  letter-spacing: var(--mh-tracking-wider);
  text-transform: uppercase;
  color: var(--mh-fg-muted);
}

.mh-mono { font-family: var(--mh-font-mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: min(calc(100% - (var(--mh-space-5) * 2)), var(--container-xl));
  margin-inline: auto;
}
.section { margin-bottom: var(--mh-space-7); }
.section-header {
  display: grid; gap: var(--mh-space-2); margin-bottom: var(--mh-space-4);
}

.surface {
  background: var(--mh-bg-surface);
  border: 1px solid var(--mh-border-default);
  border-radius: var(--mh-radius-lg);
}

.stack   { display: grid;   gap: var(--mh-space-4); }
.cluster { display: flex;   gap: var(--mh-space-3); align-items: center; flex-wrap: wrap; }
.grid    { display: grid;   gap: var(--mh-space-4); }
.grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Shell containers (used by workspace.php layout) */
.app-shell { display: block; min-height: calc(100vh - var(--topbar-height)); }
.app-topbar, .app-sidebar, .app-panel, .sidebar-scrim { display: none; }
.app-main { padding: var(--mh-space-5); }

.brand-slot { display: flex; align-items: center; gap: var(--mh-space-3); min-width: 250px; }
.logo-placeholder {
  width: 42px; height: 42px; border-radius: var(--mh-radius-sm);
  border: 1px dashed var(--mh-border-strong);
  display: grid; place-items: center;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--mh-fg-muted); background: var(--mh-bg-subtle);
}
.brand-title    { font-weight: var(--mh-fw-semibold); }
.brand-subtitle { font-size: var(--mh-fs-sm); color: var(--mh-fg-body); }

.topbar-search  { flex: 1; min-width: 180px; max-width: 580px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--mh-space-2); }

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--mh-space-4); margin-bottom: var(--mh-space-5);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mh-space-4);
}

.panel-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--mh-space-4);
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--mh-space-4);
}

.activity-feed { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--mh-space-3); }
.activity-item {
  padding: var(--mh-space-3);
  border: 1px solid var(--mh-border-default);
  border-radius: var(--mh-radius-sm);
  background: var(--mh-bg-subtle);
}

/* ==========================================================================
   Responsive + print
   ========================================================================== */

@media (max-width: 1200px) {
  .kpi-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-grid,
  .form-layout { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .app-main  { padding: var(--mh-space-4); }
  .hide-mobile { display: none; }
  .show-mobile { display: inline-flex; }
  .grid-4   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .grid-3, .grid-2, .grid-4, .kpi-grid { grid-template-columns: 1fr; }
  .app-main { padding: var(--mh-space-3); }
  .page-header { flex-direction: column; align-items: stretch; }
}

@media print {
  html, body {
    background: #fff !important; color: #111 !important; padding-top: 0 !important;
  }
  .navbar, .app-topbar, .app-sidebar, .app-panel, .sidebar-scrim,
  .demo-controls, .hide-print { display: none !important; }
  .app-shell { display: block !important; min-height: auto; }
  .app-main  { padding: 0 !important; }
  .surface, .card, .table-wrap, .panel, .mh-card {
    box-shadow: none !important; border: 1px solid #cfd4de !important; break-inside: avoid;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #444; }
}