/* =========================
   IRONWAY - PREMIUM UI
   (LOGIN + DASHBOARD)
   ========================= */

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:#070b16;
  color:#e5e7eb;
}

/* LINKS */
a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

/* HELPERS */
.muted{opacity:.72}
.small{font-size:12px}

/* =========================
   LAYOUT BASE
   ========================= */
.page{
  min-height:100vh;
  padding:28px 26px 40px;
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 0%, rgba(168,85,247,.12), transparent 55%),
    radial-gradient(900px 600px at 60% 100%, rgba(34,197,94,.08), transparent 55%),
    linear-gradient(180deg, #050814, #070b16 40%, #070b16);
}

.page-head{
  padding:18px 18px 14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background: linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.25));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  margin-bottom:16px;
}
.page-head h1{font-size:34px;letter-spacing:-.02em;line-height:1.15}
.page-head p{margin-top:6px}

/* =========================
   PANELS / CARDS
   ========================= */
.panel{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:
    radial-gradient(700px 250px at 20% 0%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(700px 250px at 80% 0%, rgba(168,85,247,.10), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.58), rgba(2,6,23,.26));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding:16px;
}

.card{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:
    radial-gradient(800px 280px at 15% 0%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(800px 280px at 85% 0%, rgba(168,85,247,.10), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.56), rgba(2,6,23,.24));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding:16px;
}

/* KPI */
.kpi{
  margin-top:8px;
  font-size:30px;
  font-weight:900;
  letter-spacing:-.02em;
}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.20);
  background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(22,163,74,.90));
  color:#04110a;
  font-weight:900;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  cursor:pointer;
  transition: transform .08s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn:hover{opacity:.97}
.btn:active{transform:translateY(1px)}

.btn-outline{
  background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.35));
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.22);
}
.btn-outline:hover{
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
}

/* =========================
   INPUTS
   ========================= */
.input, input, select, textarea{
  background: rgba(2,6,23,.55);
  border:1px solid rgba(148,163,184,.18);
  color:#e5e7eb;
  padding:10px 12px;
  border-radius:14px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, input:focus, select:focus, textarea:focus{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 4px rgba(56,189,248,.14);
}
input::placeholder{color:rgba(226,232,240,.55)}

/* =========================
   FLASH MESSAGES
   ========================= */
.flash-area{margin:12px 0 0; display:grid; gap:10px}
.flash{
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.55);
  font-weight:700;
}
.flash.success{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color:#86efac;
}
.flash.error{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color:#fecaca;
}

/* =========================
   TABLE
   ========================= */
.table{width:100%;border-collapse:collapse}
.table th, .table td{
  padding:12px 10px;
  border-bottom:1px solid rgba(148,163,184,.12);
  text-align:left;
}
.table th{color:rgba(226,232,240,.80);font-weight:800}
.table tr:hover td{background: rgba(148,163,184,.04)}

/* =========================
   LOGIN PAGE
   ========================= */
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(56,189,248,.14), transparent 55%),
    radial-gradient(900px 600px at 80% 0%, rgba(168,85,247,.16), transparent 55%),
    linear-gradient(180deg, #050814, #070b16);
}

.login-box{
  width: min(420px, 100%);
  padding:26px 22px 20px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.16);
  background:
    radial-gradient(700px 250px at 25% 0%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(700px 250px at 75% 0%, rgba(168,85,247,.12), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.66), rgba(2,6,23,.28));
  box-shadow: 0 22px 70px rgba(0,0,0,.60);
}
.login-box h1{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
}
.login-box form{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.login-box button{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(56,189,248,.95), rgba(37,99,235,.90));
  color:#071022;
  font-weight:900;
  cursor:pointer;
  transition: transform .08s ease, opacity .15s ease;
}
.login-box button:hover{opacity:.97}
.login-box button:active{transform:translateY(1px)}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .page{padding:18px 14px 28px}
  .page-head h1{font-size:26px}
}

/* =========================
   UPGRADE PREMIUM (SAFE ADD-ON)
   Cole no FINAL do style.css
   ========================= */

/* Scrollbar (Chrome/Edge) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(2,6,23,.55); }
::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.25);
  border-radius: 999px;
  border: 2px solid rgba(2,6,23,.55);
}
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.35); }

/* Melhor leitura em telas grandes */
.page { max-width: 1400px; margin: 0 auto; }

