/*
 * BridgeBrain Status Center — Stylesheet
 * Design language: Dark desaturated browns, grays, tans, cream with accent splashes
 * Version: 1.0.0
 */

/* ============================================================
   CSS CUSTOM PROPERTIES — BridgeBrain Palette
   ============================================================ */
:root {
  /* Backgrounds */
  --bb-bg-deep:       #1a1714;
  --bb-bg-dark:       #221e1a;
  --bb-bg-card:       #2b2620;
  --bb-bg-card-alt:   #322d27;
  --bb-bg-elevated:   #3a342d;
  --bb-bg-hover:      #423c35;

  /* Borders */
  --bb-border-dark:   #3d3630;
  --bb-border:        #4d4439;
  --bb-border-light:  #5e5449;

  /* Text */
  --bb-text-primary:  #e6ddd4;
  --bb-text-secondary:#b0a196;
  --bb-text-muted:    #7d7069;
  --bb-text-dim:      #5a5049;

  /* Tan/cream accents */
  --bb-cream:         #f0e8df;
  --bb-tan:           #c4b09a;
  --bb-sand:          #9e8b77;

  /* Status colors */
  --bb-operational:   #4daa71;
  --bb-operational-bg:#1b3327;
  --bb-operational-border: #2d5940;

  --bb-degraded:      #d4a84d;
  --bb-degraded-bg:   #332a15;
  --bb-degraded-border: #5c4a1e;

  --bb-partial:       #d47a3a;
  --bb-partial-bg:    #332015;
  --bb-partial-border:#5c3818;

  --bb-major:         #c94040;
  --bb-major-bg:      #331515;
  --bb-major-border:  #5a2020;

  --bb-maintenance:   #5a8fc7;
  --bb-maintenance-bg:#152233;
  --bb-maintenance-border:#2b4a66;

  --bb-unknown:       #7d7069;
  --bb-unknown-bg:    #272320;
  --bb-unknown-border:#4d4439;

  --bb-resolved:      #4daa71;

  /* Typography */
  --bb-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bb-font-mono:     "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Spacing */
  --bb-radius:        6px;
  --bb-radius-lg:     10px;
  --bb-gap:           20px;

  /* Admin sidebar color */
  --bb-accent:        #c4a265;
  --bb-accent-dark:   #a8874e;
}

/* ============================================================
   PUBLIC STATUS CENTER
   ============================================================ */

.bb-status-center {
  font-family: var(--bb-font);
  color: var(--bb-text-primary);
  background: var(--bb-bg-dark);
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

/* ---- Global status banner ---- */

.bb-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--bb-bg-card);
  border: 1px solid var(--bb-border-dark);
  border-left: 4px solid var(--bb-operational);
  border-radius: var(--bb-radius-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.bb-status-banner--operational { border-left-color: var(--bb-operational); background: linear-gradient(135deg, var(--bb-operational-bg), var(--bb-bg-card)); }
.bb-status-banner--degraded    { border-left-color: var(--bb-degraded);    background: linear-gradient(135deg, var(--bb-degraded-bg), var(--bb-bg-card)); }
.bb-status-banner--partial-outage { border-left-color: var(--bb-partial);  background: linear-gradient(135deg, var(--bb-partial-bg), var(--bb-bg-card)); }
.bb-status-banner--major-outage   { border-left-color: var(--bb-major);    background: linear-gradient(135deg, var(--bb-major-bg), var(--bb-bg-card)); }
.bb-status-banner--maintenance    { border-left-color: var(--bb-maintenance);background: linear-gradient(135deg, var(--bb-maintenance-bg), var(--bb-bg-card)); }
.bb-status-banner--unknown        { border-left-color: var(--bb-unknown);   background: linear-gradient(135deg, var(--bb-unknown-bg), var(--bb-bg-card)); }

.bb-status-banner__indicator {
  position: relative;
  flex-shrink: 0;
  padding-top: 4px;
}

.bb-status-banner__copy {
  flex: 1;
  min-width: 200px;
}

.bb-status-banner__headline {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bb-cream);
  line-height: 1.3;
}

