/* =============================================
   UpPilot — Design System v2.0 (mobile-first)
   ============================================= */

:root {
  --c-primary:       #3B82F6;
  --c-primary-dark:  #2563EB;
  --c-primary-light: #EFF6FF;
  --c-success:       #10B981;
  --c-success-bg:    #D1FAE5;
  --c-warning:       #F59E0B;
  --c-warning-bg:    #FEF3C7;
  --c-danger:        #EF4444;
  --c-danger-bg:     #FEE2E2;
  --c-info:          #6366F1;
  --c-info-bg:       #EEF2FF;
  --c-neutral:       #6B7280;
  --c-neutral-bg:    #F3F4F6;

  --c-bg:            #F9FAFB;
  --c-surface:       #FFFFFF;
  --c-border:        #E5E7EB;
  --c-border-dark:   #D1D5DB;
  --c-text:          #111827;
  --c-text-muted:    #6B7280;
  --c-text-light:    #9CA3AF;

  --sidebar-bg:      #1E293B;
  --sidebar-hover:   #334155;
  --sidebar-active:  #3B82F6;
  --sidebar-text:    #CBD5E1;
  --sidebar-text-2:  #94A3B8;
  --sidebar-w:       256px;

  --topbar-h:        60px;

  --font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06);

  --t: all .15s ease;
}

/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--c-text); background: var(--c-bg); line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }
input, select, textarea { font-family: var(--font); }
ul { list-style: none; }

/* ── Typography ──────────────────────────────── */
h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 1rem;     font-weight: 600; line-height: 1.4; }
p  { line-height: 1.7; color: var(--c-text-muted); }
small { font-size: .8125rem; }
code  { font-family: var(--font-mono); font-size: .875em; background: var(--c-neutral-bg); padding: 2px 6px; border-radius: var(--r-sm); }

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-md);
  font-size: .875rem; font-weight: 500; line-height: 1;
  transition: var(--t); white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }

.btn-primary   { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }
.btn-secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-dark); }
.btn-secondary:hover { background: var(--c-bg); color: var(--c-text); }
.btn-danger    { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-success   { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.btn-ghost     { background: transparent; color: var(--c-text); border-color: transparent; }
.btn-ghost:hover { background: var(--c-neutral-bg); color: var(--c-text); }
.btn-warning   { background: var(--c-warning); color: #fff; border-color: var(--c-warning); }

.btn-sm  { padding: 6px 12px; font-size: .8125rem; }
.btn-lg  { padding: 12px 28px; font-size: 1rem; }
.btn-xl  { padding: 15px 36px; font-size: 1.0625rem; border-radius: var(--r-lg); }
.btn-block { width: 100%; justify-content: center; }

.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: ''; position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

/* ── Forms ───────────────────────────────────── */
.form-group   { margin-bottom: 20px; }
.form-label   { display: block; font-size: .875rem; font-weight: 500; color: var(--c-text); margin-bottom: 6px; }
.form-hint    { font-size: .8125rem; color: var(--c-text-muted); margin-top: 4px; }
.form-error   { font-size: .8125rem; color: var(--c-danger); margin-top: 4px; }
.form-required::after { content: ' *'; color: var(--c-danger); }

.form-input, .form-select, .form-textarea {
  display: block; width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--c-border-dark); border-radius: var(--r-md);
  font-size: .9375rem; color: var(--c-text); background: var(--c-surface);
  transition: border-color .15s ease, box-shadow .15s ease; outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.form-input.is-invalid, .form-select.is-invalid { border-color: var(--c-danger); }
.form-textarea { min-height: 100px; resize: vertical; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 36px;
}

.input-group { display: flex; }
.input-group .form-input { border-radius: 0; flex: 1; }
.input-group .form-input:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.input-group .form-input:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
.input-group-text {
  display: flex; align-items: center; padding: 9px 12px;
  background: var(--c-neutral-bg); border: 1.5px solid var(--c-border-dark);
  font-size: .875rem; color: var(--c-text-muted);
  border-radius: var(--r-md) 0 0 var(--r-md); border-right: none;
}
.input-group-btn {
  display: flex; align-items: center; padding: 9px 12px;
  background: var(--c-neutral-bg); border: 1.5px solid var(--c-border-dark);
  font-size: .875rem; color: var(--c-text-muted); cursor: pointer;
  border-radius: 0 var(--r-md) var(--r-md) 0; border-left: none; transition: var(--t);
}
.input-group-btn:hover { background: var(--c-border); color: var(--c-text); }

.form-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.form-check input[type="checkbox"], .form-check input[type="radio"] {
  width: 16px; height: 16px; accent-color: var(--c-primary); cursor: pointer; flex-shrink: 0;
}

.form-row { display: grid; gap: 16px; grid-template-columns: 1fr; }

/* ── Cards ───────────────────────────────────── */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-title  { font-size: 1rem; font-weight: 600; color: var(--c-text); }
.card-body   { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--c-border); background: var(--c-bg); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ── Badges ──────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.badge-success { background: var(--c-success-bg); color: #065f46; }
.badge-warning { background: var(--c-warning-bg); color: #92400e; }
.badge-danger  { background: var(--c-danger-bg);  color: #991b1b; }
.badge-info    { background: var(--c-info-bg);    color: #3730a3; }
.badge-neutral { background: var(--c-neutral-bg); color: var(--c-neutral); }
.badge-primary { background: var(--c-primary-light); color: var(--c-primary-dark); }

/* ── Status dots ─────────────────────────────── */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.up      { background: var(--c-success); animation: pulse-green 2s infinite; }
.status-dot.down    { background: var(--c-danger); }
.status-dot.paused  { background: var(--c-neutral); }
.status-dot.unknown { background: var(--c-neutral); }
.status-dot.pending { background: var(--c-warning); animation: pulse-yellow 1.5s infinite; }

@keyframes pulse-green  { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 50% { box-shadow: 0 0 0 4px rgba(16,185,129,0); } }
@keyframes pulse-yellow { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.6); } 50% { box-shadow: 0 0 0 4px rgba(245,158,11,0); } }
@keyframes spin         { to { transform: rotate(360deg); } }
@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInUp    { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn       { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse        { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Tables ──────────────────────────────────── */
.table-wrapper { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--c-border); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 600px; }
/* Tablas internas (detalles, formularios) que no necesitan scroll horizontal */
table.detail-table,
table.table-auto { min-width: 0; }
thead th { padding: 12px 16px; text-align: left; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); background: var(--c-bg); border-bottom: 1px solid var(--c-border); white-space: nowrap; }
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--c-bg); }
.table-actions { display: flex; gap: 6px; align-items: center; }

/* ── Alerts ──────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--r-md); border: 1px solid; font-size: .9rem; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.alert-success { background: var(--c-success-bg); border-color: #6ee7b7; color: #065f46; }
.alert-danger  { background: var(--c-danger-bg);  border-color: #fca5a5; color: #991b1b; }
.alert-warning { background: var(--c-warning-bg); border-color: #fcd34d; color: #92400e; }
.alert-info    { background: var(--c-info-bg);    border-color: #a5b4fc; color: #3730a3; }

/* ── Stat cards ──────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat-card  { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px; }
.stat-label { font-size: .8125rem; color: var(--c-text-muted); font-weight: 500; margin-bottom: 4px; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--c-text); line-height: 1.1; }
.stat-sub   { font-size: .8125rem; color: var(--c-text-muted); margin-top: 2px; }
.stat-card.stat-up   .stat-value { color: var(--c-success); }
.stat-card.stat-down .stat-value { color: var(--c-danger); }
.stat-card.stat-warn .stat-value { color: var(--c-warning); }

/* ── Uptime bars ─────────────────────────────── */
.uptime-bar-wrap { background: var(--c-border); border-radius: var(--r-full); height: 8px; overflow: hidden; }
.uptime-bar      { height: 100%; border-radius: var(--r-full); transition: width .3s ease; }
.uptime-bar.high   { background: var(--c-success); }
.uptime-bar.medium { background: var(--c-warning); }
.uptime-bar.low    { background: var(--c-danger); }

.uptime-blocks { display: flex; gap: 2px; align-items: flex-end; height: 32px; }
.uptime-block  { flex: 1; border-radius: 2px; min-height: 4px; cursor: default; transition: opacity .15s; position: relative; }
.uptime-block:hover { opacity: .7; }
.uptime-block.up       { background: var(--c-success); height: 100%; }
.uptime-block.down     { background: var(--c-danger);  height: 40%; }
.uptime-block.degraded { background: var(--c-warning); height: 70%; }
.uptime-block.no-data  { background: var(--c-border);  height: 60%; }

/* ── Modal ───────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; padding: 0; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal { background: var(--c-surface); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg); width: 100%; max-height: 90vh; overflow-y: auto; transform: translateY(20px); transition: transform .25s ease; }
.modal-overlay.active .modal { transform: translateY(0); }
.modal-header { padding: 20px 20px 16px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--c-surface); z-index: 1; }
.modal-title  { font-size: 1.125rem; font-weight: 600; }
.modal-close  { color: var(--c-text-muted); font-size: 1.25rem; padding: 6px; border-radius: var(--r-sm); cursor: pointer; }
.modal-close:hover { color: var(--c-text); background: var(--c-neutral-bg); }
.modal-body   { padding: 20px; }
.modal-footer { padding: 16px 20px; border-top: 1px solid var(--c-border); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ── Toast ───────────────────────────────────── */
.toast-container { position: fixed; bottom: 16px; right: 16px; left: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: .875rem; pointer-events: all; animation: slideInUp .25s ease; }
.toast.toast-success { border-left: 4px solid var(--c-success); }
.toast.toast-error   { border-left: 4px solid var(--c-danger); }
.toast.toast-warning { border-left: 4px solid var(--c-warning); }
.toast.toast-info    { border-left: 4px solid var(--c-primary); }
.toast-icon    { font-size: 1rem; flex-shrink: 0; }
.toast-message { flex: 1; line-height: 1.4; }
.toast-close   { font-size: .75rem; color: var(--c-text-muted); cursor: pointer; padding: 2px; }

/* ── Dropdown ────────────────────────────────── */
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); min-width: 180px; z-index: 100; padding: 4px; display: none; }
.dropdown-menu.open { display: block; animation: slideInUp .15s ease; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md); font-size: .875rem; color: var(--c-text); width: 100%; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--c-bg); text-decoration: none; }
.dropdown-divider { height: 1px; background: var(--c-border); margin: 4px 0; }

