/* ============================================================================
   Admin header — maroon (ERP palette)

   The top-right cluster: language, notifications and the user menu. These are
   the theme's own components (.notification, .profile-notification, .pro-head,
   .noti-head), so the rules below are written to sit on top of the packaged
   stylesheet rather than replace it — hence the qualifiers and the occasional
   !important where the theme states a colour of its own.

   Loaded from admin/layouts/common/header_script.blade.php, after style.css.
   ========================================================================== */

.unity-header {
    --hd-m: #a6303a;
    --hd-m-dark: #8f2830;
    --hd-m-deep: #6d1f27;
    --hd-band: #f6e4e7;
    --hd-line: #e6cdd2;
    --hd-ink: #2b2521;
    --hd-ink-3: #6b7484;
    --hd-ink-4: #8a93a6;
}

/* ---------------------------------------------------------------------------
   1. Triggers — the three controls in the bar itself
   ------------------------------------------------------------------------- */
.unity-header .navbar-nav > li > .dropdown > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 9px;
    color: #8f2830 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}
.unity-header .navbar-nav > li > .dropdown > .dropdown-toggle:hover,
.unity-header .navbar-nav > li > .dropdown.show > .dropdown-toggle {
    background: #f6e4e7;
    color: #6d1f27 !important;
}
.unity-header .navbar-nav > li > .dropdown > .dropdown-toggle i { color: inherit !important; font-size: 15px; }

/* The theme's caret is a glyph positioned for the old inline layout; inside a
   flex row it landed under the label instead of beside it. Replaced with a
   plain triangle that is a flex item like everything else, and that turns over
   when the panel opens. */
.unity-header .navbar-nav > li > .dropdown > .dropdown-toggle:after {
    content: "" !important;
    position: static !important;
    display: inline-block !important;
    flex-shrink: 0;
    width: 0; height: 0;
    margin: 1px 0 0 1px;
    padding: 0 !important;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    border-bottom: 0;
    background: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    vertical-align: middle;
    transform-origin: 50% 40%;
    transition: transform .14s ease;
}
.unity-header .navbar-nav > li > .dropdown.show > .dropdown-toggle:after { transform: rotate(180deg); }
/* Some triggers carry a second pseudo-element for the same purpose */
.unity-header .navbar-nav > li > .dropdown > .dropdown-toggle:before { content: none !important; }

/* The unread dot on the bell */
.unity-header .notification-active {
    background: #a6303a !important;
    box-shadow: 0 0 0 2px #fff;
}

/* ---------------------------------------------------------------------------
   2. The panels

   The theme draws a caret above each panel with a border trick that inherits
   an unrelated colour — it was rendering as a stray dark-red wedge under the
   bell. Removed rather than recoloured: the panel already reads as attached.
   ------------------------------------------------------------------------- */
.unity-header .dropdown-menu.notification,
.unity-header .dropdown-menu.profile-notification {
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--hd-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 34px rgba(20, 28, 50, .16) !important;
    background: #fff;
}
.unity-header .dropdown-menu.notification:before,
.unity-header .dropdown-menu.notification:after,
.unity-header .dropdown-menu.profile-notification:before,
.unity-header .dropdown-menu.profile-notification:after { display: none !important; }

/* ---------------------------------------------------------------------------
   3. Panel headings (language, notifications)
   ------------------------------------------------------------------------- */
