/* Veydex Status — Aggregator + Responsive
 * Imports the modular stylesheets and applies viewport-based overrides. */

@import url("/css/tokens.css");
@import url("/css/layout.css");
@import url("/css/services.css");
@import url("/css/incidents.css");
@import url("/css/modal.css");
@import url("/css/popover.css");

/* Make sure the bars container can render the popover outside its bounds */
.ops-row, .ops-row-bars, .ops-region, .ops-region-card { overflow: visible; }

/* Responsive overrides */
@media (max-width: 720px) {
  .ops-header { padding: 14px 16px; gap: 12px; }
  .ops-nav { display: none; }
  .ops-main { padding: 20px 16px 56px; }

  .ops-hero { padding: 28px 0 24px; }
  .ops-hero-title {
    font-size: clamp(32px, 9vw, 44px);
    letter-spacing: -1px;
  }
  .ops-hero-sub { font-size: 16px; }

  .ops-hero-metrics { grid-template-columns: 1fr 1fr; }
  .ops-hero-metrics > div {
    padding: 16px 14px;
    border-right: none;
    padding-left: 0;
  }
  .ops-hero-metrics > div:nth-child(odd) {
    padding-right: 14px;
    border-right: 1px solid var(--ops-border);
  }
  .ops-hero-metrics > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--ops-border);
  }

  .ops-row-btn {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 10px 14px;
    padding: 14px 16px;
  }
  .ops-row-btn > .ops-row-name   { grid-column: 1 / 2; grid-row: 1 / 2; }
  .ops-row-btn > .ops-row-bars   { grid-column: 1 / 3; grid-row: 2 / 3; justify-content: flex-start; }
  .ops-row-btn > .ops-row-pct    { grid-column: 2 / 3; grid-row: 1 / 2; font-size: 12px; }
  .ops-row-btn > .ops-row-caret  { display: none; }

  .ops-bars { gap: 1px; }
  .ops-bars .ops-bar { min-width: 1px; }

  .ops-row-detail {
    grid-template-columns: 1fr 1fr;
    padding: 12px 16px 16px;
    gap: 14px;
  }

  .ops-history-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .ops-history-dur { text-align: left; }

  .ops-maint { grid-template-columns: 1fr; gap: 10px; }
  .ops-maint-when { text-align: left; }

  .ops-incident-head { flex-direction: column; align-items: stretch; }

  .ops-subscribe { grid-template-columns: 1fr; padding: 18px; }
  .ops-subscribe-text,
  .ops-subscribe-controls { grid-column: 1 / -1; justify-content: flex-start; }
  .ops-subscribe-form { width: 100%; flex-wrap: wrap; }
  .ops-subscribe-form input { min-width: 0; flex: 1 1 180px; }

  .ops-footer { flex-direction: column; gap: 6px; align-items: flex-start; }

  .ops-svc-stats { grid-template-columns: 1fr 1fr; }
  .ops-svc-stat:nth-child(2) { border-right: none; padding-right: 0; }
  .ops-svc-stat:nth-child(-n+2) { border-bottom: 1px solid var(--ops-border); padding-bottom: 14px; }
  .ops-svc-stat:nth-child(n+3)  { padding-top: 14px; padding-left: 0; }
  .ops-svc-stat:nth-child(3) { border-right: 1px solid var(--ops-border); padding-right: 16px; }
}

@media (max-width: 480px) {
  .ops-modal { padding: 0; align-items: flex-end; }
  .ops-modal-box { max-height: 92vh; border-radius: 12px 12px 0 0; }
  .ops-tf-switch button { padding: 5px 8px; font-size: 11px; }
}

/* Touch: keep states sane without hover */
@media (hover: none) {
  .ops-row-btn:hover { background: transparent; }
}