/* ============================================================================
   AIU THEME POLISH — single-file, site-wide visual upgrade.
   custom.css ke BAAD load hota hai (sab par override). Layout/positioning ko
   nahi chhoota — sirf radius, shadows, colors, focus, hover, tables, modals.
   Palette: navy #164F87/#2c3e50 · gold #d8a14b · green #1cc88a · bg #f4f6fa
   ============================================================================ */

:root {
    --aiu-navy: #164F87;
    --aiu-navy-dark: #0f3a64;
    --aiu-ink: #2c3e50;
    --aiu-gold: #d8a14b;
    --aiu-green: #1cc88a;
    --aiu-red: #e74c3c;
    --aiu-bg: #f4f6fa;
    --aiu-card: #ffffff;
    --aiu-border: #e5e9f0;
    --aiu-muted: #6b7a8c;
    --aiu-radius: 10px;
    --aiu-radius-sm: 8px;
    --aiu-shadow: 0 1px 3px rgba(16, 30, 54, .06), 0 4px 14px rgba(16, 30, 54, .05);
    --aiu-shadow-lg: 0 8px 30px rgba(16, 30, 54, .12);
    --aiu-ring: 0 0 0 3px rgba(22, 79, 135, .18);
}

/* ---------- Base ---------- */
body {
    background-color: var(--aiu-bg) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(22, 79, 135, .85);
    color: #fff;
}

/* Smooth interactions (sirf visual props — layout nahi) */
.btn, a, .form-control, .form-select, .card, .box,
.dropdown-item, .nav-link, .page-link, .badge {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .12s ease;
}

/* ---------- Cards / Boxes ---------- */
.card, .box {
    border: 1px solid var(--aiu-border);
    border-radius: var(--aiu-radius) !important;
    box-shadow: var(--aiu-shadow);
}

.card-header, .box-header {
    border-top-left-radius: var(--aiu-radius) !important;
    border-top-right-radius: var(--aiu-radius) !important;
}

.card-footer, .box-footer {
    border-bottom-left-radius: var(--aiu-radius) !important;
    border-bottom-right-radius: var(--aiu-radius) !important;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--aiu-radius-sm);
    font-weight: 600;
    letter-spacing: .1px;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--aiu-ring);
}

.btn-primary {
    box-shadow: 0 2px 6px rgba(22, 79, 135, .25);
}

.btn-success {
    box-shadow: 0 2px 6px rgba(28, 200, 138, .25);
}

.btn-danger {
    box-shadow: 0 2px 6px rgba(231, 76, 60, .22);
}

.btn-dark {
    box-shadow: 0 2px 6px rgba(44, 62, 80, .25);
}

.btn:disabled, .btn.disabled {
    box-shadow: none;
    opacity: .55;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    border: 1px solid #d6dde8;
    border-radius: var(--aiu-radius-sm);
}

.form-control:focus, .form-select:focus {
    border-color: var(--aiu-navy);
    box-shadow: var(--aiu-ring);
}

.form-control::placeholder {
    color: #9aa7b5;
}

label, .form-label {
    color: var(--aiu-ink);
}

/* ---------- Tables ---------- */
.table {
    --bs-table-hover-bg: #f2f6fb;
}

.table thead th {
    background: #f7f9fc;
    color: var(--aiu-ink);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid var(--aiu-border) !important;
}

.table td {
    vertical-align: middle;
}

.table tbody tr {
    transition: background-color .12s ease;
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
    background-color: #f2f6fb;
}

/* ---------- Badges / pills ---------- */
.badge {
    border-radius: 50rem;
    font-weight: 600;
    letter-spacing: .2px;
    padding: .42em .8em;
}

/* ---------- Modals / popups ---------- */
.modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: var(--aiu-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--aiu-border);
}

.modal-footer {
    border-top: 1px solid var(--aiu-border);
}

.modal-backdrop.show {
    opacity: .45;
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    border: 1px solid var(--aiu-border);
    border-radius: var(--aiu-radius);
    box-shadow: var(--aiu-shadow-lg);
    padding: .4rem;
}

