/*
 * ══════════════════════════════════════════════════════════════════
 *  PRASHIKSHAN EDUCATION — UNIFIED CUSTOM STYLES V2.0
 *  All UI styles in ONE file. NO inline style="" allowed in Blade.
 *  NO <style> blocks allowed in Blade files.
 * ══════════════════════════════════════════════════════════════════
 */

/* ══ 1. CSS VARIABLES ══════════════════════════════════════════════ */
:root {
    --prk-primary: #0766ad;
    --prk-secondary: #29adb2;
    --prk-body-font: 'Nunito Sans', sans-serif;
    --prk-text-dark: #2b2b2b;
    --prk-text-label: #444;
    --prk-text-header: #555;
    --prk-text-muted: #6c757d;
    --prk-border-color: #dce1e7;
    --prk-input-height: 38px;
    --prk-input-radius: 6px;
    --prk-input-font-size: 14px;
    --prk-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
    --prk-avatar-size: 32px;
    --prk-avatar-font: 12px;
    --prk-icon-btn-size: 38px;
    --prk-feather-icon-size: 18px;
    --prk-switch-width: 35px;
    --prk-switch-height: 18px;
    /* Fixed top bar height — sidebar starts below this (must match .page-header row) */
    --prk-header-height: 60px;
}


/* ══ 2. TYPOGRAPHY & BODY ══════════════════════════════════════════ */
body {
    font-family: var(--prk-body-font) !important;
    font-size: 14px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--prk-body-font) !important;
}


/* ══ 3. THEME OVERRIDES ════════════════════════════════════════════ */
/* 3a. Logo Wrapper */
.logo-wrapper {
    overflow: hidden;
}
.logo-wrapper img {
    max-height: 36px !important;
    width: auto;
    object-fit: contain;
    background-color: #ffffff;
    padding: 4px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 3b. Logo Text (Blue header bar) */
.logo-text {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}
.logo-text h4 {
    font-size: 18px;
    line-height: 1;
    color: #ffffff !important;
    display: block !important;
    font-weight: 700;
    margin-bottom: 0;
}

/* 3c. Toggle Sidebar Icon */
.toggle-sidebar .icli {
    font-size: 22px;
    color: #ffffff;
}

/* 3d. Center Name */
.center-name {
    font-weight: 700;
    color: var(--prk-primary);
    font-size: 20pt;
    margin-bottom: 0;
}

/* 3e. Year Selector */
.year-selector {
    width: 162.5px;
    border-radius: 8px;
}


/* ══ 4. SIDEBAR ════════════════════════════════════════════════════ */
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link h6 {
    font-size: 14px;
    font-weight: 600;
    color: #59667a;
    margin-bottom: 0;
    margin-left: 12px;
}
.sidebar-list.active .sidebar-link h6,
.sidebar-link:hover h6 {
    color: var(--prk-primary) !important;
}
.sidebar-list.active {
    border-left: 3px solid var(--prk-primary);
}


/* ══ 5. USER PROFILE IN TOPBAR ═════════════════════════════════════ */
.user-wrap {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    background-color: #f8f9fa;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.user-wrap:hover {
    background-color: #f0f3f5;
}
.user-img img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
}
/* Profile avatar in header — square logo style */
.user-img .user-avatar-logo {
    padding: 3px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    object-fit: contain;
}
.user-content h6 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}
.user-content p {
    font-size: 11px;
    color: #898989;
}


/* ══ 6. PAGE TITLE / BREADCRUMB AREA ═══════════════════════════════ */
.page-title {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}
.page-title h3 {
    margin-bottom: 0 !important;
}

/* Header */
.page-header {
    min-height: 60px !important;
    padding: 0 !important;
}
.page-header .logo-wrapper,
.page-header .page-main-header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Sidebar: flush under top bar (Admiro default margin-top:77px left a gap vs compact header) */
.page-wrapper .page-sidebar {
    margin-top: 0 !important;
    top: var(--prk-header-height) !important;
    height: calc(100vh - var(--prk-header-height)) !important;
}


/* ══ 7. DARK MODE OVERRIDES ════════════════════════════════════════ */
[data-bs-theme="dark"] .logo-wrapper img {
    display: block !important;
}
[data-bs-theme="dark"] .user-wrap {
    background-color: #1e293b;
}
[data-bs-theme="dark"] .user-wrap:hover {
    background-color: #334155;
}
[data-bs-theme="dark"] .sidebar-list.active {
    background-color: rgba(255, 255, 255, 0.05);
}


/* ══ 8. FORM CONTROLS (UNIFIED HEIGHT) ═════════════════════════════ */
.form-control,
.form-select:not(.select2-hidden-accessible) {
    height: var(--prk-input-height) !important;
    font-size: var(--prk-input-font-size) !important;
    font-weight: 400 !important;
    color: var(--prk-text-dark) !important;
    border-color: var(--prk-border-color) !important;
    border-radius: var(--prk-input-radius) !important;
}

/* Textarea should NOT have fixed height */
textarea.form-control {
    height: auto !important;
    min-height: 80px;
}

/* Center collection add/edit: reduce gap above Remarks (multiline textarea) */
#addReceiptModal .prk-remarks-col,
#editReceiptModal .prk-remarks-col {
    margin-top: -1rem !important;
}

/* Small selects (pagination etc) should keep bootstrap sizing */
.form-select-sm {
    height: auto !important;
    font-size: 13px !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--prk-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(7, 102, 173, 0.12) !important;
}

/* File input auto height */
.form-control[type="file"] {
    height: auto !important;
    padding: 6px 12px;
}


/* ══ 9. FORM LABELS ════════════════════════════════════════════════ */
.form-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--prk-text-dark) !important;
    margin-bottom: 4px !important;
}


/* ══ 10. OPS-BOX (Operational Gray Box in Modals) ══════════════════ */
.ops-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 14px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
}
.ops-box label {
    color: var(--prk-primary) !important;
    font-weight: 600 !important;
}

/* Fee installments modal — grey year panel: Staff .ops-box label (stacked layout uses mb-4px) */
.fee-inst-year-panel:not(.fee-inst-year-panel-inline) label.form-label {
    color: var(--prk-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
}
.fee-inst-year-panel-inline label.form-label.fee-inst-year-inline-label {
    color: var(--prk-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
}


/* ══ 11. SELECT2 — GLOBAL (same vertical rhythm as label + .form-control / .form-select) ══
 * Problem: native <select class="select2"> often still took 38px in flow WHILE .select2-container
 * also renders → double height + wrong gap to next label. Vendor line-height:28px on __rendered
 * also fights --prk-input-height. These rules apply app-wide.
 * ═══════════════════════════════════════════════════════════════════════════════════ */

/* Native <select> out of flow only AFTER Select2 injects .select2-container (avoids double 38px + blank-before-JS) */
select.select2-hidden-accessible,
select.form-select.select2:has(+ .select2-container),
select.select2.form-select:has(+ .select2-container) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    max-height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Anchor clipped <select> for correct absolute positioning (cols + common .mb-3 wrappers) */
[class*="col-"]:has(> select.select2.form-select),
[class*="col-"]:has(> select.form-select.select2),
div.mb-3:has(> select.select2.form-select),
div.mb-3:has(> select.form-select.select2) {
    position: relative !important;
}

.select2-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: top !important;
    float: none !important;
}

/* Stacked label + control (e.g. .mb-3 wrapper): no stray gap under Select2 */
.modal .mb-3 > .select2-container,
.modal .mb-3 > .form-control,
.modal .mb-3 > .form-select:not(.select2-hidden-accessible) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Admission modals — Tab "Student Details": slightly tighter vertical rhythm (fields + Select2 rows) */
#addAdmissionModal #add-details .form-label,
#editAdmissionModal #edit-details .form-label {
    margin-bottom: 2px !important;
}

#addAdmissionModal #add-details .row.g-3,
#editAdmissionModal #edit-details .row.g-3 {
    --bs-gutter-y: 0.5rem !important;
}

#addAdmissionModal #add-details .mb-3,
#editAdmissionModal #edit-details .mb-3 {
    margin-bottom: 0.6875rem !important; /* ~11px vs 16px */
}

#addAdmissionModal #add-details .row.gx-3.mb-3,
#editAdmissionModal #edit-details .row.gx-3.mb-3 {
    margin-bottom: 0.6875rem !important;
}

/* First row: cols had mb-3 on top of row gutter — bring down a notch */
#addAdmissionModal #add-details [class*="col-"].mb-3,
#editAdmissionModal #edit-details [class*="col-"].mb-3 {
    margin-bottom: 0.5rem !important;
}

/* Main two-column row: less vertical gutter when columns stack on small screens */
#addAdmissionModal #add-details > form > .row.gx-5,
#editAdmissionModal #edit-details > form > .row.gx-5 {
    --bs-gutter-y: 0.5rem !important;
}

