/* Company site = top navigation layout (overrides the shared sidebar layout,
   loaded last so no !important needed). Same emerald theme as admin. */

/* Stack the nav above content instead of the shared sidebar flex-row layout */
body { display: block; }
.main-content { margin-left: 0; width: 100%; }

/* Top navigation bar (emerald, derived from theme vars) */
.company-topnav {
    background: var(--sidebar-bg-color);
    min-height: var(--topbar-height);
    padding: 0 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
/* Page-title row (title + #pageActions toolbar). */
.page-head-sticky {
    padding-top: 4px;
    padding-bottom: 12px;
}
.company-topnav .navbar-brand {
    color: #fff;
    font-size: calc(var(--font-size) + 4px);
    font-weight: 600;
}
.company-topnav .navbar-nav .nav-link {
    color: var(--sidebar-text-color);
    font-size: var(--font-size);
    padding: 7px 10px;
    border-radius: 6px;
    margin: 0 1px;
    transition: 0.15s;
    white-space: nowrap;
}
.company-topnav .navbar-nav .nav-link:hover {
    color: #fff;
    background: var(--sidebar-active-bg-color);
}
.company-topnav .navbar-nav .nav-link.active {
    color: #fff;
    background: var(--sidebar-active-bg-color);
    border-bottom: 3px solid var(--sidebar-border-color);
}
.company-topnav .navbar-nav .nav-link.dropdown-toggle::after { vertical-align: middle; }

/* Dropdown submenus */
.company-topnav .dropdown-menu {
    font-size: var(--font-size);
    border-radius: var(--primary-border-radius);
    box-shadow: 0 6px 18px rgba(16,24,40,0.12);
    border: 0.5px solid #e3e8ee;
}
.company-topnav .dropdown-item { padding: 8px 16px; }
.company-topnav .dropdown-item.active,
.company-topnav .dropdown-item:active {
    background: var(--accent-color);
    color: #fff;
}

/* Live clock — readable on the dark emerald bar. Doubles as the team-calendar entry. */
.company-topnav .topnav-clock {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #ffffff !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 10px;
    padding: 4px 10px;
    white-space: nowrap;
    line-height: 1.05;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
/* kill the legacy standalone #current-date-time box (gray bg + monospace) inside the nav */
.company-topnav #current-date-time.topnav-clock-body {
    background: transparent; padding: 0; border-radius: 0; font-family: inherit;
}
/* no link underline anywhere in the clock (it's an <a>) */
.company-topnav .topnav-clock,
.company-topnav .topnav-clock * { text-decoration: none !important; }
.company-topnav .topnav-clock-ico { color: #f6c560; font-size: calc(var(--font-size) + 4px) !important; }   /* gold so it reads as a clock */
.company-topnav .topnav-clock-body { display: flex; flex-direction: column; text-align: left; }
.company-topnav .topnav-clock .tc-date { font-size: calc(var(--font-size) - 2px); opacity: 0.75; }
.company-topnav .topnav-clock .tc-time { font-size: calc(var(--font-size) + 1px); font-weight: 700; letter-spacing: .02em; }
.company-topnav .topnav-clock-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.18); margin: 2px 0; }
.company-topnav .topnav-clock-cal {
    display: flex; align-items: center; gap: 5px;
    font-size: calc(var(--font-size) - 1px); font-weight: 700; letter-spacing: .03em; color: #f6c560;
}
.company-topnav .topnav-clock-cal .fa-chevron-right { font-size: calc(var(--font-size) - 3px) !important; }
/* clickable variant (has the calendar permission) */
.company-topnav .topnav-clock--link { cursor: pointer; }
.company-topnav .topnav-clock--link:hover {
    background: rgba(246,197,96,0.16) !important;
    border-color: rgba(246,197,96,0.50) !important;
}

