/*
 * 管理画面の外枠（ヘッダー・サイドメニュー・ボトムメニュー）とダーク／ライト（docs/admin-ui.md）。
 *
 * 色はお客様ごとの管理画面カラー（--admin_color1〜7。admin.vender.color）を土台にする。
 *   1 明るい灰青（#c5cfe4）・2 灰青（#9ba7bb）・3 濃い文字（#344767）・4 補足の文字（#67748e）・6 濃い面（#141727）
 * ダークは、同じ色を暗い面に少しだけ混ぜて作る（同じ色相の暗い版。color-mix）。
 * ダークの下地は Soft UI のよく使う部品（card・table・form-control・bg-white・text-dark など）だけ。
 * エディタ・グラフ・select2 など細かい所は段階2で直す。
 */

:root {
  --nc-bg: #f8f9fa;
  --nc-surface: #fff;
  --nc-surface-2: #f4f6fa;
  --nc-text: var(--admin_color3, #344767);
  --nc-text-sub: var(--admin_color4, #67748e);
  --nc-line: #e3e7ee;
  --nc-input: #fff;
  --nc-input-line: #d2d6da;
  --nc-header-bg: rgba(248, 249, 250, .86);
  --nc-tap: 40px;
  --nc-bottom-h: 64px;
  --nc-safe-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="dark"] {
  --nc-bg: color-mix(in srgb, var(--admin_color2, #9ba7bb) 6%, #0d1117);
  --nc-surface: color-mix(in srgb, var(--admin_color2, #9ba7bb) 9%, #151a22);
  --nc-surface-2: color-mix(in srgb, var(--admin_color2, #9ba7bb) 13%, #1b212b);
  --nc-text: #e6ebf2;
  --nc-text-sub: #a5afbd;
  --nc-line: rgba(255, 255, 255, .1);
  --nc-input: color-mix(in srgb, var(--admin_color2, #9ba7bb) 6%, #0f141a);
  --nc-input-line: rgba(255, 255, 255, .18);
  --nc-header-bg: color-mix(in srgb, var(--nc-bg) 86%, transparent);
  color-scheme: dark;
}

/* ================================================================
   ヘッダー（Q4）：左に画面の名前、右にアイコンのボタンを横一列。上に固定
   ================================================================ */
/* Soft UI は .main-content の高さを画面の高さまでにしている（max-height-vh-100 h-100）。
   その中で上に固定するヘッダーは、1画面ぶんスクロールすると外へ出てしまうので、高さの上限を外す */
.nc-shell .main-content { max-height: none !important; height: auto !important; min-height: 100vh; }

.nc-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: block;
  margin: 0 1.5rem;
  background: var(--nc-header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-radius: 0 0 1rem 1rem;
}
.nc-header__alert { border-radius: 0 0 .75rem .75rem; }
.nc-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 60px;
  padding: .5rem .75rem;
}
.nc-header__title { min-width: 0; }
.nc-header__title h6 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nc-text);
}
.nc-header__tools {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: none;
}

/* アイコンだけのボタン（40px 角）。名前は aria-label と、乗せたときの小さな名前（data-nc-tip） */
.nc-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nc-tap);
  height: var(--nc-tap);
  padding: 0;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: var(--nc-text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.nc-icon-btn:hover { background: var(--nc-surface-2); color: var(--nc-text); }
.nc-icon-btn:focus-visible { outline: 2px solid var(--nc-text); outline-offset: 2px; }
@media (hover: hover) {
  .nc-icon-btn[data-nc-tip]:hover::after {
    content: attr(data-nc-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--admin_color3, #344767);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
  }
}
.nc-icon-btn .nece-badge { transform: translate(25%, -25%); }

/* マニュアルの検索。パソコンは入力欄を見せ、スマホは 🔍 で開く */
.nc-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 .25rem;
}
.nc-search__icon {
  position: absolute;
  left: .75rem;
  color: var(--nc-text-sub);
  font-size: .85rem;
  pointer-events: none;
}
.nc-search__input {
  width: 220px;
  height: 38px;
  padding: 0 .75rem 0 2.1rem;
  border: 1px solid var(--nc-input-line);
  border-radius: .75rem;
  background: var(--nc-input);
  color: var(--nc-text);
  font-size: .875rem;
}
.nc-search__input:focus { outline: none; border-color: var(--admin_color2, #9ba7bb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin_color2, #9ba7bb) 35%, transparent); }
.nc-search-toggle { display: none; }

/* ダーク／ライトのアイコン：今と反対の色にするボタン */
.nc-theme-icon--light { display: none; }
[data-theme="dark"] .nc-theme-icon--dark { display: none; }
[data-theme="dark"] .nc-theme-icon--light { display: inline; }

.nc-account { min-width: 15rem; }
.nc-account__name { color: var(--nc-text); }
.nc-account .dropdown-item { display: flex; align-items: center; width: 100%; }

/* ☰ はタブレットの幅（768〜1199px）だけ。パソコンはサイドメニューが常に出ていて、スマホはボトムメニューがある */
.nc-burger { display: none; }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .nc-burger { display: inline-flex; }
}

@media (max-width: 991.98px) {
  .nc-search { display: none; }
  .nc-search-toggle { display: inline-flex; }
  .nc-header.is-search-open .nc-search {
    display: flex;
    position: absolute;
    left: .75rem;
    right: .75rem;
    top: calc(100% + .25rem);
    margin: 0;
  }
  .nc-header.is-search-open .nc-search__input {
    width: 100%;
    height: 44px;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .35);
  }
}
@media (max-width: 767.98px) {
  .nc-header { margin: 0 .5rem; }
  .nc-header__bar { min-height: 56px; padding: .375rem .25rem .375rem .75rem; }
}

/* ================================================================
   サイドメニュー（Q9）：場面ごとの見出し
   ================================================================ */
.nc-sidenav__group {
  margin: 1rem 0 .25rem;
  padding: 0 1rem;
  color: var(--nc-text-sub);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  list-style: none;
}
.nc-sidenav .nav-link { position: relative; }

/* ================================================================
   スマホのボトムメニュー（Q3）。768px 未満だけ
   ================================================================ */
.nc-bottom-nav { display: none; }
.nc-backdrop { display: none; }

@media (max-width: 767.98px) {
  .nc-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(var(--nc-bottom-h) + var(--nc-safe-bottom));
    padding: 0 .25rem var(--nc-safe-bottom);
    background: var(--nc-header-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--nc-line);
  }
  .nc-bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nc-text-sub);
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
  }
  .nc-bottom-nav__item.is-active,
  .nc-bottom-nav__item[aria-expanded="true"] { color: var(--nc-text); }
  .nc-bottom-nav__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    font-size: 1.05rem;
    transition: background-color .15s ease;
  }
  .nc-bottom-nav__item.is-active .nc-bottom-nav__icon { background: color-mix(in srgb, var(--admin_color2, #9ba7bb) 35%, transparent); }
  .nc-bottom-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nc-bottom-nav__badge { top: -4px !important; right: 4px !important; left: auto !important; transform: none !important; }

  /* ボトムメニューに隠れないよう、ページの下を空ける。右上の ☰ は出さない */
  .nc-shell .main-content { padding-bottom: calc(var(--nc-bottom-h) + var(--nc-safe-bottom) + 1rem); }

  /* 「メニュー」で開くサイドメニューは、下から出るシートにする */
  .nc-shell .sidenav {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 82vh;
    margin: 0 !important;
    padding-bottom: calc(var(--nc-bottom-h) + var(--nc-safe-bottom));
    border-radius: 1.25rem 1.25rem 0 0 !important;
    background: var(--nc-surface) !important;
    transform: translateY(105%) !important;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1) !important;
    overflow-y: auto;
    z-index: 1035 !important;
  }
  .nc-shell.g-sidenav-pinned .sidenav { transform: translateY(0) !important; }
  .nc-shell .sidenav .sidenav-header { display: none; }
  .nc-shell .sidenav #sidenav-collapse-main { height: auto !important; max-height: none; }
  .nc-shell.g-sidenav-pinned .nc-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1034;
    background: rgba(10, 14, 20, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-shell .sidenav, .nc-icon-btn, .nc-bottom-nav__icon { transition: none !important; }
}

/* ================================================================
   ダークの下地（Q7）。Soft UI のよく使う部品だけ。細かい所は段階2
   ================================================================ */
[data-theme="dark"] body,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .main-content { background-color: var(--nc-bg) !important; color: var(--nc-text-sub); }

[data-theme="dark"] .card,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .sidenav.bg-white,
[data-theme="dark"] .navbar-vertical.bg-white { background-color: var(--nc-surface) !important; color: var(--nc-text-sub); }
[data-theme="dark"] .card { box-shadow: 0 0 0 1px var(--nc-line), 0 20px 27px 0 rgba(0, 0, 0, .25); }
[data-theme="dark"] .sidenav .icon.bg-white { background-color: var(--nc-surface-2) !important; }

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3,
[data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6,
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .font-weight-bolder,
[data-theme="dark"] .nav-link,
[data-theme="dark"] .breadcrumb-item a,
[data-theme="dark"] .dropdown-item { color: var(--nc-text) !important; }
/* 色付きの面の上の白い文字は白のまま */
[data-theme="dark"] [class*="bg-gradient-"] h1, [data-theme="dark"] [class*="bg-gradient-"] h2,
[data-theme="dark"] [class*="bg-gradient-"] h3, [data-theme="dark"] [class*="bg-gradient-"] h4,
[data-theme="dark"] [class*="bg-gradient-"] h5, [data-theme="dark"] [class*="bg-gradient-"] h6,
[data-theme="dark"] .text-white { color: #fff !important; }

[data-theme="dark"] p,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before,
[data-theme="dark"] .footer .copyright { color: var(--nc-text-sub) !important; }
[data-theme="dark"] .bg-gradient-primary p, [data-theme="dark"] [class*="bg-gradient-"] p { color: #fff !important; }

/* nece.css が管理画面カラー3（濃い文字）を !important で当てている所 */
[data-theme="dark"] .nav-link:not(.active) .icon i,
[data-theme="dark"] .sidenav-footer .icon i { color: var(--nc-text) !important; }
[data-theme="dark"] .sidenav .nav-link.active { background-color: var(--nc-surface-2) !important; }

[data-theme="dark"] .table { color: var(--nc-text-sub); --bs-table-bg: transparent; --bs-table-striped-bg: var(--nc-surface-2); --bs-table-hover-bg: var(--nc-surface-2); }
[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--nc-line); color: inherit; }
[data-theme="dark"] .table th { color: var(--nc-text-sub) !important; }
[data-theme="dark"] .table-light, [data-theme="dark"] .table-light > * > * { background-color: var(--nc-surface-2) !important; color: var(--nc-text) !important; }
/* 非公開・予約の行（一覧の tr.bg-light）。ダークでは白く浮かないよう、少し明るい面にする */
[data-theme="dark"] .table tr.bg-light, [data-theme="dark"] .table tr.bg-light > * { background-color: var(--nc-surface-2) !important; color: var(--nc-text-sub); }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] .input-group-text { background-color: var(--nc-input) !important; border-color: var(--nc-input-line) !important; color: var(--nc-text) !important; }
[data-theme="dark"] .form-control::placeholder { color: color-mix(in srgb, var(--nc-text-sub) 70%, transparent); }
[data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: var(--nc-surface-2) !important; }
[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--nc-input); border-color: var(--nc-input-line); }

[data-theme="dark"] .border, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-top,
[data-theme="dark"] .table-bordered, [data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--nc-line) !important; }
[data-theme="dark"] hr.horizontal.dark { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); }
[data-theme="dark"] .dropdown-divider { border-color: var(--nc-line); }

[data-theme="dark"] .btn-white, [data-theme="dark"] .btn.bg-white { background-color: var(--nc-surface-2) !important; color: var(--nc-text) !important; }
[data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-outline-primary { color: var(--nc-text); border-color: var(--nc-input-line); }

[data-theme="dark"] .tooltip-bubble { background: var(--nc-surface-2); color: var(--nc-text); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); }
[data-theme="dark"] .docs-tip__more, [data-theme="dark"] .docs-tip__more:hover { color: var(--nc-text); }

/* エディタ（Summernote）は段階2で整えるが、本文が読めるようにだけしておく */
[data-theme="dark"] .note-editor .note-editable { background-color: var(--nc-input); color: var(--nc-text); }
[data-theme="dark"] .note-editor .note-toolbar, [data-theme="dark"] .note-editor .note-statusbar { background-color: var(--nc-surface-2); border-color: var(--nc-line); }

/* カードの見出しの帯・下の帯（Soft UI は白を直に当てている） */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer { background-color: transparent !important; }
[data-theme="dark"] .card .card { background-color: var(--nc-surface-2) !important; }

/* 画面ごとに色の変数を持っている画面（受け付けたデータ・フォームの編集） */
[data-theme="dark"] .form-data-page {
  --fd-ink: var(--nc-text); --fd-text: var(--nc-text-sub); --fd-muted: var(--nc-text-sub);
  --fd-line: var(--nc-line); --fd-soft: var(--nc-surface-2); --fd-accent: var(--nc-text);
}
[data-theme="dark"] .form-edit-page {
  --fe-ink: var(--nc-text); --fe-text: var(--nc-text-sub); --fe-muted: var(--nc-text-sub);
  --fe-line: var(--nc-line); --fe-accent: var(--nc-text);
}
[data-theme="dark"] .block-summary h4 { color: var(--nc-text) !important; }
[data-theme="dark"] .block-summary .bs-help { color: var(--nc-text-sub) !important; }
[data-theme="dark"] .block-summary .bs-period,
[data-theme="dark"] .block-summary .bs-period-active { border-color: var(--nc-line) !important; }

/* nece.css が白を直に当てている所（ファイルの投入欄・チャット） */
[data-theme="dark"] .upload-container,
[data-theme="dark"] .admin-chat-message.-system .admin-chat-bubble,
[data-theme="dark"] .admin-chat-composer { background-color: var(--nc-surface) !important; color: var(--nc-text); }
[data-theme="dark"] .admin-chat-composer { border-top-color: var(--nc-line); }

/* サイドメニューの見出しを、項目の文字の位置にそろえる */
.nc-sidenav__group { padding-left: 1.5rem; }
@media (max-width: 767.98px) {
  .nc-shell .sidenav .nav-link { padding-top: .45rem; padding-bottom: .45rem; }
  .nc-sidenav__group { margin-top: .75rem; }
}
[data-theme="dark"] .block-stat { background: var(--nc-surface-2) !important; border-color: var(--nc-line) !important; }
[data-theme="dark"] .block-words-ranking-bar { background: var(--nc-surface-2) !important; }
[data-theme="dark"] .block-summary .bs-period:hover { background: var(--nc-surface-2) !important; color: var(--nc-text) !important; }

/* ================================================================
   一覧の表（.nc-list）：横スクロールをやめ、行の中で折り返す。スマホは1件ずつのカード
   セルの見出し（data-label）と操作のセル（.nc-list__action）は shell.js が付ける
   ================================================================ */
.nc-list-wrap, .table-responsive:has(> table.nc-list) { overflow: visible !important; }
table.nc-list { width: 100%; table-layout: auto; }
table.nc-list th,
table.nc-list td {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  vertical-align: middle;
  padding: .75rem .5rem !important;
}
table.nc-list th { font-size: .7rem !important; letter-spacing: .02em; }
table.nc-list .btn {
  white-space: nowrap;
  min-width: 0;
  padding: .55rem .75rem;
  font-size: .75rem;
  letter-spacing: 0;
  line-height: 1.3;
}
table.nc-list img { max-width: 64px !important; height: auto; }
table.nc-list td > span[class*="bg-gradient-"] { display: inline-block; padding: .25rem .6rem !important; line-height: 1.5; white-space: nowrap; font-size: .75rem; }

/* 「⋯」はスマホだけ */
table.nc-list td.nc-list__more { display: none; }

/* パソコンでも幅が足りない画面（1280px 前後・列が多い一覧）では、セルの左右の余白を詰めて横にはみ出さないようにする（seamn で 45px はみ出した） */
@media (min-width: 768px) and (max-width: 1439px) {
  table.nc-list th, table.nc-list td { padding-left: .3rem !important; padding-right: .3rem !important; }
  table.nc-list .btn { padding-left: .5rem; padding-right: .5rem; }
}

/* スマホ：1件ずつのカード。左にサムネイル、右にタイトル（太字）と日付などの小さな行、下に「編集」と「⋯」 */
@media (max-width: 767.98px) {
  table.nc-list thead { display: none; }
  table.nc-list, table.nc-list tbody { display: block; width: 100%; }
  table.nc-list tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: .2rem .75rem;
    margin: 0 .75rem .75rem;
    padding: .875rem;
    border: 1px solid var(--nc-line);
    border-radius: 1rem;
    background: var(--nc-surface);
  }
  table.nc-list.nc-list--thumb tbody tr { grid-template-columns: 64px minmax(0, 1fr) 44px; }
  table.nc-list tbody tr.bg-light { background: var(--nc-surface-2) !important; }

  table.nc-list tbody tr > td {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .15rem .4rem;
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    font-size: .85rem !important;
    color: var(--nc-text-sub);
  }
  table.nc-list.nc-list--thumb tbody tr > td { grid-column: 2 / -1; }
  table.nc-list tbody tr > td br { display: none; }
  table.nc-list tbody tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-size: .72rem;
    font-weight: 700;
    color: var(--nc-text-sub);
    opacity: .85;
  }
  table.nc-list tbody tr > td .text-center:not(.btn), table.nc-list tbody tr > td .d-block:not(.btn) { display: inline !important; text-align: left !important; }
  table.nc-list tbody tr > td.nc-list__empty { display: none; }

  /* タイトル：上に太字で */
  table.nc-list tbody tr > td.nc-list__title {
    order: -1;
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.5;
    color: var(--nc-text);
  }
  table.nc-list tbody tr > td.nc-list__title::before { display: none; }

  /* サムネイル：左に縦いっぱい */
  table.nc-list.nc-list--thumb tbody tr > td.nc-list__thumb {
    order: -2;
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
  }
  table.nc-list tbody tr > td.nc-list__thumb::before { display: none; }
  table.nc-list tbody tr > td.nc-list__thumb img { width: 64px !important; max-width: 64px !important; height: 64px !important; object-fit: cover; border-radius: .6rem; margin: 0 !important; }

  /* 細かい列（ID・slug・本文など）は出さない */
  table.nc-list tbody tr > td.nc-list__minor { display: none; }

  /* カテゴリーなどの色付きの札は小さく */
  table.nc-list tbody tr > td > span[class*="bg-gradient-"] { padding: .1rem .5rem !important; font-size: .7rem; border-radius: .4rem !important; }
  table.nc-list .nc-status { margin: 0 !important; }

  /* 操作：「編集」だけを大きく。ほかは「⋯」のメニューへ */
  table.nc-list tbody tr > td.nc-list__action { display: none; }
  table.nc-list tbody tr > td.nc-list__action.nc-list__primary {
    display: block;
    order: 10;
    grid-column: 1 / -2 !important;
    margin-top: .5rem;
  }
  table.nc-list tbody tr > td.nc-list__primary::before { display: none; }
  table.nc-list tbody tr > td.nc-list__primary form { margin: 0; }
  table.nc-list tbody tr > td.nc-list__primary .btn { display: block; width: 100%; padding: .7rem .5rem; font-size: .8rem; }
  table.nc-list tbody tr > td.nc-list__more {
    display: block;
    order: 11;
    grid-column: -2 / -1 !important;
    margin-top: .5rem;
  }
  table.nc-list tbody tr > td.nc-list__more::before { display: none; }
  .nc-list__more-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--nc-line);
    border-radius: .75rem;
    background: var(--nc-surface-2);
    color: var(--nc-text);
    font-size: 1.1rem;
  }
}

