/* ============================================================
   공통 (모든 페이지, partials/head-css.php)
   ============================================================ */

/* 목록 표: 회원 목록의 색을 기본(A)으로, 한 행씩 아주 조금 다른 색(B)을 번갈아 씁니다.
   B 는 라이트·다크 테마 모두 글자색 쪽으로 2.5% 섞은 색, 롤오버는 3D 모델 카드(assets/css/model.css)와 같은 5% */
.table.list-table {
    --bs-table-hover-bg: rgba(var(--bs-black-rgb), 0.05);
    --list-table-stripe-bg: rgba(var(--bs-emphasis-color-rgb), 0.025);
}
.table.list-table:not(.list-table-group) > tbody > tr:nth-of-type(even) > *,
.table.list-table > tbody > tr.list-table-stripe > * {
    --bs-table-bg-type: var(--list-table-stripe-bg);
}
/* list-table-group: 화면에서 행을 거르거나 같은 주문 행을 한 색으로 묶는 표는 스크립트가 B 행에 list-table-stripe 를 붙입니다. */

/* 목록의 선택 체크박스 칸 (모든 목록 공통): 40px 고정, 체크박스는 기본 크기로 가운데, 칸 어디를 눌러도 선택됩니다.
   <th|td class="list-check"><label class="list-check-label"><input type="checkbox" class="form-check-input" ...></label></th|td> */
.table.list-table > * > tr > .list-check {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}
.list-check-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.25rem;
    margin: 0;
    cursor: pointer;
}
.list-check-label .form-check-input {
    float: none;
    margin: 0;
    cursor: pointer;
}

/* 목록 아래 버튼 줄 (예: 왼쪽 전체·선택 삭제, 오른쪽 전체·선택 3D 모델 생성): 버튼은 두 개씩 묶음(.list-actions-group)으로 놓습니다.
   넓은 화면은 한 줄에 왼쪽·오른쪽 묶음, 좁은 화면(768px 미만)은 묶음마다 한 줄을 꽉 채우고 두 버튼을 같은 너비로 나눕니다. */
.list-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
}
.list-actions-group {
    display: flex;
    gap: .5rem;
}
@media (max-width: 767.98px) {
    .list-actions-group {
        width: 100%;
    }
    .list-actions-group > .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* 페이지 번호 (lib/common.lib.php get_paging): 모바일(576px 미만)에서는 가운데 정렬. 오른쪽에 붙이는 감싼 칸(ms-auto 등)도 한 줄을 꽉 채웁니다. */
@media (max-width: 575.98px) {
    :has(> .list-paging) {
        width: 100%;
        margin-left: 0 !important;
    }
}

/* 목록 제목 줄: 데이터가 없어 칸 너비가 제목 글자에만 맞춰질 때도 '관리' 등 제목이 줄바꿈되지 않게 합니다. */
.table.list-table > thead th {
    white-space: nowrap;
}

/* 목록 행 높이: 관리 버튼(높이 32px)이 있는 행에 맞춰 모든 목록의 행 높이를 같게 합니다. (최소 높이라 빈 목록 안내 행은 그대로) */
.table.list-table > tbody > tr {
    height: calc(32px + 1.7rem + var(--bs-border-width));
}

/* 가로 스크롤: 마우스를 쓰는 화면에서는 목록에 마우스를 올렸을 때만 스크롤바를 보여 줍니다.
   (스크롤바 자리는 그대로 두어 올릴 때 표 높이가 바뀌지 않습니다. 터치 화면은 기본 동작 그대로) */
@media (hover: hover) and (pointer: fine) {
    .table-responsive {
        scrollbar-color: transparent transparent;
    }
    .table-responsive:hover {
        scrollbar-color: rgba(var(--bs-emphasis-color-rgb), 0.3) transparent;
    }
    /* scrollbar-color 를 지원하지 않는 브라우저(Safari 등) */
    @supports not (scrollbar-color: auto) {
        .table-responsive::-webkit-scrollbar {
            height: 8px;
        }
        .table-responsive::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background-color: transparent;
        }
        .table-responsive:hover::-webkit-scrollbar-thumb {
            background-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
        }
    }
}

/* 택배사 드롭다운 (스토어 설정 기본 택배사, 발송 처리 창): 택배사가 많아 메뉴 높이를 정하고 스크롤합니다. */
.store-courier-menu {
    max-height: 320px;
    overflow-y: auto;
}

/* 창(모달) 위에 창을 하나 더 띄울 때: 두 번째 배경을 처음부터 아래 창 위(1060)에 두어, 나타나는 동안 아래 창이 반짝이지 않게 합니다.
   위에 띄우는 창은 스크립트에서 z-index 1065 로 띄웁니다. (assets/js/confirm-modal.js 등) */
.modal-backdrop ~ .modal-backdrop {
    z-index: 1060;
}
/* 창(모달) 배경: 화면 네 모서리에 맞춥니다. */
.modal-backdrop {
    inset: 0;
    width: auto;
    height: auto;
}