.dropdown-item {
    border-radius: 6px;
    padding: .45rem .75rem;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: #eef3f9;
    color: var(--aiu-navy);
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--aiu-radius);
    border-width: 1px;
}

/* ---------- Nav tabs / pills ---------- */
.nav-tabs .nav-link {
    border-top-left-radius: var(--aiu-radius-sm);
    border-top-right-radius: var(--aiu-radius-sm);
    font-weight: 600;
    color: var(--aiu-muted);
}

.nav-tabs .nav-link.active {
    color: var(--aiu-navy);
    border-bottom-color: transparent;
}

.nav-pills .nav-link {
    border-radius: 50rem;
    font-weight: 600;
}

.nav-pills .nav-link.active {
    background: var(--aiu-navy);
}

/* ---------- Pagination ---------- */
.page-link {
    border-radius: 6px !important;
    margin: 0 2px;
    color: var(--aiu-navy);
    border-color: var(--aiu-border);
}

.page-item.active .page-link {
    background: var(--aiu-navy);
    border-color: var(--aiu-navy);
    box-shadow: 0 2px 6px rgba(22, 79, 135, .3);
}

/* ---------- Accordions ---------- */
.accordion-item {
    border: 1px solid var(--aiu-border);
    border-radius: var(--aiu-radius) !important;
    overflow: hidden;
    margin-bottom: .6rem;
    box-shadow: var(--aiu-shadow);
}

.accordion-button:focus {
    box-shadow: var(--aiu-ring);
}

/* ---------- Kendo grid (halka touch) ---------- */
.k-grid {
    border-radius: var(--aiu-radius);
    border-color: var(--aiu-border);
    overflow: hidden;
    box-shadow: var(--aiu-shadow);
}

.k-grid .k-grid-header th {
    background: #f7f9fc;
    font-weight: 700;
}

.k-grid tbody tr:hover {
    background: #f2f6fb;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c3ccd9;
    border-radius: 10px;
    border: 2px solid var(--aiu-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: #9fadc0;
}

/* ---------- Links ---------- */
a {
    text-decoration: none;
}

a:hover {
    color: var(--aiu-navy);
}

/* ---------- Images / avatars ---------- */
img.rounded-circle, .avatar img {
    box-shadow: 0 2px 8px rgba(16, 30, 54, .15);
}

/* ---------- SweetAlert (swal v1) polish ---------- */
.sweet-alert {
    border-radius: 14px !important;
    box-shadow: var(--aiu-shadow-lg) !important;
}

.sweet-alert .btn, .sweet-alert button {
    border-radius: var(--aiu-radius-sm) !important;
    font-weight: 600 !important;
}

/* ---------- Shared success status badge (Completed / Submitted / Pass) ----------
   Phase 4 (Completed/Submitted) aur Phase 3 (Pass) dono yehi use karte hain. */
.p4-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8f7f0;
    color: #14975f;
    border: 1px solid #b8e8d2;
    padding: 6px 14px;
    border-radius: 50rem;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
}

    .p4-completed-badge i {
        font-size: .95rem;
    }

/* ---------- Image loading skeleton (JS 'aiu-img-loading' class lagata hai) ---------- */
@keyframes aiuImgShimmer {
    0% { background-position: -300px 0; }
    100% { background-position: 300px 0; }
}

img.aiu-img-loading {
    background: linear-gradient(90deg, #e9eef5 25%, #f5f8fc 50%, #e9eef5 75%);
    background-size: 600px 100%;
    animation: aiuImgShimmer 1.3s linear infinite;
    border-radius: 8px;
}

img.aiu-img-loaded {
    animation: aiuImgFadeIn .35s ease;
}

@keyframes aiuImgFadeIn {
    from { opacity: .35; }
    to { opacity: 1; }
}

/* ---------- Utility: soft section headers (dark navy bars) ---------- */
.box-header.bg-primary, .card-header.bg-primary {
    background: linear-gradient(135deg, var(--aiu-navy), #1c6dbd) !important;
}