/* 「⋯」で開くシート */
.nc-sheet[hidden] { display: none; }
.nc-sheet { position: fixed; inset: 0; z-index: 1060; }
.nc-sheet__backdrop { position: absolute; inset: 0; background: rgba(10, 14, 20, .45); }
.nc-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1rem 1rem calc(1rem + var(--nc-safe-bottom));
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--nc-surface);
  box-shadow: 0 -12px 32px -12px rgba(0, 0, 0, .35);
  animation: nc-sheet-in .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes nc-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.nc-sheet__title {
  margin: 0 0 .75rem;
  padding: 0 .25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nc-text) !important;
  font-size: .9rem;
  font-weight: 700;
}
.nc-sheet__list { display: grid; gap: .5rem; }
.nc-sheet__item,
.nc-sheet__cancel {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--nc-line);
  border-radius: .875rem;
  background: var(--nc-surface-2);
  color: var(--nc-text);
  font-size: .95rem;
  font-weight: 600;
}
.nc-sheet__item.is-danger { margin-top: .75rem; border-color: rgba(234, 6, 6, .35); color: #d0021b; background: transparent; }
[data-theme="dark"] .nc-sheet__item.is-danger { color: #ff7a7a; border-color: rgba(255, 122, 122, .35); }
.nc-sheet__cancel { margin-top: .75rem; background: transparent; color: var(--nc-text-sub); }
@media (min-width: 768px) {
  .nc-sheet__panel { left: 50%; right: auto; bottom: 50%; width: 420px; transform: translate(-50%, 50%); border-radius: 1.25rem; animation: none; }
}
@media (prefers-reduced-motion: reduce) { .nc-sheet__panel { animation: none; } }

/* ================================================================
   一覧の追加のボタン：右下の丸い ＋（スマホはボトムメニューの上）
   ================================================================ */
.create-wrap > a.btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1032;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  font-size: 0 !important;
  box-shadow: 0 10px 24px -8px rgba(20, 23, 39, .45);
}
.create-wrap > a.btn::before {
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
}
.create-wrap > a.btn:focus-visible { outline: 3px solid var(--nc-text); outline-offset: 3px; }
@media (max-width: 767.98px) {
  .create-wrap > a.btn { right: 1rem; bottom: calc(var(--nc-bottom-h) + var(--nc-safe-bottom) + 1rem); }
}
/* 右下の ＋ に隠れないよう、一覧の下を空ける */
.nc-shell:has(.create-wrap > a.btn) .main-content { padding-bottom: 6rem; }
@media (max-width: 767.98px) {
  .nc-shell:has(.create-wrap > a.btn) .main-content { padding-bottom: calc(var(--nc-bottom-h) + var(--nc-safe-bottom) + 6rem); }
}

/* ================================================================
   スマホの送信ボタン（追加・更新）：ボトムメニューのすぐ上にすき間なく固定し、コンテンツを広く見せる。
   どのボタンかは shell.js が決める（nc-sticky-submit）。サイト設定・ページの編集の「更新」の帯（.fixed-submit）も同じ形にそろえる
   ================================================================ */
@media (max-width: 767.98px) {
  .nc-sticky-submit {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--nc-bottom-h) + var(--nc-safe-bottom)) !important;
    z-index: 1036 !important;
    width: 100% !important;
    height: 48px;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, .35) !important;
    font-size: .875rem !important;
  }
  /* .fixed-submit の帯（カードの余白）はスマホでは使わない。ボタンだけを上で固定する */
  .fixed-submit { position: static !important; padding: 0 !important; }
  .fixed-submit .inner { width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
  /* ボタンの高さの分だけ、ページの下を空ける */
  .nc-shell.has-sticky-submit .main-content { padding-bottom: calc(var(--nc-bottom-h) + var(--nc-safe-bottom) + 48px + 1rem) !important; }
}