.bb-status-banner__description {
  margin: 0;
  font-size: 0.9rem;
  color: var(--bb-text-secondary);
  line-height: 1.6;
}

.bb-status-banner__updated {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 2px;
}

.bb-status-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-text-muted);
}

.bb-status-value {
  font-size: 0.82rem;
  color: var(--bb-text-secondary);
}

/* ---- Status dot ---- */

.bb-status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bb-unknown);
  position: relative;
}

.bb-status-dot--operational   { background: var(--bb-operational); }
.bb-status-dot--degraded      { background: var(--bb-degraded); }
.bb-status-dot--partial-outage{ background: var(--bb-partial); }
.bb-status-dot--major-outage  { background: var(--bb-major); }
.bb-status-dot--maintenance   { background: var(--bb-maintenance); }
.bb-status-dot--unknown       { background: var(--bb-unknown); }
.bb-status-dot--resolved      { background: var(--bb-resolved); }

.bb-status-dot--lg {
  width: 16px;
  height: 16px;
}

/* Pulse animation for operational */
.bb-status-dot--operational::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid var(--bb-operational);
  opacity: 0;
  animation: bb-pulse 2.5s ease-out infinite;
}

@keyframes bb-pulse {
  0%   { opacity: 0.7; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.8); }
}

/* ---- Status badge ---- */

.bb-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.bb-status-badge--operational    { background: var(--bb-operational-bg);   color: var(--bb-operational);   border-color: var(--bb-operational-border); }
.bb-status-badge--degraded       { background: var(--bb-degraded-bg);      color: var(--bb-degraded);      border-color: var(--bb-degraded-border); }
.bb-status-badge--partial-outage { background: var(--bb-partial-bg);       color: var(--bb-partial);       border-color: var(--bb-partial-border); }
.bb-status-badge--major-outage   { background: var(--bb-major-bg);         color: var(--bb-major);         border-color: var(--bb-major-border); }
.bb-status-badge--maintenance    { background: var(--bb-maintenance-bg);   color: var(--bb-maintenance);   border-color: var(--bb-maintenance-border); }
.bb-status-badge--unknown        { background: var(--bb-unknown-bg);       color: var(--bb-unknown);       border-color: var(--bb-unknown-border); }
.bb-status-badge--resolved       { background: var(--bb-operational-bg);   color: var(--bb-operational);   border-color: var(--bb-operational-border); }

/* ---- Section headings ---- */

.bb-status-section {
  margin-bottom: 36px;
}

.bb-status-section__title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-tan);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bb-border-dark);
}

.bb-status-section__title--alert {
  color: var(--bb-partial);
}

/* ---- Component cards ---- */

.bb-status-components {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--bb-border-dark);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
}

.bb-status-component-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bb-bg-card);
  border-bottom: 1px solid var(--bb-border-dark);
  transition: background 0.15s;
}

.bb-status-component-card:last-child {
  border-bottom: none;
}

.bb-status-component-card:hover {
  background: var(--bb-bg-card-alt);
}

.bb-status-component-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bb-status-component-card__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--bb-text-primary);
}

.bb-status-component-card__note {
  font-size: 0.8rem;
  color: var(--bb-text-muted);
}

.bb-status-component-card__badge-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.bb-status-component-card__checked {
  font-size: 0.72rem;
  color: var(--bb-text-dim);
}

/* Left accent by status */
.bb-status--operational    { border-left: 3px solid var(--bb-operational); }
.bb-status--degraded       { border-left: 3px solid var(--bb-degraded); }
.bb-status--partial-outage { border-left: 3px solid var(--bb-partial); }
.bb-status--major-outage   { border-left: 3px solid var(--bb-major); }
.bb-status--maintenance    { border-left: 3px solid var(--bb-maintenance); }
.bb-status--unknown        { border-left: 3px solid var(--bb-unknown); }

