/**
 * 矿物分享平台 - 公共主题样式
 * 包含：按钮、文字工具类、标签、状态指示器等
 */

/* ========== 按钮基础样式 ========== */
.btn-primary {
    background: #00e36e;
    color: #1a1a2b;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 227, 110, 0.2);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 227, 110, 0.3);
    background: #00c45f;
    color: #ffffff;
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 227, 110, 0.2);
}

.btn-outline {
    background: transparent;
    color: #00e36e;
    border: 1px solid #00e36e;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-outline:hover {
    background: #00e36e;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 227, 110, 0.3);
}
.btn-outline:active {
    transform: translateY(0);
}

/* 次要按钮 */
.btn-secondary {
    background: #95a5a6;
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(149, 165, 166, 0.2);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-secondary:hover {
    background: #7f8c8d;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(149, 165, 166, 0.3);
    color: #ffffff;
}
.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(149, 165, 166, 0.2);
}

/* 危险按钮 */
.btn-danger {
    background: #e74c3c;
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-danger:hover {
    background: #c0392b;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
    color: #ffffff;
}
.btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
}

/* 警告按钮 */
.btn-warning {
    background: #f39c12;
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(243, 156, 18, 0.2);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-warning:hover {
    background: #e67e22;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(243, 156, 18, 0.3);
    color: #ffffff;
}
.btn-warning:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(243, 156, 18, 0.2);
}

/* 信息按钮 */
.btn-info {
    background: #3498db;
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-info:hover {
    background: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
    color: #ffffff;
}
.btn-info:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

/* 成功按钮 */
.btn-success {
    background: #27ae60;
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(39, 174, 96, 0.2);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-success:hover {
    background: #229954;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3);
    color: #ffffff;
}
.btn-success:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(39, 174, 96, 0.2);
}

/* 深色按钮 */
.btn-dark {
    background: #2c3e50;
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(44, 62, 80, 0.2);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-dark:hover {
    background: #34495e;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(44, 62, 80, 0.3);
    color: #ffffff;
}
.btn-dark:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(44, 62, 80, 0.2);
}

/* 浅色按钮 */
.btn-light {
    background: #ecf0f1;
    color: #2c3e50;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(236, 240, 241, 0.2);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-light:hover {
    background: #bdc3c7;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(236, 240, 241, 0.3);
    color: #2c3e50;
}
.btn-light:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(236, 240, 241, 0.2);
}

/* 链接按钮 */
.btn-link {
    background: transparent;
    color: #00e36e;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    text-decoration: underline;
    display: inline-block;
    text-align: center;
}
.btn-link:hover {
    color: #00c45f;
    text-decoration: none;
    background: rgba(0, 227, 110, 0.1);
}
.btn-link:active {
    transform: translateY(0);
}

/* ========== 轮廓按钮变体 ========== */
.btn-outline-secondary {
    background: transparent;
    color: #95a5a6;
    border: 1px solid #95a5a6;
}
.btn-outline-secondary:hover {
    background: #95a5a6;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(149, 165, 166, 0.3);
}

