/* ============================================================================
   PR 7 - topbar
   Per DOCS/ci3-design-system/LAYOUT_RECONSTRUCTION_GUIDE.md § 5.2 + § 6.1.
   Scoped under body.theme-new so the legacy admin (flag off) is untouched.
   ============================================================================ */

/* Fixed top bar. Uses !important on the structural properties because
   the legacy style.css has #header rules at higher specificity and we
   keep id="header" on the new wrapper for backward compat with code
   that targets it (e.g. main.js querying `#header li.notifications-wrapper`). */
body.theme-new .app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    height: var(--header-height) !important;
    margin-left: 0 !important;
    background: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1030;
}

/* F.2 — Aurora strip beneath the header
   A thin 2px animated gradient that slowly drifts horizontally. Adds
   a subtle "alive" feel under the chrome without being distracting.
   Implemented as the .app-header's ::after so it tracks the header
   exactly and doesn't need its own element. */
body.theme-new .app-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--primary-color) 0%, transparent) 10%,
            color-mix(in srgb, var(--primary-color) 55%, transparent) 30%,
            color-mix(in srgb, var(--primary-300) 85%, transparent) 50%,
            color-mix(in srgb, var(--primary-color) 55%, transparent) 70%,
            color-mix(in srgb, var(--primary-color) 0%, transparent) 90%,
            transparent 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    animation: ppAurora 14s linear infinite;
    opacity: 0.7;
    pointer-events: none;
}

@keyframes ppAurora {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-new .app-header::after {
        animation: none;
        opacity: 0.5;
    }
}

body.theme-new .app-header__inner {
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

body.theme-new .app-header__left,
body.theme-new .app-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    height: 100%;
}

body.theme-new .app-header__right {
    margin-left: auto;
}

body.theme-new .app-header__center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
}

/* Legacy modules inject <li> directly into the header via hooks (e.g. hr_profile).
   They appear as orphan list items inside the flex container — suppress the marker. */
body.theme-new .app-header__right>li {
    list-style: none;
    display: inline-flex;
    align-items: center;
}

body.theme-new .app-header__right>li::marker {
    display: none;
}

/* Generic icon button */
body.theme-new .app-header__btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-main);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-speed) ease,
        color var(--transition-speed) ease;
    text-decoration: none;
    position: relative;
}

body.theme-new .app-header__btn:hover,
body.theme-new .app-header__btn:focus {
    background: var(--primary-tint);
    color: var(--primary-color);
    text-decoration: none;
}

body.theme-new .app-header__btn i {
    font-size: 16px;
}

/* Quick-create pill */
body.theme-new .app-header__quick {
    background: var(--primary-color);
    color: #fff;
    border-radius: 999px;
    width: 34px;
    height: 34px;
}

body.theme-new .app-header__quick:hover {
    background: var(--primary-700);
    color: #fff;
}

/* Logo */
body.theme-new .app-header__logo {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 100%;
}

body.theme-new .app-header__logo img {
    height: 100%;
    object-fit: contain;
}

:root[data-theme="dark"] body.theme-new .app-header__logo--light {
    display: none;
}

:root[data-theme="light"] body.theme-new .app-header__logo--dark {
    display: none;
}

/* If only one variant exists (no dark logo configured), .--dark is the
   shared image, so don't double-hide it. */
body.theme-new .app-header__logo--dark+.app-header__logo--light {
    /* both present - rules above pick which to show by theme */
}

/* Top search */
body.theme-new .app-header__search {
    position: relative;
    width: 100%;
    max-width: 420px;
}

body.theme-new .app-header__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

body.theme-new .app-header__search input[type="search"],
body.theme-new .app-header__search #search_input {
    width: 100%;
    height: 40px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-main);
    border-radius: 999px;
    padding: 0 16px 0 36px;
    font-size: 13.5px;
    outline: 0;
    box-shadow: none !important;
    transition: border-color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

body.theme-new .app-header__search input[type="search"]::placeholder {
    color: var(--input-placeholder);
}

body.theme-new .app-header__search input[type="search"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-focus) !important;
}

/* Bell-style icon button with badge */
body.theme-new .app-header__bell {
    position: relative;
}