/* Member-style brand wordmark: company name + project-name suffix */
.company-topnav .tn-brand-name { font-size: calc(var(--font-size) + 4px); font-weight: 700; letter-spacing: -.01em; color: #fff; }
.company-topnav .tn-brand-sub  { font-weight: 700; font-size: calc(var(--font-size) - 2px); letter-spacing: .10em; text-transform: uppercase; color: #f6c560; }

/* Compact fit: the top nav carries brand + up to ~6 menus + clock/notif/avatar on one line.
   Below wide-desktop widths, drop the decorative "· COMPANY" suffix (the biggest easy width win,
   especially for long company names like "Reseeding Plantation") so the bar never overflows the
   viewport / forces a horizontal scrollbar. The full wordmark still shows on large screens. */
@media (max-width: 1499.98px) {
    .company-topnav .tn-brand-sub { display: none; }
}

/* Between the collapse breakpoint (992px) and wide desktop the bar has to carry brand + 7 menus + the right-hand
   block on one line. Measured at 1024px it wanted 1147px in 1008px, which pushed a horizontal scrollbar onto the
   WHOLE PAGE — the table below was never the cause. The clock (131px) now waits for xxl, and the menu padding
   tightens, which brings it back inside with room to spare. */
@media (max-width: 1399.98px) {
    .company-topnav .navbar-nav .nav-link { padding-left: 6px; padding-right: 6px; margin: 0; }
    .company-topnav .navbar-brand { gap: 6px !important; }
    .company-topnav .topnav-right { gap: 8px !important; }
}
/* Nothing in the bar may force the page sideways. The menu is allowed to shrink; it must NOT be given its own
   overflow, because an overflow container clips the dropdowns that open out of it — the menus simply vanish. */
.company-topnav .container-fluid { flex-wrap: nowrap; min-width: 0; }
.company-topnav .navbar-collapse { min-width: 0; }
@media (min-width: 992px) {
    .company-topnav .navbar-nav { flex-wrap: nowrap; }
}

/* pending-count badge on nav items. Submenu items (Leave / Claims) = inline after the text. */
.company-topnav .nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px;
    border-radius: 9px; background: #dc3545; color: #fff;
    font-size: calc(var(--font-size) - 2px); font-weight: 700; line-height: 1; vertical-align: middle;
}
/* Parent toggle (HR Operations) = a superscript bubble lifted into the TOP-RIGHT corner, so a wide
   2-digit count sits ABOVE the dropdown caret (which is vertically centred) instead of covering it. */
.company-topnav .nav-item.dropdown > .nav-link { position: relative; }
.company-topnav .nav-item.dropdown > .nav-link > .nav-badge {
    position: absolute; top: -5px; right: -5px; margin-left: 0;
    min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px;
    font-size: calc(var(--font-size) - 4px);
    box-shadow: 0 0 0 2px var(--sidebar-bg-color, #0d3b2a);
}

/* User chip hover */
.topnav-user:hover { background: rgba(255,255,255,0.10); }

/* Multi-level (sub-sub) dropdowns */
.company-topnav .dropdown-submenu { position: relative; }
.company-topnav .dropdown-submenu > .dropdown-toggle::after {
    border: none;
    content: "\f105"; /* fa-angle-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    margin-left: 10px;
    opacity: 0.6;
}
@media (min-width: 992px) {
    .company-topnav .dropdown-submenu > .dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
        margin-left: 1px;
        display: none;
    }
    .company-topnav .dropdown-submenu:hover > .dropdown-menu,
    .company-topnav .dropdown-submenu > .dropdown-menu.show { display: block; }
}
@media (max-width: 991.98px) {
    /* Hold the top bar at a constant height whether the hamburger is open or closed. When the menu
       opens it wraps to its own flex line, so the first line would otherwise shrink from the bar height
       down to its content height — pulling the brand / bell / avatar up by ~11px. Pinning the brand
       (the tallest item) to the bar height keeps line 1 full-height; the shorter toggler/avatar still
       centre within it, so nothing jumps. */
    .company-topnav .navbar-brand { min-height: var(--topbar-height); }

    /* ---- Collapsed hamburger panel: a clean full-width list under the top bar ---- */
    .company-topnav .navbar-collapse {
        padding: 10px 4px 12px;
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    .company-topnav .navbar-nav .nav-link {
        display: flex; align-items: center;
        justify-content: flex-start;   /* left-align icon+label — beats general.css .nav-link:has(i){justify-content:center} */
        margin: 1px 0; padding: 11px 14px;
    }
    .company-topnav .navbar-nav .nav-link.active { border-bottom: 0; }             /* no underline in the vertical list */
    .company-topnav .navbar-nav .nav-link.dropdown-toggle::after { margin-left: auto; }  /* caret to the far right */

    /* NAV submenus become an inline accordion. Scope the "transparent" treatment to .navbar-nav ONLY
       (so the notification/user menus keep their white panels), and force LIGHT item text — the default
       Bootstrap dark grey was invisible on the dark emerald panel. */
    .company-topnav .navbar-nav .dropdown-menu {
        border: none; box-shadow: none; background: transparent; padding: 0 0 4px;
    }
    .company-topnav .navbar-nav .dropdown-item {
        color: var(--sidebar-text-color);
        padding: 9px 14px 9px 30px; border-radius: 6px; white-space: normal;
    }
    .company-topnav .navbar-nav .dropdown-item:hover,
    .company-topnav .navbar-nav .dropdown-item:focus,
    .company-topnav .navbar-nav .dropdown-item.active,
    .company-topnav .navbar-nav .dropdown-item:active {
        color: #fff; background: var(--sidebar-active-bg-color);
    }
    .company-topnav .navbar-nav .dropdown-submenu > .dropdown-menu {
        position: static; float: none; display: none;
        padding-left: 12px; margin: 0; min-width: 0;
    }
    .company-topnav .navbar-nav .dropdown-submenu > .dropdown-menu.show { display: block; }

    /* ---- Right cluster (now OUTSIDE the collapse, in the top bar) ---- */
    .company-topnav .topnav-right { gap: 8px !important; }
    /* Pin the notification + user menus to the viewport's top-right on mobile. Bootstrap/Popper anchors
       them to the bell (near the centre), so a 340px menu spilled off the LEFT edge (the reported bug).
       Fixed position + right:8 + width capped to the viewport keeps them fully on-screen regardless of
       where the toggle sits. !important beats Popper's inline transform/inset. */
    .company-topnav .topnav-right .dropdown-menu {
        position: fixed !important;
        top: calc(var(--topbar-height) + 4px) !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        max-width: calc(100vw - 16px) !important;
    }
    #adminNotifList, #adminNotifList * { max-width: 100%; }
    #adminNotifList { overflow-wrap: anywhere; }
}