/* Jazzmin 自定义样式 */

/* 主色调 */
:root {
    --primary-color: #1a73e8;
    --secondary-color: #34a853;
    --accent-color: #fbbc04;
    --danger-color: #ea4335;
    --dark-color: #202124;
    --light-color: #f8f9fa;
}

/* Logo 样式优化 */
.brand-image {
    max-height: 45px !important;
    width: auto !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* 侧边栏美化 */
.main-sidebar {
    box-shadow: 2px 0 6px rgba(0,0,0,0.1) !important;
}

.nav-sidebar .nav-item > .nav-link {
    border-radius: 6px !important;
    margin: 2px 8px !important;
    transition: all 0.3s ease !important;
}

.nav-sidebar .nav-item > .nav-link:hover {
    background-color: rgba(255,255,255,0.1) !important;
    transform: translateX(4px) !important;
}

/* Remove the "gap" at the left edge for sidebar items (flush to sidebar) */
.main-sidebar .nav-sidebar .nav-item > .nav-link {
    margin-left: 0 !important;
    /* keep enough left padding for the icon pseudo-element defined in base_site.html */
    padding-left: 35px !important;
    margin-right: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.main-sidebar .nav-sidebar .nav-item > .nav-link:hover {
    transform: none !important; /* avoid shifting that creates visible left gap */
}

.nav-sidebar .nav-item.menu-open > .nav-link,
.nav-sidebar .nav-item:hover > .nav-link {
    background-color: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3) !important;
}

/* 卡片样式优化 */
.card {
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px) !important;
}

.card-header {
    background: linear-gradient(135deg, var(--primary-color), #4285f4) !important;
    color: white !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom: none !important;
    padding: 1rem 1.5rem !important;
}

.card-title {
    font-weight: 600 !important;
    margin: 0 !important;
}

/* 按钮美化 */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    padding: 0.5rem 1.2rem !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #4285f4) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3) !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4) !important;
}

.btn-success {
    background: linear-gradient(135deg, var(--secondary-color), #5fb85f) !important;
    border: none !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--accent-color), #f0ad4e) !important;
    border: none !important;
    color: #333 !important;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #d9534f) !important;
    border: none !important;
}

/* 表格美化 */
.table {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.table thead th {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    color: #495057 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--primary-color) !important;
    padding: 1rem 0.75rem !important;
}

.table tbody tr:hover {
    background-color: rgba(26, 115, 232, 0.05) !important;
    transform: scale(1.001) !important;
    transition: all 0.2s ease !important;
}

.table tbody td {
    padding: 0.875rem 0.75rem !important;
    vertical-align: middle !important;
}

/* 表单美化 */
.form-control {
    border-radius: 8px !important;
    border: 2px solid #e9ecef !important;
    transition: all 0.3s ease !important;
    padding: 0.75rem !important;
}

.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25) !important;
}

.form-group label {
    font-weight: 600 !important;
    color: #495057 !important;
    margin-bottom: 0.5rem !important;
}

/* 导航栏美化 */
.main-header .navbar {
    background: linear-gradient(135deg, var(--primary-color), #4285f4) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Remove left gap before hamburger icon */
.main-header .navbar {
    padding-left: 0 !important;
}
.main-header .navbar .navbar-nav {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.main-header .navbar .nav-link[data-widget="pushmenu"] {
    margin-left: 0 !important;
    padding-left: 12px !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,0.9) !important;
    transition: color 0.3s ease !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: white !important;
}

/* 页面标题美化 */
.content-header {
    background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
    border-radius: 8px !important;
    margin-bottom: 2rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.content-header h1 {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* 面包屑导航 */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--primary-color) !important;
}

.breadcrumb-item a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

.breadcrumb-item.active {
    color: #6c757d !important;
}

/* 状态标签美化 */
.badge {
    border-radius: 20px !important;
    padding: 0.4rem 0.8rem !important;
    font-weight: 500 !important;
}

/* 图标美化 */
.nav-icon {
    margin-right: 0.5rem !important;
    width: 1.2rem !important;
    text-align: center !important;
}

/* 搜索框美化 */
.form-control-navbar {
    border-radius: 20px !important;
    background-color: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
}

.form-control-navbar::placeholder {
    color: rgba(255,255,255,0.7) !important;
}

/* 响应式设计优化 */
@media (max-width: 768px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .chart-container {
        padding: 1rem;
    }
    
    .quick-actions {
        grid-template-columns: 1fr;
    }
}

/* 顶部导航栏语言切换器 */
.language-switcher-nav {
    position: fixed;
    top: 15px;
    right: 80px;
    z-index: 1050;
}

.language-dropdown {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: #fff;
    padding: 6px 30px 6px 12px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    min-width: 120px;
}

.language-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.language-dropdown option {
    background-color: #343a40;
    color: #fff;
    padding: 8px 12px;
}

/* 适配移动端 */
@media (max-width: 768px) {
    .language-switcher-nav {
        top: 10px;
        right: 50px;
    }
    
    .language-dropdown {
        font-size: 12px;
        padding: 4px 25px 4px 8px;
        min-width: 100px;
    }
}

/* 统一所有页面的布局优化 */
.content-wrapper {
    padding: 10px !important;
    margin: 0 !important;
    max-width: none !important;
}

/* 主内容区域优化 */
#content-main {
    padding: 0 !important;
    margin: 0 !important;
}

/* 减少容器边距 */
.main-content {
    padding: 10px !important;
}

/* 表格容器优化 */
.table-container {
    margin: 0 !important;
    border-radius: 8px !important;
}

/* 筛选区域优化 */
.filter-section {
    margin: 0 0 15px 0 !important;
    padding: 15px !important;
}

/* 批量操作工具栏优化 */
.bulk-actions {
    margin: 0 0 15px 0 !important;
    padding: 10px 15px !important;
}

/* 分页控件优化 */
.pagination {
    margin: 15px 0 0 0 !important;
    padding: 10px !important;
}

/* 详情页面优化 */
.detail-container {
    margin: 10px auto !important;
    padding: 0 10px !important;
    max-width: none !important;
}

.detail-section {
    margin-bottom: 15px !important;
}

.section-content {
    padding: 15px !important;
}

/* 覆盖Jazzmin默认的内容区域样式 */
.content {
    padding: 10px !important;
}

.content-header {
    padding: 0 0 10px 0 !important;
    margin: 0 !important;
}

/* 侧边栏和主内容的间距调整 */
@media (min-width: 992px) {
    .content-wrapper,
    .right-side {
        margin-left: 230px !important;
    }
}

/* 针对所有页面的通用布局优化 */
.main-wrapper,
.wrapper {
    padding-left: 0 !important;
}

/* 确保内容区域完全利用空间 */
.content-wrapper,
.right-side {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* SupabaseUser 页面专门的布局调整 */
body.dashboard-dashboard-supabaseuser .content-wrapper,
body[class*="supabaseuser"] .content-wrapper {
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
}

/* 移动端进一步优化 */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 5px !important;
        margin-left: 0 !important;
    }
    
    .filter-section,
    .bulk-actions,
    .detail-section {
        margin-bottom: 10px !important;
        padding: 10px !important;
    }
    
    .section-content {
        padding: 10px !important;
    }
    
    .detail-container {
        padding: 0 5px !important;
    }
}