body.theme-new .app-header__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: var(--danger-color);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--bg-header);
    line-height: 1;
}

body.theme-new .app-header__badge.hide {
    display: none;
}

/* Notifications inherit Perfex's existing markup; just make the outer
   <div> behave like a button. The notifications view renders its own
   anchor with an icon. */
body.theme-new .app-header__notif>a,
body.theme-new .app-header__notif>.dropdown>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--text-main);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition-speed) ease,
        color var(--transition-speed) ease;
}

body.theme-new .app-header__notif>a:hover,
body.theme-new .app-header__notif>.dropdown>a:hover {
    background: var(--primary-tint);
    color: var(--primary-color);
}

/* User pill */
body.theme-new .app-header__user-wrap {
    position: relative;
}

body.theme-new .app-header__user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: transparent;
    border: 0;
    color: var(--text-main);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-speed) ease;
}

body.theme-new .app-header__user:hover,
body.theme-new .app-header__user:focus {
    background: var(--primary-tint);
}

body.theme-new .app-header__avatar {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

body.theme-new .app-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

body.theme-new .app-header__status {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--success-color);
    border: 2px solid var(--bg-header);
}

body.theme-new .app-header__user-name {
    font-size: 13.5px;
    font-weight: 500;
}

body.theme-new .app-header__user-chevron {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 2px;
}

/* Header dropdown menus */
body.theme-new .app-dropdown,
body.theme-new .app-header__right .dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 6px;
    min-width: 220px;
    margin-top: 8px;
}

body.theme-new .app-dropdown>li>a,
body.theme-new .app-header__right .dropdown-menu>li>a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--text-main);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 13.5px;
}

body.theme-new .app-dropdown>li>a:hover,
body.theme-new .app-dropdown>li>a:focus,
body.theme-new .app-header__right .dropdown-menu>li>a:hover,
body.theme-new .app-header__right .dropdown-menu>li>a:focus {
    background: var(--primary-tint);
    color: var(--primary-color);
}

body.theme-new .app-dropdown>.divider,
body.theme-new .app-header__right .dropdown-menu>.divider {
    background: var(--border-soft);
    margin: 6px 0;
}

