/*
 * DECAS Parent & Student Portal Styles
 * Styles specific to parent and student portal pages
 */

/* ============================================
   CHILD CARDS
   ============================================ */
.child-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 100%;
    border-left: 4px solid #0F2D5C;
}
.child-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.child-card-header {
    background: linear-gradient(135deg, #0F2D5C 0%, #163D7A 100%);
    color: white;
    padding: 1.25rem;
    text-align: center;
}
.child-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.3);
    margin-bottom: 0.5rem;
}
.child-card-body {
    padding: 1rem;
}

/* ============================================
   ANNOUNCEMENT CARDS
   ============================================ */
.announcement-card {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border-left: 4px solid #0F2D5C;
    transition: all 0.3s ease;
}
.announcement-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.announcement-card.priority-high {
    border-left-color: #dc3545;
}
.announcement-card.priority-normal {
    border-left-color: #0F2D5C;
}
.announcement-card.priority-low {
    border-left-color: #6c757d;
}
.announcement-title {
    font-weight: 600;
    color: #0F2D5C;
    margin-bottom: 0.25rem;
}
.announcement-meta {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-bottom: 0.5rem;
}
.announcement-content {
    font-size: 0.9rem;
    color: #495057;
}

/* ============================================
   MESSAGE LIST
   ============================================ */
.message-item {
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
}
.message-item:hover {
    background: #f8f9fa;
}
.message-item.unread {
    border-left: 3px solid #0F2D5C;
    background: rgba(15, 45, 92, 0.03);
}
.msg-subject {
    font-weight: 600;
    color: #0F2D5C;
    margin-bottom: 0.15rem;
}
.msg-preview {
    font-size: 0.85rem;
    color: #7f8c8d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-meta {
    font-size: 0.75rem;
    color: #adb5bd;
}

/* ============================================
   PROFILE CARD
   ============================================ */
.profile-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.profile-header {
    background: linear-gradient(135deg, #0F2D5C 0%, #163D7A 100%);
    color: white;
    padding: 2rem;
    text-align: center;
}
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    object-fit: cover;
    margin-bottom: 0.75rem;
}

/* ============================================
   FEE SUMMARY CARD
   ============================================ */
.fee-summary-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    height: 100%;
}
.btn-actions .btn {
    margin-bottom: 0.5rem;
}

/* ============================================
   HEALTH CARDS (Allergy severity)
   ============================================ */
.health-card {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid #dee2e6;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.health-card.allergy-severe {
    border-left-color: #dc3545;
}
.health-card.allergy-moderate {
    border-left-color: #F4B400;
}
.health-card.allergy-mild {
    border-left-color: #28a745;
}

/* ============================================
   REPORT CARD
   ============================================ */
.rc-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
}
.rc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.rc-card-header {
    background: linear-gradient(135deg, #0F2D5C 0%, #163D7A 100%);
    color: white;
    padding: 1rem;
    text-align: center;
}
.rc-card-body {
    padding: 1rem;
}
.rc-card-body .info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid #f0f0f0;
}
.rc-card-body .info-row:last-child {
    border-bottom: none;
}

/* Report card modal / detail view */
.report-school-header {
    text-align: center;
    padding: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
}
.report-school-header img {
    max-height: 60px;
    margin-bottom: 0.5rem;
}
.student-info-table {
    width: 100%;
    margin-bottom: 1rem;
}
.student-info-table td {
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
}
.subject-table {
    width: 100%;
    border-collapse: collapse;
}
.subject-table th,
.subject-table td {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    font-size: 0.85rem;
}
.subject-table th {
    background: #f8f9fa;
    font-weight: 600;
}
.summary-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}
.remarks-section .remark-box {
    padding: 0.75rem;
    border-left: 3px solid #0F2D5C;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    margin-bottom: 0.5rem;
}

/* ============================================
   ATTENDANCE SUMMARY
   ============================================ */
.attendance-summary-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    height: 100%;
}

/* ============================================
   UPCOMING ITEMS
   ============================================ */
.upcoming-item {
    padding: 0.75rem;
    border-radius: 8px;
    background: #f8f9fa;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}
.upcoming-item:hover {
    background: #e9ecef;
}

/* ============================================
   QUICK LINKS (Student)
   ============================================ */
.quick-link {
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 1rem;
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}
.quick-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.quick-link-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-size: 1.25rem;
}

/* ============================================
   LIVE TIME & EXAM ALERT
   ============================================ */
.live-time {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F2D5C;
    font-family: monospace;
}
.alert-exam {
    background: linear-gradient(135deg, #0F2D5C, #163D7A);
    color: white;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ============================================
   PRINT STYLES (Report Card)
   ============================================ */
@media print {
    .no-print { display: none !important; }
    .modal { position: static !important; }
    .modal-dialog { max-width: 100% !important; margin: 0 !important; }
    .modal-content { border: none !important; box-shadow: none !important; }
    .modal-header .btn-close { display: none !important; }
    .modal-footer { display: none !important; }
    body { background: white !important; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .child-card-header { padding: 1rem; }
    .child-avatar { width: 50px; height: 50px; }
    .profile-header { padding: 1.5rem; }
}