/* ============================================================
   YouLaWu 后台管理 - 左侧大分类图标导航栏
   版本：V3.98 · 2026-09-06（重构：bucket = 服务端 session 驱动）
   ============================================================ */

/* ---------- 1. 容器 ---------- */
.ylw-icon-rail {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    z-index: 40;
    width: 64px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 16px;
    gap: 10px;
    background: #111827;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
    color: #e5e7eb;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 2. 品牌小图标 ---------- */
.ylw-rail-brand {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.ylw-rail-brand-link {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
    transition: transform 0.15s ease;
}
.ylw-rail-brand-link:hover {
    transform: translateY(-1px);
    color: #fff;
}

/* ---------- 3. 列表 ---------- */
.ylw-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.ylw-rail-list::-webkit-scrollbar {
    width: 4px;
}
.ylw-rail-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}

/* ---------- 4. bucket 按钮（兼容 <a>） ---------- */
.ylw-rail-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: #9ca3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.ylw-rail-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f9fafb;
}
.ylw-rail-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}
.ylw-rail-btn.is-active {
    background: #4f46e5;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.45);
}
.ylw-rail-btn.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: #4f46e5;
}
.ylw-rail-icon {
    width: 22px;
    height: 22px;
}

/* ---------- 5. Tooltip ---------- */
.ylw-rail-tooltip {
    position: absolute;
    inset-inline-start: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(17, 24, 39, 0.95);
    color: #f9fafb;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 60;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.ylw-rail-btn:hover .ylw-rail-tooltip,
.ylw-rail-btn:focus-visible .ylw-rail-tooltip {
    opacity: 1;
    transform: translate(4px, -50%);
}

/* ---------- 6. 用户菜单（V3.97.5） ---------- */
.ylw-rail-user {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ylw-rail-user-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.ylw-rail-user-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
.ylw-rail-user-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}
.ylw-rail-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
    text-transform: uppercase;
}
.ylw-rail-user-tooltip {
    position: absolute;
    inset-inline-start: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(17, 24, 39, 0.95);
    color: #f9fafb;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 60;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.ylw-rail-user-btn:hover .ylw-rail-user-tooltip,
.ylw-rail-user-btn:focus-visible .ylw-rail-user-tooltip {
    opacity: 1;
    transform: translate(4px, -50%);
}

/* ---------- 7. 页面布局让位（V3.98.1 修复） ----------
   关键：不能依赖 body.ylw-rail-on class —— Livewire SPA morph 会
   用服务端 HTML 重置 body class（服务端 body 从不带该 class），
   导致点击任意链接后让位失效、sidebar 被 rail 遮挡呈"空白"。
   改用 body:has(.ylw-icon-rail) 纯 CSS 结构选择器：
   只要 rail 元素在 DOM 里（renderHook 每次都渲染），规则就生效，
   与 body class / JS / SPA morph 完全无关。
   同时保留 body.ylw-rail-on 作为旧浏览器兜底（JS 会补加）。
*/
@media (min-width: 1024px) {
    /* 隐藏 Filament topbar（V3.97.5 用户要求，用户菜单已移到 rail 底部） */
    body:has(.ylw-icon-rail) .fi-topbar,
    body.ylw-rail-on .fi-topbar {
        display: none !important;
    }
    /* 隐藏 Filament sidebar brand header（V3.97.6） */
    body:has(.ylw-icon-rail) .fi-sidebar-header,
    body.ylw-rail-on .fi-sidebar-header {
        display: none !important;
    }
    /* sidebar 放在 rail 右侧 */
    body:has(.ylw-icon-rail) .fi-layout,
    body.ylw-rail-on .fi-layout {
        padding-inline-start: 64px !important;
        overflow-x: clip !important;
    }
    body:has(.ylw-icon-rail) .fi-sidebar,
    body.ylw-rail-on .fi-sidebar {
        inset-inline-start: 64px !important;
        width: var(--sidebar-width, 16rem) !important;
    }
    body:has(.ylw-icon-rail) .fi-main-ctn,
    body:has(.ylw-icon-rail) .fi-main,
    body.ylw-rail-on .fi-main-ctn,
    body.ylw-rail-on .fi-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* 表格 / 筛选 form 容器：防止横向溢出滚动条 track 错位 */
    body:has(.ylw-icon-rail) .fi-ta-ctn,
    body:has(.ylw-icon-rail) .fi-section,
    body:has(.ylw-icon-rail) .fi-ta-filters form,
    body:has(.ylw-icon-rail) .fi-ta-content,
    body.ylw-rail-on .fi-ta-ctn,
    body.ylw-rail-on .fi-section,
    body.ylw-rail-on .fi-ta-filters form,
    body.ylw-rail-on .fi-ta-content {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    body:has(.ylw-icon-rail) .fi-ta-filters form select,
    body:has(.ylw-icon-rail) .fi-ta-filters form [data-field-wrapper] select,
    body.ylw-rail-on .fi-ta-filters form select,
    body.ylw-rail-on .fi-ta-filters form [data-field-wrapper] select {
        max-width: 220px !important;
        min-width: 0 !important;
    }
    body:has(.ylw-icon-rail) .fi-ta-filters form > *,
    body:has(.ylw-icon-rail) .fi-ta-filters form [data-field-wrapper],
    body.ylw-rail-on .fi-ta-filters form > *,
    body.ylw-rail-on .fi-ta-filters form [data-field-wrapper] {
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
}

/* ---------- 8. 移动端不显示 rail ---------- */
@media (max-width: 1023.98px) {
    .ylw-icon-rail {
        display: none;
    }
}