/* 顧客管理テーブル：見出し＆中身をセンタリング */
#view-customers thead th {
    text-align: center;
    vertical-align: middle;
}

#view-customers tbody td {
    text-align: center;
    vertical-align: middle;
}

#view-delivery-status thead th,
#view-delivery-status tbody td {
    text-align: center;
    vertical-align: middle;
}

#view-delivery-status .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

#view-customers .pagination .page-link{
    color: var(--primary-color);
    border-color: var(--primary-color);
}

#view-customers .pagination .page-link:hover{
    background: var(--accent-color);
    color: var(--primary-color);
}

#view-customers .pagination .page-item.active .page-link{
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

    :root {
        --primary-color: #4D907F;
        /* ヘッダー/アクティブ/アクセント */
        --primary-hover: #3F7D6F;
        /* hover */
        --accent-color: #EAF5F1;
        /* 薄い面 */
        --light-bg: #E9F6F1;
        /* hover背景など */
    }


    body {
        background-color: #f4f6f9;
        font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
        transition: background .3s;
    }

    body,
    input,
    select,
    textarea,
    button,
    .btn,
    .nav,
    .table,
    .list-group,
    .accordion,
    .dropdown-menu,
    .modal,
    .badge,
    #mailBody,
    .wysiwyg-editor {
        font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
    }

    #mailBodyEditor,
    .sig-editor,
    [contenteditable="true"] {
        font-family: inherit;
    }

    .bi {
        font-family: bootstrap-icons !important;
    }

    .main-card {
        width: min(1600px, calc(100% - 40px));
        margin: 30px auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 25px rgba(0, 0, 0, .08);
        overflow: hidden;
    }

    /* widen inner containers to match expanded main-card */
    .main-card .container{ max-width: 100% !important; }


    .app-header {
        background-color: var(--primary-color);
        color: #fff;
        padding: 15px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color .5s;
    }

    .app-title {
        font-weight: 700;
        font-size: 20px;
        margin: 0;
    }

    /* Gemini バッジ：ローディング演出は下部の sparkle 定義で統一 */

    .nav-tabs .nav-link {
        color: #555;
        font-weight: 700;
        border: none;
        padding: 15px 20px;
    }

    .nav-tabs .nav-link.active {
        color: var(--primary-color);
        border-bottom: 3px solid var(--primary-color);
        background: transparent;
    }

    .btn-theme {
        background-color: var(--primary-color);
        color: #fff;
        border: none;
    }

    .btn-theme:hover {
        background-color: var(--primary-hover);
        color: #fff;
    }

    .btn-outline-theme {
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
        background: #fff;
    }

    .btn-outline-theme:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    .control-panel {
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
        height: 100%;
        min-height: 600px;
    }

    .drop-zone {
        border: 2px dashed #cbd5e0;
        border-radius: 8px;
        padding: 30px 10px;
        text-align: center;
        color: #6c757d;
        cursor: pointer;
        transition: .3s;
        background: #fff;
    }

    .drop-zone:hover {
        border-color: var(--primary-color);
        background-color: var(--light-bg);
        color: var(--primary-color);
    }

    .ai-panel {
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    }

    .btn-ai {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border: none;
        width: 100%;
        font-weight: 700;
        min-height: 56px;
        font-size: 1.05rem;
        border-radius: 12px;
    }

    .btn-ai:hover {
        opacity: .9;
        color: #fff;
        transform: none;
        box-shadow: 0 0 0 3px rgba(118, 75, 162, .18), 0 10px 24px rgba(118, 75, 162, .25);
    }

    .btn-ai:disabled {
        background: #ccc;
        transform: none;
    }

    .editor-label {
        font-size: .85rem;
        font-weight: 700;
        color: #6c757d;
        margin-bottom: 5px;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .1);
    }

    .theme-dot {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        display: inline-block;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, .12);
    }

    .list-group-item.is-selected {
        border-left: 4px solid var(--primary-color);
        background: rgba(0, 0, 0, .02);
        font-weight: 600;
    }

    /* CRMテーブル：横スクロール＆列幅調整 */
    #view-customers .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #view-customers table {
        table-layout: fixed;
        width: 100%;
        min-width: 1200px;
    }

    #view-customers th,
    #view-customers td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* ヘッダーにリサイズハンドル */
    #view-customers th[data-col] {
        position: relative;
    }

    .col-resizer {
        position: absolute;
        top: 0;
        right: -4px;
        width: 12px;
        height: 100%;
        cursor: col-resize;
        user-select: none;
        touch-action: none;
        z-index: 2;
    }

    #view-customers th[data-col]:hover .col-resizer {
        background: rgba(13, 44, 86, .10);
    }

    .col-resizer::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: rgba(13, 44, 86, .35);
    }

    /* ===== Login Modal UI Upgrade ===== */
    #loginModal .modal-content {
        border: 0;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    }

    #loginModal .modal-header {
        border: 0;
        padding: 18px 20px;
        background: linear-gradient(135deg, var(--primary-color), #102c55 60%, #1f3d74);
        color: #fff;
    }

    #loginModal .modal-title {
        font-weight: 800;
        letter-spacing: .02em;
    }

    #loginModal .modal-body {
        padding: 18px 20px 8px;
        background: radial-gradient(1200px 400px at 20% 0%, rgba(13, 44, 86, .10), transparent 60%), #fff;
    }

    #loginModal .modal-footer {
        border: 0;
        padding: 12px 20px 18px;
        background: #fff;
    }

    #loginModal .form-label {
        font-size: .85rem;
        font-weight: 700;
        color: #5a6676;
    }

    #loginModal .input-group-text {
        background: #f4f6f9;
        border-color: #e5e9f0;
    }

    #loginModal .form-control {
        border-color: #e5e9f0;
    }

    #loginModal .form-control:focus {
        border-color: rgba(13, 44, 86, .45);
        box-shadow: 0 0 0 .2rem rgba(13, 44, 86, .12);
    }

    #loginModal .login-brand {
        font-size: 12px;
        opacity: .9;
    }

    #loginModal .login-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }

    #loginModal .login-link {
        font-size: 12px;
        color: #6c757d;
        text-decoration: none;
    }

    #loginModal .login-link:hover {
        text-decoration: underline;
    }

    /* チェックボックス見やすく */
    #view-customers .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
        border: 2px solid rgba(13, 44, 86, .45);
        background-color: #fff;
        cursor: pointer;
    }

    #view-customers .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    #view-customers .form-check-input:focus {
        box-shadow: 0 0 0 .2rem rgba(13, 44, 86, .20);
    }

    #view-customers th[data-col="select"],
    #view-customers td[data-col="select"] {
        text-align: center;
    }

    /* 操作列（編集/削除）を中央寄せ */
    #view-customers td[data-col="actions"] {
        text-align: center !important;
        vertical-align: middle;
        white-space: nowrap;
    }

    /* 署名設定を詰める */
    .sig-card .card-body {
        padding: 1rem;
    }

    .sig-card .text-muted.small {
        margin-bottom: .5rem !important;
    }

    .sig-block {
        margin-bottom: .75rem !important;
    }

    /* ツールバーをコンパクトに */
    .sig-toolbar {
        gap: .25rem;
        flex-wrap: wrap;
    }

    .sig-toolbar .btn {
        padding: .25rem .5rem;
    }

    .sig-toolbar .form-select,
    .sig-toolbar .form-control-color {
        height: calc(1.5em + .5rem + 2px);
    }

    /* 編集枠：大きすぎる場合に少し圧縮（必要なら 140→180 等に調整） */
    .sig-editor {
        min-height: 160px !important;
        white-space: pre-wrap;
        background: #fff;
    }

    /* 署名エディタ：ツールバーを横並び・折り返しにする */
    .sig-toolbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .25rem;
    }

    /* ボタンが縦に伸びるのを防ぐ */
    .sig-toolbar .btn {
        width: auto !important;
        min-width: 2.25rem;
        padding: .25rem .5rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* アイコンだけボタンを見やすく */
    .sig-toolbar .btn i {
        font-size: 1rem;
    }

    /* もし btn-group-vertical 等が当たっていても横に矯正 */
    .sig-toolbar.btn-group-vertical {
        flex-direction: row !important;
    }

    #settings-pane h3,
    #settings-pane .section-title {
        margin-top: 0 !important;
    }

    /* 署名ツールバー：正方形ボタン統一 */
    .sig-toolbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .25rem;
    }

    .sig-toolbar .btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        line-height: 1 !important;
    }

    /* 3つ並びの配置ボタンも“分離した正方形”にする */
    .sig-toolbar .btn-group {
        display: flex;
        gap: .25rem;
    }

    .sig-toolbar .btn-group>.btn {
        border-radius: .375rem !important;
        /* btn-group の角丸潰れ対策 */
    }

    /* 文字色（color）も正方形で横に並ぶように */
    .sig-toolbar input[type="color"] {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    /* フォントサイズ選択（小さめ） */
    .sig-toolbar select[data-cmd="fontSize"] {
        height: 40px !important;
        width: 90px !important;
        flex: 0 0 auto !important;
    }

    /* 編集する署名のドロップダウンを小さく */
    .sig-edit-select {
        max-width: 300px;
        min-width: 260px;
    }

    /* ===== 署名ツールバー共通 ===== */
    .sig-toolbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .35rem;
    }

    .sig-toolbtn {
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .6rem;
        flex: 0 0 auto;
        line-height: 1;
    }

    .sig-toolbtn i {
        font-size: 1rem;
    }

    .sig-toolselect {
        height: 36px;
        line-height: 36px;
        padding-top: 0;
        padding-bottom: 0;
        flex: 0 0 auto;
    }

    .sig-size-select {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        text-align: center;
        height: 36px;
    }

    .sig-font-select {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
        height: 36px;
    }

    /* 署名設定：フォント/サイズは本文ツールバーと同じ高さに統一 */
    #set-signature .sig-font-select,
    #set-signature .sig-size-select,
    #set-signature .sig-edit-select,
    #set-signature .sig-send-select {
        height: 36px;
    }
    #set-signature .sig-toolbar select[data-cmd="fontSize"] {
        height: 36px !important;
    }

    /* 文字色：パレットアイコン + 現在色を下線で表示 */
    .sig-color-btn {
        position: relative;
        --sig-color: #222;
    }

    .sig-color-btn::after {
        content: "";
        position: absolute;
        left: 7px;
        right: 7px;
        bottom: 6px;
        height: 4px;
        border-radius: 2px;
        background: var(--sig-color);
    }

    /* color input は見せず、ボタンから開く */
    .sig-color-input {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    /* 簡単色選択（スウォッチ） */
    .sig-swatch {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: .6rem;
        border: 1px solid rgba(0, 0, 0, .2);
    }

    /* 編集する署名のドロップダウンを小さく */
    .sig-edit-select {
        max-width: 220px;
    }

    /* ===== 署名：色ピッカーの見た目を消して、パレットボタンで開く ===== */
    .sig-color-input {
        width: 0;
        height: 0;
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }

    /* テキスト送信モード：色関連UIは非表示 */
    .send-format-text .sig-color-btn,
    .send-format-text .sig-swatch {
        display: none !important;
    }


    /* ===== 署名設定：色変更UIは使用しない（署名1/2/3） ===== */
    .sig-card .sig-color-btn,
    .sig-card .sig-color-input,
    .sig-card .sig-swatch,
    .sig-card input[type="color"] {
        display: none !important;
    }


    /* 本文：色ピッカーは見せずにプログラムから開く（display:none は不可） */
    .color-input-hidden {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
        border: 0;
        padding: 0;
    }

    /* ===== 作成＆配信：フォント/送信形式 行の詰め ===== */
.editor-font-row {
    margin-bottom: 0 !important;
}

.editor-label-lg{
  font-size: 1.25rem;
  line-height: 1.4;
}

    /* 送信形式：ドロップダウン幅を狭く */
    .send-format-select {
        max-width: 170px;
    }

/* 送信形式：? ヘルプボタン（ツールチップ） */
.send-format-help {
    width: 22px;
    height: 22px;
    padding: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
}

/* フォント/送信形式：距離を詰める */
.font-send-row {
    justify-content: flex-start !important;
}

/* フォント更新（小さいアイコンボタン） */
.font-refresh-btn.btn.btn-outline-secondary {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border-color: #6c757d !important;
    color: #000 !important;
}
.font-refresh-btn i {
    color: inherit !important;
}


    /* ===== 作成＆配信：本文ツールバー内へ「使用する署名」UIを配置 ===== */
    .sig-inline {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

.sig-inline-select {
        max-width: 170px;
        min-width: 140px;
    }

    #mailBodyToolbar .toolbar-font-group {
        display: flex;
        align-items: center;
        gap: .35rem;
        flex-wrap: nowrap;
    }

    #mailBodyToolbar{
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    #mailBodyToolbar > *{
        flex: 0 0 auto;
    }

