/*Common*/
.ant-input-group-addon {border-radius:5px;}
.self-required label:before {content:"*";color:#f00;margin-right:5px;}
.self-title {font-weight:bold;padding:10px;}
.self-form {margin:0 10px;padding:10px;background-color:#fff;border-radius:5px;}
.self-form-row {display:flex;gap:10px;margin:5px 0;}
.self-form-item {display:flex;align-items:center;width:50%;}
.self-form-item label {flex:0 0 auto;width:60px;text-align:right;margin-right:10px;}
.self-form-input {flex:1 1 auto;}
.self-table {margin:0 10px;padding:10px;background-color:#fff;border-radius:5px;}
.self-table .ant-table-wrapper {padding:0;}
.self-tool {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.self-tool .title {font-weight:bold;}
.self-action {text-align:center;position:absolute;left:0;right:0;bottom:50px;}
.self-action button {width:120px;margin:0 10px;}

.self-modal .ant-modal {top:80px;max-width:calc(100vw - 80px);max-height:calc(100vh - 130px);}

.self-search .head {padding:10px;}
.self-search .body {overflow:auto;max-height:calc(100vh - 350px);}
.self-search .foot {padding:10px;text-align:center;}
.self-search .foot button {width:88px;margin:0 10px;}

/*Layout*/
.self-wrapper {
    position:absolute;top:0;left:0;right:0;bottom:0;background-color:#f5fbff;
    display:grid;grid-template-rows:80px auto 50px;
}
.self-head {display:flex;justify-content:space-between;align-items:center;padding:10px 20px;}
.self-head .app-name {font-size:30px;font-weight:bold;}
.self-head .app-date {font-size:15px;}
.self-head .app-time {font-size:26px;font-weight:bold;text-align:right;}
.self-body {}
.self-foot {text-align:center;line-height:50px;color:#919191;}

/*Home - 横屏布局（修复卡片被拉伸问题）*/
.self-home {display:flex;flex-direction:column;height:100%;overflow:auto;padding:20px 0;}
.self-home img {width:100%;height:100%;}

/* Banner - 保持原始宽高比 */
.self-banner {
    flex: 0 0 auto;
    aspect-ratio: 1032/440;
    max-height: 240px;
    margin: 0 40px 20px;
    overflow: hidden;
    border-radius: 12px;
}
.self-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 菜单 - 横屏：5 个卡片，4+1 网格布局 */
.self-menu, .self-menu-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr) 0.6fr;
    grid-template-rows: 1fr;
    gap: 24px;
    padding: 0 40px 20px;
    max-height: 520px;
    align-items: stretch;
}
.self-menu-card {
    position: relative;
    cursor: pointer;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    max-height: 320px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 16px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.self-menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.self-menu-card img {
    max-width: 55%;
    max-height: 55%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 12px;
}
.self-menu-card.is-disabled {pointer-events:none;opacity:.72;}

.self-menu-busy {position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 36px;background:rgba(0,0,0,.72);color:#fff;border-radius:5px;font-size:24px;z-index:1000;}
.self-menu .print {width:30%;}
.self-menu-left {display:flex;gap:10px;flex-wrap:wrap;width:70%;}
.self-menu-left > div {width:calc(50% - 10px);}

/* 大屏 (1600+) 4+1 网格 */
@media (min-width: 1600px) {
    .self-menu, .self-menu-grid {
        grid-template-columns: repeat(4, 1fr) 0.6fr;
        max-height: 560px;
    }
    .self-menu-card {
        max-height: 360px;
    }
}

/* 中屏 (1280-1600) 3+2 网格 */
@media (max-width: 1599px) and (min-width: 1280px) {
    .self-menu, .self-menu-grid {
        grid-template-columns: repeat(3, 1fr);
        max-height: 500px;
    }
    .self-menu-card {
        max-height: 280px;
    }
}

/* 平板/小屏 (1024-1279) 2-3列 */
@media (max-width: 1279px) and (min-width: 1025px) {
    .self-menu, .self-menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 0 20px 16px;
        max-height: 460px;
    }
    .self-menu-card {
        max-height: 240px;
    }
    .self-banner {
        margin: 0 20px 16px;
        max-height: 200px;
    }
}

/*Order*/
.self-order {}
.self-addon .ant-input-group-addon {width:80px;padding:0;}
.self-addon .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {padding:0;}
.self-suite {margin:0 10px 10px 10px;padding:10px;border:1px solid #f1f1f1;border-radius:5px;}
.self-suite.active {border-color:#1189f1;}
.self-suite .items {display:flex;flex-wrap:wrap;margin:0;padding:10px 0 0 0;}
.self-suite .items li {width:33%;height:30px;line-height:30px;overflow:hidden;padding-right:10px;}
.self-suite .items li > .ant-btn-link {display:inline-block;width:10px;height:30px;line-height:30px;}

/* ========== 窄屏适配 (竖屏/小屏自助机) ========== */
@media screen and (max-width: 1024px) {
    /* Layout - 头部紧凑 */
    .self-wrapper {
        grid-template-rows: 60px auto 40px;
    }
    .self-head {
        padding: 6px 10px;
    }
    .self-head .app-name {
        font-size: 20px;
    }
    .self-head .app-date {
        font-size: 12px;
    }
    .self-head .app-time {
        font-size: 18px;
    }
    .self-foot {
        line-height: 40px;
        font-size: 12px;
    }

    /* Home - 菜单垂直堆叠 */
    .self-home {
        padding: 8px 0;
    }
    .self-banner {
        margin: 0 8px 12px;
        aspect-ratio: auto;
        max-height: 120px;
    }
    .self-banner img {
        max-height: 120px;
        object-fit: cover;
        width: 100%;
    }
    .self-menu, .self-menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 0 8px 8px;
        max-height: none;
    }
    .self-menu-card {
        max-height: 200px;
        aspect-ratio: auto;
        padding: 12px 8px;
    }
    .self-menu-card img {
        max-width: 50%;
        max-height: 50%;
        margin-bottom: 8px;
    }
    .self-menu-busy {
        font-size: 18px;
        padding: 14px 24px;
    }

    /* 表单 - 竖排 */
    .self-form-row {
        flex-direction: column;
        gap: 6px;
    }
    .self-form-item {
        width: 100%;
    }
    .self-form-item label {
        width: auto;
        text-align: left;
        margin-right: 8px;
        min-width: 50px;
    }

    /* Table - 自适应 */
    .self-table {
        margin: 0 5px;
        padding: 5px;
        overflow-x: auto;
    }

    /* Actions */
    .self-action {
        position: static;
        padding: 10px 0;
    }
    .self-action button {
        width: 100px;
        margin: 0 5px;
    }

    /* 模态框 */
    .self-modal .ant-modal {
        top: 40px;
        max-width: calc(100vw - 30px);
        max-height: calc(100vh - 70px);
    }

    /* 搜索 */
    .self-search .body {
        max-height: calc(100vh - 280px);
    }

    /* 套件 */
    .self-suite .items li {
        width: 50%;
        font-size: 13px;
    }

    /* 图片自适应 */
    .self-home img,
    .self-banner img {
        height: auto;
        max-height: 150px;
        object-fit: cover;
    }

    /* 自助机 - 身份证登记页 */
    .self-dialog {
        padding: 10px !important;
        margin: 5px !important;
    }
    .self-dialog-title {
        font-size: 18px !important;
        padding: 8px !important;
    }
    .self-dialog-tip {
        font-size: 14px !important;
        padding: 6px !important;
    }
    .self-dialog-actions {
        flex-direction: column;
        gap: 8px;
    }
    .self-dialog-actions button {
        width: 100% !important;
    }

    /* 自助机 - stage 区域 */
    .self-stage {
        padding: 10px !important;
    }
    .self-stage-title {
        font-size: 18px !important;
    }
    .self-stage-tip {
        font-size: 14px !important;
    }
    .self-stage-card {
        padding: 10px !important;
        margin: 5px 0 !important;
    }

    /* 身份证引导图 */
    .self-idcard-guide {
        max-width: 100%;
        height: auto;
    }
    .self-idcard-guide img {
        max-width: 100%;
        height: auto;
    }
    .self-idcard-pulse {
        transform: scale(0.8);
    }

    /* 自助机 - 收费/报告页 */
    .self-order {
        padding: 5px;
    }

    /* 错误页面 - Ant Design Result 组件 */
    .ant-result {
        padding: 20px 10px !important;
    }
    .ant-result-title {
        font-size: 36px !important;
    }
    .ant-result-subtitle {
        font-size: 14px !important;
    }
    .ant-result-image {
        margin-bottom: 10px !important;
    }
    .ant-result-image svg {
        width: 120px !important;
        height: auto !important;
    }

    /* 遮罩层 */
    .self-mask {
        background: rgba(0,0,0,0.5) !important;
    }
}

/* 超窄屏 (< 480px) */
@media screen and (max-width: 480px) {
    .self-wrapper {
        grid-template-rows: 50px auto 36px;
    }
    .self-head {
        padding: 4px 8px;
    }
    .self-head .app-name {
        font-size: 16px;
    }
    .self-head .app-date {
        font-size: 10px;
    }
    .self-head .app-time {
        font-size: 14px;
    }
    .self-foot {
        line-height: 36px;
        font-size: 11px;
    }
    .self-banner {
        margin: 6px 4px;
    }
    .self-menu {
        margin: 0 4px;
    }
    .self-menu-left {
        gap: 6px;
    }
    .self-menu-card {
        padding: 6px;
        font-size: 14px;
    }
    .self-menu-card img {
        max-width: 70%;
    }
    .self-menu-grid {
        gap: 6px;
        padding: 0 2px;
    }
    .self-banner img {
        max-height: 80px;
    }
    .self-menu-busy {
        font-size: 14px;
        padding: 10px 16px;
    }
    .self-suite .items li {
        width: 100%;
    }
    .self-action button {
        width: 80px;
        font-size: 13px;
    }
    .self-title {
        font-size: 15px;
    }

    /* 身份证登记页 */
    .self-dialog-title {
        font-size: 16px !important;
    }
    .self-dialog-tip {
        font-size: 13px !important;
    }
    .self-stage-title {
        font-size: 16px !important;
    }
    .self-stage-tip {
        font-size: 13px !important;
    }
    .self-idcard-pulse {
        transform: scale(0.6);
    }

    /* 错误页面 */
    .ant-result-title {
        font-size: 28px !important;
    }
    .ant-result-subtitle {
        font-size: 13px !important;
    }
    .ant-result-image svg {
        width: 90px !important;
    }
}