/* ================================================================================
 * theme.css — Tokens visuais centralizados do FluxoObra
 *
 * Tudo o que define a aparência do app vive aqui:
 *   - Cores (brand, neutras, semânticas, estados)
 *   - Tipografia
 *   - Espaçamentos
 *   - Border-radius
 *   - Sombras
 *   - Transições
 *
 * Mudar uma cor aqui → afecta o app inteiro.
 * Adicionar nova cor → variável aqui, usar em qualquer ficheiro.
 * ================================================================================ */

:root {
  /* ============================================================
   * BRAND (cores principais)
   * ============================================================ */
  --brand:           #4338ca;
  --brand-light:     #6366f1;
  --brand-lighter:   #818cf8;
  --brand-bg:        #e0e7ff;   /* fundo claro para realçar */
  --brand-bg-soft:   #ede9fe;

  /* ============================================================
   * NEUTRAS (cinzas)
   * ============================================================ */
  --bg:              #f9fafb;   /* fundo da página */
  --bg-2:            #f3f4f6;   /* fundo secundário */
  --card:            #ffffff;   /* fundo de cards/painéis */
  --surface-elev:    #ffffff;   /* superfície elevada */

  --border:          #e5e7eb;
  --border-2:        #f3f4f6;
  --border-strong:   #d1d5db;

  --text:            #111827;   /* texto principal */
  --text-2:          #4b5563;   /* texto secundário */
  --text-3:          #9ca3af;   /* texto desativado / hint */
  --text-inv:        #ffffff;   /* texto sobre fundos escuros */

  /* ============================================================
   * SEMÂNTICAS (status)
   * ============================================================ */
  --success:         #059669;
  --success-light:   #d1fae5;
  --success-dim:     #6ee7b7;   /* claro: read-only / consolidado */

  --warning:         #d97706;
  --warning-light:   #fed7aa;
  --warning-dim:     #fef3c7;

  --danger:          #dc2626;
  --danger-light:    #fee2e2;
  --danger-dim:      #fecaca;

  --info:            #2563eb;
  --info-light:      #dbeafe;

  /* ============================================================
   * ESTADOS DE DADOS (importante para mediçao/levantamento)
   * Cores específicas para representar o ciclo de vida dos itens.
   * ============================================================ */
  --st-auto:         #94a3b8;        /* cinza claro — sugestão sistema, ainda não confirmada */
  --st-auto-bg:      #f1f5f9;
  --st-manual:       var(--text);    /* normal — tu fixaste */
  --st-levantado:    #d97706;        /* laranja — qty real preenchida */
  --st-levantado-bg: #fef3c7;
  --st-consolidado:  #6ee7b7;        /* verde claro/dim — fechado, read-only */
  --st-consolidado-bg: #d1fae5;

  /* ============================================================
   * SIDEBAR / SHELL (componente principal)
   * ============================================================ */
  --shell-bg:        #0f172a;
  --shell-bg-2:      #1e293b;
  --shell-text:      #e2e8f0;
  --shell-text-2:    #94a3b8;
  --shell-text-3:    #64748b;
  --shell-divider:   rgba(255,255,255,0.06);
  --shell-hover:     rgba(255,255,255,0.05);
  --shell-active:    var(--brand);

  --shell-w-expanded:   200px;
  --shell-w-collapsed:  56px;
  --shell-topbar-h:     52px;

  /* ============================================================
   * TIPOGRAFIA
   * ============================================================ */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:   'Consolas', 'Monaco', monospace;

  --fs-xs:   10px;
  --fs-sm:   11px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============================================================
   * ESPAÇAMENTO (escala de 4)
   * ============================================================ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ============================================================
   * BORDER RADIUS
   * ============================================================ */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   10px;
  --r-2xl:  14px;
  --r-pill: 999px;

  /* ============================================================
   * SOMBRAS
   * ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px -8px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 50px -12px rgba(0,0,0,0.25);

  /* ============================================================
   * TRANSIÇÕES
   * ============================================================ */
  --tr-fast:   .12s ease;
  --tr-base:   .15s ease;
  --tr-slow:   .25s ease;

  /* ============================================================
   * Z-INDEX
   * ============================================================ */
  --z-shell:    999;
  --z-topbar:   1000;
  --z-popover:  100;
  --z-modal:    200;
  --z-toast:    300;
  --z-tooltip:  500;

  /* ============================================================
   * ALIASES (compatibilidade com nomes antigos das páginas)
   * Permite migração gradual sem partir páginas existentes.
   * ============================================================ */
  --accent:        var(--brand);
  --accent-light:  var(--brand-bg);
  --accent-bg:     var(--brand-bg);
  --contrato:      var(--brand-light);
  --contrato-light:var(--brand-bg);
  --real:          var(--st-levantado);
  --real-light:    var(--st-levantado-bg);
  --border-secondary: var(--border-2);
}

/* ============================================================
 * BASE GLOBAL
 * ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  font-family: var(--font-family);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
 * BOTÕES (utility classes)
 * ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 9px var(--sp-4);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  cursor: pointer; transition: all var(--tr-base);
}
.btn:hover { background: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn i { font-size: 16px; }

.btn-primary {
  background: var(--brand); color: var(--text-inv); border-color: var(--brand);
}
.btn-primary:hover { background: #3730a3; }

.btn-danger {
  color: var(--danger); border-color: var(--danger-dim);
}
.btn-danger:hover { background: var(--danger-light); }

.btn-ghost {
  background: transparent; border-color: transparent; color: var(--text-2);
}
.btn-ghost:hover { background: var(--bg-2); color: var(--text); }

.btn-sm { padding: 6px 10px; font-size: var(--fs-sm); }
.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; }

/* ============================================================
 * INPUTS (utility classes)
 * ============================================================ */
.input, .textarea, .select {
  width: 100%; padding: 9px var(--sp-3);
  font-family: inherit; font-size: var(--fs-base);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--card); color: var(--text);
  transition: all var(--tr-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}
.textarea { resize: vertical; min-height: 80px; }

/* ============================================================
 * BADGES (utility classes)
 * ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--bg-2); color: var(--text-2);
}
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger  { background: var(--danger-light);  color: var(--danger); }
.badge-info    { background: var(--info-light);    color: var(--info); }
.badge-brand   { background: var(--brand-bg);      color: var(--brand); }

/* ============================================================
 * TOAST
 * ============================================================ */
.toast {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5);
  background: var(--text); color: var(--text-inv);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-xl);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(20px);
  transition: all var(--tr-slow);
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast.on { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.info    { background: var(--info); }

/* ============================================================
 * LOADER / SPINNER
 * ============================================================ */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border); border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
 * SCROLLBARS (Webkit)
 * ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }