/* ==========================================
   SEMS Design System v1.0
========================================== */

:root{

    --primary:#4A004B;
    --primary-dark:#320033;
    --gold:#FFC600;

    --success:#198754;
    --danger:#DC3545;
    --warning:#FFC107;
    --info:#0DCAF0;

    --background:#F4F6F9;

    --card-radius:12px;

}

body{

    background:var(--background);
    font-family:"Segoe UI",sans-serif;

}

/* Cards */

.card{

    border:none;
    border-radius:var(--card-radius);

    box-shadow:
        0 3px 10px rgba(0,0,0,.08);

}

/* Buttons */

.btn-primary{

    background:var(--primary);
    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-warning{

    color:#fff;

}

/* Tables */

.table{

    margin-bottom:0;

}

.table thead{

    background:var(--primary);

    color:white;

}

.table th{

    border:none;

}

.table td{

    vertical-align:middle;

}

/* Search Card */

.search-card {
    border-left: none !important;
}


/* Page Title */

.page-title{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

}

/* Badges */

.badge{

    padding:7px 12px;

    font-size:13px;

}

/* ===========================
   Student Table
=========================== */

.table thead th{

    background:#4A004B !important;

    color:#fff;

    vertical-align:middle;

}

.table tbody tr:hover{

    background:#f8f9fa;

}

.card-header{

    border-bottom:1px solid #eee;

}

.small-box{

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}
/* ==========================================
   STUDENT MODULE RESPONSIVE
========================================== */

/* ------------------------------------------
   TABLET
------------------------------------------ */

@media (max-width: 991.98px) {

    /* Page actions */

    .page-actions {

        margin-top:15px;

        display:flex;

        flex-wrap:wrap;

        gap:8px;

    }

    .page-actions .btn {

        flex:1 1 auto;

    }


    /* Summary cards */

    .small-box {

        margin-bottom:15px;

    }

}


/* ------------------------------------------
   MOBILE
------------------------------------------ */

@media (max-width: 767.98px) {

    /* ======================================
       PAGE HEADER
    ====================================== */

    .page-actions {

        width:100%;

        display:flex;

        flex-direction:column;

        gap:8px;

        margin-top:15px;

    }

    .page-actions .btn {

        width:100%;

        flex:none;

    }


    /* ======================================
       SUMMARY CARDS
    ====================================== */

    .small-box {

        margin-bottom:15px;

    }

    .small-box h3 {

        font-size:24px;

    }


    /* ======================================
       SEARCH / FILTER
    ====================================== */

    .search-card {

        border-left:none !important;

        border-top:4px solid var(--gold);

    }

    .search-card .card-body {

        padding:16px;

    }

    .search-card .row {

        margin-left:0;

        margin-right:0;

    }

    .search-card .row > div {

        padding-left:0;

        padding-right:0;

        margin-bottom:15px;

    }

    .search-card .row > div:last-child {

        margin-bottom:0;

    }

    .search-card label {

        display:block;

        margin-bottom:6px;

        font-weight:600;

    }


    /* ======================================
       STUDENT RECORDS HEADER
    ====================================== */

    .card-header {

        padding:13px 15px;

    }

    .card-header h5 {

        font-size:16px;

    }

    .card-header .badge {

        font-size:11px;

        padding:6px 9px;

    }


    /* ======================================
       STUDENT RECORDS BODY
    ====================================== */

    #dataTable_wrapper {

        width:100%;

        max-width:100%;

    }


    /* ======================================
       DATATABLE CONTROLS
    ====================================== */

    #dataTable_wrapper .dataTables_length,
    #dataTable_wrapper .dataTables_filter {

        width:100%;

        float:none;

        text-align:left;

        margin-bottom:14px;

    }

    #dataTable_wrapper .dataTables_length label,
    #dataTable_wrapper .dataTables_filter label {

        width:100%;

        margin-bottom:0;

    }

    #dataTable_wrapper .dataTables_filter input {

        display:block;

        width:100%;

        margin:6px 0 0;

        box-sizing:border-box;

    }


    /* ======================================
       TABLE
    ====================================== */

    .table-responsive {

        width:100%;

        max-width:100%;

        overflow-x:auto;

        overflow-y:hidden;

        -webkit-overflow-scrolling:touch;

        border-radius:8px;

    }

    #dataTable {

        width:900px !important;

        min-width:900px !important;

    }

    #dataTable th,
    #dataTable td {

        white-space:nowrap;

    }


    /* Student name */

    #dataTable td:nth-child(3) {

        min-width:175px;

        white-space:normal;

    }


    /* Column widths */

    #dataTable th:nth-child(1),
    #dataTable td:nth-child(1) {

        width:55px;

        min-width:55px;

    }

    #dataTable th:nth-child(2),
    #dataTable td:nth-child(2) {

        min-width:125px;

    }

    #dataTable th:nth-child(4),
    #dataTable td:nth-child(4) {

        min-width:80px;

    }

    #dataTable th:nth-child(5),
    #dataTable td:nth-child(5) {

        min-width:90px;

    }

    #dataTable th:nth-child(6),
    #dataTable td:nth-child(6) {

        min-width:110px;

    }

    #dataTable th:nth-child(7),
    #dataTable td:nth-child(7) {

        min-width:105px;

    }

    #dataTable th:nth-child(8),
    #dataTable td:nth-child(8) {

        min-width:120px;

        text-align:center;

    }


    /* ======================================
       ACTION BUTTONS
    ====================================== */

    #dataTable .btn-group {

        display:inline-flex;

        width:auto;

    }

    #dataTable .btn-group .btn {

        flex:none;

        width:42px;

        height:36px;

    }


    /* ======================================
       DATATABLE FOOTER
    ====================================== */

    #dataTable_wrapper .dataTables_info {

        width:100%;

        float:none;

        text-align:center;

        margin-top:14px;

        margin-bottom:8px;

    }

    #dataTable_wrapper .dataTables_paginate {

        width:100%;

        float:none;

        text-align:center;

        margin-top:8px;

    }

    #dataTable_wrapper .pagination {

        justify-content:center;

        flex-wrap:wrap;

        margin-bottom:0;

    }


    /* ======================================
       MODALS
    ====================================== */

    .modal-dialog {

        margin:10px;

    }

    .modal-content {

        border-radius:12px;

    }

    .modal-header {

        padding:16px;

    }

    .modal-body {

        padding:16px;

    }

    .modal-footer {

        padding:12px 16px;

        gap:8px;

    }

    .modal-footer .btn {

        margin:0;

    }

}


/* ------------------------------------------
   SMALL PHONES
------------------------------------------ */

@media (max-width:400px) {

    /* Page */

    .page-actions {

        gap:7px;

    }


    /* Summary */

    .small-box {

        margin-bottom:12px;

    }

    .small-box h3 {

        font-size:22px;

    }


    /* Search */

    .search-card .card-body {

        padding:14px;

    }


    /* Records */

    .card-header {

        padding:12px;

    }

    .card-header h5 {

        font-size:15px;

    }

    .card-header .badge {

        font-size:10px;

        padding:6px 8px;

    }

    .card-body {

        padding:12px;

    }


    /* DataTables */

    #dataTable_wrapper .dataTables_length,
    #dataTable_wrapper .dataTables_filter {

        margin-bottom:12px;

    }


    /* Modals */

    .modal-dialog {

        margin:8px;

    }

    .modal-header,
    .modal-body {

        padding:14px;

    }

}

/* ==========================================================
   STUDENT BULK ACTIONS
========================================================== */

.student-bulk-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 10px 12px;

    background: #F8F9FA;

    border-radius: 8px;

}


.student-selection-info {

    display: flex;

    align-items: center;

    gap: 15px;

}


.student-selection-info .custom-control-label {

    font-weight: 600;

    color: #343A40;

}


#selectedStudentCount {

    font-size: 13px;

}


#deleteSelectedStudents {

    min-width: 145px;

}


/* ==========================================================
   SELECTED ROW
========================================================== */

#dataTable tbody tr.student-selected {

    background: #FFF8E1;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {

    .student-bulk-toolbar {

        align-items: stretch;

        flex-direction: column;

    }


    .student-selection-info {

        justify-content: space-between;

    }


    #deleteSelectedStudents {

        width: 100%;

    }

}


/* ==========================================================
   SHARED IMPORT SUMMARY
   Used by Student Import and Candidate Import
========================================================== */

.import-summary-card {

    border: none;

    border-radius: 10px;

    overflow: hidden;

}


.import-summary-card .card-header {

    background: #ffffff;

    border-bottom: 1px solid #e9ecef;

    padding: 18px 20px;

}


/* ==========================================================
   IMPORT STATISTICS
========================================================== */

.import-stat-card {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px;

    border-radius: 10px;

}


.import-stat-success {

    background: #eaf7ef;

    border: 1px solid #c7ead4;

}


.import-stat-warning {

    background: #fff8e1;

    border: 1px solid #ffe69c;

}


.import-stat-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    font-size: 18px;

}


.import-stat-success .import-stat-icon {

    background: #28a745;

    color: #ffffff;

}


.import-stat-warning .import-stat-icon {

    background: #ffc107;

    color: #343a40;

}


.import-stat-number {

    font-size: 25px;

    font-weight: 700;

    line-height: 1;

}


.import-stat-label {

    margin-top: 4px;

    font-size: 13px;

    color: #6c757d;

}


/* ==========================================================
   IMPORT ERROR SECTION
========================================================== */

.import-errors-section {

    border: 1px solid #e9ecef;

    border-radius: 10px;

    overflow: hidden;

}


