/* SayHey 运营后台主题 — 按 DESIGN.md（Seline / 暖石纸面 + 单一青色强调）覆盖 Tabler 默认样式。
   Roobert 无免费替代，按规范用 Inter Tight 代 display，Inter 代正文。 */

:root {
  --color-stone-canvas: #fafaf9;
  --color-pure-white: #ffffff;
  --color-stone-border: #e8e6e5;
  --color-stone-muted: #d6d3d1;
  --color-ash-gray: #a8a29e;
  --color-warm-gray: #78716c;
  --color-ink-black: #0c0a09;
  --color-soot: #1c1917;
  --color-sky-wash: #c1e1f7;
  --color-cyan-signal: #3ba6f1;
  --color-cyan-edge: #3398e1;

  --font-display: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-cards: 10px;
  --radius-inputs: 6px;
  --radius-full: 9999px;
  --shadow-md: rgba(0, 0, 0, 0.05) 0px 4px 16px 0px;
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

/* ---------- Tabler 变量重定向 ---------- */
:root,
[data-bs-theme="light"] {
  --tblr-font-sans-serif: var(--font-inter);
  --tblr-body-bg: var(--color-stone-canvas);
  --tblr-body-color: var(--color-warm-gray);
  --tblr-bg-surface: var(--color-pure-white);
  --tblr-bg-surface-secondary: var(--color-stone-canvas);
  --tblr-border-color: var(--color-stone-border);
  --tblr-border-color-translucent: var(--color-stone-border);
  --tblr-primary: var(--color-cyan-signal);
  --tblr-primary-rgb: 59, 166, 241;
  --tblr-link-color: var(--color-cyan-edge);
  --tblr-link-hover-color: var(--color-cyan-signal);
  --tblr-secondary: var(--color-warm-gray);
  --tblr-muted: var(--color-ash-gray);
  --tblr-border-radius: var(--radius-inputs);
  --tblr-card-border-radius: var(--radius-cards);
  --tblr-font-weight-bold: 500;
}

body {
  background: var(--color-stone-canvas);
  color: var(--color-warm-gray);
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.64;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .card-title, .page-title, .navbar-brand h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-ink-black);
  letter-spacing: -0.025em;
}

.page-title { font-size: 32px; line-height: 1.25; letter-spacing: -0.8px; }
.card-title { font-size: 20px; line-height: 1.2; letter-spacing: -0.1px; }
h4 { font-size: 15px; letter-spacing: -0.01em; }
.text-muted, .form-hint, .page-pretitle { color: var(--color-ash-gray) !important; }
code { color: var(--color-cyan-edge); background: transparent; font-size: 12px; }

/* ---------- 侧栏：规范是 light 主题，不要 Tabler 的深色导航 ---------- */
.navbar-vertical.navbar-dark,
aside.navbar[data-bs-theme="dark"] {
  --tblr-bg-surface: var(--color-pure-white);
  --tblr-body-bg: var(--color-pure-white);
  --tblr-border-color: var(--color-stone-border);
  background: var(--color-pure-white) !important;
  border-right: 1px solid var(--color-stone-border);
  box-shadow: none;
}

aside.navbar .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
aside.navbar .navbar-collapse, aside.navbar .navbar-nav { padding: 0 !important; }

aside.navbar .navbar-brand { padding: 20px 0 8px; }
aside.navbar .navbar-brand h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink-black);
  margin: 0;
}

/* ===== 层级：应用名是第一层（贴左），功能项是第二层（缩进 + 左侧导轨） ===== */

/* 第一层 —— 应用分组标题。点击展开/收起子级 */
aside.navbar .nav-item.dropdown > .nav-link.dropdown-toggle {
  color: var(--color-ink-black) !important;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0 0 6px 0 !important;
  margin: 20px 0 4px;
  background: transparent !important;
  cursor: pointer;
}
/* 标题里那个空的图标占位会把文字推到和子项同一个 x 上，层级就没了。
   它带 Bootstrap 的 d-lg-inline-block 工具类（自带 !important），必须同样 !important 才压得住。 */
aside.navbar .nav-item.dropdown > .nav-link.dropdown-toggle .nav-link-icon { display: none !important; }
/* 展开/收起箭头，跟 aria-expanded 转向 */
aside.navbar .nav-link.dropdown-toggle::after {
  display: inline-block;
  margin-left: auto;
  transition: transform 0.15s ease;
}
aside.navbar .nav-link.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(135deg); }
aside.navbar .navbar-nav > li:first-child > .nav-link.dropdown-toggle { margin-top: 4px; }

