/**
 * 传讯页面通用工具类
 * 用于替代内联样式，提高代码可维护性
 * 日期: 2026-03-15
 */

/* === Display Utilities === */
.u-hidden {
    display: none;
}

.u-flex {
    display: flex;
}

.u-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.u-flex-column {
    display: flex;
    flex-direction: column;
}

/* === Flex Item Utilities === */
.u-flex-1 {
    flex: 1;
}

.u-gap-sm {
    gap: 8px;
}

.u-gap-md {
    gap: 10px;
}

.u-gap-lg {
    gap: 15px;
}

/* === Spacing Utilities === */
.u-mb-sm {
    margin-bottom: 4px;
}

.u-mb-md {
    margin-bottom: 12px;
}

.u-mb-lg {
    margin-bottom: 15px;
}

.u-mb-xl {
    margin-bottom: 16px;
}

.u-mt-sm {
    margin-top: 4px;
}

.u-mt-md {
    margin-top: 10px;
}

.u-mt-lg {
    margin-top: 15px;
}

/* === Typography Utilities === */
/* Font Size */
.u-text-xs {
    font-size: 11px;
}

.u-text-sm {
    font-size: 12px;
}

.u-text-md {
    font-size: 13px;
}

.u-text-base {
    font-size: 14px;
}

.u-text-lg {
    font-size: 15px;
}

.u-text-xl {
    font-size: 16px;
}

/* Font Weight */
.u-font-normal {
    font-weight: normal;
}

.u-font-medium {
    font-weight: 500;
}

.u-font-semibold {
    font-weight: 600;
}

.u-font-bold {
    font-weight: bold;
}

/* Text Colors */
.u-text-gray {
    color: #666;
}

.u-text-gray-light {
    color: #999;
}

.u-text-gray-dark {
    color: #333;
}

.u-text-primary {
    color: #576b95;
}

.u-text-link {
    color: #576b95;
    cursor: pointer;
}

.u-text-mauve {
    color: #a8b6d8;
}

/* === Width Utilities === */
.u-w-full {
    width: 100%;
}

/* === Form Utilities === */
.u-input-sm {
    width: 100%;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

.u-input-md {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}

.u-input-base {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

/* === Label Utilities === */
.u-label {
    font-size: 12px;
    color: #999;
    display: block;
    margin-bottom: 5px;
}

.u-label-block {
    font-size: 12px;
    color: #999;
    display: block;
    margin-bottom: 5px;
}

.u-label-inline {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    display: block;
}

/* === Cursor Utilities === */
.u-cursor-pointer {
    cursor: pointer;
}

/* === Common Component Patterns === */
/* Setting Header Pattern */
.u-setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* Text with label pattern */
.u-text-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

/* Hint text pattern */
.u-hint-text {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* === Color Utilities === */
.u-bg-mauve {
    background-color: #a3b1c6;
}

.u-bg-mauve-light {
    background-color: #a8b6d8;
}

/* === Accessibility === */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* === Interactive States === */
.u-interactive {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.u-interactive:hover {
    opacity: 0.8;
}

.u-interactive:active {
    opacity: 0.6;
}

/* === Combined Text Utilities === */
/* Small gray text */
.u-text-sm-gray {
    font-size: 12px;
    color: #666;
}

.u-text-sm-gray-light {
    font-size: 12px;
    color: #999;
}

.u-text-md-gray {
    font-size: 13px;
    color: #666;
}

.u-text-md-gray-dark {
    font-size: 13px;
    color: #333;
}

/* Text with margin */
.u-text-sm-gray-mt {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.u-text-label-block {
    font-size: 12px;
    color: #999;
    display: block;
    margin-bottom: 5px;
}

.u-text-label-inline {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

/* Link text */
.u-text-link-sm {
    font-size: 13px;
    color: #576b95;
    cursor: pointer;
    font-weight: normal;
}

/* Bold title with icon */
.u-title-with-icon {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.u-title-with-icon-semibold {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* === Flex Pattern Utilities === */
.u-flex-between-sm-mb {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.u-flex-center-gap-sm {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* === Spacing Utilities === */
.u-mb-base {
    margin-bottom: 10px;
}