/* 琥珀云端口映射系统 - 自定义样式 */

/* 自定义 Primary 颜色（替代 Tailwind CDN 的动态配置） */
.bg-primary-50 { background-color: #eff6ff; }
.bg-primary-100 { background-color: #dbeafe; }
.bg-primary-200 { background-color: #bfdbfe; }
.bg-primary-300 { background-color: #93c5fd; }
.bg-primary-400 { background-color: #60a5fa; }
.bg-primary-500 { background-color: #3b82f6; }
.bg-primary-600 { background-color: #2563eb; }
.bg-primary-700 { background-color: #1d4ed8; }
.bg-primary-800 { background-color: #1e40af; }
.bg-primary-900 { background-color: #1e3a8a; }

.text-primary-50 { color: #eff6ff; }
.text-primary-100 { color: #dbeafe; }
.text-primary-200 { color: #bfdbfe; }
.text-primary-300 { color: #93c5fd; }
.text-primary-400 { color: #60a5fa; }
.text-primary-500 { color: #3b82f6; }
.text-primary-600 { color: #2563eb; }
.text-primary-700 { color: #1d4ed8; }
.text-primary-800 { color: #1e40af; }
.text-primary-900 { color: #1e3a8a; }

.border-primary-500 { border-color: #3b82f6; }
.border-primary-600 { border-color: #2563eb; }

.hover\:bg-primary-700:hover { background-color: #1d4ed8; }

/* 侧边栏颜色 */
.sidebar-bg { background-color: #1e293b; }
.sidebar-hover:hover { background-color: #334155; }
.sidebar-active { background-color: #3b82f6; }

/* 侧边栏滚动条 */
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #475569; border-radius: 2px; }

/* 页面切换动画 */
.page-enter-active, .page-leave-active { transition: opacity 0.2s ease; }
.page-enter-from, .page-leave-to { opacity: 0; }

/* 表格行悬浮效果 */
.table-row-hover:hover { background-color: #f8fafc; }

/* 紧凑表格：列数较多的管理表格（隧道/客户端）用更小字号与更紧间距，缓解横向积压 */
/* table.compact-table td 选择器优先级高于 Tailwind 的 .text-sm/.px-4 单类，可稳定覆盖 */
table.compact-table th,
table.compact-table td {
    font-size: 12px;
    padding: 7px 8px;
}

/* 状态指示灯 */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.status-dot.offline { background: #9ca3af; }
.status-dot.running { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.status-dot.stopped { background: #f59e0b; }
.status-dot.error { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); }

/* 统计卡片 */
.stat-card { transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

/* 模态框遮罩 */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-content {
    background: white; border-radius: 12px; padding: 24px;
    max-width: 640px; width: 90%; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

/* 表单输入框统一样式 */
.form-input {
    width: 100%; padding: 8px 12px; border: 1px solid #d1d5db;
    border-radius: 6px; font-size: 14px; transition: border-color 0.2s;
}
.form-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }

/* 提示文字 */
.form-hint { font-size: 12px; color: #6b7280; margin-top: 4px; }

/* 标签颜色 */
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.tag-tcp { background: #dbeafe; color: #1d4ed8; }
.tag-udp { background: #fef3c7; color: #92400e; }
.tag-http { background: #d1fae5; color: #065f46; }
.tag-https { background: #ede9fe; color: #5b21b6; }
.tag-running { background: #d1fae5; color: #065f46; }
.tag-stopped { background: #f3f4f6; color: #6b7280; }
.tag-error { background: #fee2e2; color: #991b1b; }
.tag-info { background: #e0e7ff; color: #3730a3; }
.tag-admin { background: #fef3c7; color: #92400e; }
.tag-user { background: #dbeafe; color: #1d4ed8; }
.tag-success { background: #d1fae5; color: #065f46; }
.tag-failed { background: #fee2e2; color: #991b1b; }
.tag-timeout { background: #fef3c7; color: #92400e; }

/* 折叠面板（使用指南FAQ） */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary ~ * { animation: slideDown 0.2s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* 加载动画 */
.loading-spinner {
    width: 40px; height: 40px; border: 3px solid #e5e7eb;
    border-top-color: #3b82f6; border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 通知消息 */
.toast { position: fixed; top: 20px; right: 20px; z-index: 100; padding: 12px 20px; border-radius: 8px; color: white; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: opacity 0.3s; }
.toast-success { background: #22c55e; }
.toast-error { background: #ef4444; }
.toast-warning { background: #f59e0b; }