/**
 * App topbar — projecteam-tools-ui redesign skin.
 *
 * The skill's deliberate departure from the old product: a dark navy
 * bar (--navy #1E1A3B) with light text/icons, the search as a soft
 * navy-2 pill, and brand pink reserved for the "+" quick-add — the
 * bar's one loud action.
 *
 * Registered from the company_user layout, so it restyles the topbar
 * on every logged-in screen (the topbar IS a global component — that
 * is the point of this step). Everything is scoped to #page-topbar;
 * dropdown PANELS opened from the bar keep their white surface and
 * dark text — only the bar itself and its triggers go light.
 */

#page-topbar {
    /* !important: belt-and-braces against the theme's white background
     * winning an id-selector specificity tie on load order. */
    background: #1E1A3B !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
#page-topbar .navbar-header {
    background: transparent;
}

/* --- bar text & icons: light, brighter on hover --- */
#page-topbar .header-item,
#page-topbar .header-item i,
#page-topbar .noti-icon,
#page-topbar .noti-icon i,
#page-topbar a.text-dark,
#page-topbar .advSearchWrap a,
#page-topbar .headerUpgradeBtn a {
    color: rgba(255, 255, 255, .78) !important;
}
#page-topbar .header-item:hover,
#page-topbar .header-item:hover i,
#page-topbar .noti-icon:hover,
#page-topbar .noti-icon:hover i,
#page-topbar a.text-dark:hover,
#page-topbar .advSearchWrap a:hover,
#page-topbar .headerUpgradeBtn a:hover {
    color: #fff !important;
}

/* --- search pill: navy-2 track, light text --- */
#page-topbar .app-search .form-control {
    background: #2C2652;
    border: 0;
    border-radius: 999px;
    color: #fff;
}
#page-topbar .app-search .form-control::placeholder {
    color: rgba(255, 255, 255, .45);
}
#page-topbar .app-search .bx-search-alt {
    color: rgba(255, 255, 255, .45);
    line-height: 38px;
}

/* --- the ONE brand action: quick-add "+" (ticon-add pattern) --- */
/* quick-add "+" — flat brand square-round (Avi preferred this over the
 * gradient-circle experiment) */
#page-topbar .btn-colorful {
    background: #E2265A;
    border: 0;
    transition: background .15s ease;
}
#page-topbar .btn-colorful:hover {
    background: #B71046;
}

/* --- notification badge counts on brand --- */
#page-topbar .noti-icon .badge {
    background: #E2265A;
    color: #fff;
}

/* --- dropdown panels opened FROM the bar stay light-surface: undo the
 *     light-text overrides inside them --- */
#page-topbar .dropdown-menu,
#page-topbar .dropdown-menu a,
#page-topbar .dropdown-menu i,
#page-topbar .dropdown-menu .text-dark {
    color: #495057 !important;
}
#page-topbar .dropdown-menu a:hover {
    color: #1E1A3B !important;
}

/* focus ring per the skill's accessibility note */
#page-topbar a:focus-visible,
#page-topbar button:focus-visible {
    outline: 2px solid #E2265A;
    outline-offset: 2px;
}

/* ptToast — status toast. TOP-CENTRE, just under the bar: in the
 * user's eye-line right where they were working, instead of the far
 * bottom corner nobody was looking at (Avi's call). */
.ptui-toast {
    position: fixed;
    top: 82px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 9000;
    background: #fff;
    color: #181425;
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 12px 32px -8px rgba(24, 20, 37, .22);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    max-width: 360px;
}
.ptui-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==================================================================
 * Structural components — values copied VERBATIM from the skill's
 * base.css topbar section, adapted to the app's existing element ids.
 * ================================================================== */

/* brand slot: the white product wordmark, vertically centred in the
 * bar (it was hugging the top edge). The theme centres logos with
 * line-height on .logo — useless for a flex child, so the ANCHOR
 * becomes the full-height flex container. width gets !important to
 * beat `.vertical-collpsed .navbar-brand-box{width:70px!important}`
 * now that collapsed is the default state. */
#page-topbar .ptui-brand-box {
    width: auto !important;
    background: transparent !important;
    box-shadow: none;
}
#page-topbar .ptui-brand-box .logo {
    display: flex;
    align-items: center;
    height: 70px;
    line-height: normal;
}
#page-topbar .ptui-brand-mark {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 16.5px;
    letter-spacing: .2px;
    white-space: nowrap;
    color: #fff;
}
#page-topbar .ptui-brand-mark img {
    display: block;
}

/* Sidebar burger: pinned to the bar's far-LEFT corner with absolute
 * positioning. NOTE: no position override on #page-topbar itself —
 * the theme's `position: fixed` IS the containing block for this
 * absolute child, and overriding it to relative broke the whole
 * bar's layout (the source of the logo-at-viewport-top glitch). */
