/* ============================================================
   Kazeiri 風入 — 订单管理系统
   设计系统：日式织物主题 / 和風色彩 / 職人质感
   ============================================================ */

/* ----- CSS 变量 ----- */
:root {
  /* 色彩 */
  --c-ink:        #1a1d23;   /* 墨色 — 侧边栏 */
  --c-indigo:     #2d4263;   /* 藍色 — 主强调 */
  --c-indigo-lt:  #3d5a85;   /* 靛蓝浅 — hover */
  --c-washi:      #f5f2eb;   /* 和紙 — 页面背景 */
  --c-surface:    #ffffff;   /* 白 — 卡片表面 */
  --c-kinari:     #faf7f0;   /* 生成り — 条纹行 */
  --c-gold:       #c8842a;   /* 山吹 — CTA / 高亮 */
  --c-gold-lt:    #e8c97a;   /* 金浅 */
  --c-sumi:       #3d3d3d;   /* 墨 — 正文 */
  --c-stone:      #7a7a7a;   /* 石 — 次要文字 */
  --c-hairline:   #e8e4dc;   /* 细线 — 边框 */
  --c-sakura:     #c46b6b;   /* 桜 — 危险/删除 */
  --c-success:    #4a8c6f;   /* 若草 — 成功 */
  --c-warning:    #d4942b;   /* 警告 */
  --c-info:       #4a7c9b;   /* 信息 */

  /* 字体 */
  --ff-display:   "Noto Serif SC", "Source Han Serif SC", "Hiragino Mincho ProN", "SimSun", serif;
  --ff-body:      "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono:      "SF Mono", "Consolas", "Menlo", monospace;

  /* 字号阶梯 */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

  /* 间距 */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* 圆角 */
  --radius: 6px;
  --radius-sm: 4px;

  /* 阴影 */
  --shadow-card: 0 1px 3px rgba(26, 29, 35, 0.06);
  --shadow-sm:   0 1px 2px rgba(26, 29, 35, 0.04);
}

/* ----- 基础重置 & 排版 ----- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--c-sumi);
  background: var(--c-washi);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  letter-spacing: 0.02em;
  color: var(--c-ink);
}

a { color: var(--c-indigo); }
a:hover { color: var(--c-indigo-lt); }

/* 全局滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ============================================================
   整体布局
   ============================================================ */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ============================================================
   侧边栏 — 签名元素：织物纹理
   ============================================================ */
.sidebar {
  width: 230px;
  min-width: 230px;
  background-color: var(--c-ink);
  /* 织物纹理 — 极细水平线条，模仿窗帘面料经纬 */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255, 255, 255, 0.012) 3px,
      rgba(255, 255, 255, 0.012) 6px
    );
  color: #b0b5bd;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-header {
  padding: 28px 20px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-header h4 {
  font-family: var(--ff-display);
  color: #e8dcc8;
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.sidebar-header h4 small {
  font-family: var(--ff-body);
  color: rgba(232, 220, 200, 0.5);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* 导航链接 */
.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #8a8f98;
  text-decoration: none;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: var(--ff-body);
  transition: all 0.2s ease;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #c8cdd5;
}

.sidebar-link.active {
  background: rgba(45, 66, 99, 0.35);
  color: #c8d6e8;
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--c-gold);
}

.sidebar-link i {
  font-size: 17px;
  opacity: 0.7;
}

.sidebar-link.active i { opacity: 1; }

/* 底部用户区 */
.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a8f98;
  font-size: var(--fs-sm);
}

.user-info i {
  font-size: 18px;
  color: #5a6068;
}

.sidebar-footer .btn-outline-light {
  --bs-btn-color: #8a8f98;
  --bs-btn-border-color: rgba(255,255,255,0.1);
  --bs-btn-hover-bg: rgba(255,255,255,0.05);
  --bs-btn-hover-border-color: rgba(255,255,255,0.15);
  --bs-btn-hover-color: #c8cdd5;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}

/* ============================================================
   右侧面板
   ============================================================ */
.right-panel {
  flex: 1;
  margin-left: 230px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--c-washi);
}

.right-panel > .alert {
  margin: 0;
  border-radius: 0;
  border: none;
}

/* ============================================================
   标签栏 — 暖金顶线（光线透过窗帘）
   ============================================================ */
.tab-bar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-hairline);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--c-gold), var(--c-gold-lt), var(--c-gold)) 1;
  flex-shrink: 0;
  overflow-x: auto;
  white-space: nowrap;
}

