/* ==========================================================
   裝卸作業監控儀表板 - style.css
   設計語彙：深空導航艙／科技藍＋警示色，對應原始戰情室介面
   ========================================================== */

:root{
  --bg:            #060a14;
  --bg-2:          #0a1220;
  --panel:         #0c1526;
  --panel-2:       #0f1c33;
  --border:        #1e3a56;
  --border-bright: #2f6b8f;
  --accent:        #2dd4ee;
  --accent-2:      #59c2ff;
  --text:          #dceaf7;
  --text-dim:      #6f89a3;
  --text-faint:    #4a5f77;
  --green:         #23e07a;
  --red:           #ff4d5e;
  --yellow:        #ffcf3d;
  --pink:          #ff3fa4;

  --radius:        10px;
  --gap:           10px;
  --header-h:      64px;

  /* 內容區三個橫向切段比例（可依實際內容微調） */
  --row-a: 0.92fr;   /* LED看板 高度 */
  --row-b: 1.15fr;   /* PLC資料 高度 */
  --row-c: 1.25fr;   /* 底部三卡：裝卸狀態 / OCR1 / OCR2 */
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif;
  overflow:hidden; /* 桌面/平板：不出現整頁上下卷軸 */
}

body.is-compact{
  overflow-y:auto; /* 小螢幕：改允許整頁捲動 */
}

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background:var(--border-bright); border-radius:4px; }
::-webkit-scrollbar-track{ background:transparent; }

.mono{ font-family:'Share Tech Mono','Consolas',monospace; letter-spacing:.02em; }

/* ---------------- 版面骨架 ---------------- */
.dashboard{
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:10px;
  gap:var(--gap);
}

body.is-compact .dashboard{
  height:auto;
  min-height:100vh;
}

/* ---------------- 頂部列 ---------------- */
.topbar{
  height:var(--header-h);
  flex:0 0 auto;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  background:
    linear-gradient(90deg, rgba(45,212,238,.10), transparent 30%, transparent 70%, rgba(45,212,238,.10)),
    var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.topbar::before, .topbar::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:120px;
  background:linear-gradient(90deg, rgba(45,212,238,.35), transparent);
  clip-path:polygon(0 0,100% 0,80% 100%,0% 100%);
  opacity:.5;
}
.topbar::before{ left:-20px; }
.topbar::after{ right:-20px; transform:scaleX(-1); }

.topbar__left, .topbar__right{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  color:var(--text-dim);
  z-index:1;
  white-space:nowrap;
}
.topbar__left b, .topbar__right b{ color:var(--text); font-weight:600; }

.topbar__title{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-size:22px;
  font-weight:700;
  letter-spacing:.12em;
  color:#fff;
  text-shadow:0 0 14px rgba(45,212,238,.65), 0 0 2px rgba(45,212,238,.8);
  z-index:1;
}

.live-badge{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--green); font-weight:600;
}
.live-badge .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
  animation:blink 1.4s infinite;
}
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.icon-btn{
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px;
  color:var(--text-dim);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.icon-btn:hover{ background:rgba(45,212,238,.12); color:var(--accent); }
.icon-btn svg{ width:16px; height:16px; }

/* ---------------- 主要內容 Grid ---------------- */
.main-grid{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns: 1.02fr 1.5fr 1.08fr;
  grid-template-rows: var(--row-a) var(--row-b) var(--row-c);
  grid-template-areas:
    "list  cctv led"
    "list  cctv plc"
    "status ocr1 ocr2";
  gap:var(--gap);
}

body.is-compact .main-grid{
  display:flex;
  flex-direction:column;
  height:auto;
}

.panel{ grid-area: var(--area); }
#panel-list   { --area:list; }
#panel-cctv   { --area:cctv; }
#panel-led    { --area:led; }
#panel-plc    { --area:plc; }
#panel-status { --area:status; }
#panel-ocr1   { --area:ocr1; }
#panel-ocr2   { --area:ocr2; }

/* ---------------- 卡片通用樣式 ---------------- */
.panel{
  min-height:0;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: inset 0 0 24px rgba(45,212,238,.03);
  overflow:hidden;
}
body.is-compact .panel{ min-height:260px; flex:0 0 auto; }

.panel__head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  border-bottom:1px solid var(--border);
  background:rgba(45,212,238,.05);
}
.panel__head svg{ width:15px; height:15px; color:var(--accent); flex:0 0 auto; }
.panel__head .tag{
  margin-left:auto;
  font-size:11px;
  font-weight:500;
  color:var(--text-faint);
}

