/* --- Principal Dashboard Custom Styles --- */

/* General Card Styling */
.custom-card {
    background: #ffffff;
    border-radius: 15px; /* Rounded corners for the main sections */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Light shadow for depth */
    padding: 20px;
    margin-bottom: 20px;
}

/* TOP CARDS (4 Main Metric Cards) */
.top-card-container {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    background: #fdfdff; /* Slightly off-white background */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
}

.top-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    margin-right: 15px;
}

/* Custom Colors from Image */
.bg-blue-light { background-color: #5d5dff; }
.bg-green-light { background-color: #21ba68; }
.bg-purple-light { background-color: #924ed8; }
.bg-orange-light { background-color: #ff9933; }
.bg-red-light { background-color: #ff4d4f; }

.top-card-title {
    font-size: 13px;
    color: #666;
    margin-bottom: 0;
}

.top-card-value {
    font-size: 24px;
    font-weight: 700;
    margin-top: -5px;
    color: #333;
}

/* OVERALL ATTENDANCE Card (The Gauge/Circle) */
.attendance-card {
    display: flex;
    align-items: center;
    padding: 18px;
}

.attendance-circle {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: #ff6b5f;
    color: #fff;
    display: flex;
    flex-direction: column;   /* icon above, number below */
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    gap: 2px;
}

.attendance-icon {
    font-size: 18px;
    margin-bottom: -2px;
}

.attendance-info {
    margin-left: 15px;
}

.attendance-info h4 {
    font-size: 22px;
    margin: 0;
}

.attendance-info p {
    margin: 0;
    font-size: 13px;
    color: #666;
}

/* LIST COMPONENT STYLES (Used for Summary, Activities, etc.) */
.list-component {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-component:last-child {
    border-bottom: none;
}

.list-item-title {
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: center;
}

.list-item-value {
    font-weight: 600;
    font-size: 14px;
}

/* Icon Styles for Lists (Small Colored Circles) */
.list-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 10px;
    margin-right: 8px;
    opacity: 0.8;
}

/* Small Cards for Academic/Fees/Recruitment */
.small-stat-card {
    text-align: center;
    background: #f4f6f9;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.small-stat-card h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0;
}

.small-stat-card p {
    font-size: 12px;
    color: #666;
    margin-bottom: 0;
}

/* Profile Icon/Avatar in Lists */
.profile-icon-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

/* Progress Bar Customization for the 'Academic Overview' / 'SQAAF' sections */
.progress-bar-container {
    padding: 8px 0;
}

.progress-bar-container span {
    font-size: 13px;
    color: #333;
    display: block;
    margin-bottom: 3px;
}

.progress-bar-value {
    font-weight: 600;
    font-size: 13px;
}

.progress {
    height: 8px;
    border-radius: 4px;
    background-color: #f0f0f0;
}

/* Custom Progress Bar Colors (Used in Academic/SQAAF) */
.progress-bar.bg-bar-blue { background-color: #5d5dff; }
.progress-bar.bg-bar-red { background-color: #ff4d4f; }
.progress-bar.bg-bar-green { background-color: #21ba68; }
.progress-bar.bg-bar-orange { background-color: #ff9933; }
.progress-bar.bg-bar-purple { background-color: #924ed8; }

/* Action Buttons (The small pink/green buttons) */
.btn-action-sm {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    opacity: 0.9;
}

.btn-action-green {
    background-color: #e6fff0;
    color: #21ba68;
}

.btn-action-pink {
    background-color: #ffe6e6;
    color: #ff4d4f;
}

.btn-action-purple {
    background-color: #f3e6ff;
    color: #924ed8;
}

/* Buttons in TimeTable & Fees */
.btn-view-all {
    background: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 13px;
}

/* Custom Icons/Avatars for Quick Actions */
.quick-action-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    margin-right: 10px;
}

/* --- NEW STYLES FOR ACADEMIC OVERVIEW METRICS --- */
.metric-box-v2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Align contents to the left */
    color: white; /* Text color inside the box */
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden; /* Hide icon overflow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-height: 85px; /* Ensure boxes are tall enough */
}

.metric-box-v2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1); /* Light overlay for depth */
    border-radius: 12px;
}

.metric-box-icon {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 30px;
    opacity: 0.3;
    color: #ffffff;
}

.metric-box-title {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 2px;
    z-index: 10;
    opacity: 0.8;
}

.metric-box-value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 0;
    line-height: 1;
    z-index: 10;
}

/* Ensure color utility classes exist and are used for backgrounds */
.bg-blue-light { background-color: #5d5dff; }
.bg-green-light { background-color: #21ba68; }
.bg-purple-light { background-color: #924ed8; }
.bg-orange-light { background-color: #ff9933; }


/* --- Top Performers List Styling (NEW) --- */
.top-performer-list {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.top-performer-list:last-child {
    border-bottom: none;
}

.top-performer-rank-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Rank Circle Colors (matching Image 2) */
.bg-rank-1 { background-color: #5d5dff; }    /* Blue for 1st */
.bg-rank-2 { background-color: #21ba68; }    /* Green for 2nd */
.bg-rank-3 { background-color: #924ed8; }    /* Purple for 3rd */
.bg-rank-4 { background-color: #ff9933; }    /* Orange for 4th */
/* Add more ranks if needed */

.top-performer-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.top-performer-details span {
    font-size: 14px;
    color: #333;
}

.top-performer-details small {
    font-size: 12px;
}

.progress-bar-value.text-success {
    color: #21ba68 !important; /* Ensure the percentage is bright green */
}
/* MAIN CARD */
.ea-card {
    background: #fff;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* TITLES */
.ea-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}
.ea-sub-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

/* STATS BOX ROW */
.ea-stats-row {
    margin-bottom: 10px;
}

/* STATS BOXES */
.ea-stats-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-radius: 14px;
}

/* Background Gradient Like Screenshot */
.purple {
    background: linear-gradient(to right, #e7dcff, #f3eaff);
}
.green {
    background: linear-gradient(to right, #d6f9e4, #e8fff1);
}

.ea-label {
    font-size: 14px;
    color: #444;
}
.ea-value {
    font-size: 28px;
    font-weight: 700;
}

.ea-icon {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 26px;
}
.purple-bg { background: #9b59b6; }
.green-bg { background: #2ecc71; }

/* EVENT CARDS */
.ea-event-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ea-event-title {
    font-weight: 600;
    margin: 0;
}

.ea-event-meta {
    font-size: 14px;
    color: #777;
    margin-top: 6px;
}

.ea-category {
    background: #eef2ff;
    color: #4c5fff;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 6px;
    font-size: 12px;
}

.ea-status {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
}

.ea-status.completed {
    background: #d9f8e4;
    color: #1e9e57;
}
.ea-status.upcoming {
    background: #e2e9ff;
    color: #4966ff;
}
.ea-status.planning {
    background: #ffe6c9;
    color: #ff8c00;
}

/* TOP PERFORMERS */
.ea-performer-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

.ea-medal {
    width: 48px;
    height: 48px;
    background: #ffb84d;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #fff;
}

.ea-performer-mid {
    flex: 1;
    margin-left: 14px;
}

.ea-performer-name {
    font-weight: 600;
    margin: 0;
}

.ea-performer-competition {
    margin: 0;
    font-size: 14px;
    color: #777;
}

.ea-performer-right {
    text-align: right;
}

.ea-place {
    color: #ff7a00;
    font-size: 15px;
}
.ea-points {
    margin: 0;
    color: #666;
    font-size: 14px;
}
/* ----- STAT CARDS ----- */

.transport-stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: 0.2s;
}

.transport-stat-card h4 {
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

.transport-stat-card p {
    color: #6b7280;
    font-size: 13px;
    margin-top: 4px;
    font-weight: 500;
}

.ts-blue { border-top: 5px solid #3b82f6; }
.ts-green { border-top: 5px solid #22c55e; }
.ts-purple { border-top: 5px solid #a855f7; }
.ts-orange { border-top: 5px solid #f97316; }


/* ----- ROUTE LIST ----- */

.transport-list {
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.transport-list .left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-circle {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #7a5dfa, #9d70fc);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
}

.route-info small {
    display: block;
    color: #6b7280;
    font-size: 12px;
}

.badge-status {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.badge-status.active {
    background: #d1fae5;
    color: #047857;
}

.badge-status.maintenance {
    background: #ffe9d1;
    color: #b45309;
}

/* Button spacing */
.gap-2 {
    gap: 10px;
}
/* Parent wrapper for alignment */
.overall-progress-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outer dashed circle */
.progress-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px dashed #1e90ff; /* Blue dashed border */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

/* Inner percentage text */
.progress-circle span {
    font-size: 16px;
    font-weight: 700;
    color: #1e90ff;
}
/* Different shades for each progress bar */
.progress-bar-container:nth-child(1) .progress-bar {
    background-color: #4e73df !important; /* Blue */
}

.progress-bar-container:nth-child(2) .progress-bar {
    background-color: #1cc88a !important; /* Green */
}

.progress-bar-container:nth-child(3) .progress-bar {
    background-color: #36b9cc !important; /* Cyan */
}

.progress-bar-container:nth-child(4) .progress-bar {
    background-color: #f6c23e !important; /* Yellow */
}

.progress-bar-container:nth-child(5) .progress-bar {
    background-color: #e74a3b !important; /* Red */
}

.progress-bar-container:nth-child(6) .progress-bar {
    background-color: #858796 !important; /* Gray */
}

.progress-bar-container:nth-child(7) .progress-bar {
    background-color: #20c997 !important; /* Teal */
}

.progress-bar-container:nth-child(8) .progress-bar {
    background-color: #6610f2 !important; /* Purple */
}

/* Optional: make bars smooth */
.progress-bar {
    transition: width 0.6s ease;
}
/* MAIN CARD */
.timetable-card {
    background: white;
    padding: 25px;
    border-radius: 22px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
}

/* HEADER */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.title {
    font-weight: 700;
    font-size: 24px;
}

.btn-create {
    background: #1065ff;
    color: white;
    padding: 12px 28px;
    border-radius: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* STATS ROW */
.stats-row {
    display: flex;
    gap: 18px;
    margin-bottom: 25px;
}

.stat-box {
    flex: 1;
    padding: 18px;
    border-radius: 18px;
}

.active-box {
    background: #e8fff4;
    border: 1px solid #c8f7df;
}

.conflict-box {
    background: #ffe8e8;
    border: 1px solid #ffcdcd;
}

.stat-title {
    font-weight: 700;
}

.stat-content {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.stat-number {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
}

.stat-icon {
    font-size: 30px;
    margin-left: 15px;
}

/* ACTIVITY LIST */
.activity-item {
    background: #f5f8fc;
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-title {
    font-weight: 700;
}

.activity-icon {
    color: #00b15d;
    margin-right: 8px;
}

.activity-grade {
    font-size: 13px;
    color: grey;
}

.activity-time {
    color: grey;
}

/* DIVIDER */
.divider {
    margin: 20px 0;
}

/* NOTIFICATIONS */
.quick-actions {
    display: flex;
}

.btn-view {
    flex: 1;
    padding: 18px;
    background: #e8f0ff;
    color: #004bff;
    text-align: center;
    border-radius: 14px;
    font-weight: 600;
    text-decoration: none;
}
.notification-card {
    background: white;
    padding: 25px;
    border-radius: 22px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.06);
}

.notif-title {
    font-size: 24px;
    font-weight: 700;
}

.notif-top-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.badge-pending {
    background: #ffe0e6;
    color: #d6002a;
    padding: 6px 14px;
    font-weight: 600;
    border-radius: 10px;
}

.badge-today {
    background: #caffd3;
    color: #009d35;
    padding: 6px 14px;
    font-weight: 600;
    border-radius: 10px;
}

.notif-section-title {
    font-weight: 700;
    color: #666;
    margin-bottom: 10px;
}

.notif-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-time {
    color: #666;
    font-size: 14px;
}
/* QUICK ACTIONS*/
.quick-actions-card {
    background: #fff;
    padding: 26px;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.qa-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Each clickable row */
.qa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-radius: 18px;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-bottom: 16px;
    transition: 0.25s ease;
}

.qa-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}

/* Left side (icon + text) */
.qa-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Icon background (gradient box) */
.qa-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

/* Gradient colors */
.icon-indigo {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
}

.icon-teal {
    background: linear-gradient(135deg, #14B8A6, #2DD4BF);
}

.icon-yellow {
    background: linear-gradient(135deg, #FACC15, #FBBF24);
}

.icon-pink {
    background: linear-gradient(135deg, #EC4899, #F472B6);
}

/* Text block */
.qa-main {
    font-size: 17px;
    font-weight: 700;
    color: #111;
}

.qa-sub {
    font-size: 14px;
    color: #6b7280;
    margin-top: 2px;
}

/* Arrow */
.qa-arrow {
    font-size: 16px;
    color: #9CA3AF;
}