#page-topbar #vertical-menu-btn {
    position: absolute !important;
    right: 10px; /* RIGHT corner (Avi's correction) — beside the sidebar it toggles */
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    color: rgba(255, 255, 255, .78) !important;
}
#page-topbar #vertical-menu-btn:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff !important;
}
/* keep the bar's real content (the logo, in RTL) clear of the pinned burger */
#page-topbar .navbar-header {
    padding-right: 52px;
}
#page-topbar .ptui-brand-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #E2265A;
    box-shadow: 0 0 0 4px rgba(226, 38, 90, .22);
    flex-shrink: 0;
}

/* search pill (.topbar-search) — wraps the app's live search input */
#page-topbar .ptui-search {
    flex: 1;
    max-width: 420px;
}
#page-topbar .ptui-search .position-relative {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 10px;
    padding: 0 14px;
    height: 38px;
    gap: 9px;
    transition: background .15s, border-color .15s;
}
#page-topbar .ptui-search .position-relative:hover,
#page-topbar .ptui-search .position-relative:focus-within {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .18);
}
#page-topbar .ptui-search .form-control {
    background: transparent;
    border: 0;
    height: 36px;
    color: #fff;
    font-size: 13.5px;
    box-shadow: none;
    padding: 0;
}
#page-topbar .ptui-search .form-control::placeholder {
    color: rgba(255, 255, 255, .55);
}
#page-topbar .ptui-search .bx-search-alt {
    position: static;
    line-height: 1;
    font-size: 16px;
    color: rgba(255, 255, 255, .55);
}

/* icon buttons take the .ticon geometry */
#page-topbar .header-item.noti-icon,
#page-topbar .noti-icon {
    border-radius: 10px;
    transition: background .15s, color .15s;
}
#page-topbar .header-item:hover,
#page-topbar .noti-icon:hover {
    background: rgba(255, 255, 255, .10);
}

/* quick-add "+" geometry: the 36px ticon-add square-round (reverted
 * from the circle experiment per Avi). Hardened: fixed box, centered
 * glyph, nothing inherits or leaks (the button warped when sibling
 * styles bled in). */
#page-topbar .btn-colorful {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-height: 36px;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
    overflow: hidden;
    box-shadow: none;
    vertical-align: middle;
}
#page-topbar .btn-colorful i {
    font-size: 22px;
    line-height: 1;
    margin: 0;
    vertical-align: middle;
}
/* the quick-add dropdown must be fully hidden while closed */
#page-topbar .ptui-add-menu:not(.show) {
    display: none !important;
}

/* --- footer: one compact line, hard-left (Avi), ALWAYS the last
 * element — flex column layout: the content area stretches, the
 * footer takes the leftover, and nothing scrolls past it (absolute
 * pinning left a dead band under it on long pages). --- */
#layout-wrapper .main-content {
    display: flex;
    flex-direction: column;
}
#layout-wrapper .main-content > .page-content {
    flex: 1 0 auto;
    padding-bottom: 24px !important;
}
.ptui-footer {
    position: static;
    margin-top: auto;
    height: auto !important;
    padding: 8px 12px !important;
}
.ptui-footer .ptui-footer-row {
    /* direction:ltr pins the whole cluster to the LEFT edge; Hebrew
     * text inside each span still renders correctly (bidi) */
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #6B6880;
}
.ptui-footer .f_social_icon a {
    margin: 0 2px;
}
/* short pages still reach the viewport bottom */
#layout-wrapper .main-content {
    min-height: calc(100vh - 70px);
}

/* the quick-add dropdown, redesign language: white card, soft radius,
 * two roomy rows with a tinted icon disc each */
.ptui-add-menu {
    border: 1px solid #E4E2EE;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(30, 26, 59, .14);
    padding: 6px;
    min-width: 210px;
    /* RTL: anchor the menu's right edge under the button so it opens
     * LEFTWARD into the page (the theme's -right class flips wrong) */
    right: 0 !important;
    left: auto !important;
}
.ptui-add-menu .ptui-add-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    color: #1E1A3B;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: background .12s ease;
}
.ptui-add-menu .ptui-add-item:hover {
    background: #F1F2F8;
    color: #1E1A3B;
}
.ptui-add-menu .ptui-add-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #FCE6ED;
    color: #E2265A;
    flex-shrink: 0;
}
.ptui-add-menu .ptui-add-ico i {
    font-size: 17px;
}

/* --- right-hand icon cluster: one shared centerline. The theme's
 * pb-1/pl-2 utility mix pushed each icon to its own height (Avi). --- */
#page-topbar .navbar-header > .d-flex {
    align-items: center;
}
#page-topbar .navbar-header a.noti-icon,
#page-topbar .navbar-header button.noti-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
}

/* user chip: avatar + name + chevron in one bordered pill */
#page-topbar .ptui-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s;
}
#page-topbar .ptui-user-chip:hover {
    background: rgba(255, 255, 255, .11);
}
#page-topbar .ptui-user-chip > span,
#page-topbar .ptui-user-chip i {
    color: #fff;
}
#page-topbar .ptui-avatar-sm {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* The theme demotes the COLLAPSED rail to position:absolute — which
 * made the icon rail scroll away with long pages the moment collapsed
 * became the default. Pin it back to the viewport like the expanded
 * state; the icon set is short enough to always fit. */
