/* ==========================================================
   Student Portal Manager - Stylesheet
   Rules:
   - ADMIN PANEL: no maroon anywhere. All text/lines black. Anywhere
     there is a shaded (filled) background, that background is black
     with white text.
   - TEACHER/STUDENT PORTAL: maroon (#800000) shading + white text is
     used for the section heading bars - "Student Info" / "Teacher Info" /
     "Course Info" / "Payment Info" / "Course Document" / "Change Password" /
     "My Class Routine" / "Assigned Students" / "Attendance" / the Login
     page heading - plus the "Download Certificate", "Logout" and "Login"
     buttons.
     Everything else inside those sections (the info-table label column,
     the Payment Info table header row) is a plain box: white background,
     black text, a simple black border - no fill color. The Status badge
     ("Graduating"/"Discontinued"/"Graduated"/"Continuing") is a filled
     black box with white text.
     Every other shaded box in the portal (Give/Save Attendance buttons,
     Download Routine/Give Attendance links, Update Password, Download Now,
     the header rows of the Assigned Students table and the Attendance
     table) stays black with white text.
     Admin panel tables always stay black, even for the same Attendance
     table when viewed from the admin side.
   - Headings: 18px. Body/table/label text: 12px.
   - Times New Roman throughout. Fully responsive (mobile-first tables).
   ========================================================== */

.sp-admin-wrap,
.sp-portal-wrap {
    font-family: 'Times New Roman', Times, serif !important;
    color: #000000;
    font-size: 12px;
}

.sp-admin-wrap *,
.sp-portal-wrap * {
    font-family: 'Times New Roman', Times, serif !important;
    box-sizing: border-box;
}

.sp-admin-wrap p,
.sp-admin-wrap td,
.sp-admin-wrap th,
.sp-admin-wrap label,
.sp-admin-wrap input,
.sp-admin-wrap select,
.sp-admin-wrap textarea,
.sp-admin-wrap li,
.sp-portal-wrap p,
.sp-portal-wrap td,
.sp-portal-wrap th,
.sp-portal-wrap label,
.sp-portal-wrap input,
.sp-portal-wrap select,
.sp-portal-wrap textarea,
.sp-portal-wrap li {
    font-size: 12px;
    color: #000000;
}

/* -----------------------------------------------------------
   Maroon title - ONLY "Student Info" / "Teacher Info" headings
   ----------------------------------------------------------- */
.sp-maroon-heading {
    background-color: #800000;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 18px !important;
    padding: 10px 15px;
    margin: 20px 0 10px 0;
    border-radius: 3px;
}
.sp-maroon-heading,
.sp-maroon-heading * {
    color: #ffffff !important;
}

/* -----------------------------------------------------------
   Black shaded headings - everything else (admin + portal)
   ----------------------------------------------------------- */
.sp-black-heading {
    background-color: #000000;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 18px !important;
    padding: 10px 15px;
    margin: 20px 0 10px 0;
    border-radius: 3px;
}
.sp-black-heading,
.sp-black-heading * {
    color: #ffffff !important;
}

/* Top-of-page title (Dashboard, Teachers, Students, etc.) - admin only, plain black text with a black underline */
.sp-heading {
    color: #000000;
    font-weight: bold;
    font-size: 18px;
    border-bottom: 2px solid #000000;
    padding-bottom: 8px;
}

/* Dashboard cards */
.sp-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}
.sp-card {
    background: #fff;
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 15px 25px;
    text-align: center;
    flex: 1 1 150px;
}
.sp-card h2 {
    font-size: 24px !important;
    color: #000000 !important;
    margin: 0;
    font-weight: bold;
}
.sp-card p {
    margin: 5px 0 0;
    color: #000;
}

/* Responsive table wrapper - allows horizontal scroll on small screens */
.sp-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
}

/* Tables */
.sp-table,
.sp-info-table,
.sp-attendance-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-bottom: 0;
    min-width: 480px;
}
.sp-info-table {
    min-width: 0;
}
.sp-table th,
.sp-table td,
.sp-info-table th,
.sp-info-table td,
.sp-attendance-table th,
.sp-attendance-table td {
    border: 1px solid #000000;
    padding: 8px 10px;
    text-align: left;
    color: #000;
    font-size: 12px;
}
.sp-table thead th,
.sp-attendance-table thead th {
    background-color: #000000;
    color: #ffffff !important;
    font-weight: bold;
}

/* Maroon table header variant - no longer used on the Assigned Students /
   Attendance tables (reverted to the default black header below), kept
   here in case it's needed elsewhere. */
.sp-table-maroon thead th {
    background-color: #800000 !important;
    color: #ffffff !important;
    font-weight: bold;
}

/* Attendance table column widths - Date narrower, Topic widest */
.sp-attendance-table th:nth-child(1),
.sp-attendance-table td:nth-child(1) {
    width: 70px;
}
.sp-attendance-table th:nth-child(2),
.sp-attendance-table td:nth-child(2) {
    width: 100px;
}
.sp-attendance-table th:nth-child(3),
.sp-attendance-table td:nth-child(3) {
    width: auto;
}
.sp-attendance-table th:nth-child(4),
.sp-attendance-table td:nth-child(4) {
    width: 70px;
}