/* ================================================================
   チャット（nece.css が白・半透明の白・灰色を直に当てている）
   ================================================================ */
[data-theme="dark"] .admin-chat-shell { background: var(--nc-surface) !important; border-color: var(--nc-line) !important; }
[data-theme="dark"] .admin-chat-body { background-color: var(--nc-surface) !important; }
[data-theme="dark"] .admin-chat-toolbar { background: var(--nc-surface-2) !important; border-bottom-color: var(--nc-line) !important; }
[data-theme="dark"] .admin-chat-thread { background: var(--nc-bg) !important; }
[data-theme="dark"] .admin-chat-date { background: var(--nc-surface-2) !important; color: var(--nc-text-sub) !important; }
[data-theme="dark"] .admin-chat-meta,
[data-theme="dark"] .admin-chat-message.-admin .admin-chat-meta { color: var(--nc-text-sub) !important; }
[data-theme="dark"] .admin-chat-message.-system .admin-chat-bubble { background: var(--nc-surface-2) !important; color: var(--nc-text) !important; border-color: var(--nc-line) !important; }
[data-theme="dark"] .admin-chat-composer { background: var(--nc-surface) !important; border-top-color: var(--nc-line) !important; }
[data-theme="dark"] .admin-chat-textarea { background: var(--nc-input) !important; color: var(--nc-text) !important; border-color: var(--nc-input-line) !important; }
[data-theme="dark"] .admin-chat-note { color: var(--nc-text-sub) !important; }
/* チャットの Livewire の中で背景を直に書いている所（style="background: #f8f9fa"） */
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] { background: var(--nc-bg) !important; }
[data-theme="dark"] [style*="color: var(--admin_color3)"] { color: var(--nc-text) !important; background-color: var(--nc-surface-2) !important; }