.import-errors-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 18px;

    background: #f8f9fa;

    border-bottom: 1px solid #e9ecef;

}


.import-errors-table {

    font-size: 14px;

}


.import-errors-table thead th {

    background: #4A004B;

    color: #ffffff;

    border: none;

    padding: 12px 14px;

    font-size: 13px;

    font-weight: 600;

}


.import-errors-table tbody td {

    padding: 13px 14px;

    vertical-align: middle;

    border-color: #f0f0f0;

}


.import-errors-table tbody tr:hover {

    background: #f8f9fa;

}


@media (max-width: 768px) {

    .import-errors-header {

        align-items: flex-start;

        gap: 10px;

        flex-direction: column;

    }

}


/* ==========================================================
   SEARCH CARD
========================================================== */

.verification-search-card {

    border:none;

}

.verification-search-card .card-body {

    padding:20px;

}

.verification-search-card label {

    margin-bottom:7px;

    font-weight:600;

}

.verification-search-card .input-group-text {

    background:#f8f9fa;

    color:#6c757d;

    border-right:none;

}

.verification-search-card .form-control {

    border-left:none;

}

.verification-search-card .form-control:focus {

    border-left:none;

    box-shadow:none;

}

.verification-search-card
.input-group:focus-within
.input-group-text {

    color:#0d6efd;

    border-color:#80bdff;

}


/* ==========================================================
   RESULTS CARD
========================================================== */

.verification-results-card {

    overflow:hidden;

}

.verification-results-card .card-body {

    padding:18px;

}


/* ==========================================================
   SEMS VERIFICATION TABLE
========================================================== */

.verification-table {

    margin-bottom:0;

}


/* Table Header */

.verification-table thead th {

    background:#4A004B !important;

    color:#ffffff;

    border:none;

    padding:16px 17px;

    font-size:15px;

    font-weight:600;

    line-height:1.35;

    vertical-align:middle;

    white-space:nowrap;

}


/* Table Data */

.verification-table tbody td {

    padding:17px 16px;

    font-size:18px;

    line-height:1.45;

    vertical-align:middle;

}


/* Row Hover */

.verification-table tbody tr:hover {

    background:#f8f9fa;

}


/* ==========================================================
   STUDENT DATA
========================================================== */

.verification-admission {

    display:inline-block;

    font-size:18px;

    font-weight:700;

    color:#4A004B;

    white-space:nowrap;

}


.verification-surname {

    font-size:19px;

    font-weight:600;

    color:#343a40;

}


.verification-other-names {

    font-size:15px;

    line-height:1.4;

}


.verification-class {

    font-size:17px;

    font-weight:500;

    color:#495057;

    white-space:nowrap;

}


/* ==========================================================
   HALL
========================================================== */

.verification-hall {

    display:inline-block;

    padding:7px 12px;

    font-size:13px;

    font-weight:600;

    line-height:1.2;

    border-radius:12px;

    white-space:nowrap;

}


/* ==========================================================
   VERIFY BUTTON
========================================================== */

.verification-btn {

    min-width:95px;

    padding:8px 13px;

    font-size:15px;

    font-weight:600;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.verification-empty {

    text-align:center;

    padding:45px 15px;

}


.verification-empty h5 {

    color:#343a40;

    font-weight:600;

}


.verification-empty p {

    max-width:450px;

    margin-left:auto;

    margin-right:auto;

    font-size:14px;

    line-height:1.5;

}


/* ==========================================================
   ALREADY VERIFIED
========================================================== */

.verified-access-card {

    margin-top:18px;

    border:none;

}


.verified-access-card .card-body {

    padding:16px 18px;

}


.verified-access-icon {

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    background:#eaf7ef;

    color:#198754;

    font-size:17px;

}


.verified-access-title {

    font-size:14px;

    font-weight:600;

}


.verified-access-text {

    font-size:12px;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px) {

    .verification-search-card .card-body {

        padding:16px;

    }


    .verification-results-card .card-body {

        padding:12px;

    }


    .verification-table {

        min-width:820px;

    }


     .verification-table thead th {

        padding:15px 16px;

        font-size:14px;

    }


    .verification-table tbody td {

        padding:16px 15px;

        font-size:17px;

    }


    .verification-admission {

        font-size:17px;

    }


    .verification-surname {

        font-size:18px;

    }


    .verification-other-names {

        font-size:14px;

    }


    .verification-class {

        font-size:16px;

    }


    .verification-hall {

        font-size:12px;

        padding:7px 11px;

    }


    .verified-access-card .card-body {

        padding:15px;

    }


    .verified-access-text {

        max-width:280px;

    }

}

/* ==========================================================
   VERIFICATION ACTION BUTTON
   ========================================================== */

.verification-btn {
    white-space: nowrap;
    padding: 0.3rem 0.65rem;
    line-height: 1.2;
}