.panel__body{
  flex:1 1 auto;
  min-height:0;
  padding:10px 12px;
  overflow:auto;
}

/* ---------------- M1 載卸資料清單 ---------------- */
.dt-table-wrap{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}
table.dt{
  width:100%;
  border-collapse:collapse;
  font-size:11.5px;
}
table.dt thead th{
  position:sticky; top:0;
  background:var(--panel);
  color:var(--text-dim);
  font-weight:600;
  text-align:left;
  padding:5px 6px;
  border-bottom:1px solid var(--border);
  z-index:1;
}
table.dt tbody td{
  padding:4.5px 6px;
  border-bottom:1px solid rgba(30,58,86,.5);
  color:var(--text);
  white-space:nowrap;
}
table.dt tbody tr:hover{ background:rgba(45,212,238,.06); }

.badge{
  display:inline-block;
  padding:1.5px 7px;
  border-radius:20px;
  font-size:10.5px;
  font-weight:600;
}
.st-done   { color:var(--green); background:rgba(35,224,122,.12); }
.st-working{ color:var(--yellow); background:rgba(255,207,61,.12); }
.st-waiting{ color:var(--text-dim); background:rgba(111,137,163,.12); }
.st-error  { color:var(--red); background:rgba(255,77,94,.14); }

.dt-summary{
  flex:0 0 auto;
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed var(--border);
  font-size:11.5px;
  color:var(--text-dim);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dt-summary .row{ display:flex; justify-content:space-between; }
.dt-summary b{ color:var(--text); }
.progress{
  height:6px;
  border-radius:4px;
  background:rgba(111,137,163,.18);
  overflow:hidden;
}
.progress > i{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--accent),var(--green));
  border-radius:4px;
}

/* ---------------- M2 CCTV ---------------- */
#panel-cctv .panel__body{ padding:8px; display:flex; flex-direction:column; gap:8px; }
.cctv-frame{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}
/* 強制 4:3 比例的內部容器：以高度為主自動置中裁切 */
.cctv-ratio{
  position:relative;
  height:100%;
  aspect-ratio: 4 / 3;
  max-width:100%;
  background:#000;
}
.cctv-ratio img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.cctv-live{
  position:absolute; top:8px; right:10px;
  display:flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.45);
  padding:3px 8px; border-radius:20px;
}
.cctv-live .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:blink 1.2s infinite; }
.cctv-offline{
  color:var(--text-dim); font-size:12px; text-align:center; padding:20px;
}

.cctv-tools{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:22px;
  padding:6px 0 2px;
}
.cctv-tools .icon-btn{ width:30px; height:30px; color:var(--text-dim); }
.cctv-tools .icon-btn svg{ width:17px; height:17px; }

