/* ============================================================================
   public/css/admin-fill.css —— 后台页面一律铺满
   ----------------------------------------------------------------------------
   🔴 用户反馈（原话）：
      「后台还有一些页面没有铺满，也要改进一下，」

   ★ 问题（我逐个文件核对出来的，不是猜的）：
      后台共 5 个页面，每个都自己限了宽度，而且【限得各不相同】：
        admin.html              max-w-[1400px]（Tailwind 类，写死在 <main> 上）
        admin/specs.html        .sp-wrap { max-width: 1180px }
        admin/materials.html    .pm-wrap { max-width: 1120px }
        admin/pricing-tool.html .pt-wrap { max-width: 1080px }
        admin/payqr.html        .pq-wrap { max-width:  960px }
      ⇒ 在 1920 的屏上，后台内容最宽只有 1400（主后台页），
        而尺寸规格库只有 1180 —— 两边留大片空白，看着"没铺满"。
      ⇒ 而且这 5 个宽度是【5 个不同的数】，页面之间跳转时内容宽度来回变。
        这正是用户之前在前台骂过的"参差不齐"（那次修的是前台，
        见 layout-unify.css 顶部；后台被漏掉了）。

   ★ 这一版做的事：后台 5 个页面的内容容器统一铺满。
     ⚠️ 前台那次（v2.643）留了 4 个例外（login / setup / 404 / coming-soon），
        因为"单一表单页铺满 2000px 会变成一行的输入框，很难看也不好填"。
        ⚠️ 后台这次【不留例外】—— 用户明确要求"后台要铺满"。
           后台的表单页（尺寸库）是【表格为主】的，
           表格铺满反而更好用（列多了也不会挤在一起）；
           输入框都有自己的固定宽度（如 .sp-in-num { width: 4.6rem }），
           不会被拉成一行。

   ⚠️ 为什么用 !important：
      这 5 处 max-width 分别写在
        · HTML 的 <main class="max-w-[1400px]">（Tailwind 类，在 tailwind-lite.css 里）
        · HTML 内联 <style> 里的 .sp-wrap / .pm-wrap / …
      外部样式表和内联 <style> 按【文档顺序】比优先级，
      而本文件是后加载的 —— 但 Tailwind 那个类是单类选择器（0,1,0），
      和 `.sp-wrap`（0,1,0）同级，靠后能赢；不过为了【确定性】
      （不依赖加载顺序的细节），统一加 !important。
      ⚠️ 这是"有意覆盖"的正当用法：目标是纠正一个明确的错误状态，
         不是抢页面自己的控制权（页面本来也没打算留白 —— 那是历史遗留）。

   ⚠️ 本文件【只在后台 5 个页面的 <head> 里引用】——
      前台页面不加载它，所以对前台零影响。
   ⚠️ 横向边距用 clamp(1rem, 2.5vw, 2.5rem)，和前台 layout-unify.css 同一条规矩：
      窄屏不挤、宽屏不空。纵向边距各页保留原样（不统一 —— 见 layout-unify 的说明）。
   ============================================================================ */

/* ---------- 1) 主后台（admin.html）----------
   ⚠️ Tailwind lite 编译出来的类名就是 .max-w-\[1400px\]，要转义方括号 */
.app-shell .page-content > main.max-w-\[1400px\] {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(1rem, 2.5vw, 2.5rem) !important;
  padding-right: clamp(1rem, 2.5vw, 2.5rem) !important;
}

/* ---------- 2) 4 个独立工具页 ----------
   ⚠️ 这 4 个类各自只在自己的页面里用（我核对过：HTML 里各出现 2 次 = 定义 + 使用，
      全项目没有别处引用）⇒ 覆盖它们不会波及别的页面。
   ⚠️ 一起写在一个选择器组里，避免以后又出现"4 个不同的值" */
.sp-wrap,
.pm-wrap,
.pt-wrap,
.pq-wrap {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: clamp(1rem, 2.5vw, 2.5rem) !important;
  padding-right: clamp(1rem, 2.5vw, 2.5rem) !important;
}

/* ---------- 3) 兜底：后台内容区里的其它容器 ----------
   ⚠️ 以后新加的后台页如果又写了个 .xx-wrap { max-width: 1100px }，
      这条不会自动救它（类名不匹配）——
      所以新页面【别再写 max-width】，照本文件的规矩来。
   ⚠️ 这里只兜"明确写在后台壳里"的容器，不碰弹窗
      （.modal / .modal-box / .media-modal 这些是弹窗，铺满会毁掉它们）。 */
.app-shell .page-content > div[class$="-wrap"] {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
}