/* Efeito glass + hover premium */
.panel, .card, .page-head, .login-box {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover, .panel:hover {
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.22);
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
}

/* Botões mais “clickável” */
.btn, .login-box button {
  letter-spacing: .01em;
}
.btn:focus, .btn-outline:focus, .login-box button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(56,189,248,.16), 0 18px 42px rgba(0,0,0,.55);
}

/* Inputs mais consistentes */
.input, input, select, textarea {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.input:hover, input:hover, select:hover, textarea:hover {
  border-color: rgba(148,163,184,.28);
}

/* Títulos com mais presença */
.page-head h1 {
  text-shadow: 0 8px 28px rgba(0,0,0,.55);
}

/* Melhorias na tabela */
.table tr:hover td {
  background: rgba(56,189,248,.045);
}
.table td, .table th {
  vertical-align: middle;
}
.table td:last-child a.btn-outline {
  padding: 8px 12px;
}

/* Charts: evita esticar feio e deixa “limpo” */
canvas {
  display: block;
  width: 100% !important;
}

/* Responsividade REAL do grid (sem mexer no HTML)
   Em telas menores, os cards ficam 2 por linha, depois 1 por linha */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(6, 1fr) !important; }
  .card { grid-column: span 3 !important; }
  .card.w6 { grid-column: span 6 !important; }
  .card.w12 { grid-column: span 6 !important; }
}

@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(1, 1fr) !important; }
  .card, .card.w6, .card.w12 { grid-column: span 1 !important; }
  .page-head {
    padding: 14px 14px 12px;
  }
  .page-head h1 { font-size: 22px !important; }
}

/* Pequeno detalhe: melhora clique em mobile */
.btn, .btn-outline, .login-box button {
  touch-action: manipulation;
}

/* =========================
   ADD-ON 3 EM 1:
   (1) Toggle Dark/Light
   (2) Chart polish
   (3) KPI animation visuals
   ========================= */

/* ===== Theme Variables ===== */
:root{
  --bg: #070b16;
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.72);

  --border: rgba(148,163,184,.14);
  --border2: rgba(148,163,184,.22);

  --cardA: rgba(2,6,23,.58);
  --cardB: rgba(2,6,23,.26);

  --glow1: rgba(56,189,248,.10);
  --glow2: rgba(168,85,247,.12);
  --glow3: rgba(34,197,94,.08);

  --grid: rgba(148,163,184,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.55);

  --accent: rgba(56,189,248,.55);
  --accentRing: rgba(56,189,248,.14);

  --good: #16a34a;
  --bad: #ef4444;
}

/* LIGHT THEME */
html[data-theme="light"]{
  --bg: #f6f7fb;
  --text: #0f172a;
  --muted: rgba(15,23,42,.72);

  --border: rgba(15,23,42,.10);
  --border2: rgba(15,23,42,.14);

  --cardA: rgba(255,255,255,.78);
  --cardB: rgba(255,255,255,.60);

  --glow1: rgba(56,189,248,.10);
  --glow2: rgba(168,85,247,.10);
  --glow3: rgba(34,197,94,.08);

  --grid: rgba(15,23,42,.10);
  --shadow: 0 18px 50px rgba(2,6,23,.15);

  --accent: rgba(37,99,235,.45);
  --accentRing: rgba(37,99,235,.14);

  --good: #0f9d58;
  --bad: #dc2626;
}

/* Apply vars safely (override without breaking your base) */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
}
.muted{ opacity: 1 !important; color: var(--muted) !important; }

.page{
  background:
    radial-gradient(900px 600px at 20% -10%, var(--glow1), transparent 60%),
    radial-gradient(900px 600px at 80% 0%, var(--glow2), transparent 55%),
    radial-gradient(900px 600px at 60% 100%, var(--glow3), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.0), rgba(2,6,23,.0)) !important;
}

.page-head, .panel, .card, .login-box{
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Glass backgrounds using vars */
.page-head{
  background: linear-gradient(180deg, var(--cardA), var(--cardB)) !important;
}
.panel, .card{
  background:
    radial-gradient(700px 250px at 20% 0%, var(--glow1), transparent 60%),
    radial-gradient(700px 250px at 80% 0%, var(--glow2), transparent 60%),
    linear-gradient(180deg, var(--cardA), var(--cardB)) !important;
}

/* Better hover */
.card:hover, .panel:hover{
  border-color: rgba(56,189,248,.22) !important;
}

/* Inputs focus ring */
.input:focus, input:focus, select:focus, textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accentRing) !important;
}

