/*
 * 管理面板（/panel/）。
 *
 * 外壳与组件全部来自 server-console，本项目不自造视觉：
 *   base/app.css              token + 卡片 / 按钮 / 输入框 / 工作台 shell
 *   login.css                 登录卡片
 *   console/files.css         文件管理器（表格、上传区、展开行）
 *   console/files-preview.css 预览面板
 *   console/dialog.css        弹窗
 * 这里只写面板自身的布局与尺寸，以及上游用法没覆盖到的少量补充。
 */
@import url("../base/app.css");
@import url("login.css");
@import url("../console/files.css");
@import url("../console/files-preview.css");
@import url("../console/dialog.css");

/* 控制台的 .header-actions 里最多两三个按钮，且它是 flex: 0 0 auto
   （按 max-content 定宽，光加 flex-wrap 不会折行）。面板按钮多，
   必须允许收缩，窄屏才不会撑出横向滚动条。 */
.header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar .header-actions,
.panel-heading .header-actions {
  flex: 1 1 auto;
  min-width: 0;
}

.signin-title {
  margin: 0 0 var(--space-5);
  font-size: 16px;
  letter-spacing: -0.03em;
}

.console-wordmark strong {
  font-size: 14px;
  font-weight: 500;
}

/* ------------------------------------------------------ 顶栏的幻灯片选择 */

.deck-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 12px;
}
.deck-picker select {
  width: auto;
  min-width: 10rem;
  max-width: min(18rem, 40vw);
}

/* ------------------------------------------------------------- 表格补充 */

/* 控制台的操作列是按 6 个 30px 图标式按钮算出来的，标签只有 1–2 个字。
   面板这里是中文文字按钮（最多 4 个、标签最多 4 个字），
   改成「按内容定宽 + 右对齐」，否则标签会被挤断。 */
.file-table {
  --file-action-button-width: 0px;
  --file-action-column-fixed: 260px;
  --file-action-column-width: calc(var(--file-action-column-fixed) + 2 * var(--table-inset));
}
.file-action-group {
  display: flex;
  justify-content: flex-end;
  gap: var(--file-action-gap, 4px);
}
.file-action-button {
  width: auto;
  min-width: 0;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  white-space: nowrap;
}

/* 状态标跟在文件名后面；.file-entry-name 本身已是 flex + 垂直居中，
   所以这里只控制自己的尺寸与配色。 */
.state-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
.state-tag.published {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
}
.state-tag.built {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}

/* --------------------------------------------------------------- 预览 */

.preview-frame {
  width: 100%;
  height: 30rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  background: #fff;
}

/* --------------------------------------------------------- 编辑与日志 */

.deck-editor {
  min-height: 24rem;
  padding: var(--space-4);
  resize: vertical;
  font-size: 14px;
  line-height: 1.7;
}

.readout {
  margin: 0;
  max-height: 14rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: var(--space-3);
  background: var(--subtle);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.readout:empty {
  display: none;
}

/* --------------------------------------------------- 弹窗里的表单字段 */

/* dialog.css 只给直接塞进弹窗的 .form-control 补了上边距，
   多个字段要自己排。 */
.dialog-fields {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.dialog-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.dialog-fields .dialog-hint {
  color: var(--faint);
  font-size: 11px;
}

/* --------------------------------------------------------- 公开链接行 */

/* 结构用 server-console 分享面板的 .file-share-field / .file-share-slug，
   只补它没覆盖的两点：链接占满剩余宽度、按钮尺寸一致。 */
.file-share-slug > span {
  flex: 1 1 auto;
}
.file-share-slug .plain-button {
  flex: 0 0 auto;
  height: 28px;
  padding-inline: 10px;
  font-size: 11px;
}
a.share-link-action {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
a.share-link-action[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.55;
}

/* components.css 的 .toast 只管外观，显隐交给 .show */
.toast {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.toast.show {
  opacity: 1;
}

@media (max-width: 900px) {
  .deck-picker {
    flex: 1 1 100%;
  }
  .deck-picker select {
    max-width: none;
    flex: 1;
  }
}

/* 窄屏下分享字段改成上下两行，右侧按钮才不会被挤掉 */
@media (max-width: 700px) {
  .file-share-field {
    grid-template-columns: 1fr;
  }
}