/* ── Empty state ─────────────────────────────── */
.empty-state { text-align: center; padding: 48px 20px; }
.empty-state-icon { width: 64px; height: 64px; background: var(--c-neutral-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.75rem; color: var(--c-text-muted); }
.empty-state h3 { font-size: 1.125rem; margin-bottom: 8px; }
.empty-state p  { max-width: 380px; margin: 0 auto 20px; }

/* ── Pagination ──────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-btn { padding: 6px 12px; border-radius: var(--r-md); font-size: .875rem; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; transition: var(--t); }
.page-btn:hover  { background: var(--c-bg); }
.page-btn.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.page-btn:disabled { opacity: .4; pointer-events: none; }

/* ── Tabs ────────────────────────────────────── */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--c-border); margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-btn { padding: 10px 16px; font-size: .875rem; font-weight: 500; color: var(--c-text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: var(--t); white-space: nowrap; flex-shrink: 0; }
.tab-btn:hover { color: var(--c-text); }
.tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn .2s ease; }

/* ── Skeleton loading ────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--c-border) 25%, var(--c-bg) 50%, var(--c-border) 75%); background-size: 200%; animation: shimmer 1.5s infinite; border-radius: var(--r-md); }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.sk-text  { height: 14px; margin-bottom: 8px; }
.sk-title { height: 20px; width: 60%; margin-bottom: 12px; }
.sk-box   { height: 80px; }

/* ══════════════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════════════ */

.app-body { background: var(--c-bg); }
.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh;
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  z-index: 300; transition: transform .25s ease;
  overflow-y: auto; overflow-x: hidden;
  transform: translateX(calc(-1 * var(--sidebar-w)));
}
.sidebar.open { transform: translateX(0); }
.sidebar-header { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.sidebar-brand  { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; text-decoration: none; }
.sidebar-brand i { font-size: 1.25rem; color: var(--c-primary); }
.sidebar-brand:hover { text-decoration: none; }

.sidebar-nav           { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-section       { display: flex; flex-direction: column; gap: 2px; }
.sidebar-section-label { padding: 12px 12px 4px; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-text-2); }

.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md); color: var(--sidebar-text); font-size: .875rem; font-weight: 500; transition: var(--t); text-decoration: none; }
.sidebar-link i     { width: 16px; text-align: center; font-size: .875rem; flex-shrink: 0; }
.sidebar-link:hover  { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.sidebar-link.active { background: var(--sidebar-active); color: #fff; }

.sidebar-footer  { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.plan-badge      { font-size: .8125rem; color: var(--sidebar-text-2); margin-bottom: 10px; }
.plan-badge i    { color: var(--c-success); margin-right: 4px; }
.upgrade-link    { color: var(--c-primary); }
.sidebar-logout  { display: flex; align-items: center; gap: 8px; color: var(--sidebar-text-2); font-size: .875rem; padding: 6px 4px; border-radius: var(--r-md); transition: var(--t); }
.sidebar-logout:hover { color: var(--c-danger); }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 299; }
.sidebar-overlay.active { display: block; }

.app-main   { margin-left: 0; flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }

.app-topbar { height: var(--topbar-h); background: var(--c-surface); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 12px; padding: 0 16px; position: sticky; top: 0; z-index: 100; }
.sidebar-toggle { color: var(--c-text-muted); font-size: 1.125rem; display: flex; padding: 6px 8px; border-radius: var(--r-md); flex-shrink: 0; }
.sidebar-toggle:hover { background: var(--c-bg); color: var(--c-text); }
.topbar-title   { font-size: .9375rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }

.user-menu { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 5px 8px; border-radius: var(--r-lg); position: relative; user-select: none; }
.user-menu:hover { background: var(--c-bg); }
.user-avatar  { width: 30px; height: 30px; background: var(--c-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; flex-shrink: 0; }
.user-name-sm { font-size: .875rem; font-weight: 500; display: none; }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 6px); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); min-width: 190px; z-index: 400; padding: 6px; display: none; }
.user-menu.open .user-dropdown { display: block; animation: slideInUp .15s ease; }
.user-dropdown a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md); font-size: .875rem; color: var(--c-text); }
.user-dropdown a:hover { background: var(--c-bg); text-decoration: none; }
.user-dropdown a i { width: 14px; }
.user-dropdown .dropdown-divider { margin: 6px 0; }
.user-dropdown form button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md); font-size: .875rem; color: var(--c-danger); width: 100%; }
.user-dropdown form button:hover { background: var(--c-danger-bg); }