.unity-header .noti-head {
    padding: 13px 18px;
    background: linear-gradient(135deg, #f6e4e7 0%, #f2eef0 100%) !important;
    border-bottom: 1px solid var(--hd-line);
}
.unity-header .noti-head h6 {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6d1f27 !important;
}

.unity-header .noti-body { padding: 6px 0; margin: 0; list-style: none; max-height: 340px; overflow-y: auto; }
.unity-header .noti-body li.notification { padding: 0; border: 0; background: none; }
.unity-header .noti-body li.notification > a,
.unity-header .noti-body li.notification > a.media {
    display: block;
    padding: 10px 18px;
    color: #3b4252 !important;
    font-size: 13px;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}
.unity-header .noti-body li.notification > a:hover,
.unity-header .noti-body li.notification > a.media:hover {
    background: #fbf1f3;
    border-left-color: var(--hd-m);
    color: #6d1f27 !important;
}
/* Currently selected language */
.unity-header .noti-body li.notification.active > a {
    background: #f6e4e7;
    border-left-color: var(--hd-m);
    color: #6d1f27 !important;
    font-weight: 700;
}
.unity-header .noti-body .media-body p { margin: 0 0 2px; font-size: 12.5px; line-height: 1.5; }
.unity-header .noti-body .n-time { display: block; font-size: 11px; color: var(--hd-ink-4) !important; }

/* ---------------------------------------------------------------------------
   4. User menu

   Was a flat grey block with the name floated beside the photo and an
   unlabelled log-out glyph in the corner. Now a maroon identity band: who you
   are signed in as, and on which account — the second line matters on a portal
   where staff hold more than one.
   ------------------------------------------------------------------------- */
.unity-header .profile-notification { min-width: 268px; }

.unity-header .profile-notification .pro-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 18px;
    margin: 0;
    color: #fff !important;
    background: linear-gradient(135deg, #a6303a 0%, #8f2830 55%, #6d1f27 100%) !important;
    border-radius: 0;
}
.unity-header .profile-notification .pro-head img {
    width: 46px; height: 46px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
    flex-shrink: 0;
}
.unity-header .profile-notification .pro-head .pro-id {
    display: flex;
    flex-direction: column;
    min-width: 0;          /* lets a long address ellipsis instead of pushing out */
}
.unity-header .profile-notification .pro-head .pro-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unity-header .profile-notification .pro-head .pro-mail {
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Profile and sign out share one row, split down the middle — two
   destinations, no reason to make the menu twice as tall for them. If the
   profile permission is absent, sign out simply takes the full width. */
.unity-header .profile-notification .pro-body {
    display: flex;
    align-items: stretch;
    padding: 0;
    margin: 0;
    list-style: none;
}
.unity-header .profile-notification .pro-body > li { flex: 1 1 0; min-width: 0; }
.unity-header .profile-notification .pro-body > li + li { border-left: 1px solid #eceef2; }

.unity-header .profile-notification .pro-body .dropdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 15px 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #3b4252 !important;
    background: none;
    text-align: center;
    white-space: normal;
    transition: background .12s ease, color .12s ease;
}
.unity-header .profile-notification .pro-body .dropdown-item i {
    font-size: 19px;
    color: var(--hd-ink-3) !important;
    transition: color .12s ease;
}
.unity-header .profile-notification .pro-body .dropdown-item:hover {
    background: #fbf1f3;
    color: #6d1f27 !important;
}
.unity-header .profile-notification .pro-body .dropdown-item:hover i { color: var(--hd-m) !important; }

/* Sign out is the exit — named in red rather than shouted */
.unity-header .profile-notification .pro-body .dropdown-item.is-signout {
    color: #a1201a !important;
}
.unity-header .profile-notification .pro-body .dropdown-item.is-signout i { color: #a1201a !important; }
.unity-header .profile-notification .pro-body .dropdown-item.is-signout:hover {
    background: #fdecec;
    color: #8f1a15 !important;
}
.unity-header .profile-notification .pro-body .dropdown-item.is-signout:hover i { color: #8f1a15 !important; }

/* The logout form is markup only — never let it take up a row */
.unity-header .profile-notification #logout-form { display: none; }

/* ---------------------------------------------------------------------------
   5. Narrow screens
   ------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .unity-header .navbar-nav > li > .dropdown > .dropdown-toggle { padding: 7px 8px; font-size: 0; gap: 0; }
    .unity-header .navbar-nav > li > .dropdown > .dropdown-toggle i { font-size: 16px; }
    .unity-header .profile-notification { min-width: 240px; }
}