/* ============================================================
   Banana Platform — Brand Stylesheet
   JT Fresh corporate identity applied site-wide.
   Load AFTER main.css so it overrides defaults.
   ============================================================ */

/* ---- Brand Variables ---- */
:root {
  --brand-primary:       #00A8E2;
  --brand-primary-dark:  #0090C5;
  --brand-primary-mid:   #0090C5;
  --brand-primary-light: #33C1F5;
  --brand-primary-tint:  #E0F6FD;
  --brand-white:         #FFFFFF;
  --brand-bg:            #F4F8FD;
  --brand-text:          #1A1A2E;
  --brand-text-muted:    #6B7280;
  --brand-border:        #CBD5E1;

  --status-success:      #16A34A;
  --status-success-tint: #DCFCE7;
  --status-warning:      #D97706;
  --status-warning-tint: #FEF3C7;
  --status-danger:       #DC2626;
  --status-danger-tint:  #FEE2E2;
}

/* ---- Global ---- */
body {
  background: var(--brand-bg);
  color: var(--brand-text);
  /* Override main.css paddings — we now use a single top navbar, no bottom nav */
  padding-top: 60px;
  padding-bottom: 0;
}

/* ============================================================
   Top Navbar
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: var(--brand-primary);
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.navbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1.25rem;
  gap: 0;
}

/* Brand */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.navbar-logo {
  height: 40px;
  width: auto;
  display: block;
}
.navbar-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Nav links (desktop: horizontal row after brand) */
.navbar-collapse {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
}

.navbar-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 1.75rem;
  gap: 0;
}

.nav-link {
  display: block;
  padding: 0.5rem 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.nav-link:hover {
  color: var(--brand-white);
}
.nav-link-active {
  color: var(--brand-white);
  font-weight: 700;
  border-bottom: 2px solid var(--brand-white);
}

/* User block (right side) */
.navbar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex-shrink: 0;
}
.navbar-user-name {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}
.navbar-logout {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.navbar-logout:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--brand-white);
}

/* Role pills inside navbar — override for white-on-blue background */
.navbar .role-pill {
  font-size: 0.68rem;
  padding: 0.18em 0.55em;
  border-radius: 4px;
}
.navbar .role-admin    { background: rgba(255,255,255,0.2);  color: var(--brand-white); }
.navbar .role-manager  { background: rgba(255,255,255,0.15); color: var(--brand-white); }
.navbar .role-operator { background: rgba(255,255,255,0.1);  color: rgba(255,255,255,0.85); border: none; }

/* Hamburger (hidden on desktop) */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--brand-white);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* ---- Mobile (<= 768px): hamburger layout ---- */
@media (max-width: 768px) {
  body { padding-top: 60px; }

  .navbar-toggle {
    display: flex;
    margin-left: auto;
  }

  .navbar-collapse {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--brand-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.5rem 0 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 199;
  }
  .navbar-collapse.open {
    display: flex;
  }

  .navbar-links {
    flex-direction: column;
    margin-left: 0;
    width: 100%;
    gap: 0;
  }
  .nav-link {
    padding: 0.75rem 1.25rem;
    border-bottom: none;
    border-left: 3px solid transparent;
    font-size: 0.95rem;
  }
  .nav-link-active {
    border-bottom: none;
    border-left: 3px solid var(--brand-white);
    background: rgba(255, 255, 255, 0.08);
  }

  .navbar-user {
    margin-left: 0;
    padding: 0.75rem 1.25rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 0.25rem;
    width: 100%;
  }
}

/* ---- Desktop (>768px) ---- */
@media (min-width: 769px) {
  .navbar-collapse {
    display: flex !important; /* always visible */
  }
  .navbar-toggle {
    display: none;
  }
}

/* ---- Cards / Sections ---- */
.form-card,
.detail-section,
.info-card,
.kpi-tile,
.batch-card,
.action-card,
.alert-card,
.confirm-card {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
}

/* ---- Buttons ---- */
.btn-primary {
  background: var(--brand-primary);
  color: var(--brand-white);
  border: 2px solid var(--brand-primary);
}
.btn-primary:hover {
  background: var(--brand-primary-mid);
  border-color: var(--brand-primary-mid);
  opacity: 1;
}

