/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #e60012;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cc0010;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 320px;
    max-height: 400px;
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glassmorphism for cards */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Product Card Style */
.product-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(230, 0, 18, 0.5);
    box-shadow: 0 10px 30px rgba(230, 0, 18, 0.12);
}

.product-img-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.product-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.btn-detail {
    border: 1px solid #d1d5db;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-detail:hover {
    background: #f3f4f6;
    color: #111827;
    border-color: #9ca3af;
}

/* Global Interactive Elements Reset for Mobile */
button:not([type="checkbox"]):not([type="radio"]),
a,
.cursor-pointer:not(input),
[onclick]:not(input),
.btn-detail {
    min-height: 44px;
    min-width: 44px;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

button,
a,
.cursor-pointer,
[onclick],
.product-card,
.btn-detail,
#quotation-export-area * {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Fix checkbox sizes and alignment inside modals */
input[type="checkbox"] {
    min-height: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
    margin: 0 8px 0 0 !important;
    accent-color: #e60012;
}

/* Label alignment fix when paired with checkbox */
.flex.items-center label {
    min-height: 0 !important;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    cursor: pointer;
}

/* Specifically prevent selection in quotation preview area */
#quotation-export-area {
    user-select: none;
    -webkit-user-select: none;
}

/* 단, 견적서 품번·제품명은 복사할 수 있게 예외 허용(캡처/이미지화에는 영향 없음). */
#quotation-export-area .quote-item-dh-code,
#quotation-export-area .quote-item-name,
.quote-item-dh-code,
.quote-item-name {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    cursor: text;
}

/* Specific fix for quote creation button area in mobile */
.quote-floating-bar button,
#section-quotes button,
#quotation-modal button,
#order-submit-modal button,
#quote-floating-bar button {
    cursor: pointer;
    position: relative;
    z-index: 350 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    pointer-events: auto !important;
}

/* Push floating bar and actions up to avoid system bars/toasts */
@media (max-width: 768px) {
    #quote-floating-bar {
        bottom: 100px !important;
        /* Extremely high for S22 Ultra etc */
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }

    .quote-action-container,
    .modal-action-bar {
        padding-bottom: 120px !important;
    }
}

/* Absolute fix for Modal Close Button positioning */
#quotation-modal button[onclick*="close"],
#order-submit-modal button[onclick*="close"],
#admin-partner-modal button[onclick*="close"],
#pickup-request-modal button[onclick*="close"] {
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    left: auto !important;
    z-index: 400 !important;
}

/* =========================================================================
   견적서(quote) 모바일 스케일링 — 로그인/비로그인 양쪽 경로 공통 적용.
   (이전: partner.js renderDashboard의 인라인 <style>에만 존재 → 비로그인
   모달엔 누락되어 모바일 잘림 발생. 전역 CSS로 이전해 단일 출처화.)
   ========================================================================= */
.q-export-area { font-family: 'Pretendard', sans-serif; }
.quote-rate-btn.active { background: #e60012 !important; color: white !important; border-color: #e60012 !important; }
#quotation-export-area img { max-width: none !important; }

@media (max-width: 768px) {
    #quotation-modal:not(.hidden) { background: #fff; padding: 0; display: flex !important; flex-direction: column; }
    #quotation-modal button[onclick="quoteController.closeQuoteModal()"] {
        top: 15px; right: 15px; background: rgba(0,0,0,0.05); width: 32px; height: 32px;
    }
    #quotation-export-area { padding: 15px !important; }

    /* Header scaling for mobile */
    .q-export-area h1 { font-size: 0.9rem !important; white-space: nowrap !important; }
    .q-export-area img[alt="BREX"] { height: 18px !important; }
    #quote-view-date { font-size: 0.55rem !important; }

    /* Item Row for mobile */
    .quote-item-row { flex-direction: row !important; gap: 10px !important; padding: 12px 0 !important; }
    .quote-item-img-box {
        width: 120px !important;
        height: 80px !important;
        margin: 0 !important;
        padding: 6px !important;
    }

    .quote-item-info { padding: 0 !important; }
    .quote-item-header { gap: 4px !important; margin-bottom: 4px !important; }
    .quote-item-dh-code { font-size: 0.9rem !important; line-height: 1 !important; }
    .quote-item-name { font-size: 0.65rem !important; }

    .quote-item-pricing-bar { padding: 5px 8px !important; gap: 2px !important; }
    .quote-qty-badge { font-size: 0.6rem !important; padding: 1px 5px !important; height: auto !important; }
    .quote-price-val { font-size: 0.85rem !important; }
    .quote-price-old { font-size: 0.65rem !important; margin-right: 4px !important; }

    /* Summary scaling */
    .q-export-area .text-sm { font-size: 0.75rem !important; }
    .q-export-area .text-\[0\.75rem\] { font-size: 0.65rem !important; }
    .q-export-area .text-\[0\.7rem\] { font-size: 0.6rem !important; }
    .q-export-area .text-\[0\.65rem\] { font-size: 0.55rem !important; }
    .q-export-area .text-\[0\.6rem\] { font-size: 0.5rem !important; }

    #quote-final-total-box { padding: 12px 15px !important; border-radius: 12px !important; }
    #quote-final-total { font-size: 1.25rem !important; }

    /* Controls on mobile (로그인 견적의 좌측 옵션 패널) */
    #quotation-modal .shrink-0 { padding: 20px 15px !important; border-right: none !important; border-bottom: 1px solid #f1f5f9; }
    #quotation-modal > div > .flex-1 { padding: 15px !important; background: #f8fafc; }
}

