:root {
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --blade-bg: #FFFFFF;
    --blade-border: #E5E7EB;
    --text-dark: #1F2937;
    --text-muted: #6B7280;
    --accent-color: #3B82F6;
    --warn-bg: #FEF3C7;
    --warn-text: #92400E;
    --info-bg: #DBEAFE;
    --info-text: #1E40AF;
    --success-bg: #D1FAE5;
    --success-text: #065F46;
    --danger-bg: #FEE2E2;
    --danger-text: #991B1B;
    --shadow: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-hover: 0 5px 15px rgba(0,0,0,0.1);
    --color-primary:   #3B82F6;
    --color-secondary: #6B7280;
    --color-success:   #10B981;
    --color-warning:   #F59E0B;
    --color-danger:    #EF4444;
    --color-info:      #0EA5E9;
    --color-light:     #E5E7EB;
    --color-darktext:  #111827;

}
.shipment-row-v8 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
    font-family: var(--font-main);
}


.info-blade {
    position: relative;
    background: var(--blade-bg);
    border: 1px solid var(--blade-border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 340px;
}
.info-blade.narrow {
    flex: 0 0 160px;
}
.info-blade.wide {
    grid-column: span 2;
}

.blade-header {
    position: relative; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--blade-border);
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.blade-header h6 {
    margin: 0; font-size: 0.65rem; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.5px; display: flex; align-items: center; gap: 0.4rem;
}
.blade-logo { max-height: 22px; }

.blade-body {
    padding: 0.6rem 0.85rem; display: flex; flex-direction: column;
    gap: 0.6rem; overflow-y: auto; flex-grow: 1;
}
.blade-body.cargo-body { height: 40%; flex-grow: 0; }

.blade-section small { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; cursor: default; }
.blade-section p { margin: 0; font-size: 0.75rem; color: var(--text-dark); line-height: 1.4; }
.blade-section p.ref { display: flex; align-items: center; font-size: 0.7rem; color: var(--text-muted); }

.blade-actions { display: flex; gap: 0.4rem; border-top: 1px solid var(--blade-border); padding-top: 0.4rem; margin-top: 0.2rem;}
.blade-actions a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; padding: 0.2rem; border-radius: 4px; transition: all 0.2s; }
.blade-actions a:hover { color: var(--accent-color); background: #F3F4F6; }

.airports { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.airports span { background: #F3F4F6; padding: 0.1rem 0.2rem; border-radius: 4px; font-size: 0.65rem; }
.airports .muted { color: var(--text-muted); }

.badge { font-size: 0.65rem; padding: 0.2rem 0.4rem; border-radius: 5px; font-weight: 600; border: 1px solid transparent; }
.badge.status {font-size: 0.5rem; padding: 0.15rem 0.3rem; }
.badge.warn { background-color: var(--warn-bg); color: var(--warn-text); }
.badge.info { background-color: var(--info-bg); color: var(--info-text); }
.badge.success { background-color: var(--success-bg); color: var(--success-text); }
.badge.danger { background-color: var(--danger-bg); color: var(--danger-text); }
.reco-badges { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.2rem; }
.reco-badges .count-pill {
    font-size: 0.6rem; font-weight: 500;
    background-color: #F3F4F6; color: var(--text-muted);
    padding: 0.1rem 0.4rem; border-radius: 4px;
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.unit-controls { display: flex; gap: 0.4rem; }
.unit-switcher { display: flex; background: #F3F4F6; border-radius: 5px; padding: 2px; }
.unit-switcher button { border: none; background: transparent; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.65rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.unit-switcher button.active { background: white; color: var(--text-dark); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.cargo-item { display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid var(--blade-border); padding-top: 0.5rem; }
.cargo-item:first-child { border-top: none; padding-top: 0; }
.cargo-count { font-size: 1rem; font-weight: 700; color: var(--accent-color); }
.cargo-details { flex-grow: 1; }
.cargo-type { font-size: 0.75rem; font-weight: 600; color: var(--text-dark); }
.cargo-specs { font-size: 0.7rem; color: var(--text-muted); display: flex; gap: 0.25rem; }
.cargo-badges { margin-left: auto; flex-shrink: 0; }

.copy-btn { color: #D1D5DB; transition: color 0.2s; }
.copy-btn:hover { color: var(--accent-color); }
.copy-btn i { font-size: 0.8rem; }
p.ref .copy-btn { margin-left: 0.25rem; }

.local-time {
    font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
    margin-left: auto;
}

.blade-map-container { flex-grow: 1; border-top: 1px solid var(--blade-border); }
#map { height: 100%; width: 100%; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.leaflet-control-container { display: none; }

p.reco-text { font-size: 0.7rem; line-height: 1.2;}
.badge.status {
    /* keep shared badge styling here, but no background-color */
    color: #fff;              /* default white text */
    border-color: transparent;
    }
    .badge.status.primary   { background-color: var(--color-primary);   color:#fff; }
    /* Secondary */
    .badge.status.secondary { background-color: var(--color-secondary); color:#fff; }
    /* Success */
    .badge.status.success   { background-color: var(--color-success);   color:#fff; }
    /* Warning */
    .badge.status.warning   { background-color: var(--color-warning);   color:#111; }
    /* Danger */
    .badge.status.danger    { background-color: var(--color-danger);    color:#fff; }
    /* Info */
    .badge.status.info      { background-color: var(--color-info);      color:#fff; }
    /* Light (needs dark text for contrast) */
    .badge.status.light     { background-color: var(--color-light);     color:var(--color-darktext); }
    /* Optional: if you ever return 'dark' */
    .badge.status.dark      { background-color: #374151;                color:#fff; }


/* Hide analysis blade when layout decides to */
.info-blade.hidden-by-layout {
display: none !important;
}



/* Layout for the section header: label, badges, toggle */
.section-head {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .25rem;
}

/* Keep label on the left without wrapping */
.section-head .no-wrap { white-space: nowrap; }

/* Badges inline and always visible, scroll horizontally if too long */
.reco-badges-inline {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-left: auto;              /* push badges away from label */
flex-wrap: nowrap;              /* prevent line breaks */
overflow-x: auto;               /* allow horizontal scroll if needed */
-webkit-overflow-scrolling: touch;
}

/* Reuse existing pill/badge styling; optional tighter spacing inside header */
.reco-badges-inline .count-pill { margin: 0; }
.reco-badges-inline .badge { margin: 0; }

/* Minimal toggle button */
.collapse-toggle {
border: 1px solid var(--blade-border);
background: #fff;
border-radius: 6px;
padding: 0.1rem 0.35rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
margin-left: .1rem;
}
.collapse-toggle i { font-size: .9rem; }
.collapse-toggle:hover {
background: #F9FAFB;
border-color: #D1D5DB;
}

/* Rotate chevron when expanded */
.collapse-toggle[aria-expanded="true"] i {
transform: rotate(180deg);
}

/* Collapsible container with smooth max-height transition */
.collapsible {
overflow: hidden;
max-height: 0;                 /* collapsed by default */
transition: max-height .25s ease;
}

/* Open state toggled by JS */
.collapsible.is-open {
max-height: 1000px;            /* sufficiently large to reveal content */
}

/* Optional: slightly tighter top spacing when revealed */
.collapsible > *:first-child { margin-top: .25rem; }


/* Responsive Grid für OBC + Profile Cards */
/* Dashboard grid: OBC + Profile Cards im selben Grid */
.dash-grid{
    /* min Track width anpassbar – via Media Queries holst du bei großen Viewports 4+ Spalten raus */
    --grid-min: 340px;
  
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
    grid-auto-flow: dense;
    gap: 12px;        /* horizontal == vertikal */
    margin-top: 12px; /* etwas Luft nach oben */
  }
  
  /* Bei großen Screens erlauben wir kleinere Min-Spalten -> 4 Spalten möglich */
  @media (min-width: 1440px){
    .dash-grid{ --grid-min: 300px; } /* typ. 4 Spalten */
  }
  @media (min-width: 1680px){
    .dash-grid{ --grid-min: 280px; } /* ggf. 5 Spalten */
  }
  
  /* OBC-Kachel: 2 Spalten breit. NICHT über 2 Reihen spannen,
     damit rechts (oder darunter) Platz flexibel genutzt werden kann */
  .obc-card{
    grid-column: span 2;
    /* grid-row: span 2;  <-- bitte entfernen, blockiert Nebeneinander-Layout */
  }
  

  /* ===== Dashboard Add‑Ons (Backstrap + Bootstrap Rows/Cols) =============== */

/* In der Dashboard-Row sollen info-blades ihre Höhe flexibel annehmen */
.dash-row .info-blade{ min-height: 0; height: 100%; }

/* Optionale feste Kartenhöhe (per Variable anpassbar) */
.dash-card-fixed{ min-height: var(--dash-card-h, 220px); }

/* Generic dash-card Marker (ohne min-height Zwang) */
.dash-card{ /* placeholder for future shared rules */ }

/* Kleine Harmonisierung: in Cols die Cards auf volle Höhe stretchen */
.dash-cards > [class*="col-"]{ display:flex; }
.dash-cards > [class*="col-"] > .info-blade{ flex:1 1 auto; }

/* (Optional) dezentes Top-Padding, damit Kartentitel nicht kleben */
.dash-row{ padding-top: .25rem; }