/* ===== Identity Rail — navbar restyle ===== */
/* Same ink+brass+company-color language as gp-sidebar.css, applied to the
   top navbar so it reads as one dark frame with the sidebar around the
   (still light) content area. Structure/behavior is untouched — this only
   recolors NavbarComponent.js's existing markup. */

#layout-navbar.bg-navbar-theme {
    background: #14161b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none !important;
}

#layout-navbar .nav-link,
#layout-navbar .search-toggler,
#layout-navbar .search-toggler span {
    color: #b8bcc6;
}

/* ===== Search (self-contained, see NavbarComponent.js#_initSearch) ===== */

/* Full-navbar overlay — same footprint/behavior as the template's original
   .search-input-wrapper.container-xxl (edge-to-edge bar replacing the
   navbar's normal content while open), just restyled dark instead of
   left as the template's light default. #layout-navbar is already
   position:relative in the template's own layout CSS, so this needs no
   positioning context of its own. */
.gp-search-panel {
    display: none;
    /* position:absolute here also makes this the containing block for
       .gp-search-results' position:absolute below — no extra
       position:relative needed. */
    position: absolute;
    inset: 0;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.5rem;
    background: #14161b;
    /* Matches .layout-navbar.navbar-detached's own border-radius exactly
       (core.css:20692) — this panel covers that same rounded box, so a
       square-cornered overlay on top of it would visibly clash. */
    border-radius: 0.375rem;
    z-index: 20;
}

.gp-search-panel.show {
    display: flex;
}

.gp-search-panel > i.ti-search {
    color: #6b6f7a;
    font-size: 18px;
    flex-shrink: 0;
}

.gp-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #f2f0ea;
    font-size: 14px;
}

.gp-search-input::placeholder {
    color: #6b6f7a;
}

.gp-search-close {
    color: #6b6f7a;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.gp-search-close:hover {
    color: #f2f0ea;
}

.gp-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 360px;
    overflow-y: auto;
    background: #181c24;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
    padding: 6px;
}

.gp-search-results:empty {
    display: none;
    border: none;
    box-shadow: none;
}

.gp-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #b8bcc6;
    text-decoration: none;
}

.gp-search-result i {
    color: var(--company, #c9a227);
    font-size: 15px;
    flex-shrink: 0;
}

.gp-search-result:hover,
.gp-search-result.active {
    background: #20242e;
    color: #f2f0ea;
}

/* Refresh button */
#navbarRefresh {
    transition: transform 0.4s ease;
}

#navbarRefresh:active i {
    transform: rotate(180deg);
    display: inline-block;
    transition: transform 0.4s ease;
}

#layout-navbar .nav-link:hover,
#layout-navbar .nav-link:focus {
    color: #f2f0ea;
}

#layout-navbar .navbar-search-wrapper {
    background: #14161b;
}

/* Notification badge keeps its semantic red — just make sure it reads
   clearly against the dark bar */
#layout-navbar .badge-notifications {
    box-shadow: 0 0 0 2px #14161b;
}

/* User avatar ring picks up the company color, matching the sidebar avatar */
#layout-navbar .dropdown-user .avatar img {
    box-shadow: 0 0 0 2px #14161b, 0 0 0 3.5px var(--company, #c9a227);
}

/* ===== Dropdown panels (style switcher, quick links, notifications, user) ===== */

#layout-navbar .dropdown-menu {
    background: #181c24;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

#layout-navbar .dropdown-menu-header,
#layout-navbar .dropdown-menu-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#layout-navbar .dropdown-header h5,
#layout-navbar .dropdown-header .text-body {
    color: #f2f0ea !important;
}

#layout-navbar .dropdown-item {
    color: #b8bcc6;
}

#layout-navbar .dropdown-item:hover,
#layout-navbar .dropdown-item:focus {
    background: #20242e;
    color: #f2f0ea;
}

#layout-navbar .dropdown-item small,
#layout-navbar .dropdown-item .text-muted {
    color: #6b6f7a !important;
}

#layout-navbar .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Quick-links grid (Acesso rápido) */
#layout-navbar .dropdown-shortcuts-item {
    color: #b8bcc6;
}

#layout-navbar .dropdown-shortcuts-item:hover {
    color: #f2f0ea;
}

#layout-navbar .dropdown-shortcuts-icon {
    background: #20242e;
    color: var(--company, #c9a227);
}

#layout-navbar .row-bordered {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#layout-navbar .row-bordered > * {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Notifications list */
#layout-navbar .notif-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

#layout-navbar .notif-item.notif-unread {
    background: rgba(201, 162, 39, 0.08) !important;
    border-left-color: var(--company, #c9a227) !important;
}

#layout-navbar .notif-title {
    color: #f2f0ea !important;
}

#layout-navbar .notif-message {
    color: #8a8f9c !important;
}

#layout-navbar .notif-mark-all-read {
    color: var(--company, #c9a227) !important;
}