/*
 * 화면 공통 규칙
 * - 앱 색: 지금 어느 앱에 있는지 알려 준다 (머리 띠, 활성 탭, 상단 선)
 * - 의미 색: 버튼이 하는 일을 알려 준다 (모든 앱에서 같다)
 */

:root {
    --app: #2563eb;
    --app-soft: #eff6ff;
}

body[data-app="operations"] { --app: #2563eb; --app-soft: #eff6ff; }
body[data-app="survey_2025"] { --app: #ea580c; --app-soft: #fff7ed; }
body[data-app="interview"] { --app: #16a34a; --app-soft: #f0fdf4; }
body[data-app="dashboard"] { --app: #4f46e5; --app-soft: #eef2ff; }
body[data-app="board"] { --app: #0d9488; --app-soft: #f0fdfa; }
body[data-app="safety_culture"] { --app: #0284c7; --app-soft: #f0f9ff; }

body[data-app] main { border-top: 3px solid var(--app); }

.ui-app-band { background: var(--app-soft); }
.ui-app-fill { background: var(--app); color: #fff; }
.ui-tab-active { border-color: var(--app) !important; color: var(--app) !important; }

/* 앱을 나란히 보여 주는 화면에서 쓰는 앱 색 */
.ui-color-operations { color: #2563eb; }
.ui-color-survey { color: #ea580c; }
.ui-color-interview { color: #16a34a; }
.ui-color-dashboard { color: #4f46e5; }
.ui-fill-operations { background: #2563eb; color: #fff; }
.ui-fill-survey { background: #ea580c; color: #fff; }
.ui-fill-interview { background: #16a34a; color: #fff; }
.ui-fill-operations:hover { background: #1d4ed8; }
.ui-fill-survey:hover { background: #c2410c; }
.ui-fill-interview:hover { background: #15803d; }

main thead th { white-space: nowrap; }

/* 버튼 */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ui-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ui-btn svg { flex-shrink: 0; }

.ui-btn-primary { background: #2563eb; color: #fff; }
.ui-btn-primary:hover { background: #1d4ed8; }

.ui-btn-secondary { background: #fff; border-color: #d1d5db; color: #374151; }
.ui-btn-secondary:hover { background: #f9fafb; }

.ui-btn-download { background: #16a34a; color: #fff; }
.ui-btn-download:hover { background: #15803d; }

.ui-btn-outline-download { background: #fff; border-color: #16a34a; color: #15803d; }
.ui-btn-outline-download:hover { background: #f0fdf4; }

.ui-btn-chart {
    padding: 0.25rem 0.625rem;
    background: #fff;
    border-color: #d1d5db;
    color: #374151;
    font-size: 0.75rem;
}
.ui-btn-chart:hover { background: #f9fafb; }

/* 서버 메시지 */
.ui-messages { padding: 1rem 1.5rem 0; }
.ui-message {
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    background: #f0fdf4;
    color: #15803d;
    font-size: 0.875rem;
}
.ui-message-error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.ui-message-warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ui-message-info { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }

/* 토스트 */
.ui-toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 24rem;
}
.ui-toast {
    padding: 0.75rem 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.875rem;
    white-space: pre-line;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.ui-toast-error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }