/* POPsystem 一般画面（企業管理者） 共通スタイル */
* { box-sizing: border-box; }
/* hidden属性は、display指定を持つクラス（.field-grid等）が同時に付いていても
   必ず非表示にする（クラスのdisplay指定に上書きされるのを防ぐ） */
[hidden] { display: none !important; }
html { background: var(--color-neutral-solid-gray-50); }
body {
  margin: 0;
  min-width: 1180px;
  color: var(--color-neutral-solid-gray-900);
  background: var(--color-neutral-solid-gray-50);
  font-family: var(--font-family-sans);
}
a { color: var(--color-key-900); }
.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--color-neutral-white);
  color: var(--color-key-900);
}
.skip-link:focus { top: 1rem; }

/* ヘッダー */
.app-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 76px;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: stretch;
  border-bottom: 1px solid var(--color-neutral-solid-gray-420);
  background: var(--color-neutral-white);
}
.sidebar-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sidebar-toggle-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-neutral-solid-gray-700);
}
.sidebar-toggle-btn:hover { background: var(--color-key-50); }
.sidebar-toggle-input:checked ~ .sidebar { width: 0; padding-left: 0; padding-right: 0; border-right-color: transparent; }
.sidebar-toggle-input:checked ~ .main { margin-left: 0; }
.brand-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 12px;
  border-right: 1px solid var(--color-neutral-solid-gray-420);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-neutral-black);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
.brand:hover { text-decoration: underline; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--color-neutral-white);
  background: var(--color-key-900);
  font-size: 1rem;
}
.context-list { display: flex; align-items: center; gap: 48px; margin: 0; padding: 0 32px; }
.context-list div { min-width: 180px; }
.context-list dt { margin: 0 0 3px; color: var(--color-neutral-solid-gray-700); font-size: .75rem; }
.context-list dd { margin: 0; font-weight: 700; line-height: 1.5; }
.context-list select {
  border: 1px solid var(--color-neutral-solid-gray-536);
  border-radius: 6px;
  padding: 5px 10px;
  background: var(--color-neutral-white);
  color: inherit;
  font: inherit;
  font-weight: 700;
}
.context-list select:focus-visible { outline: 2px solid var(--color-key-900); outline-offset: 1px; }
.fixed-label {
  display: inline-block;
  margin-left: 8px;
  border: 1px solid var(--color-neutral-solid-gray-536);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--color-neutral-solid-gray-700);
  font-size: .6875rem;
  font-weight: 400;
  vertical-align: 2px;
}
.account {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 222px;
  border: 0;
  border-left: 1px solid var(--color-neutral-solid-gray-420);
  padding: 0 24px;
  background: var(--color-neutral-white);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.account:hover { background: var(--color-key-50); }
.account-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-key-100);
  color: var(--color-key-900);
  font-weight: 700;
}
.account-role { color: var(--color-neutral-solid-gray-700); font-size: .75rem; }
.account-name { margin-top: 2px; font-weight: 700; }
.account-menu {
  position: absolute;
  top: 66px;
  right: 12px;
  z-index: 30;
  display: none;
  min-width: 200px;
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: 8px;
  padding: 6px;
  background: var(--color-neutral-white);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  list-style: none;
  margin: 0;
}
.account[aria-expanded="true"] + .account-menu { display: block; }
.account-menu li a, .account-menu li button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 9px 12px;
  background: none;
  color: var(--color-neutral-solid-gray-900);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu li a:hover, .account-menu li button:hover { background: var(--color-key-50); }

/* サイドバー */
.sidebar {
  position: fixed;
  top: 76px;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--color-neutral-solid-gray-420);
  padding: 20px 16px 32px;
  background: var(--color-neutral-white);
  white-space: nowrap;
  transition: width .22s ease, padding .22s ease, border-color .22s ease;
}
.nav-list, .nav-list ul { margin: 0; padding: 0; list-style: none; }
.nav-list > li + li { margin-top: 16px; }
.nav-group summary.nav-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 5px;
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--color-neutral-solid-gray-900);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.nav-group summary.nav-heading::-webkit-details-marker { display: none; }
.nav-group summary.nav-heading::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-neutral-solid-gray-700);
  border-bottom: 2px solid var(--color-neutral-solid-gray-700);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.nav-group[open] summary.nav-heading::after { transform: rotate(-135deg); }
