/*
 * 对话框面板（DialogPanel.razor）的样式。
 *
 * 为什么要自己写：BlazorCore 的 ShowDialog 只提供**全屏半透明遮罩** ——
 * .BlazorDialog 是个 position:fixed 的 flex 容器，z-index 由 blazorcore.js 递增，
 * 而面板本身没有任何样式：库里没有 .razor.css，class 名也是遗留的 BlazorDialog
 * （没有 bsc- 前缀，见 BlazorCore-Defects.md #11）。
 * 所以"边框和关闭按钮"只能宿主自己做，就是这个文件。
 *
 * 全部类名走 aio- 前缀，不与任何框架撞名。
 * 颜色用 --bsc-* 令牌（BlazorServerControls 定义），这样暗色主题自动跟随 ——
 * 不用在这里写死颜色。
 */

.dlg-panel {
    display: flex;
    flex-direction: column;

    /* 尺寸：宽不超过视口留边，高不超过视口留边。
       min(…) 而不是固定值：窄屏上自动收窄，不用写媒体查询。 */
    width: min(960px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);

    background: var(--bsc-bg, #fff);
    color: var(--bsc-text, #1f2933);

    /* 边框 + 圆角 + 阴影：这三样就是"面板"和"遮罩"的分界 */
    border: 1px solid var(--bsc-border, #c8cdd4);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);

    /* 关键：正文要能滚。没有它，长主题会把面板撑出视口，
       而外层遮罩是 fixed 的，撑出去的部分直接被裁掉且滚不动。 */
    overflow: hidden;
}

/* ---- 页眉 ---- */

.dlg-panel__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    padding: .55rem .5rem .55rem .9rem;
    border-bottom: 1px solid var(--bsc-border, #c8cdd4);
    background: var(--bsc-bg-subtle, #f5f6f8);
}

.dlg-panel__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .95rem;
    font-weight: 600;
    /* 长标题截断而不是把关闭按钮挤出去 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 页眉标题的链接变体：指向这个内容的永久地址（新标签打开）。
   和纯文字标题一样会被截断，所以继承同一套 ellipsis 规则。 */
.dlg-panel__title--link {
    color: var(--bsc-primary, #2b6cb0);
    text-decoration: none;
    cursor: pointer;
}

.dlg-panel__title--link:hover {
    text-decoration: underline;
}

/* ---- 关闭按钮 ----
   刻意做成"裸 ×"而不是 BscButton：
   BscButton 写死 type="button"、没有 ChildContent，而且一个实心/描边按钮
   放在页眉右侧会跟标题抢注意力。原生 <button> 正好够用，
   而且 BSC 手册 C.3 禁的是"受控的选择类控件"，普通 button 不在其列。 */

.dlg-panel__close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--bsc-text-muted, #52606d);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.dlg-panel__close:hover {
    background: var(--bsc-bg-subtle, #f5f6f8);
    color: var(--bsc-text, #1f2933);
}

.dlg-panel__close:focus-visible {
    outline: 2px solid var(--bsc-primary, #2b6cb0);
    outline-offset: 1px;
}

/* ---- 正文 ---- */

.dlg-panel__body {
    flex: 1 1 auto;
    min-height: 0;      /* 允许在 flex 里收缩，否则撑破 max-height */
    overflow-y: auto;   /* 内容长时只滚正文，页眉和关闭键留在原地 */
    padding: 1rem 1.25rem;
}

/* 正文里的 h1 是页面标题，弹窗里再放大一号就太喧宾夺主了 */
.dlg-panel__body > h1:first-child {
    font-size: 1.35rem;
    margin-top: 0;
}

/* 窄屏：面板几乎占满，页眉收窄一点 */
@media (max-width: 575.98px) {
    .dlg-panel {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1.5rem);
    }

    .dlg-panel__body {
        padding: .75rem;
    }
}