#mailBodyToolbar .mail-font-size-select {
        min-width: 72px;
        padding-left: .35rem;
        padding-right: .35rem;
        text-align: center;
        height: 36px;
    }

 #mailBodyToolbar .mail-font-select{
        max-width: 160px;
        height: 36px;
    }

    #toneSelect{
        height: 36px;
    }

    #mailBodyToolbar .toolbar-font-group .editor-label {
        margin-bottom: 0;
    }

    #mailBodyToolbar .body-color-menu {
        position: relative;
    }

    #mailBodyToolbar .color-icon-text{
        font-weight: 800;
        font-size: .9rem;
        line-height: 1;
        color: #000;
        text-decoration: underline;
        text-decoration-color: #1e88e5;
        text-underline-offset: 2px;
    }

    #mailBodyToolbar .body-color-menu .color-pop {
        position: absolute;
        top: calc(100% + 6px);
        left: auto;
        right: 0;
        display: none;
        grid-template-columns: repeat(7, 26px);
        gap: .5rem;
        padding: .6rem .7rem;
        border-radius: .7rem;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
        z-index: 20;
    }

    #mailBodyToolbar .body-color-menu.open .color-pop {
        display: grid;
    }

    #mailBodyToolbar .color-swatch {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, .2);
        padding: 0;
    }

    .sig-edit-wrap{
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
    }

    .sig-edit-label{
        display: block;
        height: 36px;
        line-height: 36px;
    }

