/* ==========================================================
   ms-components.css — Mustard Seed 전역 컴포넌트
   MS_V411_MODERN_UI (그라디언트 사이드바 + Soft Shadow)

   박정근 결정:
   - 사이드바: #1A6FA8 → #0B3D6B 그라디언트 + 흰색 아이콘
   - 모달/카드: Soft Shadow + Border-radius
   - Glassmorphism 완전 제거 (구형 기기 호환성 + Z-index 안정)

   원칙 (Gemini Final Pass A):
   - 레이아웃 속성(margin/padding/display/flex) 절대 미수정
   - 시각적 속성(background/border/box-shadow/color)만 override

   Z-index 계층:
   - Topbar  : 1010
   - Sidebar : 1000 (hover: 1020)
   - Dropdown: 1050
   - Modal   : 2000
   ========================================================== */

/* ==========================================================
   0. 토큰
   ========================================================== */
:root {
    /* 사이드바 그라디언트 */
    --ms-sidebar-grad-start: #1A6FA8;
    --ms-sidebar-grad-end:   #0B3D6B;

    /* Soft Shadow 토큰 */
    --ms-shadow-soft:   0 2px 12px rgba(15, 23, 42, 0.08),
                        0 1px 3px  rgba(15, 23, 42, 0.05);
    --ms-shadow-modal:  0 8px 40px rgba(15, 23, 42, 0.16),
                        0 2px 8px  rgba(15, 23, 42, 0.08);
    --ms-shadow-card:   0 1px 4px  rgba(15, 23, 42, 0.06),
                        0 1px 2px  rgba(15, 23, 42, 0.04);

    /* ms-surface 별칭 */
    --ms-surface: var(--ms-card);

    /* Z-index 계층 */
    --ms-z-topbar:        1010;
    --ms-z-sidebar:       1000;
    --ms-z-sidebar-hover: 1020;
    --ms-z-dropdown:      1050;
    --ms-z-modal:         2000;
}

[data-theme="dark"] {
    --ms-sidebar-grad-start: #0F4C7A;
    --ms-sidebar-grad-end:   #071F38;
    --ms-shadow-soft:   0 2px 12px rgba(0, 0, 0, 0.30),
                        0 1px 3px  rgba(0, 0, 0, 0.20);
    --ms-shadow-modal:  0 8px 40px rgba(0, 0, 0, 0.50),
                        0 2px 8px  rgba(0, 0, 0, 0.30);
    --ms-shadow-card:   0 1px 4px  rgba(0, 0, 0, 0.25),
                        0 1px 2px  rgba(0, 0, 0, 0.15);
}

/* ==========================================================
   1. 사이드바 그라디언트 (시각적 속성만 — Gemini A 준수)
   ========================================================== */
.ms-sidebar {
    background: linear-gradient(
        180deg,
        var(--ms-sidebar-grad-start) 0%,
        var(--ms-sidebar-grad-end)   100%
    ) !important;
    border-right: none !important;
    z-index: var(--ms-z-sidebar) !important;
}

/* 사이드바 hover 시 z-index */
@media (min-width: 1024px) {
    [data-sidebar="auto"] .ms-sidebar:hover,
    [data-sidebar="auto"] .ms-sidebar:focus-within {
        z-index: var(--ms-z-sidebar-hover) !important;
    }
}

/* 사이드바 내부 아이콘/텍스트 색상 */
.ms-sidebar .ms-nav-link,
.ms-sidebar .ms-nav-toggle,
.ms-sidebar .ms-submenu-link {
    color: rgba(255, 255, 255, 0.75) !important;
}
.ms-sidebar .ms-nav-link:hover,
.ms-sidebar .ms-nav-toggle:hover,
.ms-sidebar .ms-submenu-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}
.ms-sidebar .ms-nav-link.is-active,
.ms-sidebar .ms-submenu-link.is-active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.20) !important;
}
.ms-sidebar .ms-nav-icon,
.ms-sidebar .ms-nav-label,
.ms-sidebar .ms-nav-chevron {
    color: inherit !important;
}

