/* felixxsv webmail — felixxsv.net / admin と同じ「ターミナル × ネオン」配色 */
:root {
  /* admin.felixxsv.net（web/app/globals.css）と同じ値 */
  --fx-bg: #050507;
  --fx-pane: #0c0c12;
  --fx-pane-2: #12121a;
  --fx-line: #23232e;
  --fx-ink: #d8d8e0;
  --fx-ink-strong: #ffffff;
  --fx-muted: #a0a0b0;
  --fx-dim: #6b6b7a;
  --fx-neon: #ff2bd6;
  --fx-neon-line: rgba(255, 43, 214, 0.3);
  --fx-neon-soft: rgba(255, 43, 214, 0.08);
  --fx-cyan: #00e5ff;
  --fx-warn: #ffb000;
  --fx-error: #ff6b6b;
  --fx-ok: #4ade80;
  /* felixxsv.net と同じ「英数字は JetBrains Mono、日本語は Noto Sans JP」（fonts.css で配信） */
  --fx-font: "JetBrains Mono", "Noto Sans JP", "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
  --fx-mono: var(--fx-font);
}

/* 文字は全部 felixxsv のフォントに（メール本文の HTML は送り主のまま） */
html.dark-mode body,
html.dark-mode input, html.dark-mode button, html.dark-mode select, html.dark-mode textarea,
html.dark-mode .popover, html.dark-mode .ui-dialog, html.dark-mode .toolbar a, html.dark-mode .menu a {
  font-family: var(--fx-font) !important;
  -webkit-font-smoothing: antialiased;
}
html.dark-mode ::selection { background: rgba(255, 43, 214, 0.35); color: #fff; }
/* キーボード操作時の枠はリンクとボタンだけ。入力欄は枠線＋光で示す（二重の枠にしない） */
html.dark-mode a:focus-visible, html.dark-mode button:focus-visible { outline: 1px solid var(--fx-neon); outline-offset: 2px; }
html.dark-mode input:focus, html.dark-mode textarea:focus, html.dark-mode select:focus { outline: none !important; }

/* ライト／ダークの切り替えボタンは出さない（常にダーク） */
#taskmenu a.theme { display: none !important; }

/* ---- 全体 ---- */
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode .layout-content,
html.dark-mode .layout-list,
html.dark-mode .layout-sidebar,
html.dark-mode .content,
html.dark-mode .sidebar,
html.dark-mode .listing,
html.dark-mode .scroller {
  background-color: var(--fx-bg) !important;
  color: var(--fx-ink);
}
html.dark-mode .header,
html.dark-mode .footer,
html.dark-mode .toolbar,
html.dark-mode .searchbar,
html.dark-mode .pagenav {
  background-color: var(--fx-pane) !important;
  border-color: var(--fx-line) !important;
}
html.dark-mode .layout-sidebar,
html.dark-mode .layout-list {
  border-right: 1px solid var(--fx-line) !important;
}
html.dark-mode .header .header-title,
html.dark-mode .boxtitle,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3 {
  font-family: var(--fx-mono);
  color: var(--fx-ink-strong);
}

/* 左端のメニュー（メール・連絡先・設定…） */
html.dark-mode #layout-menu {
  background-color: var(--fx-pane) !important;
  border-right: 1px solid var(--fx-neon-line);
}
html.dark-mode #layout-menu .menu a,
html.dark-mode #layout-menu .special-buttons a { color: var(--fx-muted); }
html.dark-mode #layout-menu .menu a.selected,
html.dark-mode #layout-menu .menu a:hover {
  color: var(--fx-neon) !important;
  background-color: var(--fx-neon-soft) !important;
}

