* { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-light); color: var(--text-dark); margin: 0; padding: 5px; -webkit-text-size-adjust: 100%; } .container { width: 100%; max-width: 100%; margin: 0 auto; background: white; padding: 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @media(min-width: 768px) { .container { max-width: 1400px; padding: 20px; border-radius: 12px; } body { padding: 15px; } } header { text-align: center; border-bottom: 3px solid var(--primary); padding-bottom: 10px; margin-bottom: 12px; } header h2 { margin: 0; color: var(--primary); font-size: 16px; } @media(min-width: 768px) { header h2 { font-size: 22px; } } header p { margin: 4px 0 0; color: #64748b; font-size: 11px; } @media(min-width: 768px) { header p { font-size: 13px; } } .tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .tab-btn { padding: 8px 14px; background: #e2e8f0; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; color: var(--text-dark); white-space: nowrap; flex-shrink: 0; } .tab-btn.active { background: var(--primary); color: white; } .view-section { display: none; } .view-section.active { display: block; } /* Fully Responsive Table Container */ .table-responsive { width: 100%; overflow-x: auto; max-height: 70vh; border: 1px solid var(--border-color); border-radius: 6px; -webkit-overflow-scrolling: touch; background: #fff; } table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; } @media(min-width: 768px) { table { font-size: 13px; } } th, td { border: 1px solid var(--border-color); padding: 6px; text-align: center; } th { background-color: var(--primary); color: white; position: sticky; top: 0; z-index: 10; } tr:nth-child(even) { background-color: #f1f5f9; } input.grid-input { width: 40px; padding: 4px 2px; text-align: center; border: 1px solid var(--border-color); border-radius: 4px; font-size: 12px; } @media(min-width: 768px) { input.grid-input { width: 50px; font-size: 13px; } } input.text-input { width: 95px; padding: 4px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 12px; } @media(min-width: 768px) { input.text-input { width: 130px; font-size: 13px; } } /* Result Card Styles */ .card-selector { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; } @media(min-width: 600px) { .card-selector { flex-direction: row; align-items: center; justify-content: space-between; } } .card-selector select { padding: 8px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 13px; width: 100%; } .report-card { border: 2px solid var(--primary); padding: 12px; border-radius: 8px; background: white; max-width: 850px; margin: 0 auto; } @media(min-width: 768px) { .report-card { padding: 25px; } } .report-header { text-align: center; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; } @media(min-width: 600px) { .report-header { flex-direction: row; justify-content: space-between; text-align: left; } } .report-header img { height: 45px; object-fit: contain; } @media(min-width: 768px) { .report-header img { height: 60px; } } .student-info-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; font-size: 12px; background: #f8fafc; padding: 10px; border-radius: 6px; } @media(min-width: 600px) { .student-info-grid { grid-template-columns: 1fr 1fr; font-size: 13px; } } .remarks-box { margin-top: 8px; border: 1px solid var(--border-color); padding: 8px; border-radius: 6px; background: #fff; font-size: 11px; } .grading-table { width: 100%; margin-top: 10px; margin-bottom: 12px; font-size: 9px; text-align: center; } @media(min-width: 768px) { .grading-table { font-size: 11px; } } .signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; text-align: center; font-size: 10px; } @media(min-width: 600px) { .signatures { display: flex; justify-content: space-between; font-size: 11px; } } .signature-line { border-top: 1px solid var(--text-dark); width: 100px; margin: 0 auto; padding-top: 3px; } @media(min-width: 768px) { .signature-line { width: 130px; } } .action-bar { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .btn { background: var(--secondary); color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; width: 100%; } @media(min-width: 600px) { .btn { width: auto; font-size: 13px; } } .btn:hover { background: var(--primary); } .status-msg { color: #16a34a; font-weight: 600; font-size: 11px; } @media print { body { background: white; padding: 0; } .container, .tabs, .card-selector, .action-bar { display: none; } .report-card { border: none; box-shadow: none; margin: 0; width: 100%; max-width: none; } }
S. No. Registration No Student Name Father Name Days Attended English Literature (150) English Language (150) Urdu Literature (80) Urdu Language (70) Islamiat (150) Science (150) Mathematics (150) SST (150) Computer (150) Total (1200) % Grade
BiMMidFinTot BiMMidFinTot BiMMidFinTot BiMMidFinTot BiMMidFinTot BiMMidFinTot BiMMidFinTot BiMMidFinTot BiMMidFinTot
Live calculation active.