/* 사이드바 브랜드 (로고 영역) */
.ms-sidebar .ms-sidebar-brand {
    color: #ffffff !important;
}
.ms-sidebar .ms-sidebar-brand:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* 사이드바 구분선 */
.ms-sidebar .ms-nav-divider {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 사이드바 푸터 */
.ms-sidebar .ms-sidebar-footer,
.ms-sidebar .ms-sidebar-footer-text {
    color: rgba(255, 255, 255, 0.55) !important;
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* 사이드바 토글 버튼 */
.ms-sidebar .ms-sidebar-toggle {
    color: rgba(255, 255, 255, 0.75) !important;
}
.ms-sidebar .ms-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* ==========================================================
   2. 토바 Z-index 재정의
   ========================================================== */
.ms-topbar {
    z-index: var(--ms-z-topbar) !important;
}

/* ==========================================================
   3. 전역 버튼 시스템 (시각적 속성만 — Gemini A 준수)
   ========================================================== */
.ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: var(--ms-touch-min, 44px);
    padding: 0 1rem;
    border-radius: var(--ms-radius-sm);
    font-size: var(--ms-fs-small);
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: 1px solid var(--ms-border);
    background: var(--ms-card);
    color: var(--ms-text-secondary);
    cursor: pointer;
    transition: all var(--ms-duration, 200ms) var(--ms-ease, ease);
    position: relative;
    overflow: hidden;
}
.ms-btn:hover {
    background: var(--ms-primary-tint);
    border-color: var(--ms-primary);
    color: var(--ms-primary);
}
.ms-btn:active { transform: scale(0.97); }
.ms-btn:focus-visible { outline: none; box-shadow: var(--ms-shadow-focus); }

.ms-btn-primary {
    background: var(--ms-primary);
    border-color: var(--ms-primary);
    color: #ffffff;
}
.ms-btn-primary:hover {
    background: var(--ms-primary-deep);
    border-color: var(--ms-primary-deep);
    color: #ffffff;
}
.ms-btn-danger {
    background: transparent;
    border-color: var(--ms-danger);
    color: var(--ms-danger);
}
.ms-btn-danger:hover { background: var(--ms-danger); color: #ffffff; }
.ms-btn-sm { min-height: 36px; padding: 0 0.75rem; font-size: var(--ms-fs-tiny); }

/* ==========================================================
   4. 전역 입력 시스템
   ========================================================== */
.ms-input,
.ms-select {
    width: 100%;
    min-height: var(--ms-touch-min, 44px);
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-bg);
    color: var(--ms-text);
    font-family: inherit;
    font-size: var(--ms-fs-body);
    transition: all var(--ms-duration, 200ms);
    box-sizing: border-box;
}
.ms-input:focus,
.ms-select:focus {
    outline: none;
    border-color: var(--ms-primary);
    box-shadow: var(--ms-shadow-focus);
    background: var(--ms-card);
}
.ms-input::placeholder { color: var(--ms-text-muted); }
.ms-label {
    display: block;
    font-size: var(--ms-fs-small);
    font-weight: 600;
    color: var(--ms-text);
    margin-bottom: 0.375rem;
}
.ms-surface {
    background: var(--ms-card);
    border-radius: var(--ms-radius);
    border: 1px solid var(--ms-border-light);
}

/* ==========================================================
   5. 섹션 Soft Shadow 보강 (시각적 속성만)
   ========================================================== */
.ms-section {
    box-shadow: var(--ms-shadow-card);
}

/* ==========================================================
   6. 모달 시스템 (Soft Shadow + Border-radius)
   ========================================================== */
.ms-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 47, 0.65);
    z-index: var(--ms-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}
.ms-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.ms-modal {
    background: var(--ms-card);
    border-radius: 20px;
    box-shadow: var(--ms-shadow-modal);
    border: 1px solid var(--ms-border-light);
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ms-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ms-border-light);
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        var(--ms-primary-tint) 0%,
        var(--ms-card) 100%
    );
}
.ms-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ms-text);
}
.ms-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--ms-text-muted);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
}
.ms-modal-close:hover {
    background: rgba(239, 68, 68, 0.10);
    color: var(--ms-danger);
}
.ms-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px;
    min-height: 0;
}
.ms-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 14px 22px;
    border-top: 1px solid var(--ms-border-light);
    flex-shrink: 0;
}

/* ==========================================================
   7. Bulk Assign 모달 전용
   ========================================================== */
.ms-bulk-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ms-bulk-search {
    flex: 1;
    min-width: 160px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-bg);
    color: var(--ms-text);
    font-family: inherit;
    font-size: var(--ms-fs-small);
    transition: border-color 0.15s;
}
.ms-bulk-search:focus {
    outline: none;
    border-color: var(--ms-primary);
    box-shadow: var(--ms-shadow-focus);
}
.ms-bulk-filter {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-bg);
    color: var(--ms-text);
    font-family: inherit;
    font-size: var(--ms-fs-small);
    cursor: pointer;
}
.ms-bulk-select-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ms-border-light);
    align-items: center;
}
.ms-bulk-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ms-bulk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--ms-radius-sm);
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
.ms-bulk-item:hover { background: var(--ms-primary-tint); }
.ms-bulk-item.is-member { background: rgba(16, 185, 129, 0.07); }
.ms-bulk-item.is-member:hover { background: rgba(16, 185, 129, 0.14); }
.ms-bulk-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ms-primary);
    flex-shrink: 0;
    cursor: pointer;
}
.ms-bulk-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ms-primary-tint);
    color: var(--ms-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.ms-bulk-item.is-member .ms-bulk-avatar {
    background: rgba(16, 185, 129, 0.15);
    color: var(--ms-success);
}
.ms-bulk-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-bulk-role { font-size: 11px; color: var(--ms-text-muted); white-space: nowrap; }
.ms-bulk-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.15);
    color: var(--ms-success);
    font-weight: 600;
    white-space: nowrap;
}
.ms-bulk-count {
    font-size: 12px;
    color: var(--ms-text-muted);
    margin-left: auto;
    padding: 0 4px;
}
.ms-bulk-count strong { color: var(--ms-primary); }

/* ==========================================================
   8. 반응형
   ========================================================== */
@media (max-width: 480px) {
    .ms-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        align-self: flex-end;
    }
    .ms-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .ms-bulk-toolbar { flex-direction: column; }
    .ms-bulk-search,
    .ms-bulk-filter { width: 100%; }
}

/* ==========================================================
   MS_V411_SIDEBAR_FIXED: 사이드바 고정 + 콘텐츠만 스크롤
   ms-page 클래스가 있는 페이지에서만 적용 (대시보드 등 제외)
   ========================================================== */

/* MS_V411_SIDEBAR_FIXED: 사이드바 고정은 group_tree.html 전용 inline CSS로 처리
   전역 ms-main/ms-content 높이 고정 제거 — 대시보드 음수마진 클리핑 박멸 */