/*
 * custom.css — テーマ本体には一切手を加えず、新規ファイルとして追加するカスタムCSS。
 * dashboard.blade.php から <link> で読み込む(custom.js と同じ方式)。
 *
 * 2026-09-07: WelcomeCard(マイプラン)内、長いプラン名で「おすすめプラン」枠(右側)が
 * 潰れて表示されなくなる不具合の対策。
 *
 * 原因(index-D-qCWyjY.js のWelcomeCardコンポーネントを実測して特定):
 *   WelcomeCardのルートは flex flex-row (lg以上) で、左(マイプラン情報, class="z-3 flex
 *   flex-col gap-4 p-6 lg:p-8") と右(おすすめプラン等のウィジェット, class="z-3 flex-auto
 *   flex justify-center lg:justify-end items-center ...") の2つを justify-between で並べて
 *   いる。左側の中にプラン名を表示する Ant Design Typography(ellipsis指定)があるが、
 *   Ant Design公式ドキュメントにも明記の通り、flexレイアウト内でellipsisを効かせるには
 *   祖先のflexアイテムに min-width:0 が必要。これが無いため、長いプラン名の時に左側の
 *   flexアイテムの自動最小幅(min-width:auto)がテキストの全幅まで膨れ上がり、
 *   flex-auto指定で伸縮可能な右側(おすすめプラン)がその分だけ圧迫されて幅ゼロ近くまで
 *   潰れていた。
 *
 * 対策: 左側の直下(WelcomeCardの最初の子div)に min-width:0 を1行追加するだけ。
 *   これによりflexboxの縮小アルゴリズムが正しく働き、プラン名は既存のellipsis指定通り
 *   省略表示になり、右側のおすすめプラン枠は本来の幅を確保できる。
 *   [class*="_WelcomeCard_"] というCSS Modulesのハッシュ付きクラス名の前方一致で
 *   スコープを絞っているため、他の画面・他のコンポーネントには影響しない。
 */
[class*="_WelcomeCard_"] > div:first-child {
  min-width: 0;
}

/*
 * 2026-09-07: 期限間近の自動ポップアップ通知(独自クラス _NoticeModalWrapper_ を持つ
 * ant-modal-wrap)が、見た目は小さなカード1枚なのに、機能的には画面全体のクリックを
 * 塞いでしまっていた不具合の対策。
 *
 * 実機で確認した事実:
 *   - antdの標準Modal構造どおり、ラッパー要素(.ant-modal-wrap)はビューポート全体を覆う
 *     大きさで存在するが、この通知には暗く覆うマスク(通常のモーダルにある背景の暗転)が
 *     視覚的には表示されていない。そのため見た目は「小さなお知らせカードが浮いているだけ」
 *     にしか見えないが、実際にはラッパー要素がクリックを最優先で受け取ってしまい、
 *     その裏にある「今すぐ購入」ボタンや、画面上部の「すべてのメニュー」まで
 *     押せなくなる(Playwrightの実機テストで、通知が出ている間は
 *     『データ通信明細』のメニューすら押せないことを確認済み)。
 *   - お客様には「ページの動作がおかしい/フリーズした」ようにしか見えず、
 *     Escapeキーを押す、または見えている×ボタンを押す、という手段があることに
 *     気づく術がない。
 *
 * 対策: ラッパー要素自体はクリックを受け取らない(pointer-events:none)ようにし、
 *   実際に見えているカード本体(.ant-modal)だけクリックを受け付ける
 *   (pointer-events:auto)ようにする。これにより:
 *   - カードの外側(実際には何も見えていない場所)をクリックすれば、
 *     何も塞がれることなく背後のボタン・メニューへ普通に届く
 *   - カード自体(閉じるボタン・「継続更新はこちら」ボタン)は今まで通り押せる
 *   本体(難読化バンドル)は一切変更していない。
 */
div[class*="_NoticeModalWrapper_"] {
  pointer-events: none;
}
div[class*="_NoticeModalWrapper_"] .ant-modal,
div[class*="_NoticeModalWrapper_"] .ant-modal-content {
  pointer-events: auto;
}

/* 2026-10-03 竜さん「×ボタン目立つように」。自前・既定のスクロールバーの変更は Mac の Chrome で固まったため廃止 */
.ant-modal-wrap[class*="NoticeModalWrapper"] .ant-modal-close {
    width: 36px; height: 36px; top: 10px; right: 10px;
    border-radius: 50%; background: #fff !important; opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45); z-index: 20;
}
.ant-modal-wrap[class*="NoticeModalWrapper"] .ant-modal-close .ant-modal-close-x,
.ant-modal-wrap[class*="NoticeModalWrapper"] .ant-modal-close .anticon {
    width: 36px; height: 36px; line-height: 36px; font-size: 18px; color: #111 !important;
    display: flex; align-items: center; justify-content: center;
}
.ant-modal-wrap[class*="NoticeModalWrapper"] .ant-modal-body > div { padding-top: 52px; }
.xl-notice-more {
    position: absolute; left: 0; right: 0; padding: 18px 0 10px; border-radius: 0 0 12px 12px;
    text-align: center; font-size: 13px; color: #fff; pointer-events: none; z-index: 15;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .85) 55%);
}
.xl-notice-closebtn {
    display: block; width: 100%; margin: 16px 0 0; padding: 10px 0; flex-shrink: 0;
    border: 0; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #111;
    font-size: 15px; font-weight: 600; cursor: pointer;
}