/* Shared visual language for the student area. Page styles own their layouts. */
.student-area-shell {
    --student-primary: #7427bd;
    --student-primary-dark: #5a1e94;
    --student-primary-soft: #f4effc;
    --student-primary-border: #e8dff7;
    --student-text: #202b3f;
    --student-muted: #647087;
    --student-border: #dfe0eb;
    --student-surface: #fff;
    --student-soft: #f8f9fc;
    --student-success: #226b42;
    --student-success-soft: #e8f7ee;
    --student-warning: #925c12;
    --student-warning-soft: #fff6e6;
    --student-danger: #b73646;
    --student-danger-soft: #fff0f2;
    --student-info: #344b74;
    --student-info-soft: #f2f6ff;
    --student-radius: 12px;
    --student-control-radius: 8px;
    --student-shadow: 0 5px 20px rgba(28, 40, 70, .06);
}
.student-area.page-inner { padding: 38px 15px 48px; color: var(--student-text); }
.student-area .student-page-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    margin: 0 0 20px; padding: 14px 18px; border-radius: 9px;
    background: rgba(255,255,255,.92);
}
.student-area .student-page-heading > div { min-width: 0; }
.student-area .student-page-heading h1 { margin: 0; color: var(--student-text); font-size: 30px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.student-area .student-page-heading p { margin: 6px 0 0; color: var(--student-muted); font-size: 14px; line-height: 1.6; }
.student-area .student-page-heading > .btn { flex-shrink: 0; }
.student-area .student-back-link { display: inline-block; margin-bottom: 8px; color: var(--student-primary); font-size: 13px; }
.student-area .student-back-link i { margin-right: 6px; }
.student-area .student-panel,
.student-area .card { border: 1px solid var(--student-border); border-radius: var(--student-radius); background: var(--student-surface); box-shadow: var(--student-shadow); }
.student-area .card-header { padding: 20px 24px; border-bottom: 1px solid var(--student-border); background: transparent; }
.student-area .card-body { padding: 24px; }
.student-area .card-header h2,
.student-area .student-section-title { margin: 0; color: var(--student-text); font-size: 20px; font-weight: 700; line-height: 1.4; }
.student-area .text-primary { color: var(--student-primary) !important; }
.student-area .text-muted { color: var(--student-muted) !important; }
.student-area .btn {
    min-height: 44px; padding: 10px 16px; border-radius: var(--student-control-radius) !important;
    font-size: 14px; font-weight: 600; line-height: 1.5; box-shadow: none;
}
.student-area .btn-primary,
.student-area .student-button-primary {
    color: #fff !important; background: var(--student-primary) !important; border-color: var(--student-primary) !important;
}
.student-area .btn-primary:hover,
.student-area .student-button-primary:hover { background: var(--student-primary-dark) !important; border-color: var(--student-primary-dark) !important; }
.student-area .btn-primary.btn-border,
.student-area .student-button-secondary {
    color: var(--student-primary) !important; background: #fff !important; border-color: var(--student-primary) !important;
}
.student-area .btn-primary.btn-border:hover,
.student-area .student-button-secondary:hover { background: var(--student-primary-soft) !important; }
.student-area .btn-danger { color: #fff !important; background: var(--student-danger) !important; border-color: var(--student-danger) !important; }
.student-area .btn-danger.btn-border { color: var(--student-danger) !important; background: #fff !important; }
.student-area .btn-light { color: var(--student-muted) !important; background: #fff !important; border-color: var(--student-border) !important; }
.student-area .btn[disabled], .student-area .btn.disabled { opacity: .6; }
.student-area .form-control { min-height: 44px; border-color: var(--student-border); border-radius: var(--student-control-radius); font-size: 14px; }
.student-area .form-control:focus { border-color: var(--student-primary); box-shadow: 0 0 0 3px rgba(116,39,189,.12); }
.student-area a:focus-visible,
.student-area button:focus-visible,
.student-area [role="button"]:focus-visible { outline: 3px solid #ae87db; outline-offset: 3px; }
.student-area .student-note { color: var(--student-info); background: var(--student-info-soft); border: 1px solid #d3e0f9; border-radius: var(--student-control-radius); line-height: 1.7; }
.student-area .student-note > i { color: var(--student-primary); }

/* The same steps continue from the hub into activity selection. */
.student-area .student-steps { margin: 0 0 24px; padding: 0 0 24px; border-bottom: 1px solid var(--student-border); }
.student-area .student-steps ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin: 0; padding: 0; list-style: none; }
.student-area .student-steps li { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--student-muted); }
.student-area .student-steps li > span,
.student-area .student-steps li > a { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--student-border); border-radius: 50%; color: inherit; background: #fff; }
.student-area .student-steps li strong { font-size: 13px; line-height: 1.4; font-weight: 500; }
.student-area .student-steps li.is-active { color: var(--student-primary); }
.student-area .student-steps li.is-active > span { background: var(--student-primary); border-color: var(--student-primary); color: #fff; }
.student-area .student-steps li.is-active strong { font-weight: 700; }
.student-area .student-steps li.is-complete > a { color: var(--student-primary); background: var(--student-primary-soft); border-color: var(--student-primary-border); }

/* Shared components applied to the existing page-specific markup. */
.student-area .student-registration-layout { grid-template-columns: 27% minmax(0,1fr); gap: 0; overflow: hidden; background: #fff; border: 1px solid var(--student-border); border-radius: var(--student-radius); box-shadow: var(--student-shadow); }
.student-area .student-registration-summary,
.student-area .student-registration-content { padding: 24px; border: 0; border-radius: 0; box-shadow: none; }
.student-area .student-registration-summary { border-right: 1px solid var(--student-border); }
.student-area .student-registration-identity img { width: 92px; height: 92px; border-color: var(--student-primary-border); background: var(--student-primary-soft); }
.student-area .student-registration-summary h2,
.student-area .student-registration-content-heading h2 { color: var(--student-text); font-size: 20px; }
.student-area .student-registration-filter { min-height: 44px; border-radius: var(--student-control-radius); }
.student-area .student-registration-group { border-radius: var(--student-control-radius); }
.student-area .student-registration-detail { color: var(--student-primary); }
.student-area .student-registration-item:hover { background: var(--student-primary-soft); }
.student-area .student-registration-result,
.student-area .student-activity-result,
.student-area .student-attendance-status { padding: 4px 9px; border-radius: 6px; font-size: 13px; line-height: 1.5; }
.student-area .student-dashboard-summary { gap: 16px; margin-bottom: 20px; }
.student-area .student-dashboard-summary > div { min-height: 100px; gap: 16px; padding: 20px; border-color: var(--student-border); border-radius: var(--student-radius); box-shadow: var(--student-shadow); }
.student-area .student-dashboard-summary i { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; color: var(--student-primary); background: var(--student-primary-soft); border-radius: 10px; font-size: 22px; }
.student-area .student-dashboard-summary strong { color: var(--student-primary); }
.student-area .student-activity-card { border-color: var(--student-border); border-radius: var(--student-control-radius); }
.student-area .student-activity-code { color: var(--student-primary); background: var(--student-primary-soft); }
.student-area .student-activity-name { color: var(--student-text); font-size: 18px; white-space: normal; }
.student-area .student-activity-visual { border-radius: var(--student-control-radius); }
.student-area .student-activity-evaluation { border-top-color: var(--student-border); }
.student-area .student-activity-drawer-header { background: var(--student-primary); }
.student-area .student-activity-drawer-header h2,
.student-area .student-activity-drawer-header button { color: #fff; }
.student-area .student-activity-drawer-header button { background: transparent; border-color: rgba(255,255,255,.4); }
.student-area .student-dashboard-sidebar .card-header h2 i { color: var(--student-primary); }
.student-area .student-dashboard-sidebar a { color: var(--student-primary); }
.student-area .student-profile-summary,
.student-area .student-profile-workspace { box-shadow: var(--student-shadow); }
.student-area .student-profile-workspace { margin-top: 20px; }
.student-area .student-profile-content { padding: 24px; background: #fff; }
.student-area .student-profile-panel { padding: 0; border: 0; }
.student-area .student-profile-nav-item.is-active { background: var(--student-primary-soft); }
.student-area .student-profile-info-note { border-color: #d3e0f9; }
.student-area .student-attendance-overview-grid { gap: 16px; }
.student-area .student-attendance-overview-card { min-height: 112px; padding: 18px; border-color: var(--student-border); background: #fff; box-shadow: var(--student-shadow); }
.student-area .student-attendance-overview-card strong { margin: 8px 0; color: var(--student-primary); }
.student-area .student-attendance-overview-card.is-present strong { color: var(--student-success); }
.student-area .student-attendance-overview-card.is-exception strong { color: var(--student-warning); }
.student-area .student-attendance-activity-card > header { padding: 20px 24px; background: #fff; }
.student-area .student-attendance-activity-title strong { font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
.student-area .student-attendance-session { min-height: 48px; padding: 10px 24px; }
.student-area .student-attendance-notice { margin-top: 16px; padding: 14px 16px; }

/* SweetAlert is attached to body; scope its appearance to student routes. */
.student-area-shell .swal-modal { border: 1px solid var(--student-border); border-radius: var(--student-radius); }
.student-area-shell .swal-title { color: var(--student-text); font-size: 22px; }
.student-area-shell .swal-text { color: var(--student-muted); line-height: 1.7; }
.student-area-shell .swal-button { min-height: 44px; border-radius: var(--student-control-radius); font-size: 14px; }
.student-area-shell .swal-button--confirm { background: var(--student-primary) !important; border-color: var(--student-primary) !important; color: #fff !important; }
.student-area-shell .swal-button--confirm.btn-danger { background: var(--student-danger) !important; border-color: var(--student-danger) !important; }
.student-area-shell .swal-button--cancel { color: var(--student-muted) !important; background: #fff !important; border: 1px solid var(--student-border); }
.student-area-shell .swal-button:focus-visible { outline: 3px solid #ae87db; outline-offset: 3px; }

@media (max-width:1100px) {
    .student-area .student-registration-layout { grid-template-columns: 260px minmax(0,1fr); }
    .student-area .student-registration-summary, .student-area .student-registration-content { padding: 20px; }
    .student-area .student-steps li { flex-direction: column; text-align: center; }
}
@media (min-width:768px) and (max-width:991.98px) {
    .student-area .student-registration-layout { display: block; }
    .student-area .student-registration-summary { border-right: 0; border-bottom: 1px solid var(--student-border); }
}
@media (max-width:767.98px) {
    .student-area.page-inner { padding: 22px 15px 34px; }
    .student-area .student-page-heading { align-items: stretch; flex-direction: column; gap: 14px; padding: 14px; margin-bottom: 16px; }
    .student-area .student-page-heading h1 { font-size: 24px; }
    .student-area .student-page-heading > .btn { align-self: flex-start; }
    .student-area .card-header, .student-area .card-body { padding: 18px 16px; }
    .student-area .student-steps { padding-bottom: 18px; margin-bottom: 20px; }
    .student-area .student-steps ol { gap: 8px; }
    .student-area .student-steps li strong { font-size: 12px; }
    .student-area .student-registration-layout { display: block; background: transparent; border: 0; box-shadow: none; overflow: visible; }
    .student-area .student-registration-summary, .student-area .student-registration-content { padding: 18px 16px; border: 1px solid var(--student-border); border-radius: var(--student-radius); }
    .student-area .student-registration-content { margin-top: 16px; }
    .student-area .student-dashboard-summary { gap: 10px; }
    .student-area .student-dashboard-summary > div { min-height: 80px; padding: 16px; }
    .student-area .student-profile-content { padding: 18px 16px; border: 1px solid var(--student-border); border-radius: var(--student-radius); }
    .student-area .student-profile-workspace { background: transparent; box-shadow: none; }
    .student-area .student-attendance-overview-grid { gap: 10px; }
    .student-area .student-attendance-overview-card { padding: 14px; }
    .student-area .student-attendance-activity-card > header { padding: 16px; }
    .student-area .student-attendance-session { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .student-area a, .student-area button { transition: none !important; }
}
@media (max-width:575.98px) {
    .student-area .student-attendance-overview-card.is-rate { order: 1; }
}