/* MediConnect React 레거시 UI — eGov Thymeleaf 공통 테마 */
@import url('paperlogy-fonts.css');

:root {
    --mc-primary: #007bff;
    --mc-primary-dark: #2563eb;
    --mc-pink-card: #f8d7da;
    --mc-cosmetics: #ec4899;
    --mc-bg: #f8f9fa;
    --mc-text: #212529;
    --mc-muted: #6b7280;
    --mc-nav-border: #e0e0e0;
    --mc-bottom-nav-h: 72px;
}

html { font-size: 16px; }
body.mc-app {
    color: var(--mc-text);
    background: var(--mc-bg);
    margin: 0;
    min-height: 100vh;
}
body.mc-app.has-bottom-nav { padding-bottom: calc(var(--mc-bottom-nav-h) + 16px); }

/* Bootstrap primary → React #007bff */
.bg-primary, .btn-primary {
    background-color: var(--mc-primary) !important;
    border-color: var(--mc-primary) !important;
}
.btn-primary:hover { background-color: #0069d9 !important; border-color: #0062cc !important; }

/* K-cure 핑크 카드 (React pink-theme.css) */
.card.mc-pink-card,
.mc-pink-card.card {
    background-color: var(--mc-pink-card) !important;
    border: none;
    border-radius: 0.5rem;
}
.card.mc-pink-card .card-header,
.card.mc-pink-card .card-body,
.card.mc-pink-card .list-group-item {
    background-color: inherit !important;
    color: var(--mc-text);
}

/* 상단 navbar (React Home.tsx) */
.mc-topnav {
    background: #fff;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}
.mc-topnav .navbar-brand img { height: 48px; width: auto; max-width: 200px; }
.mc-cosmetics-btn {
    border-color: var(--mc-cosmetics) !important;
    color: var(--mc-cosmetics) !important;
    white-space: nowrap;
}

/* 파란 페이지 헤더 (React HospitalSearch / PatientApp) */
.mc-page-header {
    background: var(--mc-primary);
    color: #fff;
    padding: 1.5rem 0;
}
.mc-page-header .opacity-75 { opacity: 0.85 !important; }

/* 홈 카테고리 카드 */
.mc-home-card {
    background: var(--mc-pink-card) !important;
    border: none !important;
    transition: transform .2s, box-shadow .2s;
}
.mc-home-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important;
}
.mc-home-icon { font-size: 2.5rem; line-height: 1; margin-bottom: .75rem; }

/* 하단 네비 (React BottomNavigation.tsx) */
.mc-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--mc-nav-border);
    box-shadow: 0 -2px 10px rgba(0,0,0,.1);
    z-index: 1030;
}
.mc-bottom-nav .nav-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    max-width: 100%;
}
.mc-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    min-width: 56px;
    text-decoration: none;
    color: #666;
    border-radius: 8px;
    transition: all .2s;
}
.mc-bottom-nav .nav-item:hover { background: #f5f5f5; color: #666; }
.mc-bottom-nav .nav-item.active { color: var(--mc-primary); }
.mc-bottom-nav .nav-item.active .nav-label { color: var(--mc-primary); }
.mc-bottom-nav .nav-icon { margin-bottom: 2px; }
.mc-bottom-nav .nav-label { font-size: 11px; font-weight: 500; font-family: var(--font-paperlogy); }

/* 로그인 페이지 (React Login.tsx) */
.mc-login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.mc-login-logo { width: 180px; max-width: 80vw; height: auto; margin-bottom: 1.5rem; }
.mc-login-card { max-width: 320px; width: 100%; }
.mc-social-btn { min-width: 260px; max-width: 100%; }

/* 관리자 통계 카드 */
.mc-stat-card { border: none; border-radius: .5rem; }
.mc-stat-card .h4 { font-weight: 700; }

/* 관리 pill (COORDINATOR 전용 서브 nav) */
.mc-admin-pills .nav-link { font-size: .875rem; }

/* 테이블을 핑크 카드 안에 */
.mc-table-card .table { margin-bottom: 0; }
.mc-table-card .table thead { background: rgba(0,0,0,.03); }

@media (max-width: 768px) {
    .mc-topnav .navbar-brand img { height: 40px; }
}

/* ── React Home.tsx 전용 ── */
.mc-home-page { background: #f8f9fa !important; }
.mc-home-nav { background: #fff !important; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }
.mc-home-logo { width: 200px; max-width: 55vw; height: auto; }
.mc-auth-login { border-color: #007bff !important; color: #007bff !important; white-space: nowrap; }
.mc-auth-signup { border-color: #28a745 !important; color: #28a745 !important; white-space: nowrap; }
.mc-auth-logout { border-color: #6c757d !important; color: #6c757d !important; white-space: nowrap; }

/* paperlogy-* 클래스는 paperlogy-fonts.css 에 정의 */

.mc-home-section-title {
    color: #111827;
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-paperlogy);
}
.mc-home-card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
    object-fit: contain;
}
.mc-card-title { color: #111827; font-size: 1.1rem; margin-bottom: .5rem; }
.mc-card-body { color: #374151; font-size: .95rem; margin-bottom: 1rem; }

/* React Home 카드 배경색 (정확히 동일) */
.mc-bg-pink, .mc-bg-pink.card, .mc-bg-pink .card-body {
    background-color: #f8d7da !important;
    border: none;
}
.mc-bg-cosmetics, .mc-bg-cosmetics.card, .mc-bg-cosmetics .card-body {
    background-color: #fce7f3 !important;
    border: none;
}
.mc-bg-telemedicine, .mc-bg-telemedicine.card, .mc-bg-telemedicine .card-body {
    background-color: #e8f5e8 !important;
    border: none;
}

@media (max-width: 768px) {
    .mc-home-logo { width: 160px; }
    .mc-home-section-title { font-size: 1.45rem; }
}

/* ── React HospitalSearch.tsx ── */
.mc-search-page { background: #f8f9fa !important; }
.mc-search-result-card { border-radius: 0.5rem; }
.mc-search-scroll {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}
.mc-search-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.mc-search-item:last-child { margin-bottom: 0; }
.mc-search-dept-card { min-height: 100px; }
.mc-search-filter-form .form-control,
.mc-search-filter-form .form-select {
    background-color: #fff;
}

/* ── React DoctorProfile.tsx ── */
.mc-doctor-profile-page { background: #f8f9fa !important; }
.mc-doctor-avatar {
    width: 96px; height: 96px; border-radius: 50%;
    background: #fff; border: 3px solid #28a745;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: #28a745;
}
.mc-doctor-booking-card { top: 1.5rem; border-radius: 0.5rem; }
.mc-page-header.bg-success { background: #28a745 !important; }

/* ── React 예약 폼 (addAppointmentView) ── */
.mc-booking-page { background: #f8f9fa !important; }
.mc-booking-success-page .mc-page-header { padding: 2rem 0; }
.mc-booking-detail-list dt { font-size: .875rem; }
.mc-booking-detail-list dd { margin-bottom: .75rem; }

/* ── React Appointment.tsx — 진료내역 ── */
.mc-consultation-history-page { background: #f8f9fa !important; }
.mc-appointment-item { background: #fff !important; border-radius: .5rem; }
.mc-consultation-history-page .nav-tabs .nav-link { color: #495057; border: none; }
.mc-consultation-history-page .nav-tabs .nav-link.active {
    background: transparent; color: #007bff; border-bottom: 2px solid #007bff;
}

/* ── React Chat.tsx — 메시지 ── */
.mc-chat-page { padding-bottom: calc(var(--mc-bottom-nav-h) + 72px) !important; }
.mc-chat-header {
    background: #17a2b8; color: #fff;
    position: sticky; top: 0; z-index: 1020;
}
.mc-chat-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
}
.mc-chat-avatar-sm {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e9ecef; color: #6c757d;
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.mc-chat-messages {
    min-height: 50vh;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}
.mc-chat-row { display: flex; align-items: flex-start; max-width: 85%; }
.mc-chat-row-mine { flex-direction: row-reverse; margin-left: auto; }
.mc-chat-bubble {
    padding: .75rem 1rem; border-radius: 1rem;
    word-break: break-word; white-space: pre-wrap;
}
.mc-chat-bubble-mine { background: #007bff; color: #fff; }
.mc-chat-bubble-other { background: #fff; border: 1px solid #dee2e6; color: #212529; }
.mc-chat-input-bar {
    position: fixed; left: 0; right: 0;
    bottom: var(--mc-bottom-nav-h);
    background: #fff; border-top: 1px solid #dee2e6; z-index: 1010;
}
.mc-chat-appointment-chip {
    position: fixed; bottom: calc(var(--mc-bottom-nav-h) + 80px); left: 1rem; z-index: 1005;
    max-width: 280px;
}

/* ── 병원 상세 (HospitalDetailPage 소비자版) ── */
.mc-hospital-detail-page { background: #f8f9fa !important; }
.mc-stat-dept { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
.mc-stat-doctor { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.mc-stat-rating { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.mc-stat-region { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }

.mc-page-header.bg-success { background: var(--mc-success, #28a745) !important; }
.mc-page-header.bg-info { background: var(--mc-info, #17a2b8) !important; }

/* React More page */
.mc-more-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
}
.mc-more-container { max-width: 600px; }
.mc-more-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
}
.mc-more-item:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.12); color: inherit; }
.mc-more-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}