/* ── SchoolMS Customer Portal — shared styles ────────────────────── */
*{box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#f8fafc;color:#1e293b;margin:0}
a{text-decoration:none;color:inherit}

/* Nav */
.cp-nav{background:#fff;border-bottom:1px solid #e2e8f0;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(0,0,0,.06);gap:16px}
.cp-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:#1e293b;flex-shrink:0}
.cp-logo img{height:32px}
.cp-nav-mid{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.cp-nav-link{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:.88rem;font-weight:600;color:#64748b;transition:background .15s,color .15s}
.cp-nav-link:hover{background:#f1f5f9;color:#1e293b}
.cp-nav-active{background:#eff6ff;color:#2563eb}
.cp-user{display:flex;align-items:center;gap:10px;flex-shrink:0}
.cp-avatar{width:36px;height:36px;border-radius:50%;background:#2563eb;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem;overflow:hidden;flex-shrink:0}
.cp-avatar img{width:100%;height:100%;object-fit:cover}
.cp-username{font-weight:600;font-size:.88rem;color:#374151}
.cp-logout{background:#f1f5f9;color:#64748b;padding:7px 14px;border-radius:8px;font-size:.85rem;font-weight:600;transition:background .2s}
.cp-logout:hover{background:#e2e8f0}

/* Main content wrapper */
.cp-main{max-width:1100px;margin:0 auto;padding:36px 24px}
.cp-main-narrow{max-width:740px;margin:0 auto;padding:36px 24px}

/* Page header */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.page-title{font-size:1.5rem;font-weight:800;color:#0f172a;margin:0}
.page-sub{font-size:.92rem;color:#64748b;margin:4px 0 0}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:#2563eb;color:#fff;padding:10px 22px;border-radius:10px;font-weight:700;font-size:.9rem;transition:background .2s;border:none;cursor:pointer}
.btn-primary:hover{background:#1d4ed8}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:#f1f5f9;color:#475569;padding:10px 20px;border-radius:10px;font-weight:600;font-size:.9rem;border:1.5px solid #e2e8f0;cursor:pointer;transition:background .2s}
.btn-secondary:hover{background:#e2e8f0}
.btn-danger{display:inline-flex;align-items:center;gap:8px;background:#fef2f2;color:#dc2626;padding:10px 20px;border-radius:10px;font-weight:600;font-size:.9rem;border:1.5px solid #fecaca;cursor:pointer}

/* Cards */
.cp-card{background:#fff;border-radius:16px;border:1px solid #e2e8f0;overflow:hidden}
.cp-card-header{padding:18px 24px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}
.cp-card-title{font-size:1rem;font-weight:700;color:#0f172a;margin:0}
.cp-card-body{padding:24px}

/* Alerts */
.alert{padding:13px 18px;border-radius:10px;font-size:.9rem;font-weight:500;margin-bottom:20px;display:none}
.alert.show{display:block}
.alert-error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.alert-success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.alert-info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}

/* Forms */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:.82rem;font-weight:600;color:#475569;margin-bottom:5px}
.form-control{width:100%;padding:10px 13px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:.92rem;font-family:inherit;color:#1e293b;transition:border-color .15s;background:#fff}
.form-control:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-control:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}
.form-hint{font-size:.78rem;color:#94a3b8;margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Status badges */
.badge{display:inline-block;padding:3px 10px;border-radius:5px;font-size:.78rem;font-weight:700}
.badge-pending{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
.badge-paid{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.badge-failed{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.badge-cancelled{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}

/* Table */
.cp-table{width:100%;border-collapse:collapse}
.cp-table th{padding:11px 16px;text-align:left;font-size:.78rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.cp-table td{padding:14px 16px;font-size:.9rem;border-bottom:1px solid #f1f5f9;color:#374151;vertical-align:middle}
.cp-table tr:last-child td{border-bottom:none}
.cp-table tr:hover td{background:#fafbff}

/* Action links */
.action-link{color:#2563eb;font-weight:600;font-size:.84rem;padding:5px 12px;border-radius:7px;border:1px solid #bfdbfe;background:#eff6ff;transition:background .2s;white-space:nowrap}
.action-link:hover{background:#dbeafe}
.action-link-warn{color:#d97706;border-color:#fde68a;background:#fffbeb}
.action-link-warn:hover{background:#fef3c7}
.action-link-green{color:#16a34a;border-color:#bbf7d0;background:#f0fdf4}

/* Empty state */
.empty-state{text-align:center;padding:60px 24px;color:#94a3b8}
.empty-state svg{margin:0 auto 16px;display:block;opacity:.35}
.empty-state p{font-size:1rem;margin-bottom:20px}

/* Tabs */
.cp-tabs{display:flex;gap:2px;border-bottom:2px solid #e2e8f0;margin-bottom:28px}
.cp-tab{padding:10px 20px;border:none;background:none;font-size:.9rem;font-weight:600;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.cp-tab.active{color:#2563eb;border-bottom-color:#2563eb}
.cp-tab-pane{display:none}
.cp-tab-pane.active{display:block}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:16px;position:relative}
.tl-item:not(:last-child) .tl-line{position:absolute;left:15px;top:32px;bottom:-4px;width:2px;background:#e2e8f0;z-index:0}
.tl-dot{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.tl-dot-done{background:#f0fdf4;border:2px solid #16a34a;color:#16a34a}
.tl-dot-active{background:#eff6ff;border:2px solid #2563eb;color:#2563eb}
.tl-dot-pending{background:#f8fafc;border:2px solid #e2e8f0;color:#cbd5e1}
.tl-dot-failed{background:#fef2f2;border:2px solid #dc2626;color:#dc2626}
.tl-content{padding:4px 0 24px}
.tl-label{font-size:.92rem;font-weight:700;color:#0f172a}
.tl-sub{font-size:.82rem;color:#64748b;margin-top:2px}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px 22px}
.stat-value{font-size:1.8rem;font-weight:800;color:#0f172a;line-height:1}
.stat-label-txt{font-size:.82rem;color:#64748b;margin-top:4px}

/* Avatar upload */
.avatar-wrap{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.avatar-lg{width:80px;height:80px;border-radius:50%;background:#2563eb;color:#fff;font-size:2rem;font-weight:800;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:3px solid #e2e8f0}
.avatar-lg img{width:100%;height:100%;object-fit:cover}

/* Responsive */
@media(max-width:700px){
  .cp-nav{padding:0 16px}
  .cp-nav-mid{display:none}
  .cp-username{display:none}
  .form-row{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .cp-main,.cp-main-narrow{padding:24px 16px}
}

/* ── Input validation ──────────────────────────────────── */
.is-invalid,.form-control.is-invalid{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.1)!important}
.field-error{font-size:.76rem;color:#ef4444;margin-top:4px;display:flex;align-items:center;gap:4px}
.field-error::before{content:'⚠';font-size:.72rem}