/* ============================================================
   TrueStage カスタムスキン(elastic継承)
   独自CSSはすべてここに集約する。elastic本体は継承しているので
   ここには「上書き・追加」だけを書く。
   PHPプラグイン(custom_from / easy_forward)が使うクラスも
   ここで定義し、PHP側は<style>を出力しない方針。
   ============================================================ */

/* ------------------------------------------------------------
   markasjunk: 迷惑メール/非迷惑メール ボタンのラベル切れ対策
   ------------------------------------------------------------ */
.button.notjunk .inner,
.button.junk .inner {
    font-size: 80%;
}

/* ------------------------------------------------------------
   custom_from: 返信画面の送信元バナー
   状態はPHPが class(cf-registered / cf-unregistered / cf-notarget)で付与。
   色・装飾はここで定義する。
   ------------------------------------------------------------ */
/* 返信画面ではネイティブの差出人セレクタを隠す */
#compose_from { display: none !important; }

#custom_from_banner {
    color: #ffffff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    margin: 10px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#custom_from_banner.cf-registered   { background-color: #1e7e34; } /* 登録済み(緑) */
#custom_from_banner.cf-unregistered { background-color: #dc3545; } /* 未登録(赤) */
#custom_from_banner.cf-notarget     { background-color: #6c757d; } /* 検出失敗(灰) */
#custom_from_banner .banner-icon {
    margin-right: 8px;
    font-size: 18px;
}
/* バナー内の補足注意書き(赤=未登録リスト登録/灰=検出不能の説明) */
#custom_from_banner .cf-banner-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: normal;
    opacity: 0.9;
}

/* ------------------------------------------------------------
   custom_from: テンプレート挿入UI(カテゴリ→ホバーメニュー)
   ------------------------------------------------------------ */
#custom_template_box {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 6px 16px;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.ctpl-cat {
    position: relative;
    display: inline-block;
}
.ctpl-cat-label {
    display: inline-block;
    padding: 6px 14px;
    margin-right: 2px;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 13px;
    color: #495057;
    cursor: pointer;
    user-select: none;
}
.ctpl-cat:hover .ctpl-cat-label {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.ctpl-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    max-width: 400px;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}
.ctpl-cat:hover .ctpl-menu {
    display: block;
}
.ctpl-menu li {
    padding: 6px 14px;
    font-size: 13px;
    color: #212529;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ctpl-menu li:hover {
    background-color: #007bff;
    color: #ffffff;
}

/* ------------------------------------------------------------
   custom_from: メール一覧の各行に出すサイト名の段
   (JSが .cf-siteline を td.subject 先頭に挿入。データはJSが埋める)
   ------------------------------------------------------------ */