.nav-group summary.nav-heading:hover { background: var(--color-key-50); }
.nav-link {
  display: block;
  min-height: 36px;
  border-radius: 6px;
  padding: 7px 12px 7px 24px;
  color: var(--color-neutral-solid-gray-700);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.55;
  text-decoration: none;
}
.nav-list > li > .nav-link { padding-left: 12px; color: var(--color-neutral-solid-gray-900); font-size: .875rem; }
.nav-link:hover { background: var(--color-key-50); color: var(--color-key-1000); text-decoration: underline; }
.nav-link[aria-current="page"] {
  border-left: 4px solid var(--color-key-900);
  padding-left: 8px;
  background: var(--color-key-100);
  color: var(--color-key-900);
  font-weight: 700;
}

/* メイン領域 */
.main { min-height: 100vh; margin-left: 260px; padding: 104px 32px 48px; transition: margin-left .22s ease; }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-header-actions { display: flex; gap: 10px; flex: 0 0 auto; }
h1 { margin: 0; font-size: 2rem; line-height: 1.4; letter-spacing: .02em; }
.lead { margin: 4px 0 0; color: var(--color-neutral-solid-gray-700); font-size: .875rem; }
.section-heading { margin: 28px 0 12px; font-size: 1.0625rem; }
.text-error { color: var(--color-semantic-error-1); font-weight: 700; }
.text-success { color: var(--color-semantic-success-2); font-weight: 700; }
.text-muted { color: var(--color-neutral-solid-gray-700); }

/* 一覧パネル・ツールバー */
.data-panel { min-width: 0; overflow: hidden; border: 1px solid var(--color-neutral-solid-gray-420); border-radius: 12px; background: var(--color-neutral-white); margin-bottom: 20px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 54px; border-bottom: 1px solid var(--color-neutral-solid-gray-420); padding: 10px 16px; }
.panel-header h2 { margin: 0; font-size: 1.0625rem; }
.panel-header a { font-size: .8125rem; font-weight: 700; text-underline-offset: 3px; }
.panel-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--color-neutral-solid-gray-420); padding: 12px 16px; background: var(--color-neutral-solid-gray-50); }
.toolbar-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-field { display: flex; align-items: center; gap: 6px; border: 1px solid var(--color-neutral-solid-gray-420); border-radius: 6px; padding: 0 10px; background: var(--color-neutral-white); min-width: 220px; }
.search-field input { border: 0; padding: 8px 0; font: inherit; width: 100%; outline: none; background: transparent; }
.selection-bar { display: none; align-items: center; gap: 10px; border-bottom: 1px solid var(--color-neutral-solid-gray-420); padding: 10px 16px; background: var(--color-key-50); font-size: .8125rem; }
.selection-bar.is-active { display: flex; }
.selection-count { font-weight: 700; }

