/* 全画面テーマ（プリセット）。変数は html に定義し .app-navbar / body で利用。 */

html {
  --app-body-bg: #f8f9fa;
  --app-body-color: #212529;
  --app-muted-color: #6c757d;
  --app-nav-surface-1: #dce8d4;
  --app-nav-surface-2: #c8d9bc;
  /* チャット未読（現在地リング --app-nav-accent とは色分け） */
  --app-nav-chat-unread: #b45309;
  --app-nav-accent: #7b9e6b;
  --app-nav-text: #2d3a2b;
  --app-nav-text-soft: #4a5c47;
  --app-nav-border: rgba(123, 158, 107, 0.4);
  --app-nav-shadow: rgba(60, 90, 50, 0.1);
  --app-dropdown-bg: #fff;
  --app-dropdown-color: #212529;
  --app-dropdown-border: rgba(0, 0, 0, 0.1);
}

html[data-app-theme="light"] {
  --app-body-bg: #f8f9fa;
  --app-body-color: #212529;
  --app-muted-color: #6c757d;
  --app-nav-surface-1: #dce8d4;
  --app-nav-surface-2: #c8d9bc;
  --app-nav-accent: #7b9e6b;
  --app-nav-text: #2d3a2b;
  --app-nav-text-soft: #4a5c47;
  --app-nav-border: rgba(123, 158, 107, 0.4);
  --app-nav-shadow: rgba(60, 90, 50, 0.1);
  --app-dropdown-bg: #fff;
  --app-dropdown-color: #212529;
  --app-dropdown-border: rgba(0, 0, 0, 0.1);
}

html[data-app-theme="natural"] {
  --app-body-bg: #f5f7f3;
  --app-body-color: #2a3328;
  --app-muted-color: #5a6b55;
  --app-nav-surface-1: #d0e0c8;
  --app-nav-surface-2: #b8cfac;
  --app-nav-accent: #6d8f5e;
  --app-nav-text: #2a3328;
  --app-nav-text-soft: #4d5c48;
  --app-nav-border: rgba(90, 120, 75, 0.45);
  --app-nav-shadow: rgba(50, 80, 40, 0.12);
  --app-dropdown-bg: #fafcf8;
  --app-dropdown-color: #2a3328;
  --app-dropdown-border: rgba(90, 120, 75, 0.2);
}

html[data-app-theme="gradient"] {
  --app-body-bg: transparent;
  --app-body-color: #212529;
  --app-muted-color: #6c757d;
  --app-nav-surface-1: #dce8d4;
  --app-nav-surface-2: #c8d9bc;
  --app-nav-accent: #7b9e6b;
  --app-nav-text: #2d3a2b;
  --app-nav-text-soft: #4a5c47;
  --app-nav-border: rgba(123, 158, 107, 0.4);
  --app-nav-shadow: rgba(60, 90, 50, 0.1);
  --app-dropdown-bg: #fff;
  --app-dropdown-color: #212529;
  --app-dropdown-border: rgba(0, 0, 0, 0.1);
}

