/* =========================================================================
   CurupiraHUB - base.css
   Paleta industrial (grafite + ambar), tipografia monoespacada,
   visual robusto estilo painel de controle/intranet antiga.
   ========================================================================= */

:root {
  /* Chapa metalica */
  --bg-0: #0e1013;
  --bg-1: #161a1f;
  --bg-2: #1f242b;
  --bg-3: #282e36;
  --bg-4: #343b45;
  --bg-rail: #0a0c0f;

  /* Ambar / aviso */
  --amber-0: #ffb340;
  --amber-1: #e8a33d;
  --amber-2: #c7862b;
  --amber-3: #7a4f15;

  /* Texto */
  --ink-0: #f1ecdc;   /* alto contraste */
  --ink-1: #c9c3b2;
  --ink-2: #8e8975;
  --ink-3: #5e5a4c;

  /* Estados */
  --ok:   #7abf5f;
  --warn: #d9a13b;
  --err:  #c94a3b;
  --info: #4fb3c7;

  /* Linhas */
  --rule-0: #0a0c0f;
  --rule-1: #3a424d;
  --rule-2: #566170;

  /* Tipografia */
  --ff-mono: "IBM Plex Mono", "Courier New", "Consolas", ui-monospace, monospace;
  --ff-serif-tech: "IBM Plex Serif", "Source Serif Pro", Georgia, serif;
  --ff-sans-tech: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Medidas */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 3px;
}

/* --------------------------------------------------------------------- */
/* Reset minimo                                                          */
/* --------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--amber-0); text-decoration: none; }
a:hover { text-decoration: underline; }

body {
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--ff-mono);
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
  /* textura sutil de ruido para dar 'cansaco de CRT' */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.25) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
}

/* --------------------------------------------------------------------- */
/* Utilidades                                                            */
/* --------------------------------------------------------------------- */
.mono { font-family: var(--ff-mono); }
.caps { text-transform: uppercase; letter-spacing: 0.12em; }
.dim  { color: var(--ink-2); }
.hub-amber { color: var(--amber-0); }
.hub-kbd {
  font-family: var(--ff-mono);
  background: var(--bg-3);
  border: 1px solid var(--rule-1);
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--ink-0);
  font-size: 0.85em;
}

/* Barra 'serrilhada' usada como separador tecnico */
.hub-hatch {
  height: 10px;
  background:
    repeating-linear-gradient(
      135deg,
      var(--amber-1) 0 8px,
      var(--bg-1) 8px 16px
    );
  border-top: 1px solid var(--rule-0);
  border-bottom: 1px solid var(--rule-0);
}

/* Painel metalico: usado em boxes de conteudo */
.hub-panel {
  background:
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--rule-1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 0 #000;
  position: relative;
}

.hub-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--rule-0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.hub-panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--amber-0);
}

.hub-panel__title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--amber-0);
  border: 1px solid var(--amber-2);
  box-shadow:
    0 0 6px rgba(255,179,64,0.65),
    inset 0 0 3px rgba(255,255,255,0.4);
  border-radius: 50%;
}