/* ---- Incidents ---- */

.bb-status-incidents {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bb-status-incident {
  background: var(--bb-bg-card);
  border: 1px solid var(--bb-border-dark);
  border-left: 4px solid var(--bb-partial);
  border-radius: var(--bb-radius-lg);
  padding: 20px 24px;
}

.bb-status-incident--critical { border-left-color: var(--bb-major); }
.bb-status-incident--major    { border-left-color: var(--bb-partial); }
.bb-status-incident--minor    { border-left-color: var(--bb-degraded); }

.bb-status-incident__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bb-status-incident__severity-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-text-muted);
  background: var(--bb-bg-elevated);
  padding: 2px 8px;
  border-radius: 4px;
}

.bb-status-incident__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bb-cream);
  flex: 1;
}

.bb-status-incident__status-pill {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
}

.bb-status-incident__status-pill--investigating { background: var(--bb-partial-bg);  color: var(--bb-partial); }
.bb-status-incident__status-pill--identified    { background: var(--bb-degraded-bg); color: var(--bb-degraded); }
.bb-status-incident__status-pill--monitoring    { background: var(--bb-maintenance-bg); color: var(--bb-maintenance); }
.bb-status-incident__status-pill--in_progress   { background: var(--bb-major-bg);    color: var(--bb-major); }
.bb-status-incident__status-pill--resolved      { background: var(--bb-operational-bg); color: var(--bb-operational); }

.bb-status-incident__description {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--bb-text-secondary);
  line-height: 1.6;
}

.bb-status-incident__timeline {
  border-top: 1px solid var(--bb-border-dark);
  padding-top: 14px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bb-status-timeline-entry {
  display: flex;
  gap: 14px;
  font-size: 0.83rem;
  align-items: flex-start;
}

.bb-status-timeline-entry__time {
  color: var(--bb-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 1px;
  min-width: 160px;
}

.bb-status-timeline-entry__message {
  color: var(--bb-text-secondary);
  line-height: 1.5;
}

.bb-status-incident__footer {
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--bb-text-dim);
}

/* ---- Maintenance ---- */

.bb-status-maintenance-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bb-status-maintenance-item {
  background: var(--bb-bg-card);
  border: 1px solid var(--bb-maintenance-border);
  border-radius: var(--bb-radius-lg);
  padding: 18px 22px;
}

.bb-status-maintenance-item--active {
  border-color: var(--bb-maintenance);
  background: linear-gradient(135deg, var(--bb-maintenance-bg), var(--bb-bg-card));
}

.bb-status-maintenance-item__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.bb-status-maintenance-item__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bb-cream);
}

.bb-status-maintenance-item__times {
  display: flex;
  gap: 20px;
  font-size: 0.8rem;
  color: var(--bb-text-muted);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.bb-status-maintenance-item__notes {
  margin: 0;
  font-size: 0.84rem;
  color: var(--bb-text-secondary);
}

/* ---- History ---- */

.bb-status-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--bb-border-dark);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
}

.bb-status-history-item {
  padding: 16px 20px;
  background: var(--bb-bg-card);
  border-bottom: 1px solid var(--bb-border-dark);
}

.bb-status-history-item:last-child {
  border-bottom: none;
}

.bb-status-history-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.bb-status-history-item__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bb-text-primary);
}

.bb-status-history-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bb-status-history-item__date {
  font-size: 0.76rem;
  color: var(--bb-text-muted);
}

.bb-status-history-item__summary {
  margin: 0;
  font-size: 0.82rem;
  color: var(--bb-text-muted);
  line-height: 1.5;
}

/* ---- Empty states ---- */

.bb-status-section--empty-state {
  text-align: center;
  padding: 24px;
}

