/* ================================================
   FileBrowser 标准UI + 福步汽车轻量品牌定制
   目标：保持原生界面整洁，只做必要品牌植入
   ================================================ */

/* ============ 1. 主题色统一 ============ */
:root {
    --blue: #1976d2;
    --primaryColor: #1976d2;
    --hoverColor: rgba(25, 118, 210, 0.08);
}

a, .action i, .icon {
    color: var(--primaryColor) !important;
}

.button {
    background: var(--primaryColor) !important;
}

.button--flat {
    background: transparent !important;
    color: var(--primaryColor) !important;
}

/* ============ 2. Header 顶栏 ============ */
header {
    background: linear-gradient(90deg, #1565c0 0%, #1976d2 50%, #1e88e5 100%) !important;
    box-shadow: 0 2px 6px rgba(21,101,192,0.2) !important;
}

header img {
    content: url("/branding/logo.jpg") !important;
    border-radius: 4px;
    max-height: 2em !important;
    width: auto;
    margin-right: 0.6em !important;
}

/* 公司名 — logo 右侧水平显示 */
header title::after {
    content: "福步汽车部件有限公司 · 雨云服务器云盘";
    color: rgba(255,255,255,0.9);
    font-size: 0.8em;
    font-weight: 500;
    margin-left: 0.5em;
    white-space: nowrap;
}

header .action i {
    color: rgba(255,255,255,0.85) !important;
}

/* ============ 3. 搜索框（保持原生设计，仅微调） ============ */
#search:not(.active) #input {
    background: rgba(255,255,255,0.12) !important;
    border-radius: 4px !important;
}

#search:not(.active) #input input {
    color: #ffffff !important;
}

#search:not(.active) #input input::placeholder {
    color: rgba(255,255,255,0.6) !important;
}

#search:not(.active) #input i {
    color: rgba(255,255,255,0.75) !important;
}

/* 激活态保持原生全屏搜索，仅做颜色统一 */
#search.active {
    background: rgba(245,247,250,0.98) !important;
}

#search.active #input {
    border-bottom-color: #e0e7ef !important;
}

#search.active #input input {
    color: #263238 !important;
}

#search.active #input i {
    color: #546e7a !important;
}

#search #result ul li a {
    color: #263238 !important;
}

#search #result ul li a i {
    color: var(--primaryColor) !important;
}

/* ============ 4. 登录页品牌化 ============ */
#login {
    background: linear-gradient(135deg, #e3f2fd 0%, #f5f7fa 100%) !important;
}

#login img {
    content: url("/branding/logo.jpg") !important;
    border-radius: 8px;
    max-width: 5em !important;
    max-height: 5em !important;
    width: auto !important;
    height: auto !important;
    box-shadow: 0 4px 12px rgba(21,101,192,0.15);
}

#login h1 {
    color: #1565c0 !important;
}

#login h1::after {
    content: "福步汽车部件有限公司 · 雨云服务器云盘";
    display: block;
    text-align: center;
    margin-top: 0.4em;
    font-size: 0.42em;
    font-weight: 500;
    color: #546e7a;
    letter-spacing: 1px;
}

#login form {
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    border-radius: 12px !important;
}

#login .button {
    background: #1976d2 !important;
    border-radius: 6px !important;
}

/* ============ 5. 文件列表 ============ */
#listing.list .item:hover {
    background: var(--hoverColor) !important;
}

#listing .item[aria-selected="true"] {
    border-left-color: var(--primaryColor) !important;
    background: var(--hoverColor) !important;
}

#listing .item .name {
    color: #263238 !important;
}

/* ============ 6. 右侧按钮区保护（防挤压） ============ */
header > div:last-child {
    flex-shrink: 0 !important;
}

/* ============ 7. 响应式精简 ============ */
@media (max-width: 1024px) {
    header title::after {
        font-size: 0.7em;
        letter-spacing: 0.3px;
    }
}

@media (max-width: 900px) {
    header title::after {
        content: "福步汽车 · 雨云服务";
    }
}

@media (max-width: 736px) {
    header title::after {
        display: none !important;
    }
}