@charset "utf-8";
/* ==========================================================
   纜線班工作管理系統 — 樣式表
   方向：工務藍圖。深墨藍功能表 + 淺灰白工作區 + 深青主動作，
   線路欄位以等寬字「線路標籤」呈現。
   ========================================================== */

:root{
  --fs: 1;                      /* 字體縮放倍率，由 JS 調整 */

  --ink:        #16232E;        /* 主功能表底色 */
  --ink-soft:   #22323F;
  --ink-line:   #2E404F;
  --ink-text:   #C7D4DE;

  --paper:      #EEF1F3;        /* 工作區底色 */
  --card:       #FFFFFF;
  --line:       #DCE3E8;
  --line-soft:  #E9EEF1;

  --text:       #1B2A35;
  --text-mid:   #4E626F;
  --text-dim:   #7A8B97;

  --teal:       #0E7C7B;        /* 主要動作 */
  --teal-dark:  #0A6260;
  --teal-tint:  #E4F1F0;

  --amber:      #F2B705;        /* 提示訊息底色，刻意與主功能表對比 */
  --amber-deep: #7A5A00;
  --amber-tint: #FEF6DC;

  --red:        #C0392B;
  --red-tint:   #FBEAE8;
  --green:      #1F7A45;
  --green-tint: #E6F3EB;
  --orange:     #B4610E;
  --orange-tint:#FCF0E2;
  --gray-tint:  #ECEFF1;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --shadow:    0 1px 2px rgba(20,35,46,.06), 0 6px 20px rgba(20,35,46,.07);
  --shadow-lg: 0 18px 48px rgba(20,35,46,.22);

  --nav-w: 17rem;
  --nav-w-collapsed: 4.75rem;
  --tap: 2.75rem;               /* 可點選元素最小高度 */

  --sans: "Noto Sans TC","PingFang TC","Microsoft JhengHei","Hiragino Sans GB",system-ui,sans-serif;
  --mono: "SFMono-Regular",Menlo,Consolas,"Roboto Mono","Noto Sans TC",monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

/* 任何元素只要有 hidden 屬性就一定藏起來，不被自訂 display 蓋掉 */
[hidden]{ display:none !important; }

html{
  font-size: calc(16px * var(--fs));
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--sans);
  font-size:.95rem;
  line-height:1.6;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.35; }
a{ color:var(--teal-dark); }
img{ max-width:100%; }

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; border-radius:4px; }

.skip-link{
  position:fixed; left:-999px; top:0; z-index:200;
  background:var(--amber); color:var(--amber-deep); padding:.75rem 1.25rem; font-weight:700;
}
.skip-link:focus{ left:0; }

/* ── 版面骨架 ───────────────────────────────────────────── */
.layout{ display:flex; min-height:100vh; min-height:100dvh; }

.content{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  margin-left:var(--nav-w);
  transition:margin-left .22s ease;
}
body.nav-collapsed .content{ margin-left:var(--nav-w-collapsed); }

.main{
  flex:1 1 auto;
  width:100%;
  max-width:132rem;          /* 寬螢幕盡量加寬 */
  margin:0 auto;
  padding:1.25rem clamp(.75rem, 2vw, 2rem) 3rem;
}

.footer{
  padding:1rem 1.5rem 2rem;
  text-align:center;
  color:var(--text-dim);
  font-size:.8rem;
}
.footer__dot{ margin:0 .5rem; }

/* ── 主功能表 ───────────────────────────────────────────── */
.sidebar{
  position:fixed; inset:0 auto 0 0; z-index:60;
  width:var(--nav-w);
  display:flex; flex-direction:column;
  background:var(--ink);
  color:var(--ink-text);
  transition:width .22s ease, transform .22s ease;
  overflow:hidden;
}
body.nav-collapsed .sidebar{ width:var(--nav-w-collapsed); }