/* 语言切换功能 */
.language-switcher-menu {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    margin-top: 5px !important;
    padding-top: 5px !important;
}

/* JavaScript for language switching */
<script>
function setLanguage(languageCode) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/i18n/setlang/';
    
    const csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = 'csrfmiddlewaretoken';
    csrfInput.value = document.querySelector('[name=csrfmiddlewaretoken]').value;
    
    const languageInput = document.createElement('input');
    languageInput.type = 'hidden';
    languageInput.name = 'language';
    languageInput.value = languageCode;
    
    form.appendChild(csrfInput);
    form.appendChild(languageInput);
    document.body.appendChild(form);
    form.submit();
}
</script>

/* 加载动画 */
.preloader {
    background: linear-gradient(135deg, var(--primary-color), #4285f4) !important;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px !important;
}

::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #0f5cb4 !important;
}

/* 登录页面美化 */
.login-page {
    background: linear-gradient(135deg, var(--primary-color), #4285f4) !important;
}

.login-box {
    box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
    border-radius: 16px !important;
}

/* 强制登录页面Logo大小控制 - 最高优先级 */
html body.login-page img[src*="logo"],
html body.login-page img[src*="Logo"], 
html body.login-page img[src*="LOGO"],
html body.login-page .navbar-brand img,
html body.login-page .brand-link img,
html body.login-page .brand-image,
body.login-page .card .navbar-brand img,
body.login-page .card img[src*="logo"],
body.login-page .login-logo img,
body.login-page .logo img {
    width: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
    height: auto !important;
    max-height: 80px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 针对登录卡片内的Logo - 更精确的选择器 */
body.login-page .card-body .text-center img,
body.login-page .login-box .card-body img,
body.login-page .login-card-body img {
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    max-height: 80px !important;
    margin: 0 auto 20px !important;
    display: block !important;
    border-radius: 50% !important;
}

/* 最强力的登录页面图片大小控制 - 覆盖任何可能的logo */
body.login-page img:not([class*="icon"]):not([class*="btn"]) {
    max-width: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
}

/* 特别针对可能的logo容器 */
body.login-page .text-center > img,
body.login-page .navbar > img,
body.login-page .brand > img,
body.login-page .header img,
body.login-page h1 img,
body.login-page h2 img {
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    max-height: 80px !important;
}

.card.card-outline.card-primary {
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

/* 仪表板卡片 */
.info-box {
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
}

.info-box:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

.info-box-icon {
    border-radius: 12px 0 0 12px !important;
}

/* 文件上传美化 */
.custom-file-label {
    border-radius: 8px !important;
}

.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25) !important;
}

/* ====================================================================== */
/* 正确的登录Logo大小控制 - 基于实际HTML结构 */
/* ====================================================================== */

/* 针对实际的登录logo结构: .login-box .login-logo */
.login-box .login-logo img,
.login-box .login-logo h1 img,
.login-box .login-logo picture img,
.login-logo img,
.login-logo h1 img,
.login-logo picture img {
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 覆盖任何可能的内联样式 */
.login-box img[style],
.login-box img[width],
.login-box img[height] {
    width: 80px !important;
    height: auto !important;
    max-width: 80px !important;
    max-height: 80px !important;
}

/* 最高权重的兜底方案 */
html body .login-box .login-logo img,
html body .login-logo img {
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    max-height: 80px !important;
    min-width: auto !important;
    min-height: auto !important;
}