/* パソコン：操作のセル（ボタン）と短いセル（ID など）は折り返さず、残りの幅を文章のセルに回す */
@media (min-width: 768px) {
  table.nc-list td.nc-list__action,
  table.nc-list td.nc-list__short { width: 1%; white-space: nowrap !important; }
  table.nc-list td.nc-list__action form { margin: 0; }
}

/* チャットのユーザー一覧（選んでいない人は btn-light） */
[data-theme="dark"] .btn-light { background: var(--nc-surface-2) !important; color: var(--nc-text) !important; border-color: var(--nc-line) !important; }
[data-theme="dark"] .btn-light .text-muted { color: var(--nc-text-sub) !important; }

/* ================================================================
   チャットの文字を読みやすく（ライト・ダーク共通）
   吹き出しの本文は濃い文字・少し大きく。名前と時刻・日付は補足の色で、背景との差を取る。
   管理者の吹き出しは、以前の灰青のグラデーション＋白い文字では差が足りなかった（約 2.3:1）ので、濃い面にする
   ================================================================ */
.admin-chat-bubble,
.admin-chat-bubble p { font-size: .9375rem !important; line-height: 1.8 !important; }
.admin-chat-message.-system .admin-chat-bubble,
.admin-chat-message.-system .admin-chat-bubble p { color: var(--nc-text) !important; }
.admin-chat-message.-admin .admin-chat-bubble {
  background: var(--admin_color3, #344767) !important;
  color: #fff !important;
}
.admin-chat-message.-admin .admin-chat-bubble p,
.admin-chat-message.-admin .admin-chat-bubble a { color: #fff !important; }
.admin-chat-meta,
.admin-chat-message.-admin .admin-chat-meta,
.admin-chat-message.-system .admin-chat-meta { color: var(--nc-text-sub) !important; font-size: .75rem !important; opacity: 1 !important; }
.admin-chat-date { color: var(--nc-text-sub) !important; font-weight: 600; }
/* 選んでいるユーザー（濃い面）の補足の文字 */
.btn-dark .text-muted, .btn-dark .small { color: rgba(255, 255, 255, .82) !important; }

[data-theme="dark"] .admin-chat-message.-admin .admin-chat-bubble {
  background: color-mix(in srgb, var(--admin_color2, #9ba7bb) 32%, var(--nc-surface)) !important;
  color: var(--nc-text) !important;
}
[data-theme="dark"] .admin-chat-message.-admin .admin-chat-bubble p,
[data-theme="dark"] .admin-chat-message.-admin .admin-chat-bubble a { color: var(--nc-text) !important; }
[data-theme="dark"] .admin-chat-bubble a { text-decoration: underline; }

/* ================================================================
   スマホの絞り込み（form.nc-filter）：キーワードと「検索」を1行に、ほかの条件は「条件」で開く
   ================================================================ */
.nc-filter__toggle { display: none; }
@media (max-width: 767.98px) {
  form.nc-filter > .d-flex { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem !important; }
  form.nc-filter .nc-filter__keyword { grid-column: 1; }
  form.nc-filter .nc-filter__submit { grid-column: 2; grid-row: 1; }
  form.nc-filter .nc-filter__submit .btn,
  form.nc-filter .btn.nc-filter__submit { margin: 0; height: 100%; padding-left: 1rem; padding-right: 1rem; }
  form.nc-filter > .d-flex > div { width: 100%; }
  form.nc-filter .nc-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    grid-column: 1 / -1;
    justify-self: start;
    padding: .25rem .1rem;
    border: 0;
    background: none;
    color: var(--nc-text);
    font-size: .8rem;
    font-weight: 700;
  }
  form.nc-filter .nc-filter__more { grid-column: 1 / -1; }
  form.nc-filter:not(.is-open) .nc-filter__more { display: none; }
  form.nc-filter .nc-filter__more .btn, form.nc-filter .btn.nc-filter__more { width: 100%; margin: 0; }
}

/* 受け付けたデータの「営業ワードの集計」の期間のボタン（今月・過去30日・全期間）。
   3つの幅が固定で、狭いスマホではカードの中身の幅からはみ出していたので、スマホでは中身の幅いっぱいに3等分する */
@media (max-width: 767.98px) {
  .block-summary .card-header > .card-header-wrap { flex: 1 1 100%; }
  .block-summary .block-summary-periods { display: flex; flex: 1 1 100%; width: 100%; min-width: 0; }
  .block-summary .block-summary-periods > .btn { flex: 1 1 0; min-width: 0; padding-left: .25rem; padding-right: .25rem; white-space: nowrap; }
}

/* ================================================================
   一覧の並び替え（⇅ をつかんでドラッグ）。並び替えられない人には ⇅ の列を出さない
   ================================================================ */
table.nc-list:not([data-nc-sort-url]) .nc-sort-cell { display: none !important; }
table.nc-list .nc-sort-cell { width: 1%; }
.nc-sort-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: .5rem;
  color: var(--nc-text-sub);
  cursor: grab;
}
.nc-sort-handle:hover { background: var(--nc-surface-2); color: var(--nc-text); }
table.nc-list tr.is-dragging { opacity: .45; }
table.nc-list tr[draggable="true"] { cursor: grabbing; }

/* 一覧の文字（パソコン）：本文のセルは少し大きく。サムネイルの列は画像の幅だけにする */
table.nc-list td { font-size: .875rem !important; }
table.nc-list td .text-xs, table.nc-list td.text-xs { font-size: .8rem !important; }
@media (min-width: 768px) {
  table.nc-list td.nc-list__thumb { width: 1%; }
  table.nc-list td.nc-list__thumb img { width: 64px !important; height: 44px !important; object-fit: cover; border-radius: .4rem; }
}

/* パソコンの一覧のボタン：押しやすい高さ（38px）と文字（13px）。スマホのカードは別（「編集」と「⋯」） */
@media (min-width: 768px) {
  table.nc-list .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .5rem .9rem !important;
    font-size: .8125rem !important;
    border-radius: .6rem;
  }
  table.nc-list td.nc-list__action { padding-left: .3rem !important; padding-right: .3rem !important; }
  table.nc-list td.nc-list__action form { display: flex; justify-content: center; }
  table.nc-list .nc-sort-handle { width: 38px; height: 38px; }
}

/* パソコンでも幅が足りないうち（768〜1439px）は、slug・内容の列を出さない（ボタンを大きくした分の幅を空ける） */
@media (min-width: 768px) and (max-width: 1439.98px) {
  table.nc-list .nc-list__wide-only { display: none !important; }
}

/* 途中で折り返せない長い文字（操作の記録のイベント名・URL など）が表を押し広げないよう、
   短いセル（ID・日付）と操作のセル以外は、どこででも折り返す */
table.nc-list td:not(.nc-list__short):not(.nc-list__action):not(.nc-sort-cell) { overflow-wrap: anywhere; }
/* 表の中のテキストエリア（操作の記録のメッセージ）。cols の幅（30文字分）が表を押し広げていたので、画面の幅に応じた幅にする */
table.nc-list textarea { width: clamp(12rem, 20vw, 28rem) !important; max-width: 100%; }