.sig-auto-switch{
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  justify-content: flex-start;
  padding-left: 0;
}
.sig-auto-switch .form-check-input{
  margin-top: 0;
  margin-left: 0;
}

.sig-auto-help{
  margin-bottom: .75rem;
}

.signature-preview-row{
  --bs-gutter-x: .8rem;
  margin-left: 0;
  margin-right: 0;
}
.signature-preview-col{
  padding-left: 0;
  padding-right: .4rem;
}
.signature-preview-col:last-child{
  padding-right: 0;
}
.signature-preview-box{
  min-height: 290px;
  max-height: none;
  overflow-y: visible;
  white-space: pre-wrap;
}

.signature-html-editor{
  min-height: 200px;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  background: #fff;
}

.signature-editor-toolbar .color-icon-text{
  font-weight: 800;
  font-size: .9rem;
  line-height: 1;
  color: #000;
  text-decoration: underline;
  text-decoration-color: #1e88e5;
  text-underline-offset: 2px;
}
.signature-editor-toolbar .sig-tool-btn{
  border: 0;
  background: transparent;
  padding: .2rem .35rem;
  color: #1f2a37;
}
.signature-editor-toolbar .sig-tool-btn:hover{
  background: rgba(15, 23, 42, 0.06);
  border-radius: 6px;
}
.signature-editor-toolbar .sig-tool-btn.active{
  background: rgba(15, 23, 42, 0.12);
  border-radius: 6px;
}
.signature-editor-toolbar .sig-tool-btn:focus{
  box-shadow: none;
}
.signature-editor-toolbar .sig-toolbar-sep{
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #cbd5e1;
  margin: 0 .35rem;
  align-self: center;
}
.signature-color-menu{
  position: relative;
}
.signature-color-menu .color-pop{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: none;
  grid-template-columns: repeat(7, 26px);
  gap: .5rem;
  padding: .6rem .7rem;
  border-radius: .7rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
  z-index: 20;
}
.signature-color-menu.open .color-pop{
  display: grid;
}
.signature-color-menu .color-swatch{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .2);
  padding: 0;
}

    .sig-edit-line{
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        flex-wrap: nowrap;
    }

    .sig-edit-field{
        position: relative;
        min-width: 180px;
    }

    .sig-edit-wrap .sig-edit-rename{
        color: #495057;
    }

    .sig-edit-wrap .sig-edit-input{
        position: absolute;
        inset: 0;
        display: none;
        z-index: 3;
    }

    .sig-edit-wrap.is-editing .sig-edit-input{
        display: block;
    }

    .sig-edit-wrap.is-editing select{
        opacity: 0;
        pointer-events: none;
    }

    .send-format-text #mailBodyToolbar .body-color-menu {
        display: none !important;
    }

    @media (max-width: 768px) {
        .sig-inline {
            width: 100%;
            margin-left: 0;
            justify-content: flex-start;
        }

        .sig-inline-select {
            min-width: 160px;
        }
    }

    /* =========================================================
   Toolbar icon buttons: 枠（ボーダー）をなくす
   - 本文ツールバー (#mailBodyToolbar)
   - 署名ツールバー (.sig-toolbar) ※ある場合
   ========================================================= */
    #mailBodyToolbar .btn.btn-outline-secondary,
    .sig-toolbar .btn.btn-outline-secondary {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* hover（押せるときだけ） */
    #mailBodyToolbar .btn.btn-outline-secondary:hover:not(:disabled),
    .sig-toolbar .btn.btn-outline-secondary:hover:not(:disabled) {
        background: rgba(0, 0, 0, 0.06) !important;
    }

    /* active（JSが .active を付けるタイプに対応） */
    #mailBodyToolbar .btn.btn-outline-secondary.active,
    .sig-toolbar .btn.btn-outline-secondary.active {
        /* var(--primary-color) が定義されていれば、それに寄せて“選択中”を表現 */
        background: color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
        color: var(--primary-color) !important;
    }

    /* active 時にアイコン色も追従 */
    #mailBodyToolbar .btn.btn-outline-secondary.active i,
    .sig-toolbar .btn.btn-outline-secondary.active i {
        color: inherit !important;
    }

    /* =========================================================
   Toolbar icon buttons: 選択状態（active）を分かりやすくする
   ========================================================= */
    #mailBodyToolbar .btn.active,
    #mailBodyToolbar .btn[aria-pressed="true"] {
        border: none !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.08) !important;
        color: var(--primary-color, #2f8f7d) !important;
    }

    #mailBodyToolbar .btn.active i,
    #mailBodyToolbar .btn[aria-pressed="true"] i {
        color: inherit !important;
    }


    /* =========================================================
   AI文面チェック：☆アイコンをカラフルに
   ========================================================= */
    #btnAiCheck i {
        background: linear-gradient(90deg, #ff4d4d, #ffb84d, #4dd2ff, #8b5cff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    #btnAiCheck {
        font-weight: 700;
    }

    /* =========================================================
   Green Theme Override (screen.png like)
   追加: 既存ロジック/構造は変更しない
========================================================= */

/* 全体背景 */
body {
  background-color: #F3FAF7;
}

/* 外枠カードを柔らかく */
.main-card {
  border-radius: 22px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .07);
}

/* ヘッダー（緑） */
.app-header {
  background: var(--primary-color);
  padding: 18px 28px;
}

/* ヘッダー右上のバッジ＆ログアウトを “ピル” 化（枠を角丸に、主張を柔らかく） */
.app-header .badge,
.app-header #btnLogout {
  border-radius: 999px !important;
}

/* badge は白背景→半透明の白に寄せ、文字は白寄せ */
.app-header .badge {
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff !important;
}

/* ログアウトボタンも同系 */
.app-header #btnLogout {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}
.app-header #btnLogout:hover {
  background: rgba(255, 255, 255, .18);
}

/* タブ：枠をなくす／選択中に色（＝選択中アイコンも同色になる） */
.nav-tabs {
  border-bottom: none !important;
  background: transparent;
}
.nav-tabs .nav-link {
  border: none !important;              /* “枠” を消す */
  background: transparent !important;
  color: rgba(0, 0, 0, .55);
  font-weight: 700;
  padding: 14px 18px;
}
.nav-tabs .nav-link:hover {
  color: rgba(0, 0, 0, .72);
}
.nav-tabs .nav-link.active {
  color: var(--primary-color) !important;   /* 選択中の文字・アイコンに色 */
  border-bottom: 3px solid var(--primary-color) !important;
}

/* Settings sub-tabs: Windows-like tabs */
#settingsSubTabs{
  border-bottom: 1px solid #cfd6de;
  gap: 6px;
}
#settingsSubTabs .nav-link{
  color: #45505c;
  font-weight: 700;
  border: 1px solid #cfd6de !important;
  border-bottom: none !important;
  background: #eef1f5 !important;
  border-radius: 6px 6px 0 0;
  padding: 8px 14px;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
#settingsSubTabs .nav-link:hover{
  color: #1f2937;
}
#settingsSubTabs .nav-link.active{
  color: #111827 !important;
  background: #ffffff !important;
  border-color: #b8c1cc !important;
  box-shadow: 0 -1px 0 #ffffff inset;
  position: relative;
  top: 1px;
}

/* 左パネル/右パネルの面を柔らかく */
.control-panel {
  background: #F7FBF9;
}

/* “カード感” を統一（顧客管理/設定も同様に効く） */
#editor-pane .ai-panel,
#crm-pane .card,
#settings-pane .card,
#editor-pane .card {
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
  border: 1px solid rgba(0, 0, 0, .04);
}

/* PDF ドロップゾーン（screen.png 寄せ） */
.drop-zone {
  border-radius: 18px;
  border: 2px dashed rgba(77, 144, 127, .35);
  background: #F7FBF9;
}
.drop-zone:hover {
  border-color: var(--primary-color);
  background: var(--light-bg);
}

/* PDF アイコン：枠（ボタンっぽさ）を出さず、淡い丸背景だけ */
.drop-zone i.bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(77, 144, 127, .14);
  color: var(--primary-color);
}

/* Bootstrap primary を緑に統一（顧客管理/設定の主要ボタンも同テーマに） */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

/* フォーカスリングも緑寄せ */
.form-control:focus,
.form-select:focus {
  border-color: rgba(77, 144, 127, .65) !important;
  box-shadow: 0 0 0 .2rem rgba(77, 144, 127, .18) !important;
}

/* 設定ツリーの選択表現を緑寄せ（既存 is-selected を活かす） */
.list-group-item.is-selected {
  border-left-color: var(--primary-color) !important;
  background: rgba(77, 144, 127, .08) !important;
}
#headerLogo{
  height: 60px;          /* ここを文字サイズより大きく */
  width: auto;
  vertical-align: middle;
  margin-right: 10px;
}

.appTitle{
  vertical-align: middle;
}

/* ==== Groups & Schedule additions ==== */
#deliveryGroupCheckboxes { max-width: 520px; }

#schedule-pane h4 { letter-spacing: 0.02em; }

#groupTableBody .group-name-input { min-width: 200px; }
#groupTableBody .group-schedule-select { min-width: 180px; }

#scheduleTableBody td { vertical-align: middle; }
#scheduleTableBody .btn { line-height: 1.2; }

/* 予約送信表示（ボタンラベル変更はui.js側） */
.reservation-select-box {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  --row-height: 30px;
  max-height: calc(var(--row-height) * 10);
  overflow-y: auto;
  background: #fff;
}
.reservation-select-box .form-check {
  margin-bottom: 6px;
}
.reservation-select-box .form-check:last-child {
  margin-bottom: 0;
}

