/**
 * Header layout variants — scoped to body.header-layout-*
 */

/* ── Shared accent chip text/icons (all header layouts) ── */
body[class*="header-layout-"] .app-header-toolbar .theme-btn-bg,
body[class*="header-layout-"] .app-header-toolbar .theme-btn-bg:hover,
body[class*="header-layout-"] .app-header-toolbar .theme-btn-bg:focus,
body[class*="header-layout-"] .app-header-toolbar .theme-btn-bg:focus-visible,
body[class*="header-layout-"] .app-header-toolbar .theme-btn-bg:active,
body[class*="header-layout-"] .app-header-toolbar .pos-sale-btn,
body[class*="header-layout-"] .app-header-toolbar .pos-sale-btn:hover,
body[class*="header-layout-"] .app-header-toolbar .pos-sale-btn:focus,
body[class*="header-layout-"] .app-header-toolbar .pos-sale-btn:focus-visible,
body[class*="header-layout-"] .app-header-toolbar .pos-sale-btn:active,
body[class*="header-layout-"] .app-header-toolbar .app-header-user-menu,
body[class*="header-layout-"] .app-header-toolbar .app-header-user-menu:hover,
body[class*="header-layout-"] .app-header-toolbar .app-header-back-user,
body[class*="header-layout-"] .app-header-toolbar .app-header-back-user:hover,
body[class*="header-layout-"] .app-header-toolbar .subscription-badge,
body[class*="header-layout-"] .app-header-toolbar .subscription-badge:hover {
    color: var(--btn-text-on-filled, #ffffff) !important;
}

body[class*="header-layout-"] .app-header-toolbar .theme-btn-bg svg,
body[class*="header-layout-"] .app-header-toolbar .pos-sale-btn svg,
body[class*="header-layout-"] .app-header-toolbar .app-header-user-menu svg,
body[class*="header-layout-"] .app-header-toolbar .app-header-back-user svg {
    color: var(--btn-icon-on-filled, #ffffff) !important;
}

body[class*="header-layout-"] .app-header-toolbar .app-header-user-name,
body[class*="header-layout-"] .app-header-toolbar .app-header-pos-label,
body[class*="header-layout-"] .app-header-toolbar .app-header-date-short,
body[class*="header-layout-"] .app-header-toolbar .app-header-date-full,
body[class*="header-layout-"] .app-header-toolbar .app-header-back-user-label {
    color: var(--btn-text-on-filled, #ffffff) !important;
}

/* ── LAYOUT 1: Clean minimal ── */
body.header-layout-1 .app-header-toolbar {
    height: 56px;
    min-height: 56px;
    background: var(--bg-secondary);
    background-image: none;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

body.header-layout-1 .app-header-toolbar .app-header-chip,
body.header-layout-1 .app-header-toolbar summary.app-header-chip {
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

body.header-layout-1 .app-header-toolbar .theme-btn-bg {
    background: var(--accent-color);
    color: var(--btn-text-on-filled, #ffffff);
}

body.header-layout-1 .app-header-toolbar .pos-sale-btn,
body.header-layout-1 .app-header-toolbar .pos-sale-btn:hover,
body.header-layout-1 .app-header-toolbar .pos-sale-btn:focus,
body.header-layout-1 .app-header-toolbar .pos-sale-btn:focus-visible,
body.header-layout-1 .app-header-toolbar .pos-sale-btn:active {
    background: #16a34a;
    color: var(--btn-text-on-filled, #ffffff);
}

body.header-layout-1 .app-header-toolbar .pos-sale-btn:hover {
    background: #15803d;
}

body.header-layout-1 .app-header-toolbar .pos-sale-btn:active,
body.header-layout-1 .app-header-toolbar .pos-sale-btn:focus,
body.header-layout-1 .app-header-toolbar .pos-sale-btn:focus-visible {
    background: #166534;
}

body.header-layout-1 .app-header-toolbar .app-header-chip svg,
body.header-layout-1 .app-header-toolbar .app-header-icon-btn svg {
    color: inherit;
}

body.header-layout-1.dark-mode .app-header-toolbar {
    background: var(--bg-secondary);
}

body.header-layout-1 .app-header-left::after {
    content: attr(data-page-title);
    display: none;
}

@media (min-width: 768px) {
    body.header-layout-1 .app-header-left {
        gap: 0.75rem;
    }
}

/* ── LAYOUT 2: Modern elevated ── */
body.header-layout-2 {
    --app-header-height: 68px;
}

body.header-layout-2 .app-header-toolbar {
    height: 68px;
    min-height: 68px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--shadow-color);
    border-top: 3px solid var(--accent-color);
    background-image: none;
}

body.header-layout-2 .app-header-inner {
    max-width: 100%;
}

body.header-layout-2 .app-header-actions .label,
body.header-layout-2 .notifications-menu .label {
    animation: headerBadgePulse 2s ease-in-out infinite;
}

@keyframes headerBadgePulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, #ef4444 40%, transparent);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 4px transparent;
    }
}

body.header-layout-2 .app-header-toolbar .theme-btn-bg {
    border-radius: 9999px;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

body.header-layout-2.dark-mode .app-header-toolbar {
    background: var(--glass-bg);
}

/* Header layout 2 — centered search via grid on wide screens */
@media (min-width: 1280px) {
    body.header-layout-2 .app-header-row {
        display: grid;
        grid-template-columns: 1fr minmax(200px, 420px) 1fr;
        align-items: center;
    }

    body.header-layout-2 .app-header-left {
        justify-self: start;
    }

    body.header-layout-2 .app-header-actions {
        justify-self: end;
    }

    body.header-layout-2 .app-header-center-search {
        display: flex;
        justify-self: center;
        width: 100%;
        max-width: 420px;
    }

    body.header-layout-2 .app-header-center-search input {
        width: 100%;
        height: var(--app-header-control-h);
        border-radius: 9999px;
        border: 1px solid var(--border-color);
        background: var(--bg-primary);
        padding: 0 1rem 0 2.25rem;
        font-size: var(--app-header-control-font);
        color: var(--text-primary);
    }
}

body.header-layout-2 .app-header-center-search {
    display: none;
}

body:not(.header-layout-2) .app-header-center-search {
    display: none !important;
}

/* ── LAYOUT 3: Branded bar ── */
body.header-layout-3 {
    --app-header-height: 60px;
}

body.header-layout-3 .app-header-toolbar {
    height: 60px;
    min-height: 60px;
    background: var(--accent-color);
    background-image: none;
    border-bottom: none;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, #000 12%, transparent);
}

body.header-layout-3 .app-header-toolbar .app-header-chip:not(.theme-btn-bg):not(.pos-sale-btn):not(.app-header-user-menu):not(.app-header-back-user),
body.header-layout-3 .app-header-toolbar summary.app-header-chip:not(.theme-btn-bg) {
    color: #ffffff;
    background: color-mix(in srgb, #ffffff 18%, transparent);
    border: 1px solid color-mix(in srgb, #ffffff 28%, transparent);
    box-shadow: none;
}

body.header-layout-3 .app-header-toolbar .app-header-chip:not(.theme-btn-bg):not(.pos-sale-btn):not(.app-header-user-menu):not(.app-header-back-user) svg,
body.header-layout-3 .app-header-toolbar summary.app-header-chip:not(.theme-btn-bg) svg {
    color: #ffffff;
}

body.header-layout-3 .app-header-toolbar .theme-btn-bg,
body.header-layout-3 .app-header-toolbar .app-header-user-menu {
    background: #ffffff;
    color: var(--accent-on-light, var(--theme-700)) !important;
    border: none;
    box-shadow: 0 1px 3px color-mix(in srgb, #000 15%, transparent);
}

body.header-layout-3 .app-header-toolbar .pos-sale-btn {
    background: #16a34a;
    color: var(--btn-text-on-filled, #ffffff) !important;
    border: none;
    box-shadow: 0 1px 3px color-mix(in srgb, #000 15%, transparent);
}

body.header-layout-3 .app-header-toolbar .theme-btn-bg svg,
body.header-layout-3 .app-header-toolbar .app-header-user-menu svg {
    color: var(--accent-on-light, var(--theme-700)) !important;
}

body.header-layout-3 .app-header-toolbar .pos-sale-btn svg {
    color: var(--btn-icon-on-filled, #ffffff) !important;
}

body.header-layout-3 .app-header-toolbar .app-header-user-name,
body.header-layout-3 .app-header-toolbar .app-header-date-short,
body.header-layout-3 .app-header-toolbar .app-header-date-full {
    color: var(--accent-on-light, var(--theme-700)) !important;
}

body.header-layout-3 .app-header-toolbar .app-header-pos-label {
    color: var(--btn-text-on-filled, #ffffff) !important;
}

body.header-layout-3 .app-header-toolbar .app-header-back-user {
    background: color-mix(in srgb, #ef4444 90%, #000);
    border: 1px solid color-mix(in srgb, #ffffff 20%, transparent);
}

@media (min-width: 768px) {
    body.header-layout-3 .app-header-left {
        gap: 0.75rem;
    }
}

/* ── LAYOUT 4: Compact underline ── */
body.header-layout-4 {
    --app-header-height: 52px;
    --app-header-control-h: 1.875rem;
}

body.header-layout-4 .app-header-toolbar {
    height: 52px;
    min-height: 52px;
    background: var(--bg-secondary);
    background-image: none;
    border-bottom: 2px solid var(--accent-color);
    box-shadow: none;
}

body.header-layout-4 .app-header-toolbar .app-header-chip,
body.header-layout-4 .app-header-toolbar summary.app-header-chip {
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

body.header-layout-4 .app-header-toolbar .theme-btn-bg {
    background: var(--accent-color);
    color: var(--btn-text-on-filled, #ffffff);
}

body.header-layout-4 .app-header-toolbar .pos-sale-btn {
    background: #16a34a;
    color: var(--btn-text-on-filled, #ffffff);
}

body.header-layout-4 .app-header-toolbar .app-header-chip svg,
body.header-layout-4 .app-header-toolbar .app-header-icon-btn svg {
    color: inherit;
}

body.header-layout-4.dark-mode .app-header-toolbar {
    background: var(--bg-secondary);
}

@media (min-width: 768px) {
    body.header-layout-4 .app-header-left {
        gap: 0.625rem;
    }
}

/* ── LAYOUT 5: Soft gradient ── */
body.header-layout-5 {
    --app-header-height: 64px;
}

body.header-layout-5 .app-header-toolbar {
    height: 64px;
    min-height: 64px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-color) 12%, var(--bg-secondary)),
        var(--bg-secondary)
    );
    background-image: none;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.08)) 80%, transparent);
}

body.header-layout-5 .app-header-toolbar .app-header-chip,
body.header-layout-5 .app-header-toolbar summary.app-header-chip {
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: none;
    border-radius: 9999px;
}

body.header-layout-5 .app-header-toolbar .theme-btn-bg,
body.header-layout-5 .app-header-toolbar .pos-sale-btn {
    border-radius: 9999px;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

body.header-layout-5 .app-header-toolbar .theme-btn-bg {
    background: var(--accent-color);
    color: var(--btn-text-on-filled, #ffffff);
}

body.header-layout-5 .app-header-toolbar .pos-sale-btn {
    background: #16a34a;
    color: var(--btn-text-on-filled, #ffffff);
}

body.header-layout-5 .app-header-toolbar .app-header-user-menu {
    border-radius: 9999px;
}

body.header-layout-5 .app-header-toolbar .app-header-chip svg,
body.header-layout-5 .app-header-toolbar .app-header-icon-btn svg {
    color: inherit;
}

@media (min-width: 1024px) {
    body.header-layout-5 .app-header-actions {
        padding: 0.25rem 0.375rem;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 9999px;
        box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.06)) 60%, transparent);
    }
}

body.header-layout-5.dark-mode .app-header-toolbar {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-color) 18%, var(--bg-secondary)),
        var(--bg-secondary)
    );
}

.layout-dark-mode-toggle {
    display: inline-flex !important;
}

/* ── Shared admin header: tablet + mobile ── */
.app-header-toolbar {
    position: sticky;
    top: 0;
    z-index: 40;
    overflow: visible;
}

.app-header-inner,
.app-header-row {
    overflow: visible;
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.header-layout-1 .app-header-toolbar,
    body.header-layout-2 .app-header-toolbar,
    body.header-layout-3 .app-header-toolbar,
    body.header-layout-4 .app-header-toolbar,
    body.header-layout-5 .app-header-toolbar {
        height: var(--app-header-height);
        min-height: var(--app-header-height);
    }

    body.header-layout-1 .app-header-left,
    body.header-layout-4 .app-header-left {
        max-width: 40%;
    }

    body.header-layout-2 .app-header-left,
    body.header-layout-3 .app-header-left,
    body.header-layout-5 .app-header-left {
        max-width: 38%;
    }

    body.sidebar-mode-topbar .app-header-left {
        max-width: 35%;
    }

    body.sidebar-mode-topbar .topbar-nav {
        max-width: 100%;
        flex-shrink: 1;
    }
}

@media (max-width: 767px) {
    body.header-layout-2 .app-header-actions,
    body.header-layout-5 .app-header-actions {
        gap: 0.25rem;
    }

    body.header-layout-2 {
        --app-header-height: 56px;
    }

    body.header-layout-2 .app-header-toolbar {
        height: 56px;
        min-height: 56px;
    }

    body.header-layout-3 {
        --app-header-height: 56px;
    }

    body.header-layout-3 .app-header-toolbar {
        height: 56px;
        min-height: 56px;
    }

    body.header-layout-4 {
        --app-header-height: 48px;
        --app-header-control-h: 1.75rem;
    }

    body.header-layout-4 .app-header-toolbar {
        height: 48px;
        min-height: 48px;
    }

    body.header-layout-5 {
        --app-header-height: 56px;
    }

    body.header-layout-5 .app-header-toolbar {
        height: 56px;
        min-height: 56px;
    }

    body.header-layout-5 .app-header-actions {
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }
}