/* Inner wrapper (Select2 v4) — no extra box */
.select2-container .selection {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.select2-container .select2-selection--single {
    box-sizing: border-box !important;
    height: var(--prk-input-height) !important;
    min-height: var(--prk-input-height) !important;
    max-height: var(--prk-input-height) !important;
    border: 1px solid var(--prk-border-color) !important;
    border-radius: var(--prk-input-radius) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background-color: #fff !important;
}

/* Kill vendor line-height:28px — must fit inside --prk-input-height */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.25 !important;
    padding-left: 12px !important;
    padding-right: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    color: #000 !important;
    font-size: var(--prk-input-font-size) !important;
    font-weight: 400 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--prk-input-height) - 2px) !important;
    min-height: 0 !important;
    top: 1px !important;
    right: 1px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--prk-text-muted) !important;
}

.select2-container .select2-dropdown {
    position: absolute !important;
    z-index: 9999 !important;
}

/* Select2 dropdown results */
.select2-results__option {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--prk-text-dark) !important;
    padding: 8px 12px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.select2-search--dropdown .select2-search__field {
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Select2 focus state */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--prk-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(7, 102, 173, 0.12) !important;
}

/* Select2 height wrapper — prevent layout jump */
.select2-height-fix {
    height: var(--prk-input-height);
}

/* ══ 12. TABLE STANDARDS ═══════════════════════════════════════════ */
thead tr th {
    background-color: transparent !important;
    color: var(--prk-text-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
    border: none !important;
    box-shadow: none !important;
}

thead tr.bg-light-primary {
    background-color: transparent !important;
}

.table td {
    font-size: 14px !important;
    font-weight: 400 !important;
}

tbody tr td {
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
    color: var(--prk-text-dark) !important;
    border: none !important;
    box-shadow: none !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* No background, no border on content data — tables, avatars, cells */
.table thead tr,
.table tbody td,
.table .avatar-initials,
.table .avatar-initials-sm,
.table .rounded-circle[class*="bg-light-"],
.table .initials-circle[class*="bg-light-"],
.table .center-initials[class*="bg-light-"],
.table .staff-avatar[class*="bg-light-"] {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Row separator — horizontal bottom line (header + data rows) */
.table thead tr th {
    border-bottom: 1px solid var(--prk-border-color) !important;
}
.table tbody tr td {
    border-bottom: 1px solid var(--prk-border-color) !important;
}
/* Badges in table content — no background, no border */
.table tbody .badge[class*="badge-light-"] {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
}


/* ══ 13. CARD ══════════════════════════════════════════════════════ */
.card {
    border: 0 !important;
    box-shadow: var(--prk-card-shadow) !important;
    overflow: hidden;
}


/* ══ 14. MODAL ═════════════════════════════════════════════════════ */
.modal-header {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 16px !important;
}

.modal-footer {
    border-top: 0 !important;
    padding: 12px 16px !important;
}

.modal-title {
    font-weight: 700 !important;
    color: var(--prk-primary) !important;
    font-size: 16px !important;
}

.modal-content {
    border: 0 !important;
}


/* ══ 15. BUTTONS ═══════════════════════════════════════════════════ */
.btn {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Icon-only action buttons (download, filter, help) */
.btn-icon-only {
    width: var(--prk-icon-btn-size) !important;
    height: var(--prk-icon-btn-size);
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Feather icons inside icon buttons */
.btn-icon-only svg,
.btn-icon-only .feather,
.feather-icon-sm {
    width: var(--prk-feather-icon-size) !important;
    height: var(--prk-feather-icon-size) !important;
}

/* Modal Save / Cancel Buttons */
.modal-footer .btn {
    padding: 8px 24px !important;
    font-weight: 600 !important;
}

.modal-footer .btn-outline-dark,
.modal-footer .btn-primary {
    border-radius: 50px !important;
}


/* ══ 16. TABLE ACTION ICONS ════════════════════════════════════════ */
.action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action .edit a,
.action .delete a,
.action .login a,
.action .share a,
.action .fee a,
.action .wa a,
.action .reset-pw a {
    font-size: 16px !important;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
}

.action .fee a,
.action .fee i { color: #f4a100 !important; }
.action .fee a:hover { color: #c28500 !important; }

.action .edit a,
.action .edit i { color: #51bb25 !important; }
.action .delete a,
.action .delete i { color: #f73164 !important; }
.action .login a,
.action .login i,
.action .share a,
.action .share i { color: #29adb2 !important; }
.action .reset-pw a,
.action .reset-pw i { color: #0766ad !important; }

.action .edit a:hover { color: #146c43 !important; }
.action .delete a:hover { color: #a71d2a !important; }
.action .login a:hover { color: #1f8e93 !important; }
.action .reset-pw a:hover { color: #054a7a !important; }

.action .wa a,
.action .wa i { color: #25d366 !important; opacity: 0.45; }
.action .wa a { pointer-events: none; cursor: default; }

/* Student Fee Reminder — WhatsApp opens wa.me (see sendFeeReminderWhatsApp) */
#feeReminderTable .action .wa a,
#feeReminderTable .action .wa i {
    opacity: 1 !important;
}
#feeReminderTable .action .wa a {
    pointer-events: auto !important;
    cursor: pointer !important;
}
#feeReminderTable .action .wa a:hover,
#feeReminderTable .action .wa a:hover i {
    color: #128c7e !important;
}


/* Fee installments modal — width (tabs: Year 1–5) */
#feeInstallmentsModal .fee-installments-modal-dialog {
    max-width: min(52rem, calc(100vw - 1.25rem));
}

/* Fee modal — year tabs: horizontal scroll on narrow screens */
#feeInstallmentsModal .fee-inst-year-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: thin;
}
@media (min-width: 768px) {
    #feeInstallmentsModal .fee-inst-year-tabs {
        flex-wrap: wrap;
        white-space: normal;
        overflow-x: visible;
    }
}
#feeInstallmentsModal .fee-inst-year-tabs .nav-link {
    font-size: 0.8125rem;
    font-weight: 600;
}
#feeInstallmentsModal .fee-inst-tab-content {
    min-height: 12rem;
}
#feeInstallmentsModal .fee-inst-year-total-row {
    border-color: #e2e8f0 !important;
}

/* Fee modal — student card: name → uni/course → annual fee row (label left, amount right; not beside name) */
.fee-inst-student-card {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 55%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #4169e1;
    border-radius: 0.5rem;
    padding: 0.45rem 0.65rem 0.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.fee-inst-student-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.fee-inst-student-card__sub {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.35;
    margin-top: 0.2rem;
}
.fee-inst-student-card__annual-line {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed #cbd5e1;
}
.fee-inst-student-card__fee-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    line-height: 1.2;
}
.fee-inst-student-card__fee-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #4169e1;
    line-height: 1.2;
    white-space: nowrap;
    text-align: right;
}

/* Fee modal — year panel: default padding */
.fee-inst-year-panel {
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem 0.55rem;
}
/* One row: label + year + button, shorter height */
.fee-inst-year-panel-inline {
    padding: 0.3rem 0.5rem !important;
    row-gap: 0.25rem;
    column-gap: 0.4rem;
}
#feeInstallmentsModal .fee-inst-year-select-inline {
    min-width: 5.5rem;
    max-width: 9.25rem;
    flex: 1 1 auto;
}

@media (min-width: 576px) {
    #feeInstallmentsModal .fee-installments-modal-dialog {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Fee installments modal (admission) — tight date / amount fields */
#feeInstallmentsModal .fee-inst-date-wrap {
    flex: 0 0 auto;
    width: 7.35rem;
    max-width: 100%;
}
#feeInstallmentsModal .fee-inst-amt-wrap {
    flex: 0 0 auto;
    width: 4.85rem;
    max-width: 100%;
}
#feeInstallmentsModal input.fee-inst-amt-locked,
#feeInstallmentsModal input[name*="[amount]"]:read-only {
    background-color: #f1f5f9;
    cursor: not-allowed;
}

/* ══ 17. AVATAR INITIALS CIRCLE ════════════════════════════════════ */
.avatar-initials {
    width: var(--prk-avatar-size);
    height: var(--prk-avatar-size);
    font-size: var(--prk-avatar-font);
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Smaller variant for student-status page */
.avatar-initials-sm {
    width: var(--prk-avatar-size);
    height: var(--prk-avatar-size);
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ══ 18. FORM SWITCH (Custom Toggle) ═══════════════════════════════ */
.form-switch-custom {
    width: var(--prk-switch-width) !important;
    height: var(--prk-switch-height) !important;
}


/* ══ 19. PAGINATION ════════════════════════════════════════════════ */
.pagination {
    margin-bottom: 0 !important;
}

.page-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--prk-primary) !important;
}

.page-item.active .page-link {
    background-color: var(--prk-primary) !important;
    border-color: var(--prk-primary) !important;
    color: #fff !important;
}


/* ══ 20. BREADCRUMB ════════════════════════════════════════════════ */
.breadcrumb-item a {
    color: var(--prk-primary) !important;
    font-size: 14px !important;
}

.breadcrumb-item.active {
    color: var(--prk-text-header) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}


/* ══ 21. DROPDOWN & SELECT CONSISTENCY ═════════════════════════════ */
.dropdown-menu .dropdown-item {
    color: #000 !important;
    font-size: 13.5px;
    font-weight: 500;
}
.modal .form-select option {
    color: #000 !important;
}
.modal .form-select:invalid {
    color: var(--prk-text-muted) !important;
}


/* ══ 22. PHOTO PREVIEW & AVATARS ═══════════════════════════════════ */
.photo-preview-box {
    width: 96px;
    height: 96px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    overflow: hidden;
}
.photo-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ══ 23. BADGES / STATUS TEXT ══════════════════════════════════════ */
.fw-semibold {
    font-weight: 600 !important;
}

.text-dark {
    color: var(--prk-text-dark) !important;
}

/* Dashboard top “context” note — explicit grey/black (alert-light + theme vars can look white on light bg) */
.prk-dashboard-context-note {
    background-color: #f1f3f5 !important;
    border: 1px solid #ced4da !important;
    color: #495057 !important;
    border-radius: 6px;
}
.prk-dashboard-context-note strong {
    color: #212529 !important;
    font-weight: 600;
}


/* ══ 24. HELP MODAL — min-width wrapper ════════════════════════════ */
.help-content-wide {
    min-width: 600px;
}

/* Help modal extra-small text */
.extra-small {
    font-size: 10px;
}


/* ══ 25. REGISTRATION / STATUS SUBTEXT ═════════════════════════════ */
.reg-subtext {
    font-size: 11px;
}

.status-description {
    font-size: 10px;
}


/* ══ 26. TABLE COLUMN WIDTH HELPERS ════════════════════════════════ */
.col-w-180 {
    min-width: 180px;
}
.col-w-100 {
    width: 100px;
}


/* ══ 27. STAGE BADGES (Student Status Page) ════════════════════════ */
/* Year stage badges — text only */
.stage-badge {
    display: inline-block;
    font-weight: 600;
}
.stage-passed  { color: #198754; }
.stage-running { color: #0d6efd; }
.stage-dropped { color: #dc3545; }
.stage-na      { color: #adb5bd; font-weight: 400; }

/* Overall status column badges */
.status-study    { color: #0d6efd; }
.status-complete { color: #198754; }


/* ══ 28. STAT WIDGET (Dashboards) ══════════════════════════════════ */
.stat-widget {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}
.stat-widget .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.stat-widget .stat-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}
.stat-widget .stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-widget .stat-trend {
    font-size: 11px;
    font-weight: 600;
}

/* Stat icon size override for insight cards */
.stat-icon-lg {
    width: 54px !important;
    height: 54px !important;
}


/* ══ 29. PROGRESS BAR — THIN ═══════════════════════════════════════ */
.progress-thin {
    height: 6px;
    border-radius: 3px;
}


/* ══ 30. ACTIVITY TIMELINE ═════════════════════════════════════════ */
.activity-item {
    position: relative;
    padding-left: 28px;
    padding-bottom: 20px;
    border-left: 2px solid #e9ecef;
    margin-left: 8px;
}
.activity-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}
.activity-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid;
}
.activity-item.dot-primary::before { border-color: var(--theme-default); background: #fff; }
.activity-item.dot-success::before { border-color: #54ba4a; background: #fff; }
.activity-item.dot-warning::before { border-color: #ffaa05; background: #fff; }
.activity-item.dot-danger::before  { border-color: #fc4438; background: #fff; }
.activity-item.dot-info::before    { border-color: #16c7f9; background: #fff; }


/* ══ 31. QUICK-LINK CARD ═══════════════════════════════════════════ */
.quick-link-card {
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
}
.quick-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}


/* ══ 32. FEE BADGE ═════════════════════════════════════════════════ */
.fee-badge {
    width: 36px;
    height: 36px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 50%;
}


/* ══ 33. UNI BADGE ═════════════════════════════════════════════════ */
.uni-badge {
    width: 36px;
    height: 36px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 50%;
}


/* ══ 34. CENTER BADGE (Top 10 ranking) ═════════════════════════════ */
.center-badge {
    width: 36px;
    height: 36px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    border-radius: 50%;
}


/* ══ 35. STAFF AVATAR ══════════════════════════════════════════════ */
.staff-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}


/* ══ 36. FOLLOW-UP HISTORY CONTAINER ═══════════════════════════════ */
.follow-up-history {
    max-height: 400px;
    overflow-y: auto;
}


/* ══ 37. ADMISSION TABS ════════════════════════════════════════════ */
.admission-tabs {
    border: none;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 3px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    margin-bottom: 16px !important;
}
.admission-tabs .nav-item {
    flex: 1;
}
.admission-tabs .nav-link {
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 13px;
    color: #6c757d;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    background: transparent;
}
.admission-tabs .nav-link:hover {
    color: var(--prk-primary);
    background: rgba(7, 102, 173, 0.08);
}
.admission-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--prk-primary) 0%, #0d47a1 100%);
    box-shadow: 0 2px 8px rgba(7, 102, 173, 0.3);
}

/* Tab step number badge */
.admission-tabs .nav-link .tab-step {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.admission-tabs .nav-link:hover .tab-step {
    background: rgba(7, 102, 173, 0.15);
    color: var(--prk-primary);
}
.admission-tabs .nav-link.active .tab-step {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Tab icon - hidden by default */
.admission-tabs .nav-link .tab-icon {
    display: none;
}

/* Tab text - always visible */
.admission-tabs .nav-link .tab-text {
    display: inline;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tab-pane.active {
    animation: fadeIn 0.3s ease;
}


/* ══ 38. DOCUMENT CARD (Admission Tab) ═════════════════════════════ */
.doc-card {
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 6px;
    transition: all 0.2s ease;
    background: #fff;
    position: relative;
}
.doc-card:hover {
    border-color: var(--prk-primary);
    background: #f8fbff;
}
.doc-card.has-file {
    border-style: solid;
    border-color: #dee2e6;
}
.doc-card.has-file:hover {
    border-color: var(--prk-primary);
}
.doc-card .doc-thumb {
    width: 100%;
    height: 130px;
    border-radius: 6px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}
.doc-card .doc-thumb:hover {
    background: #e8f4ff;
}
.doc-card .doc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    padding: 2px;
    background: #f8f9fa;
}
.doc-card .doc-thumb .placeholder-icon {
    text-align: center;
    color: #adb5bd;
}
.doc-card .doc-thumb .placeholder-icon i {
    font-size: 28px;
    display: block;
    margin-bottom: 4px;
}
.doc-card .doc-thumb .placeholder-icon span {
    font-size: 11px;
    font-weight: 600;
}
.doc-card .doc-thumb .pdf-preview {
    text-align: center;
    color: #dc3545;
}
.doc-card .doc-thumb .pdf-preview i {
    font-size: 32px;
    display: block;
    margin-bottom: 4px;
}
.doc-card .doc-thumb .pdf-preview span {
    font-size: 10px;
    font-weight: 600;
    color: #6c757d;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-card .doc-thumb input[type="file"] {
    display: none;
}
.doc-card .doc-body {
    margin-top: 5px;
}
.doc-card .doc-body .doc-type-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #495057;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-card .doc-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fc4438;
    color: #fff;
    border: none;
    font-size: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.doc-card:hover .doc-clear,
.doc-card.has-file .doc-clear {
    display: flex;
}

/* Download button for document cards */
.doc-card .doc-download {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #198754;
    color: #fff;
    border: none;
    font-size: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-decoration: none;
}
.doc-card .doc-download:hover {
    background: #157347;
    color: #fff;
}
.doc-card.has-file .doc-download {
    display: flex;
}


/* ══ 39. UPLOAD CONTAINER ══════════════════════════════════════════ */
.upload-container {
    transition: all 0.3s ease;
}
.upload-container:hover {
    border-color: #4169e1 !important;
    background-color: #f0f4ff !important;
    transform: translateY(-2px);
}


/* ══ 40. TEMPLATE ICON ═════════════════════════════════════════════ */
.template-icon {
    width: 38px;
    height: 38px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


/* ══ 41. INITIALS CIRCLE (Courier / Tables) ════════════════════════ */
.initials-circle {
    width: 32px;
    height: 32px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Center initials (Centre Collection page) */
.center-initials {
    width: 32px;
    height: 32px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


/* ══ 42. CURSOR UTILITY ════════════════════════════════════════════ */
.cursor-pointer {
    cursor: pointer;
}


/* ══ 43. CARD HEADER NO BORDER ═════════════════════════════════════ */
.card-header.card-no-border {
    border-bottom: none;
    background: transparent;
}


/* ══ 44. INSIGHT CARDS (Centre Dashboard gradient cards) ════════════ */
.insight-card-success {
    background: linear-gradient(135deg, #e8f8e8 0%, #ffffff 100%);
    border: 1px solid #e8f8e8;
    border-left: 4px solid #54ba4a !important;
}
.insight-card-danger {
    background: linear-gradient(135deg, #fff0f0 0%, #ffffff 100%);
    border: 1px solid #fff0f0;
    border-left: 4px solid #fc4438 !important;
}


/* ══ 45. TABLE LAYOUT HELPERS ══════════════════════════════════════ */
.table-auto {
    table-layout: auto;
    width: 100% !important;
}
.table-auto tbody td {
    white-space: normal !important;
}


/* ══ 46. UPLOAD ICON SIZES ═════════════════════════════════════════ */
.upload-icon-lg {
    font-size: 32px;
}
.upload-label-sm {
    font-size: 11px;
    font-weight: 600;
}
.upload-caption {
    font-size: 12px;
}
.upload-chevron {
    font-size: 10px;
}


/* ══ 47. DASHBOARD TABLE TH SIZES ══════════════════════════════════ */
.th-col-rank {
    font-size: 12px;
    width: 60px;
}


/* ══ 48. INSTALLMENT BOX (Admission Form) ══════════════════════════ */
.installment-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 15px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
}


/* ══ 49. AVATAR INITIALS — LARGE (Doc Modal etc.) ══════════════════ */
.avatar-initials-lg {
    width: 45px;
    height: 45px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ══ 50. STATUS DOT (Help Modal legend) ════════════════════════════ */
.status-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    display: inline-block;
}


/* ══ 51. COMPACT FORM INPUTS (Fee Reminder Modal) ══════════════════ */
.input-date-sm {
    max-width: 120px;
}
.input-amount-sm {
    max-width: 100px;
}


/* ══ 52. TEXT TRUNCATE WITH MAX-WIDTH ═══════════════════════════════ */
.text-truncate-150 {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ══ 53. FONT SIZE UTILITIES ═══════════════════════════════════════ */
.font-size-16 {
    font-size: 16px;
}
.font-size-9 {
    font-size: 9px;
}
.font-size-10 {
    font-size: 10px;
}


/* ══ 54. AUTH PAGES — STANDARD THEME (Blue) ═══════════════════════════ */
/* Login, Forgot Password, Reset Password, Verify OTP — use Prashikshan blue */
.guest-body .btn-primary,
.authentication-main .btn-primary {
    background-color: var(--prk-primary) !important;
    border-color: var(--prk-primary) !important;
    color: #fff !important;
}
.guest-body .btn-primary:hover,
.guest-body .btn-primary:focus,
.authentication-main .btn-primary:hover,
.authentication-main .btn-primary:focus {
    background-color: #055a96 !important;
    border-color: #055a96 !important;
    color: #fff !important;
}
.guest-body .theme-form a.link,
.guest-body .theme-form a.fw-bold,
.authentication-main .theme-form a.link,
.authentication-main .theme-form a.fw-bold {
    color: var(--prk-primary) !important;
}
.guest-body .theme-form a.link:hover,
.guest-body .theme-form a.fw-bold:hover,
.authentication-main .theme-form a.link:hover,
.authentication-main .theme-form a.fw-bold:hover {
    color: #055a96 !important;
}
.guest-body .form-check-input:checked,
.authentication-main .form-check-input:checked {
    background-color: var(--prk-primary) !important;
    border-color: var(--prk-primary) !important;
}


/* ══ 55. LOGIN SIDE IMAGE ═══════════════════════════════════════════ */
.login_two_image {
    background-image: url(../../../logo/login-image.webp);
    background-size: cover;
    background-position: center center;
}


/* ══ 56. GUEST LAYOUT BODY ═════════════════════════════════════════ */
.guest-body {
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ══ 55. COLUMN WIDTH — 15% ════════════════════════════════════════ */
.col-w-15pct {
    width: 15%;
}


/* ══ 56. NUMBERED BADGE (Help modals) ══════════════════════════════ */
.numbered-badge {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}


/* ══ 57. HELP ICON BOX ═════════════════════════════════════════════ */
.help-icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Additional Utility Classes */
.font-size-11 { font-size: 11px !important; }
.font-size-24 { font-size: 24px !important; }
.font-size-32 { font-size: 32px !important; }
.icon-15 { width: 15px !important; height: 15px !important; }
.min-h-280 { min-height: 280px !important; }
.min-h-350 { min-height: 350px !important; }
.terms-editor { min-height: 500px; overflow-y: auto; font-size: 14px; line-height: 1.8; }
.terms-editor-sm { min-height: 350px; overflow-y: auto; font-size: 13px; line-height: 1.8; }
.stat-widget-primary { background: linear-gradient(135deg, #e0e8ff 0%, #ffffff 100%); border: 1px solid #e0e8ff; border-left: 4px solid #3e5fce !important; }
.stat-widget-success { background: linear-gradient(135deg, #e8f8e8 0%, #ffffff 100%); border: 1px solid #e8f8e8; border-left: 4px solid #54ba4a !important; }
.stat-widget-danger { background: linear-gradient(135deg, #fff0f0 0%, #ffffff 100%); border: 1px solid #fff0f0; border-left: 4px solid #fc4438 !important; }
.stat-widget-warning { background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%); border: 1px solid #fff9e6; border-left: 4px solid #ffaa05 !important; }
.stat-icon-lg { width: 48px; height: 48px; }


/* ══ Laravel pagination — reference-style joined bar (Previous | 1 2 3 | Next) ══ */
.page-body .prashikshan-pagination-nav {
    flex-wrap: nowrap;
}
.page-body .prashikshan-pagination-nav .pagination {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    border: 1px solid var(--prk-border-color, #dee2e6);
    border-radius: 0.35rem;
    overflow: hidden;
    background: #fff;
}
.page-body .prashikshan-pagination-nav .page-item {
    margin: 0;
}
.page-body .prashikshan-pagination-nav .page-item + .page-item {
    border-left: 1px solid var(--prk-border-color, #dee2e6);
}
.page-body .prashikshan-pagination-nav .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--prk-primary, #0766ad) !important;
    background-color: #fff;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.page-body .prashikshan-pagination-nav a.page-link:hover {
    background-color: #f1f5f9;
    color: var(--prk-primary, #0766ad) !important;
}
.page-body .prashikshan-pagination-nav a.page-link:focus-visible {
    outline: 2px solid var(--prk-primary, #0766ad);
    outline-offset: -2px;
    z-index: 2;
}
.page-body .prashikshan-pagination-nav .page-item.active .page-link {
    background-color: var(--prk-primary, #0766ad) !important;
    color: #fff !important;
    z-index: 1;
}
.page-body .prashikshan-pagination-nav .page-item.active .page-link:hover {
    background-color: var(--prk-primary, #0766ad) !important;
    color: #fff !important;
}
.page-body .prashikshan-pagination-nav .page-item.disabled .page-link {
    background-color: #f8f9fa !important;
    color: var(--prk-primary, #0766ad) !important;
    opacity: 0.85;
    pointer-events: none;
}
.page-body .prashikshan-pagination-nav svg {
    width: 1em !important;
    height: 1em !important;
    max-width: 1.25rem;
    max-height: 1.25rem;
    vertical-align: middle;
}

/* ══ Date fields: editable text + trailing chevron (dropdown-style picker trigger) ══ */
.prk-date-field {
    position: relative;
    display: block;
    width: 100%;
}
.prk-date-field > .prk-date-input-field,
.prk-date-field > input.form-control {
    width: 100%;
    padding-right: 2.4rem;
}
.prk-date-field-sm > .prk-date-input-field,
.prk-date-field-sm > input.form-control {
    padding-right: 2rem;
    min-height: calc(1.5em + 0.5rem + 2px);
}
.prk-date-field-toggle {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 2.25rem;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--prk-text-muted, #6c757d);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 calc(var(--prk-input-radius, 6px) - 1px) calc(var(--prk-input-radius, 6px) - 1px) 0;
    cursor: pointer;
    z-index: 4;
    font-size: 0.7rem;
}
.prk-date-field-sm .prk-date-field-toggle {
    width: 1.85rem;
    font-size: 0.65rem;
}
.prk-date-field-toggle:hover,
.prk-date-field-toggle:focus {
    color: var(--prk-primary, #0766ad);
    background-color: rgba(7, 102, 173, 0.06);
    outline: none;
}
.prk-date-field-toggle:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(7, 102, 173, 0.35);
}