/* 메뉴 아이콘 보기(condensed): 템플릿은 본문 최소 높이를 1300px 로 고정해, 화면이 더 길면 메뉴 배경이 중간에서 끊기고 하단 저작권이 위로 올라옵니다.
   1300px 와 화면 높이(상단바 제외) 중 큰 값으로 맞춰, 메뉴 배경이 화면 끝까지 이어지고 저작권이 화면 맨 아래에 오게 합니다. */
html[data-menu-size="condensed"] .page-content {
    min-height: max(1300px, calc(100vh - var(--bs-topbar-height)));
}

/* 대시보드 차트: 모바일에서 차트 위를 밀어도 페이지가 세로로 스크롤되게 합니다. (차트의 확대·선택 기능은 index.php 에서 끔) */
.dash-chart,
.dash-chart .apexcharts-canvas,
.dash-chart svg {
    touch-action: pan-y;
}

/* 목록 상단 도구 모음(.list-toolbar: 검색 + 처리 버튼, .list-toolbar-buttons: 버튼 묶음)
   좁은 화면에서는 검색을 한 줄 전체로 두고, 버튼은 그 아래에 글자와 함께 2개씩 가로를 꽉 채워 배치합니다.
   버튼이 1개이거나 홀수 개일 때 마지막 버튼은 한 줄 전체를 씁니다. */
@media (max-width: 575.98px) {
    .list-toolbar > [role="search"] {
        flex: 1 1 100%;
    }

    .list-toolbar > [role="search"] .form-control {
        flex: 1 1 auto;
        width: auto !important;
    }

    .list-toolbar > .btn {
        flex: 1 1 100%;
    }

    .list-toolbar-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex: 1 1 100%;
        width: 100%;
    }

    .list-toolbar-buttons > .btn {
        --bs-btn-padding-x: 0.5rem;
    }

    .list-toolbar-buttons > .btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* 단순 링크 (공통): 평소에는 글자색 그대로, 마우스를 올리거나 키보드로 포커스하면 시스템 설정 탭처럼 글자색만 바뀝니다. (밑줄 없음)
   예: 발송 완료 목록의 발송 일시, 주문 목록의 옵션명. 앞으로 글자만 누르는 링크·버튼은 이 클래스를 씁니다. */
.text-link {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease-in-out;
}
.text-link:hover,
.text-link:focus-visible {
    color: var(--bs-link-hover-color);
}

/* 날짜 범위 입력란 (assets/js/date-range.js): 'YYYY-MM-DD ~ YYYY-MM-DD' 가 다 보이는 너비. 좁은 화면에서는 검색 줄 전체 */
.date-range-input {
    width: 230px;
    max-width: 100%;
    background-color: var(--bs-body-bg);
}
@media (max-width: 575.98px) {
    .list-toolbar > [role="search"] .form-control.date-range-input {
        flex: 1 1 100%;
    }
}

/* 회원 사진 (lib/auth.lib.php 의 member_avatar): 정사각형이 아닌 사진도 원 안을 채웁니다. */
.avatar-img {
    object-fit: cover;
}
/* 상단 프로필 메뉴 버튼의 사진 (템플릿과 같은 32px) */
.topbar-avatar .avatar-img,
.topbar-avatar .avatar-sm {
    width: 32px;
    height: 32px;
}

/* 선택 상자 공통 모양 (assets/js/select-dropdown.js): 권한 설정의 선택 버튼(.page-tree-map)과 같은 드롭다운.
   글자는 왼쪽, 아래 화살표는 오른쪽 끝, 넘치는 글자는 … 으로 줄입니다. 원래 select 는 값·필수 검사용으로 버튼 뒤에 투명하게 둡니다. */
.select-dropdown {
    position: relative;
    display: block;
    width: 100%;
}
.select-dropdown-toggle {
    position: relative;
    width: 100%;
    padding-right: 1.75rem;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-dropdown-toggle::after {
    position: absolute;
    top: 50%;
    right: .5rem;
    margin-left: 0;
    transform: translateY(-50%);
}
.select-dropdown.is-invalid .select-dropdown-toggle {
    border-color: var(--bs-form-invalid-border-color);
}
.select-dropdown .dropdown-menu {
    max-height: 320px;
    overflow-y: auto;
}
.select-dropdown-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

/* 탭(.nav-tabs): 템플릿은 선택한 탭에만 아래 여백 1px(다른 탭은 -1px)을 줘, 탭이 두 줄로 넘칠 때 선택한 탭이 있는 줄이 2px 높아집니다.
   모든 탭에 같은 여백을 줘 어느 탭을 골라도 줄 높이가 같게 합니다. (한 줄일 때 모양은 그대로) */
.nav-tabs li a.nav-link {
    margin-bottom: 1px;
}