/* 一般租賃內容樣式（殼用公司系統原始 Material Dashboard；這裡只管 #view 內容與文件預覽） */
:root{ --sh:#17408B; --sh2:#2f66c7; --sh-tint:#eaf1fd; --ink:#1c2636; --ink2:#5a6779; --line:#e2e8f2; --field:#f5f7fb; --green:#1f9d66; --amber:#e8930c; --red:#d64545; --purple:#7b61c9; }
#view .btn{border:0;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px;justify-content:center;transition:.15s;text-decoration:none}
#view .btn:active{transform:translateY(1px)}
#view .btn:disabled{opacity:.55;cursor:default}
#view .btn-primary{background:linear-gradient(150deg,var(--sh),var(--sh2));color:#fff;box-shadow:0 8px 18px -8px var(--sh)}
#view .btn-green{background:var(--green);color:#fff}
#view .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
#view .btn-sm{padding:7px 11px;font-size:13px;border-radius:8px}
#view .card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px -12px rgba(16,42,90,.18);padding:18px}
#view .card h2{margin:0 0 4px;font-size:17px;font-weight:800}
#view .card .sub{color:var(--ink2);font-size:13px;margin:0 0 14px;line-height:1.7}
#view .grid{display:grid;gap:16px}
#view .grid-4{grid-template-columns:repeat(4,1fr)}
#view .grid-2{grid-template-columns:repeat(2,1fr)}
#view .stat{display:flex;gap:14px;align-items:center}
#view .stat .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:#fff;flex:0 0 auto}
#view .stat b{font-size:24px;display:block}
#view .stat span{color:var(--ink2);font-size:12.5px}
#view .tag{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:99px}
#view .tag-blue{background:var(--sh-tint);color:var(--sh)} #view .tag-green{background:#e7f6ef;color:#146c43}
#view .tag-amber{background:#fdf1de;color:#9a6206} #view .tag-grey{background:#eef1f6;color:var(--ink2)}
#view table{width:100%;border-collapse:collapse;font-size:13.5px}
#view th{text-align:left;color:var(--ink2);font-size:12px;padding:10px 8px;border-bottom:2px solid var(--line);white-space:nowrap}
#view td{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
#view tr:hover td{background:#f8fafd}
#view .table-wrap{overflow-x:auto}
#view .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
#view .toolbar .sp{flex:1}
#view .searchbar{display:flex;gap:8px;flex-wrap:wrap}
#view .searchbar input,#view .searchbar select{border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13.5px;background:#fff}
#view .f-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
#view .f-grid .wide{grid-column:1/-1}
#view .fld{display:block}
#view .fld>span{display:block;font-size:12.5px;font-weight:800;margin-bottom:6px}
#view .fld>span em{color:var(--red);font-style:normal}
#view .fld input,#view .fld select,#view .fld textarea{width:100%;border:1.5px solid var(--line);background:var(--field);border-radius:11px;padding:12px 13px;font-size:15px;color:var(--ink);outline:none;transition:.15s}
#view .fld input:focus,#view .fld select:focus,#view .fld textarea:focus{border-color:var(--sh);background:#fff;box-shadow:0 0 0 4px var(--sh-tint)}
#view .fld small{display:block;color:var(--ink2);font-size:11.5px;margin-top:5px;line-height:1.6}
#view .fld .err{display:none;color:var(--red);font-size:12px;font-weight:700;margin-top:5px}
#view .fld.invalid input,#view .fld.invalid select{border-color:var(--red);background:#fff7f7}
#view .fld.invalid .err{display:block}
#view .chips{display:flex;gap:8px;flex-wrap:wrap}
#view .chip-btn{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer}
#view .chip-btn.on{background:var(--sh);border-color:var(--sh);color:#fff}
#view .checkline{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.6;cursor:pointer;padding:8px 0}
#view .checkline input{width:19px;height:19px;margin-top:2px;accent-color:var(--sh);flex:0 0 auto}
#view .steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
#view .step{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:99px;background:#fff;border:1.5px solid var(--line);font-size:13.5px;font-weight:800;color:var(--ink2);cursor:pointer}
#view .step b{width:22px;height:22px;border-radius:50%;background:#e6ecf5;color:var(--ink2);display:grid;place-items:center;font-size:12px}
#view .step.on{background:var(--sh);border-color:var(--sh);color:#fff}
#view .step.on b{background:#fff;color:var(--sh)}
#view .step.done{color:#146c43;border-color:#bfe6d4;background:#eefaf4}
#view .step.done b{background:var(--green);color:#fff}
#view .progress{height:9px;background:#e4eaf4;border-radius:99px;overflow:hidden;margin:10px 0 4px}
#view .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--sh),var(--sh2));border-radius:99px;transition:width .3s}
#view .stickybar{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 4px;display:flex;gap:10px;align-items:center;z-index:20;margin-top:18px}
#view .stickybar .sp{flex:1}
#view .missbox{background:#fff8ec;border:1px solid #f3d9ab;border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.9}
#view .missbox b{color:#9a6206}
#view .missbox a{font-weight:800;text-decoration:underline;cursor:pointer;color:var(--sh)}
#view .sign-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#view .sign-pad{border:1.5px solid var(--line);border-radius:12px;padding:12px;background:#fff}
#view .sign-pad h4{margin:0 0 2px;font-size:14px}
#view .sign-pad p{margin:0 0 8px;font-size:12px;color:var(--ink2)}
#view .sign-canvas{width:100%;height:150px;border:1.5px dashed #b9c7de;border-radius:10px;background:#fbfcfe;touch-action:none;cursor:crosshair}
#view .sign-meta{font-size:11.5px;color:var(--ink2);min-height:16px;margin-top:6px}
#view .sign-ok{color:#146c43;font-weight:800}
#view .empty{padding:34px 10px;text-align:center;color:var(--ink2);font-size:14px;line-height:1.9}
@media(max-width:900px){ #view .grid-4{grid-template-columns:repeat(2,1fr)} #view .sign-grid{grid-template-columns:1fr} }
@media(max-width:720px){ #view .f-grid{grid-template-columns:1fr} #view .grid-2{grid-template-columns:1fr} }

/* 文件預覽（蓋在公司系統殼之上） */
.doc-overlay{position:fixed;inset:0;background:rgba(10,20,40,.66);z-index:2000;display:flex;flex-direction:column;font-family:"Inter","Noto Sans TC","Microsoft JhengHei",sans-serif}
.doc-overlay[hidden]{display:none}
.doc-toolbar{background:#fff;padding:10px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:1px solid #e2e8f2}
.doc-toolbar b{font-size:15px;margin-right:auto}
.doc-toolbar .btn{border:0;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:800;cursor:pointer}
.doc-toolbar .btn-primary{background:linear-gradient(150deg,#17408B,#2f66c7);color:#fff}
.doc-toolbar .btn-ghost{background:#fff;color:#1c2636;border:1.5px solid #e2e8f2}
.doc-scroll{overflow:auto;padding:22px 12px 60px}
.doc-sheet{background:#fff;max-width:820px;margin:0 auto;padding:56px 60px;box-shadow:0 20px 50px rgba(0,0,0,.35);color:#111;font-family:"PMingLiU","新細明體",serif;line-height:1.9;font-size:14.5px}
.doc-sheet h1{text-align:center;font-size:21px;letter-spacing:2px;margin:0 0 6px}
.doc-sheet .doc-basis{text-align:center;font-size:12px;color:#444;margin-bottom:18px}
.doc-sheet h3{font-size:15px;margin:18px 0 4px}
.doc-sheet p{margin:4px 0;text-align:justify}
.doc-sheet .fill{border-bottom:1px solid #333;padding:0 4px;font-weight:700}
.doc-sheet .siggrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px}
.doc-sheet .sigbox{border-top:1px solid #999;padding-top:8px;font-size:13px;line-height:1.8}
.doc-sheet .sigbox img{max-width:230px;max-height:80px;display:block}
.doc-sheet .note{font-size:12px;color:#333;border:1px solid #999;padding:10px 12px;margin-top:18px;line-height:1.8}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:#12233f;color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:3000;box-shadow:0 8px 24px rgba(16,42,90,.3);max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:720px){ .doc-sheet{padding:34px 22px} }
@media print{
  body>*{display:none!important}
  body>.doc-overlay{display:flex!important;position:static;background:none}
  .doc-toolbar{display:none!important}
  .doc-scroll{overflow:visible;padding:0}
  .doc-sheet{box-shadow:none;max-width:none;padding:10mm}
}
