/* ============================================================================
   PR 7 - topbar
   Per DOCS/ci3-theme-migration/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%,
        rgba(0, 229, 141, 0.0) 10%,
        rgba(0, 229, 141, 0.55) 30%,
        rgba(110, 231, 183, 0.85) 50%,
        rgba(38, 198, 218, 0.55) 70%,
        rgba(0, 229, 141, 0.0) 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;
}

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

/* 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;
}
body.theme-new .app-header__logo img {
    height: 32px;
    width: auto;
    display: block;
}
: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;
}