/* ============================================================================
   Applicant dashboard header — maroon (ERP palette)

   The counterpart to admin-header.css. The applicant dashboard runs a
   different theme (Boxicons, .layout-navbar, .dropdown-menu-end) so the
   selectors differ, but the result is deliberately the same: one institute,
   one header, whichever portal you are signed in to.

   Scoped to #layout-navbar throughout, so nothing here can reach the page
   content or the side menu.
   ========================================================================== */

#layout-navbar {
    --ah-m: #a6303a;
    --ah-m-dark: #8f2830;
    --ah-m-deep: #6d1f27;
    --ah-band: #f6e4e7;
    --ah-line: #e6cdd2;
    --ah-ink: #3b4252;
    --ah-ink-3: #6b7484;
}

/* ---------------------------------------------------------------------------
   1. Triggers
   ------------------------------------------------------------------------- */
#layout-navbar .navbar-nav > .nav-item > .nav-link {
    color: #8f2830 !important;
    border-radius: 9px;
    padding: 7px 9px;
    transition: background .14s ease, color .14s ease;
}
#layout-navbar .navbar-nav > .nav-item > .nav-link:hover,
#layout-navbar .navbar-nav > .nav-item.show > .nav-link {
    background: #f6e4e7;
    color: #6d1f27 !important;
}
#layout-navbar .navbar-nav > .nav-item > .nav-link i { color: inherit !important; }

/* The avatar trigger keeps no pill — the photo is the control */
#layout-navbar .dropdown-user > .nav-link,
#layout-navbar .dropdown-user > .nav-link:hover { background: none; padding: 0; }
#layout-navbar .dropdown-user > .nav-link .avatar img {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(166, 48, 58, .28);
    transition: box-shadow .14s ease;
}
#layout-navbar .dropdown-user > .nav-link:hover .avatar img,
#layout-navbar .dropdown-user.show > .nav-link .avatar img {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ah-m);
}

/* Unread count on the bell */
#layout-navbar .badge-notifications,
#layout-navbar .badge.bg-danger {
    background-color: var(--ah-m) !important;
    box-shadow: 0 0 0 2px #fff;
}

/* ---------------------------------------------------------------------------
   2. Panels
   ------------------------------------------------------------------------- */
#layout-navbar .dropdown-menu {
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ah-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 34px rgba(20, 28, 50, .16) !important;
}

#layout-navbar .dropdown-menu-header,
#layout-navbar .dropdown-menu-footer {
    background: linear-gradient(135deg, #f6e4e7 0%, #f2eef0 100%) !important;
    border-color: var(--ah-line) !important;
}
#layout-navbar .dropdown-menu-header h5,
#layout-navbar .dropdown-menu-header h6 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6d1f27 !important;
    margin: 0;
}
#layout-navbar .dropdown-menu-footer a { color: var(--ah-m-dark) !important; font-weight: 600; }

/* Rows */
#layout-navbar .dropdown-menu .dropdown-item {
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ah-ink) !important;
    border-left: 3px solid transparent;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
#layout-navbar .dropdown-menu .dropdown-item i { color: var(--ah-ink-3) !important; transition: color .12s ease; }
#layout-navbar .dropdown-menu .dropdown-item:hover,
#layout-navbar .dropdown-menu .dropdown-item:focus,
#layout-navbar .dropdown-menu .dropdown-item.active {
    background: #fbf1f3 !important;
    border-left-color: var(--ah-m);
    color: #6d1f27 !important;
}
#layout-navbar .dropdown-menu .dropdown-item:hover i,
#layout-navbar .dropdown-menu .dropdown-item.active i { color: var(--ah-m) !important; }

/* Notification rows keep the theme's list-group markup */
#layout-navbar .dropdown-notifications-item {
    border-left: 3px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}
#layout-navbar .dropdown-notifications-item:hover {
    background: #fbf1f3 !important;
    border-left-color: var(--ah-m);
}
#layout-navbar .dropdown-notifications-item .badge-dot { background: var(--ah-m) !important; }

/* ---------------------------------------------------------------------------
   3. Identity band on the user menu

   Name, registration number and the address the account is held under. The
   registration number is here because it is the first thing the Admissions
   Office asks for, and an applicant should not have to go hunting for it.
   ------------------------------------------------------------------------- */
#layout-navbar .uh-menu { min-width: 272px; }

#layout-navbar .uh-menu .uh-id {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 18px;
    color: #fff;
    background: linear-gradient(135deg, #a6303a 0%, #8f2830 55%, #6d1f27 100%);
}
#layout-navbar .uh-menu .uh-id-photo {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
    flex-shrink: 0;
}
#layout-navbar .uh-menu .uh-id-text {
    display: flex;
    flex-direction: column;
    min-width: 0;          /* lets a long address ellipsis instead of pushing out */
}
#layout-navbar .uh-menu .uh-id-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#layout-navbar .uh-menu .uh-id-meta {
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The registration number is a reference — set it apart from the address */
#layout-navbar .uh-menu .uh-id-meta:first-of-type {
    font-family: Consolas, Menlo, monospace;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .92);
}

#layout-navbar .uh-menu > li:not(.uh-id) { padding: 0; }

/* Profile and sign out share one row, split down the middle. A left rule on a
   half-width tile reads as a stray mark, so hover is carried by the fill and
   the label colour instead. */
#layout-navbar .uh-menu .uh-actions { display: flex; align-items: stretch; }
#layout-navbar .uh-menu .uh-actions .dropdown-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 15px 8px;
    border-left: 0;
    text-align: center;
    white-space: normal;
}
#layout-navbar .uh-menu .uh-actions .dropdown-item i { font-size: 19px; }
#layout-navbar .uh-menu .uh-actions .dropdown-item + .dropdown-item { border-left: 1px solid #eceef2; }
#layout-navbar .uh-menu .uh-actions .dropdown-item:hover { border-left-color: #eceef2; }

/* Sign out is the exit — named in red rather than shouted */
#layout-navbar .uh-menu .dropdown-item.is-signout { color: #a1201a !important; }
#layout-navbar .uh-menu .dropdown-item.is-signout i { color: #a1201a !important; }
#layout-navbar .uh-menu .dropdown-item.is-signout:hover {
    background: #fdecec !important;
    color: #8f1a15 !important;
}
#layout-navbar .uh-menu .dropdown-item.is-signout:hover i { color: #8f1a15 !important; }

#layout-navbar .uh-menu #logout-form { display: none; }

/* ---------------------------------------------------------------------------
   4. Narrow screens
   ------------------------------------------------------------------------- */
@media (max-width: 575px) {
    #layout-navbar .uh-menu { min-width: 244px; }
    #layout-navbar .uh-menu .uh-id { padding: 14px 15px; gap: 11px; }
    #layout-navbar .uh-menu .uh-id-photo { width: 40px; height: 40px; }
}