.schedule-section {
  border: 1px solid #e6ebf1;
  border-radius: 12px;
  padding: 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.schedule-section .section-label {
  font-weight: 700;
  color: #3b4450;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
.reservation-section {
  background: linear-gradient(180deg, #f3f6fb 0%, #ffffff 100%);
}

@keyframes btnAttentionPulse {
  0% { box-shadow: 0 0 0 rgba(255, 149, 0, 0.0); opacity: 1; }
  50% { box-shadow: 0 0 0.8rem rgba(255, 149, 0, 0.35); opacity: 0.85; }
  100% { box-shadow: 0 0 0 rgba(255, 149, 0, 0.0); opacity: 1; }
}
.btn-attention {
  background-color: #ff9500 !important;
  border-color: #ff9500 !important;
  color: #fff !important;
  animation: btnAttentionPulse 2.4s ease-in-out infinite;
}
.btn-attention:hover {
  background-color: #ea8c00 !important;
  border-color: #ea8c00 !important;
  color: #fff !important;
}

.group-member-select-box {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  --row-height: 28px;
  height: calc(var(--row-height) * 10);
  max-height: calc(var(--row-height) * 10);
  overflow-y: auto;
  background: #fff;
}
.group-member-select-box .form-check {
  margin-bottom: 4px;
  font-size: 0.92rem;
  line-height: 1.3;
}
.group-member-select-box .form-check:last-child {
  margin-bottom: 0;
}

.group-check-list {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  --row-height: 38px;
  max-height: calc(var(--row-height) * 8);
  overflow-y: auto;
  background: #fff;
}
.group-check-list .form-check {
  margin-bottom: 6px;
}
.group-check-list .form-check:last-child {
  margin-bottom: 0;
}

.email-multi-group .email-input-row .btn-remove-email{
  min-width: 40px;
}

.choice-tiles{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}
.choice-tile{
  display: block;
  cursor: pointer;
}
.choice-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-body{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.choice-title{
  font-weight: 700;
}
.choice-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.choice-icon{
  font-size: 1.35rem;
  flex-shrink: 0;
}
.choice-sub{
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.2;
  height: 2.4em;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.choice-tile:hover .choice-body{
  border-color: #7ec9a6;
  box-shadow: 0 6px 16px rgba(30, 60, 40, 0.08);
  transform: translateY(-1px);
}
.choice-input:checked + .choice-body{
  border-color: #7ec9a6;
  box-shadow: 0 0 0 3px rgba(126, 201, 166, 0.18);
  background: #f6fffb;
}
.send-target-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
}
.send-target-grid > div{
  min-width: 0;
}
@media (max-width: 768px){
  .send-target-grid{
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px){
  .choice-tiles{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- UI FIX: hide status filter next to search (keep element for JS compatibility) --- */
#statusFilterSelect,
label[for="statusFilterSelect"],
#statusFilterSelectWrap { 
  display: none !important;
}

/* --- UI FIX: customers table column resize --- */
#customersTable { table-layout: fixed; width: 100%; }
#customersTable thead th.resizable { position: relative; }
#customersTable thead th .col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}
/* ===== 顧客管理：列幅リサイズを安定させる ===== */
#customersTable {
  table-layout: fixed;
}
#customersTable th, #customersTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#customersTable th[data-col="actions"],
#customersTable td[data-col="actions"]{
  overflow: visible;
  white-space: nowrap;
}
#customersTable td[data-col="status"]{
  white-space: normal;
}

/* CRM status lamps */
.status-lamps{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.status-lamp{
  -webkit-appearance: none;
  appearance: none;
  border:1px solid #cfd8dc;
  background:#f3f4f6;
  color:#7a7a7a;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1.2;
  opacity:.55;
  cursor:default;
}
.status-lamp.is-on{
  opacity:1;
  color:#fff;
  border-color:transparent;
}
.status-lamp.is-unsent.is-on{ background:#43a047; }
.status-lamp.is-sent.is-on{ background:#1e88e5; }
.status-lamp.is-error.is-on{ background:#e53935; }
.status-lamp.is-click.is-on{ background:#fb8c00; }
#customersTable thead th .col-resizer{
  /* 既存定義に加えて視認性を少し上げる */
  background: transparent;
}
#customersTable thead th.resizable:hover .col-resizer{
  background: rgba(0,0,0,.06);
}

/* ===== 設定ツリー：選択色をテーマ色に追従 ===== */
#settingsTreeAcc .list-group-item.active,
#settingsTreeAcc .list-group-item.active:focus,
#settingsTreeAcc .list-group-item.active:hover{
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}
#settingsTreeAcc .list-group-item:not(.active){
  background-color: transparent;
  color: #000;
}
#settingsTreeAcc #navUserMgmt{
  background-color: transparent !important;
  color: #000 !important;
}
#settingsTreeAcc .list-group-item:focus{
  background-color: var(--primary-color) !important;
  color: #fff !important;
}
#settingsTreeAcc .list-group-item:hover{
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

#settingsTreeAcc .accordion-button:not(.collapsed){
  background-color: var(--section-header-bg);
  color: var(--primary-color);
  box-shadow: none;
}

#settingsTreeAcc .accordion-button{
  box-shadow: none;
}

#settingsTreeAcc .accordion-button:focus{
  box-shadow: none;
  border-color: transparent;
}

#settingsTreeAcc .accordion-item{
  border-width: 2px;
}

/* Settings: column visibility checkboxes */
#set-customer-columns .form-check-input{
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid rgba(13, 44, 86, .45);
  background-color: #fff;
  cursor: pointer;
}
#set-customer-columns .form-check-input:checked{
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
#set-customer-columns .form-check-input:focus{
  box-shadow: 0 0 0 .2rem rgba(13, 44, 86, .20);
}


/* Admin user create button height (align with adjacent dropdown) */
#newUserRole {
  min-height: 38px;
}
#btnCreateUser {
  min-height: 38px;
}

/* =========================
   v4: Settings UI improvements
   - unify card width after signature settings
   - attention animation for Save button when settings changed
   ========================= */

/* 「署名設定」の見た目に合わせ、設定配下のカード幅を統一（ユーザー管理以下も同一幅） */
#view-settings .card.border-0.shadow-sm.mt-3 {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* 設定保存ボタン：変更がある時に点滅（目立つ色） */
#btnSettingsSave.btn-save-attn {
  background: #ff9500 !important;
  border-color: #ff9500 !important;
  color: #ffffff !important;
  animation: btnSavePulse 2.4s ease-in-out infinite;
}

@keyframes btnSavePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.00); }
  50%  { box-shadow: 0 0 0 12px rgba(255, 149, 0, 0.28); }
  100% { box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.00); }
}

/* 顧客検索の見やすさ */
.customer-search-group .input-group-text {
  background: #fff;
}

/* =========================
   v5: Settings card width alignment + section separators
   ========================= */

/* 設定配下カードの幅を統一（署名設定と同一の幅感に揃える） */
#view-settings .card.border-0.shadow-sm.mt-3{
  width: 100%;
  max-width: 1100px;     /* 署名設定に合わせる基準幅（必要なら後で微調整可能） */
  margin-left: auto;
  margin-right: auto;
}

/* セクションの区切りをテーマ色で分かりやすく（左ライン＋上部ライン） */
#view-settings .card.border-0.shadow-sm.mt-3{
  border: 1px solid rgba(0,0,0,.08) !important;
  border-left: 10px solid var(--primary-color) !important;
}

/* 見出しを少し強調（区切り感） */
#view-settings .card.border-0.shadow-sm.mt-3 .mb-2.fw-bold.text-secondary{
  padding-bottom: .35rem;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}

/* =========================
   v6: Section background tint (theme accent), not left line
   ========================= */

/* 設定セクションのカード背景を薄いテーマ色に */
#view-settings .card.border-0.shadow-sm.mt-3{
  background: var(--accent-color) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-left: 1px solid rgba(0,0,0,.10) !important; /* v5の左ラインを無効化 */
}

/* カード内の入力は読みやすく白背景に戻す（Bootstrapに合わせる） */
#view-settings .card.border-0.shadow-sm.mt-3 .form-control,
#view-settings .card.border-0.shadow-sm.mt-3 .form-select{
  background: #fff;
}

/* =========================
   v7: Signature block visibility by CSS (final authority)
   ========================= */