body.theme-new .app-dropdown>.dropdown-header,
body.theme-new .app-header__right .dropdown-menu>.dropdown-header {
    color: var(--text-muted);
    padding: 6px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Notifications panel — pinned right of its bell trigger so the 400 px
   panel doesn't slide past the right edge of the viewport, and the
   header row + each notification's title get breathing room for the
   per-row mark-as-read circle which sits in the top-right corner of
   the <li> via .pull-right. */
body.theme-new .app-header__notif .dropdown-menu.notifications {
    right: 0;
    left: auto;
    max-width: calc(100vw - 24px);
    padding: 0;
}

body.theme-new .app-header__notif .dropdown-menu.notifications>.notification-wrapper .notification-box {
    padding-right: 36px;
}

body.theme-new .app-header__notif .dropdown-menu.notifications>.notification-wrapper>.not-mark-as-read-inline {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
}

body.theme-new .app-header__notif .dropdown-menu.notifications .notification-title {
    display: block;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Mobile breakpoint */
@media (max-width: 991.98px) {
    body.theme-new .app-header {
        height: var(--header-height-mobile) !important;
    }

    body.theme-new .app-header__inner {
        padding: 0 12px;
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    body.theme-new .app-header__inner::-webkit-scrollbar {
        display: none;
    }

    body.theme-new .app-header__center {
        display: none;
    }

    body.theme-new .app-header__user-name,
    body.theme-new .app-header__user-chevron {
        display: none;
    }

    body.theme-new .app-header__left {
        gap: 8px;
    }

    body.theme-new .app-header__right {
        gap: 6px;
    }
}

/* Extra small mobile (e.g. iPhone SE 375px) */
@media (max-width: 575.98px) {
    body.theme-new .app-header__inner {
        padding: 0 6px;
        gap: 4px;
    }

    body.theme-new .app-header__left {
        gap: 4px;
    }

    body.theme-new .app-header__right {
        gap: 2px;
    }

    body.theme-new .app-header__btn {
        width: 32px;
        height: 32px;
    }

    body.theme-new .app-header__btn i {
        font-size: 14px;
    }

    body.theme-new .theme-switch {
        --ts-w: 40px;
        --ts-h: 22px;
        --ts-knob: 18px;
        margin: 0 2px;
    }

    body.theme-new .app-header__logo img {
        height: 26px;
    }

    body.theme-new .app-header__user {
        padding: 2px;
    }

    body.theme-new .app-header__avatar img {
        width: 28px;
        height: 28px;
    }
}

/* ===================================================================
   THEME SWITCH - sun/moon animated toggle
   Per LAYOUT_RECONSTRUCTION_GUIDE.md § 6.1
   =================================================================== */

body.theme-new .theme-switch {
    --ts-w: 52px;
    --ts-h: 26px;
    --ts-knob: 22px;
    --ts-pad: 2px;
    --ts-travel: calc(var(--ts-w) - var(--ts-knob) - (var(--ts-pad) * 2));

    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--ts-w);
    height: var(--ts-h);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 4px;
}

body.theme-new .theme-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Track - daytime sky */
body.theme-new .theme-switch__slider {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, #87CEEB 0%, #B0E0FF 50%, #7EC8E3 100%);
    transition: background 0.5s ease, box-shadow 0.5s ease;
    overflow: hidden;
}

body.theme-new .theme-switch:hover .theme-switch__slider {
    box-shadow: 0 0 0 3px var(--primary-focus);
}

/* Cloud decorations (light) */
body.theme-new .theme-switch__slider::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow:
        5px 3px 0 0 rgba(255, 255, 255, 0.4),
        -3px 5px 0 0 rgba(255, 255, 255, 0.3);
    transition: opacity 0.4s ease, transform 0.4s ease,
        background 0.4s ease, box-shadow 0.4s ease,
        width 0.4s, height 0.4s, top 0.4s, right 0.4s, left 0.4s,
        border-radius 0.4s;
}

/* Knob (sun by default) */
body.theme-new .theme-switch__slider::after {
    content: "";
    position: absolute;
    top: var(--ts-pad);
    left: var(--ts-pad);
    width: var(--ts-knob);
    height: var(--ts-knob);
    border-radius: 50%;
    background: linear-gradient(145deg, #FFD93D, #F59E0B);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.45);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.5s ease,
        box-shadow 0.5s ease;
    z-index: 3;
}

/* Icons - sit on top of the knob */
body.theme-new .theme-switch__icon {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;
    z-index: 4;
    transition: transform 0.5s ease, opacity 0.4s ease;
}

body.theme-new .theme-switch__icon--sun {
    opacity: 1;
    transform: translateY(-50%) rotate(0) scale(1);
}

body.theme-new .theme-switch__icon--moon {
    opacity: 0;
    transform: translateY(-50%) rotate(-45deg) scale(0.4);
}

/* ===== Dark mode (input checked) ===== */
body.theme-new .theme-switch input:checked+.theme-switch__slider {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c1222 100%);
}

/* Clouds -> stars */
body.theme-new .theme-switch input:checked+.theme-switch__slider::before {
    width: 3px;
    height: 3px;
    top: 7px;
    right: auto;
    left: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow:
        6px -2px 0 0 rgba(255, 255, 255, 0.55),
        12px 4px 0 -1px rgba(255, 255, 255, 0.35),
        3px 6px 0 -1px rgba(255, 255, 255, 0.65);
}

/* Knob slides + turns silver/purple (moon) */
body.theme-new .theme-switch input:checked+.theme-switch__slider::after {
    transform: translateX(var(--ts-travel));
    background: linear-gradient(145deg, #e2e8f0, #c4b5fd);
    box-shadow: 0 0 12px rgba(196, 181, 253, 0.55);
}

/* Icons swap */
body.theme-new .theme-switch input:checked+.theme-switch__slider .theme-switch__icon--sun {
    opacity: 0;
    transform: translateY(-50%) rotate(180deg) scale(0);
}

body.theme-new .theme-switch input:checked+.theme-switch__slider .theme-switch__icon--moon {
    opacity: 1;
    transform: translateY(-50%) translateX(var(--ts-travel)) rotate(0) scale(1);
}

/* Idle animations */
@keyframes ts-ray-spin {
    from {
        transform: translateY(-50%) rotate(0) scale(1);
    }

    to {
        transform: translateY(-50%) rotate(360deg) scale(1);
    }
}

body.theme-new .theme-switch:hover .theme-switch__icon--sun {
    animation: ts-ray-spin 6s linear infinite;
}

@keyframes ts-moon-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(196, 181, 253, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(196, 181, 253, 0.7));
    }
}

