/* ==========================================
   DESIGN SYSTEM - COMPONENTS & UI ELEMENTS
   ========================================== */

/* Card Component (Radius 16px, Padding 24px, Border #E5E7EB) */
.card {
    background-color: var(--ui-card-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-16);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-200);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-hover);
    border-color: rgba(30, 124, 255, 0.35);
}

.card-header {
    background: var(--ui-primary-gradient);
    border-bottom: 0;
    padding: var(--space-16) var(--space-24);
    font-weight: 700;
    font-size: 1rem;
    color: #FFFFFF;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.5rem;
    text-align: left !important;
}

.card-header i {
    color: #FFFFFF;
    margin-right: var(--space-8);
}

/* Header membulat sendiri: kartu berisi combo (ncb) memakai overflow:visible
   agar dropdown tak terpotong — radius header menjamin sudut biru tetap
   terpotong rapi seperti kartu biasa (overflow:hidden). */
.card-header:first-child {
    border-radius: var(--radius-16) var(--radius-16) 0 0;
}

.noctra-app main > .container-fluid > h1:first-child,
.noctra-app main > .container-fluid > .mt-4:first-child {
    margin-bottom: var(--space-8) !important;
}

.noctra-app .breadcrumb {
    margin-bottom: var(--space-24) !important;
}

.noctra-app .breadcrumb-item.active {
    color: var(--ui-text);
}

.noctra-app .card-header .btn {
    box-shadow: none;
}

.noctra-app .card-header .btn-success {
    border-color: rgba(255, 255, 255, 0.32);
}

.noctra-app .card-header .btn-danger {
    background: rgba(7, 26, 66, 0.28);
    border-color: rgba(255, 255, 255, 0.42);
}

.noctra-app .table-bordered > :not(caption) > * > * {
    border-color: var(--ui-border);
}

.noctra-app .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: inherit;
    background-color: rgba(30, 124, 255, 0.025);
}

.card-body {
    padding: var(--space-24);
}

.card-footer {
    background-color: var(--ui-bg);
    border-top: 1px solid var(--ui-border);
    padding: var(--space-16) var(--space-24);
    font-size: 0.85rem;
}

/* Data Siswa: high-contrast registered-student heading and squared result count. */
.student-list-card .card-header {
    background: var(--ui-primary-gradient);
}

.student-list-card .card-header .text-primary,
.student-list-card .card-header .fw-bold {
    color: #FFFFFF !important;
}

.student-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    background: rgba(7, 26, 66, 0.22);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    background: rgba(7, 26, 66, 0.22);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.count-badge-success {
    background: rgba(28, 207, 138, 0.3);
    border-color: rgba(28, 207, 138, 0.6);
}

.count-badge-danger {
    background: rgba(220, 53, 69, 0.3);
    border-color: rgba(220, 53, 69, 0.6);
}

.count-badge-info {
    background: rgba(13, 202, 240, 0.3);
    border-color: rgba(13, 202, 240, 0.6);
}

/* Legacy dashboard cards, restyled to use the NOCTRA blue and green gradients. */
.card.bg-primary { background: var(--ui-primary-gradient) !important; }
.card.bg-success { background: var(--ui-success-gradient) !important; }
.card.bg-info { background: linear-gradient(135deg, #2BB7F5 0%, #1E7CFF 100%) !important; }

/* Report Action Buttons */
.report-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.report-btn-preview {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.report-btn-preview:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
}

.report-btn-export {
    background: #22C55E;
    color: #FFFFFF;
    border: 1px solid #16A34A;
}

.report-btn-export:hover {
    background: #16A34A;
    color: #FFFFFF;
}

/* Badges Component */
.badge {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.bg-success, .badge-success { background-color: rgba(52, 217, 90, 0.12) !important; color: #12843B !important; border: 1px solid rgba(52, 217, 90, 0.28); }
.bg-danger, .badge-danger { background-color: rgba(239, 68, 68, 0.1) !important; color: #b91c1c !important; border: 1px solid rgba(239, 68, 68, 0.2); }
.bg-warning, .badge-warning { background-color: rgba(245, 158, 11, 0.1) !important; color: #b45309 !important; border: 1px solid rgba(245, 158, 11, 0.2); }
.bg-info, .badge-info { background-color: rgba(6, 182, 212, 0.1) !important; color: #0e7490 !important; border: 1px solid rgba(6, 182, 212, 0.2); }
.bg-primary, .badge-primary { background-color: var(--ui-primary-light) !important; color: var(--ui-primary) !important; border: 1px solid rgba(30, 124, 255, 0.24); }

/* Centered Modals with Backdrop Blur & 200ms Animation */
.modal-backdrop {
    background-color: rgba(7, 26, 66, 0.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 2rem);
    margin: 1rem auto;
}

.modal-content {
    background-color: var(--ui-card-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-16);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
    animation: modalFadeScale 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeScale {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    padding: var(--space-16) var(--space-24);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-bg);
}

.modal-title {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ui-heading);
}

.modal-body {
    padding: var(--space-24);
}

.modal-footer {
    padding: var(--space-16) var(--space-24);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-bg);
}

/* Breadcrumb & Alert */
.breadcrumb {
    padding: 0;
    margin-bottom: var(--space-16);
    background: transparent;
}

.breadcrumb-item {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ui-text);
}

.breadcrumb-item a {
    color: var(--ui-primary);
    text-decoration: none;
}

.alert {
    border-radius: var(--radius-14);
    padding: var(--space-16) var(--space-24);
    border: 1px solid transparent;
    font-size: 0.9rem;
    margin-bottom: var(--space-24);
}

/* Dropdown Menu */
.dropdown-menu {
    border: 1px solid var(--ui-border);
    background-color: var(--ui-card-bg);
    box-shadow: var(--shadow-hover);
    border-radius: var(--radius-14);
    padding: var(--space-8);
    animation: dropdownSlide 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    border-radius: 8px;
    padding: 0.5rem var(--space-16);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-heading);
    transition: var(--transition-200);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--ui-bg);
    color: var(--ui-primary);
}

input[type="file"] {
    /* min(280px,100%) agar tidak memaksa overflow pada layar <=320px */
    min-width: min(280px, 100%);
    max-width: 100%;
}