.btn-outline-danger {
    background: transparent;
    color: #e74c3c;
    border: 1px solid #e74c3c;
}
.btn-outline-danger:hover {
    background: #e74c3c;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}

.btn-outline-warning {
    background: transparent;
    color: #f39c12;
    border: 1px solid #f39c12;
}
.btn-outline-warning:hover {
    background: #f39c12;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(243, 156, 18, 0.3);
}

.btn-outline-info {
    background: transparent;
    color: #3498db;
    border: 1px solid #3498db;
}
.btn-outline-info:hover {
    background: #3498db;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

/* ========== 渐变按钮 ========== */
.btn-gradient-primary {
    background: linear-gradient(135deg, #00e36e 0%, #00c45f 100%);
    color: #ffffff;
    border: none;
}
.btn-gradient-primary:hover {
    background: linear-gradient(135deg, #00c45f 0%, #00a34d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 227, 110, 0.3);
}

.btn-gradient-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #ffffff;
    border: none;
}
.btn-gradient-danger:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}

/* ========== 按钮尺寸 ========== */
.btn-sm {
    padding: 8px 16px;
    font-size: 12px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.btn-xl {
    padding: 20px 40px;
    font-size: 18px;
}

/* ========== 按钮布局 ========== */
.btn-block {
    display: block;
    width: 100%;
}

.btn-circle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    font-size: 12px;
}
.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    font-size: 16px;
}

/* 按钮组 */
.btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.btn-group .btn {
    flex: 1;
    min-width: 120px;
}

.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.btn-group-vertical .btn {
    width: 100%;
}

/* ========== 按钮状态 ========== */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== 文字颜色 ========== */
.text-primary { color: #00e36e; }
.text-secondary { color: #95a5a6; }
.text-danger { color: #e74c3c; }
.text-warning { color: #f39c12; }
.text-info { color: #3498db; }
.text-success { color: #27ae60; }
.text-dark { color: #2c3e50; }
.text-light { color: #ecf0f1; }
.text-muted { color: #7f8c8d; }
.text-white { color: #ffffff; }

/* ========== 背景颜色 ========== */
.bg-primary { background-color: #00e36e; color: #1a1a2b; }
.bg-secondary { background-color: #95a5a6; color: #ffffff; }
.bg-danger { background-color: #e74c3c; color: #ffffff; }
.bg-warning { background-color: #f39c12; color: #ffffff; }
.bg-info { background-color: #3498db; color: #ffffff; }
.bg-success { background-color: #27ae60; color: #ffffff; }
.bg-dark { background-color: #2c3e50; color: #ffffff; }
.bg-light { background-color: #ecf0f1; color: #2c3e50; }

/* ========== 文字样式 ========== */
.text-bold { font-weight: bold; }
.text-semibold { font-weight: 600; }
.text-normal { font-weight: normal; }
.text-italic { font-style: italic; }
.text-underline { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/* ========== 文字大小 ========== */
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-base { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 18px; }
.text-2xl { font-size: 20px; }
.text-3xl { font-size: 24px; }
.text-4xl { font-size: 28px; }
.text-5xl { font-size: 32px; }

/* ========== 文字对齐 ========== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ========== 文字特殊效果 ========== */
.text-shadow { text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.text-shadow-sm { text-shadow: 1px 1px 1px rgba(0,0,0,0.2); }
.text-shadow-lg { text-shadow: 2px 2px 4px rgba(0,0,0,0.4); }
.text-shadow-none { text-shadow: none; }

.text-highlight {
    background: linear-gradient(120deg, #ffd700 0%, #ffd700 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 60%;
    padding: 2px 4px;
}

.text-highlight-primary {
    background: linear-gradient(120deg, rgba(0, 227, 110, 0.3) 0%, rgba(0, 227, 110, 0.3) 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 60%;
    padding: 2px 4px;
}

.text-highlight-danger {
    background: linear-gradient(120deg, rgba(231, 76, 60, 0.3) 0%, rgba(231, 76, 60, 0.3) 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 60%;
    padding: 2px 4px;
}

/* ========== 渐变文字 ========== */
.text-gradient-primary {
    background: linear-gradient(135deg, #00e36e, #00c45f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-info {
    background: linear-gradient(135deg, #3498db, #2980b9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== 发光文字 ========== */
.text-glow {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

.text-glow-primary {
    color: #00e36e;
    text-shadow: 0 0 10px #00e36e, 0 0 20px #00e36e;
}

.text-glow-danger {
    color: #e74c3c;
    text-shadow: 0 0 10px #e74c3c, 0 0 20px #e74c3c;
}

/* ========== 标签样式 ========== */
.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-primary { background-color: #00e36e; color: #000000; }
.badge-secondary { background-color: #95a5a6; color: #ffffff; }
.badge-danger { background-color: #e74c3c; color: #ffffff; }
.badge-warning { background-color: #f39c12; color: #ffffff; }
.badge-info { background-color: #3498db; color: #ffffff; }
.badge-success { background-color: #27ae60; color: #ffffff; }
.badge-dark { background-color: #2c3e50; color: #ffffff; }
.badge-light { background-color: #ecf0f1; color: #2c3e50; }

.badge-outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

/* ========== 状态指示器 ========== */
.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-online { background-color: #27ae60; }
.status-offline { background-color: #95a5a6; }
.status-busy { background-color: #f39c12; }
.status-away { background-color: #e74c3c; }

/* ========== 优先级标签 ========== */
.priority-high { color: #e74c3c; font-weight: bold; }
.priority-medium { color: #f39c12; font-weight: bold; }
.priority-low { color: #27ae60; font-weight: bold; }
.priority-normal { color: #3498db; font-weight: bold; }

/* ========== 搜索过滤栏公共样式 ========== */
.filter-bar {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin: -30px 20px 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-bar input,
.filter-bar select {
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: #00e36e;
}

.filter-bar input {
    width: 250px;
}

@media (max-width: 768px) {
    .filter-bar {
        margin: -20px 10px 20px;
        padding: 15px;
        gap: 10px;
    }
    .filter-bar input {
        width: 100%;
        flex: 1;
    }
}