/* ============================================================================
   admin-ui.css —— 后台统一设计层
   目标：整个商品管理系统与「商品详情页 P4」看起来是同一套系统。

   为什么要单独一个文件：详情页的令牌原本写死在 product.html 的 <style> 里，
   后台各页又各自用 Bootstrap 默认皮肤 —— 两套颜色/圆角/字号。这里把详情页那套
   令牌提成全局，并**覆盖 Bootstrap 的组件类**，于是 14 个没改过的页面
   （供应商/分类/标签/评论/产品集/表单页…）不用逐个改也能继承新外观。

   改动约定：颜色/圆角/字号只许用下面的变量，别再往模板里写 inline style。
   ============================================================================ */

:root{
  /* —— 取自「商品详情页 P4」，两边共用同一套 —— */
  --ink:#111827;  --ink2:#4B5563;  --mut:#9CA3AF;  --line:#ECECF2;
  --acc:#4F46E5;  --acc-d:#4338CA; --acc-l:#EEF2FF; --acc-b:#E0E7FF; --acc-h:#A5B4FC;
  --ok:#059669;   --warn:#D97706;  --bad:#DC2626;   --bg:#F9FAFB;
  /* —— 形状与排版阶梯 —— */
  --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:16px; --r-pill:999px;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sidebar-width:236px; --header-height:56px;
}

body{
  background:var(--bg); color:var(--ink2);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  font-size:14px;
}

/* ============================ 壳层：侧边栏 ============================ */
.admin-sidebar{
  position:fixed; top:0; left:0; width:var(--sidebar-width); height:100vh;
  background:#fff; border-right:1px solid var(--line); color:var(--ink2);
  overflow-y:auto; z-index:1000;
}
.admin-sidebar .brand{
  padding:16px 18px; font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.2px;
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;
}
.admin-sidebar .brand i{color:var(--acc); font-size:18px}
.admin-sidebar .nav-menu{padding:10px}
.admin-sidebar .nav-item{margin:2px 0}
.admin-sidebar .nav-link{
  color:var(--ink2); padding:9px 12px; border-radius:var(--r); font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:9px; transition:background .15s,color .15s;
}
.admin-sidebar .nav-link:hover{color:var(--ink); background:#F5F5FA}
.admin-sidebar .nav-link.active{color:var(--acc); background:var(--acc-l)}
.admin-sidebar .nav-link i{font-size:16px; margin:0}
.admin-sidebar .nav-item[style]{border-top-color:var(--line) !important}

/* ============================ 壳层：顶栏 / 内容区 ============================ */
.admin-main{margin-left:var(--sidebar-width); min-height:100vh; background:var(--bg)}
.admin-header{
  background:#fff; padding:0 20px; height:var(--header-height);
  border-bottom:1px solid var(--line); box-shadow:none;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:900;
}
.admin-header h4{font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.2px; margin:0}
.admin-header .text-muted{font-size:12.5px; color:var(--mut) !important}
.admin-content{padding:18px 20px 44px}
/* Flash 走右上角浮层（沿用原有交互，只换配色与圆角） */
.flash-messages{position:fixed; top:18px; right:18px; z-index:9999; max-width:400px}
.flash-messages .alert{margin-bottom:8px; box-shadow:0 6px 20px rgba(17,24,39,.10)}

/* —— 后台历史页面在用的类名，保留但换成令牌（否则那些页会掉样式） —— */
.stat-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
           padding:16px 18px; margin-bottom:16px; box-shadow:none}
.stat-card .stat-value{font-size:28px; font-weight:800; color:var(--ink); font-family:var(--mono); line-height:1.3}
.stat-card .stat-label{color:var(--mut); margin-top:4px; font-size:12px}
.data-table{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:none}
.table-header{padding:13px 16px; border-bottom:1px solid var(--line);
              display:flex; justify-content:space-between; align-items:center}
.table-header h5{margin:0; font-weight:700; font-size:12px; color:var(--ink2); letter-spacing:.3px}
.btn-action{padding:4px 10px; font-size:12px; margin:0 2px}
.badge-status{padding:2px 8px; border-radius:var(--r-pill); font-size:10.5px; font-weight:600}

/* ============================ 通用面板 / 标题 ============================ */
/* 与详情页的 .pd-panel / .pd-sec-t 同形，供后台各页直接复用 */
.ui-panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px}
.ui-sec-t{
  font-size:12px; font-weight:700; color:var(--ink2); letter-spacing:.4px;
  display:flex; align-items:center; gap:6px; margin:0 0 11px;
}
.ui-sec-t .hint{font-weight:500; color:var(--mut); letter-spacing:0}
.ui-hr{height:1px; background:var(--line); margin:13px 0}
.ui-note{font-size:11.5px; color:var(--mut); line-height:1.65}

/* ============================ 覆盖 Bootstrap：卡片 ============================ */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:none;
}
.card-header{background:#fff; border-bottom:1px solid var(--line); padding:12px 16px;
             font-size:12px; font-weight:700; color:var(--ink2); letter-spacing:.3px}
.card-body{padding:15px 16px}
.card-footer{background:#fff; border-top:1px solid var(--line); padding:11px 16px}

/* ============================ 覆盖 Bootstrap：按钮 ============================ */
.btn{
  border-radius:9px; font-size:12.5px; font-weight:600; padding:6px 12px;
  border-color:#E5E7EB; transition:.15s; display:inline-flex; align-items:center; gap:5px;
}
.btn-sm{padding:4px 10px; font-size:12px; border-radius:var(--r-sm)}
.btn:focus,.btn:focus-visible{box-shadow:0 0 0 3px var(--acc-b); outline:0}
.btn-primary{background:var(--acc); border-color:var(--acc); color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--acc-d); border-color:var(--acc-d); color:#fff}
.btn-outline-primary{color:var(--acc); border-color:var(--acc-b)}
.btn-outline-primary:hover,.btn-outline-primary:focus{background:var(--acc-l); color:var(--acc); border-color:var(--acc-h)}
.btn-outline-secondary{color:var(--ink2); border-color:#E5E7EB}
.btn-outline-secondary:hover,.btn-outline-secondary:focus{background:#F9FAFB; color:var(--acc); border-color:var(--acc-h)}
.btn-outline-danger{color:var(--bad); border-color:#FECACA}
.btn-outline-danger:hover,.btn-outline-danger:focus{background:#FEF2F2; color:var(--bad); border-color:#FCA5A5}
.btn-outline-success{color:var(--ok); border-color:#A7F3D0}
.btn-outline-success:hover,.btn-outline-success:focus{background:#ECFDF5; color:var(--ok); border-color:#6EE7B7}
.btn-secondary{background:#fff; border-color:#E5E7EB; color:var(--ink2)}
.btn-secondary:hover{background:#F9FAFB; color:var(--acc); border-color:var(--acc-h)}
.btn-link{color:var(--acc); text-decoration:none; font-weight:600}
.btn-link:hover{color:var(--acc-d)}

/* ============================ 覆盖 Bootstrap：表单 ============================ */
.form-control,.form-select{
  border-radius:9px; border-color:#E5E7EB; font-size:13px; color:var(--ink);
  padding:6px 10px; background-color:#fff;
}
.form-control:focus,.form-select:focus{
  border-color:var(--acc-h); box-shadow:0 0 0 3px var(--acc-b);
}
.form-control::placeholder{color:#C4C4CE}
.form-label{font-size:12px; font-weight:600; color:var(--ink2); margin-bottom:4px}
.form-text,.form-check-label{font-size:12px; color:var(--mut)}
.form-check-input:checked{background-color:var(--acc); border-color:var(--acc)}
.form-check-input:focus{border-color:var(--acc-h); box-shadow:0 0 0 3px var(--acc-b)}
.input-group-text{background:var(--bg); border-color:#E5E7EB; font-size:12.5px; color:var(--ink2); border-radius:9px}

/* ============================ 覆盖 Bootstrap：表格 ============================ */
.table{--bs-table-bg:transparent; font-size:12.5px; color:var(--ink2); margin-bottom:0}
.table>thead th{
  font-size:10.5px; font-weight:600; color:var(--mut); letter-spacing:.3px;
  border-bottom:1px solid var(--line); white-space:nowrap; padding:6px 8px; background:transparent;
}
.table>tbody td{padding:8px; border-bottom:1px dashed #F3F4F8; vertical-align:middle}
.table>tbody tr:last-child>td{border-bottom:0}
.table-hover>tbody>tr:hover>*{background:#FAFAFE; --bs-table-accent-bg:#FAFAFE}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:#FCFCFE}
.table-responsive{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; padding:2px 8px}

/* ============================ 覆盖 Bootstrap：徽标 / 提示 / 分页 ============================ */
.badge{font-weight:600; font-size:10.5px; padding:2px 8px; border-radius:var(--r-pill)}
.badge.bg-primary,.badge.text-bg-primary{background:var(--acc-l) !important; color:var(--acc) !important}
.badge.bg-success,.badge.text-bg-success{background:#ECFDF5 !important; color:#047857 !important}
.badge.bg-warning,.badge.text-bg-warning{background:#FFFBEB !important; color:#B45309 !important}
.badge.bg-danger,.badge.text-bg-danger{background:#FEF2F2 !important; color:#B91C1C !important}
.badge.bg-secondary,.badge.text-bg-secondary{background:#F3F4F6 !important; color:var(--ink2) !important}

.alert{border-radius:var(--r); font-size:12.5px; padding:10px 13px; border-width:1px}
.alert-success{background:#ECFDF5; border-color:#A7F3D0; color:#065F46}
.alert-danger{background:#FEF2F2; border-color:#FECACA; color:#991B1B}
.alert-warning{background:#FFFBEB; border-color:#FDE68A; color:#B45309}
.alert-info{background:var(--acc-l); border-color:var(--acc-b); color:#3730A3}

.page-link{color:var(--ink2); border-color:var(--line); font-size:12.5px; padding:5px 10px}
.page-link:hover{background:var(--acc-l); color:var(--acc); border-color:var(--acc-b)}
.page-item.active .page-link{background:var(--acc); border-color:var(--acc); color:#fff}
.page-item.disabled .page-link{color:#C4C4CE; border-color:var(--line)}

/* ============================ 覆盖 Bootstrap：导航 / 下拉 / 弹窗 ============================ */
.nav-tabs{border-bottom:1px solid var(--line)}
.nav-tabs .nav-link{
  border:0; border-bottom:2px solid transparent; border-radius:0; font-size:13px; font-weight:600;
  color:#6B7280; padding:8px 13px;
}
.nav-tabs .nav-link:hover{border-color:transparent; color:var(--ink)}
.nav-tabs .nav-link.active{color:var(--acc); background:transparent; border-bottom-color:var(--acc)}
.dropdown-menu{border-color:var(--line); border-radius:var(--r); box-shadow:0 6px 20px rgba(17,24,39,.10); font-size:13px; padding:5px}
.dropdown-item{border-radius:var(--r-sm); padding:6px 10px; color:var(--ink2)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--acc-l); color:var(--acc)}
.modal-content{border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 12px 40px rgba(17,24,39,.16)}
.modal-header,.modal-footer{border-color:var(--line); padding:13px 16px}
.modal-title{font-size:14px; font-weight:800; color:var(--ink)}

/* ============================ 语义色小工具（与详情页同色） ============================ */
.chip{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; line-height:1.6;
      padding:0 6px; border-radius:9px; background:#F3F4F6; color:var(--ink2); border:1px solid #E5E7EB;
      white-space:nowrap}
.chip.ok{background:#ECFDF5; color:#047857; border-color:#A7F3D0}
.chip.warn{background:#FFFBEB; color:#B45309; border-color:#FDE68A}
.chip.bad{background:#FEF2F2; color:#B91C1C; border-color:#FECACA}
.chip.info{background:var(--acc-l); color:#4338CA; border-color:var(--acc-b)}
.chip.mute{background:#F9FAFB; color:var(--mut)}
.mono{font-family:var(--mono)}
.text-muted{color:var(--mut) !important}