/* ロゴは felixxsv.net と同じ狼（wolf.webp）。サイトのトップと同じく白黒＋ピンクの光でゆっくり明滅させる */
@keyframes fx-breathe-logo {
  0%, 100% { filter: grayscale(1) brightness(1.35) drop-shadow(0 0 3px rgba(255, 43, 214, 0.3)); }
  50%      { filter: grayscale(1) brightness(1.75) drop-shadow(0 0 18px rgba(255, 43, 214, 1)); }
}
#layout-menu #logo,
body.task-login #logo {
  visibility: visible;
  display: block;
  object-fit: contain;
  filter: grayscale(1) brightness(1.5) drop-shadow(0 0 6px rgba(255, 43, 214, 0.6));
  animation: fx-breathe-logo 3.6s ease-in-out infinite;
}
#layout-menu #logo { width: 40px; height: 40px; max-width: 40px; margin: 14px auto 6px; animation-name: fx-breathe-logo-small; }
/* 左のメニューは幅が狭く、強い光は縁で切れて四角く見えるので控えめに */
@keyframes fx-breathe-logo-small {
  0%, 100% { filter: grayscale(1) brightness(1.35) drop-shadow(0 0 2px rgba(255, 43, 214, 0.3)); }
  50%      { filter: grayscale(1) brightness(1.75) drop-shadow(0 0 7px rgba(255, 43, 214, 0.9)); }
}
body.task-login #logo { width: 52px; height: 52px; max-width: 52px; margin: 0 auto 18px; }
@media (prefers-reduced-motion: reduce) {
  #layout-menu #logo, body.task-login #logo { animation: none; }
}

/* 左下（このプログラムについて・ログアウト） */
html.dark-mode #layout-menu .special-buttons,
html.dark-mode #layout-menu .popover-footer {
  background-color: var(--fx-pane) !important;
  border-top: 1px solid var(--fx-line);
}

/* 右側（プレビュー・本文）の背景 */
html.dark-mode #layout-content,
html.dark-mode .iframe-wrapper,
html.dark-mode #layout-content iframe,
html.dark-mode .watermark {
  background-color: var(--fx-bg) !important;
}

/* ---- 一覧 ---- */
html.dark-mode .listing li,
html.dark-mode table.listing tr,
html.dark-mode table.records-table tr td,
html.dark-mode table.messagelist tr td {
  border-color: var(--fx-line) !important;
}
html.dark-mode table.records-table tr.selected td,
html.dark-mode table.records-table tr.focused td,
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode table.messagelist tr.selected td {
  background-color: var(--fx-neon-soft) !important;
  color: var(--fx-ink-strong) !important;
}
html.dark-mode table.messagelist tr.unread td .subject a,
html.dark-mode table.messagelist tr.unread td span.fromto { color: var(--fx-ink-strong); }
html.dark-mode table.messagelist tr.unread td .msgicon.status::before,
html.dark-mode .listing li .unreadcount { color: var(--fx-neon); }
html.dark-mode .listing li .unreadcount {
  background-color: var(--fx-neon-soft) !important;
  border: 1px solid var(--fx-neon-line);
}

/* ---- リンク・ボタン・入力 ---- */
html.dark-mode a { color: var(--fx-cyan); }
html.dark-mode .btn-primary,
html.dark-mode button.btn-primary,
html.dark-mode input.btn-primary,
html.dark-mode .button.mainaction,
html.dark-mode .btn.mainaction {
  color: var(--fx-neon) !important;
  background-color: transparent !important;
  border-color: var(--fx-neon) !important;
}
html.dark-mode .btn-primary:hover,
html.dark-mode .button.mainaction:hover {
  color: var(--fx-ink-strong) !important;
  background-color: var(--fx-neon-soft) !important;
  box-shadow: 0 0 10px rgba(255, 43, 214, 0.35);
}
html.dark-mode .form-control,
html.dark-mode input[type="text"], html.dark-mode input[type="password"], html.dark-mode input[type="email"],
html.dark-mode textarea, html.dark-mode select {
  background-color: var(--fx-bg) !important;
  border-color: var(--fx-line) !important;
  color: var(--fx-ink) !important;
}
html.dark-mode .form-control:focus,
html.dark-mode input:focus, html.dark-mode textarea:focus, html.dark-mode select:focus {
  border-color: var(--fx-neon) !important;
  box-shadow: 0 0 0 1px var(--fx-neon-line) !important;
}
html.dark-mode .toolbar a.button:hover,
html.dark-mode .toolbar a.button.selected { color: var(--fx-neon) !important; }

/* ---- ログイン画面 ---- */
body.task-login { background: var(--fx-bg) !important; }
body.task-login #layout-content {
  background: transparent !important;
}
body.task-login #login-form {
  max-width: 380px;
  margin: 0 auto;
  padding: 28px;
  background: var(--fx-pane);
  border: 1px solid var(--fx-neon-line);
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(255, 43, 214, 0.08);
}
body.task-login #login-form::before {
  content: "felix@webmail:~$ login";
  display: block;
  margin: 0 0 20px;
  font: 700 16px var(--fx-mono);
  color: var(--fx-neon);
}
body.task-login #login-footer,
body.task-login .formcontent + .formbuttons + div { color: var(--fx-dim); font-family: var(--fx-mono); font-size: 11px; }

/* ---- ポップアップ ---- */
html.dark-mode .popover,
html.dark-mode .ui-dialog,
html.dark-mode .ui-dialog-content,
html.dark-mode .ui-dialog-titlebar,
html.dark-mode .ui-dialog-buttonpane {
  background-color: var(--fx-pane) !important;
  border-color: var(--fx-line) !important;
}

/* ---- 入力欄の左のアイコン枠（ユーザー名・パスワード・コード） ---- */
html.dark-mode .input-group-text,
html.dark-mode .input-group-prepend .input-group-text {
  background-color: var(--fx-pane-2) !important;
  border-color: var(--fx-line) !important;
  color: var(--fx-muted) !important;
}

/* ---- 2段階認証の設定画面（拡張の素の入力欄） ---- */
html.dark-mode #twofactor_gauthenticator-form input[type="text"],
html.dark-mode #twofactor_gauthenticator-form input[type="password"],
html.dark-mode #pluginbody input[type="text"],
html.dark-mode input#2FA_code_to_check {
  border: 1px solid var(--fx-line) !important;
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--fx-mono);
}
html.dark-mode #twofactor_gauthenticator-form input[type="checkbox"] { accent-color: var(--fx-neon); }
#2FA_qr_code { display: inline-block; padding: 8px; background: #fff; border-radius: 6px; }

/* ---- 区切り線の色をそろえる ---- */
html.dark-mode .layout-list,
html.dark-mode .layout-sidebar,
html.dark-mode #layout-content,
html.dark-mode .header,
html.dark-mode .footer { border-color: var(--fx-line) !important; }

/* ---- 左下のボタン（このプログラムについて・ログアウト） ---- */
html.dark-mode #taskmenu .special-buttons a { background-color: transparent !important; }
html.dark-mode #taskmenu .special-buttons { border-top: 1px solid var(--fx-line); }

/* ---- 列の区切り線 ---- */
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content { border-color: var(--fx-line) !important; }

/* ---- 作成画面 ---- */
html.dark-mode .editor-toolbar {
  background-color: var(--fx-pane-2) !important;
  border-color: var(--fx-line) !important;
}
html.dark-mode .btn-secondary,
html.dark-mode button.btn-secondary {
  color: var(--fx-cyan) !important;
  background-color: transparent !important;
  border-color: var(--fx-line) !important;
}
html.dark-mode .btn-secondary:hover { border-color: var(--fx-cyan) !important; color: var(--fx-ink-strong) !important; }
html.dark-mode #compose-attachments.droptarget,
html.dark-mode .file-upload { border-color: var(--fx-line) !important; }
/* 宛先欄（ul の中に入力欄がある作り）。中の入力欄は枠を出さず、外側の ul を他の欄と同じ「1px の枠＋光」にする */
html.dark-mode .recipient-input input,
html.dark-mode .recipient-input input:focus { box-shadow: none !important; border: 0 !important; outline: none !important; }
html.dark-mode .recipient-input { border-color: var(--fx-line) !important; box-shadow: none !important; }
html.dark-mode .recipient-input.focus,
html.dark-mode .recipient-input:focus-within { border-color: var(--fx-neon) !important; box-shadow: 0 0 0 1px var(--fx-neon-line) !important; }
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode .custom-switch input:checked + label::before { background-color: var(--fx-neon) !important; border-color: var(--fx-neon) !important; }

