/* Parent Portal Styles (React design port, no React) */
:root {
  --pp-primary: #019aa7;
  --pp-primary-600: #018b97;
  --pp-text: #1E293B;
  --pp-muted: #64748B;
  --pp-bg: #F8FAFC;
  --pp-card: #ffffff;
  --pp-border: #E2E8F0;
  --pp-success: #10B981;
  --pp-warning: #F59E0B;
  --pp-error: #EF4444;
  --pp-radius: 12px;
  --pp-shadow: 0 12px 30px rgba(2,8,20,0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.pp { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--pp-bg); color: var(--pp-text); }

.pp-app { min-height: 100vh; display: flex; }

/* Sidebar */
.pp-sidebar { width: 280px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; display: flex; flex-direction: column; transition: width .3s ease; }
.pp-sidebar.collapsed { width: 80px; }
.pp-sidebar-header { padding: 24px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid rgba(255,255,255,.12); }
.pp-logo { display:flex; align-items:center; gap:12px; font-size: 20px; font-weight: 600; margin:0; }
.pp-nav { flex:1; padding: 16px 0; }
.pp-nav ul { list-style: none; margin:0; padding:0; }
.pp-nav a { display:flex; align-items:center; gap:12px; padding:12px 20px; color: rgba(255,255,255,.85); text-decoration:none; border-radius: 8px; transition: background .2s; }
.pp-nav a:hover { background: rgba(255,255,255,.12); color:#fff; }
.pp-nav li.active a { background: rgba(255,255,255,.20); color:#fff; font-weight:600; }
.pp-sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; }

/* Main */
.pp-main { flex:1; display:flex; flex-direction:column; }
.pp-topbar { height:65px; background: var(--pp-card); border-bottom: 1px solid var(--pp-border); display:flex; align-items:center; justify-content:space-between; padding: 0 24px; }
.pp-user { display:flex; align-items:center; gap:12px; }
.pp-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; border:1px solid var(--pp-border); background:#fff; display:flex; align-items:center; justify-content:center; }
.pp-content { flex:1; padding: 24px; }
.pp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.pp-title { font-size: 28px; font-weight: 800; }
.pp-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:none; border-radius: 10px; background: var(--pp-primary); color:#fff; font-weight:600; cursor:pointer; transition: background .2s; }
.pp-btn:hover { background: var(--pp-primary-600); }

/* Cards */
.pp-card { background: var(--pp-card); border:1px solid var(--pp-border); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); padding: 16px; }
.pp-card-attended { background-color:#ddd !important; cursor:not-allowed; opacity:.7; }
.pp-grid { display:grid; gap:16px; }
@media (min-width: 768px) { .pp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* Tables */
.pp-table { width:100%; border-collapse: collapse; }
.pp-table th { background:#f8f9fa; padding:12px; text-align:left; font-weight:600; color:#333; border-bottom: 2px solid var(--pp-border); }
.pp-table td { padding:12px; border-bottom:1px solid var(--pp-border); }
.pp-badge { display:inline-block; padding:4px 8px; border-radius:8px; font-size:12px; font-weight:600; }
.pp-badge.success { background:#d1fae5; color:#065f46; }
.pp-badge.warning { background:#fef3c7; color:#92400e; }
.pp-badge.error { background:#fee2e2; color:#7f1d1d; }

/* Inputs */
.pp-input, .pp-select { width:100%; padding:10px 12px; border:1px solid var(--pp-border); border-radius: 10px; background:#fff; font-size:14px; }
.pp-input:focus, .pp-select:focus { outline:none; border-color: var(--pp-primary); box-shadow: 0 0 0 2px rgba(1,154,167,.25); }

/* Responsive */
@media (max-width: 768px) {
  .pp-sidebar { position: fixed; left: -280px; top: 0; height: 100vh; z-index: 1000; }
  .pp-sidebar.open { left: 0; }
}

/* Responsive behavior for parent dashboard sidebar toggle */
@media (max-width: 767px) {
  #pp-sidebar { width: 14rem; transform: translateX(-100%); transition: transform 300ms ease-in-out; }
  #pp-sidebar.open { transform: translateX(0); z-index:999;}
  #pp-overlay.active { display:block; }
  #pp-main.pp-main-shift { transform: translateX(14rem); }
  #pp-main { padding-bottom:100px;}
}

/* Map existing parent classes to new visual system without changing templates */
.sad-parent-dashboard-section h2 { font-size: 24px; font-weight: 800; margin: 0 0 12px; }
.sad-dashboard-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.sad-dashboard-actions .sad-btn { margin-left: 8px; }
.sad-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:none; border-radius:10px; background: var(--pp-primary); color:#fff; font-weight:600; cursor:pointer; }
.sad-btn.sad-btn-outline { background:#fff; color: var(--pp-text); border:1px solid var(--pp-border); }
.sad-btn.sad-btn-sm { padding:8px 10px; border-radius:8px; font-size:13px; }
.sad-btn:hover { background: var(--pp-primary-600); }
.sad-welcome-message { margin: 8px 0 20px; color: var(--pp-muted); }
.sad-dashboard-stats { display:grid; gap:16px; grid-template-columns: repeat(2,1fr); }
@media (min-width:1024px){ .sad-dashboard-stats { grid-template-columns: repeat(4,1fr); } }
.sad-stat-card { background: var(--pp-card); border:1px solid var(--pp-border); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); padding: 16px; display:flex; align-items:center; gap:16px; }
.sad-stat-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; }
.sad-stat-icon.children { background:#3b82f6; }
.sad-stat-icon.classes { background:#22c55e; }
.sad-stat-icon.payments { background:#f59e0b; }
.sad-stat-icon.progress { background:#8b5cf6; }
.sad-stat-content h3 { font-size:24px; font-weight:800; margin:0; }
.sad-stat-content p { margin:2px 0; color: var(--pp-muted); }
.sad-section-header { display:flex; align-items:center; justify-content:space-between; margin:18px 0 8px; }
.sad-children-grid { display:grid; gap:16px; grid-template-columns: repeat(1,1fr); }
@media (min-width:768px){ .sad-children-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .sad-children-grid { grid-template-columns: repeat(3,1fr); } }
.sad-child-card { background: var(--pp-card); border:1px solid var(--pp-border); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); padding: 16px; display:grid; grid-template-columns: 60px 1fr auto; gap:12px; }
.sad-child-avatar img { width:60px; height:60px; border-radius:50%; object-fit:cover; }
.sad-progress-bar { width:100%; height:8px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.sad-progress-fill { height:100%; background: var(--pp-primary); }
.sad-classes-list .sad-class-item, .sad-notifications-list .sad-notification { background: var(--pp-card); border:1px solid var(--pp-border); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); padding: 12px; display:flex; align-items:center; justify-content:space-between; }
.sad-payments-table table { width:100%; border-collapse:collapse; }
.sad-payments-table th { background:#f8f9fa; padding:12px; text-align:left; border-bottom:2px solid var(--pp-border); }
.sad-payments-table td { padding:12px; border-bottom:1px solid var(--pp-border); }
.sad-payment-status.paid { background:#d1fae5; color:#065f46; padding:4px 8px; border-radius:8px; font-weight:600; }
.sad-payment-status.pending { background:#fef3c7; color:#92400e; padding:4px 8px; border-radius:8px; font-weight:600; }
.sad-payment-status.failed { background:#fee2e2; color:#7f1d1d; padding:4px 8px; border-radius:8px; font-weight:600; }
.sad-actions-grid { display:grid; gap:12px; grid-template-columns: repeat(2,1fr); }
@media (min-width:768px){ .sad-actions-grid { grid-template-columns: repeat(3,1fr); } }
.sad-action-card { background:#fff; border:1px solid var(--pp-border); border-radius:12px; box-shadow: var(--pp-shadow); padding:14px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.sad-action-card:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(2,8,20,.1); }
/* Sticky bottom mobile nav */
@media (max-width: 767px) {
  .pp-bottom-nav a { color:#334155; }
  .pp-bottom-nav a.active { color:#0198A6; font-weight:600; }
}

/* Mobile titles: center and larger bottom spacing */
@media (max-width: 767px) {
  #pp-main h2 { text-align: center; margin-bottom: 50px !important; }
}

/* Progress Timeline refined */
.pp-progress{font-family:'Public Sans',sans-serif;color:#0F172A}
.pp-overall{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:24px}
.pp-overall-label{font-weight:600;color:#334155}
.pp-bar{height:8px;background:#E5E7EB;border-radius:999px;overflow:hidden;position:relative}
.pp-fill{position:absolute;left:0;top:0;bottom:0;background:#176C78;border-radius:999px}
.pp-percent{font-weight:700;color:#334155;font-size:12px}
.pp-timeline{position:relative;padding-left:44px}
.pp-timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:#C7D2FE}
.pp-item{position:relative;margin:20px 0}
.pp-icon{position:absolute;left:6px;top:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #E5E7EB;background:#F1F5F9;color:#1E293B}
.pp-item.is-completed .pp-icon{background:#D1FAE5;border-color:#34D399;color:#065F46}
.pp-item.is-current .pp-icon{background:#E0F2FE;border-color:#0EA5E9;color:#0284C7}
.pp-item.is-locked .pp-icon{background:#F8FAFC;border-color:#E5E7EB;color:#94A3B8}
.pp-item.is-milestone .pp-icon{background:#FEF9C3;border-color:#F59E0B;color:#B45309}
.pp-content{margin-left:16px}
.pp-week{font-size:12px;color:#64748B;margin-bottom:2px}
.pp-item.is-current .pp-week{color:#0EA5E9;font-weight:700}
.pp-title{font-size:16px;line-height:1.3;font-weight:700;color:#0F172A}
.pp-milestone{color:#B45309;font-size:12px;font-weight:700;margin-bottom:2px}
@media (max-width:768px){.pp-timeline{padding-left:40px}.pp-icon{left:4px}}
.pp-item:focus-within .pp-title{outline:2px solid #0EA5E9;outline-offset:2px;border-radius:6px}