/* 設定頁(D221)。借 itops.css 個外殼,呢度只加自己嗰幾行。 */

.set-note { font-size: 12.5px; color: var(--muted); margin: 0 0 .9rem; }
.set-hint { font-size: 12px; color: var(--muted); line-height: 1.6; margin: .9rem 0 0; }

.set-rows { display: flex; flex-direction: column; gap: .45rem; }

/* 六欄:名 / 職級 / 上班時間 / 彈性 / 實際 / 儲存
   用 grid 唔用 flex —— 各行要對齊成一個表,flex 會每行自己執位。 */
.set-row {
  display: grid;
  grid-template-columns: 5rem 5rem 7.5rem 6rem 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.set-row.set-head {
  border: 0; background: none; padding: 0 .6rem;
  font-size: 11.5px; color: var(--muted);
}
.set-name { font-size: 14px; font-weight: 600; }
.set-rank { font-size: 11.5px; color: var(--muted); }
.set-actual { font-size: 12px; color: var(--muted); }

.set-time, .set-flex {
  font: inherit; font-size: 13.5px;
  padding: .35rem .5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card); color: var(--ink);
  min-width: 0;             /* 冇呢句 input 唔肯縮,grid 會爆欄 */
}
.set-time:focus, .set-flex:focus { outline: none; border-color: var(--tick-done); }

.set-save {
  padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card); color: var(--muted);
  font-size: 13px; cursor: pointer;
}
.set-save:hover:not(:disabled) { color: var(--ink); border-color: #DADCE1; }
.set-save:disabled { opacity: .5; cursor: default; }

/* 窄screen:唔好硬撐六欄,摺成兩行好過爆版 */
@media (max-width: 720px) {
  .set-row { grid-template-columns: 1fr 1fr; row-gap: .4rem; }
  .set-row.set-head { display: none; }
}