#dashboard-content { padding:16px; max-width:1200px; margin:0 auto; }

#overview-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px; }
.overview-card { background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.overview-card .card-label { font-size:12px; color:var(--text-light); margin-bottom:6px; }
.overview-card .card-value { font-size:24px; font-weight:800; }
.overview-card .card-icon { font-size:24px; float:right; }
.overview-card.gradient-1 { background:linear-gradient(135deg,#00C853,#00BCD4); color:#fff; }
.overview-card.gradient-2 { background:linear-gradient(135deg,#FF9800,#FF5252); color:#fff; }
.overview-card.gradient-3 { background:linear-gradient(135deg,#2196F3,#00BCD4); color:#fff; }
.overview-card.gradient-4 { background:linear-gradient(135deg,#4CAF50,#8BC34A); color:#fff; }
.overview-card.gradient-1 .card-label, .overview-card.gradient-2 .card-label, .overview-card.gradient-3 .card-label, .overview-card.gradient-4 .card-label { color:rgba(255,255,255,.8); }

#kids-tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.kid-tab { padding:10px 20px; background:var(--card); border:2px solid var(--border); border-radius:12px; cursor:pointer; font-weight:600; transition:all .2s; font-size:14px; }
.kid-tab.active { border-color:var(--primary); background:var(--primary); color:#fff; }

#kid-detail { display:grid; gap:20px; }
.detail-section { background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.detail-section h3 { font-size:18px; margin-bottom:14px; }
.detail-section h4 { font-size:15px; margin:14px 0 6px; color:#555; }

.progress-table-container { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.progress-table { width:100%; border-collapse:collapse; min-width:500px; }
.progress-table th { text-align:left; padding:8px; border-bottom:2px solid var(--border); font-size:12px; color:var(--text-light); white-space:nowrap; }
.progress-table td { padding:8px; border-bottom:1px solid var(--border); font-size:13px; }
.progress-table tr:hover { background:#f5f7fa; }
.status-badge { padding:4px 10px; border-radius:12px; font-size:11px; font-weight:600; white-space:nowrap; }
.status-badge.completed { background:#c8e6c9; color:var(--success); }
.status-badge.in_progress { background:#fff3e0; color:var(--warning); }
.status-badge.not_started { background:#f5f5f5; color:#999; }
.progress-bar-cell { display:flex; align-items:center; gap:6px; }
.mini-progress { width:60px; height:8px; background:#e0e0e0; border-radius:4px; overflow:hidden; flex-shrink:0; }
.mini-progress-fill { height:100%; background:var(--success); border-radius:4px; }

.badges-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.badge-item { display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; }
.badge-item.earned { background:#fff8e1; border:2px solid #FFD700; }
.badge-item.not-earned { background:#f5f5f5; border:2px solid #e0e0e0; opacity:.5; }
.badge-item .badge-emoji { font-size:24px; flex-shrink:0; }
.badge-item .badge-name { font-weight:700; font-size:14px; }
.badge-item .badge-desc { font-size:12px; color:var(--text-light); }

.activity-log { max-height:400px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.activity-log-table-container { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.activity-log table { width:100%; border-collapse:collapse; min-width:600px; }
.activity-log th { text-align:left; padding:8px; border-bottom:2px solid var(--border); font-size:12px; color:var(--text-light); position:sticky; top:0; background:#fff; white-space:nowrap; }
.activity-log td { padding:8px; border-bottom:1px solid var(--border); font-size:13px; }

.score-display { font-weight:700; }
.score-display.high { color:var(--success); }
.score-display.mid { color:var(--warning); }
.score-display.low { color:var(--danger); }

.btn-reset { padding:8px 14px; background:var(--danger); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; font-size:13px; }
.btn-reset:hover { opacity:.85; }

.chart-row { display:flex; gap:3px; align-items:flex-end; height:50px; margin-top:10px; }
.chart-bar { flex:1; background:var(--primary); border-radius:4px 4px 0 0; min-height:4px; transition:height .5s; position:relative; }
.chart-bar:hover { background:var(--secondary); }
.chart-bar::after { content:attr(data-value); position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:10px; opacity:0; }
.chart-bar:hover::after { opacity:1; }

.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px; }
.stats-grid .stat-box { text-align:center; padding:14px; background:#f5f7fa; border-radius:12px; }
.stats-grid .stat-value { font-size:24px; font-weight:800; }
.stats-grid .stat-label { font-size:12px; color:#888; }

@media (min-width:600px) {
    #overview-cards { grid-template-columns:repeat(4,1fr); }
    .overview-card { padding:20px; }
    .overview-card .card-label { font-size:14px; }
    .overview-card .card-value { font-size:28px; }
    .overview-card .card-icon { font-size:28px; }
    .badges-grid { grid-template-columns:repeat(2,1fr); }
    .stats-grid { grid-template-columns:repeat(3,1fr); }
    .stats-grid .stat-value { font-size:28px; }
}

@media (min-width:768px) {
    #dashboard-content { padding:24px; }
    #overview-cards { gap:20px; margin-bottom:32px; }
    .overview-card { padding:24px; }
    .overview-card .card-value { font-size:32px; }
    .overview-card .card-icon { font-size:32px; }
    .kid-tab { padding:12px 24px; font-size:16px; }
    #kid-detail { gap:24px; }
    .detail-section { padding:24px; }
    .detail-section h3 { font-size:20px; }
    .progress-table th { font-size:13px; }
    .progress-table td { font-size:14px; }
    .status-badge { font-size:12px; }
    .mini-progress { width:80px; }
    .badges-grid { grid-template-columns:repeat(3,1fr); gap:12px; }
    .badge-item .badge-emoji { font-size:28px; }
    .activity-log th { font-size:13px; }
    .activity-log td { font-size:14px; }
    .stats-grid { grid-template-columns:repeat(6,1fr); }
    .stats-grid .stat-value { font-size:28px; }
    .chart-row { height:60px; gap:4px; }
}

/* inside the parent dashboard frame (phone width): sections never grow wider than the screen; wide tables scroll inside them */
#dashboard-content, #kid-detail, .detail-section { min-width: 0; max-width: 100%; }
.detail-section { overflow-x: auto; }
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width:600px) { .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width:768px) { .stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }