/* 五星用车管理系统 · 手机 / 平板 / 电脑 / 微信 适配层
   原则：电脑（>760px）外观保持原样；手机上换成卡片式布局、大按钮、16px 输入框。 */
:root{
  --gc-blue:#1a3d7c;
  --gc-blue-2:#2c5aa0;
  --gc-radius:10px;
  --gc-line:#e9edf3;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:hidden;}
img,video,canvas{max-width:100%;}
.gc-hide{display:none !important;}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* 注意：手机专用块（.gc-cards.mobile-only）的隐藏规则必须放在下面用 !important，
   否则会被后面 .gc-cards{display:flex} 按"同优先级取后者"的规则冲掉，
   电脑上就会同时显示表格和卡片（内容重复）。 */
.gc-hint{background:#fff8e6;border:1px solid #f3dfae;color:#8a6d3b;border-radius:8px;
         padding:10px 12px;font-size:13px;line-height:1.6;margin-bottom:12px;}
.gc-hint b{color:#8a6d3b;}

/* ---------- 手机上的卡片列表（表格的替身） ---------- */
.gc-cards{display:flex;flex-direction:column;gap:10px;}
.gc-card{background:#fff;border:1px solid var(--gc-line);border-radius:var(--gc-radius);padding:12px;}
.gc-card .gc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;}
.gc-card .gc-plate{font-size:18px;font-weight:700;color:var(--gc-blue);letter-spacing:.5px;}
.gc-card .gc-time{font-size:12px;color:#98a2b3;text-align:right;line-height:1.5;}
.gc-card .gc-line{display:flex;gap:8px;font-size:13.5px;line-height:1.75;color:#333;}
.gc-card .gc-line .k{color:#98a2b3;flex:0 0 58px;}
.gc-card .gc-line .v{flex:1;min-width:0;word-break:break-word;}
.gc-card .gc-thumbs{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;}
.gc-card .gc-thumbs figure{margin:0;text-align:center;}
.gc-card .gc-thumbs img{width:66px;height:66px;object-fit:cover;border-radius:6px;border:1px solid var(--gc-line);display:block;}
.gc-card .gc-thumbs figcaption{font-size:11px;color:#98a2b3;margin-top:3px;}
.gc-card .gc-foot{display:flex;gap:8px;margin-top:10px;}
.gc-card .gc-foot .btn{flex:1;width:100%;}
.gc-card .gc-empty{color:#98a2b3;text-align:center;padding:20px 0;}
.tag-sm{font-size:12px;}

/* 拍照区：手机上视频框按屏幕宽度自适应 */
.gc-cam{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.gc-cam video,.gc-cam img{border-radius:8px;}
.gc-cam video{background:#000;width:100%;max-width:420px;}
.gc-cam .gc-cam-btns{display:flex;gap:8px;flex-wrap:wrap;}
.gc-cam .gc-cam-btns .btn{margin:0;}

/* 弹窗：默认必须是隐藏的，点了按钮才由 JS 改成 display:flex
   （管理设置页要用，之前只有首页写了这套样式，导致管理页的弹窗一直贴在页面底部） */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);
       display:none;align-items:center;justify-content:center;z-index:9998;}
.modal-box{background:#fff;border-radius:10px;padding:24px;width:420px;max-width:92%;text-align:center;}
.modal-box h3{font-size:17px;color:#1a3d7c;margin-bottom:14px;}
.modal-actions{margin-top:14px;}
.modal-actions .btn{margin:4px;}
.info-line{font-size:14px;color:#555;text-align:left;margin-bottom:10px;}
.info-line b{color:#1a3d7c;font-size:16px;}
.step-tip{font-size:12px;color:#999;text-align:center;margin-bottom:12px;}
.camera-tip{color:#888;font-size:12px;display:none;}
.muted{color:#888;font-size:12px;}

/* 进入受保护页面时的密码遮罩（管理设置、历史记录共用） */
.lock-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(26,61,124,.97);
              display:none;align-items:center;justify-content:center;z-index:9999;padding:16px;}
.lock-box{background:#fff;border-radius:10px;padding:30px 32px;text-align:center;
          box-shadow:0 8px 30px rgba(0,0,0,.3);width:340px;max-width:100%;}
.lock-box h2{font-size:18px;color:#1a3d7c;margin-bottom:8px;}
.lock-box p{font-size:13px;color:#888;margin-bottom:18px;}
.lock-box input{width:100%;padding:11px 14px;border:1px solid #ddd;border-radius:5px;
                font-size:16px;text-align:center;letter-spacing:2px;margin-bottom:12px;}
.lock-box .err{color:#e74c3c;font-size:13px;min-height:18px;margin-bottom:8px;}
.lock-box .btn{margin:4px 6px;}

/* 顶部导航和标题 */
.nav{-webkit-overflow-scrolling:touch;}

/* 电脑上把"手机专用"那几块藏掉（用 !important 才压得住 .gc-cards 的 display:flex） */
@media (min-width:901px){
  .mobile-only{display:none !important;}
}

/* 767px 是 iPhone/安卓横竖屏常见宽度，900px 以下是平板竖屏：
   这些设备都是手指操作，统一用"卡片 + 大按钮"这套布局更好用 */
@media (max-width:900px){
  .desktop-only{display:none !important;}

  .header{padding:12px 14px !important;gap:10px;}
  .header h1{font-size:16px !important;line-height:1.35;}
  .header .sub{font-size:12px;}
  .header .btn-logout,.header .logout,.header button{white-space:nowrap;}
  .header .btn-logout,.header .logout,.header .btn{
    min-height:38px;padding:8px 12px !important;font-size:13px !important;}
  .nav{display:flex;overflow-x:auto;white-space:nowrap;}
  .nav a{flex:0 0 auto;padding:12px 16px !important;font-size:14px !important;}
  .container{margin:12px auto !important;padding:0 12px !important;max-width:100% !important;}
  .card{padding:14px !important;border-radius:var(--gc-radius);}
  .card h2{font-size:15px !important;margin-bottom:12px !important;}
  .grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;}
  .stat{padding:12px !important;}
  .stat .num{font-size:26px !important;}
  .stat .label{font-size:12px !important;}
  table{font-size:13px;}
  th,td{padding:8px 8px !important;}

  /* 手机上输入框一律 16px：低于 16px 时 iPhone 一聚焦就自动放大页面 */
  input,select,textarea{font-size:16px !important;padding:12px !important;}
  select{height:46px;}
  textarea{min-height:76px;}
  .form-row{margin-bottom:12px !important;}
  .form-row label{font-size:14px !important;}

  /* 手指点的东西要够大 */
  .btn,.btn-sm{padding:12px 16px !important;font-size:15px !important;min-height:44px;
               display:inline-flex;align-items:center;justify-content:center;line-height:1.2;}
  .btn.block,.btn-block{width:100%;}
  .lock-box{padding:22px 18px !important;}
  .lock-box input{min-height:46px;}
  .lock-box .btn{width:100%;margin:6px 0 !important;}

  /* 弹窗：手机上从顶部开始排，内容多了能滚，键盘弹出来也不挡住按钮 */
  .modal{align-items:flex-start !important;padding:10px !important;overflow-y:auto !important;
         -webkit-overflow-scrolling:touch;}
  .modal-box{width:100% !important;max-width:100% !important;margin:6px 0 20px !important;
             padding:16px !important;border-radius:12px;max-height:none !important;}
  .modal-box h3{font-size:16px !important;}
  /* 手机上按钮竖排，顺序和桌面一致：主操作在前，"取消"排最后
     （之前用了 column-reverse，导致"取消"跑到最上面，用户反馈过） */
  .modal-actions{display:flex;flex-direction:column;gap:8px;}
  .modal-actions .btn{width:100%;margin:0 !important;}

  /* 管理页的 Tab：手机上排成两行，全部露在外面（横着滑容易让人以为只有三个页签） */
  .tabs{flex-wrap:wrap;border-bottom:none;}
  .tab{flex:1 1 42%;padding:12px 10px !important;font-size:14px !important;white-space:nowrap;
       border:1px solid #e0e6ef;border-radius:8px;margin:0 0 8px;}
  .tab.active{background:#f0f6ff;border-bottom-color:#e0e6ef;}

  /* 历史页筛选：竖着排，每个占满一行 */
  .filter{flex-direction:column;align-items:stretch !important;gap:10px !important;}
  .filter .f-item{width:100%;}
  .filter select,.filter input{width:100%;}
  .filter .btn{width:100%;}

  /* 审批页 */
  .stat-bar{gap:8px !important;}
  .stat-bar .stat .num{font-size:24px !important;}
  .card .plate{font-size:19px !important;}
  .btns{flex-direction:row;gap:10px;}
  .btns .btn{padding:14px 12px !important;font-size:16px !important;}
  .refresh{bottom:16px !important;right:16px !important;width:46px !important;height:46px !important;}

  /* 照片缩略图和查看大图 */
  .photo-thumb{width:56px !important;height:56px !important;}
  .photo-thumb:hover{transform:none;}
  /* 摄像头画面小一点、居中：手机上原来占满整屏，弹窗要上下滚才点到按钮 */
  .gc-cam video,#camera-video,#return-video,#ar-video{
    width:auto !important;
    max-width:min(60vw,260px) !important;
    max-height:32vh;
    margin:0 auto;
  }
  .gc-cam img,#photo-preview,#return-preview,#ar-preview{
    max-width:min(60vw,260px) !important;
    max-height:32vh;
    margin:0 auto;
  }

  /* 底部留白：避开 iPhone 底部横条 */
  body{padding-bottom:env(safe-area-inset-bottom);}
  .container{padding-bottom:20px;}
}

@media (max-width:360px){
  .grid{grid-template-columns:1fr 1fr !important;}
  .stat .num{font-size:22px !important;}
  .header h1{font-size:15px !important;}
}

/* 横屏手机：别让内容被顶栏挤掉 */
@media (max-width:900px) and (orientation:landscape){
  .modal{padding:6px !important;}
  .modal-box{margin:0 !important;}
}