/* ================================================================
   Power Statistics — Global Design System
   ================================================================ */

/* --- Design tokens ---------------------------------------------- */
:root {
  --ps-sidebar-width: 260px;
  --ps-topbar-height: 64px;

  /* Palette */
  --ps-accent:        #6366f1;
  --ps-accent-dark:   #4f46e5;
  --ps-accent-light:  rgba(99, 102, 241, .12);
  --ps-content-bg:    #f1f5f9;
  --ps-surface:       #ffffff;
  --ps-border:        #e2e8f0;
  --ps-text:          #0f172a;
  --ps-text-secondary:#475569;
  --ps-text-muted:    #94a3b8;

  /* Status */
  --ps-success:     #16a34a;
  --ps-success-bg:  #f0fdf4;
  --ps-danger:      #dc2626;
  --ps-danger-bg:   #fef2f2;
  --ps-warning:     #d97706;
  --ps-warning-bg:  #fffbeb;
  --ps-info:        #2563eb;
  --ps-info-bg:     #eff6ff;

  /* Shadows */
  --ps-shadow-xs: 0 1px 2px rgb(0 0 0 / .05);
  --ps-shadow-sm: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .05);
  --ps-shadow:    0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06);

  /* Radius */
  --ps-radius-sm: .375rem;
  --ps-radius:    .5rem;
  --ps-radius-lg: .75rem;

  /* Motion */
  --ps-ease: .15s ease;
}

/* --- Base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ps-text);
  background: var(--ps-content-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Typography ------------------------------------------------- */
h1 { font-size: 1.5rem;  font-weight: 700; letter-spacing: -.025em; margin: 0 0 .25rem; }
h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .25rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; }
h4 { font-size: .8rem;   font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
     color: var(--ps-text-secondary); margin: 0 0 .75rem; }
h1:focus { outline: none; }

a        { color: var(--ps-accent); text-decoration: none; }
a:hover  { color: var(--ps-accent-dark); text-decoration: underline; }
.btn-link{ color: var(--ps-accent); }

p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

/* --- Buttons ---------------------------------------------------- */
.btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: .875rem;
  border-radius: var(--ps-radius-sm);
  transition: background-color var(--ps-ease), border-color var(--ps-ease),
              box-shadow var(--ps-ease), color var(--ps-ease);
}

.btn-primary {
  background-color: var(--ps-accent);
  border-color:     var(--ps-accent);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--ps-accent-dark);
  border-color:     var(--ps-accent-dark);
}
.btn-primary:focus, .btn-primary:active:focus {
  box-shadow: 0 0 0 3px rgba(99,102,241,.3);
}

.btn-outline-secondary {
  border-color: var(--ps-border);
  color: var(--ps-text-secondary);
}
.btn-outline-secondary:hover {
  background: var(--ps-content-bg);
  border-color: #cbd5e1;
  color: var(--ps-text);
}

.btn-outline-danger { color: var(--ps-danger); border-color: #fca5a5; }
.btn-outline-danger:hover {
  background: var(--ps-danger-bg);
  color: var(--ps-danger);
  border-color: #fca5a5;
}

.btn-sm { font-size: .8rem;  padding: .2rem .6rem; }
.btn-lg { font-size: 1rem;   padding: .6rem 1.25rem; }

.btn:focus, .btn:active:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
  outline: none;
}

/* --- Forms ------------------------------------------------------ */
.form-control, .form-select {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  border-color: var(--ps-border);
  border-radius: var(--ps-radius-sm);
  color: var(--ps-text);
  background: var(--ps-surface);
  transition: border-color var(--ps-ease), box-shadow var(--ps-ease);
}
.form-control:focus, .form-select:focus { border-color: var(--ps-accent); }
.form-control::placeholder { color: var(--ps-text-muted); }
.form-control-sm, .form-select-sm { font-size: .85rem; }

.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ps-text-secondary);
  letter-spacing: .01em;
  margin-bottom: .35rem;
}
.form-text { font-size: .78rem; color: var(--ps-text-muted); margin-top: .3rem; }

.form-check-input:checked {
  background-color: var(--ps-accent);
  border-color:     var(--ps-accent);
}

/* Validation */
.valid.modified:not([type=checkbox]) { outline: 2px solid var(--ps-success); outline-offset: 1px; }
.invalid                             { outline: 2px solid var(--ps-danger);  outline-offset: 1px; }
.validation-message { color: var(--ps-danger); font-size: .78rem; margin-top: .25rem; }

/* --- Cards ------------------------------------------------------ */
.card {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-xs);
}
.card-body { padding: 1.25rem 1.5rem; }
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }

/* Content section card */
.ps-card {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-xs);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* --- Tables ----------------------------------------------------- */
.table { font-size: .875rem; color: var(--ps-text); margin-bottom: 0; }

.table th {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ps-text-secondary);
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--ps-border);
  white-space: nowrap;
  background: #f8fafc;
}
.table td {
  padding: .75rem 1rem;
  border-color: var(--ps-border);
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > * { background-color: #f8fafc; cursor: default; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent; }

/* --- Alerts ----------------------------------------------------- */
.alert {
  border: none;
  border-radius: var(--ps-radius);
  font-size: .875rem;
  padding: .75rem 1rem;
}
.alert-danger  { background: var(--ps-danger-bg);  color: #991b1b; }
.alert-warning { background: var(--ps-warning-bg); color: #92400e; }
.alert-success { background: var(--ps-success-bg); color: #166534; }
.alert-info    { background: var(--ps-info-bg);    color: #1e40af; }

/* --- Badges ----------------------------------------------------- */
.badge {
  font-weight: 600;
  font-size: .7rem;
  border-radius: 9999px;
  padding: .25em .7em;
  letter-spacing: .02em;
}

/* Status pills */
.ps-badge {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 700;
  padding: .2em .65em; border-radius: 9999px; letter-spacing: .03em;
  white-space: nowrap;
}
.ps-badge-success   { background: var(--ps-success-bg); color: #15803d; }
.ps-badge-failed    { background: var(--ps-danger-bg);  color: #b91c1c; }
.ps-badge-running   { background: var(--ps-info-bg);    color: #1d4ed8; }
.ps-badge-pending   { background: #f8fafc; color: var(--ps-text-secondary); border: 1px solid var(--ps-border); }
.ps-badge-skipped   { background: #f8fafc; color: var(--ps-text-muted); }
.ps-badge-cancelled { background: var(--ps-warning-bg); color: var(--ps-warning); }
.ps-badge-elevated  { background: #fef3c7; color: #92400e; }
.ps-badge-operational { background: var(--ps-info-bg); color: #1d4ed8; }

/* --- Stat cards (dashboard) ------------------------------------- */
.ps-stat-card {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow-xs);
  padding: 1.25rem 1.5rem;
  gap: 1.1rem;
  transition: box-shadow var(--ps-ease), transform var(--ps-ease);
  color: inherit;
}
.ps-stat-card:hover { box-shadow: var(--ps-shadow-sm); transform: translateY(-1px); text-decoration: none; color: inherit; }

.ps-stat-icon {
  width: 48px; height: 48px;
  border-radius: var(--ps-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex-shrink: 0;
}
.ps-stat-icon.indigo { background: rgba(99,102,241,.12); color: #4f46e5; }
.ps-stat-icon.blue   { background: rgba(37,99,235,.12);  color: #1d4ed8; }
.ps-stat-icon.green  { background: rgba(22,163,74,.12);  color: #15803d; }
.ps-stat-icon.amber  { background: rgba(217,119,6,.12);  color: #b45309; }

.ps-stat-value { font-size: 1.875rem; font-weight: 700; line-height: 1; color: var(--ps-text); }
.ps-stat-label { font-size: .78rem; font-weight: 600; color: var(--ps-text-secondary); margin-top: .2rem;
                 text-transform: uppercase; letter-spacing: .04em; }

/* --- Page header ------------------------------------------------ */
.ps-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem;
}
.ps-page-header .title-group h1 { margin: 0; }
.ps-page-header .title-group p  { color: var(--ps-text-secondary); font-size: .875rem; margin: .25rem 0 0; }

/* --- Section label (in sidebar, inside cards) ------------------- */
.ps-section-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.3);
  padding: 1.1rem 1.25rem .35rem; margin: 0;
}

/* --- Blazor error boundary -------------------------------------- */
.blazor-error-boundary {
  background: var(--ps-danger-bg);
  padding: .75rem 1rem;
  border-radius: var(--ps-radius);
  color: #991b1b; font-size: .875rem;
}
.blazor-error-boundary::after { content: "Ocurrió un error inesperado."; }

#blazor-error-ui {
  background: #fef3c7; border-top: 1px solid #fde68a;
  bottom: 0; left: 0; width: 100%;
  padding: .65rem 1.25rem; position: fixed; z-index: 1100;
  display: none; font-size: .875rem; color: #78350f;
}
#blazor-error-ui .dismiss {
  cursor: pointer; position: absolute; right: .75rem; top: 50%;
  transform: translateY(-50%); opacity: .6;
}
#blazor-error-ui .dismiss:hover { opacity: 1; }

/* --- Scrollbar (webkit) ----------------------------------------- */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }