.student-info-360-header {
    background: #f7f9ff;
    border: 1px solid #d9dfef;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 5px;
    display: none;
}

.student-info-360-loader {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #f0f3fb;
    border-top-color: #3b82f6;
    animation: student-info-360-spin 0.8s linear infinite;
}

@keyframes student-info-360-spin {
    to {
        transform: rotate(360deg);
    }
}

.student-info-360-show-on-load {
    display: none;
}

.badge360 {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    font: normal normal 600 12px/16px Nunito Sans, Arial, sans-serif;
}
.badge360--muted { background: #f1f2f6; color: #4c5568; border: 1px solid #e3e6ef; }
.badge360--green { background: #e6f6ec; color: #1d8f4a; border: 1px solid #bfe8d0; }
.badge360--yellow { background: #fff8e1; color: #8a6d00; border: 1px solid #ffe29a; }
.badge360--blue { background: #e8f0fe; color: #1967d2; border: 1px solid #c6dafc; }
.badge360--orange { background: #fff1e6; color: #b35300; border: 1px solid #ffd7b3; }
.badge360--red { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6c6; }

.student-info-360-left {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.student-info-360-right {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: flex-end;
}

.student-info-360-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f3fb;
    object-fit: cover;
}

.student-info-360-name {
    display: inline;
    font: normal normal 600 18px/22px Nunito Sans, Arial, sans-serif;
    color: #051e56;
}

.student-info-360-major,
.student-info-360-class-level {
    display: inline;
    color: #617295;
    font: normal normal 600 14px/20px Nunito Sans, Arial, sans-serif;
}

.student-info-360-id {
    display: inline;
    font: normal normal 400 13px/18px Nunito Sans, Arial, sans-serif;
}

.student-info-360-degree-status,
.student-info-360-holds {
    display: inline;
    font: normal normal 400 13px/18px Nunito Sans, Arial, sans-serif;
}

.student-info-360-privacy {
    display: inline-flex;
    align-items: center;
    color: #c62828; /* red */
    font-weight: 700;
}

.student-info-360-privacy-text {
    margin-left: 4px;
}

.student-info-360-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #d9dfef;
    background: #f7f9ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #486bb4;
    cursor: pointer;
    text-decoration: none;
}

.student-info-360-icon svg {
    width: 14px;
    height: 14px;
}

.student-info-360-header a[href^="tel:"]::before,
.student-info-360-header a[href^="tel:"]::after { 
    content: none !important;
}

.student-info-360-phone,
.student-info-360-email {
    font: normal normal 500 12px/16px Nunito Sans, Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-info-360-toggle-wrapper {
    position: relative;
}

.student-info-360-toggle {
    border: 1px solid #d9dfef;
    background: #f7f9ff;
    color: #051e56;
    padding: 6px 10px;
    border-radius: 6px;
    font: normal normal 600 14px/18px Nunito Sans, Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.student-info-360-toggle-icon {
    margin-right: 4px;
}

.student-info-360-dropdown {
     position: absolute;
     top: calc(100% + 4px);
     right: 0;
     min-width: 380px; /* reduced for single-column tabular panels */
     max-width: 420px;
     background: #f7f9ff;
     border: 1px solid #d9dfef;
     border-radius: 10px;
     box-shadow: 0 8px 24px rgba(25, 39, 89, 0.08);
     padding: 12px 0;
     z-index: 2000;
     display: none;
 }

.student-info-360-dropdown-header {
    padding: 8px 16px 4px 16px;
    font: normal normal 700 14px/18px Nunito Sans, Arial, sans-serif;
    color: #051e56;
}

.student-info-360-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px 8px 16px;
    border-bottom: 1px solid #d9dfef;
}

.student-info-360-tab {
    background:none;
    border:1px solid transparent;
    padding:6px 8px;
    cursor:pointer;
    border-radius:6px;
    display:flex;
    align-items:center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;

}
.student-info-360-tab:hover {
    background:#f0f5fc;
    border-color:#b7c9e7;
}

.student-info-360-tab.student-info-360-tab-active {
    border-color:#486bb4;
    background:#f5f8fd;
}

.student-info-360-tab:focus-visible {
    outline:2px solid #99b2e8;
    outline-offset:2px;
}

.student-info-360-tab svg {
    width: 20px;
    height: 20px;
    display: block;
}

.student-info-360-tab svg path {
    fill: #486bb4;
}

.student-info-360-section-heading {
    font: normal normal 700 13px/18px Nunito Sans, Arial, sans-serif;
    color: #051e56;
    padding:8px 8px 4px 8px;    
}

.student-info-360-section table {
    width: 100%;
    border-collapse: collapse;
}

.student-info-360-section {
    display: none;
}

.student-info-360-section.student-info-360-section-active {
    display: block;
}

.student-info-360-section table tbody tr {
    border-bottom:1px solid #f1f2f6;
    display: none;
    height: auto;
}

.student-info-360-section table tbody th {
    text-align: left;
    font: normal normal 400 13px/18px Nunito Sans, Arial, sans-serif;
    color: #617295;
    background: none;
    padding: 6px 8px;
    width: 40%;
    white-space: normal;
}

.student-info-360-section table tbody td {
    font: normal normal 600 14px/18px Nunito Sans, Arial, sans-serif;
    color: #051e56;
    padding: 6px 8px;
    vertical-align: middle;
    white-space: normal;
}

/* AdmAppStatus.html has CSS that's hurting us, this is a defensive measure to prevent it */
.student-info-360-section table tbody th::after {
    content: none;
}