/* Payment Info table (Student Portal) - Month/Amount/Status/Paid Date header row:
   plain box, no fill color - only the "Payment Info" section heading above it is maroon. */
.sp-payment-table thead th {
    background-color: #ffffff;
    color: #000000 !important;
    font-weight: bold;
}
/* Student/Teacher/Course info-table label column: plain box, no fill color -
   only the section heading above it is maroon. */
.sp-info-table th {
    background-color: #ffffff;
    color: #000000 !important;
    font-weight: bold;
    width: 180px;
}

/* Student/Teacher photo shown in profile sections */
.sp-student-photo {
    max-width: 110px;
    max-height: 110px;
    border: 2px solid #000000;
    border-radius: 4px;
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
}
.sp-photo-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #000000;
}
.sp-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #000000;
    border-radius: 3px;
    font-weight: bold;
    background: #000000;
    color: #ffffff !important;
    font-size: 12px;
}

/* Portal login form / wrapper */
.sp-portal-wrap {
    max-width: 700px;
    width: 100%;
    margin: 20px auto;
    background: #fff;
    border: 1px solid #000000;
    border-radius: 6px;
    padding: 20px 25px;
}
.sp-login-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    color: #000;
}
.sp-login-form input[type="text"],
.sp-login-form input[type="password"],
.sp-inline-form input[type="password"],
.sp-inline-form input[type="text"],
.sp-inline-form select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #000000;
    border-radius: 3px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
}

.sp-portal-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
}
.sp-portal-header .sp-maroon-heading,
.sp-portal-header .sp-black-heading {
    width: 100%;
}

.sp-btn {
    display: inline-block;
    background-color: #000000;
    color: #ffffff !important;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
}
.sp-btn:hover {
    background-color: #333333;
    color: #ffffff !important;
}
.sp-btn-small {
    padding: 6px 12px;
    font-size: 12px;
}
.sp-btn-outline {
    background-color: #fff;
    color: #000000 !important;
    border: 1px solid #000000;
}

/* Maroon button variant - Logout, Update Password, Download Now */
.sp-btn-maroon {
    background-color: #800000 !important;
    color: #ffffff !important;
}
.sp-btn-maroon:hover {
    background-color: #5c0000 !important;
    color: #ffffff !important;
}

.sp-alert {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 12px;
}
.sp-alert-success {
    background: #e6f4ea;
    border: 1px solid #2e7d32;
    color: #2e7d32 !important;
}
.sp-alert-error {
    background: #fdecea;
    border: 1px solid #c62828;
    color: #c62828 !important;
}

.sp-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}
.sp-inline-form input,
.sp-inline-form select {
    flex: 1 1 200px;
    max-width: 300px;
}

.sp-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
    align-items: center;
}
.sp-search-form input[type="text"] {
    min-width: 220px;
}

.sp-doc-list {
    list-style: none;
    padding: 0;
}
.sp-doc-list li {
    padding: 10px;
    border-bottom: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
}
.sp-muted {
    color: #777 !important;
    font-style: italic;
}

.sp-status-input {
    width: 50px;
    text-align: center;
}
.sp-topic-input {
    width: 100%;
    min-width: 120px;
    resize: vertical;
    line-height: 1.4;
    overflow-y: hidden;
}

.ui-datepicker {
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
}

/* Routine table */
.sp-routine-table td,
.sp-routine-table th {
    vertical-align: top;
}

/* -----------------------------------------------------------
   Responsive breakpoints
   ----------------------------------------------------------- */
@media (max-width: 782px) {
    .sp-portal-wrap {
        padding: 15px;
        margin: 10px auto;
        border-radius: 0;
    }
    .sp-cards {
        flex-direction: column;
    }
    .sp-card {
        width: 100%;
    }
    .sp-inline-form,
    .sp-search-form {
        flex-direction: column;
        align-items: stretch;
    }
    .sp-inline-form input,
    .sp-inline-form select,
    .sp-search-form input {
        max-width: 100%;
    }
    .sp-portal-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .sp-maroon-heading,
    .sp-black-heading,
    .sp-heading {
        font-size: 16px !important;
    }
    .sp-admin-wrap,
    .sp-portal-wrap,
    .sp-admin-wrap p, .sp-admin-wrap td, .sp-admin-wrap th, .sp-admin-wrap label,
    .sp-portal-wrap p, .sp-portal-wrap td, .sp-portal-wrap th, .sp-portal-wrap label {
        font-size: 11px;
    }
    .sp-doc-list li {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .sp-btn {
        width: 100%;
        text-align: center;
        margin-bottom: 6px;
    }
    .sp-portal-header .sp-btn {
        width: auto;
    }
    .sp-student-photo {
        max-width: 80px;
        max-height: 80px;
    }
}