/* ---- メール本文 ---- */
/* HTML メールは送り主のデザインを崩さないよう白地のまま。リンク色だけ元に戻す */
html.dark-mode .message-htmlpart a { color: revert !important; }
html.dark-mode #message-header,
html.dark-mode .header-headers { background-color: var(--fx-pane) !important; }

/* ---- 2段階認証の設定画面（felixxsv.js が admin と同じ流れに置き換える） ---- */
.fx-2fa { max-width: 900px; padding: 8px 4px; }
.fx-2fa h1 { margin: 0 0 4px; font: 700 18px var(--fx-mono); color: var(--fx-ink-strong); }
.fx-2fa h1::before { content: "❯ "; color: var(--fx-neon); }
.fx-2fa h2 { margin: 0 0 12px; font: 400 13px var(--fx-mono); color: var(--fx-muted); letter-spacing: 0.06em; }
.fx-2fa h2::before { content: "// "; color: var(--fx-neon); }
.fx-lead { margin: 0 0 18px; color: var(--fx-dim); }
.fx-dim { color: var(--fx-dim); }
.fx-box { background: var(--fx-pane); border: 1px solid var(--fx-line); border-radius: 6px; padding: 16px 18px; margin-bottom: 16px; }
.fx-badge { display: inline-block; padding: 0 6px; border: 1px solid currentColor; border-radius: 3px; font-size: 11px; line-height: 18px; }
.fx-ok { color: #4ade80; }
.fx-off { color: var(--fx-dim); }
.fx-setup { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.fx-setup p { margin: 0 0 10px; }
.fx-qr { background: #fff; padding: 8px; border-radius: 6px; line-height: 0; }
.fx-steps { flex: 1; min-width: 280px; }
.fx-secret { color: var(--fx-ink-strong); font-family: var(--fx-mono); letter-spacing: 0.05em; user-select: all; }
.fx-row { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
.fx-code { max-width: 160px; font-family: var(--fx-mono); letter-spacing: 0.15em; }
.fx-recovery summary { cursor: pointer; color: var(--fx-cyan); }
.fx-recovery p { margin: 6px 0; }
/* 拡張の「設定が必要です」の小窓（あとから開く）とその幕は出さない。案内は felixxsv.js の画面に書く */
body.action-plugin-twofactor_gauthenticator .ui-dialog:has(#enrollment_dialog),
body.action-plugin-twofactor_gauthenticator .ui-widget-overlay { display: none !important; }

/* ---- プレビューの拡大表示（一覧でダブルクリック。felixxsv.js） ---- */
body.fx-maximized #layout-sidebar,
body.fx-maximized #layout-list,
body.fx-maximized .column-resizer { display: none !important; }
body.fx-maximized #layout-content { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
#layout-content > .header { position: relative; }
.fx-show-list {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  line-height: 1.6;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font: 12px var(--fx-font);
  color: var(--fx-neon);
  background: transparent;
  border: 1px solid var(--fx-neon-line);
  border-radius: 4px;
  cursor: pointer;
}
.fx-show-list:hover { background: var(--fx-neon-soft); color: var(--fx-ink-strong); }
body.fx-maximized .fx-show-list { display: inline-flex; }