/* Tables */
.table th, .table td{
  border-bottom-color: var(--grid) !important;
}
.table tr:hover td{
  background: rgba(56,189,248,.045) !important;
}

/* KPI animation “shine” */
.kpi{
  position: relative;
}
.kpi::after{
  content:"";
  position:absolute;
  inset:-10px -10px -10px -10px;
  background: radial-gradient(240px 120px at 20% 10%, rgba(56,189,248,.08), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

/* =========================
   ✅ FIX: OLHINHO DO LOGIN (senha)
   - resolve borda “torta”
   - não quebra o resto do sistema
   ========================= */

/* wrapper do campo de senha */
.pw-wrap{
  position: relative;
  width: 100%;
}

/* input dentro do wrapper ganha espaço pro botão */
.pw-wrap input{
  width: 100%;
  padding-right: 52px !important; /* espaço pro olhinho */
}

/* botão do olhinho */
.pw-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.18);
  display:grid;
  place-items:center;
  cursor:pointer;
  color:#cbd5e1;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

.pw-toggle:hover{
  background: rgba(148,163,184,.12);
  border-color: rgba(34,197,94,.35);
  transform: translateY(-50%) translateY(-1px);
}

.pw-toggle:active{
  transform: translateY(-50%) translateY(0px);
}

/* evita o “corte torto” visual no canto */
.pw-wrap{
  border-radius: 14px;
}

body {
  display: flex;
}

/* MENU LATERAL */
/* SIDEBAR */
.sidebar {
  width: 230px;
  min-height: 100vh;
  background: linear-gradient(180deg, #020617, #0f172a);
  border-right: 1px solid rgba(148,163,184,0.15);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* TÍTULO */
.sidebar h2 {
  font-size: 18px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* BOTÕES */
.sidebar a {
  text-decoration: none;
  color: #cbd5f5;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* EFEITO HOVER */
.sidebar a:hover {
  background: linear-gradient(90deg, rgba(59,130,246,0.25), transparent);
  color: #fff;
  transform: translateX(6px);
}

/* LINHA LATERAL ANIMADA */
.sidebar a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0px;
  background: #3b82f6;
  transition: width 0.25s ease;
}

.sidebar a:hover::before {
  width: 4px;
}

/* BOTÃO ATIVO */
.sidebar a.active {
  background: rgba(59,130,246,0.25);
  color: #fff;
}

.sidebar a.active::before {
  width: 4px;
}

/* GLOW SUAVE */
.sidebar a:hover {
  box-shadow: 0 0 10px rgba(59,130,246,0.3);
}

body {
  margin: 0;
}

.page {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,0.08), transparent 25%),
    radial-gradient(circle at top right, rgba(59,130,246,0.10), transparent 30%),
    linear-gradient(180deg, #030712 0%, #020617 100%);
}

.sidebar {
  width: 290px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 18px;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(2,6,23,0.98) 0%, rgba(15,23,42,0.98) 100%);
  border-right: 1px solid rgba(148,163,184,0.14);
  box-shadow:
    18px 0 40px rgba(0,0,0,0.35),
    inset -1px 0 0 rgba(255,255,255,0.03);
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.sidebar-logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,41,59,0.65));
  border: 1px solid rgba(148,163,184,0.12);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.sidebar-logo-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #22c55e, #38bdf8);
  box-shadow:
    0 0 0 6px rgba(34,197,94,0.08),
    0 0 18px rgba(56,189,248,0.30);
  flex-shrink: 0;
}

.sidebar-logo {
  font-size: 28px;
  font-weight: 1000;
  letter-spacing: 1px;
  color: #f8fafc;
  line-height: 1;
}

.sidebar-logo-sub {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 6px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.side-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #dbeafe;
  padding: 16px 18px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 17px;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(148,163,184,0.10);
  background: linear-gradient(135deg, rgba(15,23,42,0.72), rgba(15,23,42,0.36));
  transition:
    transform .18s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    color .22s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03);
  cursor: pointer;
}

