/* ============================================================
   app-components.css — ShipOnlines TMS 公共组件样式
   提取自各页面blade，重复3次以上的class定义
   修改品牌色只需改 :root 变量
   ============================================================ */

:root {
  --primary:   #2563eb;
  --teal:      #0891b2;
  --success:   #16a34a;
  --danger:    #dc2626;
  --warning:   #d97706;
  --muted:     #64748b;
  --border:    #e5e7eb;
  --border2:   #cbd5e1;
  --ink:       #1e293b;
  --ink2:      #475569;
  --ink3:      #94a3b8;
  --bg-light:  #f8fafc;
  --bg-card:   #fff;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
}

/* ── Layout ─────────────────────────────────────────────── */
.page-wrap   { padding: 18px; }
.page-header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.page-title  { font-size:18px; font-weight:800; color:var(--ink); margin:0; }
.page-sub    { font-size:13px; color:var(--muted); margin-top:2px; }
.toolbar     { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.grid2       { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sec-title   { font-size:15px; font-weight:700; margin:0 0 12px 0; }
.divider     { border:none; border-top:1px solid var(--border); margin:18px 0; }
.full        { grid-column: 1 / -1; }
@@media(max-width:900px){ .grid2{ grid-template-columns:1fr; } }

/* ── Card ───────────────────────────────────────────────── */
.card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  margin-bottom:14px;
}
.kv {
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px;
}
.kv:last-child { border-bottom:0; }

/* ── KPI ────────────────────────────────────────────────── */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.kpi-val { font-size:22px; font-weight:800; margin-bottom:2px; }
@@media(max-width:900px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } }

/* ── Table ──────────────────────────────────────────────── */
.tbl-wrap {
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  padding:8px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  transition:background .15s, border-color .15s, color .15s;
}
.btn:hover       { border-color:var(--primary); color:var(--primary); background:#eff6ff; }
.btn-blue        { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-blue:hover  { background:#1d4ed8; color:#fff; }
.btn-green       { background:var(--success); color:#fff; border-color:var(--success); }
.btn-green:hover { background:#15803d; color:#fff; }
.btn-ghost       { background:var(--bg-light); border-color:var(--border); }
.btn-primary {
  background:linear-gradient(90deg,var(--primary),var(--teal));
  color:#fff; border:none;
}
.btn-primary:hover { opacity:.92; color:#fff; }
.btn-danger        { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover  { background:#b91c1c; color:#fff; }

/* ── Form inputs ─────────────────────────────────────────── */
.inp, .sel, .txt {
  width:100%;
  border:1.5px solid var(--border2);
  border-radius:var(--radius-md);
  padding:0 12px;
  font-size:13px;
  background:#fff;
  color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.inp, .sel { height:40px; }
.txt       { padding:10px 12px; resize:vertical; }
.inp:focus, .sel:focus, .txt:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.badge-green  { background:#dcfce7; color:#166534; }
.badge-blue   { background:#dbeafe; color:#1d4ed8; }
.badge-amber  { background:#fef3c7; color:#92400e; }
.badge-red    { background:#fee2e2; color:#dc2626; }
.badge-gray   { background:#f1f5f9; color:#475569; }

/* ── Message / Alert ─────────────────────────────────────── */
.msg   { font-size:13px; color:var(--ink2); }
.ok    { background:#dcfce7; color:#166534; }
.err   { background:#fee2e2; color:#991b1b; }
.msg.ok, .msg.err {
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
}

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
  display:inline-block;
  width:15px; height:15px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@@keyframes spin { to{ transform:rotate(360deg); } }

/* ── Misc ────────────────────────────────────────────────── */
.muted   { font-size:12px; color:var(--muted); }
.hint    { font-size:12px; color:var(--ink3); }
.active  { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }
.selected{ border-color:var(--primary); background:#eff6ff; }
.on      { background:#eff6ff; border-color:#1a56db; color:#1a56db; }
.open    { display:block; }
.show    { display:block; }

/* ── Customer selector (ltl/tl/drayage共用) ──────────────── */
.cust-display       { display:flex; align-items:center; gap:8px; height:40px; border:1.5px solid var(--border2); border-radius:var(--radius-md); padding:0 10px; cursor:pointer; background:#fff; position:relative; }
.cust-display:hover { border-color:var(--primary); }
.cust-label         { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.cust-clear         { color:var(--muted); font-size:16px; cursor:pointer; padding:2px 4px; border-radius:4px; }
.cust-clear:hover   { color:var(--danger); background:#fef2f2; }
.cust-search-box    { position:absolute; top:44px; left:0; right:0; background:#fff; border:1.5px solid var(--primary); border-radius:var(--radius-md); box-shadow:0 4px 16px rgba(0,0,0,.1); z-index:100; display:none; }
.cust-search-box.open { display:block; }
.cust-search-inp    { width:100%; height:40px; border:none; border-bottom:1px solid var(--border); padding:0 12px; font-size:13px; outline:none; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.cust-list          { max-height:220px; overflow-y:auto; }
.cust-item          { padding:9px 12px; cursor:pointer; font-size:13px; display:flex; flex-direction:column; border-bottom:1px solid var(--border); }
.cust-item:last-child { border-bottom:none; }
.cust-item:hover    { background:#eff6ff; }
.cust-empty         { padding:14px 12px; text-align:center; font-size:13px; color:var(--muted); }
.ci-code            { font-weight:700; color:var(--primary); font-size:12px; }
.ci-name            { color:var(--ink); }

/* ── Freight item card (ltl/tl共用) ─────────────────────── */
.item-card  { background:var(--bg-light); border:1.5px solid var(--border); border-radius:12px; padding:14px; margin-bottom:10px; }
.item-top   { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.item-no    { font-size:12px; font-weight:700; color:var(--muted); }
.item-grid  { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; align-items:end; }
.item-del   { padding:5px 12px; border:1.5px solid #fecaca; border-radius:8px; background:#fff5f5; color:var(--danger); cursor:pointer; font-size:12px; }
.item-del:hover { background:#fee2e2; }

/* ── Drayage quote layout (admin+customer共用) ───────────── */
.dq-layout { display:grid; grid-template-columns:380px 1fr; gap:20px; align-items:start; }
.dq-input  { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:#fff; }
@@media(max-width:900px){ .dq-layout{ grid-template-columns:1fr; } }

/* ── Admin orders / customers / registrations (ao-*) ────── */
:root {
  --ao-primary: #4361ee; --ao-bg: #f4f6fb; --ao-card: #fff;
  --ao-text: #1e293b;    --ao-muted: #64748b; --ao-border: #e2e8f0;
  --ao-radius: 14px;     --ao-shadow: 0 1px 4px rgba(0,0,0,.07);
  --ao-green: #22c55e;   --ao-warn: #f59e0b;
}
.ao-wrap         { padding:28px 32px; background:var(--ao-bg); min-height:100vh; }
.ao-header       { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.ao-header-left  { display:flex; align-items:center; gap:14px; }
.ao-header-right { display:flex; gap:10px; }
.ao-icon         { font-size:28px; }
.ao-title        { font-size:22px; font-weight:700; color:var(--ao-text); margin:0; }
.ao-subtitle     { font-size:13px; color:var(--ao-muted); margin:0; }
.ao-btn          { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; border:none; text-decoration:none; transition:background .15s; }
.ao-btn-primary  { background:var(--ao-primary); color:#fff; }
.ao-btn-primary:hover { background:#3451d1; }
.ao-btn-ghost    { background:var(--ao-card); color:var(--ao-text); border:1px solid var(--ao-border); }
.ao-btn-ghost:hover { background:#f0f2fa; }
.ao-btn-sm       { padding:6px 14px; font-size:13px; }
.ao-stats        { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.ao-stat-card    { background:var(--ao-card); border-radius:var(--ao-radius); padding:18px 20px; box-shadow:var(--ao-shadow); border-left:3px solid transparent; }
.ao-stat-green   { border-left-color:var(--ao-green); }
.ao-stat-warn    { border-left-color:var(--ao-warn); }
.ao-stat-label   { font-size:10.5px; font-weight:600; color:var(--ao-muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.ao-stat-value   { font-size:26px; font-weight:700; color:var(--ao-primary); line-height:1.1; }
.ao-filter-bar   { background:var(--ao-card); border-radius:var(--ao-radius); padding:16px 20px; margin-bottom:16px; box-shadow:var(--ao-shadow); }
.ao-filter-row   { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ao-input         { height:36px; border-radius:7px; border:1px solid var(--ao-border); padding:0 12px; font-size:13px; color:var(--ao-text); background:#fafbfc; outline:none; transition:border .15s; box-sizing:border-box; }
.ao-input:focus   { border-color:var(--ao-primary); background:#fff; }
.ao-input-search  { min-width:260px; }
.ao-select        { height:36px; border-radius:7px; border:1px solid var(--ao-border); padding:0 12px; font-size:13px; background:#fff; }
.ao-select:focus  { border-color:var(--ao-primary); background:#fff; }
.ao-table-wrap   { background:var(--ao-card); border-radius:var(--ao-radius); box-shadow:var(--ao-shadow); overflow:hidden; }
.ao-table        { width:100%; border-collapse:collapse; font-size:13px; }
.ao-th-num       { width:40px; text-align:center; }
.ao-td-num       { text-align:center; color:var(--ao-muted); font-size:12px; }
.ao-loading      { text-align:center; padding:48px; color:var(--ao-muted); }
.ao-action-btn   { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; background:#eef0fc; color:var(--ao-primary); border:none; }
.ao-action-btn:hover { background:#d8dcfb; }
.ao-status       { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.ao-s-pending    { background:#fff7ed; color:#c2410c; }
.ao-s-approved   { background:#f0fdf4; color:#15803d; }
.ao-s-rejected   { background:#fef2f2; color:#991b1b; }
@@media(max-width:900px){
  .ao-wrap{ padding:14px; }
  .ao-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ── Logo (login/register/bol) ───────────────────────────── */
.logo { font-size:24px; font-weight:700; }

.ao-table thead tr { background:#f8f9fc; border-bottom:2px solid var(--ao-border); }
.ao-table th { padding:11px 14px; text-align:left; font-size:11px; font-weight:600; color:var(--ao-muted); letter-spacing:.07em; white-space:nowrap; }
.ao-th-money { text-align:right; }
.ao-table td { padding:12px 14px; border-bottom:1px solid #f0f2f7; vertical-align:middle; color:var(--ao-text); }

/* ═══════════════════════════════════════════════════════════
   UNIFIED STATUS BADGES — 全站统一
   用法: <span class="st st-{status}">{STATUS}</span>
   ═══════════════════════════════════════════════════════════ */
.st{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.st-submitted,.st-pending,.st-quoted{background:#fff7ed;color:#c2410c}
.st-approved,.st-invoiced{background:#eff6ff;color:#1d4ed8}
.st-tendered,.st-processing{background:#f0f9ff;color:#075985}
.st-in_transit,.st-intransit,.st-shipped{background:#ecfdf5;color:#065f46}
.st-delivered,.st-completed,.st-paid,.st-ordered{background:#dcfce7;color:#166534}
.st-cancelled,.st-failed,.st-overdue{background:#fef2f2;color:#991b1b}
.st-draft,.st-expired,.st-unknown{background:#f1f5f9;color:#475569}
.st-disputed{background:#fce7f3;color:#9d174d}
.st-active{background:#dcfce7;color:#166534}
.st-inactive{background:#fee2e2;color:#991b1b}
.st-received{background:#e0e7ff;color:#4338ca}
.st-costing,.st-pod_required{background:#fef3c7;color:#92400e}

/* ═══════════════════════════════════════════════════════════
   UNIFIED TABLE — 全站统一
   用法: <table class="u-tbl">
   ═══════════════════════════════════════════════════════════ */
.u-tbl{width:100%;border-collapse:collapse;font-size:13px}
.u-tbl th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;background:#f8f9fc;border-bottom:2px solid var(--border);white-space:nowrap}
.u-tbl td{padding:9px 12px;border-bottom:1px solid #f0f2f7;vertical-align:middle;color:var(--ink)}
.u-tbl tbody tr:hover{background:#fafbff}
.u-tbl .u-mono{font-family:monospace;font-weight:600;font-size:12px;color:var(--primary)}
.u-tbl .u-money{font-family:monospace;font-weight:600;text-align:right}
.u-tbl .u-right{text-align:right}
.u-tbl .u-pos{color:var(--success)}
.u-tbl .u-neg{color:var(--danger)}
.u-tbl .u-warn{color:var(--warning)}
.u-tbl .u-muted{color:var(--muted);font-size:12px}

/* ═══════════════════════════════════════════════════════════
   GLOBAL MOBILE FIXES — 全站移动端适配
   解决表格溢出、网格折叠、弹窗适配、触摸尺寸等
   ═══════════════════════════════════════════════════════════ */

/* 所有table自动横向滚动 — 由外层.tbl-wrap负责滚动，table本身保持原生布局 */
table { width:100%; border-collapse:collapse; }
table thead { display:table-header-group; }
table tbody { display:table-row-group; }
table tr { display:table-row; }
.tbl-wrap, .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* 768px以下：平板+手机 */
@@media (max-width:768px) {
  /* 表格：窄屏nowrap+外层滚动 */
  table th, table td { white-space:nowrap; }

  /* 所有自定义KPI/stats grid统一折叠为2列 */
  .kpi-row, .d-kpi-grid, .d-rev-grid, .ab-kpi, .ap-kpi, .ap-margin,
  .r-kpi-grid, .proj-kpi, .sp-stats, .ao-stats, .mo-stats, .db-stats,
  .db-revenue-row, .qh-stats, .bl-summary-grid, .od-summary-grid,
  .ag-toc-grid, .wh-form-grid, .pq-row3 {
    grid-template-columns:repeat(2,1fr) !important;
  }
  /* 内联style的grid也需要覆盖 */
  [style*="grid-template-columns:repeat(5"] { grid-template-columns:repeat(2,1fr) !important; }
  [style*="grid-template-columns:repeat(4"] { grid-template-columns:repeat(2,1fr) !important; }
  [style*="grid-template-columns:repeat(3"] { grid-template-columns:repeat(2,1fr) !important; }

  .item-grid { grid-template-columns:repeat(2,1fr) !important; }
  .dq-layout { grid-template-columns:1fr !important; }

  /* 弹窗/模态框适配 */
  .modal, [class*="modal"] {
    width:calc(100% - 32px) !important;
    max-width:100% !important;
    max-height:85vh !important;
    overflow-y:auto !important;
  }

  /* 输入框最小触摸尺寸 */
  input, select, textarea { min-height:40px; font-size:14px !important; }
  button, .btn { min-height:38px; }

  /* 侧边栏完全隐藏 */
  .sidebar, .side-nav { display:none !important; }
  .main-content, .content-area { margin-left:0 !important; width:100% !important; }
}

/* 480px以下：手机竖屏 */
@@media (max-width:480px) {
  .page-wrap { padding:10px !important; }
  .page-title { font-size:16px !important; }
  .page-header { flex-direction:column; align-items:flex-start; gap:8px; }
  .toolbar { flex-direction:column; align-items:stretch; }
  .toolbar .btn, .toolbar button { width:100%; justify-content:center; }

  /* 所有KPI/stats网格单列 */
  .kpi-row, .d-kpi-grid, .d-rev-grid, .ab-kpi, .ap-kpi, .ap-margin,
  .r-kpi-grid, .proj-kpi, .sp-stats, .ao-stats, .mo-stats, .db-stats,
  .db-revenue-row, .qh-stats, .bl-summary-grid, .od-summary-grid,
  .ag-toc-grid, .wh-form-grid, .pq-row3 {
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:repeat(5"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(4"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(3"] { grid-template-columns:repeat(2,1fr) !important; }

  /* 所有2列grid折叠 */
  .grid2, .item-grid { grid-template-columns:1fr !important; }

  /* card内边距缩小 */
  .card { padding:10px 12px; }
  .kv { padding:8px; }

  /* 表格字号缩小 */
  .u-tbl { font-size:11px; }
  .u-tbl th { padding:6px 8px; font-size:9px; }
  .u-tbl td { padding:7px 8px; }

  /* 按钮适配 */
  .btn { padding:10px 12px; font-size:13px !important; }

  /* 日期选择器等inline布局 */
  .toolbar select, .toolbar input { width:100%; }
}