/* ============================================================
   悦恒中医门诊管理系统 - 全局响应式适配样式 (responsive.css)
   版本: v1.0
   目标分辨率: 1024×768 与 1920×1080 双端良好显示

   设计依据（本系统为「侧边栏 + topbar + iframe」架构）:
     屏幕 1024×768  → iframe 内容区 744px（侧边栏展开）/ 956px（折叠）
     屏幕 1920×1080 → iframe 内容区 1640px（侧边栏展开）

   ⚠️ 注意：iframe 内页面做宽度判断时，取的是【iframe 视口宽度】而非屏幕宽度，
      因此断点按内容区宽度设计：
        --bp-compact : 820px  （≤ 此值进入紧凑模式，覆盖 1024 屏展开态）
        --bp-narrow  : 640px  （≤ 此值进入极窄模式，单列布局）
        --bp-wide    : 1400px （≥ 此值进入宽松模式，1920 屏，本版不做改动）

   本文件应置于各页面 </head> 之前（即所有页面内联 <style> 之后），
   以保证同特异性下优先生效。
   ============================================================ */

/* ============================================================
   一、高度链修复（最关键）
   问题：iframe 高度 = calc(100vh - topbar)，内部页面若设 height:100vh
        会多出 topbar 高度，配合 overflow:hidden 导致底部内容永久被截断。
   方案：iframe 内页面统一以 100% 承接父级高度。
   ============================================================ */
html {
    height: 100%;
}

body {
    height: 100%;
    min-height: 0;
}

/* 覆盖页面内联的 height:100vh —— 修正为 100%（iframe 场景正确值） */
body[style*="100vh"],
body.height-vh {
    height: 100% !important;
}

/* 顶层页面（非 iframe）仍可使用视口高度：由 index.html / login.html 自行管理 */
body.app-shell,
body.login-page {
    height: 100vh;
}

/* ============================================================
   二、通用自适应（所有宽度）
   ============================================================ */
img,
svg,
canvas {
    max-width: 100%;
}

/* 表格容器默认允许横向滚动，避免窄屏挤压 */
.table-wrapper,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 长文本不撑破布局 */
.data-table td,
.data-table th {
    word-break: break-word;
}

/* 表单栅格：三列/多列固定栅格在窄屏改为自适应 */
@media (max-width: 820px) {

    .form-row,
    .form-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 10px !important;
    }

    .full-width {
        grid-column: 1 / -1 !important;
    }

    /* 两栏详情栅格 → 单栏 */
    .detail-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   二·补、表格横向滚动保护（≤ 1120px）
   覆盖场景：1024×768 下侧边栏折叠后内容区 956px、展开时 744px。
   列数 ≥ 7 的表格若压缩会导致内容换行难读，故设最小宽度并允许横滚。
   ============================================================ */
@media (max-width: 1120px) {

    .card:has(> .table-wrapper),
    .card:has(> table) {
        overflow-x: auto;
    }

    /* 列数 ≥ 7 的表格设置最小宽度，避免单元格挤压换行 */
    table:has(> thead > tr > th:nth-child(7)) {
        min-width: 720px;
    }

    table:has(> thead > tr > th:nth-child(9)) {
        min-width: 900px;
    }

    table:has(> thead > tr > th:nth-child(11)) {
        min-width: 1080px;
    }
}

/* ============================================================
   三、紧凑模式（≤ 820px）—— 对应 1024×768 侧边栏展开态（744px）
   策略：压缩留白、缩小字号与控件高度，把空间让给内容
   ============================================================ */
