.student-info-360-header {
    /* ── Palette ── */
    --s360-text: #051e56;
    --s360-text-muted: #617295;
    --s360-accent: #486bb4;
    --s360-bg: #f7f9ff;
    --s360-bg-muted: #f0f3fb;
    --s360-border: #d9dfef;
    --s360-danger: #c62828;
    --s360-shadow: 0 8px 24px rgba(25, 39, 89, 0.08);

    /* ── Component Styles ── */
    background: var(--s360-bg);
    border: 1px solid var(--s360-border);
    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 var(--s360-bg-muted);
    border-top-color: var(--s360-accent);
    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;
    color: var(--_b);
    background: color-mix(in srgb, var(--_b) 12%, white);
    border: 1px solid color-mix(in srgb, var(--_b) 25%, white);
}
.badge360--muted  { --_b: #4c5568; }
.badge360--green  { --_b: #1d8f4a; }
.badge360--yellow { --_b: #8a6d00; }
.badge360--blue   { --_b: #1967d2; }
.badge360--orange { --_b: #b35300; }
.badge360--red    { --_b: #b71c1c; }

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

.student-info-360-left > :first-child {
    flex-shrink: 0;
}

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

.student-info-360-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--s360-bg-muted);
    object-fit: cover;
}

.student-info-360-name,
.student-info-360-id {
    display: inline;
    font: normal normal 600 18px/22px Nunito Sans, Arial, sans-serif;
    color: var(--s360-text);
}

.student-info-360-major,
.student-info-360-class-level {
    display: inline;
    color: var(--s360-text-muted);
    font: normal normal 600 14px/20px 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: var(--s360-danger);
    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 var(--s360-border);
    background: var(--s360-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--s360-accent);
    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 var(--s360-border);
    background: var(--s360-bg);
    color: var(--s360-text);
    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;
    max-width: 420px;
    background: var(--s360-bg);
    border: 1px solid var(--s360-border);
    border-radius: 10px;
    box-shadow: var(--s360-shadow);
    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: var(--s360-text);
}

.student-info-360-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px 8px 16px;
    border-bottom: 1px solid var(--s360-border);
}

.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: var(--s360-bg-muted);
    border-color: var(--s360-border);
}

.student-info-360-tab.student-info-360-tab-active {
    border-color: var(--s360-accent);
    background: var(--s360-bg-muted);
}

.student-info-360-tab:focus-visible {
    outline: 2px solid var(--s360-accent);
    outline-offset: 2px;
}

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

.student-info-360-tab svg path {
    fill: var(--s360-accent);
}

.student-info-360-section-heading {
    font: normal normal 700 13px/18px Nunito Sans, Arial, sans-serif;
    color: var(--s360-text);
    padding: 8px 8px 4px 8px;
}

.student-info-360-section table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

.student-info-360-section table tbody {
    display: table-row-group !important;
    width: auto !important;
}

.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 var(--s360-bg-muted);
    display: none;
    height: auto;
}

.student-info-360-section table tbody tr[style*="block"] {
    display: table-row !important;
}

.student-info-360-section table tbody th {
    display: table-cell !important;
    width: 40% !important;
    text-align: left;
    font: normal normal 400 13px/18px Nunito Sans, Arial, sans-serif;
    color: var(--s360-text-muted);
    background: none;
    padding: 6px 8px !important;
    white-space: normal;
}

.student-info-360-section table tbody td {
    display: table-cell !important;
    width: auto !important;
    font: normal normal 600 14px/18px Nunito Sans, Arial, sans-serif;
    color: var(--s360-text);
    padding: 6px 8px !important;
    vertical-align: middle;
    white-space: normal;
}

.student-info-360-section table tbody th::after {
    content: none !important;
    display: none !important;
}

/* Table container: neutralise page-level box-model overrides */
.student-info-360-section table {
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    border-style: initial !important;
}

/* Rows: reset fixed height and flex layout forced by page CSS */
.student-info-360-section table tbody tr {
    height: auto !important;
    flex-direction: initial !important;
    margin: 0 !important;
}

/* td ::before — suppress pseudo-content column labels injected by page
   responsive-table CSS (e.g. td:nth-of-type(1)::before { content: "Attachment" }) */
.student-info-360-section table tbody td::before,
.student-info-360-section table tbody th::before {
    content: none !important;
    display: none !important;
}

/* td: reset position/padding-left overrides from page mobile-table CSS */
.student-info-360-section table tbody td {
    position: static !important;
    padding-left: 8px !important;
    border-bottom: none !important;
}

.student-info-360-section table tbody {
    width: auto !important;
}

/* Tablet Responsiveness (iPad / medium screens) */
@media (min-width: 769px) and (max-width: 1080px) {
    /* Override rigid 50% columns — let both sides flex to fit content */
    .student-info-360-header .l-grid--column-6 {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    /* Prevent the text wrapper in the left section from forcing overflow */
    .student-info-360-left > :nth-child(2) {
        min-width: 0;
    }

    /* Slightly reduce name size to reclaim horizontal space */
    .student-info-360-name,
    .student-info-360-id {
        font-size: 16px;
        line-height: 22px;
    }

    .student-info-360-major,
    .student-info-360-class-level {
        font-size: 13px;
    }

    /* Allow phone / email / Core 360 to wrap to a second line */
    .student-info-360-right {
        flex-wrap: wrap;
        gap: 6px 10px;
        justify-content: flex-start;
        margin-top: 10px;
    }

    .student-info-360-phone,
    .student-info-360-email {
        min-width: 0;
    }

    /* Truncate long phone numbers and email addresses with ellipsis */
    .student-info-360-phone-number,
    .student-info-360-email-address {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 160px;
        display: inline-block;
    }

    /* Compact the toggle button slightly */
    .student-info-360-toggle {
        padding: 5px 8px;
        font-size: 13px;
    }

    /* Ensure the dropdown panel fits within the tablet viewport */
    .student-info-360-dropdown {
        min-width: 340px;
        max-width: 400px;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

    .student-info-360-name, .student-info-360-id {
      font: normal normal 600 14px / 22px Nunito Sans, Arial, sans-serif;
    }

    .student-info-360-major, .student-info-360-class-level,
    .student-info-360-degree-status, .student-info-360-holds {
      font: normal normal 600 12px / 20px Nunito Sans, Arial, sans-serif;
    }

    .student-info-360-header {
        padding: 8px 8px;
        position: relative;
        overflow: visible;
    }
  
    /* Stack left/right columns vertically */
    .student-info-360-header .l-grid--column-6 {
        flex: none;
        width: 100%;
    }

    /* Left-align the right section when stacked, wrap into rows */
    .student-info-360-right {
        justify-content: flex-start;
        margin-top: 8px;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Email moves to top row, spans full width */
    .student-info-360-email {
        order: -1;
        width: 100%;
        overflow: hidden;
    }

    /* Phone and Core 360 share the second row at 50% each */
    .student-info-360-phone {
        order: 0;
        width: calc(50% - 3px);
        overflow: hidden;
    }

    .student-info-360-phone-number,
    .student-info-360-email-address {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .student-info-360-toggle-wrapper {
        order: 1;
        width: calc(50% - 3px);
        position: static;
    }

    .student-info-360-toggle {
        width: 100%;
    }

    .student-info-360-toggle > svg:last-child {
        margin-left: auto;
    }

    /* Tabs: horizontally scrollable if 5 icons don't fit on small screens */
    .student-info-360-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .student-info-360-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Anchor dropdown to bottom of header card on mobile */
    .student-info-360-dropdown {
        position: absolute;
        top: 100%;
        bottom: auto;
        left: 0;
        right: 0;
        min-width: unset;
        max-width: none;
        border-radius: 0 0 10px 10px;
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 4px;
        z-index: 9999;
    }

    .student-info-360-section table tbody th {
        width: 35% !important;
    }

    .student-info-360-section table tbody td,
    .student-info-360-section table tbody th {
      font: normal normal 600 12px / 16px Nunito Sans, Arial, sans-serif;
    }
}

@media screen and (max-width: 767px) {

  .student-info-360-header {
    padding: 5px 5px;
    margin-bottom: 10px;
    margin-right: 5px;
  }
  
  .student-info-360-dropdown {
    min-width: 300px;
    max-width: 350px;
  }

  .student-info-360-left {
    gap: 5px;
  }

  .student-info-360-right {
    gap: 5px;
  }

  .student-info-360-phone, .student-info-360-email {
    gap: 5px;
  }

  .student-info-360-show-on-load {
    margin-bottom: 5px;
  }

  .student-info-360-name {
    font: normal normal 600 16px/18px Nunito Sans, Arial, sans-serif;
  }

  .student-info-360-holds {
    font: normal normal 400 12px / 18px Nunito Sans, Arial, sans-serif;
  }

  .student-info-360-toggle {
    padding: 3px 0;
    gap: 4px;
  }

  .student-info-360-toggle-icon {
    margin-right: 0;
    height: 24px;
    width: 24px;
    margin-left: 4px;
  }
}