/* 分组默认收起，点击父级标题才展开对应子级 */
aside.navbar .dropdown-menu {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: none;
  position: static !important;
  transform: none !important;
  float: none;
  width: 100%;
  padding: 0;
  /* 导轨往右让 14px，和齐左的应用名拉开层级。
     Tabler 的 .navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-menu
     是 4 类选择器（margin:0/border:none/padding:0），只能用 !important 压过去。 */
  margin: 0 0 0 14px !important;
  width: calc(100% - 14px) !important;
  /* Tabler 的 .navbar-vertical .dropdown-menu 会把 border 清零，必须 !important 才留得住导轨 */
  border-left: 1px solid var(--color-stone-border) !important;
}
aside.navbar .dropdown-menu.show { display: block; }
aside.navbar .dropdown-menu-columns,
aside.navbar .dropdown-menu-column { display: block; width: 100%; }

/* 第二层 —— 功能项。缩进到导轨右侧 */
aside.navbar .dropdown-menu .nav-link {
  color: var(--color-warm-gray) !important;
  font-size: 14px;
  font-weight: 400;
  border-radius: var(--radius-inputs);
  padding: 7px 12px !important;
  margin: 1px 0 1px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
aside.navbar .dropdown-menu .nav-link:hover {
  color: var(--color-ink-black) !important;
  background: var(--color-stone-canvas);
}
aside.navbar .dropdown-menu .nav-link.active {
  color: var(--color-ink-black) !important;
  background: var(--color-sky-wash);
  font-weight: 500;
}
/* 当前项在导轨上留一段实心标记 */
aside.navbar .dropdown-menu .nav-link.active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  width: 2px;
  height: 18px;
  margin-top: -9px;
  background: var(--color-cyan-signal);
  border-radius: 2px;
}
aside.navbar .nav-link-icon {
  color: var(--color-ash-gray);
  opacity: 1;
  width: 16px;
  margin: 0;
  text-align: center;
  flex: none;
}
aside.navbar .dropdown-menu .nav-link:hover .nav-link-icon,
aside.navbar .dropdown-menu .nav-link.active .nav-link-icon { color: var(--color-cyan-signal); }

/* 退出按钮走 ghost 规格 */
aside.navbar .btn-secondary {
  background: transparent;
  border: 1px solid var(--color-stone-border);
  color: var(--color-ink-black);
  border-radius: var(--radius-full);
  box-shadow: none;
  margin: 24px 0 8px !important;
}
aside.navbar .btn-secondary:hover {
  background: var(--color-stone-canvas);
  color: var(--color-ink-black);
}

/* ---------- 卡片：边框是主结构，阴影很轻 ---------- */
.card {
  background: var(--color-pure-white);
  border: 1px solid var(--color-stone-border);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-md);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--color-stone-border);
  padding: 16px 24px;
  min-height: auto;
}
.card-body { padding: 24px; }
.card-footer {
  background: transparent;
  border-top: 1px solid var(--color-stone-border);
  padding: 16px 24px;
}
.card-sm .card-body { padding: 12px; }

/* ---------- 按钮：全部药丸形，只有主操作填青色 ---------- */
.btn {
  border-radius: var(--radius-full);
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  box-shadow: none;
}
.btn-primary {
  background: var(--color-cyan-signal);
  border: 1px solid var(--color-cyan-edge);
  color: var(--color-pure-white);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--color-cyan-edge);
  border-color: var(--color-cyan-edge);
  color: var(--color-pure-white);
}
.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--color-stone-border);
  color: var(--color-ink-black);
}
.btn-outline-primary:hover {
  background: var(--color-stone-canvas);
  border-color: var(--color-stone-muted);
  color: var(--color-ink-black);
}
.btn-outline-primary.active,
.btn-group .btn-outline-primary.active {
  background: var(--color-soot);
  border-color: var(--color-soot);
  color: var(--color-pure-white);
}
.btn-group .btn { border-radius: var(--radius-full) !important; margin-right: 4px; }
/* Tabler 的 secondary 是深灰填充，规范里非主操作必须是 ghost */
.btn-secondary, .btn-light, .btn-dark {
  background: transparent;
  border: 1px solid var(--color-stone-border);
  color: var(--color-ink-black);
}
.btn-secondary:hover, .btn-light:hover, .btn-dark:hover {
  background: var(--color-stone-canvas);
  border-color: var(--color-stone-muted);
  color: var(--color-ink-black);
}
/* 行内操作图标：只用中性色，红色不在调色板里 */
.table .text-danger, .table .text-red, .table a[href="#"] i.text-danger {
  color: var(--color-warm-gray) !important;
}
.table tbody a:hover i { color: var(--color-ink-black) !important; }
.input-group .form-control { border-radius: var(--radius-inputs) 0 0 var(--radius-inputs); }
.input-group .btn { border-radius: 0 var(--radius-inputs) var(--radius-inputs) 0 !important; }
.input-group .btn:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0 !important; }

