/* =====================================================================
   NAV-DOCS 共通デザイン v1.0
   ---------------------------------------------------------------------
   各アプリはこのファイルを「そのままコピー」して読み込む（アプリ間で import しない）。
   値を変えるときは Portal（navdocs-id）のこのファイルを正として版を上げ、各アプリへ配る。
   アプリ固有の見た目はアプリ側の CSS に書き、ここには足さない。

   使い方の要点:
   - 色はすべて --nd-* トークン経由。アプリ側で同じ色を直書きしない。
   - パステル（*-soft）はアイコン背景・バッジなど小面積だけに使う。
   - 余白は 8px 単位（--nd-space-*）。
   ===================================================================== */

:root {
  /* ---- 基本カラー（デザイン規格 v1.0） ---- */
  --nd-header: #285579;          /* ヘッダー */
  --nd-sidebar: #E5EFDD;         /* サイドバー */
  --nd-bg: #F7F6F1;              /* メイン背景 */
  --nd-surface: #FFFFFF;         /* カード背景 */
  --nd-text: #243D55;            /* メイン文字 */
  --nd-text-muted: #64748B;      /* 補助文字 */
  --nd-primary: #177F86;         /* 主要アクション */
  --nd-nav-active-bg: #FFFFFF;   /* 選択中メニュー */
  --nd-accent: #177F86;          /* 選択アクセント */
  --nd-border: #E1E7E5;          /* 境界線 */
  --nd-warning: #D38B34;         /* 注意表示 */
  --nd-success: #23856D;         /* 正常状態 */
  --nd-danger: #C65D65;          /* エラー・停止状態 */

  /* ---- 派生色（上の基本色から作った濃淡。小面積用） ---- */
  --nd-primary-hover: #126A70;
  --nd-primary-soft: #E2F1F0;
  --nd-success-soft: #E1F2EB;
  --nd-danger-soft: #F9E7E8;
  --nd-danger-text: #A8434C;
  --nd-warning-soft: #FBEFDD;
  --nd-warning-text: #9A5F1C;
  --nd-neutral-soft: #EEF1F4;
  --nd-info-soft: #E4EDF5;
  --nd-header-text: #FFFFFF;
  --nd-sidebar-text: #2E4A43;
  --nd-sidebar-line: #CFDDC5;
  --nd-row-hover: #FAFBF8;
  --nd-focus: 0 0 0 3px rgba(23, 127, 134, .22);

  /* ---- 寸法 ---- */
  --nd-header-h: 60px;
  --nd-sidebar-w: 280px;
  --nd-space-1: 8px;
  --nd-space-2: 16px;
  --nd-space-3: 24px;
  --nd-space-4: 32px;
  --nd-space-5: 40px;
  --nd-radius: 10px;
  --nd-radius-sm: 6px;
  --nd-radius-pill: 999px;
  --nd-shadow: 0 1px 2px rgba(36, 61, 85, .05);

  /* ---- 文字 ---- */
  --nd-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --nd-fs-title: clamp(22px, 2.2vw, 28px);  /* ページタイトル */
  --nd-fs-section: 18px;                     /* セクションタイトル */
  --nd-fs-body: 14px;                        /* 通常文字 */
  --nd-fs-small: 12px;                       /* 補助情報 */
  --nd-fs-figure: clamp(28px, 2.6vw, 34px);  /* 集計数値 */
}

/* ---------------------------------------------------------------------
   AppHeader
   --------------------------------------------------------------------- */
.nd-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nd-header-h);
  display: flex; align-items: center; gap: var(--nd-space-2);
  padding: 0 var(--nd-space-3);
  background: var(--nd-header); color: var(--nd-header-text);
  font-family: var(--nd-font);
}
.nd-header__brand {
  display: flex; align-items: center; gap: var(--nd-space-2); min-width: 0;
  color: inherit; text-decoration: none;
}
.nd-header__brand:hover { text-decoration: none; color: inherit; }
.nd-header__logo { font-size: 22px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.nd-header__app {
  padding-left: var(--nd-space-2); border-left: 1px solid rgba(255, 255, 255, .35);
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.nd-header__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.nd-header__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--nd-radius-sm);
  border: 1px solid rgba(255, 255, 255, .45); color: inherit; font-size: 13px; white-space: nowrap;
}
.nd-header__link:hover { background: rgba(255, 255, 255, .1); color: inherit; text-decoration: none; }
.nd-header__user {
  display: inline-flex; align-items: center; gap: 6px; max-width: 16em;
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nd-header__menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: -8px; border-radius: var(--nd-radius-sm);
  color: inherit; cursor: pointer;
}
.nd-header__menu-toggle:hover { background: rgba(255, 255, 255, .1); }

/* 権限表示（小さなバッジ）。運営者は色を変え、全社を触っていることを常に意識させる */
.nd-role-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: var(--nd-radius-pill); background: var(--nd-primary-soft); color: var(--nd-primary-hover);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.nd-role-badge.is-sys { background: var(--nd-warning-soft); color: var(--nd-warning-text); }

/* ---------------------------------------------------------------------
   AppSidebar
   --------------------------------------------------------------------- */
.nd-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nd-sidebar {
  position: fixed; top: var(--nd-header-h); bottom: 0; left: 0; z-index: 90;
  width: var(--nd-sidebar-w); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--nd-space-3) var(--nd-space-3) var(--nd-space-4);
  background: var(--nd-sidebar); color: var(--nd-sidebar-text);
  font-family: var(--nd-font); font-size: 14px;
}
.nd-sidebar__home {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; margin-bottom: var(--nd-space-3);
  background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-sm);
  color: var(--nd-text); font-size: 14px;
}
.nd-sidebar__home:hover { border-color: var(--nd-primary); color: var(--nd-primary); text-decoration: none; }
.nd-sidebar__section-title {
  margin: 0 0 var(--nd-space-1); padding: 0 4px 10px;
  border-bottom: 1px solid var(--nd-sidebar-line);
  font-size: 15px; font-weight: 700; color: var(--nd-text);
}
.nd-sidebar__group { margin-bottom: var(--nd-space-2); }
.nd-sidebar__group-title {
  margin: var(--nd-space-2) 0 6px; padding: 0 4px 8px;
  border-bottom: 1px solid var(--nd-sidebar-line);
  font-size: 13px; font-weight: 700; color: var(--nd-sidebar-text);
}
.nd-sidebar__note { display: block; font-size: 11px; font-weight: 400; color: var(--nd-text-muted); }

.nd-nav-item {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; margin: 2px 0; border-radius: var(--nd-radius-sm);
  color: var(--nd-sidebar-text); font-size: 14px; line-height: 1.4;
}
.nd-nav-item svg { flex: none; color: var(--nd-sidebar-text); opacity: .9; }
.nd-nav-item:hover { background: rgba(255, 255, 255, .55); color: var(--nd-text); text-decoration: none; }
.nd-nav-item.is-active {
  background: var(--nd-nav-active-bg); color: var(--nd-text); font-weight: 700;
  box-shadow: inset 4px 0 0 var(--nd-accent), var(--nd-shadow);
}
.nd-nav-item.is-active svg { color: var(--nd-accent); opacity: 1; }
.nd-nav-item.is-indent { margin-left: var(--nd-space-3); }

.nd-sidebar-backdrop { display: none; }

/* ---------------------------------------------------------------------
   アプリの外枠（ヘッダー + サイドバー + メイン）
   .nd-shell の直下にヘッダー・サイドバーとメインを置く。
   --------------------------------------------------------------------- */
.nd-shell {
  min-height: 100vh; background: var(--nd-bg); color: var(--nd-text);
  font-family: var(--nd-font); font-size: var(--nd-fs-body);
  padding: calc(var(--nd-header-h) + var(--nd-space-4)) var(--nd-space-4) var(--nd-space-5)
           calc(var(--nd-sidebar-w) + var(--nd-space-4));
}

@media (max-width: 960px) {
  .nd-header { padding: 0 var(--nd-space-2); }
  .nd-header__menu-toggle { display: inline-flex; }
  .nd-header__app { display: none; }
  .nd-header__user-name { display: none; }
  .nd-sidebar {
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 4px 0 16px rgba(36, 61, 85, .12);
  }
  .nd-nav-toggle:checked ~ .nd-sidebar { transform: none; }
  .nd-nav-toggle:checked ~ .nd-sidebar-backdrop {
    display: block; position: fixed; inset: var(--nd-header-h) 0 0 0; z-index: 80;
    background: rgba(36, 61, 85, .3);
  }
  .nd-nav-toggle:focus-visible ~ .nd-header .nd-header__menu-toggle { box-shadow: var(--nd-focus); }
  .nd-shell { padding: calc(var(--nd-header-h) + var(--nd-space-3)) var(--nd-space-2) var(--nd-space-4); }
}
@media (max-width: 560px) {
  .nd-header__logo { font-size: 18px; }
  .nd-header__link-label { display: none; }
  .nd-header__link { padding: 0 9px; }
}

/* ---------------------------------------------------------------------
   PageHeader
   --------------------------------------------------------------------- */
.nd-page-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--nd-space-2); margin-bottom: var(--nd-space-3);
}
.nd-page-header__title { margin: 0; font-size: var(--nd-fs-title); font-weight: 700; line-height: 1.3; color: var(--nd-text); }
.nd-page-header__desc { margin: 6px 0 0; font-size: var(--nd-fs-body); color: var(--nd-text-muted); }
.nd-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--nd-space-1); }

