/* 通知設定。設計跟團隊鐵律：唔用 emoji、每行文字一行到尾、左欄闊度自動跟文字、內容食晒闊度。 */
.nf-loading{max-width:none}
.nf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-3h)}
.nf-head h1{margin:0;font-size:var(--fs-2xl);letter-spacing:-.02em}
.nf-head .meta{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-1)}

.nf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:var(--sp-4) var(--sp-4);margin-bottom:var(--sp-3h)}
.nf-card>h2{margin:0 0 var(--sp-1);font-size:var(--fs-md);letter-spacing:-.01em}
.nf-card>.sub{color:var(--muted);font-size:var(--fs-xs);margin-bottom:var(--sp-3)}

/* 狀態橫額 */
.nf-state{display:flex;align-items:center;gap:var(--sp-3h);flex-wrap:wrap}
.nf-state .dot{width:10px;height:10px;border-radius:50%;flex:none}
.nf-state .dot.ok{background:var(--good,#1a7f4b)}
.nf-state .dot.warn{background:#b8860b}
.nf-state .dot.off{background:var(--muted)}
.nf-state .txt{flex:1;min-width:220px}
.nf-state .txt b{display:block;font-size:var(--fs-md)}
.nf-state .txt s{display:block;text-decoration:none;color:var(--muted);font-size:var(--fs-xs);margin-top:2px}
.nf-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* 每一行通知類型：名 · 說明 · 提前 · 開關，全部一行 */
.nf-grp{margin-top:var(--sp-4)}
.nf-grp:first-child{margin-top:0}
.nf-grp>h3{margin:0 0 2px;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.nf-grp>p{margin:0 0 var(--sp-2);font-size:var(--fs-xs);color:var(--muted)}
.nf-rows{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.nf-row{display:flex;align-items:center;gap:var(--sp-3h);padding:var(--sp-2h) var(--sp-3h);border-bottom:1px solid var(--line2);background:var(--card)}
.nf-row:last-child{border-bottom:0}
.nf-row.off{background:var(--bg2)}
.nf-row .nm{flex:none;font-size:var(--fs-md);font-weight:500;white-space:nowrap}
.nf-row .ds{flex:1;min-width:0;color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-row .cad{flex:none;font-size:var(--fs-2xs);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px var(--sp-2);white-space:nowrap}
.nf-row select{flex:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;font-size:var(--fs-xs);background:var(--card);color:var(--ink)}
.nf-row .lock{flex:none;font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap}

/* 開關掣 */
/* ⚠️ 一定要保持 nf- 前綴：admin.css 有個 .sw 係「一行設定」，兩個 CSS 喺用戶管理頁一齊載入。
   （2026-09-01 撞過一次：權限卡片成張縮成 42×24px，啲字迫到重疊。） */
.nf-sw{flex:none;position:relative;width:42px;height:24px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg2);cursor:pointer;padding:0;transition:background .15s,border-color .15s}
.nf-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.nf-sw.on{background:var(--primary);border-color:var(--primary)}
.nf-sw.on::after{transform:translateX(18px)}
.nf-sw:disabled{opacity:.5;cursor:not-allowed}

.nf-line{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-2h) 0;border-bottom:1px solid var(--line2)}
.nf-line:last-child{border-bottom:0}
.nf-line .k{flex:none;font-size:var(--fs-md);font-weight:500;white-space:nowrap}
.nf-line .v{flex:1;min-width:0;color:var(--muted);font-size:var(--fs-xs)}
.nf-line input[type=time]{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px;font-size:var(--fs-sm);background:var(--card);color:var(--ink)}

.nf-prev{margin-top:var(--sp-2h);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.nf-prev .r{display:flex;gap:var(--sp-3);padding:var(--sp-2h) var(--sp-3h);border-bottom:1px solid var(--line2);font-size:var(--fs-sm);align-items:center}
.nf-prev .r:last-child{border-bottom:0}
.nf-prev .r .when{flex:none;color:var(--muted);font-size:var(--fs-xs);width:88px}
.nf-prev .r .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-prev .r.high .t{font-weight:700}
.nf-empty{padding:var(--sp-4);text-align:center;color:var(--muted);font-size:var(--fs-sm)}

.nf-wrap{overflow-x:auto}
.nf-send{display:grid;gap:var(--sp-2h);max-width:none}
.nf-send input[type=text],.nf-send textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font-size:var(--fs-md);background:var(--card);color:var(--ink);font-family:inherit}
.nf-send textarea{min-height:76px;resize:vertical}
.nf-who{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.nf-picked{display:flex;gap:var(--sp-1h);flex-wrap:wrap}
.nf-picked span{font-size:var(--fs-xs);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px var(--sp-2h);background:var(--bg2)}

/* 個人資料頁嗰張「去通知設定」卡（樣式放呢度，因為係通知功能帶出嚟嘅）。 */
.pr-link{display:flex;align-items:center;gap:var(--sp-3h);padding:var(--sp-4) var(--sp-4);flex-wrap:wrap}
.pr-link>div{flex:1;min-width:200px}
.pr-link b{display:block;font-size:var(--fs-md)}
.pr-link s{display:block;text-decoration:none;color:var(--muted);font-size:var(--fs-xs);margin-top:3px}
.ad-xlink{color:var(--primary);font-weight:700;text-decoration:none}
.ad-xlink:hover{text-decoration:underline}

/* ── 設定頁（一個入口，入面分頁）── */
/* ⚠️ 切換掣要有真正嘅呼吸位：垂直內距至少 11px、水平 22px。
   7px 上下內距睇落個字係迫住個邊框，成個控制件會覺得「未做完」。 */
.st-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;
  margin:0 0 var(--sp-5);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.st-head h1{margin:0;font-size:var(--fs-2xl);letter-spacing:-.02em;line-height:1.25}
.st-head .meta{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-1h);line-height:1.5}
.st-head .seg{padding:var(--sp-1);gap:var(--sp-1);flex:none}
.st-head .seg button{padding:11px 22px;font-size:var(--fs-md);font-weight:700;line-height:1.45}
/* 窄畫面：標題／說明／切換掣會疊落三行，行與行之間一定要有真正距離，
   唔係就會好似擠成一嚿（用戶 2026-08-31 反映）。 */
@media (max-width:900px){
  /* ⚠️ 900px 以下會出頂欄，頂欄已經寫住「設定」——頁面再出一次 h1 就係同一個字出兩次，
     白白霸走一行高度。呢個斷點要同 shell.css 嘅 min-width:901px 對齊。 */
  .st-head h1{display:none}
  .st-head .meta{margin-top:0;font-size:var(--fs-sm)}
}
@media (max-width:760px){
  .st-head{gap:var(--sp-5);padding-bottom:var(--sp-5);margin-bottom:var(--sp-5)}
  .st-head .meta{margin-top:0}
  .st-head>div:first-child{flex:1 1 100%}
  .st-head .seg{width:100%;padding:var(--sp-1h);gap:var(--sp-1h)}
  .st-head .seg button{flex:1;padding:12px 6px;font-size:var(--fs-sm)}
}
@media (max-width:420px){
  .st-head .seg button{padding:12px 4px;font-size:var(--fs-sm)}
  .st-card{padding:var(--sp-4) var(--sp-3h)}
}
.st-pane.hidden{display:none}

/* 個人資料：全闊單欄；頭像壓成一條橫帶，唔好食走成條側欄 */
#paneProfile>#prRight{margin-top:var(--sp-4)}
#paneProfile .pr-avatar{flex-direction:row;align-items:center;text-align:left;gap:var(--sp-4);flex-wrap:wrap}
#paneProfile .pr-avatar .big,#paneProfile .pr-avatar .initials{width:84px;height:84px;min-width:84px;font-size:28px;flex:0 0 84px}
/* ⚠️ .initials 本身都係一個 div —— 唔剔走佢就會被下面條 flex 規則扯成橢圓。 */
#paneProfile .pr-avatar>div:not(.row):not(.note):not(.initials):not(.pr-crop){flex:1 1 200px;min-width:0}
#paneProfile .pr-avatar .name{font-size:var(--fs-xl)}
#paneProfile .pr-avatar .title{font-size:var(--fs-xs);margin-top:3px}
#paneProfile .pr-avatar .note{order:3;flex:none;max-width:330px;text-align:right;line-height:1.6;margin-left:auto}
#paneProfile .pr-avatar .row{order:4;flex:none}
@media (max-width:820px){
  #paneProfile .pr-avatar .note{order:5;text-align:left;max-width:none;flex:1 1 100%;margin-left:0}
  #paneProfile .pr-avatar .row{order:3;margin-left:auto}
}
/* 闊螢幕用三欄，唔好得兩欄留一大條白 */
@media (min-width:1180px){#paneProfile .pr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.st-card{padding:var(--sp-4)}
.st-card>h2{margin:0 0 var(--sp-1);font-size:var(--fs-md);letter-spacing:-.01em}
.st-card>.sub{color:var(--muted);font-size:var(--fs-xs);margin-bottom:var(--sp-4)}
/* ⚠️ 唔好將三格輸入夾埋喺 420px 度、右邊留一大條白。同個人資料一樣行自適應欄。 */
.st-form{display:grid;gap:var(--sp-4) var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:start}
.st-form>.st-msg,.st-form>.st-row{grid-column:1/-1}
.st-form label{display:block;font-size:var(--fs-sm);font-weight:500}
.st-form input{width:100%;margin-top:var(--sp-1h);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font-size:var(--fs-md);background:var(--card);color:var(--ink);font-family:inherit}
.st-form input:focus{outline:none;border-color:var(--primary)}
.st-form s{display:block;text-decoration:none;color:var(--muted);font-size:var(--fs-xs);margin-top:var(--sp-1)}
.st-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
/* st-row 入面嘅下拉選單要同 .st-form input 一個樣，唔好用瀏覽器預設樣式 */
.st-row select{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font-size:var(--fs-md);background:var(--card);color:var(--ink);font-family:inherit}
.st-row select:focus{outline:none;border-color:var(--primary)}
.st-msg{font-size:var(--fs-sm);min-height:18px}
.st-msg:empty{display:none}   /* 冇訊息就唔好霸住一行空位 */
.st-msg.ok{color:var(--good,#1a7f4b);font-weight:500}
.st-msg.bad{color:var(--bad,#b3261e);font-weight:500}
.st-note{font-size:var(--fs-xs);color:var(--muted);line-height:1.6}

/* 通知一覽／我收過嘅通知（2026-09-01）—— 標題後面嘅數量標籤 */
.nf-card h2 .cnt{margin-left:var(--sp-2);font-size:var(--fs-xs);font-weight:400;color:var(--muted)}
.nf-wrap .tbl td{vertical-align:top}
.nf-wrap .tbl .muted{color:var(--muted)}

/* 事項中心（要留意）—— 2026-09-01。一件事一行，右邊固定係狀態掣。 */
.nt-list{display:flex;flex-direction:column;border-top:1px solid var(--line2)}
.nt-row{display:flex;align-items:flex-start;gap:var(--sp-3h);padding:var(--sp-2h) 0;border-bottom:1px solid var(--line2)}
.nt-row.done{opacity:.62}
.nt-main{flex:1;min-width:0}
.nt-main b{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.5}
.nt-note{display:block;color:var(--muted);font-size:var(--fs-xs);line-height:1.6;margin-top:1px}
.nt-meta{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-top:3px}
.nt-acts{display:flex;align-items:center;gap:var(--sp-1h);flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.nt-acts .btn{padding:4px 10px;font-size:var(--fs-xs)}
.nt-empty{color:var(--muted);font-size:var(--fs-sm);padding:var(--sp-2h) 0}
.nt-more{margin-top:var(--sp-3)}
.nt-past{margin-top:var(--sp-1)}
@media (max-width:640px){.nt-row{flex-direction:column;gap:var(--sp-2)}.nt-acts{justify-content:flex-start}}

/* .st-form 會將入面所有 label 變 block、input 變 100% 闊 —— 放喺 grid 入面嘅開關 chips 要例外
   （09-03 用戶截圖：登記表欄位開關成排爆晒） */
.st-form .pinchk{display:inline-flex;align-items:center;gap:6px;width:auto;font-size:var(--fs-xs);font-weight:500}
.st-form .pinchk input{width:auto;margin:0;flex:none}