/* ==========================================================
   GUIDANCE - REFERRALS
   EXISTING APPLICATION STYLES
========================================================== */

* {
    box-sizing: border-box;
}

.main {
    min-width: 0;
    overflow-x: hidden;
}

.referrals-container {
    width: 100%;
    padding: 25px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

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

.page-header p {
    margin: 5px 0 0;
    color: #71839a;
    font-size: 12px;
}


/* ==========================================================
   BUTTONS
========================================================== */

.btn-primary,
.btn-filter,
.btn-reset,
.btn-cancel {
    min-height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: #2474df;
    color: #fff;
}

.btn-primary:hover {
    background: #195fb9;
}

.btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn-filter {
    height: 44px;
    background: #2474df;
    color: #fff;
}

.btn-reset {
    height: 44px;
    background: #edf1f5;
    color: #526b89;
}

.btn-cancel {
    background: #edf1f5;
    color: #526b89;
}


/* ==========================================================
   STATISTICS
========================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,.06);
}

.stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-icon.blue {
    background: #e7f0ff;
    color: #2474df;
}

.stat-icon.orange {
    background: #fff1dd;
    color: #e88917;
}

.stat-icon.purple {
    background: #eee9ff;
    color: #6546d8;
}

.stat-icon.green {
    background: #e5f8ef;
    color: #159447;
}

.stat-label {
    color: #71839a;
    font-size: 12px;
    margin-bottom: 3px;
}

.stat-number {
    color: #17365d;
    font-size: 25px;
    font-weight: 700;
}


/* ==========================================================
   CARDS
========================================================== */

.filter-card,
.content-card {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.06);
}

.filter-card {
    padding: 18px;
    margin-bottom: 20px;
}


/* ==========================================================
   FILTERS
========================================================== */

.filter-form {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 190px auto;
    gap: 15px;
    align-items: end;
}

.filter-group {
    min-width: 0;
}

.filter-group label,
.form-group label,
.detail-item label,
.detail-block label {
    display: block;
    margin-bottom: 7px;
    color: #526b89;
    font-size: 11px;
    font-weight: 700;
}

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa7b5;
    pointer-events: none;
}

.search-box input {
    padding-left: 36px !important;
}

.filter-group input,
.filter-group select,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1px solid #dce3eb;
    border-radius: 8px;
    background: #fff;
    color: #29466b;
    font-family: inherit;
    font-size: 12px;
    outline: none;
    transition: .2s ease;
}

.filter-group input,
.filter-group select,
.form-group input,
.form-group select {
    height: 44px;
    padding: 0 12px;
}

.form-group textarea {
    min-height: 105px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.5;
}

.filter-group input:focus,
.filter-group select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #2474df;
    box-shadow: 0 0 0 3px rgba(36,116,223,.09);
}

.form-group input[readonly] {
    background: #f7f9fc;
    color: #6d7d90;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ==========================================================
   TABLE
========================================================== */

.card-header {
    padding: 18px 20px;
    border-bottom: 1px solid #edf0f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.card-header h2 {
    margin: 0;
    color: #17365d;
    font-size: 17px;
}

.card-header span {
    color: #8a99aa;
    font-size: 11px;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.referrals-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.referrals-table th,
.referrals-table td {
    padding: 13px 12px;
    border-bottom: 1px solid #edf0f4;
    text-align: left;
    vertical-align: middle;
}

.referrals-table th {
    background: #f8fafc;
    color: #526b89;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

.referrals-table td {
    color: #29466b;
    font-size: 11px;
}


/* ==========================================================
   STUDENT CELL
========================================================== */

.student-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 190px;
}

.student-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: #edf3fb;
    color: #2474df;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-name {
    color: #17365d;
    font-size: 12px;
    font-weight: 700;
}

.student-lrn {
    margin-top: 3px;
    color: #8a99aa;
    font-size: 9px;
}

.reason-title {
    max-width: 300px;
    color: #17365d;
    font-size: 11px;
    line-height: 1.45;
}

.referred-by {
    color: #29466b;
    font-size: 11px;
}


/* ==========================================================
   STATUS
========================================================== */

.status-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.status-new {
    background: #fff2d9;
    color: #c57a00;
}

.status-open {
    background: #eaf2ff;
    color: #2167c7;
}

.status-in-assessment {
    background: #eee9ff;
    color: #6546d8;
}

.status-accepted {
    background: #e5f8ef;
    color: #159447;
}

.status-completed {
    background: #e4f7ed;
    color: #159447;
}

.status-rejected {
    background: #ffe9ed;
    color: #d94d65;
}


/* ==========================================================
   ACTION BUTTONS
========================================================== */

.action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-btn {
    width: 31px;
    height: 31px;
    border: none;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.view-btn {
    background: #edf4ff;
    color: #2474df;
}

.process-btn {
    background: #eee9ff;
    color: #6546d8;
}

.delete-btn {
    background: #fff0f2;
    color: #dc4c67;
}


/* ==========================================================
   EMPTY
========================================================== */

.empty-state {
    text-align: center !important;
    padding: 60px 20px !important;
}

.empty-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #edf3fb;
    color: #7e91a8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}


/* ==========================================================
   MODALS
========================================================== */

.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(12,28,52,.55) !important;
    z-index: 999999 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.modal-overlay.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-overlay > .modal {
    width: 100% !important;
    max-width: 850px !important;
    max-height: calc(100vh - 40px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.20) !important;
}

.modal-overlay > .view-modal {
    max-width: 900px !important;
}

.modal-overlay > .process-modal {
    max-width: 720px !important;
}

.modal-header {
    flex: 0 0 auto;
    padding: 20px 22px;
    border-bottom: 1px solid #edf0f4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.modal-header h2 {
    margin: 0;
    color: #17365d;
    font-size: 18px;
}

.modal-header p {
    margin: 5px 0 0;
    color: #8a99aa;
    font-size: 11px;
    line-height: 1.5;
}

.modal-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f3f6f9;
    color: #61738a;
    cursor: pointer;
}

#referralForm,
#processReferralForm {
    overflow-y: auto;
    min-height: 0;
}

.form-section {
    padding: 20px 22px;
    border-bottom: 1px solid #edf0f4;
}

.form-section-title {
    margin-bottom: 15px;
    color: #17365d;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
}

.form-section-title i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #edf4ff;
    color: #2474df;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label span {
    color: #d94d65;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.check-option {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #e1e7ee;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    color: #29466b !important;
    font-weight: 500 !important;
    background: #fff;
}

.check-option input {
    width: auto !important;
    height: auto !important;
    accent-color: #2474df;
}

.official-note {
    padding: 13px 14px;
    border-left: 3px solid #2474df;
    border-radius: 6px;
    background: #f5f8fc;
    color: #526b89;
    font-size: 11px;
    line-height: 1.6;
}

.hidden-purpose {
    display: none !important;
}


/* ==========================================================
   STUDENT SEARCH
========================================================== */

.student-search-wrapper {
    position: relative;
}

.student-search-box {
    position: relative;
}

.student-search-box i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa7b5;
}

.student-search-input {
    padding-left: 37px !important;
}

.student-search-input.student-selected {
    border-color: #159447;
    background: #f3fbf7;
}

.student-search-results {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 20;
    display: none;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dce3eb;
    border-radius: 9px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.student-search-results.show {
    display: block;
}

.student-result {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f2f5;
}

.student-result:hover {
    background: #f5f8fc;
}

.student-result-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf4ff;
    color: #2474df;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-result-name {
    color: #17365d;
    font-size: 12px;
    font-weight: 700;
}

.student-result-lrn {
    color: #8a99aa;
    font-size: 9px;
    margin-top: 2px;
}

.student-no-results {
    padding: 18px;
    text-align: center;
    color: #8a99aa;
    font-size: 11px;
}


/* ==========================================================
   MODAL FOOTER
========================================================== */

.modal-footer {
    flex: 0 0 auto;
    padding: 14px 22px;
    border-top: 1px solid #edf0f4;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: #fff;
}