.panel-table { width: 100%; row-gap: 0; font-size: .8125rem; }
.panel-table .dads-table__table { width: 100%; }
.panel-table .dads-table__table :is(td, th) { padding: 11px 14px; vertical-align: middle; }
.panel-table .dads-table__col-header { white-space: nowrap; cursor: pointer; user-select: none; }
.panel-table .dads-table__col-header.is-sortable::after { content: "\2195"; margin-left: 4px; color: var(--color-neutral-solid-gray-536); font-weight: 400; }
.panel-table .dads-table__col-header[aria-sort="ascending"]::after { content: "\2191"; color: var(--color-key-900); }
.panel-table .dads-table__col-header[aria-sort="descending"]::after { content: "\2193"; color: var(--color-key-900); }
.panel-table td:last-child, .panel-table th:last-child { white-space: nowrap; }
.panel-table .dads-chip-label { min-height: 26px; border-radius: 6px; padding: 2px 6px; font-size: .75rem; }
.panel-table tbody tr[hidden] { display: none; }
.row-actions { display: flex; gap: 6px; }
.thumb-cell { display: flex; align-items: center; gap: 8px; }
.thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: 4px;
  background: var(--color-neutral-solid-gray-50);
  color: var(--color-neutral-solid-gray-700);
  font-size: .625rem;
  overflow: hidden;
}
.thumb[data-state="failed"] { border-color: var(--color-semantic-error-1); color: var(--color-semantic-error-1); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--color-neutral-solid-gray-420); font-size: .8125rem; color: var(--color-neutral-solid-gray-700); }
.pagination-pages { display: flex; gap: 4px; }
.pagination-pages button { min-width: 30px; height: 30px; border: 1px solid var(--color-neutral-solid-gray-420); border-radius: 6px; background: var(--color-neutral-white); cursor: pointer; font: inherit; }
.pagination-pages button[aria-current="true"] { background: var(--color-key-900); border-color: var(--color-key-900); color: var(--color-neutral-white); font-weight: 700; }
.empty-row { padding: 32px 16px; text-align: center; color: var(--color-neutral-solid-gray-700); }

/* フォーム */
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.field-grid.is-single { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend { font-size: .8125rem; font-weight: 700; padding: 0; }
.field .hint { margin: 0; color: var(--color-neutral-solid-gray-700); font-size: .75rem; }
.field .error-text { margin: 0; color: var(--color-semantic-error-1); font-size: .75rem; font-weight: 700; }
.field input[type="text"], .field input[type="password"], .field input[type="number"], .field input[type="date"], .field input[type="time"], .field input[type="datetime-local"], .field select, .field textarea {
  border: 1px solid var(--color-neutral-solid-gray-536);
  border-radius: 6px;
  padding: 9px 12px;
  font: inherit;
  color: var(--color-neutral-solid-gray-900);
  background: var(--color-neutral-white);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-key-900); outline-offset: 1px; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--color-semantic-error-1); }
.radio-row, .checkbox-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 8px 0 0; }
.radio-row label, .checkbox-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: .875rem; }
fieldset { border: 0; margin: 0; padding: 0; }

/* トグルスイッチ */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .8125rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 38px; height: 22px; border-radius: 999px; background: var(--color-neutral-solid-gray-420); transition: background .15s ease; flex: 0 0 auto; position: relative; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-neutral-white); transition: transform .15s ease; }
.switch input:checked + .track { background: var(--color-key-900); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--color-key-900); outline-offset: 2px; }

/* ダイアログ・モーダル */
dialog.modal { border: 0; border-radius: 12px; padding: 0; width: min(560px, 92vw); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
dialog.modal.is-wide { width: min(880px, 94vw); }
dialog.modal::backdrop { background: rgba(20,22,26,.5); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-neutral-solid-gray-420); padding: 16px 20px; }
.modal-header h2 { margin: 0; font-size: 1.125rem; }
.modal-close { border: 0; background: none; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--color-neutral-solid-gray-700); padding: 4px; }
.modal-body { padding: 20px; max-height: 65vh; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--color-neutral-solid-gray-420); padding: 14px 20px; }
.confirm-body { display: flex; gap: 12px; align-items: flex-start; padding: 20px; }
.confirm-icon { color: var(--color-semantic-error-1); flex: 0 0 auto; }
.confirm-body p { margin: 0 0 6px; }
.confirm-body .hint { margin: 0; color: var(--color-neutral-solid-gray-700); font-size: .8125rem; }