.app-content { flex: 1; padding: 16px; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.page-header-title h1 { font-size: 1.375rem; font-weight: 700; margin-bottom: 2px; }
.page-header-title p  { font-size: .875rem; }
.page-header-actions  { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Filters bar ─────────────────────────────── */
.filters-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filters-bar .form-input,
.filters-bar .form-select { width: auto; flex: 1; min-width: 120px; max-width: 220px; }
.filters-bar .form-input.search { flex: 2; max-width: 320px; }

/* ── Monitor items ───────────────────────────── */
.monitor-list { display: flex; flex-direction: column; gap: 8px; }
.monitor-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; transition: var(--t); }
.monitor-item:hover { border-color: var(--c-border-dark); box-shadow: var(--shadow-sm); }
.monitor-item.is-down    { border-left: 3px solid var(--c-danger); }
.monitor-item.is-up      { border-left: 3px solid var(--c-success); }
.monitor-item.is-paused  { border-left: 3px solid var(--c-neutral); }
.monitor-item.is-pending { border-left: 3px solid var(--c-warning); }

.monitor-status  { flex-shrink: 0; }
.monitor-info    { flex: 1; min-width: 0; }
.monitor-name    { font-weight: 600; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monitor-url     { font-size: .8125rem; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monitor-meta    { display: none; align-items: center; gap: 12px; flex-shrink: 0; }
.monitor-uptime  { font-size: .875rem; font-weight: 600; }
.monitor-resp    { font-size: .8125rem; color: var(--c-text-muted); }
.monitor-actions { display: flex; gap: 4px; flex-shrink: 0; }

.icon-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: var(--c-text-muted); transition: var(--t); font-size: .875rem; text-decoration: none; }
.icon-btn:hover { background: var(--c-bg); color: var(--c-text); text-decoration: none; }
.icon-btn.danger:hover { background: var(--c-danger-bg); color: var(--c-danger); }

/* ── Chart containers ────────────────────────── */
.chart-container { position: relative; width: 100%; }
.chart-container canvas { width: 100% !important; }
.chart-sm { height: 120px; }
.chart-md { height: 200px; }
.chart-lg { height: 280px; }

/* ── Type selector cards ─────────────────────── */
.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.type-card { border: 2px solid var(--c-border); border-radius: var(--r-lg); padding: 14px; cursor: pointer; transition: var(--t); background: var(--c-surface); }
.type-card:hover { border-color: var(--c-primary); background: var(--c-primary-light); }
.type-card.selected { border-color: var(--c-primary); background: var(--c-primary-light); }
.type-card input[type="radio"] { display: none; }
.type-card-icon { font-size: 1.25rem; color: var(--c-primary); margin-bottom: 6px; }
.type-card-label { font-size: .875rem; font-weight: 600; }
.type-card-desc  { font-size: .75rem; color: var(--c-text-muted); margin-top: 2px; }

/* ── Heartbeat URL box ───────────────────────── */
.hb-url-box { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: .8125rem; word-break: break-all; }

/* ── Maintenance banner ──────────────────────── */
.maintenance-banner { background: var(--c-warning-bg); border: 1px solid #fcd34d; border-radius: var(--r-md); padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: .875rem; color: #92400e; margin-bottom: 16px; }
.maintenance-banner i { flex-shrink: 0; }

/* ── Incident timeline ───────────────────────── */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--c-border); }
.timeline-item { position: relative; padding-bottom: 20px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot  { position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-surface); box-shadow: 0 0 0 2px var(--c-border); }
.timeline-dot.investigating { background: var(--c-danger); }
.timeline-dot.identified    { background: var(--c-warning); }
.timeline-dot.monitoring    { background: var(--c-primary); }
.timeline-dot.resolved      { background: var(--c-success); }
.timeline-time   { font-size: .75rem; color: var(--c-text-muted); margin-bottom: 4px; }
.timeline-status { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.timeline-msg    { font-size: .875rem; color: var(--c-text); }

/* ── Team members ────────────────────────────── */
.team-grid { display: grid; gap: 12px; }
.team-member-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.team-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--c-info-bg); color: var(--c-info); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .875rem; flex-shrink: 0; }
.team-info   { flex: 1; min-width: 0; }
.team-name   { font-weight: 600; font-size: .9375rem; }
.team-email  { font-size: .8125rem; color: var(--c-text-muted); }
.team-role   { flex-shrink: 0; }