.btn-secondary {
  background: var(--brand-white);
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
}
.btn-secondary:hover {
  background: var(--brand-primary-tint);
  opacity: 1;
}

.btn-danger {
  background: var(--status-danger);
  color: var(--brand-white);
  border: 2px solid var(--status-danger);
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  opacity: 1;
}

.btn-success {
  background: var(--status-success);
  color: var(--brand-white);
  border: 2px solid var(--status-success);
}

.btn-warning {
  background: var(--status-warning);
  color: var(--brand-white);
  border: 2px solid var(--status-warning);
}

/* ---- Form controls ---- */
.form-control:focus {
  border-color: var(--brand-primary-light);
  box-shadow: 0 0 0 3px rgba(0, 168, 226, 0.18);
  outline: none;
}

/* ---- Page header ---- */
.page-header h2 {
  color: var(--brand-primary);
}

/* ---- Section titles ---- */
.section-title,
.detail-title,
.form-section-title {
  color: var(--brand-text-muted);
}

/* ---- Stage badges ---- */
/* Override the stage colors defined in main.css */
.stage-badge.stage-h1,
span.stage-h1 {
  background: var(--brand-primary-tint);   /* #E0F6FD */
  color: var(--brand-primary-dark);        /* #0090C5 */
}

.stage-badge.stage-h2,
span.stage-h2 {
  background: #EDE9FE;
  color: #4C1D95;
}

.stage-badge.stage-h2_spaced,
span.stage-h2_spaced {
  background: #F3E8FF;
  color: #6B21A8;
}

.stage-badge.stage-gh4,
span.stage-gh4 {
  background: var(--status-warning-tint);
  color: #92400E;
}

.stage-badge.stage-ready,
span.stage-ready {
  background: var(--status-success-tint);
  color: #166534;
}

.stage-badge.stage-expired,
span.stage-expired {
  background: var(--status-danger-tint);
  color: #991B1B;
}

.stage-badge.stage-sold_out,
span.stage-sold_out {
  background: var(--brand-bg);
  color: var(--brand-text-muted);
}

