/**
 * Shell component overrides — maps tokens to Flux / app hooks.
 *
 * Hooks used:
 *   data-app-sidebar, data-app-sidebar-brand*, data-app-sidebar-nav*
 *   data-app-sidebar-collapse*, data-app-user-menu*
 *   data-flux-sidebar, data-flux-sidebar-item, data-flux-header
 *   data-flux-sidebar-backdrop, data-flux-tooltip-content
 *   data-dashboard-main, data-flux-main
 *   data-app-footer, data-app-footer-nav, data-app-footer-link
 */

/* ── Page canvas ─────────────────────────────────────────── */

body.min-h-screen {
    background-color: var(--app-shell-bg) !important;
}

/* ── Sidebar panel ───────────────────────────────────────── */

[data-app-sidebar],
[data-flux-sidebar] {
    background-color: var(--app-shell-sidebar-bg) !important;
    border-color: var(--app-shell-sidebar-border) !important;
    width: var(--app-sidebar-expanded-width);
}

html[data-app-sidebar-collapsed="true"] [data-app-sidebar],
.app-sidebar-collapsed [data-app-sidebar] {
    width: var(--app-sidebar-collapsed-width);
}

/* ── Brand ───────────────────────────────────────────────── */

[data-app-sidebar-brand-label] {
    color: var(--app-shell-brand-text);
}

[data-app-sidebar-brand-mark] {
    background-color: var(--color-accent-content) !important;
    color: var(--color-accent-foreground) !important;
    border-radius: var(--radius-md);
}

[data-app-sidebar-brand-mark]:has([data-app-sidebar-brand-logo]) {
    aspect-ratio: auto;
    width: auto;
    height: auto;
    background-color: transparent !important;
    border-radius: 0;
}

[data-app-sidebar-brand-logo] {
    display: block;
    height: 2rem;
    width: auto;
    max-width: 100%;
}

/* ── Primary nav ─────────────────────────────────────────── */

[data-app-sidebar-nav] [data-flux-sidebar-item] {
    border-radius: var(--app-shell-nav-radius) !important;
    color: var(--app-shell-nav-text) !important;
    border-color: transparent !important;
}

[data-app-sidebar-nav] [data-flux-sidebar-item]:hover {
    color: var(--app-shell-nav-text-hover) !important;
    background-color: var(--app-shell-nav-bg-hover) !important;
}

[data-app-sidebar-nav] [data-flux-sidebar-item][data-current] {
    color: var(--app-shell-nav-current-text) !important;
    background-color: var(--app-shell-nav-current-bg) !important;
    border: 1px solid transparent !important;
    box-shadow: var(--app-shell-nav-current-shadow);
}

[data-app-sidebar-nav] [data-flux-sidebar-item][data-current]:hover {
    color: var(--app-shell-nav-current-text) !important;
}

[data-app-sidebar-nav] .sidebar-nav-label {
    font-weight: 500;
}

/* Unread notifications — app.css paints the prefix icon via
   --app-sidebar-notification-icon-color (blue); remap to nav tones. */
[data-app-sidebar-notifications-unread],
:where(.dark, .dark *) [data-app-sidebar-notifications-unread] {
    --app-sidebar-notification-icon-color: var(--app-shell-nav-text);
}

[data-app-sidebar-notifications-unread]:hover,
:where(.dark, .dark *) [data-app-sidebar-notifications-unread]:hover {
    --app-sidebar-notification-icon-color: var(--app-shell-nav-text-hover);
    background-color: var(--app-shell-notification-highlight-bg-hover) !important;
}

[data-app-sidebar-notifications-unread][data-current],
[data-app-sidebar-notifications-unread][data-current]:hover,
:where(.dark, .dark *) [data-app-sidebar-notifications-unread][data-current],
:where(.dark, .dark *) [data-app-sidebar-notifications-unread][data-current]:hover {
    --app-sidebar-notification-icon-color: var(--app-shell-nav-current-text);
}

[data-app-sidebar-notifications-unread] > .relative > [data-flux-icon] {
    color: var(--app-shell-nav-text) !important;
}

[data-app-sidebar-notifications-unread]:hover > .relative > [data-flux-icon] {
    color: var(--app-shell-nav-text-hover) !important;
}

[data-app-sidebar-notifications-unread][data-current] > .relative > [data-flux-icon],
[data-app-sidebar-notifications-unread][data-current]:hover > .relative > [data-flux-icon] {
    color: var(--app-shell-nav-current-text) !important;
}

[data-app-sidebar-notifications-unread] [data-flux-icon] ~ .absolute .rounded-full,
[data-app-sidebar-notifications-unread] .absolute .rounded-full {
    background-color: var(--app-shell-nav-badge-bg) !important;
}

/* Sidebar count badges — perfect circle (ponytail: 1.25rem fits digits 1–9) */
[data-flux-navlist-badge]:not([data-app-navlist-label]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    max-width: 1.25rem !important;
    height: 1.25rem !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    color: var(--app-shell-nav-badge-text) !important;
    background-color: var(--app-shell-nav-badge-bg) !important;
}

/* Sidebar text labels (e.g. Admin) — rounded pill, light gray */
[data-flux-navlist-badge][data-app-navlist-label] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 0.125rem 0.25rem !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;
    color: var(--app-shell-nav-label-text) !important;
    background-color: var(--app-shell-nav-label-bg) !important;
}

/* Collapsed sidebar tooltips */
[data-app-sidebar-nav] [data-flux-tooltip-content] {
    color: var(--app-shell-tooltip-text) !important;
    background-color: var(--app-shell-tooltip-bg) !important;
}