/* ── Status badge embeddable ─────────────────── */
.badge-preview { display: flex; flex-direction: column; gap: 12px; }
.badge-preview-item { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 16px; text-align: center; }
.badge-preview-item .code-block { background: var(--c-neutral-bg); border-radius: var(--r-sm); padding: 8px 12px; font-family: var(--font-mono); font-size: .75rem; word-break: break-all; margin-top: 10px; text-align: left; }

/* ── API docs ────────────────────────────────── */
.api-endpoint { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; }
.api-endpoint-header { padding: 14px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.api-method { padding: 3px 10px; border-radius: var(--r-sm); font-size: .75rem; font-weight: 700; font-family: var(--font-mono); flex-shrink: 0; }
.api-method.get    { background: #d1fae5; color: #065f46; }
.api-method.post   { background: #dbeafe; color: #1e40af; }
.api-method.put    { background: #fef3c7; color: #92400e; }
.api-method.delete { background: #fee2e2; color: #991b1b; }
.api-path { font-family: var(--font-mono); font-size: .875rem; flex: 1; }
.api-desc { font-size: .875rem; color: var(--c-text-muted); }
.api-body  { padding: 16px 18px; border-top: 1px solid var(--c-border); background: var(--c-bg); display: none; }
.api-body.open { display: block; }
.api-code  { background: #1e293b; color: #e2e8f0; border-radius: var(--r-md); padding: 14px; font-family: var(--font-mono); font-size: .8125rem; overflow-x: auto; white-space: pre; }

/* ── Plan usage bars ─────────────────────────── */
.plan-usage-item { margin-bottom: 14px; }
.plan-usage-label { display: flex; justify-content: space-between; font-size: .8125rem; margin-bottom: 4px; }
.plan-usage-bar-wrap { background: var(--c-border); border-radius: var(--r-full); height: 6px; overflow: hidden; }
.plan-usage-bar { height: 100%; border-radius: var(--r-full); background: var(--c-primary); transition: width .5s ease; }
.plan-usage-bar.warn { background: var(--c-warning); }
.plan-usage-bar.full { background: var(--c-danger); }

/* ── Maintenance windows ─────────────────────── */
.mw-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px; margin-bottom: 10px; }
.mw-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mw-name { font-weight: 600; }
.mw-time { font-size: .8125rem; color: var(--c-text-muted); display: flex; align-items: center; gap: 6px; }
.mw-recurring-badge { background: var(--c-info-bg); color: var(--c-info); border-radius: var(--r-full); padding: 2px 8px; font-size: .75rem; font-weight: 600; }

/* ── Alert channel cards ─────────────────────── */
.channel-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px; display: flex; align-items: center; gap: 14px; }
.channel-icon { width: 40px; height: 40px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.channel-icon.email    { background: #dbeafe; color: #1e40af; }
.channel-icon.telegram { background: #e0f2fe; color: #0284c7; }
.channel-icon.slack    { background: #fef3c7; color: #92400e; }
.channel-icon.discord  { background: #ede9fe; color: #5b21b6; }
.channel-icon.webhook  { background: var(--c-neutral-bg); color: var(--c-neutral); }
.channel-icon.whatsapp { background: #dcfce7; color: #166534; }
.channel-icon.pagerduty { background: #fce7f3; color: #9d174d; }
.channel-icon.opsgenie { background: #fff7ed; color: #9a3412; }
.channel-icon.push     { background: #f5f3ff; color: #5b21b6; }
.channel-info { flex: 1; min-width: 0; }
.channel-name { font-weight: 600; }
.channel-type { font-size: .8125rem; color: var(--c-text-muted); }
.channel-status { font-size: .75rem; display: flex; align-items: center; gap: 4px; margin-top: 4px; }

/* ── Toggle switch ───────────────────────────── */
.toggle-wrap { display: flex; align-items: center; gap: 8px; }
.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; inset: 0; background: var(--c-border-dark); border-radius: var(--r-full); cursor: pointer; transition: .2s; }
.toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle input:checked + .toggle-slider { background: var(--c-primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ── Scheduled reports ───────────────────────── */
.report-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px; }
.report-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.report-name { font-weight: 600; }
.report-meta { font-size: .8125rem; color: var(--c-text-muted); display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Push notification opt-in ────────────────── */
.push-opt-in { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1px solid #bfdbfe; border-radius: var(--r-lg); padding: 20px; display: flex; align-items: center; gap: 16px; }
.push-opt-in-icon { width: 44px; height: 44px; background: var(--c-primary); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; flex-shrink: 0; }
.push-opt-in-text h4 { margin-bottom: 4px; }
.push-opt-in-text p  { font-size: .875rem; }

/* ── Status page public ──────────────────────── */
.status-page-public { min-height: 100vh; background: var(--c-bg); }
.status-page-header { padding: 32px 16px 24px; text-align: center; }
.status-page-header h1 { font-size: 1.5rem; margin-bottom: 8px; }
.status-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: var(--r-lg); margin-bottom: 24px; font-weight: 600; font-size: 1rem; }
.status-banner.all-up    { background: var(--c-success-bg); color: #065f46; }
.status-banner.some-down { background: var(--c-danger-bg);  color: #991b1b; }
.status-banner.degraded  { background: var(--c-warning-bg); color: #92400e; }

.status-page-body { max-width: 720px; margin: 0 auto; padding: 0 16px 40px; }
.status-component { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-component-name { font-weight: 500; font-size: .9375rem; }
.status-component-uptime { font-size: .8125rem; color: var(--c-text-muted); margin-top: 2px; }

.incident-public { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px; background: var(--c-surface); }
.incident-public-title { font-weight: 600; margin-bottom: 4px; font-size: .9375rem; }
.incident-public-date  { font-size: .8125rem; color: var(--c-text-muted); margin-bottom: 12px; }

/* ── Public status page powered-by ──────────── */
.powered-by { text-align: center; padding: 20px; font-size: .8125rem; color: var(--c-text-light); }
.powered-by a { color: var(--c-text-muted); }
.powered-by a:hover { color: var(--c-text); }

/* ── Export buttons ──────────────────────────── */
.export-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════
   PUBLIC / LANDING
   ══════════════════════════════════════════════ */

.public-body { background: #fff; }

.public-nav  { position: sticky; top: 0; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); z-index: 100; }
.nav-container { max-width: 1100px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; gap: 24px; }
.nav-brand   { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.125rem; color: var(--c-text); text-decoration: none; flex-shrink: 0; }
.brand-icon  { width: 30px; height: 30px; background: var(--c-primary); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .875rem; }
.nav-links   { display: none; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--c-text-muted); font-size: .9rem; font-weight: 500; padding: 6px 12px; border-radius: var(--r-md); transition: var(--t); text-decoration: none; }
.nav-links a:hover { color: var(--c-text); background: var(--c-bg); }
.mobile-menu-btn { display: flex; color: var(--c-text); font-size: 1.25rem; margin-left: auto; padding: 4px; }
.mobile-nav  { display: none; flex-direction: column; padding: 8px 16px; border-top: 1px solid var(--c-border); background: #fff; }
.mobile-nav a { padding: 10px 0; color: var(--c-text); font-size: .9rem; border-bottom: 1px solid var(--c-border); text-decoration: none; }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav.open { display: flex; }

.hero        { text-align: center; padding: 52px 16px 44px; }
.hero-badge  { display: inline-flex; align-items: center; gap: 6px; background: var(--c-primary-light); color: var(--c-primary-dark); border-radius: var(--r-full); padding: 5px 14px; font-size: .8125rem; font-weight: 600; margin-bottom: 16px; }
.hero h1     { font-size: clamp(1.75rem, 5vw, 3rem); margin-bottom: 16px; color: var(--c-text); }
.hero p.subtitle { font-size: 1rem; color: var(--c-text-muted); max-width: 580px; margin: 0 auto 28px; line-height: 1.7; }
.hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero-trust  { margin-top: 36px; font-size: .875rem; color: var(--c-text-muted); display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.hero-trust-item { display: flex; align-items: center; gap: 6px; }
.hero-trust-item i { color: var(--c-success); }

.hero-preview { max-width: 900px; margin: 0 auto 60px; padding: 0 16px; }
.preview-card    { border-radius: var(--r-xl); border: 1px solid var(--c-border); box-shadow: 0 20px 50px rgba(0,0,0,.1); overflow: hidden; }
.preview-bar     { background: var(--sidebar-bg); padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
.preview-dot     { width: 10px; height: 10px; border-radius: 50%; }
.preview-dot-r { background: #ef4444; } .preview-dot-y { background: #f59e0b; } .preview-dot-g { background: #10b981; }
.preview-content { background: var(--c-bg); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.preview-monitor { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: .875rem; }
.preview-monitor.down { border-left: 3px solid var(--c-danger); }
.preview-monitor.up   { border-left: 3px solid var(--c-success); }
.preview-name   { font-weight: 600; flex: 1; }
.preview-uptime { color: var(--c-success); font-weight: 600; font-size: .8125rem; }
.preview-uptime.down { color: var(--c-danger); }

.section        { padding: 56px 16px; }
.section-alt    { background: var(--c-bg); }
.section-inner  { max-width: 1100px; margin: 0 auto; }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.section-header h2 { margin-bottom: 10px; }
.section-label  { display: inline-block; background: var(--c-primary-light); color: var(--c-primary-dark); border-radius: var(--r-full); padding: 4px 14px; font-size: .8125rem; font-weight: 600; margin-bottom: 12px; }

.features-grid  { display: grid; grid-template-columns: 1fr; gap: 16px; }
.feature-card   { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 20px; transition: var(--t); }
.feature-card:hover { box-shadow: var(--shadow-md); border-color: var(--c-primary); }
.feature-icon   { width: 40px; height: 40px; background: var(--c-primary-light); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; color: var(--c-primary); font-size: 1rem; margin-bottom: 12px; }
.feature-card h4 { margin-bottom: 6px; }
.feature-card p  { font-size: .875rem; }

.pricing-grid  { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 960px; margin: 0 auto; }
.pricing-card  { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 24px 20px; display: flex; flex-direction: column; position: relative; transition: var(--t); }
.pricing-card.featured { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--c-primary); color: #fff; border-radius: var(--r-full); padding: 3px 14px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pricing-name  { font-size: .875rem; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.pricing-price { font-size: 2.25rem; font-weight: 800; color: var(--c-text); line-height: 1; margin-bottom: 4px; }
.pricing-price span { font-size: 1rem; font-weight: 400; color: var(--c-text-muted); }
.pricing-desc  { font-size: .875rem; color: var(--c-text-muted); margin-bottom: 16px; }
.pricing-features { flex: 1; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.pricing-feat  { display: flex; align-items: center; gap: 8px; font-size: .875rem; }
.pricing-feat i { color: var(--c-success); font-size: .75rem; flex-shrink: 0; }
.pricing-feat.disabled { color: var(--c-text-light); }
.pricing-feat.disabled i { color: var(--c-text-light); }

.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-q    { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-weight: 600; font-size: .9375rem; color: var(--c-text); cursor: pointer; gap: 16px; background: none; border: none; text-align: left; }
.faq-q:hover { color: var(--c-primary); }
.faq-q i  { font-size: .75rem; color: var(--c-text-muted); flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-a    { display: none; padding: 0 0 16px; color: var(--c-text-muted); line-height: 1.7; font-size: .9375rem; }
.faq-item.open .faq-a { display: block; }

.cta-section { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); padding: 60px 16px; text-align: center; }
.cta-section h2 { color: #fff; margin-bottom: 14px; }
.cta-section p  { color: #94A3B8; max-width: 480px; margin: 0 auto 28px; }

.public-footer { background: var(--sidebar-bg); color: var(--sidebar-text); padding: 40px 16px 0; }
.footer-container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
.footer-brand p  { font-size: .875rem; color: var(--sidebar-text-2); margin-top: 8px; }
.footer-links    { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.footer-links div { display: flex; flex-direction: column; gap: 8px; }
.footer-links strong { color: #fff; font-size: .875rem; margin-bottom: 2px; }
.footer-links a  { color: var(--sidebar-text-2); font-size: .875rem; text-decoration: none; transition: var(--t); }
.footer-links a:hover { color: #fff; }
.footer-bottom   { border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0; max-width: 1100px; margin: 0 auto; font-size: .8125rem; color: var(--sidebar-text-2); }

/* ── Auth pages ──────────────────────────────── */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--c-bg); }
.auth-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 28px 24px; width: 100%; max-width: 420px; }
.auth-logo { text-align: center; margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.auth-logo-icon { width: 44px; height: 44px; background: var(--c-primary); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.375rem; }
.auth-logo-name { font-size: 1.125rem; font-weight: 700; color: var(--c-text); }
.auth-title    { font-size: 1.25rem; font-weight: 700; text-align: center; margin-bottom: 4px; }
.auth-subtitle { text-align: center; font-size: .875rem; color: var(--c-text-muted); margin-bottom: 24px; }
.auth-footer   { text-align: center; margin-top: 16px; font-size: .875rem; color: var(--c-text-muted); }

/* ── Password strength ───────────────────────── */
.pw-strength { display: flex; gap: 4px; margin-top: 6px; }
.pw-strength-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--c-border); transition: background .3s; }
.pw-strength-bar.active.weak   { background: var(--c-danger); }
.pw-strength-bar.active.fair   { background: var(--c-warning); }
.pw-strength-bar.active.good   { background: var(--c-primary); }
.pw-strength-bar.active.strong { background: var(--c-success); }

/* ── Utilities ───────────────────────────────── */
.text-muted   { color: var(--c-text-muted) !important; }
.text-danger  { color: var(--c-danger)     !important; }
.text-success { color: var(--c-success)    !important; }
.text-warning { color: var(--c-warning)    !important; }
.text-primary { color: var(--c-primary)    !important; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mt-4  { margin-top:    4px; } .mt-8  { margin-top:    8px; } .mt-16 { margin-top:  16px; } .mt-24 { margin-top:  24px; }
.mb-4  { margin-bottom: 4px; } .mb-8  { margin-bottom: 8px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }
.d-flex { display: flex; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.align-center { align-items: center; } .justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-100 { width: 100%; }
.hidden { display: none !important; }

/* ── Print ───────────────────────────────────── */
@media print {
  .sidebar, .app-topbar, .sidebar-overlay, .toast-container, .page-header-actions, .monitor-actions, .table-actions, .btn { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0 !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; }
}

/* ── Grids de dos columnas (responsive) ──────── */
.two-col-grid    { display:grid; gap:20px; grid-template-columns:1fr; align-items:start; }
.two-col-grid-sm { display:grid; gap:16px; grid-template-columns:1fr; }

@media (min-width: 1024px) {
  .two-col-grid    { grid-template-columns:1fr 320px; }
  .two-col-grid-sm { grid-template-columns:1fr 360px; }
}

/* Bloque de uptime — scrollable en pantallas pequeñas si JS pone demasiados bloques */
.blocks-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.blocks-wrap > .blocks-inner { min-width:0; }

/* ══════════════════════════════════════════════
   MOBILE  < 640px
   ══════════════════════════════════════════════ */
@media (max-width: 639px) {
  .d-none-mobile { display: none !important; }

  /* Tabla de monitores: oculta columnas secundarias */
  .monitors-table th:nth-child(3),
  .monitors-table td:nth-child(3),
  .monitors-table th:nth-child(4),
  .monitors-table td:nth-child(4),
  .monitors-table th:nth-child(5),
  .monitors-table td:nth-child(5),
  .monitors-table th:nth-child(6),
  .monitors-table td:nth-child(6) { display: none; }

  /* Historial de checks: oculta columnas HTTP y tiempo */
  .history-table th:nth-child(3),
  .history-table td:nth-child(3),
  .history-table th:nth-child(4),
  .history-table td:nth-child(4) { display: none; }

  /* Daily blocks */
  .daily-blocks-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .daily-blocks-wrap > div { min-width: 0; }

  /* Acción de monitores: botones más compactos */
  .monitor-actions-cell { min-width: 110px; }

  /* Filtros de fecha en historial: stack vertical */
  .history-filter-form { flex-direction: column; align-items: flex-start !important; }

  /* Monitor view: tabla de detalles con menos padding */
  .detail-table td { padding: 4px 0 !important; font-size: .8125rem; }

  /* Leyenda de bloques: permitir wrap */
  .blocks-legend { flex-wrap: wrap !important; gap: 6px !important; }
}

/* ══════════════════════════════════════════════
   TABLET  ≥ 640px
   ══════════════════════════════════════════════ */
@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row   { grid-template-columns: repeat(2, 1fr); }
  .type-grid  { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid  { grid-template-columns: repeat(2, 1fr); }
  .team-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
  .toast-container { left: auto; right: 20px; bottom: 20px; width: 360px; }
  .auth-card { padding: 36px 40px; }
  .hero { padding: 72px 24px 56px; }
  .hero p.subtitle { font-size: 1.125rem; }
  .section { padding: 64px 24px; }
  .monitor-meta { display: flex; }
  .user-name-sm { display: inline; }
  .status-page-header { padding: 48px 24px 32px; }
  .status-page-header h1 { font-size: 2rem; }
  .status-page-body { padding: 0 24px 48px; }
  .badge-preview { flex-direction: row; }
  .badge-preview-item { flex: 1; }
}

/* ══════════════════════════════════════════════
   DESKTOP  ≥ 1024px
   ══════════════════════════════════════════════ */
@media (min-width: 1024px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }

  .sidebar { transform: translateX(0); }
  .sidebar-toggle { display: none; }
  .app-main { margin-left: var(--sidebar-w); }
  .app-topbar { padding: 0 28px; }
  .app-content { padding: 28px; }

  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .stat-value { font-size: 2rem; }
  .monitor-detail-grid { grid-template-columns: 1fr 320px; }

  .type-grid { grid-template-columns: repeat(4, 1fr); }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid  { grid-template-columns: repeat(4, 1fr); }
  .team-grid  { grid-template-columns: repeat(3, 1fr); }

  .modal-overlay { align-items: center; padding: 20px; }
  .modal { border-radius: var(--r-xl); max-width: 560px; }

  .nav-links   { display: flex; }
  .mobile-menu-btn { display: none; }

  .hero { padding: 96px 24px 72px; }
  .section { padding: 80px 24px; }
  .footer-container { grid-template-columns: 1fr auto; gap: 48px; }
  .footer-links { grid-template-columns: repeat(3, 1fr); gap: 40px; }

  .page-header-title h1 { font-size: 1.5rem; }
  .topbar-title { display: block; }

  .form-row.form-row-3 { grid-template-columns: repeat(3, 1fr); }
  .form-row.form-row-4 { grid-template-columns: repeat(4, 1fr); }

  .status-page-body { padding: 0 0 60px; }
}

/* ══════════════════════════════════════════════
   WIDE  ≥ 1280px
   ══════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .app-content { padding: 32px 36px; }
  .stats-grid { gap: 20px; }
}

/* ══════════════════════════════════════════════
   APP NATIVA (Capacitor) — respeta notch / status bar
   ══════════════════════════════════════════════ */
.is-native-app .sidebar-header,
.is-native-app .public-body .navbar {
  padding-top: calc(env(safe-area-inset-top) + 12px);
}
.is-native-app .app-topbar {
  padding-top: env(safe-area-inset-top);
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
}
.is-native-app .app-content {
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}
.is-native-app .toast-container {
  bottom: calc(env(safe-area-inset-bottom) + 16px);
}