/* =====================================================================
   CSC Smart ERP — Customer Portal (Premium UI v1.21.0)
   Presentation only. All .cscerp-portal-* class names preserved.
   Customer-facing OTP portal + login. Mobile-first, premium SaaS look.
   ===================================================================== */
:root{
  --csp-accent:#059669;--csp-accent-hover:#047857;--csp-accent-soft:#ecfdf5;
  --csp-bg:#f1f5f9;--csp-surface:#ffffff;--csp-border:#e2e8f0;
  --csp-text:#0f172a;--csp-text-soft:#475569;--csp-text-muted:#64748b;
  --csp-radius:14px;--csp-shadow:0 4px 24px rgba(15,23,42,.08);
}
.cscerp-portal{max-width:520px;margin:0 auto;padding:24px 16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Devanagari",Roboto,sans-serif;color:var(--csp-text);}
.cscerp-portal-header{text-align:center;margin-bottom:22px;}
.cscerp-portal-header h1,.cscerp-portal-header h2{font-size:22px;font-weight:600;color:var(--csp-text);margin:0 0 4px;letter-spacing:-.01em;}
.cscerp-portal-sub{color:var(--csp-text-muted);font-size:14px;}
.cscerp-portal-card{background:var(--csp-surface);border:1px solid var(--csp-border);border-radius:var(--csp-radius);padding:24px;box-shadow:var(--csp-shadow);margin-bottom:16px;animation:cspFade .35s ease both;}
@keyframes cspFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.cscerp-portal-section{margin-bottom:18px;}
.cscerp-portal-section h3{font-size:15px;font-weight:600;color:var(--csp-text);margin:0 0 10px;}
.cscerp-portal-form{display:flex;flex-direction:column;gap:12px;}
.cscerp-portal-form input,.cscerp-portal-form select{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;padding:12px 14px;font-size:15px;transition:border-color .15s,box-shadow .15s;}
.cscerp-portal-form input:focus,.cscerp-portal-form select:focus{outline:none;border-color:var(--csp-accent);box-shadow:0 0 0 3px rgba(5,150,105,.15);}
.cscerp-portal-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--csp-accent);color:#fff;border:none;border-radius:10px;padding:12px 20px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,transform .15s;box-shadow:0 1px 3px rgba(5,150,105,.25);}
.cscerp-portal-btn:hover{background:var(--csp-accent-hover);transform:translateY(-1px);color:#fff;}
.cscerp-portal-btn-ghost{background:var(--csp-surface);color:var(--csp-text-soft);border:1px solid #cbd5e1;box-shadow:none;}
.cscerp-portal-btn-ghost:hover{background:#f8fafc;color:var(--csp-text);}
.cscerp-portal-link{color:var(--csp-accent);text-decoration:none;font-size:14px;}
.cscerp-portal-link:hover{text-decoration:underline;}
.cscerp-portal-muted{color:var(--csp-text-muted);font-size:13px;}
.cscerp-portal-note{color:var(--csp-text-muted);font-size:12px;text-align:center;margin-top:14px;}
.cscerp-portal-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600;background:#f1f5f9;color:#475569;}
.cscerp-portal-badge.status-paid,.cscerp-portal-badge.status-approved,.cscerp-portal-badge.status-delivered{background:#ecfdf5;color:#065f46;}
.cscerp-portal-badge.status-pending,.cscerp-portal-badge.status-unpaid{background:#fef3c7;color:#854d0e;}
.cscerp-portal-badge.status-rejected,.cscerp-portal-badge.status-failed,.cscerp-portal-badge.status-locked{background:#fee2e2;color:#991b1b;}
.cscerp-portal-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--csp-surface);border:1px solid var(--csp-border);border-radius:12px;overflow:hidden;}
.cscerp-portal-table th{background:#f8fafc;color:var(--csp-text-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;}
.cscerp-portal-table td{padding:12px;border-top:1px solid var(--csp-border);color:var(--csp-text-soft);}
.cscerp-portal-flash,.cscerp-portal-success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:10px;padding:12px 14px;font-size:14px;margin-bottom:14px;}
.cscerp-portal-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;padding:12px 14px;font-size:14px;margin-bottom:14px;}
.cscerp-portal-empty{text-align:center;padding:40px 20px;color:var(--csp-text-muted);}
@media(max-width:560px){.cscerp-portal{padding:16px 12px;}.cscerp-portal-card{padding:18px;}}