/* =========================================================================
   주문 등록 품목 테이블 — 모바일에서 가로 스크롤(퀵오더 방식).
   카드(스택) 방식은 오히려 불편하다는 피드백으로 폐기. 컬럼 폭을 유지한 채
   가로 스크롤하도록 min-width만 부여(래퍼 .overflow-x-auto는 orderCreate.js).
   ========================================================================= */
@media (max-width: 768px) {
    .oc-items-table { min-width: 600px; }
}

/* =========================================================================
   Chrome 안드로이드 'Touch to Search'(버튼 탭→구글 검색 팝업) 방지.
   버튼/링크/클릭요소의 텍스트 선택을 끈다. 입력 요소는 선택 허용 유지.
   ========================================================================= */
button, a, [role="button"], [onclick], label {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"], .selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

/* =========================================================================
   모바일 하단 버튼 탭 불가 방지.
   안드로이드 Chrome/iOS Safari는 화면 최하단 탭 시 주소창/제스처바가 먼저
   반응해 첫 탭이 버튼에 안 들어간다(가입하기 등). 메인 스크롤 영역 하단에
   안전 여백을 확보해 버튼이 바닥 가장자리에서 떨어지도록 한다.
   ========================================================================= */
@media (max-width: 768px) {
    #app-container { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); }
}

/* =========================================================================
   상단 nav 액션버튼 ↔ 햄버거 분기 (입력장치 기준, 폭 무관).
   ⚠️ 폭(md=768)으로 분기하면 진성님 고해상도 데스크탑이 전체화면에서도 CSS
   논리폭<768라 '폰'으로 오판돼 데스크탑에서 버튼이 통째 사라진다(2026-06-18 회귀).
   그래서 <head> 인라인 스크립트가 matchMedia로 <html>에 input-mouse(마우스=
   데스크탑) / input-touch(터치=폰) 클래스를 부여하고, 여기서 그 클래스로 토글한다.
   - input-mouse: 인라인 액션버튼 표시, 햄버거·모바일패널 숨김
   - input-touch: 햄버거 표시, 인라인 액션버튼 숨김(겹침 방지 — 액션은 햄버거 안에 동일 존재)
   클래스 미부여(스크립트 실패) 시엔 둘 다 표시되는 안전 폴백.
   ========================================================================= */
.input-mouse .nav-touch-only { display: none !important; }
.input-mouse #mobile-menu    { display: none !important; }
.input-touch .nav-mouse-only { display: none !important; }

/* 한국어 단어 단위 줄바꿈 (2026-07-03) — 단어 중간("주/세요")이 잘리는 것 방지.
   overflow-wrap: 주문번호·이메일 같은 긴 토큰은 카드 넘침 대신 강제 개행(안전 폴백).
   공통 모달(modal.js)·토스트에 적용. 다른 영역은 레이아웃 영향 확인 후 점진 적용. */
.kr-break { word-break: keep-all; overflow-wrap: break-word; }

/* 마우스(데스크탑)도 창이 좁으면 탭 대신 햄버거로 전환 (2026-07-03).
   6/18 회귀와 다른 점: 탭을 숨기는 조건(max-width)과 같은 조건으로 햄버거를
   반드시 표시하므로 "둘 다 사라짐"이 구조적으로 불가능하다.
   1024px 이상에서 관리자 탭(9개)이 그래도 넘치면 shrink-0 + overflow-x-auto 가로 스크롤. */
@media (max-width: 1023px) {
    .input-mouse .nav-mouse-only { display: none !important; }
    .input-mouse .nav-touch-only { display: flex !important; }
    /* 햄버거 패널: 열림(.hidden 제거) 상태만 표시 — 위 기본 숨김 규칙보다 구체적이라 우선 적용 */
    .input-mouse #mobile-menu:not(.hidden) { display: block !important; }
}