/* Stiudents Lists */
 :root {
     --main-bg: #ffffff;
     --main-accent: #0081cf;
     --sec-accent: #2d92cf;
     --text-main: #2d3748;
     --text-muted: #3c3c3c;
     --nav-hover: #f1f5f9;
     --border-color: #e2e8f0;
     --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
     --radius-lg: 16px;
 }

 .container {
     max-width: 1100px;
     margin: 0 auto;
 }

 /* Header */
 .page-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
 }

 .page-header h1 {
     font-size: 24px;
     font-weight: 700;
     color: #0f172a;
 }

 .page-header p {
     font-size: 14px;
     color: #64748b;
     margin-top: 4px;
 }

 .btn {
     padding: 10px 18px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     border: none;
     transition: background 0.2s;
 }

 .btn-primary {
     background-color: var(--main-accent);
     color: #ffffff;
 }

 .btn-primary:hover {
     background-color: var(--sec-accent);
 }

 /* Toolbar */
 .toolbar {
     display: flex;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 20px;
     flex-wrap: wrap;
 }

 .search-box {
     display: flex;
     align-items: center;
     gap: 8px;
     background: #ffffff;
     border: 1px solid #e2e8f0;
     padding: 8px 14px;
     border-radius: 8px;
     flex: 1;
     min-width: 280px;
 }

 .search-box svg {
     stroke: #94a3b8;
 }

 .search-box input {
     border: none;
     outline: none;
     width: 100%;
     font-size: 14px;
     color: #1e293b;
 }

 .filters {
     display: flex;
     gap: 12px;
 }

 .filters select {
     background: #ffffff;
     border: 1px solid #e2e8f0;
     padding: 8px 12px;
     border-radius: 8px;
     font-size: 14px;
     color: #475569;
     outline: none;
 }

 /* Table Card */
 .table-card {
     background: #ffffff;
     border-radius: 12px;
     border: 1px solid #e2e8f0;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
     overflow: hidden;
 }

 table {
     width: 100%;
     border-collapse: collapse;
     text-align: left;
     font-size: 14px;
 }

 th {
     background-color: #f8fafc;
     padding: 14px 20px;
     font-weight: 600;
     color: #475569;
     border-bottom: 1px solid #e2e8f0;
 }

 td {
     padding: 16px 20px;
     border-bottom: 1px solid #f1f5f9;
     color: #334155;
 }

 tr:last-child td {
     border-bottom: none;
 }

 /* User Cell & Avatars */
 .user-cell {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     font-weight: 600;
 }

 .bg-purple { background-color: #8a7cfb; }
 .bg-blue   { background-color: #38bdf8; }
 .bg-orange { background-color: #fb923c; }
 .bg-gray   { background-color: #94a3b8; }

 .user-cell .name {
     font-weight: 600;
     color: #0f172a;
 }

 .user-cell .email {
     font-size: 12px;
     color: #64748b;
 }

 .mono {
     font-family: monospace;
     font-size: 13px;
     color: #64748b;
 }

 /* Badges */
 .badge {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
 }

 .badge-completed   { background: #ecfdf5; color: #1fcac4; }
 .badge-active   { background: #ecfdf5; color: #10b981; }
 .badge-pending  { background: #fffbeb; color: #f59e0b; }
 .badge-inactive { background: #f1f5f9; color: #64748b; }

 .btn-icon {
     background: none;
     border: none;
     color: #94a3b8;
     font-size: 16px;
     cursor: pointer;
     padding: 4px 8px;
     border-radius: 4px;
 }

 .btn-icon:hover {
     background: #f1f5f9;
     color: #0f172a;
 }

 /* Pagination */
 .pagination {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 16px 20px;
     border-top: 1px solid #e2e8f0;
     font-size: 13px;
     color: #64748b;
 }

 .pagination-buttons {
     display: flex;
     gap: 4px;
 }

 .btn-page {
     background: #ffffff;
     border: 1px solid #e2e8f0;
     padding: 6px 12px;
     border-radius: 6px;
     font-size: 13px;
     cursor: pointer;
     color: #334155;
 }

 .btn-page.active {
     background: #8a7cfb;
     color: #ffffff;
     border-color: #8a7cfb;
 }

 .btn-page:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }

/*Student Form */
.popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dark semi-transparent */
    backdrop-filter: blur(3px); /* Optional: blurs the background */
    z-index: 1000;

    display: none; /*Hidden By Default*/
    justify-content: center;
    align-items: center;
}

.popup-container {
    position: relative;
    height: 300px;
    width: 318px;
    background-color: #fff;
    border: #6c757d solid 1px;
    border-radius: 6px;
    padding: 4px 18px 42px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup-content {
    position: relative;
    top: -44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.popup-image-container {
    position: relative;
    top: -64px;
}
.popup-image {
    height: 148px;
    width: 148px;
}
.popup-close-button {
    color: #fff;
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 4px;
    margin: 48px 0 -48px 0;
}
.success-button {
    background-color: #14b414;
}
.error-button {
    background-color: #e10e00;
}
.success-button:hover {
    background-color: green;
}
.error-button:hover {
    background-color: #980900;
}


/* Table Header Contrast */
thead th {
    background-color: #f8f9fa !important;
    color: #495057;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1.2rem 1rem !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* Row Styling */
tbody tr {
    transition: all 0.2s;
}

tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.02) !important;
    transform: scale(1.002);
}

/* Avatar Circle */
.avatar-sm {
    width: 32px;
    height: 32px;
    background-color: #6c757d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Action Button */
.btn-action {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-action:hover {
    background-color: #0d6efd !important;
    border-color: #0d6efd;
}

.btn-action:hover i {
    color: white !important;
}

/* Average Column Visual */
.progress {
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}



/* StudentReport */
.report-header {
    background: linear-gradient(to right, #ffffff, #f8f9fa);
    border-left: 6px solid #0d6efd; /* Light Blue range */
}

.report-avatar {
    width: 80px;
    height: 80px;
    background-color: #e9ecef;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #adb5bd;
}

/* Status Badges with light backgrounds */
.bg-success-light {
    background-color: rgba(20, 180, 20, 0.1);
    border: 1px solid rgba(20, 180, 20, 0.2);
}

.bg-danger-light {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* Table Polish */
.table thead th {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 1px;
}

@media print {
    .sidebar, .navbar, .btn { display: none !important; }
    .main-section { margin: 0; padding: 0; width: 100%; }
    .card { box-shadow: none !important; border: 1px solid #eee !important; }
}