.tab-bar::-webkit-scrollbar { height: 3px; }
.tab-bar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

.tab-list {
  display: inline-flex;
  padding: 0 8px;
  min-width: 100%;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--c-stone);
  font-size: var(--fs-sm);
  border-right: 1px solid var(--c-hairline);
  background: #fafafa;
  user-select: none;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.tab-btn:hover { background: #f0f0f0; color: var(--c-sumi); }

.tab-btn.active {
  background: var(--c-surface);
  color: var(--c-indigo);
  font-weight: 500;
  border-bottom: 2px solid var(--c-gold);
  margin-bottom: -1px;
}

.tab-btn-title {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-btn-close {
  font-size: 15px;
  line-height: 1;
  color: #aaa;
  padding: 0 2px;
  border-radius: 3px;
}

.tab-btn-close:hover {
  color: var(--c-sakura);
  background: rgba(196, 107, 107, 0.1);
}

/* iframe 容器 */
.tab-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.tab-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: none;
  background: var(--c-washi);
}

.tab-iframe.active { display: block; }

/* ============================================================
   内容页 (base_content.html)
   ============================================================ */
.content-body {
  margin: 0;
  background: var(--c-washi);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--c-sumi);
}

.content-main {
  padding: 20px 28px;
}

/* 旧版兼容 */
.main-content {
  flex: 1;
  margin-left: 230px;
  padding: 28px 32px;
  background-color: var(--c-washi);
  min-height: 100vh;
}

/* ============================================================
   卡片
   ============================================================ */
.card {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--c-surface);
}

.card-header {
  background-color: #fafaf8;
  border-bottom: 1px solid var(--c-hairline);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-indigo);
  padding: 10px 16px;
}

.card-body { padding: 16px; }

/* 仪表盘统计卡片覆盖 Bootstrap bg-* */
.card.text-white { border: none; }
.card.bg-primary { background-color: var(--c-indigo) !important; }
.card.bg-success { background-color: var(--c-success) !important; }
.card.bg-warning { background-color: var(--c-warning) !important; }
.card.bg-info    { background-color: var(--c-info) !important; }

.card.bg-primary .card-title,
.card.bg-success .card-title,
.card.bg-warning .card-title,
.card.bg-info    .card-title {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  font-weight: 500;
}

.card.bg-primary h2,
.card.bg-success h2,
.card.bg-warning h2,
.card.bg-info    h2 {
  font-family: var(--ff-display);
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 2px;
}

.card.bg-primary small,
.card.bg-success small,
.card.bg-warning small,
.card.bg-info    small {
  opacity: 0.8;
  font-size: var(--fs-sm);
}

/* ============================================================
   搜索卡片
   ============================================================ */
.search-card {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
}

.search-card .form-label {
  font-size: var(--fs-sm);
  color: var(--c-stone);
  margin-bottom: 2px;
  font-family: var(--ff-body);
}

.search-card .form-control,
.search-card .form-select {
  border-radius: var(--radius-sm);
  border-color: #d5d0c7;
  font-size: var(--fs-sm);
}

.search-card .form-control:focus,
.search-card .form-select:focus {
  border-color: var(--c-indigo);
  box-shadow: 0 0 0 3px rgba(45, 66, 99, 0.1);
}

input[type="date"] {
  color-scheme: light;
  cursor: pointer;
}

/* 清除按钮 */
.clear-input { position: relative; display: block; }
.clear-input input { padding-right: 22px; }
.clear-input .btn-clear {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #999; font-size: 14px;
  line-height: 1; cursor: pointer; padding: 2px 5px; display: none;
}
.clear-input .btn-clear:hover { color: var(--c-sumi); }

/* ============================================================
   表格
   ============================================================ */
.table {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
}

.table thead th {
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table-dark, .table thead.table-dark {
  --bs-table-bg: var(--c-indigo);
  --bs-table-color: #dce3ed;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  --bs-table-accent-bg: var(--c-kinari);
  color: var(--c-sumi);
}

.table th { white-space: nowrap; }
.table td { vertical-align: middle; }

/* ============================================================
   订单表格专用 (orders_list.html)
   ============================================================ */
.order-table {
  font-size: var(--fs-sm);
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-hairline);
}

.order-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 6px 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--c-indigo);
  color: #dce3ed;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-table tbody td {
  padding: 3px 4px;
  vertical-align: middle;
  background: var(--c-surface);
}