/* ── Sidebar user profile ────────────────────────────────── */

[data-app-sidebar-user-menu] [data-flux-sidebar-profile] {
    border-radius: var(--app-shell-nav-radius);
}

[data-app-sidebar-user-menu] [data-flux-sidebar-profile]:hover {
    background-color: var(--app-shell-profile-bg-hover) !important;
}

[data-app-sidebar-user-menu] [data-flux-sidebar-profile] span {
    color: var(--app-shell-text-muted) !important;
}

[data-app-sidebar-user-menu] [data-flux-sidebar-profile]:hover span {
    color: var(--app-shell-text) !important;
}

[data-app-sidebar-user-menu] [data-flux-avatar],
[data-app-user-menu] [data-flux-avatar] {
    background-color: var(--app-shell-avatar-bg) !important;
    color: var(--app-shell-avatar-text) !important;
}

/* ── Collapse control ────────────────────────────────────── */

[data-app-sidebar-collapse-control] {
    color: var(--app-shell-collapse-text) !important;
}

[data-app-sidebar-collapse-control]:hover {
    color: var(--app-shell-collapse-text-hover) !important;
}

[data-app-sidebar-collapse-tooltip] {
    background-color: var(--app-shell-tooltip-bg) !important;
    color: var(--app-shell-tooltip-text) !important;
}

[data-app-sidebar-collapse-pipe] {
    color: var(--app-shell-collapse-text) !important;
}

[data-app-sidebar-collapse-control]:hover [data-app-sidebar-collapse-pipe] {
    color: var(--app-shell-collapse-text-hover) !important;
}

/* ── Mobile header ───────────────────────────────────────── */

[data-flux-header] {
    min-height: var(--app-shell-header-min-height);
    background-color: var(--app-shell-header-bg);
}

[data-flux-header] [data-flux-button],
[data-app-sidebar] [data-app-sidebar-close] {
    color: var(--app-shell-icon-button-text) !important;
    border-radius: var(--app-shell-nav-radius) !important;
}

[data-flux-header] [data-flux-button]:hover,
[data-app-sidebar] [data-app-sidebar-close]:hover {
    color: var(--app-shell-icon-button-text-hover) !important;
    background-color: var(--app-shell-icon-button-bg-hover) !important;
}

/* ── User menu dropdown ──────────────────────────────────── */

[data-app-user-menu-content],
[data-app-user-menu-content][data-flux-menu] {
    background-color: var(--app-shell-menu-bg) !important;
    border-color: var(--app-shell-menu-border) !important;
    border-radius: var(--app-shell-nav-radius) !important;
}

[data-app-user-menu] [data-flux-profile]:hover {
    background-color: var(--app-shell-profile-bg-hover) !important;
}

[data-app-user-menu-content] [data-flux-heading] {
    color: var(--app-shell-menu-item-text) !important;
}

[data-app-user-menu-content] [data-flux-text] {
    color: var(--app-shell-menu-muted-text) !important;
}

[data-app-user-menu-content] [data-flux-menu-item],
[data-app-user-menu-content] button[data-flux-menu-item] {
    color: var(--app-shell-menu-item-text) !important;
    border-radius: var(--radius-md) !important;
}

[data-app-user-menu-content] [data-flux-menu-item][data-active],
[data-app-user-menu-content] [data-flux-menu-item]:hover,
[data-app-user-menu-content] button[data-flux-menu-item]:hover {
    background-color: var(--app-shell-menu-item-bg-hover) !important;
}

[data-app-sidebar-collapse-control]:focus-visible {
    outline: 2px solid var(--app-shell-focus-ring);
    outline-offset: 2px;
}

[data-app-sidebar-nav] [data-flux-sidebar-item]:focus-visible {
    outline: 2px solid var(--app-shell-focus-ring);
    outline-offset: 1px;
}

/* ── Mobile sidebar backdrop ─────────────────────────────── */

[data-flux-sidebar-backdrop] {
    background-color: var(--app-shell-backdrop) !important;
}

/* ── Main content area ───────────────────────────────────── */

[data-dashboard-main],
[data-flux-main] {
    background-color: var(--app-shell-main-bg) !important;
    padding: var(--app-shell-main-padding);
}

@media (min-width: 1024px) {
    [data-dashboard-main],
    [data-flux-main] {
        padding: var(--app-shell-main-padding-lg);
    }
}

/* ── App footer (Flux grid-area:footer — shell bottom row) ─ */

[data-app-footer] {
    padding-top: var(--app-shell-footer-padding-top);
    padding-bottom: var(--app-shell-footer-padding-bottom);
    border-top: 1px solid var(--app-shell-footer-border);
    background-color: var(--app-shell-main-bg) !important;
}

[data-app-footer-nav] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-shell-footer-gap);
    font-size: 0.75rem;
    line-height: 1.25rem;
}

[data-app-footer-link] {
    color: var(--app-shell-footer-link-text);
    text-decoration: none;
}

[data-app-footer-link]:hover {
    color: var(--app-shell-footer-link-text-hover);
    text-decoration: underline;
}

[data-app-footer-link]:focus-visible {
    outline: 2px solid var(--app-shell-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

[data-app-footer-link="website"] {
    font-weight: 500;
    color: var(--app-shell-footer-website-text) !important;
    padding-right: 1.25rem;
    border-right: 1px solid var(--app-shell-footer-border);
    margin-right: 0.25rem;
}

[data-app-footer-link="website"]:hover {
    color: var(--app-shell-footer-website-text-hover) !important;
}