/* トースト */
.toast-region { position: fixed; top: 90px; right: 24px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: min(360px, 90vw); }
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-left: 4px solid var(--color-semantic-success-2);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--color-neutral-white);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  font-size: .8125rem;
  animation: toast-in .18s ease-out;
}
.toast[data-type="error"] { border-left-color: var(--color-semantic-error-1); }
.toast strong { display: block; margin-bottom: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* カード類（ホーム） */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.metric-card { min-height: 124px; border: 1px solid var(--color-neutral-solid-gray-420); border-radius: 16px; padding: 18px 20px; background: var(--color-neutral-white); }
.metric-title { margin: 0; color: var(--color-neutral-solid-gray-700); font-size: .875rem; font-weight: 700; }
.metric-value { margin: 7px 0 2px; font-size: 1.8rem; font-weight: 700; line-height: 1.35; }
.metric-unit { font-size: .875rem; font-weight: 400; }
.metric-note { margin: 0; color: var(--color-neutral-solid-gray-700); font-size: .75rem; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; margin-bottom: 20px; }
.quick-actions { display: flex; align-items: center; gap: 12px; border: 1px solid var(--color-neutral-solid-gray-420); border-radius: 12px; padding: 16px; background: var(--color-neutral-white); margin-bottom: 20px; }
.quick-actions h2 { flex: 0 0 auto; margin: 0 8px 0 0; font-size: 1rem; }
.quick-actions .dads-button { font-size: .875rem; }
.home-notification { margin-bottom: 20px; padding-top: 14px; padding-bottom: 16px; }
.home-notification .dads-notification-banner__icon { width: 32px; height: 32px; }
.home-notification .dads-notification-banner__heading-text { font-size: 1rem; }
.home-notification .dads-notification-banner__body { font-size: .875rem; }
.home-notification .dads-notification-banner__actions { align-self: center; }
.home-notification[hidden] { display: none; }

/* ステップ（配信画面） */
.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 8px; color: var(--color-neutral-solid-gray-700); font-size: .8125rem; }
.steps li .num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-neutral-solid-gray-536); font-weight: 700; font-size: .75rem; }
.steps li.is-current { color: var(--color-key-900); font-weight: 700; }
.steps li.is-current .num { background: var(--color-key-900); border-color: var(--color-key-900); color: var(--color-neutral-white); }
.steps li.is-done .num { background: var(--color-semantic-success-2); border-color: var(--color-semantic-success-2); color: var(--color-neutral-white); }
.steps .sep { width: 24px; height: 1px; background: var(--color-neutral-solid-gray-420); }

.card { border: 1px solid var(--color-neutral-solid-gray-420); border-radius: 12px; padding: 18px 20px; background: var(--color-neutral-white); margin-bottom: 16px; }
.card h2 { margin: 0 0 12px; font-size: 1.0625rem; }
.card-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

.preview-frame { display: grid; place-items: center; min-height: 220px; border: 1px dashed var(--color-neutral-solid-gray-536); border-radius: 8px; background: var(--color-neutral-solid-gray-50); color: var(--color-neutral-solid-gray-700); font-size: .8125rem; }
.dropzone { display: grid; place-items: center; gap: 6px; min-height: 140px; border: 1px dashed var(--color-neutral-solid-gray-536); border-radius: 8px; background: var(--color-neutral-solid-gray-50); color: var(--color-neutral-solid-gray-700); font-size: .8125rem; text-align: center; padding: 16px; }

.tag-chip-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip-picker label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .8125rem;
  cursor: pointer;
}
.tag-chip-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-chip-picker input:checked + span { font-weight: 700; }
.tag-chip-picker label:has(input:checked) { border-color: var(--color-key-900); background: var(--color-key-50); color: var(--color-key-900); }
.tag-group + .tag-group { margin-top: 14px; }
.tag-group-title { margin: 0 0 6px; color: var(--color-neutral-solid-gray-700); font-size: .75rem; font-weight: 700; }

.repeat-row { display: flex; align-items: flex-end; gap: 12px; border: 1px solid var(--color-neutral-solid-gray-420); border-radius: 8px; padding: 12px; margin-bottom: 10px; max-width: 620px; }
.repeat-row .field-grid { flex: 1; margin-bottom: 0; }

@media (max-width: 900px) {
  body { min-width: 0; }
  .app-header { grid-template-columns: 1fr auto; }
  .brand-area { border-right: 0; }
  .context-list, .sidebar { display: none; }
  .main { margin-left: 0; padding: 100px 20px 32px; }
  .metrics, .content-grid, .card-cols, .field-grid { grid-template-columns: 1fr; }
  .quick-actions { align-items: stretch; flex-direction: column; }
  .quick-actions .dads-button { width: 100%; }
}