/* 署名ブロックは基本非表示 */
#set-signature .sig-block[data-sig]{ display:none; }
/* 選択中だけ表示（JSが data-active を付与） */
#set-signature .sig-block[data-sig].sig-active{ display:block; }

/* =========================
   v7a: Signature block visibility FORCE (override any other CSS)
   ========================= */
#set-signature .sig-block[data-sig]{ display:none !important; }
#set-signature .sig-block[data-sig].sig-active{ display:block !important; }

/* hidden 属性が残っても確実に消す（念のため） */
#set-signature .sig-block[hidden]{ display:none !important; }

/* =========================
   v7a: Signature block visibility FORCE (override any other CSS)
   ========================= */
#set-signature .sig-block[data-sig]{ display:none !important; }
#set-signature .sig-block[data-sig].sig-active{ display:block !important; }

/* hidden 属性が残っても確実に消す（念のため） */
#set-signature .sig-block[hidden]{ display:none !important; }


/* ===== Settings headings & theme preview ===== */
:root{ --section-header-bg: rgba(77,144,127,0.24); }
.settings-heading{
  background: var(--section-header-bg);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 14px 0 10px;
  font-weight: 700;
}
.theme-chip{
  display:inline-block;
  width:14px; height:14px;
  border-radius:50%;
  margin-left:8px;
  border:1px solid rgba(0,0,0,.15);
  vertical-align:-2px;
}


/* CRM sort order button: compact */
.btn-sort-order{min-width:78px;padding-left:10px;padding-right:10px;}


/* Sort order button height = dropdown height */
#view-customers #sortOrderBtn{
  height: 38px !important;
  padding: 0 12px !important;
  line-height: 38px !important;
}

/* Page size dropdown width narrower */
#view-customers #pageSizeSelect{
  width: 90px !important;
}


/* --- Customers UI tweaks (2026-01-01) --- */
.sort-label-watermark{opacity:0.6;}
.customers-footerbar .footer-spacer{width:140px;}


/* =========================
   UI tweaks (requested)
   ========================= */

/* Customers: make whole table horizontally scrollable by keeping a wider min-width */
.customers-table-wrap #customersTable{
  min-width: 1450px; /* force horizontal scroll instead of squeezing columns */
}

/* Customers: keep sort label aligned with its select */
#view-customers .sort-label-watermark{
  display: inline-block;
  text-align: left;
}

/* Customers: clarify tag filter label */
/* (label text changed in HTML; no extra layout changes) */

/* CRM: delivery/search zones for older-friendly layout */
#view-customers .crm-zone-title{
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
#view-customers .crm-zone-desc{
  color: #6c757d;
  margin-bottom: 12px;
}
#view-customers #sortKeySelect{
  width: 120px !important;
  max-width: 120px !important;
}
#crmTargetZone #deliveryGroupCheckboxes .form-check-label{
  color: #111;
}
.crm-sort-controls{
  justify-content: flex-end;
}
#crmTargetZone .crm-zone-desc{
  color: #6c757d;
  margin-bottom: 10px;
}
#view-customers .crm-filter-stack{
  display: grid;
  gap: 16px;
}
#view-customers .crm-filter-section{
  padding: 8px 0;
  border-bottom: 1px solid #eef0f2;
}
#view-customers .crm-filter-section:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
#view-customers .crm-filter-title{
  font-weight: 600;
  margin-bottom: 8px;
}
#view-customers .crm-summary-text{
  font-weight: 600;
  font-size: 1.02rem;
}
#view-customers .crm-table-placeholder{
  background: #ffffff;
}
#view-customers .crm-placeholder-title{
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
#view-customers .crm-placeholder-text{
  color: #6c757d;
}

/* Send target alert above test send button */
.send-target-alert{
  border: 2px solid var(--primary-color);
  background: var(--accent-color);
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
  max-width: 100%;
}
.send-target-alert .fw-semibold{
  letter-spacing: 0.02em;
}
.send-target-alert .small{
  font-weight: 700;
}

/* Delivery status: summary emphasis */
.delivery-panel-large{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
}
.delivery-panel-large .card-body{
  padding: 20px 24px;
}
#view-delivery-status{
  padding-bottom: 24px;
}
#deliveryTableZone .card{
  margin-bottom: 16px;
}
#deliverySummaryCard{
  border: 2px solid var(--primary-color);
  background: var(--accent-color);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
#deliverySummaryCard .crm-summary-text{
  font-weight: 800;
  color: #0d2c56;
}

/* Delivery status: action buttons */
.delivery-action-stack{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.delivery-square-btn{
  width: 96px;
  height: 96px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.delivery-square-btn .delivery-btn-label{
  font-weight: 700;
}

/* App: allow natural vertical scrolling when content grows */
html, body { overflow-y: auto; }
.main-card { overflow: visible; }

/* Settings: password change button narrower */
#btnChangeMyPw{ width: 120px; }

/* Settings: theme select narrower */
#themeSelect.theme-select-narrow{ max-width: 260px; width: 260px; }
#themeSelect{
  font-weight: 700;
}

/* Log management */
.log-filter-grid{
  display: grid;
  gap: 8px 16px;
}
@media (min-width: 768px){
  .log-filter-grid{
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}
.log-level-error{
  color: #dc2626;
  font-weight: 700;
}
.log-level-info{
  color: #2563eb;
  font-weight: 700;
}

/* Settings: admin user list center align */
#usersTbody td, #usersTbody th { text-align: center; }
#usersTbody td:last-child{ text-align: center !important; }

/* Buttons: default to theme color with white text */
.btn.btn-outline-secondary,
.btn.btn-outline-primary,
.btn.btn-outline-light,
.btn.btn-outline-theme,
.btn.btn-secondary,
.btn.btn-primary,
.btn.btn-ai{
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}
.btn.btn-outline-secondary:hover,
.btn.btn-outline-primary:hover,
.btn.btn-outline-light:hover,
.btn.btn-outline-theme:hover,
.btn.btn-secondary:hover,
.btn.btn-primary:hover,
.btn.btn-ai:hover{
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}

/* Keep "theme" class buttons consistent */
.btn-theme{
  color:#fff !important;
}

/* Important buttons: red with white text */
.btn.btn-danger,
.btn.btn-outline-danger{
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}
.btn.btn-danger:hover,
.btn.btn-outline-danger:hover{
  background-color: #b02a37 !important;
  border-color: #b02a37 !important;
  color: #fff !important;
}



/* =========================
   Customers: Search (big frame) + mid frames
   ========================= */
.cust-bigframe-title{
  font-weight: 700;
  margin-bottom: .5rem;
}
.cust-search-grid{
  display: grid;
  gap: .75rem;
}
@media (min-width: 992px){
  .cust-search-grid{
    grid-template-columns: 1fr 360px;
    align-items: start;
  }
  .cust-midframe-tags{
    grid-column: 1 / -1;
  }
}
.cust-midframe{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .75rem;
  padding: .75rem;
  background: rgba(255,255,255,.7);
}
.cust-midframe-title{
  font-weight: 600;
  margin-bottom: .5rem;
}

/* Settings: remove extra gap above signature card */
.sig-card{ margin-top: 0 !important; }

/* Settings: align left tree and right content top */
#settings-pane .row.g-3{
  align-items: flex-start;
}
#settings-pane .col-12.col-md-3.col-lg-2,
#settings-pane .col-12.col-md-9.col-lg-10{
  padding-top: 0;
}
#settingsContent > .card:first-child{
  margin-top: 0 !important;
}