html[data-app-theme="gradient"] body.app-body {
  background: linear-gradient(180deg, #fafbf8 0%, #e8f0e0 55%, #dde8d6 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

html[data-app-theme="dark"] {
  --app-body-bg: #1e2622;
  --app-body-color: #e8ebe7;
  --app-muted-color: #a8b5a3;
  --app-nav-surface-1: #2f3d35;
  --app-nav-surface-2: #253028;
  /* ダーク: 白ピル上で未読が読める色 */
  --app-nav-chat-unread: #ea580c;
  --app-nav-accent: #8fbc8f;
  --app-nav-text: #e8ebe7;
  --app-nav-text-soft: #c5d4c0;
  --app-nav-border: rgba(120, 160, 110, 0.35);
  --app-nav-shadow: rgba(0, 0, 0, 0.35);
  --app-dropdown-bg: #2a352f;
  --app-dropdown-color: #e8ebe7;
  --app-dropdown-border: rgba(120, 160, 110, 0.25);
}

body.app-body {
  background-color: var(--app-body-bg);
  color: var(--app-body-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}

html[data-app-theme="dark"] .text-muted {
  color: var(--app-muted-color) !important;
}

/* 主コンテンツ内の汎用カード・表（ダーク） */
html[data-app-theme="dark"] main .table {
  --bs-table-bg: #2a352f;
  --bs-table-color: var(--app-body-color);
  color: var(--app-body-color);
  border-color: #3d4a42;
}

html[data-app-theme="dark"] main .table thead,
html[data-app-theme="dark"] main .table-light {
  --bs-table-bg: #323d37;
  --bs-table-color: var(--app-body-color);
  color: var(--app-body-color);
}

html[data-app-theme="dark"] main .bg-white,
html[data-app-theme="dark"] main .card {
  background-color: #2a352f !important;
  color: var(--app-body-color) !important;
  border-color: #3d4a42 !important;
}

html[data-app-theme="dark"] main .list-group-item {
  background-color: #2a352f;
  color: var(--app-body-color);
  border-color: #3d4a42;
}

html[data-app-theme="dark"] main a.link-dark,
html[data-app-theme="dark"] main .text-dark {
  color: #c5e0b4 !important;
}

/* Django messages: info 相当を light にした分、ダークではカード面に揃える */
html[data-app-theme="dark"] main .alert-light {
  --bs-alert-bg: #2a352f;
  --bs-alert-color: var(--app-body-color);
  --bs-alert-border-color: #3d4a42;
  color: var(--app-body-color) !important;
  background-color: #2a352f !important;
  border-color: #3d4a42 !important;
}

/* テーマ用ドロップダウン */
.app-theme-menu.dropdown-menu {
  background-color: var(--app-dropdown-bg);
  color: var(--app-dropdown-color);
  border: 1px solid var(--app-dropdown-border);
}

.app-theme-menu .dropdown-item {
  color: var(--app-dropdown-color);
}

.app-theme-menu .dropdown-item:hover,
.app-theme-menu .dropdown-item:focus {
  background-color: var(--app-nav-surface-2);
  color: var(--app-nav-text);
}

html[data-app-theme="dark"] .app-theme-menu .dropdown-item.active,
html[data-app-theme="dark"] .app-theme-menu .dropdown-item:active {
  background-color: var(--app-nav-accent);
  color: #1a221e;
}

/* 複数行「本文」入力: 等幅フォントでインデントを揃える */
textarea.daily-report-body,
textarea.app-multiline-body {
  line-height: 1.5;
  tab-size: 2;
  font-family:
    "BIZ UDゴシック",
    "MS Gothic",
    "Osaka-Mono",
    ui-monospace,
    "Cascadia Mono",
    "Consolas",
    "Courier New",
    monospace;
}

/* コメント本文: 通常サイズ（Markdown でも small にしない） */
.app-comment-body {
  font-size: 1rem;
}

/* プレーン表示: 改行をそのまま反映 */
.daily-report-body-display-plain,
.app-multiline-body-display-plain {
  line-height: 1.5;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family:
    "BIZ UDゴシック",
    "MS Gothic",
    "Osaka-Mono",
    ui-monospace,
    "Cascadia Mono",
    "Consolas",
    "Courier New",
    monospace;
}

/* Markdown 表示: 段落・リストの余白を抑えて行間を詰める */
.daily-report-body-display-markdown,
.app-multiline-body-display-markdown {
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
}

.daily-report-body-display-markdown > :last-child,
.app-multiline-body-display-markdown > :last-child {
  margin-bottom: 0;
}

.daily-report-body-display-markdown p,
.app-multiline-body-display-markdown p {
  margin-bottom: 0.35em;
}

.daily-report-body-display-markdown ul,
.daily-report-body-display-markdown ol,
.app-multiline-body-display-markdown ul,
.app-multiline-body-display-markdown ol {
  margin-bottom: 0.35em;
  padding-left: 1.5em;
}

.daily-report-body-display-markdown ul,
.daily-report-body-display-markdown ul ul,
.daily-report-body-display-markdown ul ul ul,
.app-multiline-body-display-markdown ul,
.app-multiline-body-display-markdown ul ul,
.app-multiline-body-display-markdown ul ul ul {
  list-style-type: disc;
}

.daily-report-body-display-markdown pre,
.app-multiline-body-display-markdown pre {
  margin-bottom: 0.35em;
  padding: 0.5rem;
  font-size: 0.9em;
  overflow-x: auto;
}

.daily-report-body-display-markdown h1,
.daily-report-body-display-markdown h2,
.app-multiline-body-display-markdown h1,
.app-multiline-body-display-markdown h2 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.35em;
}

.daily-report-body-display-markdown h3,
.daily-report-body-display-markdown h4,
.daily-report-body-display-markdown h5,
.daily-report-body-display-markdown h6,
.app-multiline-body-display-markdown h3,
.app-multiline-body-display-markdown h4,
.app-multiline-body-display-markdown h5,
.app-multiline-body-display-markdown h6 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.35em;
}

/* urlize_links で挿入したリンクが長いときにセル／パネルからはみ出しにくくする */
.daily-report-body-display-plain a,
.daily-report-body-display-markdown a,
.app-multiline-body-display-plain a,
.app-multiline-body-display-markdown a,
#chat-log .text-break a {
  word-break: break-word;
}

.dashboard-announcements-scroll {
  max-height: min(16.5rem, 55vh);
  overflow-y: auto;
  padding-right: 0.35rem;
  margin-bottom: 0.5rem;
  scrollbar-gutter: stable;
}

