/* ── Hormuz Tracker — Front-end Styles ────────────────────────── */

/* ── Variables ────────────────────────────────────────────────── */
:root {
  --hz-normal:   #16a34a;
  --hz-elevated: #d97706;
  --hz-critical: #dc2626;
  --hz-bg:       #f8fafc;
  --hz-border:   #e2e8f0;
  --hz-text:     #1e293b;
  --hz-muted:    #64748b;
  --hz-radius:   10px;
  --hz-blue:     #0369a1;
}

/* ── Counter ──────────────────────────────────────────────────── */
.hormuz-counter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--hz-bg);
  border: 1px solid var(--hz-border);
  border-radius: var(--hz-radius);
  padding: 16px 24px;
  text-align: center;
  font-family: inherit;
}
.hormuz-counter--small  { padding: 10px 16px; }
.hormuz-counter--large  { padding: 24px 36px; }

.hormuz-counter__number {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hz-text);
  font-variant-numeric: tabular-nums;
}
.hormuz-counter--small .hormuz-counter__number { font-size: 2rem; }
.hormuz-counter--large .hormuz-counter__number { font-size: 4.5rem; }

.hormuz-counter__label {
  font-size: 0.85rem;
  color: var(--hz-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hormuz-counter__update {
  font-size: 0.75rem;
  color: var(--hz-muted);
}
.hormuz-counter__note {
  font-size: 0.75rem;
  color: var(--hz-elevated);
  margin-top: 4px;
}

/* ── Status Banner ────────────────────────────────────────────── */
.hormuz-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--hz-radius);
  font-size: 0.9rem;
  font-weight: 500;
  border-left: 4px solid transparent;
  background: #f0fdf4;
  border-left-color: var(--hz-normal);
  color: #166534;
}
.hormuz-status--elevated {
  background: #fffbeb;
  border-left-color: var(--hz-elevated);
  color: #92400e;
}
.hormuz-status--critical {
  background: #fef2f2;
  border-left-color: var(--hz-critical);
  color: #991b1b;
}
.hormuz-status__ships {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.8;
}
.hormuz-status__time {
  font-size: 0.78rem;
  opacity: 0.7;
}

/* ── Dashboard ────────────────────────────────────────────────── */
.hormuz-dashboard {
  background: #fff;
  border: 1px solid var(--hz-border);
  border-radius: 14px;
  overflow: hidden;
  font-family: inherit;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.hormuz-dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--hz-border);
}
.hormuz-dashboard__title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hormuz-dashboard__icon { font-size: 2rem; }
.hormuz-dashboard__heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hz-text);
}
.hormuz-dashboard__sub {
  margin: 0;
  font-size: 0.8rem;
  color: var(--hz-muted);
}
.hormuz-dashboard__live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hz-critical);
}

/* Pulsing dot */
.hormuz-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hz-critical);
  animation: hz-pulse 1.4s ease-in-out infinite;
}
@keyframes hz-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.4); }
}

/* Status inside dashboard */
.hormuz-dashboard__status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  font-size: 0.88rem;
  font-weight: 500;
  background: #f0fdf4;
  color: #166534;
}
.hormuz-dashboard__status.hormuz-status--elevated { background: #fffbeb; color: #92400e; }
.hormuz-dashboard__status.hormuz-status--critical { background: #fef2f2; color: #991b1b; }

.hormuz-dashboard__status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hz-normal);
  flex-shrink: 0;
}
.hormuz-status--elevated .hormuz-dashboard__status-dot { background: var(--hz-elevated); }
.hormuz-status--critical .hormuz-dashboard__status-dot { background: var(--hz-critical); }

/* Big number */
.hormuz-dashboard__main-stat {
  text-align: center;
  padding: 32px 24px 24px;
  border-bottom: 1px solid var(--hz-border);
}
.hormuz-dashboard__big-num {
  display: block;
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--hz-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
}
.hormuz-dashboard__big-label {
  display: block;
  font-size: 0.9rem;
  color: var(--hz-muted);
  margin-top: 6px;
}

/* Type cards */
.hormuz-dashboard__types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--hz-border);
}
@media (max-width: 600px) {
  .hormuz-dashboard__types { grid-template-columns: repeat(2, 1fr); }
}
.hormuz-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px 16px;
  border-right: 1px solid var(--hz-border);
  text-align: center;
}
.hormuz-type-card:last-child { border-right: none; }
.hormuz-type-card__icon  { font-size: 1.5rem; }
.hormuz-type-card__num   { font-size: 1.6rem; font-weight: 700; color: var(--hz-text); }
.hormuz-type-card__label { font-size: 0.75rem; color: var(--hz-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.hormuz-type-card__bar {
  width: 100%;
  height: 4px;
  background: var(--hz-border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.hormuz-type-card__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.hormuz-type-card__fill--tanker   { background: #0369a1; }
.hormuz-type-card__fill--cargo    { background: #16a34a; }
.hormuz-type-card__fill--military { background: #dc2626; }
.hormuz-type-card__fill--other    { background: #9333ea; }

/* Map section */
.hormuz-dashboard__map {
  padding: 0;
}
.hormuz-map { margin: 0; }
.hormuz-map__credit {
  font-size: 0.72rem;
  color: var(--hz-muted);
  text-align: right;
  padding: 4px 12px;
  margin: 0;
}

/* Footer */
.hormuz-dashboard__footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid var(--hz-border);
  font-size: 0.75rem;
  color: var(--hz-muted);
  background: var(--hz-bg);
}

/* Error */
.hormuz-dashboard__error {
  padding: 10px 24px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.82rem;
  border-top: 1px solid #fde68a;
}

/* Number update flash */
@keyframes hz-flash {
  0%   { background: #fef9c3; }
  100% { background: transparent; }
}
.hormuz-updated {
  animation: hz-flash 0.8s ease-out;
  border-radius: 4px;
}