@media (max-width: 820px) {

    /* ---- 页面留白压缩 ---- */
    body {
        padding: 12px !important;
    }

    .container {
        padding: 12px !important;
        max-width: 100% !important;
    }

    .page-header,
    .header {
        margin-bottom: 14px !important;
        gap: 8px !important;
    }

    .page-title,
    .header h1,
    .page-header h1,
    .page-header h2 {
        font-size: 20px !important;
    }

    .page-subtitle {
        font-size: 12px !important;
    }

    /* ---- 卡片与内边距 ---- */
    .card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .card-header,
    .card-body {
        padding: 12px 14px !important;
    }

    .card-title {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    /* ---- 统计卡片网格：自动换行 ---- */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    .stat-card .num {
        font-size: 18px !important;
    }

    .stat-card .label {
        font-size: 11px !important;
    }

    /* ---- 内容面板/双栏 → 单栏 ---- */
    .card-grid,
    .grid-2,
    .two-column {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ---- 弹性横向布局自动换行，避免溢出 ---- */
    .filters,
    .toolbar,
    .header-actions,
    .flow-actions,
    .action-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ---- 按钮与控件紧凑化 ---- */
    .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .btn-sm {
        padding: 3px 8px !important;
        font-size: 11px !important;
    }

    /* ---- 表格紧凑化 ---- */
    .data-table th,
    .data-table td,
    table th,
    table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* ---- 表单紧凑化 ---- */
    .form-group {
        margin-bottom: 12px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .filter-group input,
    .filter-group select {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* ---- 弹窗适配：留出边距，避免顶天立地 ---- */
    .modal-content,
    .detail-card {
        width: 94% !important;
        max-width: 94% !important;
        max-height: 88vh !important;
        padding: 16px !important;
    }

    /* ---- Toast 不遮挡内容 ---- */
    .toast {
        right: 12px !important;
        bottom: 12px !important;
        left: 12px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   四、极窄模式（≤ 640px）—— 小窗 / 侧边栏折叠后的极端情况
   知识库类左右分栏改为上下分栏
   注意：选择器严格限定为知识库专属容器类，避免误伤主框架及其他页面
        内自带的 .sidebar（如 pharmacy/receive.html 的页面级侧栏）
   ============================================================ */
@media (max-width: 640px) {

    .container:has(> .sidebar-tree),
    .container:has(> .content-area),
    .gb-container,
    .kb-container,
    .app-container {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .container:has(> .sidebar-tree) > .sidebar-tree,
    .container:has(> .content-area) > .sidebar,
    .gb-container > .sidebar,
    .kb-container > .sidebar,
    .app-container > .sidebar {
        width: 100% !important;
        height: 40% !important;
        flex-shrink: 0 !important;
        padding: 12px !important;
    }

    .container:has(> .content-area) > .content-area,
    .gb-container > .main-content,
    .kb-container > .content-panel,
    .app-container > .main-content {
        height: auto !important;
        flex: 1 !important;
        min-height: 0 !important;
        padding: 14px !important;
    }

    /* ---- 强行单列 ---- */
    .form-row,
    .form-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- 弹窗全宽 ---- */
    .modal-content,
    .detail-card {
        width: 96% !important;
        max-width: 96% !important;
    }
}

/* ============================================================
   五、知识库类左右分栏页紧凑适配（641 ~ 820px）
   场景：1024×768 且主框架侧边栏展开时，iframe 内容区仅 744px。
        左侧目录栏（320~360px）会导致右侧详情区只剩 ~380px，
        故收缩侧栏至 250px 并压缩内边距，把空间让给正文。
   ============================================================ */
@media (max-width: 820px) and (min-width: 641px) {

    .container:has(> .sidebar-tree),
    .container:has(> .content-area),
    .gb-container,
    .kb-container,
    .app-container {
        gap: 12px !important;
    }

    /* 仅收缩知识库类页面的目录侧栏（不影响页面级导航侧栏） */
    .container:has(> .sidebar-tree) > .sidebar-tree,
    .container:has(> .content-area) > .sidebar,
    .gb-container > .sidebar,
    .kb-container > .sidebar,
    .app-container > .sidebar {
        width: 250px !important;
        padding: 12px !important;
    }

    .container:has(> .content-area) > .content-area,
    .gb-container > .main-content,
    .kb-container > .content-panel,
    .app-container > .main-content {
        padding: 16px !important;
    }

    .detail-title {
        font-size: 20px !important;
    }

    .detail-label {
        font-size: 14px !important;
    }

    .detail-content {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* 树形列表紧凑 */
    .tree-category-header {
        padding: 8px 10px !important;
    }

    .tree-disease-item,
    .list-item {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    /* 证候等宽表格允许横向滚动 */
    .syndrome-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}

/* ============================================================
   六、宽松模式（≥ 1400px）—— 对应 1920×1080
   原则：完全保持系统原有版式，不做任何改动，确保宽屏观感不缩水。
        原设计各页面容器 max-width:1400px、表格 12px 行距等均照旧生效。
        本断点仅保留占位说明，如需宽屏优化可在此追加规则。
   ============================================================ */

/* ============================================================
   七、超宽屏（≥ 1800px）—— 2K/4K 显示器
   同样保持原设计不变（内容居中留白由各页面自身的 max-width 控制）。
   ============================================================ */

/* ============================================================
   八、打印保护：确保上述适配不影响打印版式
   ============================================================ */
@media print {

    html,
    body {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    .table-wrapper,
    .table-responsive {
        overflow: visible !important;
    }

    table:has(> thead > tr > th:nth-child(7)),
    table:has(> thead > tr > th:nth-child(9)),
    table:has(> thead > tr > th:nth-child(11)) {
        min-width: 0 !important;
    }

    .no-print,
    .sidebar,
    .topbar,
    .filters,
    .pagination,
    .toast {
        display: none !important;
    }
}