/* ========================================
   치과 전용 페이지 스타일 (dental.css)
   shadcn UI 보조 스타일 - Tailwind 외 추가 필요 스타일
   ======================================== */

/* 데스크톱: 사이드바 있을 때 content 영역 padding-top 제거 */
@media (min-width: 1024px) {
    .dental-page #content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* 모바일: 상단 헤더 여백 (하단 탭 제거됨) */
@media (max-width: 1023.98px) {
    .dental-page #content {
        padding-top: 3.75rem !important;
        padding-bottom: 1rem !important;
    }
}

/* ===== SVG 치아 차트 ===== */
.tooth-chart-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tooth-chart-svg {
    display: block;
    width: 100%;
    min-width: 460px;
    height: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 치아 SVG 요소 기본 스타일 */
.tooth-g {
    cursor: pointer;
}

.tooth-g .tooth-crown,
.tooth-g .tooth-root {
    transition: fill 0.15s ease, stroke 0.15s ease;
}

/* 비선택 상태 */
.tooth-g .tooth-crown {
    fill: hsl(210 40% 97%);
    stroke: hsl(214.3 31.8% 78%);
    stroke-width: 1;
}

.tooth-g .tooth-root {
    fill: hsl(210 40% 93%);
    stroke: hsl(214.3 31.8% 78%);
    stroke-width: 1;
}

/* 호버 */
.tooth-g:hover .tooth-crown {
    fill: hsl(172 66% 90%);
    stroke: hsl(172 66% 60%);
}

.tooth-g:hover .tooth-root {
    fill: hsl(172 66% 85%);
    stroke: hsl(172 66% 60%);
}

/* 선택됨 */
.tooth-g.selected .tooth-crown {
    fill: hsl(172 66% 50%);
    stroke: hsl(172 66% 38%);
}

.tooth-g.selected .tooth-root {
    fill: hsl(172 66% 42%);
    stroke: hsl(172 66% 38%);
}

/* FDI 번호 텍스트 */
.tooth-label {
    font-size: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    fill: hsl(215.4 16.3% 40%);
    text-anchor: middle;
    pointer-events: none;
    letter-spacing: -0.3px;
}

.tooth-g.selected .tooth-label {
    fill: hsl(172 66% 15%);
}

/* 중앙선 구분 */
.tooth-chart-midline {
    stroke: hsl(214.3 31.8% 80%);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.tooth-chart-jawline {
    stroke: hsl(214.3 31.8% 82%);
    stroke-width: 1;
}

/* 상/하악 레이블 */
.jaw-label {
    font-size: 9px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    fill: hsl(215.4 16.3% 55%);
    text-anchor: start;
}

/* 레거시 호환 (기존 코드에서 tooth-cell 쿼리가 있을 경우를 위한 숨김 fallback) */
.tooth-grid-horizontal-divider { display: none; }

/* 쉐이드 피커 */
.shade-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    border: 1px solid hsl(214.3 31.8% 91.4%);
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.shade-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.shade-btn.selected {
    border-color: hsl(221.2 83.2% 53.3%);
    box-shadow: 0 0 0 2px hsl(221.2 83.2% 53.3% / 0.3);
    transform: scale(1.1);
}

/* VITA Classical 컬러 맵 */
.shade-a1 { background-color: #f5ecd7; }
.shade-a2 { background-color: #efe2c0; }
.shade-a3 { background-color: #e8d5a6; }
.shade-a35 { background-color: #e3cc93; }
.shade-a4 { background-color: #dbc07a; }
.shade-b1 { background-color: #f2ead0; }
.shade-b2 { background-color: #ece0b8; }
.shade-b3 { background-color: #e5d49e; }
.shade-b4 { background-color: #ddc882; }
.shade-c1 { background-color: #e8dfc6; }
.shade-c2 { background-color: #ddd3ad; }
.shade-c3 { background-color: #d3c694; }
.shade-c4 { background-color: #c9b97b; }
.shade-d2 { background-color: #e0d5b5; }
.shade-d3 { background-color: #d5c89c; }
.shade-d4 { background-color: #cabb82; }

/* 멀티스텝 프로그레스 */
.dental-stepper {
    display: flex;
    align-items: center;
    gap: 0;
}

.dental-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dental-step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid hsl(214.3 31.8% 91.4%);
    color: hsl(215.4 16.3% 46.9%);
    background: white;
    transition: all 0.2s ease;
}

.dental-step.active .dental-step-circle {
    background-color: hsl(221.2 83.2% 53.3%);
    border-color: hsl(221.2 83.2% 53.3%);
    color: white;
}

.dental-step.completed .dental-step-circle {
    background-color: hsl(142.1 76.2% 36.3%);
    border-color: hsl(142.1 76.2% 36.3%);
    color: white;
}

.dental-step-line {
    flex: 1;
    height: 2px;
    background-color: hsl(214.3 31.8% 91.4%);
    min-width: 2rem;
    transition: background-color 0.2s ease;
}

.dental-step.completed + .dental-step-line,
.dental-step-line.completed {
    background-color: hsl(142.1 76.2% 36.3%);
}

.dental-step-label {
    font-size: 0.75rem;
    color: hsl(215.4 16.3% 46.9%);
    white-space: nowrap;
}

.dental-step.active .dental-step-label {
    color: hsl(222.2 84% 4.9%);
    font-weight: 500;
}

/* 모바일에서 스텝 라벨 숨기기 */
@media (max-width: 640px) {
    .dental-step-label {
        display: none;
    }
    .dental-step-circle {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }
}

/* 상태 뱃지 컬러 */
.status-pending { background-color: #fef3c7; color: #92400e; }
.status-received { background-color: #dbeafe; color: #1e40af; }
.status-designing { background-color: #e0e7ff; color: #3730a3; }
.status-fabricating { background-color: #fce7f3; color: #9d174d; }
.status-finishing { background-color: #ede9fe; color: #5b21b6; }
.status-qc { background-color: #f0fdf4; color: #166534; }
.status-ready { background-color: #ecfdf5; color: #065f46; }
.status-delivery { background-color: #fff7ed; color: #9a3412; }
.status-done { background-color: #f0fdf4; color: #14532d; }
.status-returned { background-color: #fef2f2; color: #991b1b; }
.status-cancelled { background-color: #f5f5f5; color: #737373; text-decoration: line-through; }

/* 긴급 뱃지 */
.urgent-badge {
    animation: pulse-urgent 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* 파일 업로드 드롭존 */
.dental-dropzone {
    border: 2px dashed hsl(214.3 31.8% 91.4%);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dental-dropzone:hover,
.dental-dropzone.dragover {
    border-color: hsl(221.2 83.2% 53.3%);
    background-color: hsl(221.2 83.2% 53.3% / 0.05);
}

/* 모달 오버레이 (shadcn sheet 스타일) */
@media (max-width: 1023.98px) {
    .dental-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .dental-modal-content {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        max-height: 95vh;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        background: white;
        overflow-y: auto;
        animation: slide-up 0.3s ease-out;
    }
    @keyframes slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

/* 카드 리스트 (모바일 테이블 대체) */
.dental-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dental-card-item {
    border: 1px solid hsl(214.3 31.8% 91.4%);
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
    transition: box-shadow 0.15s ease;
}

.dental-card-item:hover {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* 스크롤바 최적화 */
.dental-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.dental-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.dental-scrollbar::-webkit-scrollbar-thumb {
    background-color: hsl(214.3 31.8% 91.4%);
    border-radius: 2px;
}

/* ===== 설정 페이지 테이블 모바일 ===== */
@media (max-width: 639.98px) {
    .dental-settings-table {
        min-width: 600px !important;
    }
}

/* ===== 반응형 유틸리티 (Tailwind CDN prefix 호환) ===== */

/* 모바일 전용 표시 (lg 미만, <1024px) */
.d-mobile-only { display: none; }
@media (max-width: 1023.98px) { .d-mobile-only { display: block !important; } }
.d-mobile-only-flex { display: none; }
@media (max-width: 1023.98px) { .d-mobile-only-flex { display: flex !important; } }

/* 데스크톱 전용 표시 (lg 이상, >=1024px) */
.d-desktop-only { display: none; }
@media (min-width: 1024px) { .d-desktop-only { display: block !important; } }
.d-desktop-only-inline { display: none; }
@media (min-width: 1024px) { .d-desktop-only-inline { display: inline !important; } }
.d-desktop-only-flex { display: none; }
@media (min-width: 1024px) { .d-desktop-only-flex { display: flex !important; } }

/* sm 이상 표시 (>=640px) */
.d-sm-up { display: none; }
@media (min-width: 640px) { .d-sm-up { display: block !important; } }
.d-sm-up-inline { display: none; }
@media (min-width: 640px) { .d-sm-up-inline { display: inline !important; } }
.d-sm-up-flex { display: none; }
@media (min-width: 640px) { .d-sm-up-flex { display: flex !important; } }

/* sm 미만 표시 (<640px) */
.d-below-sm { display: block; }
@media (min-width: 640px) { .d-below-sm { display: none !important; } }
.d-below-sm-inline { display: inline; }
@media (min-width: 640px) { .d-below-sm-inline { display: none !important; } }

/* ===== 모바일 반응형 (치과 페이지) ===== */

/* 모바일 타이틀 크기 조정 */
@media (max-width: 639.98px) {
    .dental-page h1 {
        font-size: 1.25rem !important; /* 20px instead of 24px */
        line-height: 1.75rem !important;
    }
}

/* 필터 탭: 모바일에서 가로 스크롤 */
@media (max-width: 639.98px) {
    #filterUL {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none; /* Firefox */
    }
    #filterUL::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    #filterUL button {
        flex-shrink: 0;
    }
}

/* create.html: 납기일 + 단축버튼 섹션 — 모바일에서 stacking */
@media (max-width: 639.98px) {
    .due-date-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .due-date-row input {
        width: 100% !important;
    }
    .due-date-btns {
        margin-top: 0.5rem;
    }
}

/* create.html: 주문 유형 카드 — 모바일에서 세로 스택 */
@media (max-width: 639.98px) {
    .order-type-cards {
        flex-direction: column !important;
    }
}

/* create.html: 하단 저장 바 버튼 — 모바일 full width */
@media (max-width: 639.98px) {
    .create-bottom-bar {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .create-bottom-bar .tw-flex {
        width: 100%;
    }
    .create-bottom-bar .tw-flex > button {
        flex: 1;
    }
    .create-bottom-bar > .tw-text-sm {
        display: none; /* 상태 텍스트는 작은 화면에서 숨김 */
    }
}

/* create.html: Tab 패딩 축소 (모바일) */
@media (max-width: 639.98px) {
    .create-tab-panel {
        padding: 1rem !important;
    }
}

/* create.html: 3D 뷰어 높이 축소 (모바일) */
@media (max-width: 639.98px) {
    #viewerContainer {
        height: 220px !important;
    }
}

/* detail.html: sticky timeline — 모바일에서 sticky 해제 */
@media (max-width: 1023.98px) {
    .dental-page .tw-sticky {
        position: static !important;
    }
}

/* detail.html: 기공물 항목 tooth-chart-readonly 오버플로우 */
@media (max-width: 639.98px) {
    .tooth-chart-readonly {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* 치과 화면 입력칸 글자 크기 (모바일) — mobile-custom.css 의 공용 규칙(input[type=text]·textarea 20px)이
   치과 화면의 40px 입력칸에서는 셀렉트(14px)와 크기가 어긋나고, 기간 입력("2026-09-30 ~ 2026-11-06")이 잘렸다.
   16px 은 iOS 확대를 막는 최소 크기다 — 치과 화면 전체가 같은 크기를 쓴다. */
@media (max-width: 767.98px) {
    .dental-page input.dental-input,
    .dental-page textarea.dental-input {
        font-size: 16px;
    }
}