.btn-danger, .btn-outline-danger {
  background: transparent;
  border: 1px solid var(--color-stone-border);
  color: var(--color-warm-gray);
}
.btn-danger:hover, .btn-outline-danger:hover {
  background: var(--color-stone-canvas);
  color: var(--color-ink-black);
}

/* ---------- 表单 ---------- */
.form-control, .form-select {
  background: var(--color-pure-white);
  border: 1px solid var(--color-stone-muted);
  border-radius: var(--radius-inputs);
  color: var(--color-ink-black);
  font-size: 14px;
  padding: 6px 12px;
  box-shadow: none;
}
.form-control::placeholder { color: var(--color-warm-gray); }
.form-control:focus, .form-select:focus {
  border-color: var(--color-cyan-signal);
  box-shadow: 0 0 0 2px rgba(59, 166, 241, 0.35);
}
.form-label {
  color: var(--color-ink-black);
  font-size: 14px;
  font-weight: 500;
}
.form-check-input:checked { background-color: var(--color-cyan-signal); border-color: var(--color-cyan-edge); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 2px rgba(59, 166, 241, 0.35); }

/* ---------- 表格：只用发丝线 ---------- */
.table {
  --tblr-table-border-color: var(--color-stone-border);
  color: var(--color-warm-gray);
  font-size: 14px;
}
.table thead th {
  background: transparent;
  border-bottom: 1px solid var(--color-stone-border);
  color: var(--color-ash-gray);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
}
.table thead th a { color: var(--color-ash-gray); text-decoration: none; }
.table thead th a:hover { color: var(--color-ink-black); }
.table tbody td { border-top: 1px solid var(--color-stone-border); padding: 12px 16px; }
.table tbody tr:hover { background: var(--color-stone-canvas); }
.table a { color: var(--color-cyan-edge); text-decoration: none; }

/* ---------- 分页 / 标签 / 提示 ---------- */
.page-link {
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--color-warm-gray);
  margin: 0 2px;
}
.page-item.active .page-link {
  background: var(--color-soot);
  border-color: var(--color-soot);
  color: var(--color-pure-white);
}
.badge, .tag {
  background: var(--color-stone-canvas);
  border: 1px solid var(--color-stone-border);
  border-radius: var(--radius-full);
  color: var(--color-warm-gray);
  font-weight: 400;
}
.alert {
  background: var(--color-pure-white);
  border: 1px solid var(--color-stone-border);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  color: var(--color-ink-black);
  padding: 12px 16px;
}
.alert-success { border-left: 3px solid var(--color-cyan-signal); }
.alert-danger { border-left: 3px solid var(--color-soot); }
.dropdown-menu {
  border: 1px solid var(--color-stone-border);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-md);
}

/* ---------- 页面骨架 ---------- */
.page-wrapper { background: var(--color-stone-canvas); }
.page-header { padding-top: 32px; padding-bottom: 8px; }
.page-body { margin-top: 16px; }
.container-xl { max-width: 1200px; }

/* Tabler 的 .row-deck 会把列变成 flex 行，导致同一列里的提示条和卡片并排。
   统一改成纵向堆叠。 */
.row-deck > [class*="col-"] { flex-direction: column; }

/* 登录页 */
.card-md { max-width: 380px; box-shadow: var(--shadow-md); }
.card-md .card-title { font-size: 20px; }

/* KPI 数字 */
.h2, h2.mb-0 { font-family: var(--font-display); font-weight: 400; color: var(--color-ink-black); }

/* ---------- 图标：统一 Lucide（本地 SVG + CSS mask，颜色跟随 currentColor） ----------
   图标文件在 /static/icons/，来自 lucide-static v1.44.0（ISC）。
   用 mask 而不是 <img>，是为了让 hover / 选中态的换色能直接生效。 */
