/* Safariの文字自動縮小（text-size-adjust）を無効化する */
html { -webkit-text-size-adjust: 100%; }

/* Bulma panel-block 左右余白を消す */
.panel-block {
    display: block !important;   /* flex をやめる */
    width: 100% !important;      /* 幅を固定 */
    padding-left: 8px !important;  /* 左右余白を消す */
    padding-right: 8px !important;
}
/* Safariでアプリ全体の横スクロールを禁止 */
html, body {
    overflow-x: hidden;
}
/* base.html: Bulma全体 の container の最大幅制限を解除 */
.container {
    max-width: 100% !important;
}
/* 上部ヘッダーの角丸 0:なくす, 1:つける */
.panel-heading {
    border-radius: 1;
}
/* login.html: ユーザー名・パスワードの入力欄 */
.login-input {
  max-width: 180px;
}

.main-title {
    text-shadow: #54d 2px 0 6px; /* 影ブルー: comment文字影 */
}


/* ---------- ---------- メニュー（2段レイアウト用スタイル）---------- ---------- */
/* メニュー全体を横並びにする親コンテナ */
.menu-container {
    display: flex !important;
    align-items: center;
    gap: 0.5rem; /* メニュー間の間隔 */
    padding: 0.1rem 0.5rem;
}
/* 各メニュー項目のスタイル（上下中央揃え） */
.menu-item,
.menu-item-shares,
.menu-item-orders {
    display: flex;
    flex-direction: column;    /* 上下2段にする */
    align-items: center;       /* 左右中央に揃える */
    justify-content: center;
    padding: 0.2rem 0.6rem;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.menu-item {
    color: #475af2;/* #4a4a4a;*/            /* 通常時の文字・アイコン色 */
}
.menu-item-shares {
    background-color: #5472FF;
    color: #D9EBFB;                         /* 通常時の文字・アイコン色 */
}
.menu-item-orders {
    background-color: #12C9C4;
    color: #9BF9FB;                         /* 通常時の文字・アイコン色 */
}

/* アイコンを大きくする（メイン） */
.menu-item i,
.menu-item-shares i,
.menu-item-orders i {
    font-size: 1.25rem;        /* アイコンの大きさ */
    margin-bottom: 2px;        /* アイコンと文字の間の隙間 */
}
/* 下部のラベルを小さな文字にする */
.menu-label,
.menu-label-shares,
.menu-label-orders {
    font-size: 0.75rem;        /* 小さな文字サイズ (12px相当) */
    line-height: 1.1;
    white-space: nowrap;
}
.menu-label-shares {
    color: #DBFDFF;                         /* 通常時の文字・アイコン色 */
}
.menu-label-orders {
    color: #DBFDFF;                         /* 通常時の文字・アイコン色 */
}

/* ホバー時の背景色変更 */
.menu-item:hover {
    background-color: rgba(79, 70, 229, 0.08);
    color: #5263ff;
}
/* ホバー時の背景色変更 */
.menu-item-shares:hover {
    background-color: #576af9;
}
/* ホバー時の背景色変更 */
.menu-item-orders:hover {
    background-color: #22D9D4;
}

/* 現在選択中のメニューの強調表示 */
.menu-item.is-active-menu {
    color: #4758ff;            /* 選択中の色（Bulmaのlinkカラーなど） */
    font-weight: bold;
    position: relative;        /* 下線の位置基準にするため必要 */
}
/* 現在選択中のメニューの下線のデザイン */
.menu-item.is-active-menu::after {
    content: '';
    position: absolute;
    bottom: 0px;               /* メニュー項目の最下部に配置 */
    left: 15%;                 /* 左右に少し余白を持たせる場合 */
    bottom: -2%;               /* 上下位置を調整 */
    width: 70%;                /* 下線の幅（70%〜100%でお好みで調整可能） */
    height: 2.5px;               /* 下線の太さ */
    background-color: rgba(109, 110, 255, 0.25); /* 下線の色（文字色と合わせる） */
    border-radius: 1.5px;        /* 端を少し丸くする */
}


/* menu.html: メニューの横スクロール */
.scroll-x {
    overflow-x: auto;      /* 横スクロールを許可 */
    white-space: nowrap;   /* 折り返し禁止 */
}
.scroll-x {
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */
}
.scroll-x::-webkit-scrollbar {
    display: none;             /* Chrome/Safari */
}

/* ---------- signup.html ---------- */
/* signup.html 管理者コード・ユーザー名・パスワードの入力欄 */
.signup-input {
  max-width: 180px;
}

/* ---------- visit.html ---------- */
/* visit.html 検索入力欄の✕ボタンが背景色に同化しないようにする処理 */
.delete::before,
.delete::after {
  background-color: #668 !important;   /* ✕の線を薄黒に固定 */
}
.delete:hover::before,
.delete:hover::after {
  background-color: #54d !important;   /* ✕をhover時は青紫に設定 */
}
.delete {
  background-color: transparent !important; /* ✕の背景●をなくす */
}
.delete:hover {
  background-color: transparent !important; /* ✕をhover時も背景●をなくす */
}

/* _visit_list.html 宿題: コメント風・ワイド背景 */
.to_do-wide {
    background-color: #ffe3fa;  /* 薄い紫 */
    padding: 10px 14px;
    border-radius: 10px;
    margin: 8px 2px 16px 2px;
}
/* _visit_list.html 次回行動: コメント風・ワイド背景 */
.next_action-wide {
    background-color: #fffee8;  /* 薄い黄 */
    padding: 10px 14px;
    border-radius: 10px;
    margin: 8px 2px 16px 2px;
}


/* iPhone Safari でタップ後にボタンがグレーアウトが残る問題を解消 */
/* _pagination.htnl 白に見える is-outlined ボタン（偽装白ボタン） */
.fake-white-button {
    background-color: white !important;   /* 白背景に偽装 */
    border-color: #dbdbdb !important;     /* Bulma の通常ボタンと同じ枠線 */
    color: #7a7a7a !important;            /* Bulma の has-text-grey と同じ */
    border-radius: 8px !important;          /* ← 角丸をここで調整 */
}
/* _pagination.htnl タップ時も偽装白ボタンのままにする（Safari 対策） */
.fake-white-button:active,
.fake-white-button:focus {
    background-color: white !important;
    color: #7a7a7a !important;            /* Bulma の has-text-grey と同じ */
    outline: none !important;
}

/* 検索キーワードのハイライト表示用 カスタムフィルタ */
mark {
    background-color: #88ffd6;
    padding: 2px 3px;
    border-radius: 3px;
}


/* ---------- 一覧ページ用 ---------- */
/* 【_db_viewer.html の構造】
      viewer-container（横スクロールの親）
      └ viewer-block（横に並ぶブロック）
          └ viewer-item（縦に2段：ラベル＋本文）
              └ content-scroll（本文だけ横スクロール）
*/

/* _db_viewer_list: 親コンテナ（横スクロールの親） */
.viewer-container {
    overflow-x: auto;       /* 横スクロールを可能にする */
    white-space: nowrap;    /* ブロックを折り返さない */
    scrollbar-width: none;  /* 横スクロールバー非表示(Firefox 専用) */
}

/* _db_viewer_list: 大きいブロック（商談内容 等）*/
.viewer-block-large {
    display: inline-block;  /* 横スクロール内でブロックが横並びになる */
    vertical-align: top;
    width: 360px;           /* ブロック幅：大 */
    margin-right: 5px;
}
/* _db_viewer_list: 通常ブロック（施設名、宿題 等）*/
.viewer-block {
    display: inline-block;  /* 横スクロール内でブロックが横並びになる */
    vertical-align: top;
    width: 270px;           /* ブロック幅：大 */
    margin-right: 5px;
}
/* _db_viewer_list: 中ぐらいブロック（結果/本文）*/
.viewer-block-medium {
    display: inline-block;  /* 横スクロール内でブロックが横並びになる */
    vertical-align: top;
    width: 60px;            /* ブロック幅：中 */
    margin-right: 5px;
}
/* _db_viewer_list: 小さいブロック（編集/削除ボタン） */
.viewer-block-small {
    display: inline-block;  /* 横スクロール内でブロックが横並びになる */
    vertical-align: top;
    width: 32px;            /* ブロック幅：小 */
    margin-right: 5px;
}

/* _db_viewer_list: 縦に2段：ラベル＋本文 */
.viewer-item {
    display: flex;
    flex-direction: column; /* 上下2段構造 */
    text-align: left;       /* ブロック内のテキストを左寄せ */
    min-height: 32px;       /* 上段（商談内容、宿題、次回行動 等）のラベルの高さを揃える */
}

/* _db_viewer_list: 大きいコンテンツ・スクロール（本文だけ横スクロール） */
.content-scroll-large {
    overflow-x: auto;       /* 横スクロールを可能にする */
    max-width: 340px;       /* ブロック幅より少し狭くする */
}
/* _db_viewer_list: コンテンツ・スクロール（本文だけ横スクロール） */
.content-scroll {
    overflow-x: auto;       /* 横スクロールを可能にする */
    max-width: 240px;       /* ブロック幅より少し狭くする */
}
/* _db_viewer_list: スクロールバー非表示（Chrome / Edge / Safari） */
.content-scroll-large::-webkit-scrollbar,
.content-scroll::-webkit-scrollbar {
    display: none;
}
/* _db_viewer_list: スクロールバー非表示（Firefox） */
.content-scroll-large,
.content-scroll {
    scrollbar-width: none;
}

/* フォーカス要素に青枠をつける */
:focus {
    outline: 2px solid #7daee9;/*#88ffd6;*/
    outline-offset: 2px;
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(165, 174, 233, 0.6);
}

/* _db_viewer_list, _todo_block: 薄紫の宿題ブロックを右いっぱいに広げる */
.to_do-wide {
    flex-grow: 1;        /* 右側ブロックを最大まで広げる */
    width: 100%;         /* 念のため */
}
/* _todo_block: ToDo のチェックボックスを大きくする */
.to_do-row input[type="checkbox"] {
    transform: scale(1.6);   /* ← 1.2〜1.8 の間で調整可能 */
    margin-right: 6px;       /* 位置調整（任意） */
    cursor: pointer;         /* クリックしやすくする */
}

/* _db_viewer_list, _todo_block: 完了した宿題をグレーアウト */
.to_do-wide.completed {
    background-color: #f0f0f0;   /* 薄いグレー背景 */
    color: #888;                 /* 文字をグレーに */
    opacity: 0.7;                /* 全体を少し薄く */
}
/* _db_viewer_list, _todo_block: 完了した宿題の中のテキストも薄く */
.to_do-wide.completed p,
.to_do-wide.completed div {
    color: #444;
}
/* _todo_block: チェックボックスも少し薄く */
.to_do-row input[type="checkbox"]:checked {
    filter: grayscale(80%);
}
/* _db_viewer_list: 宿題ブロックの右側だけ広げる */
.to_do_block {
    margin-right: 20px;
}


/* 全共通: select選択肢の表示領域を増やす（右部・文字欠けを無くす） */
.select select {
    padding-left: 0.4em;   /* 左側の余白を減らす */
    padding-right: 1.6em !important;   /* ▼ボタンの幅ぶん余白を作る */
}
/* ▼ボタンを右端に寄せる */
.select:not(.is-multiple):not(.is-loading)::after {
    right: 0.7em !important;   /* ▼を右端へ寄せる */
}