/* ---- 휴대폰 폭 (768px 미만) ----
   좌측 메뉴를 감추고 위쪽 바의 ☰ 버튼으로 왼쪽에서 밀려 나오게 한다 (Layouts/BasicLayout.razor 의 mobile_menu_open).
   가로 폭이 좁으므로 바깥 여백·카드 안쪽 여백을 줄인다 */

/* 레이아웃을 감싸는 틀: 상자를 만들지 않는다 (라이브러리 레이아웃의 높이 계산을 그대로 둔다) */
.app-shell {
    display: contents;
}

.mobile-menu-btn {
    display: none;
}

/* 위쪽 바의 회사 로고·글자 (Layouts/BasicLayout.razor 의 brand). 넓은 화면에서는 왼쪽 메뉴 위에 있으므로 감춘다 */
.header-brand {
    display: none;
}

/* 긴 편집 화면을 휴대폰 폭에서 탭으로 나눈다 (예: Pages/CustomerSection/CustomerEdit.razor).
   탭 줄(.mobile-tabs)과, 지금 탭이 아닌 카드에 붙는 .mobile-tab-hidden 은 넓은 화면에서는 아무 일도 하지 않는다 */
.mobile-tabs {
    display: none;
}

/* 고객목록 검색 조건 접기 (Pages/CustomerSection/CustomerList.razor). 넓은 화면에서는 접기 버튼·요약 없이 늘 펼쳐져 있다 */
.mobile-filter-toggle,
.mobile-filter-summary {
    display: none;
}