.vertical-collpsed .vertical-menu {
    position: fixed !important;
    top: 70px;
    bottom: 0;
}

/* Collapsed-rail flyout submenus: the theme's 190px clamp wrapped and
 * clipped long Hebrew labels. A fixed wider width just moved the
 * overflow (the longest item poked past 260px onto the rail) — so the
 * panel now sizes ITSELF to its longest one-line item, within sane
 * bounds. */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul {
    width: max-content !important;
    min-width: 220px;
    max-width: 400px;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    white-space: nowrap;
}
/* RTL nested flyout opens at the parent panel's far edge, whatever
 * width the parent resolved to */
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul li:hover > ul {
    right: 100%;
}

/* ==================================================================
 * Sidebar — matched to the topbar's navy (Avi's call): same #1E1A3B
 * ground, navy-2 for hover/active surfaces, so bar + rail read as one
 * continuous chrome. Applies in both expanded and collapsed states.
 * ================================================================== */
.vertical-menu,
#sidebar-menu,
body[data-sidebar="dark"] .vertical-menu,
body.vertical-collpsed[data-sidebar="dark"] .vertical-menu {
    background: #1E1A3B !important;
}
body[data-sidebar="dark"] #sidebar-menu ul li a {
    color: rgba(255, 255, 255, .70);
}
body[data-sidebar="dark"] #sidebar-menu ul li a i {
    color: rgba(255, 255, 255, .60);
}
body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover i {
    color: #fff;
    background: #2C2652;
}
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a,
body[data-sidebar="dark"] #sidebar-menu ul li a.active {
    color: #fff !important;
    background: #2C2652;
}
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a {
    color: rgba(255, 255, 255, .55);
}
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #fff;
}
/* collapsed rail's flyout keeps the same ground */
body.vertical-collpsed[data-sidebar="dark"] .vertical-menu #sidebar-menu > ul > li:hover > a,
body.vertical-collpsed[data-sidebar="dark"] .vertical-menu #sidebar-menu > ul > li:hover > ul {
    background: #2C2652;
    color: #fff;
}

/* ==================================================================
 * Breadcrumbs — the skill's .crumbs pattern applied to the existing
 * Bootstrap breadcrumb markup: flat on the canvas, small and faint,
 * current item ink-and-bold.
 * ================================================================== */
/* Specificity matched to the theme's `.page-title-box .breadcrumb`
 * (a bare .breadcrumb selector kept losing the tie) + !important on
 * the colors, which the app's global link color otherwise wins. */
.page-title-box .breadcrumb,
.breadcrumb {
    background: transparent !important;
    padding: 0;
    margin-bottom: 14px;
    font-size: 13px;
    align-items: center;
    gap: 2px;
}
.page-title-box .breadcrumb .breadcrumb-item,
.page-title-box .breadcrumb .breadcrumb-item a,
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    color: #9694A8 !important;
    font-weight: 400;
}
.page-title-box .breadcrumb .breadcrumb-item a:hover,
.breadcrumb .breadcrumb-item a:hover {
    color: #5C5872 !important;
}
.page-title-box .breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item.active {
    color: #181425 !important;
    font-weight: 600;
}
.page-title-box .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #9694A8 !important;
    opacity: .6;
}

/* the single-action variant of the quick-add is an <a class="link-float">
 * — the theme gives it a 50px radius, asymmetric padding and a gray
 * drop shadow (the "warped" look). Neutralized inside the bar. */
#page-topbar .link-float {
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* the theme forces body min-height:1200px when the sidebar is
 * collapsed (our default) — that WAS the lavender band under the
 * footer on every page shorter than 1200px. The collapsed rail is
 * position:fixed now, so the body needs no artificial height. */
body[data-sidebar=dark].vertical-collpsed {
    min-height: 0 !important;
}

/* the collapsed rail's flyout submenus must float ABOVE page cards —
 * they were clipped under the create-project form (Avi) */
.vertical-collpsed .vertical-menu {
    z-index: 1005 !important;
}

/* footer normalization (wizard + short pages): white strip with a top
 * border, the whole page column flexes so nothing renders after it */
#layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#layout-wrapper .main-content {
    flex: 1 0 auto;
}
.ptui-footer {
    background: #fff !important;
    border-top: 1px solid #E6E7F1;
}

/* footer normalized: white strip with a hairline top border, flush to
 * the very bottom — no colored bands around it (Avi, wizard pages) */
#layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#layout-wrapper .main-content {
    flex: 1 0 auto;
}
.ptui-footer {
    background: #fff !important;
    border-top: 1px solid #E6E7F1;
}
html, body { min-height: 100%; margin-bottom: 0 !important; padding-bottom: 0 !important; }