.hub-panel__meta {
  color: var(--ink-2);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hub-panel__body {
  padding: 12px;
}

/* 'Rebites' nos cantos do painel */
.hub-panel--riveted::before,
.hub-panel--riveted::after,
.hub-panel--riveted > .rivet-tl,
.hub-panel--riveted > .rivet-tr {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  background: radial-gradient(circle at 30% 30%, #8a8370, #2a2b25 70%);
  border: 1px solid #000;
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
.hub-panel--riveted::before { top: 5px; left: 5px; }
.hub-panel--riveted::after  { top: 5px; right: 5px; }
.hub-panel--riveted > .rivet-tl { bottom: 5px; left: 5px; }
.hub-panel--riveted > .rivet-tr { bottom: 5px; right: 5px; }

/* Botao 'industrial' */
.hub-btn {
  font-family: var(--ff-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-0);
  background:
    linear-gradient(180deg, var(--bg-4) 0%, var(--bg-2) 100%);
  border: 1px solid var(--rule-1);
  border-top-color: var(--rule-2);
  border-bottom-color: #000;
  padding: 9px 18px;
  border-radius: var(--radius-1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 0 #000;
  transition: transform 60ms ease, box-shadow 60ms ease, background 60ms ease;
}
.hub-btn:hover {
  background: linear-gradient(180deg, #3f4752 0%, #242a31 100%);
}
.hub-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.5),
    0 0 0 #000;
}
.hub-btn:disabled,
.hub-btn[disabled] {
  background: linear-gradient(180deg, #1a1d21 0%, #111316 100%);
  color: #3a3f47;
  border-color: #1a1d21;
  border-top-color: #222529;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}
.hub-btn--primary {
  background:
    linear-gradient(180deg, var(--amber-0) 0%, var(--amber-2) 100%);
  color: #1b1404;
  border-color: #5b3b0f;
  border-top-color: #ffd173;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  font-weight: 700;
}
.hub-btn--primary:hover {
  background: linear-gradient(180deg, #ffc261 0%, #c7862b 100%);
}

/* Input industrial */
.hub-input {
  width: 100%;
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--ink-0);
  background:
    linear-gradient(180deg, #0b0d11 0%, #12161b 100%);
  border: 1px solid #000;
  border-top-color: #000;
  border-bottom-color: var(--rule-1);
  padding: 10px 12px;
  border-radius: var(--radius-1);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.03);
  outline: none;
}
.hub-input:focus {
  border-color: var(--amber-1);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.7),
    0 0 0 2px rgba(255,179,64,0.25);
}
.hub-input::placeholder { color: var(--ink-3); }

/* Label / ajuda */
.hub-field { margin-bottom: 14px; }
.hub-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-1);
  margin-bottom: 6px;
}
.hub-help {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 4px;
}
.hub-errors {
  list-style: none;
  padding: 6px 8px;
  margin: 0 0 10px 0;
  border: 1px dashed var(--err);
  background: rgba(201,74,59,0.08);
  color: #f0b1a9;
  font-size: 12px;
}

/* LEDs / indicadores */
.led {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid #000;
  box-shadow: inset 0 0 2px rgba(255,255,255,0.3);
  margin-right: 6px;
  vertical-align: middle;
}
.led--ok   { background: var(--ok);   box-shadow: 0 0 6px var(--ok),   inset 0 0 2px rgba(255,255,255,0.4); }
.led--warn { background: var(--warn); box-shadow: 0 0 6px var(--warn), inset 0 0 2px rgba(255,255,255,0.4); }
.led--err  { background: var(--err);  box-shadow: 0 0 6px var(--err),  inset 0 0 2px rgba(255,255,255,0.4); }
.led--info { background: var(--info); box-shadow: 0 0 6px var(--info), inset 0 0 2px rgba(255,255,255,0.4); }
.led--off  { background: var(--bg-4); }

/* Etiquetas tecnicas */
.tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--rule-1);
  background: var(--bg-3);
  color: var(--ink-1);
  border-radius: 2px;
}
.tag--amber { color: var(--amber-0); border-color: var(--amber-3); background: rgba(255,179,64,0.08); }
.tag--err   { color: #f2a69d; border-color: #6b2a22; background: rgba(201,74,59,0.12); }
.tag--ok    { color: #b8dfa5; border-color: #2f5224; background: rgba(122,191,95,0.12); }
.tag--info  { color: #9fd6e1; border-color: #1f4e57; background: rgba(79,179,199,0.12); }

/* Checkbox inline com label */
.row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  margin: 6px 0;
}
.row-inline input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--amber-0);
}
.row-inline label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-1);
  cursor: pointer;
}

/* Mensagens do Django (messages framework) */
.hub-messages { margin: 0 0 12px 0; padding: 0; list-style: none; }
.hub-messages li {
  padding: 8px 12px;
  border: 1px solid var(--rule-1);
  border-left-width: 4px;
  background: var(--bg-2);
  margin-bottom: 6px;
  font-size: 12px;
}
.hub-messages .error   { border-left-color: var(--err); }
.hub-messages .warning { border-left-color: var(--warn); }
.hub-messages .success { border-left-color: var(--ok); }
.hub-messages .info    { border-left-color: var(--info); }