.bb-status-section--empty-state p {
  color: var(--bb-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

/* ---- Footer ---- */

.bb-status-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--bb-border-dark);
  font-size: 0.76rem;
  color: var(--bb-text-dim);
}

.bb-status-footer a {
  color: var(--bb-tan);
  text-decoration: none;
}

.bb-status-footer a:hover {
  color: var(--bb-cream);
}

/* ---- Compact mode ---- */

.bb-status-center--compact {
  padding: 0;
  background: transparent;
  max-width: none;
}

.bb-status-compact-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--bb-bg-card);
  border: 1px solid var(--bb-border-dark);
  border-radius: 30px;
  padding: 8px 18px;
  flex-wrap: wrap;
}

.bb-status-compact__headline {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bb-text-primary);
}

.bb-status-compact__link {
  font-size: 0.8rem;
  color: var(--bb-tan);
  text-decoration: none;
  margin-left: 4px;
}

.bb-status-compact__link:hover {
  color: var(--bb-cream);
}

/* ============================================================
   ADMIN STYLES
   ============================================================ */

.bbs-admin-wrap {
  font-family: var(--bb-font);
  color: #1e1e1e; /* keep WP's default body color in admin */
  max-width: 1100px;
}

/* ---- Admin header ---- */

.bbs-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.bbs-admin-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bbs-admin-header__logo {
  font-size: 2rem;
  color: var(--bb-accent);
  line-height: 1;
}

.bbs-admin-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e1e1e;
}

.bbs-admin-header p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #666;
}

.bbs-admin-header--sub h1 {
  font-size: 1.3rem;
}

.bbs-admin-header__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ---- Buttons ---- */

.bbs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--bb-radius);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.bbs-btn--primary {
  background: var(--bb-accent);
  color: #1a1714;
  border-color: var(--bb-accent-dark);
}

.bbs-btn--primary:hover {
  background: var(--bb-accent-dark);
  color: #1a1714;
}

.bbs-btn--ghost {
  background: transparent;
  color: #555;
  border-color: #ccc;
}

.bbs-btn--ghost:hover {
  border-color: #999;
  color: #333;
}

.bbs-btn--sm {
  padding: 5px 12px;
  font-size: 0.78rem;
}

.bbs-btn--loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ---- Panels ---- */

.bbs-panel {
  background: #fff;
  border: 1px solid #e0dbd5;
  border-radius: var(--bb-radius-lg);
  margin-bottom: 24px;
  overflow: hidden;
}

.bbs-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid #ece6e0;
  background: #faf7f4;
}

.bbs-panel__header h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3a302a;
}

.bbs-panel--banner {
  background: #faf7f4;
  border-left: 4px solid #ccc;
  overflow: visible;
}

.bbs-panel--operational { border-left-color: var(--bb-operational); }
.bbs-panel--degraded    { border-left-color: var(--bb-degraded); }
.bbs-panel--partial-outage { border-left-color: var(--bb-partial); }
.bbs-panel--major-outage   { border-left-color: var(--bb-major); }
.bbs-panel--maintenance    { border-left-color: var(--bb-maintenance); }
.bbs-panel--unknown        { border-left-color: var(--bb-unknown); }

.bbs-panel-banner__left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  flex: 1;
}

.bbs-panel-banner__left strong {
  display: block;
  font-size: 1rem;
  color: #2a2420;
  margin-bottom: 4px;
}

.bbs-panel-banner__left p {
  margin: 0;
  font-size: 0.84rem;
  color: #666;
}

.bbs-panel-banner__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px 22px;
  gap: 2px;
}

.bbs-meta-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
}

.bbs-meta-value {
  font-size: 0.82rem;
  color: #555;
}

/* ---- Stat grid ---- */