.li,
i.fa-eye, i.fa-pen-to-square, i.fa-trash, i.fa-sign-out, i.fa-times,
i.fa-triangle-exclamation, i.fa-language, i.fa-key,
i.fa-chevron-left, i.fa-chevron-right, i.fa-arrow-up, i.fa-arrow-down {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  vertical-align: -0.2em;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* 盖掉 Font Awesome 的字体字形，只留我们的 mask */
i.fa-eye::before, i.fa-pen-to-square::before, i.fa-trash::before,
i.fa-sign-out::before, i.fa-times::before, i.fa-triangle-exclamation::before,
i.fa-language::before, i.fa-key::before, i.fa-chevron-left::before,
i.fa-chevron-right::before, i.fa-arrow-up::before, i.fa-arrow-down::before {
  content: none !important;
}

/* 侧栏 / 自定义页面用的图标 */
.li-chart-area   { -webkit-mask-image: url(/static/icons/chart-area.svg);   mask-image: url(/static/icons/chart-area.svg); }
.li-chart-line   { -webkit-mask-image: url(/static/icons/chart-line.svg);   mask-image: url(/static/icons/chart-line.svg); }
.li-table        { -webkit-mask-image: url(/static/icons/table.svg);        mask-image: url(/static/icons/table.svg); }
.li-key          { -webkit-mask-image: url(/static/icons/key.svg);          mask-image: url(/static/icons/key.svg); }
.li-receipt      { -webkit-mask-image: url(/static/icons/receipt.svg);      mask-image: url(/static/icons/receipt.svg); }
.li-message      { -webkit-mask-image: url(/static/icons/message-square.svg); mask-image: url(/static/icons/message-square.svg); }
.li-send         { -webkit-mask-image: url(/static/icons/send.svg);         mask-image: url(/static/icons/send.svg); }
.li-lock         { -webkit-mask-image: url(/static/icons/lock.svg);         mask-image: url(/static/icons/lock.svg); }
.li-bot          { -webkit-mask-image: url(/static/icons/bot.svg);          mask-image: url(/static/icons/bot.svg); }
.li-apps         { -webkit-mask-image: url(/static/icons/layout-grid.svg);  mask-image: url(/static/icons/layout-grid.svg); }

/* sqladmin 模板内置的 Font Awesome 图标就地换成 Lucide */
i.fa-eye            { -webkit-mask-image: url(/static/icons/eye.svg);            mask-image: url(/static/icons/eye.svg); }
i.fa-pen-to-square  { -webkit-mask-image: url(/static/icons/square-pen.svg);     mask-image: url(/static/icons/square-pen.svg); }
i.fa-trash          { -webkit-mask-image: url(/static/icons/trash-2.svg);        mask-image: url(/static/icons/trash-2.svg); }
i.fa-sign-out       { -webkit-mask-image: url(/static/icons/log-out.svg);        mask-image: url(/static/icons/log-out.svg); }
i.fa-times          { -webkit-mask-image: url(/static/icons/x.svg);              mask-image: url(/static/icons/x.svg); }
i.fa-triangle-exclamation { -webkit-mask-image: url(/static/icons/triangle-alert.svg); mask-image: url(/static/icons/triangle-alert.svg); }
i.fa-language       { -webkit-mask-image: url(/static/icons/languages.svg);      mask-image: url(/static/icons/languages.svg); }
i.fa-key            { -webkit-mask-image: url(/static/icons/key.svg);            mask-image: url(/static/icons/key.svg); }
i.fa-chevron-left   { -webkit-mask-image: url(/static/icons/chevron-left.svg);   mask-image: url(/static/icons/chevron-left.svg); }
i.fa-chevron-right  { -webkit-mask-image: url(/static/icons/chevron-right.svg);  mask-image: url(/static/icons/chevron-right.svg); }
i.fa-arrow-up       { -webkit-mask-image: url(/static/icons/arrow-up.svg);       mask-image: url(/static/icons/arrow-up.svg); }
i.fa-arrow-down     { -webkit-mask-image: url(/static/icons/arrow-down.svg);     mask-image: url(/static/icons/arrow-down.svg); }

/* 表格行内操作图标：中性灰，hover 转墨黑 */
.table tbody a i { color: var(--color-ash-gray); }
.table tbody a:hover i { color: var(--color-ink-black); }