/* === v10 requested tweaks (scoped, minimal) === */

/* Customer: new customer button must be theme filled with white text */
#btnOpenCreateCustomer.btn-theme{
  color:#fff !important;
}

/* Settings: password change (self) eye toggle should be outline/no-fill with black icon */
#set-password .pw-toggle{
  background: transparent !important;
  color: #000 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#loginModal #btnTogglePass{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #000 !important;
}
#set-password .pw-toggle i{
  color:#000 !important;
}

/* Settings management: export/import should be outline with black text */
#btnSettingsExport, #btnSettingsImport{
  background: transparent !important;
  color:#000 !important;
  border-color:#000 !important;
}
#btnSettingsExport i, #btnSettingsImport i{
  color:#000 !important;
}

/* Tag management: registered tag buttons (rendered in #tagManageList) should be outline with black text */
#tagManageList .btn{
  background: transparent !important;
  color:#000 !important;
  border-color:#000 !important;
}
#tagManageList .btn i{ color: inherit; }
#tagManageList .text-danger{ color: #dc3545 !important; }

/* Keep destructive buttons red (do not override outline-danger) */
#tagManageList .btn.btn-outline-danger,
#btnSettingsReset.btn-outline-danger{
  color: inherit !important;
  border-color: inherit !important;
}


/* =========================
   v11: Settings/Audit & Composer button/icon color tweaks (requested)
   - Do NOT affect other buttons
   ========================= */

/* 設定管理: 初期値に戻す（赤塗り＋白文字はBootstrap既定 btn-danger で担保） */
#btnSettingsReset.btn-danger{
  color:#fff !important;
}

/* ログ管理（監査ログ）: 更新 / ログCSV出力 = 塗りつぶし無し＋黒 */
#btnRefreshAuditLog,
#btnExportAuditLog{
  background: transparent !important;
  color:#000 !important;
  border-color:#000 !important;
}
#btnRefreshAuditLog i,
#btnExportAuditLog i{
  color:#000 !important;
}

/* 本文編集ツールバー（右寄せ/中央など）アイコンを黒に */
#mailBodyToolbar .btn{
  background: transparent !important;
  color:#000 !important;
  border-color:#000 !important;
}
#mailBodyToolbar .btn i{
  color:#000 !important;
}

/* 編集・確認 右下の送信ボタン：文字色（アイコン含む）黒 */
#sendBtn{
  background: linear-gradient(135deg, #1e88e5, #00bcd4) !important;
  color:#fff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(30, 136, 229, .28);
}
#sendBtn i, #sendBtn span{
  color:#fff !important;
}

/* AI文面チェック：塗りつぶし無し＋文字色黒 */
#btnAiCheck{
  background: transparent !important;
  color:#000 !important;
  border-color:#000 !important;
}
#btnAiCheck i, #btnAiCheck span{
  color:#000 !important;
}

/* === v12 tweaks (requested) === */

/* Edit & Send: make AI check star icon colorful */
#btnAiCheck i.bi-stars, #btnAiCheck i.bi.bi-stars{
  background: linear-gradient(45deg, #ff4d4d, #ffa94d, #ffd43b, #69db7c, #4dabf7, #9775fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Customers: outline buttons with black text (no fill) */
#btnTemplateDownload, #btnExportCsv, #btnOpenImport{
  background: transparent !important;
  color: #000 !important;
}
#btnTemplateDownload i, #btnExportCsv i, #btnOpenImport i{
  color: #000 !important;
}

/* Customers: tag filter chip buttons should be outline with black text (no fill) */
#tagFilterChips button, #tagFilterChips .btn{
  background: transparent !important;
  color: #000 !important;
}
#tagFilterChips button i, #tagFilterChips .btn i{
  color: #000 !important;
}

/* Settings: make settings-mgmt buttons height match audit log buttons (override btn-sm) */
#set-settings-mgmt .btn.btn-sm{
  padding: 0.375rem 0.75rem !important; /* same as .btn */
  font-size: 1rem !important;
  line-height: 1.5 !important;
  border-radius: 0.375rem !important;
}





/* === v14: Signature toolbar icon color override (requested) === */
#set-signature .sig-toolbar button,
#set-signature .sig-toolbar button i,
#set-signature .sig-toolbar .btn,
#set-signature .sig-toolbar .btn i {
  color: #000 !important;
}

/* Gemini badge sparkle loading effect (FlowA / FlowE unified) */
@property --geminiSpin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.gemini-badge{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gemini-badge::before{
  content:"";
  position:absolute;
  top:0;
  left:-140%;
  width:140%;
  height:100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 191, 255, 0.10),
    rgba(255, 255, 255, 0.55),
    rgba(0, 191, 255, 0.18),
    transparent
  );
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.gemini-badge:hover::before{
  opacity: 1;
  animation: geminiSparkleSlide 0.7s ease;
}

.gemini-badge.is-loading{
  border: 2px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(
      from var(--geminiSpin),
      rgba(0,191,255,0.00),
      rgba(0,191,255,0.75),
      rgba(255,255,255,0.95),
      rgba(0,191,255,0.75),
      rgba(0,191,255,0.00)
    ) border-box;
  box-shadow:
    0 0 0 2px rgba(0,191,255,0.12),
    0 10px 24px rgba(0,191,255,0.18);
  animation:
    geminiPulse 1.1s ease-in-out infinite,
    geminiBorderSpin 1.2s linear infinite;
}

.gemini-badge.is-loading::before{
  opacity: 1;
  animation: geminiSparkleSlide 0.85s linear infinite;
}