.bbs-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.bbs-stat-card {
  background: #fff;
  border: 1px solid #e0dbd5;
  border-radius: var(--bb-radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: border-color 0.15s;
}

.bbs-stat-card__icon {
  font-size: 1.4rem;
  color: #bbb;
  margin-bottom: 4px;
}

.bbs-stat-card__value {
  font-size: 2rem;
  font-weight: 800;
  color: #2a2420;
  line-height: 1;
}

.bbs-stat-card__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
}

.bbs-stat--operational .bbs-stat-card__value { color: var(--bb-operational); }
.bbs-stat--operational .bbs-stat-card__icon  { color: var(--bb-operational); }
.bbs-stat--issue .bbs-stat-card__value       { color: var(--bb-partial); }
.bbs-stat--issue .bbs-stat-card__icon        { color: var(--bb-partial); }

/* ---- Tables ---- */

.bbs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.bbs-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a7f76;
  background: #faf7f4;
  border-bottom: 1px solid #ece6e0;
}

.bbs-table tbody tr {
  border-bottom: 1px solid #f0ebe5;
  transition: background 0.1s;
}

.bbs-table tbody tr:last-child {
  border-bottom: none;
}

.bbs-table tbody tr:hover {
  background: #fdf9f6;
}

.bbs-table tbody td, .bbs-table tbody th {
  padding: 10px 16px;
  color: #3a302a;
  vertical-align: middle;
}

.bbs-table--compact td, .bbs-table--compact th {
  padding: 8px 14px;
}

/* ---- Tags ---- */

.bbs-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 4px;
}

.bbs-tag--critical    { background: #ffe0e0; color: #c94040; }
.bbs-tag--muted       { background: #f0ece8; color: #8a7f76; }
.bbs-tag--override    { background: #fff3d6; color: #a07030; }
.bbs-tag--maintenance { background: #d6eaff; color: #3a6fa8; }
.bbs-tag--investigating{ background: #ffe8d6; color: #a05020; }
.bbs-tag--resolved    { background: #d8f5e8; color: #2d7a50; }

/* ---- Source indicator ---- */

.bbs-source {
  font-size: 0.78rem;
  color: #8a7f76;
}

/* ---- Key monospace ---- */

.bbs-key {
  font-family: var(--bb-font-mono);
  font-size: 0.76rem;
  color: #8a7f76;
  background: #f0ece8;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
}

/* ---- Action links ---- */

.bbs-actions {
  white-space: nowrap;
}

.bbs-actions a,
.bbs-link-btn {
  font-size: 0.8rem;
  color: #6a5c50;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-right: 10px;
  font-family: inherit;
}

.bbs-actions a:hover,
.bbs-link-btn:hover {
  color: var(--bb-accent-dark);
  text-decoration: underline;
}

.bbs-link-btn--danger {
  color: #c04040;
}

.bbs-link-btn--danger:hover {
  color: #a02020;
}

.bbs-order {
  color: #bbb;
  font-size: 0.8rem;
  text-align: center;
  width: 40px;
}

/* ---- Forms ---- */

.bbs-form {
  padding: 22px 24px;
}

.bbs-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-bottom: 20px;
}

.bbs-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bbs-form-group--full {
  grid-column: 1 / -1;
}

.bbs-form-group--checkboxes {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bbs-form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #3a302a;
}

.bbs-form-group input[type="text"],
.bbs-form-group input[type="number"],
.bbs-form-group input[type="datetime-local"],
.bbs-form-group select,
.bbs-form-group textarea {
  border: 1px solid #c8bfb5;
  border-radius: var(--bb-radius);
  padding: 8px 12px;
  font-size: 0.86rem;
  color: #2a2420;
  background: #fff;
  font-family: var(--bb-font);
  transition: border-color 0.15s;
}

.bbs-form-group input:focus,
.bbs-form-group select:focus,
.bbs-form-group textarea:focus {
  border-color: var(--bb-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(196, 162, 101, 0.2);
}

.bbs-form-group .description {
  font-size: 0.76rem;
  color: #999;
  margin: 0;
}

.bbs-req {
  color: var(--bb-partial);
}

.bbs-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 400 !important;
  color: #555;
  cursor: pointer;
}

.bbs-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #ece6e0;
  margin-top: 8px;
}

/* ---- Settings sections ---- */

.bbs-settings-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ece6e0;
}

.bbs-settings-section:last-of-type {
  border-bottom: none;
}

.bbs-settings-section h3 {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a7f76;
  margin: 0 0 14px;
}

/* ---- Timeline (admin) ---- */

.bbs-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #ece6e0;
  border-radius: var(--bb-radius);
  padding: 14px 16px;
  background: #faf7f4;
}

.bbs-timeline__entry {
  display: flex;
  gap: 14px;
  font-size: 0.82rem;
}

.bbs-timeline__time {
  color: #999;
  white-space: nowrap;
  min-width: 150px;
  flex-shrink: 0;
}

.bbs-timeline__msg {
  color: #555;
}

/* ---- Incident row (dashboard) ---- */

.bbs-incident-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid #f0ebe5;
  font-size: 0.86rem;
}

.bbs-incident-row:last-child {
  border-bottom: none;
}

.bbs-incident-row .bbs-meta {
  margin-left: auto;
  font-size: 0.76rem;
  color: #999;
}

/* ---- Diagnostics grid ---- */

.bbs-diagnostics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

/* ---- Empty states (admin) ---- */

.bbs-empty-state {
  padding: 32px;
  text-align: center;
}

.bbs-empty-state p {
  color: #999;
  font-size: 0.88rem;
  margin: 0;
}

.bbs-empty-state--good p {
  color: var(--bb-operational);
  font-size: 0.9rem;
}

/* ---- Panel alert ---- */

.bbs-panel--alert {
  border-left: 4px solid var(--bb-partial);
}

/* ---- Admin footer ---- */

.bbs-admin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 8px;
  font-size: 0.76rem;
  color: #bbb;
  border-top: 1px solid #ece6e0;
  margin-top: 8px;
}