/* Django messages: success はテンプレートで非表示のため、残件が無いときはラッパーも隠す */
.app-flash-messages:not(:has(.alert)) {
  display: none;
}

/* 情報ページ: CHANGELOG（Markdown 表示・スクロール） */
.portal-changelog-display {
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  padding-right: 0.35rem;
  scrollbar-gutter: stable;
}

.portal-changelog-display h2 {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.35rem;
}

.portal-changelog-display h2:first-child {
  margin-top: 0;
}

/* サイト内検索: キーワードハイライト */
mark.search-highlight {
  background-color: #fff3cd;
  color: inherit;
  font-weight: 600;
  padding: 0 0.1em;
  border-radius: 0.15em;
}

.app-search-result-item {
  cursor: pointer;
}

.app-search-result-item:hover {
  background-color: var(--bs-tertiary-bg);
}

.portal-changelog-display h1 {
  font-size: 1.1rem;
}

/* 日報: 表形式 / 本文 の表示切替 */
.app-daily-view-toggle .btn {
  min-width: 4.5rem;
  background-color: #fff;
  border-color: var(--bs-border-color);
  color: var(--app-muted-color, #6c757d);
  font-weight: 500;
}

.app-daily-view-toggle .btn:hover:not(.active) {
  background-color: #f8f9fa;
  color: var(--app-body-color, #212529);
}

.app-daily-view-toggle .btn.active {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

/* クリック可能行など（Bootstrap ユーティリティ未提供のため） */
.cursor-pointer {
  cursor: pointer;
}

/* フォーカスリング統一（キーボード操作時。マウスクリック後は :focus-visible が付かない） */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

:focus-visible {
  outline: 2px solid var(--app-nav-accent, #5a8f4a);
  outline-offset: 2px;
  box-shadow: none;
}

/* テキスト入力: 枠線リング＋薄い光彩で入力位置を強調 */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--app-nav-accent, #5a8f4a);
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-nav-accent, #5a8f4a) 22%, transparent);
}

/* ナビピル: app-navbar.css の ring 色を継承 */
.app-navbar a.app-navbar-pill:focus-visible,
.app-navbar button.app-navbar-pill:focus-visible,
.app-nav-surface-header button.app-navbar-pill:focus-visible {
  outline-color: var(--app-nav-pill-active-ring, var(--app-nav-accent, #5a8f4a));
}

/* 日付・時刻入力: 全幅にしない（ネイティブピッカーの操作性改善） */
input[type="date"].form-control-date,
input[type="time"].form-control-time {
  max-width: 12rem;
  width: 100%;
}

/* 選択肢が短い select（種別・カテゴリ等） */
select.form-select.form-select-compact {
  max-width: 12rem;
  width: 100%;
}

/* 添付ファイル入力: 全幅にしない（投稿・コメントで幅を揃える） */
input[type="file"].form-control {
  max-width: 28rem;
  width: 100%;
}

/* 添付蓄積: ラベル・入力・ヘルプを含むドロップゾーン */
.attachment-accumulator-dropzone {
  max-width: 28rem;
  padding: 0.75rem;
  border: 1px dashed var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.attachment-accumulator-dropzone--active {
  border-color: var(--bs-primary, #0d6efd);
  background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06);
}

.attachment-accumulator-dropzone .form-label {
  margin-bottom: 0.35rem;
}

.attachment-accumulator-dropzone .attachment-accumulator-help {
  margin-bottom: 0;
}

/* 白背景の outline-secondary: ホバー・押下はグレー＋白文字（Bootstrap の --bs-btn-* で上書き） */
.attachment-accumulator-remove,
.app-draft-discard {
  --bs-btn-bg: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary, #6c757d);
  --bs-btn-hover-border-color: var(--bs-secondary, #6c757d);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary, #6c757d);
  --bs-btn-active-border-color: var(--bs-secondary, #6c757d);
}

.attachment-accumulator-remove {
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.1rem 0.45rem;
}

/* 2カラム投稿フォーム（お知らせ・部署掲示など）: 左カラム本文を縦方向に広げる */
.app-form-two-col .form-label {
  margin-bottom: 0.25rem;
}
.app-form-two-col .form-text {
  font-size: 0.8rem;
  margin-top: 0.15rem;
}
.app-form-two-col .app-form-body-col .js-markdown-body-field textarea.form-control {
  min-height: 10rem;
}
.app-form-two-col .app-form-side-col .form-select-compact {
  max-width: 100%;
}
.app-form-two-col .app-form-body-col .form-select-compact {
  max-width: 100%;
}
@media (min-width: 768px) {
  .app-form-two-col .app-form-body-col {
    display: flex;
    flex-direction: column;
  }
  .app-form-two-col .app-form-body-col .js-markdown-body-field {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .app-form-two-col .app-form-body-col .js-markdown-body-field textarea.form-control {
    flex: 1 1 auto;
    min-height: 14rem;
  }
}