/* ---------------------------------------------------------------------
   PrimaryButton / SecondaryButton / 小ボタン
   --------------------------------------------------------------------- */
.nd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 20px; border-radius: var(--nd-radius-sm);
  border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.nd-btn:hover { text-decoration: none; }
.nd-btn:focus-visible { outline: none; box-shadow: var(--nd-focus); }
.nd-btn--primary { background: var(--nd-primary); color: #fff; }
.nd-btn--primary:hover { background: var(--nd-primary-hover); color: #fff; }
.nd-btn--secondary { background: var(--nd-surface); color: var(--nd-text); border-color: var(--nd-border); }
.nd-btn--secondary:hover { border-color: var(--nd-primary); color: var(--nd-primary); }
.nd-btn--danger { background: var(--nd-danger); color: #fff; }
.nd-btn--danger:hover { background: var(--nd-danger-text); color: #fff; }
.nd-btn--sm { min-height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--nd-radius-pill); }

/* 一覧内の操作リンク（アイコン付き） */
.nd-action {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: var(--nd-radius-sm);
  color: var(--nd-primary); font-size: 14px; white-space: nowrap;
}
.nd-action:hover { background: var(--nd-primary-soft); text-decoration: none; color: var(--nd-primary-hover); }

.nd-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--nd-radius-sm);
  background: transparent; color: var(--nd-text-muted); cursor: pointer;
}
.nd-icon-btn:hover { background: var(--nd-neutral-soft); color: var(--nd-text); }
.nd-icon-btn:focus-visible { outline: none; box-shadow: var(--nd-focus); }

/* ---------------------------------------------------------------------
   SectionCard / SummaryCard
   --------------------------------------------------------------------- */
.nd-card {
  background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius);
  box-shadow: var(--nd-shadow); padding: var(--nd-space-3);
}
.nd-card + .nd-card { margin-top: var(--nd-space-3); }
.nd-card__title { margin: 0 0 var(--nd-space-2); font-size: var(--nd-fs-section); font-weight: 700; }

.nd-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--nd-space-3); margin-bottom: var(--nd-space-3);
}
.nd-summary-card {
  display: flex; align-items: center; gap: var(--nd-space-3);
  background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius);
  box-shadow: var(--nd-shadow); padding: var(--nd-space-3);
}
.nd-summary-card__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--nd-info-soft); color: var(--nd-primary);
}
.nd-summary-card__icon--success { background: var(--nd-success-soft); color: var(--nd-success); }
.nd-summary-card__icon--warning { background: var(--nd-warning-soft); color: var(--nd-warning-text); }
.nd-summary-card__label { font-size: 14px; font-weight: 700; color: var(--nd-text); }
.nd-summary-card__value {
  margin: 2px 0; font-size: var(--nd-fs-figure); font-weight: 700; line-height: 1.15;
  color: var(--nd-text); font-variant-numeric: tabular-nums;
}
.nd-summary-card__note { font-size: var(--nd-fs-small); color: var(--nd-text-muted); }

/* ---------------------------------------------------------------------
   SearchInput / SelectInput / ツールバー
   --------------------------------------------------------------------- */
.nd-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--nd-space-2);
  margin-bottom: var(--nd-space-2);
}
.nd-toolbar__spacer { flex: 1 1 auto; }
.nd-toolbar__count { font-size: 14px; color: var(--nd-text); white-space: nowrap; }
.nd-toolbar__count strong { font-size: 18px; font-variant-numeric: tabular-nums; }

.nd-search { position: relative; flex: 1 1 360px; max-width: 640px; min-width: 0; }
.nd-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--nd-text-muted); pointer-events: none; }
.nd-search__input {
  width: 100%; height: 40px; padding: 0 40px 0 42px;
  border: 1px solid var(--nd-border); border-radius: var(--nd-radius-sm);
  background: var(--nd-surface); color: var(--nd-text); font: inherit; font-size: 14px;
}
.nd-search__input::placeholder { color: #94A3B8; }
.nd-search__input:focus, .nd-select:focus { outline: none; border-color: var(--nd-primary); box-shadow: var(--nd-focus); }
.nd-search__input::-webkit-search-cancel-button { display: none; }
.nd-search__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

.nd-select {
  height: 40px; padding: 0 32px 0 12px; border: 1px solid var(--nd-border); border-radius: var(--nd-radius-sm);
  background: var(--nd-surface); color: var(--nd-text); font: inherit; font-size: 14px; cursor: pointer;
}

/* ---------------------------------------------------------------------
   DataTable
   --------------------------------------------------------------------- */
.nd-table-wrap { overflow-x: auto; max-width: 100%; }
.nd-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--nd-text); }
.nd-table th {
  padding: 10px 14px; background: #F4F6F5; text-align: left; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--nd-text);
  border-bottom: 1px solid var(--nd-border);
}
.nd-table th:first-child { border-top-left-radius: var(--nd-radius-sm); }
.nd-table th:last-child { border-top-right-radius: var(--nd-radius-sm); }
.nd-table td { padding: 9px 14px; border-bottom: 1px solid var(--nd-border); vertical-align: middle; }
.nd-table tbody tr:hover td { background: var(--nd-row-hover); }
.nd-table tbody tr:last-child td { border-bottom: none; }
.nd-table__wrap-text { white-space: normal; overflow-wrap: anywhere; min-width: 10em; }
.nd-table__nowrap { white-space: nowrap; }
.nd-table__actions { white-space: nowrap; text-align: right; width: 1%; }

.nd-sort {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: none; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.nd-sort svg { color: var(--nd-text-muted); }
th[aria-sort="ascending"] .nd-sort svg, th[aria-sort="descending"] .nd-sort svg { color: var(--nd-primary); }
.nd-sort:focus-visible { outline: none; box-shadow: var(--nd-focus); border-radius: 4px; }

.nd-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--nd-space-1);
  margin-top: var(--nd-space-2); font-size: 13px; color: var(--nd-text-muted);
}

/* ---------------------------------------------------------------------
   StatusBadge
   --------------------------------------------------------------------- */
.nd-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
  border-radius: var(--nd-radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--nd-neutral-soft); color: var(--nd-text-muted);
}
.nd-badge--success { background: var(--nd-success-soft); color: var(--nd-success); }
.nd-badge--danger  { background: var(--nd-danger-soft);  color: var(--nd-danger-text); }
.nd-badge--warning { background: var(--nd-warning-soft); color: var(--nd-warning-text); }
.nd-badge--info    { background: var(--nd-info-soft);    color: var(--nd-header); }

/* ---------------------------------------------------------------------
   三点メニュー（<details> で開閉。JS なしでも動く）
   --------------------------------------------------------------------- */
.nd-menu { position: relative; display: inline-block; }
.nd-menu > summary { list-style: none; }
.nd-menu > summary::-webkit-details-marker { display: none; }
.nd-menu__list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 160px;
  padding: 6px; background: var(--nd-surface); border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-sm); box-shadow: 0 6px 18px rgba(36, 61, 85, .12);
}
.nd-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: none; border-radius: 4px; background: none; font: inherit; font-size: 14px;
  color: var(--nd-text); text-align: left; cursor: pointer; white-space: nowrap;
}
.nd-menu__item:hover { background: var(--nd-neutral-soft); text-decoration: none; }
.nd-menu__item--danger { color: var(--nd-danger-text); }
.nd-menu__item--danger:hover { background: var(--nd-danger-soft); }

/* ---------------------------------------------------------------------
   ConfirmDialog
   --------------------------------------------------------------------- */
.nd-dialog {
  width: min(460px, calc(100vw - 32px)); margin: auto; padding: 0; border: none; border-radius: var(--nd-radius);
  box-shadow: 0 16px 48px rgba(36, 61, 85, .25); color: var(--nd-text); font-family: var(--nd-font);
}
.nd-dialog::backdrop { background: rgba(36, 61, 85, .4); }
.nd-dialog__body { padding: var(--nd-space-3); }
.nd-dialog__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--nd-fs-section); }
.nd-dialog__title--danger svg { color: var(--nd-danger); }
.nd-dialog__target {
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--nd-radius-sm);
  background: var(--nd-neutral-soft); font-weight: 700; overflow-wrap: anywhere;
}
.nd-dialog__message { margin: 0; font-size: 14px; line-height: 1.7; color: var(--nd-text-muted); white-space: pre-line; }
.nd-dialog__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--nd-space-1);
  padding: var(--nd-space-2) var(--nd-space-3); border-top: 1px solid var(--nd-border); background: #FAFAF8;
  border-radius: 0 0 var(--nd-radius) var(--nd-radius);
}

/* ---------------------------------------------------------------------
   EmptyState
   --------------------------------------------------------------------- */
.nd-empty { padding: var(--nd-space-4) var(--nd-space-2); text-align: center; color: var(--nd-text-muted); }
.nd-empty__title { margin: 0 0 4px; font-weight: 700; color: var(--nd-text); }

/* 狭い画面ではカードの余白を詰める（各部品の定義より後ろに置くこと） */
@media (max-width: 960px) {
  .nd-card, .nd-summary-card { padding: var(--nd-space-2); }
  .nd-summary-grid { gap: var(--nd-space-2); }
  .nd-summary-card__icon { width: 56px; height: 56px; }
}

/* 補助 */
/* display を指定した部品にも hidden 属性を効かせる（JS が出し入れする要素用） */
[hidden] { display: none !important; }
.nd-muted { color: var(--nd-text-muted); }
.nd-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}