/* Also apply stage colors to plain .stage-* elements (without .stage-badge) */
.stage-h1      { background: var(--brand-primary-tint); color: var(--brand-primary-dark); }
.stage-h2      { background: #EDE9FE; color: #4C1D95; }
.stage-h2_spaced { background: #F3E8FF; color: #6B21A8; }
.stage-gh4     { background: var(--status-warning-tint); color: #92400E; }
.stage-ready   { background: var(--status-success-tint); color: #166534; }
.stage-expired { background: var(--status-danger-tint); color: #991B1B; }
.stage-sold_out { background: var(--brand-bg); color: var(--brand-text-muted); }

/* ---- Filter pills: stage-colored active pills ---- */
.stage-pill-h1.pill-active    { background: var(--brand-primary); }
.stage-pill-h2.pill-active    { background: #4C1D95; }
.stage-pill-gh4.pill-active   { background: #92400E; }
.stage-pill-ready.pill-active { background: #166534; }

/* ---- KPI values ---- */
.kpi-value {
  color: var(--brand-primary);
}
.kpi-alert .kpi-value {
  color: var(--status-danger);
}

/* ---- Data tables ---- */
.data-table th {
  background: var(--brand-primary-tint);
  color: var(--brand-primary);
  border-bottom-color: var(--brand-border);
}
.data-table td {
  border-bottom-color: #EFF3F8;
}

/* ---- Alert inline strips ---- */
.alert-red    { background: var(--status-danger-tint);  border-left-color: var(--status-danger); }
.alert-amber  { background: var(--status-warning-tint); border-left-color: var(--status-warning); }
.banner-red   { background: var(--status-danger-tint);  color: #991B1B; }
.banner-amber { background: var(--status-warning-tint); color: #92400E; }

/* ---- Flash messages ---- */
.flash-success { background: var(--status-success-tint); color: #14532D; }
.flash-danger  { background: var(--status-danger-tint);  color: #991B1B; }
.flash-warning { background: var(--status-warning-tint); color: #92400E; }
.flash-info    { background: var(--brand-primary-tint);  color: var(--brand-primary); }

/* ---- Role pills ---- */
.role-admin   { background: var(--status-warning-tint); color: #92400E; }
.role-manager { background: var(--brand-primary-tint);  color: var(--brand-primary); }
.role-operator { background: var(--brand-bg); color: var(--brand-text-muted); border: 1px solid var(--brand-border); }

/* ---- Location badges ---- */
.location-badge {
  background: var(--brand-primary-tint);
  color: var(--brand-primary);
}

/* ---- Progress bars (general) ---- */
.progress-bar {
  background: var(--brand-primary);
}

/* ---- Batch quantity text ---- */
.batch-qty {
  color: var(--brand-primary-mid);
}

/* ---- Event log border colors ---- */
.event-item.event-stage_move  { border-color: var(--brand-primary-light); }
.event-item.event-mortality   { border-color: var(--status-danger); }
.event-item.event-sale        { border-color: var(--status-success); }
.event-item.event-observation { border-color: var(--brand-primary-mid); }
.event-item.event-ready_declared { border-color: var(--status-success); }
.event-item.event-correction  { border-color: var(--status-warning); background: var(--status-warning-tint); }

/* ---- Heatmap brand overrides ---- */
.hm-low  { background: var(--status-success-tint); color: #14532D; }
.hm-mid  { background: var(--status-warning-tint); color: #78350F; }
.hm-high { background: #FEE2E2; color: #991B1B; }
.hm-full { background: var(--status-danger); color: var(--brand-white); }
.hm-bay-active { background: var(--brand-primary-tint); color: var(--brand-primary); }

/* ---- Suppress legacy topbar and bottom-nav (replaced by .navbar) ---- */
.topbar    { display: none; }
.bottom-nav { display: none; }

/* ---- Admin nav pills ---- */
.admin-nav .pill-active {
  background: var(--brand-primary);
  color: var(--brand-white);
}

/* ---- Main content — wider desktop container ---- */
.main-content {
  padding: 1.5rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .main-content { padding: 1rem; }
}

/* ---- Back link ---- */
.back-link {
  color: var(--brand-primary-mid);
}

/* ============================================================
   Dashboard
   ============================================================ */

/* Alert strip */
.dash-alert-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--status-danger);
  color: var(--brand-white);
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  transition: background 0.15s;
}
.dash-alert-strip:hover { background: #b91c1c; }
.dash-alert-strip strong { font-weight: 700; }

/* Page header row */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.dash-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-primary);
  margin: 0;
}
.dash-date {
  font-size: 0.875rem;
  color: var(--brand-text-muted);
  margin: 0.2rem 0 0;
}

/* KPI row — 8 standard tiles (4×2) + 1 full-width projected tile */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  .dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

.dash-kpi-tile {
  border-radius: 10px;
  padding: 1rem 0.9rem 0.75rem;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.dash-kpi-blue   { background: var(--brand-primary-tint);  border-color: #7DD5F0; }
.dash-kpi-green  { background: var(--status-success-tint); border-color: #BBF7D0; }
.dash-kpi-amber  { background: var(--status-warning-tint); border-color: #FDE68A; }
.dash-kpi-red    { background: var(--status-danger-tint);  border-color: #FECACA; }

/* Projected-sellable tile — full-width, solid bright green */
.dash-kpi-salesgreen {
  background: #16A34A;
  border-color: #15803D;
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 1.4rem;
}
@media (max-width: 640px) {
  .dash-kpi-salesgreen { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}
@media (max-width: 600px) {
  /* Projected Sellable breakdown: stack each component on its own line */
  .dash-kpi-salesgreen .dash-kpi-delta {
    white-space: normal;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  /* Stage mix bar: tighten label so track has enough space */
  .hbar-label { min-width: 90px; font-size: 0.72rem; }
  .hbar-stats { min-width: 70px; }
}

.dash-kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-text);
}
.dash-kpi-blue  .dash-kpi-value { color: var(--brand-primary); }
.dash-kpi-green .dash-kpi-value { color: #166534; }
.dash-kpi-amber .dash-kpi-value { color: #92400E; }
.dash-kpi-red   .dash-kpi-value { color: #991B1B; }
.dash-kpi-salesgreen .dash-kpi-value { color: #FFFFFF; font-size: 2.25rem; }

.dash-kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-text-muted);
  line-height: 1.3;
  margin-top: 0.15rem;
}
.dash-kpi-salesgreen .dash-kpi-label { color: #DCFCE7; font-size: 0.85rem; margin-top: 0; }

.dash-kpi-delta {
  font-size: 0.72rem;
  color: var(--brand-text-muted);
  margin-top: auto;
  padding-top: 0.4rem;
}
.delta-up   { color: var(--status-success); }
.delta-down { color: var(--status-danger); }
.delta-flat { color: var(--brand-text-muted); }
.dash-kpi-salesgreen .dash-kpi-delta {
  color: #BBF7D0;
  font-size: 0.9rem;
  margin-top: 0;
  padding-top: 0;
  margin-left: auto;
  white-space: nowrap;
}

/* ============================================================
   Dashboard cards / charts
   ============================================================ */
.dash-card {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem 1rem;
}
.dash-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.dash-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-primary);
  margin: 0;
}
.dash-card-sub {
  font-size: 0.78rem;
  color: var(--brand-text-muted);
}

/* Chart sizing */
.dash-chart-wrap {
  position: relative;
  width: 100%;
  height: 300px;
}
.dash-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Custom legend */
.dash-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--brand-text-muted);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.legend-line {
  height: 3px;
  border-radius: 2px;
}

/* ============================================================
   Historical comparison table
   ============================================================ */
.hist-table .hist-row-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--brand-text);
  white-space: nowrap;
}
.hist-mort-cell {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.82rem;
}
.hist-mort-good { background: var(--status-success-tint); color: #166534; }
.hist-mort-warn { background: var(--status-warning-tint); color: #92400E; }
.hist-mort-bad  { background: var(--status-danger-tint);  color: #991B1B; }

/* ============================================================
   Problematic clones table
   ============================================================ */
.clone-row-danger td { background: #FFF5F5; }
.clone-row-warn   td { background: #FFFBEB; }

.clone-delta-bad  { color: var(--status-danger);  font-weight: 700; }
.clone-delta-good { color: var(--status-success);  font-weight: 700; }
.clone-delta-warn { color: var(--status-warning);  font-weight: 700; }

.clone-flag {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.clone-flag-danger  { background: var(--status-danger-tint);  color: #991B1B; }
.clone-flag-watch   { background: var(--status-warning-tint); color: #92400E; }
.clone-flag-monitor { background: #FEF9C3; color: #854D0E; }
.clone-flag-normal  { background: var(--status-success-tint); color: #166534; }

.clone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--brand-border);
  font-size: 0.775rem;
  color: var(--brand-text-muted);
}
.clone-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.clone-legend-item .clone-flag {
  font-size: 0.7rem;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* ============================================================
   Dashboard two-column row + horizontal bars
   ============================================================ */
.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .dash-two-col { grid-template-columns: 1fr; }
}

/* Horizontal bar list */
.hbar-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hbar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hbar-label {
  min-width: 130px;
  flex-shrink: 0;
}
.hbar-track {
  flex: 1;
  height: 10px;
  background: var(--brand-bg);
  border-radius: 5px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.hbar-stats {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  flex-shrink: 0;
  min-width: 90px;
  justify-content: flex-end;
}
.hbar-qty {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-text);
}
.hbar-pct {
  font-size: 0.75rem;
  color: var(--brand-text-muted);
  min-width: 38px;
  text-align: right;
}

/* ============================================================
   Login page — split panel
   ============================================================ */
body.login-page {
  background: var(--brand-white);
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100vh;
}

.login-split {
  display: flex;
  min-height: 100vh;
}

/* Left: brand panel */
.login-left {
  flex: 0 0 40%;
  background: #00A8E2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.login-left-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-logo-img {
  width: 320px;
  max-width: 80%;
  height: auto;
  display: block;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.login-tagline {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Right: form panel */
.login-right {
  flex: 1;
  background: var(--brand-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}
.login-form-wrap {
  width: 100%;
  max-width: 380px;
}
.login-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-text);
  margin-bottom: 0.3rem;
}
.login-sub {
  font-size: 0.875rem;
  color: var(--brand-text-muted);
  margin-bottom: 1.75rem;
}
.login-form .form-group {
  margin-bottom: 1rem;
}
.login-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-text);
  margin-bottom: 0.35rem;
  display: block;
}
.login-form .form-control {
  border-color: var(--brand-border);
  border-radius: 6px;
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
}
.login-form .btn-primary {
  width: 100%;
  padding: 0.7rem;
  font-size: 0.95rem;
  border-radius: 6px;
  margin-top: 0.25rem;
}

/* Mobile: stack panels vertically */
@media (max-width: 640px) {
  .login-split { flex-direction: column; }
  .login-left {
    flex: 0 0 auto;
    padding: 2rem 1.5rem;
    min-height: 180px;
  }
  .login-logo-img { width: 180px; }
  .login-tagline { font-size: 0.95rem; }
  .login-right { padding: 2rem 1.25rem; }
}

/* ============================================================
   Heatmap v2
   ============================================================ */

/* Legend */
.hm2-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  color: var(--brand-text-muted);
}
.hm2-leg-item { display: flex; align-items: center; gap: 0.4rem; }
.hm2-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Section label above zone groups */
.hm2-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-text-muted);
  margin-bottom: 0.5rem;
}

/* Zone row — H1 and H2 grids side by side */
.hm2-zone-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 960px) {
  .hm2-zone-row { grid-template-columns: 1fr; }
}

/* Zone card */
.hm2-zone-card {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.hm2-zone-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.hm2-zone-count {
  font-size: 0.78rem;
  color: var(--brand-text-muted);
}

/* Full-width zone card (GH4) */
.hm2-zone-full {
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Cell grid */
.hm2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 4px;
}
.hm2-grid-bays {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}

/* Cell */
.hm2-cell {
  border-radius: 6px;
  padding: 0.3rem 0.35rem;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hm2-cell-active {
  cursor: pointer;
}
.hm2-cell-active:hover {
  border-color: rgba(0,0,0,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.hm2-cell-selected {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,168,226,0.25) !important;
}
.hm2-cell-label {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: monospace;
  line-height: 1;
}
.hm2-cell-trays {
  font-size: 0.65rem;
  line-height: 1;
  opacity: 0.85;
}
.hm2-cell-under {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* Detail panel */
.hm2-detail-panel {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(0,168,226,0.10);
}
.hm2-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.hm2-detail-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-primary);
  margin: 0;
}
.hm2-detail-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--brand-text-muted);
  cursor: pointer;
  padding: 0 0.25rem;
}
.hm2-detail-close:hover { color: var(--brand-text); }

/* Placeholder shown before any cell is selected */
.hm2-placeholder {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem 0.5rem;
  color: var(--brand-text-muted);
  font-size: 0.9rem;
}
.hm2-placeholder-icon {
  font-size: 1.2rem;
  color: var(--brand-primary-light);
  flex-shrink: 0;
}

/* Capacity bars */
.hm2-cap-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.hm2-cap-item {
  flex: 1;
  min-width: 200px;
}
.hm2-cap-label {
  font-size: 0.82rem;
  color: var(--brand-text-muted);
  margin-bottom: 0.3rem;
}
.hm2-cap-track {
  height: 8px;
  background: var(--brand-bg);
  border-radius: 4px;
  overflow: hidden;
}
.hm2-cap-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 2px;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.55rem 2rem;
  background: var(--brand-white);
  border-bottom: 1px solid var(--brand-border);
  font-size: 0.8rem;
  color: var(--brand-text-muted);
}
.breadcrumb a {
  color: var(--brand-primary-mid);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--brand-border); font-size: 0.75rem; }
.breadcrumb-current { color: var(--brand-text); font-weight: 600; }
@media (max-width: 768px) {
  .breadcrumb { padding: 0.5rem 1rem; }
}

/* ---- Batch card hover ---- */
.batch-card:hover,
.action-card:hover {
  border-color: var(--brand-primary-light);
  box-shadow: 0 4px 12px rgba(0, 168, 226, 0.12);
}