/* ═══════════════════════════════════════════════════════════════════
   Marax Panel — Dark Theme (Colora-inspired)
   ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0f;
  --bg2:#101018;
  --card:#13131d;
  --card-border:#1e1e2e;
  --red:#e63946;
  --red-dim:#e6394630;
  --green:#2ecc71;
  --green-dim:#2ecc7130;
  --blue:#3b82f6;
  --purple:#a855f7;
  --text:#e2e2e8;
  --text2:#7a7a90;
  --sidebar-w:210px;
  --radius:10px;
}
html,body{height:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow:hidden}

/* ── Scrollbar ───────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:3px}

/* ═══ LOGIN ═══ */
#login-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);z-index:1000;
}
.login-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;
  padding:48px 44px;width:380px;text-align:center;
  animation:fadeUp .5s ease;
}
.brand{font-size:2rem;font-weight:800;color:#fff;letter-spacing:-.5px}
.dot{color:var(--red)}
.sub{color:var(--text2);margin:4px 0 28px;font-size:.9rem}
.field-label{display:block;text-align:left;font-size:.7rem;font-weight:600;letter-spacing:1.5px;color:var(--text2);margin-bottom:6px}
#login-pw{
  width:100%;padding:12px 16px;background:var(--bg2);color:#fff;border:1px solid var(--red);
  border-radius:8px;font-size:.95rem;outline:none;margin-bottom:16px;
}
#login-pw:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim)}
#login-btn{
  width:100%;padding:13px;background:var(--red);color:#fff;font-weight:700;font-size:1rem;
  border:none;border-radius:8px;cursor:pointer;transition:.2s;
}
#login-btn:hover{filter:brightness(1.15)}
#login-error{color:var(--red);font-size:.85rem;margin-top:10px;min-height:20px}

.hidden{display:none!important}

/* ═══ LAYOUT ═══ */
#app{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ── */
#sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg2);
  border-right:1px solid var(--card-border);display:flex;flex-direction:column;
  padding:24px 0;overflow-y:auto;
}
.sidebar-top{padding:0 20px;margin-bottom:28px}
.sidebar-top .brand{font-size:1.4rem}
.version{font-size:.7rem;color:var(--text2)}
.nav-section{font-size:.65rem;font-weight:700;letter-spacing:1.5px;color:var(--text2);padding:18px 20px 6px}
.nav-link{
  display:block;padding:10px 20px;color:var(--text2);text-decoration:none;
  font-size:.9rem;font-weight:500;border-left:3px solid transparent;transition:.15s;
}
.nav-link:hover{color:#fff;background:#ffffff08}
.nav-link.active{color:var(--red);border-left-color:var(--red);background:var(--red-dim)}
.sidebar-bottom{margin-top:auto;padding:20px;border-top:1px solid var(--card-border)}
.sidebar-bottom a{color:var(--text2);text-decoration:none;font-size:.85rem}
.sidebar-bottom a:hover{color:#fff}

/* ── Content ── */
#content{flex:1;overflow-y:auto;padding:36px 40px;position:relative}
#content::before{
  content:'';position:fixed;top:0;right:0;width:500px;height:500px;
  background:radial-gradient(circle,#1a237e22 0%,transparent 70%);pointer-events:none;z-index:0;
}

/* ── Page header ── */
.page-header h1{font-size:1.6rem;font-weight:700;color:#fff}
.page-header p{color:var(--text2);font-size:.9rem;margin-top:2px}
.page-header{margin-bottom:28px;position:relative;z-index:1}

/* ── Stat cards row ── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px;position:relative;z-index:1}
.stat-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:22px 24px;
}
.stat-value{font-size:1.8rem;font-weight:800;color:var(--red)}
.stat-label{font-size:.75rem;color:var(--text2);letter-spacing:.5px;margin-top:4px}

/* ── Table panel ── */
.panel{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:24px 28px;position:relative;z-index:1;
}
.panel-title{font-weight:700;font-size:.95rem;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.panel-title::before{content:'';width:8px;height:8px;background:var(--red);border-radius:50%}
table{width:100%;border-collapse:collapse}
th{font-size:.65rem;font-weight:600;letter-spacing:1.5px;color:var(--text2);text-align:left;padding:10px 0;border-bottom:1px solid var(--card-border)}
td{padding:12px 0;font-size:.88rem;color:var(--text);border-bottom:1px solid #ffffff06}
tr:hover td{background:#ffffff04}

/* ── Chart ── */
.chart-box{position:relative;height:240px;margin-top:12px}
.chart-box canvas{width:100%!important;height:100%!important}
.chart-legend{display:flex;gap:20px;margin-top:14px}
.chart-legend span{font-size:.8rem;color:var(--text2);display:flex;align-items:center;gap:6px}
.chart-legend span::before{content:'';width:10px;height:10px;border-radius:2px}
.legend-checkouts::before{background:var(--red)}
.legend-claims::before{background:var(--blue)}
.legend-revenue::before{background:var(--green)}

/* ── PAS card ── */
.pas-card{max-width:700px}
.pas-current{font-size:2.4rem;font-weight:800;color:var(--red);margin:8px 0 2px}
.pas-sub{font-size:.85rem;color:var(--text2);margin-bottom:20px}
.pas-input-row{display:flex;gap:12px;align-items:center}
.pas-input-row input{
  flex:1;padding:12px 16px;background:var(--bg);border:1px solid var(--card-border);
  color:#fff;border-radius:8px;font-size:1rem;outline:none;
}
.pas-input-row input:focus{border-color:var(--red)}
.pas-input-row button{
  padding:12px 28px;background:var(--red);color:#fff;font-weight:700;border:none;
  border-radius:8px;cursor:pointer;white-space:nowrap;transition:.2s;
}
.pas-input-row button:hover{filter:brightness(1.15)}

/* ── Status badge ── */
.status-ok{
  display:inline-flex;align-items:center;gap:6px;background:var(--green-dim);
  color:var(--green);padding:4px 14px;border-radius:20px;font-size:.8rem;font-weight:600;
}
.status-ok::before{content:'';width:7px;height:7px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #2ecc7188}70%{box-shadow:0 0 0 8px #2ecc7100}100%{box-shadow:0 0 0 0 #2ecc7100}}

/* ── Responsive ── */
@media(max-width:768px){
  #sidebar{width:60px;min-width:60px}
  .sidebar-top .brand,.version,.nav-section,.nav-link span,.sidebar-bottom a{display:none}
  .nav-link{text-align:center;padding:12px 0;font-size:.75rem}
  #content{padding:20px}
}