/* ==========================================================
   VIEW DETAILS
========================================================== */

.view-content {
    overflow-y: auto;
    min-height: 0;
    padding: 22px;
}

.referral-document {
    max-width: 820px;
    margin: 0 auto;
}

.document-title {
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 2px solid #2474df;
    margin-bottom: 18px;
}

.document-school {
    color: #17365d;
    font-size: 14px;
    font-weight: 800;
}

.document-title h3 {
    margin: 6px 0;
    color: #17365d;
    font-size: 18px;
}

.document-number {
    color: #71839a;
    font-size: 10px;
}

.detail-section {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf0f4;
}

.detail-section-title {
    margin-bottom: 12px;
    color: #17365d;
    font-size: 12px;
    font-weight: 800;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.detail-item {
    padding: 10px 12px;
    border: 1px solid #edf0f4;
    border-radius: 7px;
    background: #fafbfd;
}

.detail-item label {
    margin-bottom: 4px;
    color: #8a99aa;
    font-size: 9px;
    text-transform: uppercase;
}

.detail-item .value {
    color: #29466b;
    font-size: 11px;
    line-height: 1.45;
}

.detail-block {
    margin-top: 12px;
}

.detail-block-value {
    padding: 11px 12px;
    border: 1px solid #edf0f4;
    border-radius: 7px;
    color: #29466b;
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.detail-list {
    margin: 0;
    padding: 10px 12px 10px 28px;
    border: 1px solid #edf0f4;
    border-radius: 7px;
    color: #29466b;
    font-size: 11px;
    line-height: 1.7;
}

.muted {
    color: #9aa7b5;
}

.system-section {
    background: #fbfcfe;
    padding: 15px;
    border-radius: 8px;
}

.loading-view {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #71839a;
    font-size: 12px;
}

.error-view {
    color: #d94d65;
}


/* ==========================================================
   TOAST
========================================================== */

#guidanceMessageContainer {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 1000000;
}

.guidance-message {
    min-width: 280px;
    max-width: 420px;
    padding: 13px 16px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
    color: #29466b;
    font-size: 11px;
}

.guidance-message.success {
    border-left: 4px solid #159447;
}

.guidance-message.success i {
    color: #159447;
}

.guidance-message.error {
    border-left: 4px solid #d94d65;
}

.guidance-message.error i {
    color: #d94d65;
}


/* ==========================================================
   SIGNATURE LINES
========================================================== */

.signature-input-line {
    width: 100%;
    min-height: 44px;
    border-bottom: 1px solid #8d99a8;
    background: #fff;
}

.signature-note {
    display: block;
    margin-top: 5px;
    color: #8a99aa;
    font-size: 9px;
}

.line-field {
    min-height: 26px;
    padding: 3px 0;
    border-bottom: 1px solid #777;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1050px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .referrals-container {
        padding: 20px;
    }

    .filter-form {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        justify-content: flex-start;
    }

    .form-grid,
    .detail-grid,
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .form-grid,
    .checkbox-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full {
        grid-column: auto;
    }

    .modal-overlay {
        padding: 10px !important;
    }

    .modal-overlay > .modal {
        max-height: calc(100vh - 20px) !important;
    }
}

@media (max-width: 600px) {
    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .modal-overlay {
        padding: 10px !important;
    }

    .modal-overlay > .modal {
        max-height: calc(100vh - 20px) !important;
    }

    .form-section,
    .modal-header,
    .modal-footer,
    .view-content {
        padding: 16px;
    }
}






/* ==========================================================
   OFFICIAL STUDENT REFERRAL FORM - FINAL FIX
========================================================== */

.modal-overlay > .referral-form-modal {
    max-width: 980px !important;
}

.referral-form-modal {
    max-height: calc(100vh - 40px) !important;
}

#referralForm {
    overflow-y: auto !important;
    min-height: 0 !important;
}

.other-specific-wrap {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #dce3eb;
    border-radius: 8px;
    background: #f8fafc;
}

