/* ========================================================
   HeyRoute 风格自适应品牌栏与侧边栏 (完美适配浅色/深色模式)
   ======================================================== */

/* 1. 顶部品牌栏：对标 HeyRoute (32px Logo + 16px 标题) */
div[class*="system-brand"],
aside header,
aside > div:first-child,
[role="dialog"] header {
    min-height: 52px !important;
}

div[class*="system-brand"] a,
aside a:has(img),
[role="dialog"] a:has(img) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Logo 尺寸与圆角 */
div[class*="system-brand"] div:has(> img),
div[class*="system-brand"] div[class*="size-"],
aside a div:has(img),
[data-sidebar] a div:has(img),
[role="dialog"] a div:has(img) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 1px rgba(125, 125, 125, 0.2) !important;
}

div[class*="system-brand"] img,
aside a:first-child img,
[data-sidebar] a:first-child img,
[role="dialog"] a:first-child img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

/* 品牌文字通用 */
div[class*="system-brand"] span[class*="truncate"],
div[class*="system-brand"] a span,
aside a:first-child span,
[data-sidebar] a:first-child span,
[role="dialog"] a:first-child span {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    max-width: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 彻底隐藏版本号标签和更新按钮 */
div[class*="system-brand"] button,
div[class*="system-brand"] span[class*="font-mono"],
div[class*="system-brand"] a ~ button,
aside button[title*="版本"],
aside button[title*="version"],
aside button[title*="System updates"],
aside button[title*="系统更新"],
aside [class*="text-xs"][class*="font-mono"],
[role="dialog"] [class*="text-xs"][class*="font-mono"] {
    display: none !important;
}

/* 2. 侧边栏通用规范（高度与圆角） */
aside nav a,
[data-sidebar] nav a,
[role="dialog"] nav a,
[data-sidebar="menu-button"] {
    border-radius: 8px !important;
    height: 38px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

aside [data-sidebar="group-label"],
aside h4,
[role="dialog"] [data-sidebar="group-label"],
[role="dialog"] h4 {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding-top: 14px !important;
    padding-bottom: 6px !important;
}

/* ========================================================
   深色模式 (Dark Mode) 配色方案
   ======================================================== */
.dark div[class*="system-brand"] a span,
.dark aside a:first-child span,
.dark [role="dialog"] a:first-child span {
    color: #f4f4f5 !important;
}

.dark aside [data-sidebar="group-label"],
.dark aside h4,
.dark [role="dialog"] [data-sidebar="group-label"],
.dark [role="dialog"] h4 {
    color: #71717a !important;
}

.dark aside nav a,
.dark [data-sidebar] nav a,
.dark [role="dialog"] nav a {
    color: #d4d4d8 !important;
}

.dark aside nav a[data-status="active"],
.dark aside nav a.active,
.dark [data-sidebar] nav a[data-status="active"],
.dark [role="dialog"] nav a[data-status="active"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.dark aside nav a:hover:not([data-status="active"]),
.dark [role="dialog"] nav a:hover:not([data-status="active"]) {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #f4f4f5 !important;
}

/* ========================================================
   浅色模式 (Light Mode，手机 Safari 默认) 配色方案
   ======================================================== */
html:not(.dark) div[class*="system-brand"] a span,
html:not(.dark) aside a:first-child span,
html:not(.dark) [role="dialog"] a:first-child span {
    color: #09090b !important;
}

html:not(.dark) aside [data-sidebar="group-label"],
html:not(.dark) aside h4,
html:not(.dark) [role="dialog"] [data-sidebar="group-label"],
html:not(.dark) [role="dialog"] h4 {
    color: #71717a !important;
}

html:not(.dark) aside nav a,
html:not(.dark) [data-sidebar] nav a,
html:not(.dark) [role="dialog"] nav a {
    color: #18181b !important;
}

html:not(.dark) aside nav a[data-status="active"],
html:not(.dark) aside nav a.active,
html:not(.dark) [data-sidebar] nav a[data-status="active"],
html:not(.dark) [role="dialog"] nav a[data-status="active"] {
    background: rgba(0, 0, 0, 0.07) !important;
    color: #09090b !important;
    font-weight: 600 !important;
}

html:not(.dark) aside nav a:hover:not([data-status="active"]),
html:not(.dark) [role="dialog"] nav a:hover:not([data-status="active"]) {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #09090b !important;
}