.cf-siteline {
    display: block;
    width: 100%;
    flex-basis: 100%;
    order: -1;
    font-size: 11px;
    line-height: 1.3;
    color: #2e7dd1;
    font-weight: bold;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cf-siteline .cf-dom { color: #888; font-weight: normal; }
.cf-siteline .cf-cp  { color: #666; font-weight: normal; }

/* ------------------------------------------------------------
   easy_forward: 「簡単転送」ボタンのメインアイコンだけ青くする
   (レイアウト・字形・▼ は Elastic 標準に任せる)
   ------------------------------------------------------------ */
li[data-ef-wrap="1"] .dropbutton > a.forward:before {
    color: #2e7dd1;
}

/* ------------------------------------------------------------
   easy_forward: 転送先メニューの各項目の説明文(誤操作防止)
   ------------------------------------------------------------ */
#easy-forward-menu .ef-menu-desc {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: #666;
    font-weight: normal;
    white-space: normal;
    margin-top: 2px;
    max-width: 320px;
}
/* メニュー項目自体が複数行を許容するように */
#easy-forward-menu li a {
    height: auto;
    white-space: normal;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ------------------------------------------------------------
   easy_forward: 選択後 compose 画面の説明文バナー
   (送信元バナーの下に表示。青系で注意喚起)
   ------------------------------------------------------------ */
.ef-desc-banner {
    background-color: #eaf3fb;
    border: 1px solid #b6d4ef;
    color: #1a4971;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.6;
    border-radius: 4px;
    margin: 0 10px 10px 10px;
    white-space: pre-wrap;
}

/* ------------------------------------------------------------
   対応時間計測SSO: 未ログイン時のモーダル
   (sup未ログインを検知したとき、画面遷移せず案内を出す)
   ------------------------------------------------------------ */
.ef-sso-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ef-sso-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px 28px;
    max-width: 420px;
    width: calc(100% - 40px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.ef-sso-title {
    font-size: 17px;
    font-weight: bold;
    color: #212529;
    margin-bottom: 12px;
}
.ef-sso-msg {
    font-size: 13px;
    line-height: 1.7;
    color: #495057;
    margin-bottom: 20px;
    text-align: left;
}
.ef-sso-btn {
    display: block;
    width: 100%;
    padding: 11px 16px;
    margin: 8px 0 0;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.ef-sso-btn-primary {
    background: #007bff;
    color: #ffffff;
}
.ef-sso-btn-primary:hover { background: #0069d9; }
.ef-sso-btn-cancel {
    background: transparent;
    color: #6c757d;
    font-weight: normal;
    font-size: 13px;
}
.ef-sso-btn-cancel:hover { color: #343a40; }

/* ------------------------------------------------------------
   アドレスコピー機能
   ------------------------------------------------------------ */
/* compose: 送信元バナー・宛先のコピーボタン */
.cf-copy-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 11px;
    line-height: 1.6;
    color: #2e7dd1;
    background: #eaf3fb;
    border: 1px solid #b6d4ef;
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
}
.cf-copy-btn:hover {
    background: #2e7dd1;
    color: #fff;
    border-color: #2e7dd1;
}

/* preview: mailtoメニューに追加した「アドレスをコピー」項目 */
#mailto-menu li.cf-copy-item a.cf-copy-addr {
    cursor: pointer;
}

/* preview: 「アドレスをコピー」メニュー項目のアイコン(他項目と同じFont Awesome方式) */
.menu a.cf-copy-addr:before {
    content: "\f0c5";
}

/* 「このプログラムについて」(About/バージョン情報)を非表示 */
a.about {
    display: none !important;
}
/* ------------------------------------------------------------
   管理リンク(groupId=1のときだけ左メニューに出る)
   custom_from.php が #taskmenu の「設定」の直後に
   <a class="cf-admin"><span class="inner">管理</span></a> を挿入する。
   アイコンは他のメニュー項目と同じ Font Awesome 方式で指定。
   ------------------------------------------------------------ */
#taskmenu a.cf-admin:before {
    content: "\f0ad";   /* レンチ(工具)アイコン */
}

/* ------------------------------------------------------------
   「機能」リンク(全ユーザーに出る。テンプレート・署名を開放)
   custom_from.php が #taskmenu に
   <a class="cf-features"><span class="inner">機能</span></a> を挿入する。
   ------------------------------------------------------------ */
#taskmenu a.cf-features:before {
    content: "\f0d0";   /* magic(魔法の杖)アイコン */
}

/* ------------------------------------------------------------
   連絡先(addressbook)の導線は管理者だけに見せる。
   custom_from.php が body に cf-nonadmin クラスを付ける(非管理者/未判定)。
   bodyクラスなのでtaskmenu再構築後も効き続ける。管理者はクラスが付かず表示。
   ------------------------------------------------------------ */
body.cf-nonadmin #taskmenu a.contacts { display: none !important; }

/* 管理画面(と設定画面)の左メニュー幅を狭める(既定 max-width:30% → 17%) */
#layout #layout-sidebar {
    max-width: 17%;
}
/* ============================================================
   差出人メモ機能(v1.18.0)
   ・返信画面/閲覧画面の「メモ」ボタン
   ・モーダル(一覧+追記+取消)
   ============================================================ */
/* ボタン(返信画面: 宛先をコピー の隣) */
.cf-memo-btn {
    margin-left: 6px; padding: 1px 10px; font-size: 12px; cursor: pointer;
    border: 1px solid #b58900; background: #fff8e1; color: #8a6d00; border-radius: 4px;
}
.cf-memo-btn:hover { background: #ffe9a8; }
/* リンク(閲覧画面: .header-links の要約/ヘッダーの並び) */
/* 閲覧画面「メモ」リンク: 隣の「要約」「ヘッダー」と同じ体裁に合わせる
   (色は .header-links 標準の青を継承。アイコンだけ Elastic と同じ :before 方式で付与) */
.header-links a.cf-memo-link:before {
    content: "\f249";                 /* sticky-note(メモ)。□で出るなら \f044(ペン)/\f075(吹き出し)に */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;                  /* solid字形を出すのに必須 */
    margin-right: 4px;
}

/* モーダル */
#cf-memo-overlay {
    display: none; position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.4); align-items: flex-start; justify-content: center;
}
#cf-memo-overlay.open { display: flex; }
#cf-memo-panel {
    background: #fff; width: 92%; max-width: 560px; margin-top: 8vh;
    border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); overflow: hidden;
    display: flex; flex-direction: column; max-height: 80vh;
}
.cf-memo-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #f5f2e8; border-bottom: 1px solid #e0d9c5; }
.cf-memo-title { font-weight: bold; color: #8a6d00; }
.cf-memo-email { flex: 1; font-size: 13px; color: #333; word-break: break-all; }
.cf-memo-close { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #888; }
.cf-memo-close:hover { color: #333; }
.cf-memo-bwt { padding: 8px 16px; background: #fff3cd; border-bottom: 1px solid #f0e0a0; font-size: 13px; }
.cf-memo-bwt a { color: #b02a37; font-weight: bold; }
.cf-memo-list { flex: 1; overflow-y: auto; padding: 12px 16px; }
.cf-memo-empty { color: #999; font-size: 13px; padding: 8px 0; }
.cf-memo-item { border: 1px solid #eee; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; background: #fafafa; }
.cf-memo-body { font-size: 14px; color: #222; line-height: 1.6; white-space: normal; }
.cf-memo-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11px; color: #888; }
.cf-memo-who { font-weight: bold; color: #555; }
.cf-memo-at { flex: 1; }
.cf-memo-cancel { border: 1px solid #dc3545; background: #fff; color: #dc3545; border-radius: 4px; font-size: 11px; padding: 1px 8px; cursor: pointer; }
.cf-memo-cancel:hover { background: #dc3545; color: #fff; }
.cf-memo-add { border-top: 1px solid #eee; padding: 10px 16px; background: #fff; }
.cf-memo-input { width: 100%; box-sizing: border-box; font-size: 14px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }
.cf-memo-add-row { text-align: right; margin-top: 6px; }
.cf-memo-save { border: 1px solid #b58900; background: #fff8e1; color: #8a6d00; border-radius: 4px; padding: 4px 16px; font-weight: bold; cursor: pointer; }
.cf-memo-save:hover { background: #ffe9a8; }
.cf-memo-save:disabled { opacity: 0.5; cursor: default; }