@keyframes geminiSparkleSlide{
  0%   { left: -140%; }
  100% { left: 140%; }
}

@keyframes geminiPulse{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes geminiBorderSpin{
  0%   { --geminiSpin: 0deg; }
  100% { --geminiSpin: 360deg; }
}
/* End Gemini badge sparkle loading effect */

/* ===== Realtime monitor (editor) ===== */
#editor-pane .control-panel{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#realtimeMonitor{
  flex: 1 1 auto;
  min-height: 560px;
}

#realtimeMonitor .rt-card{
  padding: .75rem .85rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: .85rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
  min-height: 520px;
  color: #000;
}

#realtimeMonitor .rt-summary{
  margin-bottom: .4rem;
}

#realtimeMonitor .rt-progress{
  color: #000;
  font-weight: 700;
}

#realtimeMonitor .rt-log{
  flex: 1 1 auto;
  min-height: 320px;
  height: 100%;
  overflow-y: auto;
  font-size: .85rem;
  color: #495057;
}

#realtimeMonitor .rt-log-item{
  display: flex;
  gap: .5rem;
  line-height: 1.4;
}

#realtimeMonitor .rt-log-time{
  color: #6c757d;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#realtimeMonitor .rt-log-item.is-ok{
  color: #1e88e5;
}

#realtimeMonitor .rt-log-item.is-error{
  color: #e53935;
}
#realtimeMonitor .rt-log-item.is-warn{
  color: #f59e0b;
}

#editor-pane .col-md-8{
  display: flex;
  flex-direction: column;
}

#editor-pane .editor-main-card{
  flex: 1 1 auto;
}

#mailBody,
#mailBodyEditor{
  min-height: 420px;
}

#mailBodyEditor{
  white-space: pre-wrap;
}

#mailBodyEditor:empty:before{
  content: attr(data-placeholder);
  color: #adb5bd;
}

#mailBodyEditor[contenteditable="false"]{
  background-color: #e9ecef;
}

/* ===== CTA: editor main actions (test send / regenerate) ===== */
.editor-cta-wrap{
  padding: 16px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
}

.editor-cta-wrap .cta-btn{
  min-width: 360px;
  min-height: 56px;
  padding: 0.7rem 1.8rem;
  font-size: 1.05rem;
  border-radius: 12px;
  letter-spacing: 0.01em;
}

.editor-cta-wrap .editor-cta-row{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 768px){
  .editor-cta-wrap .cta-btn{
    width: 100%;
    min-width: 0;
  }
}

/* ===== Test mode toggle emphasis ===== */
.test-mode-toggle{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: transparent;
}

.test-mode-toggle .form-check-input{
  width: 3.2rem;
  height: 1.6rem;
  cursor: pointer;
}

.test-mode-toggle .form-check-input:checked{
  background-color: #1e88e5;
  border-color: #1e88e5;
}

.test-mode-toggle .form-check-label{
  font-size: 1rem;
  font-weight: 700;
}

.test-mode-toggle .form-check-input:checked + .form-check-label{
  color: #1e88e5;
}

/* ===== Updown animation ===== */
.updown {
  animation-name: updown1;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes updown1 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* ===== AI button sizing + rerun gradient ===== */
.ai-btn{
  width: 100%;
  min-height: 56px;
  padding: .5rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-size: 1.05rem;
}

.btn-ai-rerun{
  background: linear-gradient(135deg, #ffb347 0%, #ff7a18 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  border-radius: 12px;
  font-size: 1.05rem;
}
.btn-ai-rerun:hover{
  color: #fff;
  opacity: .92;
  box-shadow: 0 0 0 3px rgba(255, 179, 71, .2), 0 10px 24px rgba(255, 122, 24, .25);
}
.btn-ai-rerun:disabled{
  background: #f1b287;
  color: #fff;
}

.btn.btn-ai{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  border-radius: 12px;
  color: #fff !important;
}
/* =========================
   未保存変更の注意表示（保存ボタンをオレンジ＋ゆっくり点滅）
   app.js は btn-attention を付けるので、それに合わせる
   ========================= */

/* どのボタン種別(btn-primary/outline等)でも確実にオレンジ化する */
button.btn-attention,
.btn.btn-attention {
  background-color: #ff9800 !important;
  border-color: #ff9800 !important;
  color: #ffffff !important;

  /* “ゆっくり点滅” は背景色ではなく glow/brightness を脈動させる（テーマ!importantに負けにくい） */
  animation: btnAttentionPulse 2.8s ease-in-out infinite !important;
}

/* hover時もオレンジ維持 */
button.btn-attention:hover,
.btn.btn-attention:hover {
  background-color: #ff9800 !important;
  border-color: #ff9800 !important;
  color: #ffffff !important;
}

/* 点滅（脈動） */
@keyframes btnAttentionPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.00);
    filter: brightness(1);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 .28rem rgba(255, 152, 0, 0.35);
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
}

/* 動きが苦手な環境では止める */
@media (prefers-reduced-motion: reduce) {
  button.btn-attention,
  .btn.btn-attention {
    animation: none !important;
  }
}

.signature-manager-btn{
  min-width: 130px;
  padding: .45rem 1rem;
  font-size: .95rem;
}

.signature-preview-text{
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Fix: main tabs must not leave inactive panes in layout/click layer --- */
#mainTabContent > .tab-pane { display: none; }
#mainTabContent > .tab-pane.active { display: block; }
#mainTabContent > .tab-pane.fade:not(.show) { display: none; }

/* --- Targets (配信先設定): header row with draft select button --- */
#crmTargetZone .crm-target-headerbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
#crmTargetZone .crm-target-headerbar .crm-zone-title{
  margin: 0;
}

/* --- Fix: nested sub-tabs must not leave inactive panes clickable --- */
#targetsSubTabContent > .tab-pane { display: none; }
#targetsSubTabContent > .tab-pane.active { display: block; }
#targetsSubTabContent > .tab-pane.fade:not(.show) { display: none; }

#reportSubTabContent > .tab-pane { display: none; }
#reportSubTabContent > .tab-pane.active { display: block; }
#reportSubTabContent > .tab-pane.fade:not(.show) { display: none; }

/* --- Compose CTA: place "原稿を保存" next to "テスト送信" --- */
.editor-cta-row{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.editor-cta-actions{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 520px;
  justify-content: flex-end;
}
.editor-cta-actions .cta-btn{
  flex: 1 1 0;
  min-width: 220px;
}
@media (max-width: 768px){
  .editor-cta-actions{
    width: 100%;
  }
}