.sidebar__brand{
  display:flex; align-items:center; gap:.7rem;
  padding:1rem .85rem;
  border-bottom:1px solid var(--ink-line);
  min-height:4.25rem;
}
.brand__mark{
  flex:none; width:2.4rem; height:2.4rem; display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--teal); color:#fff;
}
.brand__mark svg{ width:1.5rem; height:1.5rem; }
.brand__text{ display:flex; flex-direction:column; min-width:0; white-space:nowrap; }
.brand__text b{ font-size:1.02rem; color:#fff; letter-spacing:.04em; }
.brand__text small{ font-size:.72rem; color:#8FA3B2; letter-spacing:.14em; }

.sidebar__toggle{
  margin-left:auto; flex:none;
  width:var(--tap); height:var(--tap);
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--ink-line); border-radius:var(--r-sm);
  color:var(--ink-text); cursor:pointer;
  transition:background .15s ease, transform .22s ease;
}
.sidebar__toggle svg{ width:1.35rem; height:1.35rem; }
.sidebar__toggle:hover{ background:var(--ink-soft); }
body.nav-collapsed .sidebar__toggle{ transform:rotate(180deg); }

.nav{ padding:.75rem .6rem; display:flex; flex-direction:column; gap:.2rem; overflow-y:auto; }

.nav__item{
  display:flex; align-items:center; gap:.85rem;
  min-height:var(--tap);
  padding:.6rem .7rem;
  border-radius:var(--r-sm);
  color:var(--ink-text); text-decoration:none; font-weight:600; font-size:.95rem;
  white-space:nowrap;
  border-left:3px solid transparent;
  transition:background .15s ease, color .15s ease;
}
.nav__item:hover{ background:var(--ink-soft); color:#fff; }
.nav__item.is-active{ background:var(--ink-soft); color:#fff; border-left-color:var(--teal); }
.nav__item .ic{ flex:none; width:1.4rem; height:1.4rem; }
.nav__item--quiet{ margin-top:.35rem; font-weight:500; color:#9FB1BE; }

body.nav-collapsed .nav__label,
body.nav-collapsed .brand__text,
body.nav-collapsed .profile__who,
body.nav-collapsed .profile__caret{ display:none; }
body.nav-collapsed .nav__item{ justify-content:center; padding-inline:0; }
body.nav-collapsed .sidebar__brand{ justify-content:center; padding-inline:.5rem; }
body.nav-collapsed .brand__mark{ display:none; }
body.nav-collapsed .profile__head{ justify-content:center; }

/* ── 個人資訊區塊 ───────────────────────────────────────── */
.profile{
  margin-top:auto;
  border-top:1px solid var(--ink-line);
  display:flex; flex-direction:column; min-height:0;
}
.profile__head{
  display:flex; align-items:center; gap:.75rem;
  width:100%; padding:.85rem .85rem;
  background:transparent; border:0; color:inherit; cursor:pointer;
  text-align:left; font:inherit; min-height:3.75rem;
}
.profile__head:hover{ background:var(--ink-soft); }
.avatar{
  flex:none; width:2.3rem; height:2.3rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--teal); color:#fff; font-weight:700; font-size:1rem;
}
.profile__who{ display:flex; flex-direction:column; min-width:0; }
.profile__who b{ color:#fff; font-size:.92rem; }
.profile__who small{ color:#8FA3B2; font-size:.75rem; }
.profile__caret{ margin-left:auto; width:1.2rem; height:1.2rem; transition:transform .2s ease; }
.profile__head[aria-expanded="true"] .profile__caret{ transform:rotate(180deg); }

.profile__panel{
  padding:.25rem .85rem 1rem;
  overflow-y:auto;
  border-top:1px solid var(--ink-line);
  background:#121D26;
}
.profile__panel .field__label{ color:#8FA3B2; }
.profile__panel input{
  background:#0D171F; border-color:var(--ink-line); color:#EAF1F5;
}
.profile__panel input:focus{ border-color:var(--teal); background:#0D171F; }
.profile__hint{
  margin:.9rem 0 .25rem; font-size:.78rem; color:#8FA3B2;
  padding-top:.75rem; border-top:1px dashed var(--ink-line);
}
.profile__msg{ font-size:.82rem; min-height:1.1rem; }
.profile__msg.is-ok{ color:#7FD6A9; }
.profile__msg.is-err{ color:#F2A9A0; }

.sidebar__scrim{
  position:fixed; inset:0; z-index:55;
  background:rgba(12,20,27,.55);
  border:0;
}

/* ── 頂端列 ─────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem clamp(.75rem,2vw,2rem);
  min-height:3.9rem;
  background:rgba(238,241,243,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar__title{ font-size:1.12rem; letter-spacing:.02em; }
/* 提高選擇器優先級，避免被後面的 .iconbtn 蓋掉 */
.topbar .topbar__menu{ display:none; }

.fontsize{
  margin-left:auto; display:flex; align-items:center; gap:.3rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:.2rem;
}
.fontsize .iconbtn{ border:0; min-width:2.5rem; font-weight:700; }
.fontsize sup{ font-size:.7em; }
.fontsize__reset{ font-size:.78rem; min-width:3.6rem; color:var(--text-mid); }

/* ── 按鈕 ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:var(--tap); padding:.5rem 1.1rem;
  border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--card); color:var(--text);
  font:inherit; font-weight:600; font-size:.9rem;
  cursor:pointer; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover{ background:var(--line-soft); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn--primary{ background:var(--teal); border-color:var(--teal); color:#fff; }
.btn--primary:hover{ background:var(--teal-dark); border-color:var(--teal-dark); }
.btn--danger{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--danger:hover{ background:#A62F23; }
.btn--ghost{ background:transparent; }
.btn--block{ width:100%; }
/* 按鈕裡的圖示一律限定尺寸，漏掉 class 也不會撐爆版面 */
.btn .ic,
.btn > svg{ width:1.15rem; height:1.15rem; flex:none; }
.btn{ white-space:nowrap; }

.iconbtn{
  display:inline-grid; place-items:center;
  min-width:var(--tap); height:var(--tap); padding:0 .4rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--text-mid); cursor:pointer; font:inherit;
}
.iconbtn:hover{ background:var(--line-soft); color:var(--text); }
.iconbtn svg{ width:1.35rem; height:1.35rem; }

/* 表格內的操作鈕：手機上加大 */
.rowbtn{
  display:inline-grid; place-items:center;
  text-decoration:none;
  width:2.6rem; height:2.6rem;
  border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--card); color:var(--text-mid); cursor:pointer;
}
.rowbtn:hover{ background:var(--teal-tint); border-color:var(--teal); color:var(--teal-dark); }
.rowbtn--danger:hover{ background:var(--red-tint); border-color:var(--red); color:var(--red); }
.rowbtn svg{ width:1.3rem; height:1.3rem; }
.rowbtn .ic{ width:1.3rem; height:1.3rem; }
.rowbtn[disabled]{ opacity:.35; cursor:not-allowed; }

/* ── 卡片 / 表單 ────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  margin-bottom:1.1rem;
  overflow:hidden;
}
.card__head{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--line-soft);
}
.card__head h2{ font-size:1rem; letter-spacing:.02em; }
.card[data-collapse] > .card__head{ cursor:pointer; user-select:none; }
.card[data-collapse] > .card__head:hover{ background:#F6F8F9; }
.card__toggle{
  flex:none; margin-left:.25rem;
  width:var(--tap); height:var(--tap);
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--text-mid); cursor:pointer;
}
.card__toggle:hover{ background:var(--line-soft); color:var(--text); }
.card__caret{ width:1.35rem; height:1.35rem; transition:transform .2s ease; }
.card.is-collapsed .card__caret{ transform:rotate(180deg); }
.card.is-collapsed > .card__head{ border-bottom:0; }
.card__head .spacer{ flex:1 1 auto; }
.card__body{ padding:1.1rem; }
.card__body--flush{ padding:0; }

/* ── 可收合的子區塊（details/summary） ───────────────────── */
.subfold{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card);
  margin-bottom:.9rem;
}
.subfold > summary{
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem .9rem;
  font-size:.92rem; font-weight:700; color:var(--ink);
  background:#F4F7F8;
  border-left:4px solid var(--teal);
  cursor:pointer; user-select:none;
  list-style:none;            /* 收掉瀏覽器預設的三角形 */
  border-radius:var(--r);
}
.subfold > summary::-webkit-details-marker{ display:none; }
.subfold > summary::before{
  content:""; flex:none;
  width:0; height:0;
  border-left:5px solid var(--text-dim);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .18s ease;
}
.subfold[open] > summary::before{ transform:rotate(90deg); }
.subfold > summary:hover{ background:var(--line-soft); color:var(--teal-dark); }
.subfold > summary:hover::before{ border-left-color:var(--teal); }
.subfold[open] > summary{
  border-bottom:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0;
}
.subfold > summary:hover{ background:var(--teal-tint); }
.subfold__body{ padding:.9rem; }
.subfold__body > :last-child{ margin-bottom:0; }

/* ── 資料庫備份區塊 ─────────────────────────────────────── */
.backup__tables{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0; }
.backup__table{
  display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.25rem .6rem;
  background:var(--card); border:1px solid #E2CF9B; border-radius:99px;
  font-size:.78rem; color:var(--amber-deep);
}
.backup__table b{ font-family:var(--mono); font-size:.8rem; color:var(--text); }
.backup__form{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin:0 0 1rem;
  padding:.85rem 1rem;
  background:#FAFBFC; border:1px solid var(--line); border-radius:var(--r);
}
.backup__form .check{ margin-right:auto; }
.backup__note{
  border-left:3px solid var(--amber); background:var(--amber-tint, #FEF6DC);
  padding:.8rem 1rem; border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin:0;
}
.backup__note p{ margin:0 0 .5rem; font-size:.83rem; line-height:1.7; color:var(--amber-deep); }
.backup__note p:last-child{ margin-bottom:0; }
.backup__note code{
  background:rgba(0,0,0,.06); padding:0 .25rem; border-radius:3px;
  font-family:var(--mono); font-size:.9em;
}

@media (max-width: 640px){
  .backup__form{ flex-direction:column; align-items:stretch; }
  .backup__form .check{ margin-right:0; }
  .backup__form .btn{ width:100%; }
}

/* ── 設定頁：一列一項 ───────────────────────────────────── */
.settings{ list-style:none; margin:0; padding:0; }
.setting{
  display:grid;
  grid-template-columns:minmax(0,1fr) 15rem;
  align-items:center; gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--line-soft);
}
.setting:last-child{ border-bottom:0; }
.setting:hover{ background:#FAFBFC; }
.setting__info{ min-width:0; }
.setting__label{ display:block; font-weight:700; font-size:.95rem; }
.setting__note{ margin:.2rem 0 0; font-size:.8rem; color:var(--text-dim); line-height:1.5; }
.setting__control{ min-width:0; }
.setting__control--int{ width:15rem; }

.settings__foot{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.9rem 1.1rem;
  border-top:1px solid var(--line);
  background:#FAFBFC;
}
.settings__hint{ font-size:.8rem; color:var(--text-dim); margin-right:auto; }

@media (max-width: 700px){
  .setting{ grid-template-columns:1fr; gap:.5rem; align-items:stretch; }
  .setting__control--int{ width:100%; }
  .settings__foot .btn{ width:100%; }
  .settings__hint{ margin-right:0; }
}

.eyebrow{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim); font-weight:700;
}

.stack{ display:flex; flex-direction:column; gap:.7rem; }

.grid{
  display:grid; gap:.85rem;
  grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));
}
.grid--tight{ grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); }

.field{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.field__label{ font-size:.8rem; font-weight:700; color:var(--text-mid); }
.field__note{ font-size:.75rem; color:var(--text-dim); }
.field--wide{ grid-column:1 / -1; }

/* ── 首頁查詢條件：兩列固定版面 ─────────────────────────
   用 24 欄而不是 12 欄，才有足夠的顆粒度依各欄位的實際內容分配寬度：
   現況要放得下「電纜發包施工不良待改善中」、日期要放得下兩個民國日期，
   局別與查詢鈕則不需要太寬。 */
.searchgrid{
  display:grid; gap:.85rem;
  grid-template-columns:repeat(24, minmax(0,1fr));
  align-items:end;
}
.searchgrid > .field{ min-width:0; }

/* 第一列 */
.sg-addr  { grid-column:span 8; }   /* 最常用，給最寬 */
.sg-status{ grid-column:span 6; }   /* 選項文字最長 */
.sg-dept  { grid-column:span 3; }   /* 只放 EC/EB/JU/WG */
.sg-cb    { grid-column:span 3; }   /* 最多 6 位數字 */
.sg-track { grid-column:span 4; }   /* 「只看一般案件」加下拉箭頭 */

/* 第二列 */
.sg-top   { grid-column:span 5; }
.sg-post  { grid-column:span 8; }   /* 兩個日期框加「至」 */
.sg-end   { grid-column:span 8; }
.sg-go    { grid-column:span 3; }
.sg-go .btn{ width:100%; }
.sg-top .check--box{ white-space:nowrap; }

@media (max-width: 1400px){
  .sg-addr{ grid-column:span 9; }
  .sg-status{ grid-column:span 6; }
  .sg-dept{ grid-column:span 3; }
  .sg-cb{ grid-column:span 5; }
  .sg-track{ grid-column:span 6; }
  .sg-top{ grid-column:span 6; }
  .sg-post,.sg-end{ grid-column:span 8; }
  .sg-go{ grid-column:span 5; }
}

@media (max-width: 1100px){
  .sg-addr{ grid-column:span 12; }
  .sg-status{ grid-column:span 12; }
  .sg-dept{ grid-column:span 5; }
  .sg-cb{ grid-column:span 6; }
  .sg-track{ grid-column:span 7; }
  .sg-top{ grid-column:span 6; }
  .sg-post,.sg-end{ grid-column:span 12; }
  .sg-go{ grid-column:span 24; }
}

@media (max-width: 760px){
  .sg-addr,.sg-status,.sg-post,.sg-end,.sg-top,.sg-go{ grid-column:span 24; }
  .sg-dept,.sg-cb,.sg-track{ grid-column:span 12; }
}

@media (max-width: 560px){
  .searchgrid > .field{ grid-column:span 24 !important; }
}

/* ── 相片來源選擇（手機）─────────────────────────────────
   由底部滑出，層級要高於對話框（z-index 200）與燈箱，
   否則從工作明細裡按上傳時會被蓋住。 */
.picksheet{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(16,35,46,.5);
  padding:1rem;
  animation:pickFade .15s ease;
}
.picksheet__box{
  width:min(26rem,100%);
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:1rem;
  display:flex; flex-direction:column; gap:.6rem;
  animation:pickUp .2s cubic-bezier(.2,.8,.3,1);
}
.picksheet__title{
  margin:0 0 .2rem; text-align:center;
  font-size:.9rem; font-weight:700; color:var(--text-mid);
}
.picksheet__box .btn{
  width:100%; min-height:3.2rem;
  justify-content:center; gap:.5rem;
  font-size:1rem;
}
.picksheet__hint{
  font-size:.75rem; font-weight:400; color:var(--text-dim);
  margin-left:.4rem;
}
@keyframes pickFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes pickUp{ from{ transform:translateY(1.5rem) } to{ transform:none } }

/* ── 回到頁首／前往頁尾 ─────────────────────────────────── */
.scrollnav{
  position:fixed; z-index:150;
  right:1.1rem; bottom:1.1rem;
  display:none; flex-direction:column; gap:.5rem;
}
.scrollnav.is-on{ display:flex; }

.scrollnav__btn{
  display:grid; place-items:center;
  width:2.9rem; height:2.9rem;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--card); color:var(--text-mid);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.scrollnav__btn:hover{
  background:var(--teal); border-color:var(--teal); color:#fff;
  transform:translateY(-1px);
}
.scrollnav__btn:active{ transform:none; }
.scrollnav__btn svg{ width:1.35rem; height:1.35rem; }
.scrollnav__btn[hidden]{ display:none; }

/* 地圖全螢幕或滿版時讓開，免得蓋住地圖的操作 */
body.has-mapfull .scrollnav{ display:none !important; }

@media (max-width: 640px){
  .scrollnav{ right:.75rem; bottom:.75rem; gap:.45rem; }
  .scrollnav__btn{ width:3.1rem; height:3.1rem; }   /* 手指好按 */
}

/* 列印時不需要 */
@media print{ .scrollnav{ display:none !important; } }

/* ── 交接箱地圖 ─────────────────────────────────────────── */
.boxmap{
  height:26rem; min-height:18rem;
  border:1px solid var(--line); border-radius:var(--r);
  background:#E8EDF0;
  z-index:0;                     /* 壓在對話框與提示訊息之下 */
}
@media (max-width: 640px){
  .boxmap{ height:20rem; }
}

/* 地圖全螢幕：整張卡片撐滿視窗 */
.card.is-mapfull{
  position:fixed; inset:0; z-index:180;
  margin:0; border-radius:0;
  display:flex; flex-direction:column;
  box-shadow:none;
}
.card.is-mapfull .card__body{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.card.is-mapfull .boxmap{
  flex:1 1 auto; height:auto; min-height:14rem;
  border-radius:0;
}
/* 全螢幕時鎖住背景捲動，避免地圖後面的頁面跟著動 */
body.has-mapfull{ overflow:hidden; }

#btnMapFull svg, #btnMhMapFull svg,
#btnMapOnly svg, #btnMhMapOnly svg{ width:1.25rem; height:1.25rem; }
.card.is-mapfull #btnMapFull, .card.is-mapfull #btnMhMapFull,
#btnMapOnly.is-on, #btnMhMapOnly.is-on{ background:var(--teal-tint); border-color:var(--teal); color:var(--teal-dark); }

/* 地圖安全鎖：鎖定時低調、解鎖後用警示色提醒現在可以改資料 */
.btn--lock{
  gap:.4rem;
  border-color:var(--line); color:var(--text-mid);
}
.btn--lock:hover{ border-color:var(--text-dim); color:var(--text); }
.btn--lock.is-open{
  background:var(--amber-tint, #FEF6DC);
  border-color:var(--amber);
  color:var(--amber-deep);
  animation:lockPulse 2s ease-in-out infinite;
}
@keyframes lockPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(242,183,5,.5); }
  50%    { box-shadow:0 0 0 5px rgba(242,183,5,0); }
}

/* 地圖單獨滿版：只有地圖本身佔滿視窗 */
/* 定位與尺寸由 JS 以行內樣式指定（避免被其他規則蓋掉），
   這裡只負責外觀 */
.boxmap.is-full{ box-shadow:none; }
/* 地圖被搬到 body 之後，原位由這塊佔位撐住，版面不會抽動 */
.boxmap-hold{
  border:1px dashed var(--line); border-radius:var(--r);
  background:repeating-linear-gradient(45deg,#F4F7F8 0 10px,#EDF1F3 10px 20px);
}

/* 滿版時的回復鈕，浮在地圖右上角 */
.mapexit{
  position:absolute; z-index:1300;   /* 高於地圖本身與 Leaflet 的控制項 */
  top:.75rem; right:.75rem;
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:2.6rem; padding:0 .9rem;
  border-radius:99px; border:1px solid var(--line);
  background:var(--card); color:var(--text);
  font:inherit; font-size:.85rem; font-weight:700;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.mapexit:hover{ background:var(--teal-tint); border-color:var(--teal); color:var(--teal-dark); }
.mapexit svg{ width:1.05rem; height:1.05rem; }

@media (max-width: 560px){
  .mapexit{ top:.6rem; right:.6rem; min-height:3rem; }
}

/* 手機上尚未啟用拖曳時的提示 */
.boxmap.is-locked::after{
  content:"點一下地圖即可拖曳　·　雙指可縮放";
  position:absolute; z-index:500;
  left:50%; bottom:.8rem; transform:translateX(-50%);
  padding:.35rem .8rem;
  border-radius:99px;
  background:rgba(22,35,46,.82); color:#fff;
  font-size:.78rem; white-space:nowrap;
  pointer-events:none;
}
.boxmap{ position:relative; }

/* 標定模式下游標變成十字，提示可以點選位置 */
body.is-placing .boxmap{ cursor:crosshair; }
body.is-placing .leaflet-container{ cursor:crosshair; }

.maplegend{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem;
  margin-top:.6rem; font-size:.8rem; color:var(--text-mid);
}
.maplegend__item{ display:inline-flex; align-items:center; gap:.35rem; }
.maplegend .dot{
  width:.8rem; height:.8rem;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--line);
  /* 做成水滴形，與地圖上的圖釘一致 */
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
}
.maplegend .dot.is-done{ background:var(--green); }
.maplegend .dot.is-bad { background:var(--red); }
.maplegend .dot.is-warn{ background:var(--orange); }
.maplegend .dot.is-idle{ background:#8A9BA8; }
.maplegend__hint{ margin-left:auto; color:var(--text-dim); }

/* 地圖標記：用 divIcon 才能拖曳。外觀寫在 SVG 裡，這裡只處理互動 */
.boxpin{ filter:drop-shadow(0 2px 3px rgba(16,35,46,.35)); }
.boxpin svg{ display:block; }
.boxpin:hover{ filter:drop-shadow(0 3px 6px rgba(16,35,46,.5)); }

/* 尚未檢查：壓低視覺重量，滑鼠移上去才恢復，需要時仍然點得到 */
.boxpin.is-dim{
  filter:drop-shadow(0 1px 2px rgba(16,35,46,.28));
  opacity:.95;
  z-index:100 !important;      /* 已檢查的疊在上面，但自己仍清楚可見 */
}
.boxpin.is-dim:hover{ opacity:1; filter:drop-shadow(0 2px 4px rgba(16,35,46,.45)); }

/* 觸控裝置（多半在戶外使用）不再降低不透明度，陰影也加重一點 */
@media (pointer: coarse){
  .boxpin.is-dim{
    /* SVG 本身已經是 90%，這層必須是 1，
       兩層相乘才不會把實際值壓到 81% */
    opacity:1;
    filter:drop-shadow(0 1px 3px rgba(16,35,46,.42));
  }
  .boxlabel.is-dim{
    background:rgba(255,255,255,.95);
    border-color:rgba(16,35,46,.28);
    color:var(--text);
  }
}

/* 標記旁常駐的箱號標籤 */
.boxlabel.leaflet-tooltip{
  padding:.1rem .35rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(16,35,46,.25);
  border-radius:4px;
  box-shadow:0 1px 2px rgba(16,35,46,.2);
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}
.boxlabel.leaflet-tooltip::before{ display:none; }   /* 不要小三角 */

/* 尚未檢查的標籤同樣淡化，不與已檢查的爭視線 */
.boxlabel.is-dim{
  background:rgba(255,255,255,.88);
  border-color:rgba(16,35,46,.2);
  color:var(--text-mid);
  font-weight:400;
}
/* 從列表定位過來時的高亮：放大並持續發出光環，
   在密集的標記裡也找得到 */
/* 從列表定位過來時的高亮：放大並持續閃動，在密集的標記裡也找得到 */
.boxpin.is-flash{ z-index:1000 !important; }
.boxpin.is-flash svg{
  transform:scale(1.35);
  transform-origin:50% 95%;      /* 以尖端為中心放大，位置才不會跑掉 */
  animation:pinFlash 1s ease-in-out infinite;
}
@keyframes pinFlash{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(242,183,5,0)); }
  50%    { filter:drop-shadow(0 0 10px rgba(242,183,5,1))
                   drop-shadow(0 0 18px rgba(242,183,5,.8)); }
}
.boxpin svg{ transition:transform .2s ease; }

.leaflet-marker-draggable{ cursor:grab; }
.leaflet-marker-draggable:active{ cursor:grabbing; }
/* 拖曳中把游標鎖成抓取狀態，避免經過其他元素時跳動 */
body.is-dragpin, body.is-dragpin *{ cursor:grabbing !important; }

/* 我的位置：藍點加脈動光環，與交接箱的水滴圖釘明顯區隔 */
.mepin i{
  display:block; width:14px; height:14px; margin:3px;
  border-radius:50%;
  background:#1F6FB4;
  border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(16,35,46,.5);
  animation:mePulse 1.8s ease-out infinite;
}
@keyframes mePulse{
  0%   { box-shadow:0 1px 4px rgba(16,35,46,.5), 0 0 0 0 rgba(31,111,180,.5); }
  70%  { box-shadow:0 1px 4px rgba(16,35,46,.5), 0 0 0 14px rgba(31,111,180,0); }
  100% { box-shadow:0 1px 4px rgba(16,35,46,.5), 0 0 0 0 rgba(31,111,180,0); }
}
#btnMapMe .ic, #btnMhMapMe .ic{ width:1.15rem; height:1.15rem; }

/* 地圖標記的資訊泡泡 */
.mappop{ display:flex; flex-direction:column; gap:.3rem; min-width:11rem; }
.mappop b{ font-size:.95rem; color:var(--ink); }
.mappop__addr{ font-size:.82rem; color:var(--text-mid); }
.mappop__ph{ font-size:.78rem; color:var(--text-dim); }
.mappop .btn--mini{ width:100%; justify-content:center; }
/* 拖曳後的確認：確定用主色，取消維持素面 */
.mappop [data-map="movesave"]{
  background:var(--teal); border-color:var(--teal); color:#fff;
}
.mappop [data-map="movesave"]:hover{ background:var(--teal-dark); border-color:var(--teal-dark); }
.mappop [data-map="clear"]:hover{
  background:var(--red-tint); border-color:var(--red); color:var(--red);
}
.leaflet-popup-content{ margin:.7rem .8rem; }

/* 尚未定位的清單 */
.geo__lead{ margin:0 0 .7rem; font-size:.88rem; color:var(--text-mid); }
.geo__acts{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin-bottom:.8rem;
}
.geo__hint{ font-size:.8rem; color:var(--text-dim); }
.geo__list{ max-height:18rem; overflow-y:auto; border-top:1px solid var(--line-soft); }
.geo__row{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.5rem .2rem; border-bottom:1px solid var(--line-soft);
  font-size:.85rem;
}
.geo__row b{ font-family:var(--mono); color:var(--ink); min-width:5.5rem; }
.geo__row span{ color:var(--text-mid); flex:1 1 12rem; }
.geo__row .btn--mini{ flex:none; }

/* 位置欄位：地址與 Google 地圖按鈕並排 */
.addrcell{
  /* 按鈕有 2rem 高，文字若靠上對齊會比同一列其他欄位高出一截。
     改成垂直置中，整列的文字才會落在同一條基準線上。 */
  display:flex; align-items:center; gap:.35rem;
  min-width:0;
}
.addrcell > span{
  flex:1 1 auto; min-width:0;
  margin-left:.15rem;
  line-height:1.5;
}
.rowbtn--map{ flex:none; }
.rowbtn--map:not(:disabled):hover{
  background:var(--teal-tint); border-color:var(--teal); color:var(--teal-dark);
}

/* 管口密封狀態：徽章與就地切換的下拉 */
.badge.is-bad { background:var(--red-tint); color:var(--red); }
.badge.is-warn{ background:var(--orange-tint); color:var(--orange); }
/* 合格的交接箱不需要改善，用最低調的樣式，不與待辦項目爭視線 */
.badge.is-none{
  background:transparent; color:var(--text-dim);
  border:1px dashed var(--line);
}

.sealpick{
  min-height:2.3rem; padding:.15rem 1.6rem .15rem .55rem;
  font-size:.82rem; font-weight:700;
  border-radius:99px; border:1px solid var(--line);
  background-position:right .4rem center;
}
.sealpick.is-done{ background-color:var(--green-tint); border-color:var(--green); color:var(--green); }
.sealpick.is-bad { background-color:var(--red-tint);   border-color:var(--red);   color:var(--red); }
.sealpick.is-warn{ background-color:var(--orange-tint);border-color:var(--orange);color:var(--orange); }
.sealpick.is-idle{ background-color:#ECEFF1; color:var(--text-mid); }
.sealpick:disabled{ opacity:.6; }

/* 交接箱巡檢的查詢條件 */
.bx-dept { grid-column:span 3; }
.bx-no   { grid-column:span 3; }
.bx-addr { grid-column:span 7; }
.bx-seal    { grid-column:span 5; }
.bx-date    { grid-column:span 6; }
.bx-fixdate { grid-column:span 6; }
.bx-none    { grid-column:span 4; }
.bx-nofix   { grid-column:span 4; }
.bx-go      { grid-column:span 4; }
.bx-date .rocinput,
.bx-fixdate .rocinput{ min-width:6.5rem; }
.bx-go .btn{ width:100%; }
.bx-none .check--box{ white-space:nowrap; }

/* 尚未巡檢的列用淡色底標出來 */
tr.is-nocheck td{ background:#FFFBF4; }
tr.is-nocheck:hover td{ background:#FFF6E8; }

@media (max-width: 1100px){
  .bx-dept{ grid-column:span 5; }
  .bx-no{ grid-column:span 7; }
  .bx-addr{ grid-column:span 12; }
  .bx-seal{ grid-column:span 7; }
  .bx-date,.bx-fixdate{ grid-column:span 12; }
  .bx-none,.bx-nofix{ grid-column:span 6; }
  .bx-go{ grid-column:span 12; }
}
@media (max-width: 760px){
  .bx-dept,.bx-no{ grid-column:span 12; }
  .bx-seal,.bx-none,.bx-nofix{ grid-column:span 12; }
  .bx-addr,.bx-date,.bx-fixdate,.bx-go{ grid-column:span 24; }
}

/* 人孔資訊的查詢條件 */
.mh-no   { grid-column:span 5; }
.mh-addr { grid-column:span 15; }
.mh-go   { grid-column:span 4; }
.mh-go .btn{ width:100%; }

@media (max-width: 1100px){
  .mh-no{ grid-column:span 8; }
  .mh-addr{ grid-column:span 16; }
  .mh-go{ grid-column:span 24; }
}
@media (max-width: 760px){
  .mh-no,.mh-addr,.mh-go{ grid-column:span 24; }
}

/* 輸入框右側附一顆小按鈕（例如施工地點旁的路名挑選） */
.fieldrow{ display:flex; align-items:flex-start; gap:.4rem; min-width:0; }
.fieldrow > .inputwrap,
.fieldrow > input{ flex:1 1 auto; min-width:0; }
.roadbtn{ flex:none; }
.roadbtn svg{ width:1.3rem; height:1.3rem; }

/* 路名挑選面板 */
.roadmenu{
  position:fixed; z-index:320;
  width:16rem; max-width:calc(100vw - 1rem);
  background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.roadmenu__head{ padding:.5rem; border-bottom:1px solid var(--line-soft); }
.roadmenu__q{ width:100%; min-height:2.4rem; font-size:.88rem; }
.roadmenu__list{ max-height:17rem; overflow-y:auto; }
.roadmenu__list button{
  display:block; width:100%; text-align:left;
  padding:.55rem .75rem; min-height:2.6rem;
  background:none; border:0; border-bottom:1px solid var(--line-soft);
  font:inherit; font-size:.9rem; color:var(--text); cursor:pointer;
}
.roadmenu__list button:hover{ background:var(--teal-tint); color:var(--teal-dark); }
.roadmenu__list button:last-child{ border-bottom:0; }
.roadmenu__none{ margin:0; padding:1.2rem .75rem; text-align:center;
                 font-size:.85rem; color:var(--text-dim); }

/* 人孔資訊：主要幹道資訊彈出方塊，樣式比照 .roadmenu 但內容更單純 */
.rp-pop{
  position:fixed; z-index:320;
  min-width:9rem; max-width:calc(100vw - 1rem);
  background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  padding:.6rem .8rem;
}
.rp-pop__head{
  font-size:.72rem; letter-spacing:.08em; color:var(--text-dim);
  margin-bottom:.3rem;
}
.rp-pop__body{ font-size:.9rem; line-height:1.5; }
.text-dim{ color:var(--text-dim); }

@media (max-width: 560px){
  /* 手機上放寬並加高項目，手指比較好點 */
  .roadmenu{ width:calc(100vw - 1.5rem); }
  .roadmenu__list{ max-height:50vh; }
  .roadmenu__list button{ min-height:3rem; font-size:.95rem; }
  .roadmenu__q{ min-height:2.8rem; font-size:1rem; }
}

input[type=text],input[type=password],input[type=date],input[type=number],
input[type=search],select,textarea{
  width:100%; min-height:var(--tap);
  padding:.5rem .7rem;
  font:inherit; font-size:.92rem; color:var(--text);
  background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{ min-height:6rem; resize:vertical; line-height:1.6; }
input:focus,select:focus,textarea:focus{
  border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint); outline:none;
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E626F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; background-size:1.15rem;
  padding-right:2.2rem;
}
/* ── 輸入欄位工具鈕 ─────────────────────────────────────── */
.inputwrap{
  --tools:0;
  position:relative;
  display:flex; align-items:stretch; gap:.35rem;
  width:100%; min-width:0;
}
.inputwrap > input,
.inputwrap > textarea{
  flex:1 1 auto; min-width:0;
  padding-right:calc(.7rem + var(--tools) * 2.35rem);
}
.inputtools{
  position:absolute; top:0; right:.3rem;
  height:var(--tap);
  display:flex; align-items:center; gap:.15rem;
}
.inputwrap--area .inputtools{ top:.3rem; right:.3rem; height:auto; }

.inputbtn{
  display:grid; place-items:center;
  width:2.1rem; height:2.1rem; padding:0;
  background:transparent; border:0; border-radius:6px;
  color:var(--text-dim); cursor:pointer;
}
.inputbtn:hover{ background:var(--line-soft); color:var(--text); }
.inputbtn svg{ width:1.15rem; height:1.15rem; }

/* 清除鈕：平常隱形（但保留位置，文字不會跳動），
   滑鼠移入欄位或欄位取得焦點時才浮現 */
.inputbtn--clear{
  opacity:0; pointer-events:none;
  transition:opacity .12s ease;
}
.inputwrap:hover .inputbtn--clear,
.inputwrap:focus-within .inputbtn--clear,
.inputbtn--clear:focus-visible{
  opacity:1; pointer-events:auto;
}
/* 沒有滑鼠的裝置（手機、平板）只靠焦點判斷，避免點一下就殘留顯示 */
@media (hover: none){
  .inputwrap:hover .inputbtn--clear{ opacity:0; pointer-events:none; }
  .inputwrap:focus-within .inputbtn--clear{ opacity:1; pointer-events:auto; }
}

/* 密碼顯示切換要隨時看得到，才知道可以切 */
.inputbtn--eye{ opacity:1; pointer-events:auto; }

/* 加減鈕：手指好按，兩側各一 */
.inputbtn--step{
  flex:none;
  width:var(--tap); height:auto; min-height:var(--tap);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); color:var(--text-mid);
}
.inputbtn--step:hover{ background:var(--teal-tint); border-color:var(--teal); color:var(--teal-dark); }
.inputbtn--step svg{ width:1.3rem; height:1.3rem; }
.inputwrap--int > input{ text-align:center; font-family:var(--mono); font-variant-numeric:tabular-nums; }
/* 整數欄位右側是加號鈕，清除鈕往左讓開 */
.inputwrap--int .inputtools{ right:calc(var(--tap) + .65rem); }

/* 日期欄位：文字輸入，右側清除與日曆鈕 */
.rocinput{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* ── 民國日曆 ───────────────────────────────────────────── */
.datepick{
  position:fixed; z-index:310;
  width:19rem; max-width:calc(100vw - 1rem);
  padding:.6rem;
  background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg);
}
.datepick__head{ display:flex; align-items:center; gap:.35rem; margin-bottom:.5rem; }
.datepick__nav{
  flex:none; width:2.4rem; height:2.4rem;
  display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--text-mid); cursor:pointer;
}
.datepick__nav:hover{ background:var(--teal-tint); border-color:var(--teal); color:var(--teal-dark); }
.datepick__nav svg{ width:1.25rem; height:1.25rem; }
.datepick__head select{ min-height:2.4rem; padding:.2rem .4rem; font-size:.85rem; }
.datepick__y{ flex:1 1 auto; }
.datepick__m{ flex:0 0 5.5rem; }

.datepick__week{
  display:grid; grid-template-columns:repeat(7,1fr);
  text-align:center; font-size:.72rem; font-weight:700; color:var(--text-dim);
  padding-bottom:.25rem; border-bottom:1px solid var(--line-soft);
}
.datepick__grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  padding-top:.35rem;
}
.datepick__pad{ display:block; }
.datepick__day{
  aspect-ratio:1 / 1; min-height:2.4rem;
  display:grid; place-items:center;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  font:inherit; font-size:.88rem; font-variant-numeric:tabular-nums;
  color:var(--text); cursor:pointer;
}
.datepick__day:hover{ background:var(--teal-tint); }
.datepick__day.is-weekend{ color:#A8563F; }
.datepick__day.is-today{ border-color:var(--teal); font-weight:700; }
.datepick__day.is-picked{ background:var(--teal); border-color:var(--teal); color:#fff; font-weight:700; }

.datepick__foot{
  display:flex; gap:.35rem; margin-top:.5rem; padding-top:.5rem;
  border-top:1px solid var(--line-soft);
}
.datepick__act{
  flex:1 1 0; min-height:2.5rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:.82rem; font-weight:600; color:var(--text-mid); cursor:pointer;
}
.datepick__act:hover{ background:var(--line-soft); color:var(--text); }
.datepick__act--ok{ background:var(--teal); border-color:var(--teal); color:#fff; }
.datepick__act--ok:hover{ background:var(--teal-dark); color:#fff; }

/* 深色的個人資訊面板裡要換個顏色才看得見 */
.profile__panel .inputbtn{ color:#8FA3B2; }
.profile__panel .inputbtn:hover{ background:#1B2A35; color:#fff; }

.check{
  display:flex; align-items:center; gap:.6rem;
  min-height:var(--tap); font-size:.9rem; cursor:pointer;
}
.check input{ width:1.35rem; height:1.35rem; accent-color:var(--teal); }
/* 表單裡與其他欄位對齊的勾選框 */
.check--box{
  min-height:var(--tap);
  padding:.5rem .7rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card);
}
.check--box input{ accent-color:var(--orange); }

.range{ display:flex; align-items:center; gap:.35rem; min-width:0; }
.range span{ color:var(--text-dim); flex:none; font-size:.85rem; }
/* 日期輸入框有瀏覽器內建的最小寬度，不設 min-width:0 就會撐爆欄位 */
.range > input,
.range > .inputwrap{ flex:1 1 0; min-width:0; width:auto; }
/* 民國日期固定 9 個字元，給等寬字留出不會被截斷的最小寬度 */
.sg-post .rocinput,
.sg-end  .rocinput{ min-width:6.5rem; }
/* 日期欄位不必和一般欄位一樣寬，字數固定就夠 */
.sg-post .rocinput,
.sg-end  .rocinput{ padding-left:.5rem; }

/* 日期區間需要兩倍寬度，在多欄版面下佔兩格 */
.field--range{ grid-column:span 2; }

.actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.actions--end{ justify-content:flex-end; }

/* 施工地點建議清單 */
.suggest{ position:relative; }
.suggest__list{
  position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0;
  max-height:16rem; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);
}
.suggest__list button{
  display:block; width:100%; text-align:left;
  padding:.6rem .75rem; min-height:2.6rem;
  background:none; border:0; border-bottom:1px solid var(--line-soft);
  font:inherit; font-size:.88rem; cursor:pointer; color:var(--text);
}
.suggest__list button:hover,.suggest__list button.is-on{ background:var(--teal-tint); }

/* ── 表格 ───────────────────────────────────────────────── */
.tablewrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  scrollbar-width:thin;
}
.tablewrap.is-dragging{ cursor:grabbing; user-select:none; }
.tablewrap::-webkit-scrollbar{ height:.7rem; }
.tablewrap::-webkit-scrollbar-thumb{ background:#C3CED6; border-radius:99px; }

table.data{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:.88rem; min-width:60rem;
}
table.data th,table.data td{
  padding:.7rem .8rem;
  border-bottom:1px solid var(--line-soft);
  text-align:left; vertical-align:middle;
  white-space:nowrap;
}
table.data thead th{
  position:sticky; top:0; z-index:2;
  background:#F6F8F9;
  font-size:.76rem; letter-spacing:.1em; color:var(--text-mid);
  border-bottom:1px solid var(--line);
}

/* 可排序的標題列 */
table.data thead th[data-sort]{
  cursor:pointer; user-select:none;
  padding-right:1.5rem; position:sticky;
}
table.data thead th[data-sort]:hover{ background:#E9EFF0; color:var(--teal-dark); }
/* 未排序時滑鼠移入才浮現的淡箭頭，提示這一欄可以點 */
table.data thead th[data-sort]::after{
  content:""; position:absolute; right:.55rem; top:50%;
  width:0; height:0; margin-top:-2px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--text-dim);
  opacity:0; transition:opacity .15s ease;
}
table.data thead th[data-sort]:hover::after{ opacity:.45; }
table.data thead th.is-sorted{ color:var(--teal-dark); background:var(--teal-tint); }
table.data thead th.is-sorted::after{ opacity:1; border-top-color:var(--teal); }
table.data thead th.is-asc::after{
  border-top:0; border-bottom:5px solid var(--teal); margin-top:-3px;
}
table.data tbody tr:hover{ background:#F7FAFA; }

/* 可點進明細的欄位 */
table.data td.openable{ cursor:pointer; }
table.data tbody tr:hover td.openable{ background:#EDF6F5; }
table.data tbody tr:hover td.openable b{ color:var(--teal-dark); }
.tablewrap.is-dragging td.openable{ cursor:grabbing; }
table.data td.wrap{ white-space:normal; min-width:14rem; }
table.data td.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--text-mid); }
table.data td.ops{ white-space:nowrap; }
table.data .ops-inner{ display:flex; gap:.35rem; }
table.data th.t-center,
table.data td.t-center{ text-align:center; }

.empty{
  padding:3.5rem 1.5rem; text-align:center; color:var(--text-dim);
}
.empty b{ display:block; color:var(--text); font-size:1rem; margin-bottom:.35rem; }

.loading{ padding:2.5rem; text-align:center; color:var(--text-dim); font-size:.9rem; }

/* 現況徽章 */
.badge{
  display:inline-block; padding:.2rem .6rem; border-radius:99px;
  font-size:.76rem; font-weight:700; white-space:nowrap;
}
.badge.is-idle{ background:var(--gray-tint); color:var(--text-mid); }
.badge.is-doing{ background:var(--orange-tint); color:var(--orange); }
.badge.is-alert{ background:var(--red-tint); color:var(--red); }
.badge.is-done{ background:var(--green-tint); color:var(--green); }
.badge.is-role{ background:var(--teal-tint); color:var(--teal-dark); }

/* 線路標籤（簽名元素） */
.cable{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.01em;
  padding:.15rem .5rem .15rem .45rem;
  border-radius:5px; background:#F4F7F8;
  border-left:3px solid var(--text-dim);
  color:var(--text);
}
.cable__tag{ font-family:var(--sans); font-size:.7rem; font-weight:700; color:var(--text-dim); }
.cable--main{ border-left-color:#1F6FB4; background:#EDF4FA; }
.cable--main .cable__tag{ color:#1F6FB4; }
.cable--sub{ border-left-color:#8A5CC4; background:#F3EEFB; }
.cable--sub .cable__tag{ color:#8A5CC4; }
.cable--fiber{ border-left-color:#0E7C7B; background:var(--teal-tint); }
.cable--fiber .cable__tag{ color:var(--teal-dark); }
.cable--ftth{ border-left-color:#B4610E; background:var(--orange-tint); }
.cable--ftth .cable__tag{ color:var(--orange); }
.cable.is-empty{ background:transparent; border-left-color:var(--line); color:var(--text-dim); }
.cablelist{ display:flex; flex-wrap:wrap; gap:.35rem; }

/* 列表裡附在線路下方的「其他處理事項」 */
.cope-note{
  margin-top:.5rem;
  max-width:26rem;
  white-space:normal;
  font-size:.82rem; line-height:1.5; color:var(--text-mid);
}
.viewsec .cope-note{ max-width:none; font-size:.9rem; color:var(--text); }
.cope-note__tag{
  display:inline-block; margin-right:.4rem;
  font-size:.7rem; font-weight:700; color:var(--text-dim);
  border:1px solid var(--line); border-radius:4px;
  padding:0 .3rem;
}

/* ── 分頁 ───────────────────────────────────────────────── */
.pager{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  padding:.85rem 1.1rem;
  border-top:1px solid var(--line-soft);
  background:#FAFBFC;
}
.pager__info{ font-size:.82rem; color:var(--text-mid); margin-right:auto; }
.pager__jump{ display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--text-mid); }
.pager__jump select{ min-width:5.5rem; width:auto; }
.pager .iconbtn{ min-width:2.6rem; }
.pager .iconbtn[disabled]{ opacity:.35; cursor:not-allowed; }

/* ── 提示訊息（tooltip） ────────────────────────────────── */
.tip{
  position:fixed; z-index:300;
  max-width:18rem;
  padding:.4rem .65rem;
  background:var(--amber);          /* 與主功能表底色明顯區隔 */
  color:var(--amber-deep);
  border:1px solid #D9A400;
  border-radius:6px;
  font-size:.8rem; font-weight:600; line-height:1.45;
  box-shadow:0 6px 18px rgba(20,35,46,.24);
  pointer-events:none;
  white-space:normal;
}
.tip::after{
  content:""; position:absolute; width:8px; height:8px;
  background:var(--amber); border:1px solid #D9A400;
  border-top:0; border-left:0;
  transform:rotate(45deg);
}
.tip[data-pos="top"]::after{ bottom:-5px; left:calc(50% - 4px); }
.tip[data-pos="bottom"]::after{ top:-5px; left:calc(50% - 4px); transform:rotate(225deg); }

/* ── 浮動訊息 ───────────────────────────────────────────── */
.toast-wrap{
  position:fixed; z-index:320; left:50%; bottom:1.25rem;
  transform:translateX(-50%);
  display:flex; flex-direction:column; gap:.5rem; align-items:center;
  width:min(30rem, calc(100vw - 2rem));
}
.toast{
  width:100%;
  padding:.75rem 1rem;
  border-radius:var(--r);
  background:var(--ink); color:#fff;
  font-size:.88rem; font-weight:600;
  box-shadow:var(--shadow-lg);
  animation:toastIn .18s ease;
}
.toast.is-ok{ background:var(--green); }
.toast.is-err{ background:var(--red); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px); } }

/* ── 對話框 ─────────────────────────────────────────────── */
/* 注意：.modal 有自己的 display，必須明確處理 hidden，
   否則瀏覽器內建的 [hidden]{display:none} 會被蓋掉。 */
.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1rem; }
.modal[hidden]{ display:none; }
.modal__scrim{ position:absolute; inset:0; background:rgba(12,20,27,.55); }
.modal__box{
  position:relative;
  width:min(58rem, 100%);
  max-height:calc(100dvh - 2rem);
  display:flex; flex-direction:column;
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  animation:modalIn .16s ease;
  overflow:hidden;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(10px); } }
.modal__head{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.9rem 1.1rem; border-bottom:1px solid var(--line-soft);
}
.modal__head h2{ font-size:1.02rem; min-width:0; line-height:1.45; word-break:break-word; }
.modal__head .iconbtn{ margin-left:auto; flex:none; align-self:flex-start; }
.modal__body{ padding:1.1rem; overflow-y:auto; }
.modal__foot{
  padding:.85rem 1.1rem; border-top:1px solid var(--line-soft); background:#FAFBFC;
}
.modal__footinner{
  display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap;
}
/* 收合把手：只在手機出現，桌機空間夠不需要 */
.modal__foothandle{ display:none; }

@media (max-width: 560px){
  .modal__foot{ padding:.35rem .9rem .8rem; }
  .modal__footinner{ flex-direction:column-reverse; }
  .modal__footinner .btn{ width:100%; }

  .modal__foothandle{
    display:flex; align-items:center; justify-content:center; gap:.4rem;
    width:100%; min-height:2.4rem; margin-bottom:.35rem;
    background:transparent; border:0; border-radius:var(--r-sm);
    font:inherit; font-size:.8rem; font-weight:600; color:var(--text-mid);
    cursor:pointer;
  }
  .modal__foothandle:hover{ background:var(--line-soft); }
  .modal__foothandle svg{ width:1.1rem; height:1.1rem; transition:transform .2s ease; }

  /* 收合後只留把手，按鈕列讓出來給內容 */
  .modal.is-footfold .modal__footinner{ display:none; }
  .modal.is-footfold .modal__foothandle svg{ transform:rotate(180deg); }
  .modal.is-footfold .modal__foot{ padding:.15rem .9rem .3rem; }
}
.modal--wide .modal__box{ width:min(72rem, 100%); }

/* 檢視版面 */
.viewgrid{ display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); }
.viewitem{ min-width:0; }
.viewitem__k{ font-size:.74rem; font-weight:700; letter-spacing:.08em; color:var(--text-dim); }
.viewitem__v{ font-size:.95rem; word-break:break-word; }
.viewitem--wide{ grid-column:1 / -1; }
.viewsec{ margin-top:1.25rem; padding-top:1.1rem; border-top:1px dashed var(--line); }
.viewsec:first-child{ margin-top:0; padding-top:0; border-top:0; }
.viewsec > h3{ font-size:.8rem; letter-spacing:.14em; color:var(--text-dim); margin-bottom:.7rem; text-transform:uppercase; }

/* 線路區塊的標題列：左標題、右清除鈕 */
.sechead{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin-bottom:.7rem;
}
.sechead > h3{
  font-size:.8rem; letter-spacing:.14em; color:var(--text-dim);
  margin:0; text-transform:uppercase;
}
.sechead .btn--mini{ margin-left:auto; }

/* 小型按鈕：放在區塊標題列裡，不搶主要動作的視線 */
.btn--mini{
  min-height:2.1rem; padding:.2rem .7rem;
  font-size:.78rem; font-weight:600;
  color:var(--text-mid);
}
.btn--mini:hover{ background:var(--red-tint); border-color:var(--red); color:var(--red); }
.btn--mini .ic{ width:1rem; height:1rem; }

/* 等待二次確認的狀態 */
.btn--mini.is-arming{
  background:var(--red); border-color:var(--red); color:#fff;
  animation:armPulse 1.1s ease-in-out infinite;
}
.btn--mini.is-arming:hover{ background:#A62F23; border-color:#A62F23; color:#fff; }
@keyframes armPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(192,57,43,.35); }
  50%    { box-shadow:0 0 0 4px rgba(192,57,43,0); }
}

@media (max-width: 560px){
  .sechead .btn--mini{ min-height:2.5rem; }
}
.pre{ white-space:pre-wrap; word-break:break-word; }

.copelist{ display:flex; flex-direction:column; gap:.6rem; }
.cope{
  border:1px solid var(--line); border-radius:var(--r);
  padding:.75rem .9rem; background:#FAFBFC;
}
.cope__head{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; font-size:.82rem; color:var(--text-mid); }
.cope__date{
  font-family:var(--mono); font-weight:700; color:var(--text);
  background:var(--teal-tint); border-radius:5px; padding:.05rem .4rem;
}
.cope__desc{ margin-top:.4rem; white-space:pre-wrap; font-size:.9rem; }
.cope__ops{ margin-left:auto; display:flex; gap:.35rem; }

/* ── 相片燈箱 ───────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:400;
  display:grid; place-items:center;
  padding:clamp(.75rem, 3vw, 2.5rem);
  background:rgba(10,16,21,.93);
  animation:lbIn .16s ease;
}
@keyframes lbIn{ from{ opacity:0; } }

.lightbox__stage{
  margin:0; max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
}
.lightbox{ overflow:hidden; }
.lightbox__img{
  display:block;
  max-width:min(100%, 96vw);
  max-height:calc(100dvh - 9rem);
  object-fit:contain;
  border-radius:var(--r-sm);
  background:#0A1015;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  position:relative; z-index:1;
  transform-origin:center center;
  will-change:transform;
  user-select:none; -webkit-user-drag:none;
}
/* 放大後可以拖曳移動 */
.lightbox__img.is-zoomed{ cursor:grab; border-radius:0; touch-action:none; }
.lightbox__img.is-panning{ cursor:grabbing; }

/* 目前的縮放倍率 */
.lightbox__zoom{
  position:absolute; z-index:10; top:1rem; left:1rem;
  padding:.35rem .7rem;
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:99px;
  font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.lightbox__cap{
  position:relative; z-index:10;
  color:#D6E0E7; font-size:.85rem; text-align:center;
  max-width:44rem; line-height:1.5;
  font-variant-numeric:tabular-nums;
}

.lightbox__close,
.lightbox__nav{
  position:absolute; z-index:10;   /* 高於相片，放大後也不會被蓋住 */
  display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:50%;
  cursor:pointer;
  transition:background .15s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(255,255,255,.24); }
.lightbox__close{ top:1rem; right:1rem; width:3rem; height:3rem; }
.lightbox__close svg{ width:1.5rem; height:1.5rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:3.4rem; height:3.4rem; }
/* 放大檢視時把翻頁鈕淡化，讓出畫面又不至於消失 */
.lightbox.is-zoomed .lightbox__nav{ opacity:.45; }
.lightbox.is-zoomed .lightbox__nav:hover,
.lightbox.is-zoomed .lightbox__nav:focus-visible{ opacity:1; }
.lightbox__nav svg{ width:1.8rem; height:1.8rem; }
.lightbox__nav--prev{ left:1rem; }
.lightbox__nav--next{ right:1rem; }

@media (max-width: 560px){
  .lightbox__img{ max-height:calc(100dvh - 11rem); }
  .lightbox__nav{
    top:auto; bottom:1.1rem; transform:none;
    width:3.4rem; height:3.4rem;
    background:rgba(255,255,255,.18);
  }
  .lightbox__nav--prev{ left:1.5rem; }
  .lightbox__nav--next{ right:1.5rem; }
  /* 手機上翻頁鈕在畫面底部，不會擋到拖曳，維持清楚可見 */
  .lightbox.is-zoomed .lightbox__nav{ opacity:.9; }
}

/* 追蹤案標記 */
.trackmark{
  display:inline-grid; place-items:center;
  width:1.5rem; height:1.5rem; flex:none;
  vertical-align:-.3rem; margin-right:.3rem;
  color:#B4610E;
}
.trackmark svg{ width:1.15rem; height:1.15rem; }
.badge.is-track{
  background:var(--orange-tint); color:var(--orange);
  display:inline-flex; align-items:center; gap:.25rem;
}
.badge.is-track svg{ width:.9rem; height:.9rem; flex:none; }
/* 對話框標題列裡的追蹤標記 */
.modal__head .trackmark{ vertical-align:0; margin-right:.15rem; }
.rowbtn.is-on{ background:var(--orange-tint); border-color:var(--orange); color:var(--orange); }
tr.is-tracked td{ background:#FFFBF4; }
tr.is-tracked:hover td{ background:#FFF6E8; }
tr.is-tracked:hover td.openable{ background:#FBEFD9; }

/* 列表裡的相片張數 */
.shotcount{
  display:inline-flex; align-items:center; gap:.25rem;
  font-family:var(--mono); font-weight:700; color:var(--text-mid);
}
.shotcount svg{ width:1.05rem; height:1.05rem; }
.shotcount.is-zero{ color:var(--text-dim); font-weight:400; }

/* 現場相片牆 */
.shots{
  display:grid; gap:.5rem; margin-top:.7rem;
  grid-template-columns:repeat(auto-fill, minmax(7rem, 1fr));
}
.shot{ position:relative; margin:0; }
.shot a{ display:block; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--line-soft); }
.shot img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.shot a:hover{ border-color:var(--teal); }
.shot figcaption{
  margin-top:.3rem;
  font-size:.72rem; line-height:1.5; color:var(--text-dim);
  word-break:break-all;
}
.shot figcaption b{
  color:var(--text); font-weight:700;
  font-family:var(--mono); font-size:.76rem;
}
.shot__del{
  position:absolute; top:.25rem; right:.25rem;
  width:1.9rem; height:1.9rem;
  display:grid; place-items:center;
  background:rgba(20,35,46,.72); color:#fff;
  border:0; border-radius:50%; cursor:pointer;
}
.shot__del:hover{ background:var(--red); }
.shot__del svg{ width:1rem; height:1rem; }
.shots__none{ margin:.6rem 0 0; font-size:.8rem; color:var(--text-dim); }

/* 刪除相片的確認：蓋在縮圖上，不另開對話框 */
.shot.is-asking a{ border-color:var(--red); }
.shot.is-asking .shot__del{ display:none; }
.shot__ask{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem; padding:.4rem;
  background:rgba(20,35,46,.9);
  border-radius:var(--r-sm);
  text-align:center;
  animation:askIn .12s ease;
}
@keyframes askIn{ from{ opacity:0; } }
.shot__ask b{ color:#fff; font-size:.8rem; line-height:1.3; }
.shot__askhint{ color:#C9D5DD; font-size:.68rem; }
.shot__askbtns{ display:flex; gap:.3rem; margin-top:.25rem; }
.shot__ask button{
  min-height:2rem; padding:0 .6rem;
  border-radius:6px; border:1px solid transparent;
  font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
}
.shot__no{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.28); }
.shot__no:hover{ background:rgba(255,255,255,.28); }
.shot__yes{ background:var(--red); color:#fff; }
.shot__yes:hover{ background:#A62F23; }

@media (max-width: 560px){
  .shots{ grid-template-columns:repeat(auto-fill, minmax(5.5rem, 1fr)); }
  .shot__del{ width:2.2rem; height:2.2rem; }
}
.cope__none{ color:var(--text-dim); font-size:.88rem; margin:0; }

/* 就地新增／修改處理紀錄 */
.cope--form{ background:var(--card); border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint); }
.cope--form .grid{ grid-template-columns:minmax(0,16rem); }
.cope--confirm{ background:var(--red-tint); border-color:#F0C4BE; }
.cope__warn{ margin:0 0 .7rem; font-size:.88rem; color:var(--red); line-height:1.55; }
.cope__warn b{ display:block; margin-bottom:.15rem; }

/* ── 響應式 ─────────────────────────────────────────────── */
@media (max-width: 900px){
  :root{ --tap:3rem; }

  .sidebar{ transform:translateX(-100%); width:min(20rem, 86vw); box-shadow:var(--shadow-lg); }
  body.nav-open .sidebar{ transform:none; }
  body.nav-collapsed .sidebar{ width:min(20rem, 86vw); }
  body.nav-collapsed .nav__label,
  body.nav-collapsed .brand__text,
  body.nav-collapsed .profile__who,
  body.nav-collapsed .profile__caret{ display:revert; }
  body.nav-collapsed .brand__mark{ display:grid; }
  body.nav-collapsed .nav__item{ justify-content:flex-start; padding-inline:.7rem; }
  body.nav-collapsed .sidebar__brand{ justify-content:flex-start; }
  .sidebar__toggle{ transform:none !important; }

  .content,body.nav-collapsed .content{ margin-left:0; }
  .topbar .topbar__menu{ display:inline-grid; }
  .topbar__title{ font-size:1rem; }

  .main{ padding:1rem .75rem 3rem; }
  .card{ border-radius:var(--r); }
  .grid{ grid-template-columns:1fr 1fr; }
  .grid--tight{ grid-template-columns:1fr 1fr; }
  .field--wide,.field--range{ grid-column:1 / -1; }

  .rowbtn{ width:2.9rem; height:2.9rem; }
  .pager__info{ width:100%; margin-bottom:.3rem; }
  .modal__box{ max-height:calc(100dvh - 1rem); }
  .viewgrid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 560px){
  .grid,.grid--tight,.viewgrid{ grid-template-columns:1fr; }
  .field--range{ grid-column:1 / -1; }
  .actions .btn{ flex:1 1 auto; }
  .fontsize__reset{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media print{
  .sidebar,.topbar,.pager,.footer,.tip,.toast-wrap{ display:none !important; }
  .content{ margin-left:0 !important; }
  .card{ box-shadow:none; }
}

/* 首頁：cht_museum 隨機展示圖片
   直接用「限高＋object-fit:contain」壓縮圖片高度，遇到長條狀（例如整張
   海報掃描檔）的圖片時，寬度會被壓縮成一條細細的縫，反而更難看清楚。
   改成「限制寬度＋容器可垂直捲動」：一般照片寬度撐滿、高度自然完整顯示；
   長條圖片維持好讀的寬度，超出的部分用捲動看，而不是整張被壓扁。 */
.museum__body{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  min-height:60vh; justify-content:center; padding:.5rem 0;
}
.museum__frame{
  display:inline-block; max-width:min(94vw, 760px); max-height:72vh;
  overflow:auto; border-radius:var(--r-lg);
  box-shadow:0 .4rem 1.6rem rgba(16,35,46,.18);
  background:var(--card);
}
.museum__img{
  display:block; width:100%; height:auto;
  transition:opacity .22s ease;
}
.museum__img.is-fading{ opacity:0; }
.museum__toolbar{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  flex-wrap:wrap; max-width:min(94vw, 760px); width:100%;
}
.museum__cap{ color:var(--text-dim); font-size:.85rem; margin:0; }
.museum__empty{ max-width:32rem; margin:0 auto; text-align:center; }