* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei", "PingFang SC", sans-serif; background:#f4f6f9; color:#2c3e50; display:flex; min-height:100vh; }

/* 侧边栏 */
.sidebar { width:220px; background:#1e3a5f; color:#fff; flex-shrink:0; position:fixed; top:0; bottom:0; left:0; overflow-y:auto; }
.sidebar .logo { padding:20px 16px; font-size:18px; font-weight:bold; border-bottom:1px solid rgba(255,255,255,.15); line-height:1.5; }
.sidebar .logo small { font-size:12px; font-weight:normal; color:#a8c5e5; }
.sidebar nav { padding:8px 0; }
.sidebar .nav-group { padding:12px 16px 4px; font-size:12px; color:#7fa3c9; }
.sidebar nav a { display:block; padding:9px 16px; color:#d4e2f2; text-decoration:none; font-size:14px; border-left:3px solid transparent; }
.sidebar nav a:hover { background:rgba(255,255,255,.08); }
.sidebar nav a.active { background:rgba(255,255,255,.12); border-left-color:#f39c12; color:#fff; }

/* 主区域 */
.main-noside { margin-left:0 !important; }
.main { margin-left:220px; flex:1; padding:20px 24px; min-width:0; }
.page-title { font-size:20px; font-weight:bold; margin-bottom:16px; }
.card { background:#fff; border-radius:8px; padding:16px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.card h3 { font-size:15px; margin-bottom:12px; color:#1e3a5f; }

/* 看板统计 */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.stat { background:#fff; border-radius:8px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.stat .num { font-size:24px; font-weight:bold; color:#1e3a5f; }
.stat .label { font-size:12px; color:#7f8c9b; margin-top:2px; }

/* 表格 */
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:8px 10px; border-bottom:1px solid #eef1f5; text-align:left; }
th { background:#f8fafc; color:#5a6b7d; font-weight:600; white-space:nowrap; }
tr:hover td { background:#fafbfd; }
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; }
.badge-green { background:#e6f7ec; color:#1a9e4b; }
.badge-orange { background:#fef3e2; color:#d48806; }
.badge-red { background:#fdeaea; color:#d93026; }
.badge-blue { background:#e8f1fd; color:#2f6fd0; }
.badge-gray { background:#eef1f5; color:#6b7a8d; }

/* 表单 */
.form-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
input, select, textarea { padding:7px 10px; border:1px solid #d5dbe3; border-radius:6px; font-size:13px; font-family:inherit; }
input:focus, select:focus { outline:none; border-color:#2f6fd0; }
label { font-size:13px; color:#5a6b7d; }
.btn { display:inline-block; padding:7px 14px; border:none; border-radius:6px; background:#1e3a5f; color:#fff; font-size:13px; cursor:pointer; text-decoration:none; }
.btn:hover { opacity:.9; }
.btn-green { background:#1a9e4b; }
.btn-orange { background:#d48806; }
.btn-red { background:#d93026; }
.btn-gray { background:#6b7a8d; }
.btn-sm { padding:4px 10px; font-size:12px; }

/* 提示 */
.flashes { margin-bottom:12px; }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:8px; font-size:13px; }
.flash-success { background:#e6f7ec; color:#1a9e4b; }
.flash-danger { background:#fdeaea; color:#d93026; }
.flash-warning { background:#fef3e2; color:#d48806; }

/* 商品网格（收银点单） */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.product-tile { border:2px solid #e3e8ef; border-radius:8px; padding:10px; text-align:center; cursor:pointer; background:#fff; transition:.15s; }
.product-tile:hover { border-color:#2f6fd0; background:#f5f9ff; }
.product-tile.selected { border-color:#1a9e4b; background:#eafaf1; }
.product-tile .p-name { font-size:13px; font-weight:600; }
.product-tile .p-price { color:#d48806; font-size:14px; font-weight:bold; margin-top:4px; }
.product-tile .p-stock { font-size:11px; color:#9aa7b6; }

/* 购物车 */
.cart { border:1px solid #e3e8ef; border-radius:8px; padding:12px; min-height:200px; background:#fafbfd; }
.cart-item { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #e3e8ef; font-size:13px; }
.cart-total { font-size:16px; font-weight:bold; color:#d93026; text-align:right; margin-top:10px; }

/* 桌台 */
.table-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.table-tile { border-radius:8px; padding:12px; text-align:center; cursor:pointer; border:2px solid #e3e8ef; background:#fff; }
.table-tile.free { border-color:#1a9e4b; }
.table-tile.occupied { border-color:#d93026; background:#fdeaea; }
.table-tile .t-name { font-size:14px; font-weight:bold; }
.table-tile .t-status { font-size:11px; margin-top:4px; }

.section-title { font-size:15px; font-weight:bold; margin:16px 0 10px; color:#1e3a5f; }
.filter-bar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.link { color:#2f6fd0; text-decoration:none; }
.link:hover { text-decoration:underline; }
.muted { color:#9aa7b6; font-size:12px; }
.right { text-align:right; }
.mt { margin-top:12px; }
.flex { display:flex; gap:10px; align-items:center; }
.grow { flex:1; }

/* ============ 弹窗（modal） ============ */
.modal-mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); z-index:2000; align-items:flex-start; justify-content:center; overflow-y:auto; padding:6vh 12px 30px; }
.modal-mask.open { display:flex; }
.modal { background:#fff; border-radius:10px; padding:20px; width:100%; max-width:520px; box-shadow:0 10px 40px rgba(0,0,0,.25); position:relative; animation:modalIn .18s ease; }
@keyframes modalIn { from { transform:translateY(-12px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal h3 { font-size:16px; margin-bottom:14px; color:#1e3a5f; border-bottom:2px solid #eef1f5; padding-bottom:10px; }
.modal-close { position:absolute; top:12px; right:16px; cursor:pointer; font-size:20px; color:#9aa7b6; line-height:1; }
.modal-close:hover { color:#d93026; }
.modal-form label { display:block; font-size:13px; color:#5a6b7d; margin:10px 0 4px; }
.modal-form input, .modal-form select, .modal-form textarea { width:100%; padding:8px 10px; }
.modal-form .btn { width:100%; margin-top:16px; padding:10px; font-size:15px; }
.modal-form .row2 { display:flex; gap:10px; }
.modal-form .row2 > div { flex:1; }

/* 多选勾选（马匹/教练） */
.chk-grid { display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:200px; }
.chk { display:inline-flex; align-items:center; gap:4px; background:#f4f7fb; border:1px solid #e3e8ef; border-radius:6px; padding:5px 10px; font-size:13px; cursor:pointer; user-select:none; }
.chk:hover { border-color:#2f6fd0; }
.chk input { accent-color:#1a9e4b; margin:0; }
.active-order { border:1px solid #e3e8ef; border-radius:8px; padding:12px; margin-bottom:12px; background:#fafbfd; }
.active-order .flex { margin-bottom:8px; flex-wrap:wrap; }
.active-order table { min-width:0; }
.active-order th, .active-order td { padding:6px 10px; }

/* 马匹按马主分组 */
.owner-group { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 10px; border:1px dashed #e3e8ef; border-radius:8px; margin-bottom:6px; width:100%; }
.owner-tag { font-size:12px; font-weight:bold; color:#1e3a5f; background:#e8f1fd; border-radius:10px; padding:3px 10px; white-space:nowrap; }

/* 移动端汉堡按钮（桌面隐藏） */
.menu-btn { display:none; position:fixed; top:12px; left:12px; z-index:1000; background:#1e3a5f; color:#fff; border:none; border-radius:6px; font-size:20px; width:40px; height:40px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.2); }

/* ============ 手机端适配（重新优化） ============ */
@media (max-width: 768px) {
  .menu-btn { display:block; }
  .sidebar { transform:translateX(-100%); transition:transform .2s ease; z-index:999; box-shadow:2px 0 12px rgba(0,0,0,.15); width:240px; }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; padding:64px 12px 20px; }
  .page-title { font-size:17px; margin-bottom:12px; }
  .card { padding:12px; }
  /* 表格：手机端整卡横向滑动，附滚动条提示 */
  .card table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0; }
  table { font-size:12px; }
  th, td { padding:8px 8px; white-space:nowrap; }
  .form-row { flex-direction:column; align-items:stretch; }
  .form-row input, .form-row select { width:100% !important; max-width:100%; }
  input, select, textarea { font-size:16px; } /* 防 iOS 聚焦自动缩放 */
  .filter-bar { flex-wrap:wrap; gap:6px; }
  .stats { grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat { padding:12px 10px; }
  .stat .num { font-size:20px; }
  .product-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .product-tile { padding:12px 8px; }
  .product-tile .p-name { font-size:12px; }
  .btn { padding:10px 14px; font-size:14px; }
  .btn-sm { padding:7px 10px; font-size:12px; }
  .flex { flex-wrap:wrap; gap:6px; }
  /* 弹窗：手机端更宽、按钮更好点 */
  .modal { width:100%; max-width:100%; border-radius:14px; padding:18px; }
  .modal-mask { padding:10px; align-items:center; }
  .modal-form .btn { padding:12px; font-size:16px; }
  .chk { padding:8px 12px; font-size:14px; }
  .chk input { width:18px; height:18px; }
  .active-order table { display:block; overflow-x:auto; }
  .section-title { font-size:14px; }
  .flash { font-size:13px; padding:10px 12px; }
  .row2 { flex-direction:column; gap:0; }
  .owner-group { align-items:flex-start; }
}

/* ============ 工作台 ============ */
.hello-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; background:linear-gradient(135deg,#1e3a5f,#2f6fd0); color:#fff; border:none; }
.hello-name { font-size:22px; font-weight:bold; }
.hello-sub { margin-top:6px; opacity:.9; font-size:13px; }
.hello-sub b { color:#ffe08a; }
.hello-actions { display:flex; gap:8px; flex-wrap:wrap; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.quick { background:#f8fafc; border:1px solid #e3e8ef; border-radius:12px; padding:16px 12px; text-align:center; text-decoration:none; color:#2c3e50; transition:all .15s; }
.quick:hover { border-color:#2f6fd0; box-shadow:0 3px 10px rgba(47,111,208,.15); transform:translateY(-2px); }
.q-icon { font-size:30px; }
.q-name { font-size:14px; font-weight:bold; margin-top:8px; }
.q-desc { font-size:12px; color:#7f8c9b; margin-top:4px; }
@media (max-width:768px) { .quick-grid { grid-template-columns:repeat(2,1fr); } }

/* ============ 登录页 ============ */
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 40px); padding:20px; background:radial-gradient(circle at 20% 10%, #e8f1fd, #f4f6f9 60%); }
.login-box { width:100%; max-width:380px; background:#fff; border-radius:18px; padding:40px 36px; box-shadow:0 10px 40px rgba(30,58,95,.12); text-align:center; }
.login-logo { font-size:56px; }
.login-title { font-size:24px; font-weight:bold; color:#1e3a5f; margin-top:10px; }
.login-sub { color:#7f8c9b; font-size:13px; margin:6px 0 26px; }
.login-form .form-row input { padding:12px 14px; font-size:15px; }
.login-btn { width:100%; padding:12px; font-size:16px; margin-top:6px; border-radius:10px; }
.login-tip { margin-top:18px; font-size:12px; }
@media (max-width:768px){ .login-wrap { padding:10px; min-height:calc(100vh - 60px); } }

/* 侧边栏分组折叠（增强，覆盖原 nav-group） */
.sidebar .nav-group { cursor:pointer; user-select:none; position:relative; padding-right:24px; }
.sidebar .nav-group::after { content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:10px; opacity:.6; }
.sidebar .nav-group.collapsed::after { content:"▸"; }
.sidebar .nav-group:hover { color:#ffd97a; }


/* ================= M-ADAPT-V1 移动端适配（第一步） ================= */
/* 1) 文本自动缩放与整页横向溢出控制 */
html { -webkit-text-size-adjust: 100%; }
@media (max-width:768px){ body { overflow-x: hidden; } }

/* 2) 表格横滑提示（由全局 JS 插入） */
.table-scroll-hint { display:none; font-size:12px; color:#8a94a6; margin:6px 0 2px; }
@media (max-width:768px){ .table-scroll-hint { display:block; } }

/* 3) 移动端表格：横滑 + 冻结首列 + 右缘阴影提示 */
@media (max-width:768px){
  .card table { scrollbar-width: thin; }
  .card table th:first-child, .card table td:first-child{
    position: sticky; left: 0; z-index: 2; background:#fff;
  }
  .card table th:first-child{ background:#f8fafc; }
  .card table tr:hover td:first-child{ background:#fafbfd; }
  .card table th:first-child, .card table td:first-child{ box-shadow: 1px 0 0 #eef1f5; }
}

/* 4) 触控设备：加大点击目标 */
@media (pointer: coarse){
  .btn{ min-height:44px; }
  .btn-sm{ min-height:36px; }
  .chk{ padding:6px 10px; }
}

/* 5) 窄屏（手机竖屏）细化 */
@media (max-width:480px){
  .page-title{ font-size:16px; }
  .stats{ grid-template-columns: repeat(2, 1fr); gap:8px; }
  .stat .num{ font-size:18px; }
  .filter-bar{ gap:6px; }
  .filter-bar input, .filter-bar select{ min-width:0; }
  .hide-xs{ display:none !important; }
  .card{ padding:10px; }
}

/* 6) 平板区间（769-1024） */
@media (min-width:769px) and (max-width:1024px){
  .stats{ grid-template-columns: repeat(3, 1fr); }
}

/* 7) 全面屏安全区 */
@media (max-width:768px){
  .main{ padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .sidebar{ padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* 8) 横屏手机：压缩纵向留白 */
@media (max-width:900px) and (orientation: landscape){
  .card{ padding:10px 12px; }
  .page-title{ margin-bottom:8px; }
}


/* ================= M-ADAPT-V2 按钮内容居中 ================= */
.btn, .btn-sm { text-align: center; }
.btn > * , .btn-sm > * { vertical-align: middle; }
@media (max-width:768px){
  .btn, .btn-sm{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
  }
  /* 表单里的按钮同样居中 */
  button.btn, a.btn, .modal-form .btn { text-align: center; }
}

/* ================= M-ADAPT-V3 手机端表格 -> 卡片 ================= */
@media (max-width:768px){
  table.m-cards{ display:block; overflow:visible !important; width:100%; }
  table.m-cards tr.m-head{ display:none !important; }
  table.m-cards tr{
    display:block; background:#fff; border:1px solid #eef1f5; border-radius:10px;
    padding:4px 10px 8px; margin-bottom:10px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  table.m-cards td{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    border:none !important; padding:5px 0 !important; white-space:normal !important;
    text-align:right; font-size:13px; box-shadow:none !important;
    position:static !important; left:auto !important; background:transparent !important;
  }
  table.m-cards td::before{
    content: attr(data-label);
    color:#8a94a6; font-weight:600; flex:0 0 38%; text-align:left; white-space:nowrap;
  }
  table.m-cards td[data-label=""]::before{ content:''; flex-basis:0; }
  /* 首个有标签的单元格做成卡片标题 */
  table.m-cards td.m-title{
    border-bottom:1px dashed #eef1f5 !important; margin-bottom:4px; padding-bottom:6px !important;
    font-weight:700; font-size:14px;
  }
  table.m-cards tr:hover td{ background:transparent; }
}


/* ================= M-ADAPT-V4 卡片自适应网格 + 卡片/列表切换 ================= */
/* 切换按钮：仅手机端显示 */
#viewToggle{
  display:none;
  position:fixed; right:12px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index:1200;
  padding:9px 14px; border:none; border-radius:999px;
  background:#1e3a5f; color:#fff; font-size:13px; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
@media (max-width:768px){
  #viewToggle{ display:inline-flex; align-items:center; justify-content:center; }
  /* 卡片模式：按分辨率自动排布（窄屏 1 列，宽屏自动 2 列…） */
  table.m-cards{ display:block; overflow:visible !important; }
  table.m-cards tbody,
  table.m-cards > tbody{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap:10px;
  }
  table.m-cards tr{ margin-bottom:0 !important; }

  /* 列表模式（切换关掉卡片）：恢复普通表格横滑 */
  body.view-list table.m-cards{ display:block; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  body.view-list table.m-cards tbody,
  body.view-list table.m-cards > tbody{ display:table-row-group; }
  body.view-list table.m-cards tr,
  body.view-list table.m-cards tr.m-head{
    display:table-row !important; background:transparent !important;
    border:none !important; border-radius:0 !important;
    padding:0 !important; margin:0 !important; box-shadow:none !important;
  }
  body.view-list table.m-cards td{
    display:table-cell !important; text-align:left !important;
    border-bottom:1px solid #eef1f5 !important;
    padding:8px 8px !important; white-space:nowrap !important; font-size:12px;
  }
  body.view-list table.m-cards td::before{ content:none !important; }
  body.view-list table.m-cards td.m-title{ border-bottom:1px solid #eef1f5 !important; font-weight:normal !important; padding-bottom:8px !important; }
  body.view-list table.m-cards th:first-child,
  body.view-list table.m-cards td:first-child{
    position:sticky !important; left:0 !important; z-index:2 !important; background:#fff !important;
    box-shadow:1px 0 0 #eef1f5 !important;
  }
  body.view-list table.m-cards th:first-child{ background:#f8fafc !important; }
}


/* ================= M-ADAPT-V5 移动端：标签与控件强制同行 ================= */
/* 由全局 JS 把「label + 控件」包成 .fld，保证二者永不被换行拆开 */
.fld{ display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:nowrap; }
.fld > label{ flex:0 0 auto; white-space:nowrap; }
.fld > input:not([type=checkbox]):not([type=radio]),
.fld > select{
  flex:1 1 auto; min-width:0; width:auto !important; max-width:100%;
}
@media (max-width:768px){
  .filter-bar, .form-row{ align-items:center; row-gap:8px; }
  .filter-bar > .fld, .form-row > .fld{ flex:1 1 100%; }
}


/* ================= M-ADAPT-V6 移动端：筛选栏按钮居中 ================= */
@media (max-width:768px){
  /* 提交类按钮（查询/筛选）独占一行并居中 */
  .filter-bar > button:not([type="button"]):not([type="reset"]),
  .filter-bar > button[type="submit"],
  .filter-bar > input[type="submit"]{
    flex: 1 1 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  /* 其余操作按钮（导出/规则/打印/快捷）整组居中 */
  .filter-bar > button[type="button"],
  .filter-bar > a.btn{
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}


/* ================= M-ADAPT-V7 查询区布局优化 ================= */
/* 日期区间：标签 + 起始 + 至 + 结束 同在一行 */
.fld-date{ flex-wrap:nowrap; }
.fld-date > label{ flex:0 0 auto; }
.fld-date > input{ flex:1 1 0; min-width:0; width:auto !important; }
.fld-date > .muted{ flex:0 0 auto; font-size:12px; }
/* 操作按钮成组（桌面左对齐，手机整组居中且不占满整行） */
.bar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width:768px){
  .filter-bar{ row-gap:8px; }
  .filter-bar > .fld, .filter-bar > .fld-date, .filter-bar > .bar-actions{ flex:1 1 100%; }
  .bar-actions{ justify-content:center; }
  .bar-actions > .btn{ flex:0 1 auto; margin:0; min-width:96px; }
  /* 台账顶部统计块更紧凑 */
  .card .stats{ margin-top:8px; }
}


/* ================= M-ADAPT-V8 手机端弹窗完整显示 ================= */
@media (max-width:768px){
  /* 关键：顶部对齐 + 容器自身滚动，避免内容超高时顶部被裁掉 */
  .modal-mask{
    align-items: flex-start !important;
    padding: 10px 10px calc(28px + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal{
    max-height: none !important;
    padding: 16px 14px calc(22px + env(safe-area-inset-bottom)) !important;
  }
  .modal h3{ margin-top: 0; }
  /* 长表单里的输入框/下拉在手机上占满整行，避免挤压 */
  .modal-form > label{ display:block; margin-top:10px; }
  .modal-form > input, .modal-form > select{ width:100%; }
  /* 提交按钮吸底，长表单也能一眼看到 */
  .modal-form > button[type=submit]{
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: 14px;
    box-shadow: 0 -6px 12px rgba(255,255,255,.9);
  }
  /* 马匹勾选区在手机上两列显示 */
  .modal .chk-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}