.other-specific-wrap[hidden] {
    display: none !important;
}

.other-specific-wrap label {
    display: block;
    margin-bottom: 7px;
    color: #526b89;
    font-size: 11px;
    font-weight: 700;
}

.other-specific-wrap input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dce3eb;
    border-radius: 8px;
    background: #fff;
    color: #29466b;
    font-family: inherit;
    font-size: 12px;
    outline: none;
}

.other-specific-wrap input:focus {
    border-color: #2474df;
    box-shadow: 0 0 0 3px rgba(36,116,223,.09);
}

.check-option:has(input:checked) {
    border-color: #2474df;
    background: #f4f8ff;
}

.signature-input-line {
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #8d9aaa;
}

.signature-note {
    display: block;
    margin-top: 5px;
    color: #8a99aa;
    font-size: 9px;
}

@media (max-width: 800px) {
    .modal-overlay > .referral-form-modal {
        max-width: 100% !important;
    }

    .referral-form-modal .form-grid,
    .referral-form-modal .checkbox-grid {
        grid-template-columns: 1fr;
    }
}







/* ==========================================================
   EDIT REFERRAL MODAL - FINAL CLEAN LAYOUT
   Only #processReferralModal is affected.
========================================================== */

#processReferralModal.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(15,29,50,.58) !important;
    overflow: hidden !important;
    z-index: 999999 !important;
}

#processReferralModal.modal-overlay.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#processReferralModal > .modal {
    width: 100% !important;
    max-width: 820px !important;
    height: min(700px, calc(100vh - 48px)) !important;
    max-height: calc(100vh - 48px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border: 1px solid #e3e9f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(15,23,42,.22),0 8px 20px rgba(15,23,42,.08) !important;
}

#processReferralModal > .modal > .modal-header {
    flex: 0 0 auto !important;
    min-height: 82px;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    background: #fff !important;
    border-bottom: 1px solid #e9eef4 !important;
}

#processReferralModal .modal-header h2 {
    margin: 0 !important;
    color: #17365d !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#processReferralModal .modal-header p {
    margin: 5px 0 0 !important;
    color: #8292a6 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

#processReferralModal .modal-close {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #f2f5f8 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    cursor: pointer !important;
}

#processReferralModal .modal-close:hover {
    background: #e8eef5 !important;
    color: #17365d !important;
}

/* Header + scrollable body + fixed footer */
#processReferralModal #processReferralForm {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fff !important;
}

#processReferralModal #processReferralForm > .form-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    column-gap: 20px !important;
    row-gap: 18px !important;
    padding: 22px 24px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}

#processReferralModal #processReferralForm > .form-grid::-webkit-scrollbar { width: 7px; }
#processReferralModal #processReferralForm > .form-grid::-webkit-scrollbar-track { background: transparent; }
#processReferralModal #processReferralForm > .form-grid::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 20px; }
#processReferralModal #processReferralForm > .form-grid::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

#processReferralModal #processReferralForm .form-group {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

#processReferralModal #processReferralForm .form-group.full { grid-column: 1 / -1 !important; }

#processReferralModal #processReferralForm .form-group > label {
    display: block !important;
    margin: 0 !important;
    color: #526b89 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

#processReferralModal #processReferralForm .form-group input,
#processReferralModal #processReferralForm .form-group select,
#processReferralModal #processReferralForm .form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #d7e0ea !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #29466b !important;
    font-family: inherit !important;
    font-size: 13px !important;
    outline: none !important;
    transition: border-color .18s ease,box-shadow .18s ease,background .18s ease !important;
}

#processReferralModal #processReferralForm .form-group input,
#processReferralModal #processReferralForm .form-group select {
    height: 48px !important;
    padding: 0 13px !important;
}

#processReferralModal #processReferralForm .form-group textarea {
    min-height: 105px !important;
    padding: 12px 13px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}

#processReferralModal #initial_action_recommendation { min-height: 125px !important; }
#processReferralModal #process_remarks { min-height: 110px !important; }

#processReferralModal #processReferralForm .form-group input:focus,
#processReferralModal #processReferralForm .form-group select:focus,
#processReferralModal #processReferralForm .form-group textarea:focus {
    border-color: #2474df !important;
    box-shadow: 0 0 0 3px rgba(36,116,223,.10) !important;
}

#processReferralModal #processReferralForm .form-group input::placeholder,
#processReferralModal #processReferralForm .form-group textarea::placeholder {
    color: #a0adbc !important;
    opacity: 1 !important;
}

/* Fixed footer */
#processReferralModal #processReferralForm > .modal-footer {
    flex: 0 0 auto !important;
    min-height: 70px !important;
    padding: 14px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    background: #fff !important;
    border-top: 1px solid #e9eef4 !important;
    box-shadow: 0 -3px 10px rgba(15,23,42,.025) !important;
}

#processReferralModal #processReferralForm > .modal-footer button {
    min-width: 110px !important;
    height: 40px !important;
    padding: 0 17px !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

#processReferralModal #processReferralForm > .modal-footer .btn-cancel {
    background: #f1f4f7 !important;
    border: 1px solid #e1e7ee !important;
    color: #526b89 !important;
}

#processReferralModal #processReferralForm > .modal-footer .btn-cancel:hover {
    background: #e6ebf0 !important;
}

#processReferralModal #processReferralForm > .modal-footer .btn-primary {
    background: #2474df !important;
    border: 1px solid #2474df !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(36,116,223,.16) !important;
}

#processReferralModal #processReferralForm > .modal-footer .btn-primary:hover {
    background: #195fb9 !important;
    border-color: #195fb9 !important;
}

#processReferralModal #process_referral_id,
#processReferralModal input[name="action"] { display: none !important; }

@media (max-width:760px) {
    #processReferralModal.modal-overlay { padding: 12px !important; }
    #processReferralModal > .modal {
        width: 100% !important;
        height: calc(100vh - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 13px !important;
    }
    #processReferralModal > .modal > .modal-header { min-height: 72px; padding: 17px 18px !important; }
    #processReferralModal .modal-header h2 { font-size: 18px !important; }
    #processReferralModal #processReferralForm > .form-grid {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
        row-gap: 15px !important;
        padding: 18px !important;
    }
    #processReferralModal #processReferralForm .form-group.full { grid-column: auto !important; }
    #processReferralModal #processReferralForm > .modal-footer { padding: 12px 18px !important; }
}

@media (max-width:480px) {
    #processReferralModal.modal-overlay { padding: 7px !important; }
    #processReferralModal > .modal {
        height: calc(100vh - 14px) !important;
        max-height: calc(100vh - 14px) !important;
        border-radius: 11px !important;
    }
    #processReferralModal #processReferralForm > .form-grid { padding: 16px !important; }
    #processReferralModal #processReferralForm > .modal-footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        padding: 11px 16px !important;
    }
    #processReferralModal #processReferralForm > .modal-footer button { width: 100% !important; }
}


/* ==========================================================
   JAVASCRIPT ALIGNMENT FIXES
   Matches the current referrals.js
   and referral.php modal/button IDs.
========================================================== */

/* ----------------------------------------------------------
   ACTION BUTTONS
---------------------------------------------------------- */

.action-btn {
    flex: 0 0 31px;
    padding: 0 !important;
    text-decoration: none;
}

.action-btn i {
    pointer-events: none;
}

.action-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}


/* ----------------------------------------------------------
   STUDENT SEARCH RESULT BUTTON
---------------------------------------------------------- */

.student-result {
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #f0f2f5;
    background: #fff;
    color: inherit;
    font-family: inherit;
    text-align: left;
}

.student-result:last-child {
    border-bottom: 0;
}

.student-result:focus {
    outline: none;
    background: #f5f8fc;
}


/* ----------------------------------------------------------
   VIEW MODAL
   Current referrals.js generates:
   .view-details
   .view-section
   .view-section-title
   .view-grid
   .view-item
---------------------------------------------------------- */

#viewReferralModal > .modal.view-modal {
    width: 100% !important;
    max-width: 900px !important;
    height: min(760px, calc(100vh - 40px)) !important;
    max-height: calc(100vh - 40px) !important;
}

#viewReferralModal .view-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 22px 24px !important;
}

.view-details {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.view-section {
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid #edf0f4;
}

.view-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.view-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    color: #17365d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.view-section-title i {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #edf4ff;
    color: #2474df;
}

.view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.view-grid.single {
    grid-template-columns: 1fr;
}

.view-item {
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid #edf0f4;
    border-radius: 8px;
    background: #fafbfd;
}

.view-item span {
    display: block;
    margin-bottom: 5px;
    color: #8a99aa;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .2px;
}

.view-item strong {
    display: block;
    color: #29466b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.referral-status-badge {
    display: inline-flex !important;
    width: fit-content;
    align-items: center;
    padding: 5px 9px;
    border-radius: 12px;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.referral-status-badge.status-1 {
    background: #fff2d9;
    color: #c57a00;
}

.referral-status-badge.status-2 {
    background: #eaf2ff;
    color: #2167c7;
}

.referral-status-badge.status-3 {
    background: #eee9ff;
    color: #6546d8;
}

.referral-status-badge.status-4 {
    background: #e5f8ef;
    color: #159447;
}

.referral-status-badge.status-5 {
    background: #e4f7ed;
    color: #159447;
}

.referral-status-badge.status-6 {
    background: #ffe9ed;
    color: #d94d65;
}


/* ----------------------------------------------------------
   VIEW MODAL FOOTER
---------------------------------------------------------- */

#viewReferralModal > .modal > .modal-footer {
    flex: 0 0 auto !important;
}


/* ----------------------------------------------------------
   EDIT MODAL
   Current PHP uses #processReferralModal > .modal,
   not .process-modal.
---------------------------------------------------------- */

#processReferralModal > .modal {
    max-width: 820px !important;
}


/* ----------------------------------------------------------
   ADD MODAL
---------------------------------------------------------- */

#referralModal > .modal {
    max-width: 980px !important;
}


/* ----------------------------------------------------------
   MODAL SCROLLBARS
---------------------------------------------------------- */

#viewReferralModal .view-content,
#referralForm,
#processReferralModal #processReferralForm > .form-grid {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

#viewReferralModal .view-content::-webkit-scrollbar,
#referralForm::-webkit-scrollbar,
#processReferralModal #processReferralForm > .form-grid::-webkit-scrollbar {
    width: 7px;
}

#viewReferralModal .view-content::-webkit-scrollbar-track,
#referralForm::-webkit-scrollbar-track,
#processReferralModal #processReferralForm > .form-grid::-webkit-scrollbar-track {
    background: transparent;
}

#viewReferralModal .view-content::-webkit-scrollbar-thumb,
#referralForm::-webkit-scrollbar-thumb,
#processReferralModal #processReferralForm > .form-grid::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 20px;
}


/* ----------------------------------------------------------
   MESSAGE CONTAINER
---------------------------------------------------------- */

#guidanceMessageContainer {
    pointer-events: none;
}

#guidanceMessageContainer .guidance-message {
    pointer-events: auto;
}


/* ----------------------------------------------------------
   RESPONSIVE VIEW MODAL
---------------------------------------------------------- */

@media (max-width: 760px) {

    #viewReferralModal {
        padding: 12px !important;
    }

    #viewReferralModal > .modal.view-modal {
        width: 100% !important;
        height: calc(100vh - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 13px !important;
    }

    #viewReferralModal .view-content {
        padding: 18px !important;
    }

    .view-grid {
        grid-template-columns: 1fr;
    }

    .view-grid.single {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    #viewReferralModal {
        padding: 7px !important;
    }

    #viewReferralModal > .modal.view-modal {
        height: calc(100vh - 14px) !important;
        max-height: calc(100vh - 14px) !important;
        border-radius: 11px !important;
    }

    #viewReferralModal .view-content {
        padding: 16px !important;
    }

    .view-section-title {
        font-size: 12px;
    }

}