.order-table tbody tr { cursor: pointer; }
.order-table tbody tr:hover td { background-color: #f0ede5; }
.table-striped tbody tr:nth-of-type(odd) td { background-color: var(--c-kinari); }
.order-table .no-click { cursor: default; }
.num-cell { text-align: right; }

/* 状态 badge */
.badge-status { font-size: 11px; padding: 2px 5px; color: #fff !important; border-radius: 3px; }
.badge-status.trade-confirm { background: var(--c-info) !important; color: #fff !important; }
.badge-status.ordered       { background: var(--c-warning) !important; color: #1a1d23 !important; }
.badge-status.shipped       { background: #e07b39 !important; color: #fff !important; }
.badge-status.transit       { background: #6b5ce0 !important; color: #fff !important; }
.badge-status.signed        { background: var(--c-success) !important; color: #fff !important; }

/* 冻结列 */
.freeze-col { position: relative; z-index: 2; }
.order-table thead th.freeze-col { z-index: 11; }
.f-col0 { width: 30px; min-width: 30px; max-width: 30px; }
.f-col1 { width: 72px; min-width: 72px; max-width: 72px; }
.f-col2 { width: 140px; min-width: 140px; max-width: 140px; }
.f-col3 { width: 80px; min-width: 80px; max-width: 80px; border-right: 3px solid var(--c-gold) !important; }

/* 滚动区 */
.table-scroll {
  overflow-x: auto;
  max-height: calc(100vh - 250px);
}

/* 编辑模式 */
.edit-mode .order-table tbody td { padding: 1px 3px; }
.edit-mode .editable-input { width: 100%; min-width: 50px; font-size: var(--fs-sm); padding: 1px 3px; border: 1px solid var(--c-indigo); border-radius: 3px; }
.edit-mode .editable-select { width: 100%; font-size: var(--fs-sm); padding: 1px 2px; border: 1px solid var(--c-indigo); border-radius: 3px; }
.edit-mode input.editable-input.num { text-align: right; }
.edit-mode input.editable-input.date { min-width: 85px; }
.edit-mode .no-click.edit-disabled { cursor: default; pointer-events: none; }
.edit-mode .order-table tbody tr:hover td { background-color: #fdf6e8; }
.edit-mode input.editable-input.no-spin { -moz-appearance: textfield; }
.edit-mode input.editable-input.no-spin::-webkit-outer-spin-button,
.edit-mode input.editable-input.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Toast */
.toast-msg { position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 200px; border-radius: var(--radius); }

/* ============================================================
   日志表格 (logs_list.html)
   ============================================================ */
.log-table td, .log-table th { padding: 6px 8px; font-size: var(--fs-sm); vertical-align: middle; }
.log-table td.detail-cell { max-width: 260px; white-space: normal; word-break: break-all; font-size: var(--fs-xs); color: var(--c-stone); }

/* ============================================================
   订单详情 badge (orders_detail.html)
   ============================================================ */
.badge-orange { background-color: #e07b39; color: #fff; }
.badge-purple { background-color: #6b5ce0; color: #fff; }

/* ============================================================
   按钮系统
   ============================================================ */
.btn {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.btn-primary {
  --bs-btn-bg: var(--c-indigo);
  --bs-btn-border-color: var(--c-indigo);
  --bs-btn-hover-bg: var(--c-indigo-lt);
  --bs-btn-hover-border-color: var(--c-indigo-lt);
  --bs-btn-active-bg: #243652;
  --bs-btn-active-border-color: #243652;
}

.btn-success {
  --bs-btn-bg: var(--c-success);
  --bs-btn-border-color: var(--c-success);
  --bs-btn-hover-bg: #3d7a5e;
  --bs-btn-hover-border-color: #3d7a5e;
}

.btn-warning {
  --bs-btn-bg: var(--c-gold);
  --bs-btn-border-color: var(--c-gold);
  --bs-btn-hover-bg: #b07424;
  --bs-btn-hover-border-color: #b07424;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: var(--c-stone);
  --bs-btn-border-color: #c5c0b8;
  --bs-btn-hover-bg: #f0ede5;
  --bs-btn-hover-border-color: #b5b0a8;
  --bs-btn-hover-color: var(--c-sumi);
}

.btn-outline-warning {
  --bs-btn-color: var(--c-gold);
  --bs-btn-border-color: var(--c-gold);
  --bs-btn-hover-bg: var(--c-gold);
  --bs-btn-hover-border-color: var(--c-gold);
  --bs-btn-hover-color: #fff;
}

.btn-outline-success {
  --bs-btn-color: var(--c-success);
  --bs-btn-border-color: var(--c-success);
  --bs-btn-hover-bg: var(--c-success);
  --bs-btn-hover-border-color: var(--c-success);
  --bs-btn-hover-color: #fff;
}

.btn-outline-light {
  --bs-btn-hover-bg: rgba(255,255,255,0.08);
  --bs-btn-hover-border-color: rgba(255,255,255,0.2);
}

/* ============================================================
   分页
   ============================================================ */
.pagination { margin-top: var(--sp-md); }
.page-link {
  color: var(--c-indigo);
  font-size: var(--fs-sm);
  border-color: var(--c-hairline);
}
.page-link:hover { color: var(--c-indigo-lt); background-color: #f0ede5; }
.page-item.active .page-link {
  background-color: var(--c-indigo);
  border-color: var(--c-indigo);
}
.page-item.disabled .page-link {
  color: #bbb;
}

/* ============================================================
   登录页
   ============================================================ */
.login-body {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(45, 66, 99, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(200, 132, 42, 0.08) 0%, transparent 60%),
    var(--c-washi);
  min-height: 100vh;
}

.login-wrapper {
  padding-top: 60px;
}

.login-wrapper .card {
  border: 1px solid var(--c-hairline);
  box-shadow: 0 4px 24px rgba(26, 29, 35, 0.08);
}

.login-wrapper .card-body h3 {
  font-family: var(--ff-display);
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  margin-bottom: 4px;
}

.login-wrapper .card-body h3 small {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  color: var(--c-stone);
  letter-spacing: 0.04em;
  display: block;
  margin-top: 4px;
}

.login-wrapper .form-label {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  color: var(--c-stone);
}

.login-wrapper .form-control {
  border-radius: var(--radius-sm);
  border-color: #d5d0c7;
  font-size: var(--fs-base);
}
.login-wrapper .form-control:focus {
  border-color: var(--c-indigo);
  box-shadow: 0 0 0 3px rgba(45, 66, 99, 0.1);
}

.login-wrapper .btn-primary {
  border-radius: var(--radius-sm);
  font-family: var(--ff-body);
  letter-spacing: 0.06em;
}

/* ============================================================
   Flash — 固定右上角浮动消息
   ============================================================ */
.alert {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  border: none;
}

.right-panel > .alert { margin: 8px 12px 0 12px; }

.alert-success { background-color: #e8f2ec; color: #3a6b52; }
.alert-danger  { background-color: #f8e8e8; color: #a34a4a; }
.alert-warning { background-color: #faf0e0; color: #8a6b2a; }
.alert-info    { background-color: #e4ecf2; color: #3a5a7a; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
  .sidebar {
    width: 60px;
    min-width: 60px;
  }

  .sidebar-header { padding: 16px 8px; }
  .sidebar-header h4,
  .sidebar-header small,
  .sidebar-link span:not(.bi),
  .sidebar-footer span,
  .sidebar-footer .btn {
    display: none;
  }

  .sidebar-link {
    justify-content: center;
    padding: 12px;
  }

  .sidebar-link i { font-size: 20px; }

  .right-panel { margin-left: 60px; }
  .main-content { margin-left: 60px; padding: 16px; }
  .content-main { padding: 12px; }

  .login-wrapper { padding-top: 20px; }
}

/* ============================================================
   用户咨询 — 三栏布局补充样式
   ============================================================ */

/* 侧边栏未读 badge */
.sidebar-link .badge.bg-danger {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--c-sakura) !important;
}

/* 确认弹窗 (inquiries.html) */
.confirm-overlay { animation: fadeIn 0.15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 消息气泡内图片 hover */
.msg-attach img { transition: transform 0.15s; }
.msg-attach img:hover { transform: scale(1.02); }

/* 对话框输入 textarea 自适应 */
.inq-input-row textarea {
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* 已完成对话禁用态 */
.inq-input-row textarea:disabled,
.inq-input-row .btn-send:disabled,
.inq-input-row .btn-done:disabled,
.inq-input-row .btn-attach:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toast 消息 */
.toast-msg {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: slideIn 0.2s ease;
}
@keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }