@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  margin-right: .5rem;
}

:root {
  --base-color: #000;
  --act-color-1: #000;
  --act-color-2: #000;
  --act-color-approve: #000;
  --act-color-return: #000;
  --header-height: 64px;
  --header-bg: #24599f;
  --header-border-solid-color: #e5e7eb;
  --menu-bg: #24599f;
  --main-theme-color: #24599f;
  --logo-color1: #e2e3ff;
  --logo-color2: #e2f3ff;
  --page-title-bg: #f1f5f9;
  --border-solid-color: #d1d5db;
  --section-title-color: #374151;
  --link-color: var(--act-color-1);
  --notice-color: #afc5da;

  /* --- ボタンの色も連動 --- */
  --button-primary-bg: var(--base-color);
  --button-primary-bg-hober: #6366f1;
  --button-primary-color: #ffffff;
  --button-secondary-bg: #f1f5f9;
  --button-secondary-hover-bg: #e2e8f0;
  --button-secondary-color: #374151;

  /* --- フォントサイズ全体を底上げ --- */
  --font-size-n1: 13px;
  /* 最小でも13px */
  --font-size-n2: 16px;
  /* 基本サイズを14px→16pxへ */
  --font-size-n3: 18px;
  --font-size-l1: 22px;
  --font-size-l2: 26px;
  font-size: 18px;
}

/* ===============================
   共通リセット・全体
=============================== */
html,
body {
  height: 100%;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #374151;
  letter-spacing: 0.03em;
  background-color: #f9fafb;
}

a {
  color: var(--link-color);
}

.form-area {
  padding: 24px;
}

.page-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===============================
   ヘッダー
=============================== */
.header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border-solid-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer;
  color: var(--logo-color1);
  letter-spacing: -0.02em;
}

.logo-sub {
  font-size: 1.1rem;
  color: var(--logo-color2);
}

/* 右側 */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-link:hover {
  text-decoration: underline;
}

.user-name {
  padding: 6px 16px;
  background: #f1f5f9;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  line-height: 1;
}

/* アイコン自体の微調整 */
.header-link .material-symbols-rounded {
  font-size: 20px;
  /* アイコンを少し小さくして文字と馴染ませる */
}

/* ===============================
   ページタイトル
=============================== */
.page-title {
  background: var(--page-title-bg);
  border-bottom: 1px solid var(--border-solid-color);
  padding: 10px 24px;
  font-size: var(--font-size-l1);
  font-weight: bold;
  color: #1f2937;
  height: 60px;
}

.page-title .page-title-explain {
  display: block;
  font-size: var(--font-size-n2);
  font-weight: normal;
  margin-top: 4px;
  opacity: 0.8;
}

/* ===============================
   サイドメニュー
=============================== */
.sidebar {
  width: 240px;
  background: var(--menu-bg);
  border-right: 1px solid #e2e8f0;
  /* 縦の境界線 */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  /* 右側に薄い影を落として立体感を出す */
  z-index: 10;
}

/* サイドメニューのリンク共通 */
.sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  /* アイコンと文字の間隔 */
  padding: 12px 16px;
  text-decoration: none;
  color: #4b5563;
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アイコン自体のサイズと位置 */
.sidebar .material-symbols-rounded {
  font-size: 22px;
  color: #6b7280;
  /* 少し控えめなグレーに */
}

/* ホバー・選択時にアイコンの色も変える */
.sidebar a:hover .material-symbols-rounded,
.sidebar a.active .material-symbols-rounded {
  color: var(--base-color);
}

/* クリック時の「へこみ」アニメーション */
.sidebar a:active {
  transform: scale(0.97);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===============================
   コメント
=============================== */
.comment {
  display: flex;
  align-items: flex-start;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dotted #e2e8f0;
  gap: 10px;
}

.col-label {
  width: 85px;
  flex-shrink: 0;
}

.col-date {
  width: 100px;
  flex-shrink: 0;
}

.col-text {
  flex: 1;
  word-break: break-word;
}


.label {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  justify-content: center;
  margin-right: 6px;
}


.label-approve {
  background: var(--act-color-approve);
  color: #ffffff;
}

.label-return {
  background: var(--act-color-return);
  color: #ffffff;
}

.label-submit {
  background: var(--button-primary-bg);
  color: #ffffff;
}

.label-reject {
  background: var(--act-color-2);
  color: #ffffff;
}

.label-user {
  color: #41464b;
}

/* ===============================
   プレビューリスト
=============================== */
.container {
  padding: 24px;
}

.card {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

/* ===============================
   添付資料
=============================== */
.attachments {
  margin-bottom: 24px;
}

.attachments h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.attachments a {
  display: block;
  margin-bottom: 4px;
  color: #2c7be5;
  text-decoration: underline;
}

/* ===============================
   PDF表示
=============================== */
.pdf-area {
  border: 1px solid #d1d5db;
  height: 600px;
  margin-bottom: 20px;
}

.pdf-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ===============================
   入力項目
=============================== */
input,
textarea,
select {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-solid-color);
  font-size: 16px;
}

textarea {
  resize: vertical;
}

/* ===============================
   区切り線
=============================== */
.divider {
  border-top: 1px solid var(--border-solid-color);
  height: 1px;
  margin: 40px 0;
  border: none;
}

/* ===============================
   カテゴリ選択
=============================== */
.select-category {
  width: 390px;
}

/* ===============================
   添付ファイル
=============================== */
/* グループ枠 */
.attachment-group {
  margin-top: 24px;
  border: 1px solid var(--border-solid-color);
  border-radius: 6px;
}

/* 見出し */
.attachment-title {
  padding: 8px 12px;
  font-weight: bold;
  font-size: var(--font-size-n3);
  background: var(--page-title-bg);
  border-bottom: 1px solid var(--border-solid-color);
}

.attachment-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 50%) 36px;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.attachment-label {
  font-weight: bold;
  margin-left: 8px;
  font-size: var(--font-size-n2);
}

/* ファイル名＋選択ボタン枠 */
.attachment-filename {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  background: #f9fafb;
  border: 1px solid var(--border-solid-color);
  padding: 0 8px;
  border-radius: 4px;
  box-sizing: border-box;
}


/* ファイル選択（小さく） */
.attachment-file-select-inline {
  position: relative;
  top: -10px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  /* ★ 明示的高さ */
  padding: 0 8px;
  background: var(--button-primary-bg);
  color: var(--button-primary-color);
  font-size: var(--font-size-n1);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.attachment-file-select-inline:hover {
  background: var(--button-primary-bg-hober);
}

/* ファイル名 */
.attachment-file-name {
  flex: 1;
  font-size: var(--font-size-n1);
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 削除（×）*/
.attachment-file-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-solid-color);
  background: #f9fafb;
  color: var(--act-color-2);
  font-size: var(--font-size-n3);
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-file-add {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-solid-color);
  background: #f9fafb;
  color: var(--act-color-1);
  font-size: var(--font-size-n3);
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-file-remove:hover {
  background: #fee2e2;
  border-color: var(--act-color-2);
}

/* ===============================
   ダイアログ
=============================== */
.modal {
  position: absolute;
  top: calc(100% + 8px);
  /* ← ユーザー名の下 */
  right: 0;
  background: transparent;
  z-index: 1000;
}

.modal-row label {
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}

.modal-content {
  width: 320px;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.modal-header {
  padding: 10px 14px;
  background: #f1f5f9;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.modal-header button {
  background: none;
  border: none;
  cursor: pointer;
}

.modal-body {
  padding: 14px;
}

.modal-body div {
  margin-bottom: 8px;
}

/* ===============================
   ボタン
=============================== */
.button-area {
  display: flex;
  /* 横並びにする */
  justify-content: center;
  /* 全体を中央寄せ */
  gap: 16px;
  /* ボタン間の隙間 */
  margin: 32px 0;
  /* 上下マージン */
}

/* 主ボタン（提出） */
.button-primary,
.button-resubmit {
  border-radius: 9999px !important;
  padding: 12px 32px !important;
  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
  transition: transform 0.1s;
  font-size: 1rem;
  background-color: #000;
  color: #fff;
}

.button-primary:hover {
  background: var(--button-primary-bg-hober);
  color: #fff;
}

.button-primary:active {
  transform: scale(0.98);
}

/* 副ボタン（プレビュー・参考例） */
.button-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-color);
  border: 1px solid var(--border-solid-color);
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}

.button-secondary:hover {
  background: var(--button-secondary-hover-bg);
}

.button-resubmit {
  background: #ff8c00;
  color: var(--button-primary-color);
  font-weight: bold;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* ===== 履歴表示 ===== */
.toggle-history {
  cursor: pointer;
  color: #2c7be5;
  font-size: 13px;
  margin: 8px 0;
}

/* ===== 編集ボタン ===== */
.button-sub {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: #2c7be5;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  margin-right: 6px;
}

.button-sub.cancel {
  background: #6b7280;
  border: none;
  color: #ffffff;
}

.button-sub.edit {
  background: #2c7be5;
  /* 青 */
  border: 1px solid #2c7be5;
  color: #ffffff;
  /* 白文字 */
}

.button-sub.delete {
  background: #dc2626;
  border: 1px solid #dc2626;
  color: #ffffff;
}

.button-sub:hover {
  opacity: 0.8;
}

.top-actions {
  margin-bottom: 12px;
}

/* ===============================
   リンク
=============================== */
.past-link-area {
  display: flex;
  justify-content: center;
}

/* ===============================
   ラベル
=============================== */
/* ラベルの装飾と余白 */
label {
  display: block;
  font-size: var(--font-size-n3);
  font-weight: 700;
  color: #334155;
  margin-top: 50px;
  /* 前の項目との距離を広げる */
  margin-bottom: 10px;
  /* 下の入力欄との距離を少し空ける */
  line-height: 1.4;
}

/* 必須マークの装飾（赤いアスタリスクなど） */
.required::after {
  content: "必須";
  font-size: 10px;
  background-color: #ef4444;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ===============================
    稟議書案作成時エラーエリア
=============================== */
.generate-errors {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid #fca5a5;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 14px;
  border-radius: 6px;
  white-space: pre-line;
}

.generate-errors.hidden {
  display: none;
}

.main-content-container {
  width: 100%;
  min-width: 1000px;
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
}

.p-datepicker-title button{
    font-size: 1rem
}