@media (max-width: 767.98px) {
    /* 좌측 메뉴: 화면 밖에 두었다가 열면 밀려 나온다. 열린 메뉴는 늘 펼친 모양(글자 포함) */
    .ant-pro-sider.ant-pro-sider-fixed {
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .mobile-menu-open .ant-pro-sider.ant-pro-sider-fixed {
        transform: none;
        box-shadow: 4px 0 16px rgba(0, 0, 0, .25);
    }

    /* 메뉴 접기 버튼(메뉴 맨 아래)은 쓰지 않는다. 바깥을 누르거나 항목을 누르면 닫힌다 */
    .ant-pro-sider-links {
        display: none;
    }

    /* 본문은 메뉴 자리(라이브러리가 붙이는 왼쪽 여백) 없이 화면 폭을 다 쓴다 */
    .ant-pro-basicLayout .ant-layout-has-sider > .ant-layout {
        padding-left: 0 !important;
    }

    .mobile-menu-mask {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, .45);
    }

    /* 위쪽 바 왼쪽 끝의 ☰ 버튼 */
    .ant-pro-global-header > *:has(> .mobile-menu-btn) {
        display: flex;
        align-items: stretch;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 40px;
        margin-left: -12px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--auth-text, #262626);
        font-size: 18px;
        cursor: pointer;
    }

    .mobile-menu-btn:active {
        background: rgba(0, 0, 0, .06);
    }

    /* 위쪽 바: 스크롤해도 화면 위에 붙어 있다 (☰·사용자 메뉴를 맨 위로 돌아가지 않고 누르게) */
    .ant-layout-header:has(> .ant-pro-global-header) {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    /* 화면 묶음 탭이 없는 화면(첫 화면 등)은 ☰ 옆에 회사 로고·글자. 왼쪽 메뉴가 화면 밖에 있어 회사 표시가 보이지 않던 자리다.
       로고 모양(흰 띠·흰색 로고)은 짙은 메뉴용이라, 흰 바 위에서는 로고 색 그대로 보인다 */
    .header-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        margin-left: 2px;
        overflow: hidden;
    }

    .header-nav ~ .header-brand {
        display: none;
    }

    .header-brand .brand-company-logo.is-white img {
        filter: none;
        max-height: 26px;
    }

    .header-brand .brand-company-text,
    .header-brand-title {
        overflow: hidden;
        color: var(--auth-text, #262626);
        font-size: 15px;
        font-weight: 700;
        line-height: 40px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-brand .brand-company-text {
        max-width: none;
    }

    .header-brand .brand-logo {
        flex: none;
        margin-right: 0;
    }

    /* 사용자 메뉴: 이름·▾ 없이 동그라미만. 이름은 동그라미를 누른 메뉴 머리와 ☰ 메뉴 맨 위 프로필에 있다.
       누르는 자리는 40×40, 동그라미 바깥 여백은 ☰ 아이콘의 왼쪽 여백(15px)과 같다 */
    .header-actions {
        gap: 0;
        padding-right: 0;
        margin-right: -6px;
    }

    .user-menu-name,
    .user-menu-caret {
        display: none;
    }

    .user-menu-btn {
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
    }

    .user-avatar {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    /* 바깥 여백·카드 안쪽 여백 */
    .ant-page-header {
        padding: 5px 12px !important;
    }

    .ant-pro-page-container-children-content {
        margin: 8px 8px 12px !important;
    }

    .ant-card-body {
        padding: 12px 10px !important;
    }

    /* 탭 줄: 본문 폭 끝까지, 스크롤해도 위쪽 바(높이 40) 바로 밑에 붙어 있다 */
    .mobile-tabs {
        position: sticky;
        top: 40px;
        z-index: 5;
        display: flex;
        margin: -8px -8px 8px;
        padding: 0 8px;
        background: #fff;
        border-bottom: 1px solid #e8e8e8;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }

    .mobile-tabs > button {
        flex: 1;
        height: 42px;
        padding: 0 4px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        color: #595959;
        font-size: 14px;
        white-space: nowrap;
    }

    .mobile-tabs > button.is-active {
        color: #1890ff;
        font-weight: 600;
        border-bottom-color: #1890ff;
    }

    .mobile-tabs-badge {
        display: inline-block;
        min-width: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #f0f0f0;
        color: #595959;
        font-size: 11px;
        font-weight: 400;
        line-height: 18px;
    }

    .mobile-tabs > button.is-active .mobile-tabs-badge {
        background: #e6f7ff;
        color: #1890ff;
    }

    .mobile-tab-hidden {
        display: none !important;
    }

    /* 탭으로 나뉜 카드는 하나씩 보이므로 카드 사이 위 여백이 필요 없다 */
    .mobile-tabs ~ .row > .mt-3 {
        margin-top: 0 !important;
    }

    /* 대화상자(Syncfusion): 정한 폭(400~600px)이 화면보다 넓으면 화면 끝에 붙는다. 비밀번호 변경 창(auth.css)처럼 양옆을 띄운다 */
    .e-dialog {
        max-width: calc(100vw - 24px) !important;
        border-radius: 10px;
        overflow: hidden;
    }

    /* 이름표 | 입력칸 두 칸 양식(.h-form, common.scss): 이름표 폭(170px)이 입력칸을 좁히므로 이름표를 입력칸 위로 */
    .h-form > div {
        flex-direction: column;
        align-items: stretch;
    }

    .h-form > div > label {
        width: auto;
        margin: 6px 0 2px;
        font-weight: 600;
    }

    /* 휴대폰에서 쓸모없는 안내 (예: "Ctrl을 누르고 링크를 클릭하시면 새창으로...") */
    .hide-on-mobile {
        display: none !important;
    }

    /* 고객목록 검색 조건: 접혀 있으면 조건 칸과 필터 초기화·건수를 감추고, 적용 중인 조건을 요약해 보인다 */
    .mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .customer-filter.is-open .mobile-filter-toggle {
        background: #e6f7ff;
        color: #1890ff;
    }

    .mobile-filter-badge {
        min-width: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #1890ff;
        color: #fff;
        font-size: 11px;
        line-height: 18px;
        text-align: center;
    }

    .customer-filter:not(.is-open) > .customer-filter-fields,
    .customer-filter:not(.is-open) .mobile-filter-extra {
        display: none !important;
    }

    .customer-filter:not(.is-open) .mobile-filter-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 6px;
        white-space: normal;
        cursor: pointer;
    }

    .mobile-filter-summary > span {
        max-width: 100%;
        overflow: hidden;
        padding: 1px 8px;
        border-radius: 10px;
        background: #f0f5ff;
        color: #2f54eb;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 펼쳤을 때 조건 칸과 버튼 줄 사이를 점선으로 나눈다 */
    .customer-filter.is-open > .customer-filter-fields {
        margin-bottom: 6px;
        padding-bottom: 8px;
        border-bottom: 1px dashed #e8e8e8;
    }

    /* 쪽 번호: 한 줄에 들어가게 작게 */
    .ant-pagination-item,
    .ant-pagination-prev,
    .ant-pagination-next,
    .ant-pagination-jump-prev,
    .ant-pagination-jump-next {
        min-width: 28px;
        height: 28px;
        margin-right: 4px;
        line-height: 26px;
    }

    .ant-pagination-prev .ant-pagination-item-link,
    .ant-pagination-next .ant-pagination-item-link {
        height: 28px;
    }
}