/**
 * 3D培训教学系统 - 工具类样式
 * Utility Classes for common inline styles
 * Version: 2.0
 */

/* ==================== 显示/隐藏 ==================== */
.hidden,
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.d-grid {
    display: grid !important;
}

/* ==================== 可见性 ==================== */
.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

/* ==================== 间距工具类 ==================== */
/* Margin */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

.m-1 { margin: var(--spacing-sm) !important; }
.mt-1 { margin-top: var(--spacing-sm) !important; }
.mb-1 { margin-bottom: var(--spacing-sm) !important; }
.ml-1 { margin-left: var(--spacing-sm) !important; }
.mr-1 { margin-right: var(--spacing-sm) !important; }

.m-2 { margin: var(--spacing-md) !important; }
.mt-2 { margin-top: var(--spacing-md) !important; }
.mb-2 { margin-bottom: var(--spacing-md) !important; }
.ml-2 { margin-left: var(--spacing-md) !important; }
.mr-2 { margin-right: var(--spacing-md) !important; }

.m-3 { margin: var(--spacing-lg) !important; }
.mt-3 { margin-top: var(--spacing-lg) !important; }
.mb-3 { margin-bottom: var(--spacing-lg) !important; }
.ml-3 { margin-left: var(--spacing-lg) !important; }
.mr-3 { margin-right: var(--spacing-lg) !important; }

.m-4 { margin: var(--spacing-xl) !important; }
.mt-4 { margin-top: var(--spacing-xl) !important; }
.mb-4 { margin-bottom: var(--spacing-xl) !important; }
.ml-4 { margin-left: var(--spacing-xl) !important; }
.mr-4 { margin-right: var(--spacing-xl) !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }

.p-1 { padding: var(--spacing-sm) !important; }
.pt-1 { padding-top: var(--spacing-sm) !important; }
.pb-1 { padding-bottom: var(--spacing-sm) !important; }
.pl-1 { padding-left: var(--spacing-sm) !important; }
.pr-1 { padding-right: var(--spacing-sm) !important; }

.p-2 { padding: var(--spacing-md) !important; }
.pt-2 { padding-top: var(--spacing-md) !important; }
.pb-2 { padding-bottom: var(--spacing-md) !important; }
.pl-2 { padding-left: var(--spacing-md) !important; }
.pr-2 { padding-right: var(--spacing-md) !important; }

.p-3 { padding: var(--spacing-lg) !important; }
.pt-3 { padding-top: var(--spacing-lg) !important; }
.pb-3 { padding-bottom: var(--spacing-lg) !important; }
.pl-3 { padding-left: var(--spacing-lg) !important; }
.pr-3 { padding-right: var(--spacing-lg) !important; }

.p-4 { padding: var(--spacing-xl) !important; }
.pt-4 { padding-top: var(--spacing-xl) !important; }
.pb-4 { padding-bottom: var(--spacing-xl) !important; }
.pl-4 { padding-left: var(--spacing-xl) !important; }
.pr-4 { padding-right: var(--spacing-xl) !important; }

/* ==================== 文本对齐 ==================== */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

/* ==================== 字体样式 ==================== */
.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-medium {
    font-weight: 500 !important;
}

.font-weight-semibold {
    font-weight: 600 !important;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.font-italic {
    font-style: italic !important;
}

/* ==================== 位置 ==================== */
.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: sticky !important;
}

/* ==================== Flexbox工具 ==================== */
.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-end {
    align-items: flex-end !important;
}

.align-center {
    align-items: center !important;
}

.align-baseline {
    align-items: baseline !important;
}

.align-stretch {
    align-items: stretch !important;
}

.flex-1 {
    flex: 1 !important;
}

.flex-auto {
    flex: auto !important;
}

.flex-none {
    flex: none !important;
}

/* ==================== 宽度/高度 ==================== */
.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

/* ==================== 圆角 ==================== */
.rounded-sm {
    border-radius: var(--radius-sm) !important;
}

.rounded {
    border-radius: var(--radius-md) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

.rounded-circle {
    border-radius: var(--radius-round) !important;
}

.rounded-0 {
    border-radius: 0 !important;
}

/* ==================== 边框 ==================== */
.border-0 {
    border: none !important;
}

.border-1 {
    border: 1px solid var(--border-medium) !important;
}

.border-2 {
    border: 2px solid var(--border-medium) !important;
}

.border-top {
    border-top: 1px solid var(--border-medium) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--border-medium) !important;
}

.border-left {
    border-left: 1px solid var(--border-medium) !important;
}

.border-right {
    border-right: 1px solid var(--border-medium) !important;
}

/* ==================== 透明度 ==================== */
.opacity-0 {
    opacity: 0 !important;
}

.opacity-25 {
    opacity: 0.25 !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* ==================== 光标 ==================== */
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.cursor-default {
    cursor: default !important;
}

/* ==================== 溢出 ==================== */
.overflow-auto {
    overflow: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-visible {
    overflow: visible !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

/* ==================== 特殊用途类 ==================== */
.edit-notice {
    background: #fffbea;
    border-left: 4px solid #ffcc00;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
}

.reload-btn {
    margin-left: 5px;
    padding: 5px 10px;
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    transition: all var(--transition-base);
}

.reload-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.small-btn {
    font-size: 14px;
    padding: 6px 12px;
    margin-left: 15px;
}

.cancel-edit-btn {
    font-size: 14px;
    padding: 6px 12px;
    margin-left: 15px;
}

/* ==================== 打印隐藏 ==================== */
@media print {
    .no-print {
        display: none !important;
    }
}

/* ==================== 响应式隐藏 ==================== */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}

@media (max-width: 1200px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (min-width: 1201px) {
    .show-tablet {
        display: none !important;
    }
}