/* ---------------- M3 LED 看板 ---------------- */
#panel-led .panel__body{
  display:flex; align-items:center; justify-content:center;
  padding:8px;
}
.led-box{
  width:100%; height:100%;
  border:2px solid var(--red);
  border-radius:8px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,77,94,.06), transparent 60%),
    #050708;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px;
  padding:8px 6px;
  min-height:0;
}
.led-box.alert{ animation:ledAlert 1s infinite; }
@keyframes ledAlert{ 0%,100%{ border-color:var(--red);} 50%{ border-color:#ffb3ba;} }

.led-arrow svg{ width:56%; max-width:120px; height:auto; filter:drop-shadow(0 0 6px rgba(35,224,122,.7)); }
.led-distance{
  font-size:clamp(18px,2.6vw,28px);
  font-weight:800;
  color:var(--pink);
  text-shadow:0 0 10px rgba(255,63,164,.6);
  line-height:1;
}
.led-sub{
  display:flex; align-items:center; gap:10px;
}
.led-ped svg{ width:20px; height:20px; color:var(--text); }
.led-dims{ display:flex; gap:6px; }
.led-dims span{
  border:1px solid var(--red);
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:2px 8px;
  border-radius:4px;
  background:rgba(255,77,94,.08);
}

/* ---------------- M4 PLC 資料 ---------------- */
table.plc{ width:100%; border-collapse:collapse; font-size:12px; }
table.plc td{ padding:6px 4px; border-bottom:1px solid rgba(30,58,86,.5); }
table.plc td:first-child{ color:var(--text-dim); width:44%; }
table.plc td:last-child{ text-align:right; font-weight:600; }
.plc-ok{ color:var(--green); }
.plc-normal{ color:var(--accent-2); }
.plc-warn{ color:var(--yellow); }
.plc-error{ color:var(--red); }

/* ---------------- M5 裝卸狀態 ---------------- */
#panel-status .panel__body{
  display:flex;
  gap:10px;
  align-items:center;
}
.gauge-wrap{
  flex:0 0 auto;
  position:relative;
  width:96px; height:96px;
  display:flex; align-items:center; justify-content:center;
}
.gauge-wrap svg{ width:100%; height:100%; }
.gauge-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.gauge-center b{ font-size:13px; color:var(--accent-2); letter-spacing:.05em; }
.gauge-center span{ font-size:9.5px; color:var(--text-dim); }

.status-info{ flex:1 1 auto; min-width:0; font-size:11.5px; }
.status-info .row{
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 0; border-bottom:1px dashed rgba(30,58,86,.5);
  gap:8px;
}
.status-info .row span:first-child{ color:var(--text-dim); flex:0 0 auto; }
.status-info .row span:last-child{ color:var(--text); text-align:right; }
.lamp-row{ display:flex; gap:6px; }
.lamp{ width:12px; height:12px; border-radius:50%; background:#2a3a4c; opacity:.35; }
.lamp.on.red{ background:var(--red); opacity:1; box-shadow:0 0 8px var(--red); }
.lamp.on.yellow{ background:var(--yellow); opacity:1; box-shadow:0 0 8px var(--yellow); }
.lamp.on.green{ background:var(--green); opacity:1; box-shadow:0 0 8px var(--green); }
.tcs-alert{ color:var(--red); font-weight:600; }

/* ---------------- M6 OCR ---------------- */
.ocr-layout{
  display:flex; gap:10px;
  height:100%;
  min-height:0;
}
.ocr-fields{
  flex:1 1 50%;
  min-width:0;
  font-size:11.5px;
  display:flex; flex-direction:column;
}
.ocr-fields .row{
  display:flex; justify-content:space-between;
  padding:3px 0; border-bottom:1px dashed rgba(30,58,86,.5);
  gap:6px;
}
.ocr-fields .row span:first-child{ color:var(--text-dim); }
.ocr-fields .row span:last-child{ color:var(--text); font-weight:600; text-align:right; overflow:hidden; text-overflow:ellipsis; }
.ocr-fields .no{ color:var(--accent-2); font-weight:700; }
.ocr-result{
  margin-top:auto;
  padding-top:6px;
}
.ocr-thumb{
  flex:1 1 50%;
  min-width:0;
  position:relative;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#000;
  aspect-ratio: 4 / 3;
  max-height:100%;
}
.ocr-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ---------------- 響應式 (RWD) ---------------- */

/* 中型螢幕：欄位縮窄但維持三欄 */
@media (max-width: 1280px){
  .main-grid{ grid-template-columns: 1.05fr 1.35fr 1.1fr; }
  .topbar__title{ font-size:17px; }
}

/* 平板：改為兩欄，左右資訊欄位移到下方，允許整頁捲動 */
@media (max-width: 980px){
  .dashboard{ height:auto; }
  html,body{ overflow-y:auto; }
  .main-grid{
    display:flex;
    flex-direction:column;
    height:auto;
  }
  .panel{ min-height:300px; }
  #panel-cctv{ order:1; }
  #panel-list{ order:2; }
  #panel-led{ order:3; }
  #panel-plc{ order:4; }
  #panel-status{ order:5; }
  #panel-ocr1{ order:6; }
  #panel-ocr2{ order:7; }
  .topbar{ flex-wrap:wrap; height:auto; padding:10px 14px; gap:6px; }
  .topbar__title{ position:static; transform:none; order:-1; width:100%; text-align:center; margin-bottom:4px; }
}

/* 手機：單欄堆疊 */
@media (max-width: 620px){
  .dashboard{ padding:8px; gap:8px; }
  .topbar__left, .topbar__right{ font-size:11px; gap:8px; }
  .ocr-layout{ flex-direction:column; }
  .ocr-thumb{ aspect-ratio:16/9; }
  table.dt{ font-size:10.5px; }
}