/* ============================================================
   COMMAND INTELLIGENCE - DASHBOARD-SPECIFIC STYLES
   ============================================================ */

/* ---- Leaflet z-index override ----
   Leaflet default: pane=400, controls=1000
   App-bar: z-300, Sidebar: z-200
   Must cap Leaflet below z-100 so UI chrome stays on top ---- */
.leaflet-pane         { z-index: 4 !important; }
.leaflet-tile-pane    { z-index: 2 !important; }
.leaflet-overlay-pane { z-index: 4 !important; }
.leaflet-shadow-pane  { z-index: 5 !important; }
.leaflet-marker-pane  { z-index: 6 !important; }
.leaflet-tooltip-pane { z-index: 7 !important; }
.leaflet-popup-pane   { z-index: 8 !important; }
.leaflet-top,
.leaflet-bottom       { z-index: 9 !important; }

/* Contain the map strictly inside its container */
.map-container {
  overflow: hidden;
  isolation: isolate;
}

/* ---- Column Span Utilities (for grid-cols-12) ---- */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* ---- Chart Container ---- */
.chart-loading {
  position: relative;
  min-height: 120px;
}

/* ---- Min Height Utilities ---- */
.min-h-40  { min-height: 160px; }
.min-h-48  { min-height: 192px; }
.min-h-56  { min-height: 224px; }
.min-h-64  { min-height: 256px; }
.min-h-72  { min-height: 288px; }
.min-h-80  { min-height: 320px; }

/* ---- Space-y utilities ---- */
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }

/* ---- Flex Utilities ---- */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-1       { flex: 1; }
.flex-wrap    { flex-wrap: wrap; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.shrink-0 { flex-shrink: 0; }

/* ---- Text Utilities ---- */
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-xs     { font-size: 12px; }
.text-sm     { font-size: 13px; }
.uppercase   { text-transform: uppercase; }
.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }
.whitespace-nowrap   { white-space: nowrap; }
.overflow-hidden     { overflow: hidden; }
.overflow-y-auto     { overflow-y: auto; }

/* ---- Width / Height Utilities ---- */
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }

/* ---- Padding Utilities ---- */
.p-0  { padding: 0 !important; }
.p-3  { padding: var(--space-3) !important; }
.p-4  { padding: var(--space-4) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pr-2 { padding-right: var(--space-2) !important; }

/* ---- Border Utilities ---- */
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }

/* ---- Hidden Utilities ---- */
.hidden { display: none !important; }

/* ---- Responsive show/hide ---- */
@media (min-width: 768px) {
  .hidden.md\:block { display: block !important; }
}

@media (max-width: 1023px) {
  .col-span-8,
  .col-span-4,
  .col-span-6 {
    grid-column: span 12;
  }
  .lg\:col-span-8  { grid-column: span 12; }
  .lg\:col-span-4  { grid-column: span 12; }
  .lg\:col-span-6  { grid-column: span 12; }
}

@media (min-width: 1024px) {
  .lg\:col-span-8  { grid-column: span 8; }
  .lg\:col-span-4  { grid-column: span 4; }
  .lg\:col-span-6  { grid-column: span 6; }
}