/* public/assets/styles.css - Pastel Modern v3 */
:root{
  --bg-1:#fafafa;
  --bg-grad-a:#fdf2f8; /* pink-50 */
  --bg-grad-b:#eff6ff; /* blue-50 */
  --bg-grad-c:#ecfeff; /* cyan-50 */
  --panel:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --ring:#60a5fa;
  --brand:#60a5fa; /* light blue */
  --brand-2:#a78bfa; /* violet */
  --ok:#34d399;
  --warn:#fbbf24;
  --shadow:0 16px 40px rgba(2,6,23,.08);
  --radius:1.25rem;
}

*{box-sizing:border-box}
html{font-size:16px}
@media (max-width:480px){ html{font-size:15px} }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(800px 500px at 15% -10%, var(--bg-grad-a) 0%, transparent 70%),
    radial-gradient(900px 600px at 110% 0%, var(--bg-grad-b) 0%, transparent 65%),
    radial-gradient(600px 400px at 50% 120%, var(--bg-grad-c) 0%, transparent 70%),
    var(--bg-1);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.header{
  backdrop-filter:saturate(150%) blur(8px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(148,163,184,.25);
  position:sticky;top:0;z-index:30;
}
.brand{
  display:flex;align-items:center;gap:.7rem;
}
.brand-badge{
  height:2.2rem;width:2.2rem;border-radius:.9rem;
  background:linear-gradient(135deg,#93c5fd 0%, #d8b4fe 100%);
  display:flex;align-items:center;justify-content:center;
  color:white;font-weight:900;
  box-shadow:0 6px 16px rgba(59,130,246,.25);
}
.card{
  background:var(--panel); border-radius:calc(var(--radius) + .25rem);
  box-shadow:var(--shadow); padding:1.25rem;
  border:1px solid rgba(203,213,225,.35);
}
.glass{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(203,213,225,.45);
  backdrop-filter:saturate(160%) blur(10px);
  border-radius:calc(var(--radius) + .25rem);
  box-shadow:var(--shadow);
}

.input,.select,textarea{
  width:100%;
  border:1.5px solid rgba(203,213,225,.9);
  border-radius:1rem;
  padding:0.85rem 0.95rem;
  background:#fff;
  outline:none;
  transition:.15s border-color,.15s box-shadow,.15s transform;
}
.input:focus,.select:focus,textarea:focus,.file:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 6px rgba(96,165,250,.16);
}
.file{
  width:100%;
  border:2px dashed rgba(203,213,225,.9);
  border-radius:1rem;
  padding:1rem;
  background:#fbfdff;
}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(135deg,#93c5fd 0%, #a78bfa 100%);
  color:#0b1020;
  padding:0.9rem 1.2rem;border-radius:1rem;
  font-weight:800;letter-spacing:.2px;border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 20px rgba(99,102,241,.25);
  transition:transform .08s ease, filter .15s ease;
}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.02)}

.link{color:#2563eb}
.link:hover{text-decoration:underline}

.section{padding-block:2.2rem}
.section-tight{padding-block:1.2rem}

.hero{
  display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;
}
@media (max-width: 920px){ .hero{grid-template-columns:1fr} }

.kpi{
  display:flex;flex-direction:column;gap:.15rem;
  background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
  border-radius:1rem;padding:1.1rem 1.2rem;border:1px solid #e8edf5;
  box-shadow:0 10px 24px rgba(2,6,23,.05);
}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:.85rem;text-align:left}
.table th{font-size:.86rem;color:#334155}

.footer{color:#64748b}

.login-wrap{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-radius:1.7rem;overflow:hidden;
  box-shadow:0 25px 70px rgba(2,6,23,.12);
}
.login-visual{
  background: radial-gradient(900px 500px at -10% -10%, #fde68a 0%, transparent 60%),
              radial-gradient(900px 600px at 120% 10%, #c7d2fe 0%, transparent 65%),
              linear-gradient(135deg,#111827 0%,#0f172a 100%);
  color:#eef2ff;display:flex;align-items:center;justify-content:center;padding:2rem;
}
.login-visual > div{max-width:28rem}
.login-visual h2{font-size:2rem;font-weight:900;line-height:1.1;margin-bottom:.6rem}
.login-visual p{color:#cbd5e1}
.login-form{background:#fff;padding:2rem}
@media (max-width: 900px){
  .login-wrap{grid-template-columns:1fr}
  .login-visual{display:none}
}

.notice{font-size:.9rem;color:#64748b}
.badge{display:inline-block;padding:.3rem .6rem;border-radius:.7rem;background:#eef2ff;color:#3730a3;font-size:.75rem;font-weight:700}

/* v4 safety: base font + headings weight for nicer look even if CDN hiccups */
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;}
h1,h2,h3{font-weight:800;letter-spacing:-0.02em}

/* v5: touch-friendly controls and section spacing */
.input, .select, textarea { min-height: 46px; }
.file { min-height: 58px; }
@media (max-width: 768px){
  .btn-primary{ width: 100%; }
}


/* v6: Pastel login visual without dark panel */
.login-visual--pastel{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background: radial-gradient(800px 520px at -5% -10%, #fde68a66 0%, transparent 60%),
              radial-gradient(900px 600px at 120% 10%, #c7d2fe66 0%, transparent 65%),
              linear-gradient(135deg,#fff 0%,#f8fafc 100%);
  color:#0f172a;
}
.login-visual--pastel::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url('/public/assets/login_abstract.svg');
  background-size:cover;background-position:center;
  opacity:.85;
}
.login-visual--pastel .inner{
  position:relative;z-index:1;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(160%) blur(6px);
  border:1px solid rgba(148,163,184,.25);
  border-radius:1rem;padding:1.2rem 1.4rem; max-width:28rem;
  box-shadow:0 10px 30px rgba(2,6,23,.08);
}
.login-visual--pastel h2{font-size:1.9rem;font-weight:900;margin:.25rem 0 .35rem}
.login-visual--pastel p{color:#475569}
    

/* v7 subtle animations */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes softPulse {
  0%,100% { box-shadow: 0 8px 20px rgba(99,102,241,.22); }
  50% { box-shadow: 0 12px 26px rgba(99,102,241,.30); }
}
.anim-fadeup { animation: fadeInUp .55s cubic-bezier(.2,.65,.2,1) both; }
.anim-fadein { animation: fadeIn .6s ease-out both; }
.anim-delay-1 { animation-delay: .08s; }
.anim-delay-2 { animation-delay: .16s; }
.anim-delay-3 { animation-delay: .24s; }
.btn-pulse:hover { animation: softPulse 1.4s ease-in-out infinite; }

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .anim-fadeup, .anim-fadein, .btn-pulse:hover { animation: none !important; }
  * { scroll-behavior: auto !important; }
}