/*
 * KOS silver iOS/macOS theme
 *
 * This file is deliberately presentation-only. It does not change routes,
 * permissions, API calls, menu data, dynamic components, or interaction code.
 * Remove its link from index.html to restore the original appearance.
 */

:root {
    --kos-ios-blue: #007aff;
    --kos-ios-label: #1d1d1f;
    --kos-ios-secondary-label: #65676d;
    --kos-ios-tertiary-label: #8e8e93;
    --kos-ios-canvas: #f5f5f7;
    --kos-ios-sidebar: rgba(246, 247, 249, 0.94);
    --kos-ios-separator: rgba(60, 60, 67, 0.13);
    --kos-ios-selection: rgba(0, 122, 255, 0.10);
    --kos-ios-hover: rgba(60, 60, 67, 0.055);
}

html,
body,
#app {
    background: var(--kos-ios-canvas);
    color: var(--kos-ios-label);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
        "Helvetica Neue", Arial, sans-serif;
}

/* Main sidebar shell */
#app .n-layout-sider {
    background: var(--kos-ios-sidebar) !important;
    border-right: 1px solid var(--kos-ios-separator) !important;
    box-shadow: 1px 0 12px rgba(0, 0, 0, 0.025);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
}

#app .n-layout-sider .nav-bg {
    background: transparent !important;
}

#app .n-layout-sider .title {
    color: var(--kos-ios-label) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
        "Helvetica Neue", Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

/* Naive UI menu theme variables are normally written inline by the component.
 * !important is intentional here so this standalone override remains reversible.
 */
#app .n-layout-sider .n-menu {
    --n-color: transparent !important;
    --n-item-font-size: 13px !important;
    --n-item-height: 38px !important;
    --n-item-text-color: var(--kos-ios-secondary-label) !important;
    --n-item-text-color-hover: var(--kos-ios-label) !important;
    --n-item-text-color-active: var(--kos-ios-blue) !important;
    --n-item-text-color-active-hover: var(--kos-ios-blue) !important;
    --n-item-text-color-child-active: var(--kos-ios-blue) !important;
    --n-item-text-color-child-active-hover: var(--kos-ios-blue) !important;
    --n-item-icon-color: var(--kos-ios-tertiary-label) !important;
    --n-item-icon-color-hover: var(--kos-ios-label) !important;
    --n-item-icon-color-active: var(--kos-ios-blue) !important;
    --n-item-icon-color-active-hover: var(--kos-ios-blue) !important;
    --n-item-icon-color-child-active: var(--kos-ios-blue) !important;
    --n-item-icon-color-child-active-hover: var(--kos-ios-blue) !important;
    --n-item-icon-color-collapsed: var(--kos-ios-tertiary-label) !important;
    --n-item-color-hover: var(--kos-ios-hover) !important;
    --n-item-color-active: var(--kos-ios-selection) !important;
    --n-item-color-active-hover: rgba(0, 122, 255, 0.13) !important;
    --n-item-color-active-collapsed: var(--kos-ios-selection) !important;
    --n-arrow-color: var(--kos-ios-tertiary-label) !important;
    --n-arrow-color-hover: var(--kos-ios-label) !important;
    --n-arrow-color-active: var(--kos-ios-blue) !important;
    --n-arrow-color-active-hover: var(--kos-ios-blue) !important;
}

#app .n-layout-sider .n-menu-item-content {
    margin: 3px 9px;
    border-radius: 9px;
    transition: color 160ms ease, background-color 160ms ease;
}

#app .n-layout-sider .n-menu-item-content::before {
    border-radius: 9px !important;
}

#app .n-layout-sider .n-menu-item-content--selected {
    font-weight: 600;
}

/* Compact, neutral collapse control */
#app .n-layout-sider .n-layout-toggle-button {
    color: #6e6e73 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--kos-ios-separator) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

#app .n-layout-sider .n-layout-toggle-button:hover {
    color: var(--kos-ios-blue) !important;
    background: #ffffff !important;
}

/* App chrome: silver canvas and restrained macOS-style separators */
#app .bg-lightgray,
#app .router-view-content {
    background-color: var(--kos-ios-canvas) !important;
}

#app .n-layout-header.h-16 {
    background: rgba(255, 255, 255, 0.90) !important;
    border-bottom: 1px solid var(--kos-ios-separator);
    box-shadow: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

#app .n-layout-header.h-12 {
    border-bottom: 1px solid rgba(60, 60, 67, 0.08);
}

/* Keep keyboard navigation visible after removing the dark theme. */
#app .n-layout-sider :focus-visible {
    outline: 2px solid rgba(0, 122, 255, 0.45);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    #app .n-layout-sider .n-menu-item-content {
        transition: none;
    }
}