body.theme-new .theme-switch input:checked+.theme-switch__slider .theme-switch__icon--moon {
    animation: ts-moon-glow 3s ease-in-out infinite;
}

/* Reduced motion - kill the idle loops, keep the slide */
@media (prefers-reduced-motion: reduce) {

    body.theme-new .theme-switch:hover .theme-switch__icon--sun,
    body.theme-new .theme-switch input:checked+.theme-switch__slider .theme-switch__icon--moon {
        animation: none;
    }

    body.theme-new .theme-switch__slider,
    body.theme-new .theme-switch__slider::after,
    body.theme-new .theme-switch__slider::before,
    body.theme-new .theme-switch__icon {
        transition: none !important;
    }
}

/* ===================================================================
   PR 7 D.1 - SVG legibility patch for header icons.
   Modules that hook admin_navbar_start/_end may emit SVGs with no
   fill/stroke attribute (e.g. prchat #chat_status_top_icon) - default
   to a light currentColor fill so they're readable on the dark header.
   =================================================================== */
body.theme-new .app-header svg,
body.theme-new .app-header i,
body.theme-new .app-header li,
body.theme-new .app-header li>a {
    color: var(--text-main);
}

/* prchat status icon - status-driven colors */
body.theme-new .app-header svg#chat_status_top_icon,
body.theme-new .app-header svg.online,
body.theme-new .app-header svg.away,
body.theme-new .app-header svg.busy,
body.theme-new .app-header svg.offline {
    fill: currentColor !important;
    color: var(--text-main);
}

body.theme-new .app-header svg#chat_status_top_icon.online,
body.theme-new .app-header svg.online {
    color: var(--success-color);
}

body.theme-new .app-header svg#chat_status_top_icon.away,
body.theme-new .app-header svg.away {
    color: var(--warning-color);
}

body.theme-new .app-header svg#chat_status_top_icon.busy,
body.theme-new .app-header svg.busy {
    color: var(--danger-color);
}

body.theme-new .app-header svg#chat_status_top_icon.offline,
body.theme-new .app-header svg.offline {
    color: var(--text-muted);
}

/* Heroicons-style SVGs (no fill on svg, no stroke on path) - default
   to stroke=currentColor + fill=none so they paint at all. */
body.theme-new .app-header svg:not([fill]) path:not([fill]):not([stroke]) {
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

/* ===================================================================
   F.7 - Theme switch click ripple
   theme-toggle.js spawns a <span class="theme-switch__ripple
   theme-switch__ripple--{dark|light}"> inside the label at the click
   point. CSS scales it from 0 → big and fades out over ~600 ms,
   colored to match the destination theme (gold for light/sun, silver
   for dark/moon).
   =================================================================== */
body.theme-new .theme-switch {
    overflow: visible !important;
    /* let the ripple paint outside the pill */
}

body.theme-new .theme-switch__ripple {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 5;
    animation: ppSwitchRipple 600ms var(--ease-out-soft) forwards;
}

body.theme-new .theme-switch__ripple--light {
    background: radial-gradient(circle,
            rgba(255, 215, 87, 0.55) 0%,
            rgba(245, 158, 11, 0.35) 40%,
            rgba(245, 158, 11, 0) 70%);
}

body.theme-new .theme-switch__ripple--dark {
    background: radial-gradient(circle,
            rgba(226, 232, 240, 0.45) 0%,
            rgba(196, 181, 253, 0.35) 40%,
            rgba(196, 181, 253, 0) 70%);
}

@keyframes ppSwitchRipple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    60% {
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(40);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-new .theme-switch__ripple {
        animation: none !important;
        display: none !important;
    }
}

/* ===================================================================
   F.8.3 - Bell notifications icon normalization
   Perfex's notifications.php wraps the bell SVG in
     <span class="sm:tw-rounded-md sm:tw-border sm:tw-border-solid
                  sm:tw-border-neutral-200/60 sm:tw-inline-flex
                  sm:tw-items-center sm:tw-justify-center sm:tw-h-8
                  sm:tw-w-9 sm:-tw-mt-1.5 ...">
   That puts a 32x36 rectangle with a light-gray border + negative
   margin around the bell, which looks boxy next to our circular
   .app-header__btn icons. Replace with the same shape used elsewhere.
   =================================================================== */
body.theme-new .app-header__notif .notifications-icon,
body.theme-new .app-header__notif>a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--text-main) !important;
    text-decoration: none !important;
    border-radius: var(--radius-sm) !important;
    transition: background var(--transition-speed) var(--ease-standard),
        color var(--transition-speed) var(--ease-standard);
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}