.side-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #38bdf8, #22c55e);
  transition: width .20s ease;
}

.side-link:hover {
  transform: translateX(8px);
  color: #ffffff;
  border-color: rgba(56,189,248,0.26);
  background: linear-gradient(90deg, rgba(59,130,246,0.18), rgba(15,23,42,0.72));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 18px rgba(59,130,246,0.15);
}

.side-link:hover::before {
  width: 5px;
}

.side-link.active {
  color: #ffffff;
  border-color: rgba(56,189,248,0.28);
  background: linear-gradient(90deg, rgba(59,130,246,0.22), rgba(15,23,42,0.78));
  box-shadow:
    0 14px 34px rgba(0,0,0,0.30),
    0 0 22px rgba(59,130,246,0.16);
}

.side-link.active::before {
  width: 5px;
}

.side-link-primary {
  border-color: rgba(34,197,94,0.25);
  background: linear-gradient(135deg, rgba(34,197,94,0.20), rgba(56,189,248,0.12));
  color: #ecfeff;
}

.side-link-primary:hover {
  border-color: rgba(34,197,94,0.38);
  background: linear-gradient(135deg, rgba(34,197,94,0.26), rgba(56,189,248,0.18));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.30),
    0 0 22px rgba(34,197,94,0.16);
}

.side-link-logout {
  margin-top: 18px;
  border-color: rgba(249,115,22,0.18);
  color: #fdba74;
  background: linear-gradient(135deg, rgba(249,115,22,0.10), rgba(15,23,42,0.55));
}

.side-link-logout:hover {
  color: #fff7ed;
  border-color: rgba(249,115,22,0.30);
  background: linear-gradient(135deg, rgba(249,115,22,0.18), rgba(15,23,42,0.75));
}

.side-icon {
  width: 28px;
  text-align: center;
  font-size: 20px;
  flex-shrink: 0;
}

.sidebar-bottom {
  padding-top: 16px;
  border-top: 1px solid rgba(148,163,184,0.10);
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 22px 22px 28px;
  box-sizing: border-box;
}

.premium-head {
  margin-bottom: 14px;
  padding: 14px 18px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,0.10);
  background:
    linear-gradient(90deg, rgba(2,6,23,0.65), rgba(30,41,59,0.18)),
    linear-gradient(180deg, rgba(15,23,42,0.72), rgba(15,23,42,0.48));
  box-shadow:
    0 14px 34px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.brand-row h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: #f8fafc;
}

.head-sub {
  margin: 8px 0 0 26px;
  font-size: 14px;
  color: #94a3b8;
}

.brand-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(34,197,94,1), rgba(56,189,248,.85));
  box-shadow:
    0 0 0 5px rgba(34,197,94,0.08),
    0 0 16px rgba(56,189,248,0.22);
  border: 1px solid rgba(148,163,184,0.18);
}

@media (max-width: 1100px) {
  .sidebar {
    width: 240px;
  }

  .sidebar-logo {
    font-size: 24px;
  }

  .side-link {
    font-size: 15px;
    padding: 14px 15px;
  }

  .brand-row h1 {
    font-size: 28px;
  }
}

@media (max-width: 860px) {
  .page {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(148,163,184,0.14);
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .side-link,
  .side-link-primary,
  .side-link-logout {
    flex: 1 1 220px;
  }

  .sidebar-bottom {
    margin-top: 12px;
    padding-top: 12px;
  }
}

/* ===== FECHAR SEMANA - ISOLADO E SEM CONFLITO ===== */

.page {
  max-width: 100%;
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 22px 22px 28px;
  box-sizing: border-box;
}

/* mantém estilos globais bonitos sem forçar grid antigo nessa tela */
.panel {
  padding: 20px;
}

.input {
  width: 100%;
  box-sizing: border-box;
}

select.input {
  min-height: 44px;
  cursor: pointer;
}

textarea.input {
  resize: vertical;
}

/* evita que regras antigas de row/col estraguem outras páginas */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.col-12,
.col-6,
.col-4,
.col-3,
.col-8 {
  min-width: 0;
}

/* responsivo global leve */
@media (max-width: 768px) {
  .panel {
    padding: 16px;
  }

  .input {
    padding: 10px 12px;
  }
}