:root {
    --sidebar-bg: #f8f9fa;
    --sidebar-active: #e9ecef;
    --text-color: #495057;
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    
    /* TailAdmin图表颜色 */
    --chart-primary: #3C50E0;
    --chart-secondary: #80CAEE;
    --chart-tertiary: #FF9800;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    background-color: #f5f5f5;
}

/* 自定义样式，补充Tailwind无法直接实现的效果 */

/* 侧栏导航链接样式 */
.nav-link {
    @apply flex items-center gap-2 py-2 px-3 rounded-lg;
    transition: all 0.2s ease;
}

.nav-link.active {
    @apply bg-primary/10 text-primary font-medium;
}

.nav-link:hover:not(.active) {
    @apply bg-base-200;
}

/* 区域显示/隐藏 */
.section-hidden {
    display: none;
}

.section-active {
    display: block;
}

/* 实例状态标签 */
.status-badge {
    @apply badge text-xs font-medium;
}

.status-running {
    @apply badge-success;
}

.status-stopped {
    @apply badge-ghost;
}

.status-error {
    @apply badge-error;
}

/* Toast通知 */
.toast-notification {
    @apply alert shadow-lg mb-2 animate-fadeIn;
    animation-duration: 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation-name: fadeIn;
}

/* TailAdmin图表样式覆盖 */
.apexcharts-tooltip {
    @apply rounded-lg shadow-lg border-0 !bg-base-100;
}

.apexcharts-tooltip-title {
    @apply font-medium border-b border-base-300 !bg-transparent;
}

.apexcharts-legend-text {
    @apply !text-base-content;
}

.apexcharts-text tspan {
    @apply !text-base-content;
}

[data-theme='dark'] .apexcharts-gridline {
    @apply !stroke-gray-700;
}

/* 存储卷管理样式 */
.storage-usage-bar {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
}

.storage-usage-fill {
    @apply h-full rounded-full transition-all duration-300;
}

.storage-usage-low {
    @apply bg-success;
}

.storage-usage-medium {
    @apply bg-warning;
}

.storage-usage-high {
    @apply bg-error;
}

.volume-badge {
    @apply badge text-xs font-medium mr-1;
}

.volume-encrypted {
    @apply badge-primary;
}

.volume-backup {
    @apply badge-secondary;
}

/* 实例卡片样式优化 */
#instanceCardContainer .card {
    transition: all 0.2s ease;
    height: 100%;
}

#instanceCardContainer .card:hover {
    transform: translateY(-2px);
}

.instance-card {
    min-width: 0; /* 确保卡片可以缩小 */
    width: 100%;
    display: flex;
    flex-direction: column;
}

.instance-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.instance-info {
    overflow: hidden;
    flex-grow: 1;
}

/* 表格转卡片视图样式 */
#instanceTableCards .card {
    transition: all 0.2s ease;
}

#instanceTableCards .card:hover {
    transform: translateY(-2px);
}

#instanceTableCards .card-body {
    padding: 0.75rem 1rem;
}

#instanceTableCards .card-title {
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

#instanceTableCards .badge {
    margin-left: auto;
}

#instanceTableCards .card-actions {
    margin-top: 0.5rem;
}

/* 状态徽章样式增强 */
.badge .rounded-full {
    display: inline-block;
    margin-right: 4px;
}

/* 统计卡片式实例列表样式 */
.instance-stat-card {
    position: relative;
    transition: all 0.2s ease;
    overflow: visible;
}

.instance-stat-card:hover {
    transform: translateY(-2px);
}

.instance-stat-card .stat-title {
    margin-right: 20px; /* 为更多按钮留出空间 */
}

.instance-stat-card .stat-actions {
    display: flex;
    gap: 0.5rem;
}

.instance-stat-card .dropdown {
    opacity: 0.7;
}

.instance-stat-card:hover .dropdown {
    opacity: 1;
}

.instance-stat-card .stat-figure {
    opacity: 0.8;
}

/* 网络配置样式 */
.network-section .table {
    @apply table-zebra w-full;
}

.network-section .badge {
    @apply badge text-xs font-medium;
}

/* 移动端适配优化 */
@media (max-width: 640px) {
    .card-body {
        padding: 0.75rem;
    }
    
    .card-title {
        font-size: 0.9rem;
        max-width: 60%;
    }
    
    .badge {
        font-size: 0.65rem;
        height: 1.25rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .btn-xs {
        height: 1.5rem;
        min-height: 1.5rem;
        font-size: 0.65rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* 强制卡片网格为单列 */
    #instanceCardContainer {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    /* 调整下拉菜单位置 */
    .dropdown-top .dropdown-content {
        bottom: 100%;
        top: auto;
        margin-bottom: 4px;
    }
    
    /* 实例详情布局优化 */
    .instance-info > div {
        margin-bottom: 0.35rem;
    }
    
    /* 确保IP和ID可以截断 */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .card-body {
        padding: 0.75rem;
    }
    
    .card-title {
        font-size: 0.9rem;
        max-width: 60%;
    }
    
    .badge {
        font-size: 0.65rem;
        height: 1.25rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .btn-xs {
        height: 1.5rem;
        min-height: 1.5rem;
        font-size: 0.65rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* 强制卡片网格为单列 */
    #instanceCardContainer {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    /* 强制卡片整行显示 */
    .instance-card {
        grid-column: 1 / -1;
    }
    
    /* 调整下拉菜单位置 */
    .dropdown-top .dropdown-content {
        bottom: 100%;
        top: auto;
        margin-bottom: 4px;
    }
    
    /* 实例详情布局优化 */
    .instance-info > div {
        margin-bottom: 0.35rem;
    }
    
    /* 确保IP和ID可以截断 */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* 确保卡片高度一致且布局美观 */
@media (min-width: 769px) {
    .instance-card {
        min-height: 240px;
    }
    
    .instance-info {
        margin-bottom: auto;
    }
    
    .card-actions {
        margin-top: auto;
    }
}