body.theme-new .app-header__notif .notifications-icon>span,
body.theme-new .app-header__notif>a>span {
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    transition: background var(--transition-speed) var(--ease-standard);
}

body.theme-new .app-header__notif .notifications-icon:hover,
body.theme-new .app-header__notif .notifications-icon:focus,
body.theme-new .app-header__notif .notifications-icon:hover>span,
body.theme-new .app-header__notif>a:hover,
body.theme-new .app-header__notif>a:focus,
body.theme-new .app-header__notif>a:hover>span {
    background: var(--primary-tint) !important;
    color: var(--primary-color) !important;
}

body.theme-new .app-header__notif .notifications-icon svg,
body.theme-new .app-header__notif>a svg {
    width: 18px !important;
    height: 18px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none;
}

/* Red count badge on top-right corner of the bell */
body.theme-new .app-header__notif .icon-notifications,
body.theme-new .app-header__notif>a>span>.icon-notifications {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    left: auto !important;
    min-width: 18px;
    height: 18px;
    background: var(--danger-color) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700;
    border: 2px solid var(--bg-header) !important;
    line-height: 1;
    padding: 0 4px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

/* ============================================================================
   device-assets bridge — legacy #header specificity override.
   This project's base assets/css/style.min.css styles #header at id-level
   specificity (1,0,0):
     #header{background:#fff;height:63px;margin-left:230px;position:relative;z-index:99;...}
   An id selector beats the theme's class-scoped `body.theme-new .app-header`
   for every property the theme doesn't force with !important — notably z-index
   (legacy 99 vs theme 1030), display and the legacy 230px sidebar offset — so the
   header falls back to the legacy "floating" look. The new header is
   <header id="header" class="app-header">, so we re-assert the theme header at id
   specificity (body.theme-new #header → 1,1,0 > legacy 1,0,0). No !important arms
   race needed. The source project (crm-layout-v1) has no such #header rules — this
   block is device-assets-specific.
   ============================================================================ */
body.theme-new #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: var(--header-height);
    margin: 0;
    padding: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-header);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1030;
    display: block;
}

@media (max-width: 991.98px) {
    body.theme-new #header {
        height: var(--header-height-mobile);
    }
}

/* ============================================================================
   device-assets bridge — sidebar search magnifier overlap.
   The theme intends the search input to have left padding (32px) that clears
   the absolutely-positioned magnifier (left:10px). On this install a base/global
   input rule overrides that padding, so the magnifier lands on top of the
   "Search" placeholder. Re-assert the search layout at id-level specificity +
   !important so it wins regardless of the base rule. Kept here in _topbar.css
   (device-assets-local) so menu_setup / menu-pin bundle updates to _sidebar.css
   don't overwrite it.
   ============================================================================ */
body.theme-new #sidebar .app-sidebar__search {
    position: relative;
}

body.theme-new #sidebar .app-sidebar__search>i {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    z-index: 1;
}

body.theme-new #sidebar input#sidebar-search-input {
    padding-left: 34px !important;
}