.bbs-admin-footer a {
  color: var(--bb-accent);
  text-decoration: none;
}

/* ---- Toast / inline feedback ---- */

.bbs-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #2a2420;
  color: var(--bb-cream);
  padding: 12px 20px;
  border-radius: var(--bb-radius);
  font-size: 0.84rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 99999;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s;
  pointer-events: none;
}

.bbs-toast--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bbs-toast--success { border-left: 3px solid var(--bb-operational); }
.bbs-toast--error   { border-left: 3px solid var(--bb-major); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 768px) {
  .bb-status-banner {
    flex-direction: column;
    gap: 14px;
  }

  .bb-status-banner__updated {
    align-items: flex-start;
  }

  .bb-status-component-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .bb-status-incident__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .bb-status-timeline-entry {
    flex-direction: column;
    gap: 3px;
  }

  .bb-status-timeline-entry__time {
    min-width: auto;
    font-size: 0.75rem;
  }

  .bbs-form-grid {
    grid-template-columns: 1fr;
  }

  .bbs-form-group--full {
    grid-column: 1;
  }

  .bbs-diagnostics-grid {
    grid-template-columns: 1fr;
  }

  .bbs-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bbs-admin-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .bbs-panel-banner__left,
  .bbs-panel-banner__right {
    padding: 14px 16px;
  }

  .bbs-panel-banner__right {
    align-items: flex-start;
    padding-top: 0;
  }

  .bbs-table {
    font-size: 0.78rem;
  }

  .bbs-table thead th,
  .bbs-table tbody td,
  .bbs-table tbody th {
    padding: 8px 10px;
  }
}

@media screen and (max-width: 480px) {
  .bb-status-center {
    padding: 20px 14px 36px;
  }

  .bbs-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   DARK MODE — public page adapts if theme forces it
   ============================================================ */

@media (prefers-color-scheme: dark) {
  .bb-status-center {
    color: var(--bb-text-primary);
  }
}