/* アプリケーション全体のレイアウト */
.app-wrapper {
  display: flex;
  min-height: calc(100vh - 50px); /* ヘッダーの高さを仮に50pxとする */
}

.app-sidebar {
  width: 220px;
  flex-shrink: 0;
  background-color: #f8f9fa;
  border-right: 1px solid var(--border-color);
  padding: 20px 10px;
}

.app-navigation {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.app-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.app-navigation hr {
  margin: 10px 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}

.app-navigation li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  border-radius: 6px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.app-navigation li a:hover {
  background-color: var(--primary-light-color);
  color: var(--primary-dark-color);
}

/* 現在のページをハイライト */
.app-navigation .current-menu-item > a,
.app-navigation .current-page-ancestor > a {
  background-color: var(--primary-color);
  color: white;
  font-weight: bold;
  box-shadow: var(--shadow-md);
}

.app-navigation .current-menu-item > a:hover,
.app-navigation .current-page-ancestor > a:hover {
  background-color: var(--primary-dark-color);
  box-shadow: var(--shadow-md);
}

/* --- アイコン設定 --- */
.app-navigation li a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.content-area {
  flex-grow: 1;
  /* メインコンテンツエリアのデフォルトのパディングを削除 */
  padding: 0;
}

/* 既存の page-container の padding を調整 */
.page-container {
  padding: 2em;
}

/* ページタイトル */
.page-container > h1 {
  font-size: 2em;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--border-color);
}

/* 各アイコンのSVGをData URIとして設定 */
.menu-item.icon-dashboard > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5h-2v12h2V2zM4 4H2v5h2V4zm5 3H7v4h2v-4zm5-2h-2v7h2V5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5h-2v12h2V2zM4 4H2v5h2V4zm5 3H7v4h2v-4zm5-2h-2v7h2V5z'/%3E%3C/svg%3E");
}
.menu-item.icon-stats > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-4 0v-3H2v3h2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-4 0v-3H2v3h2z'/%3E%3C/svg%3E");
}
.menu-item.icon-employee > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.573.69.758 1.457.76 1.72l-.008.004a.274.274 0 0 1-.273.273H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.345 1.52-3.286.79-.645 1.608-1.182 2.37-1.543Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.573.69.758 1.457.76 1.72l-.008.004a.274.274 0 0 1-.273.273H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.345 1.52-3.286.79-.645 1.608-1.182 2.37-1.543Z'/%3E%3C/svg%3E");
}
.menu-item.icon-task > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z'/%3E%3Cpath d='M7 5.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm-2 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm1.5 3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm-2 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z'/%3E%3Cpath d='M7 5.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm-2 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm1.5 3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm-2 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
.menu-item.icon-seat > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z'/%3E%3C/svg%3E");
}
.menu-item.icon-data > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M3.904 1.777C4.978 1.289 6.427 1 8 1s3.022.289 4.096.777C13.125 2.269 14 3.519 14 5s-.875 2.731-1.904 3.223C11.022 8.711 9.573 9 8 9s-3.022-.289-4.096-.777C2.875 7.731 2 6.481 2 5s.875-2.731 1.904-3.223Z'/%3E%3Cpath d='M2 7v1c0 1.481.875 2.731 1.904 3.223C4.978 11.711 6.427 12 8 12s3.022-.289 4.096-.777C13.125 10.731 14 9.481 14 8V7c0-1.481-.875-2.731-1.904-3.223C11.022 3.289 9.573 3 8 3s-3.022.289-4.096.777C2.875 4.269 2 5.519 2 7Zm0 4v1c0 1.481.875 2.731 1.904 3.223C4.978 15.711 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.731 14 13.481 14 12v-1c0-1.481-.875-2.731-1.904-3.223C11.022 7.289 9.573 7 8 7s-3.022.289-4.096.777C2.875 8.269 2 9.519 2 11Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M3.904 1.777C4.978 1.289 6.427 1 8 1s3.022.289 4.096.777C13.125 2.269 14 3.519 14 5s-.875 2.731-1.904 3.223C11.022 8.711 9.573 9 8 9s-3.022-.289-4.096-.777C2.875 7.731 2 6.481 2 5s.875-2.731 1.904-3.223Z'/%3E%3Cpath d='M2 7v1c0 1.481.875 2.731 1.904 3.223C4.978 11.711 6.427 12 8 12s3.022-.289 4.096-.777C13.125 10.731 14 9.481 14 8V7c0-1.481-.875-2.731-1.904-3.223C11.022 3.289 9.573 3 8 3s-3.022.289-4.096.777C2.875 4.269 2 5.519 2 7Zm0 4v1c0 1.481.875 2.731 1.904 3.223C4.978 15.711 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.731 14 13.481 14 12v-1c0-1.481-.875-2.731-1.904-3.223C11.022 7.289 9.573 7 8 7s-3.022.289-4.096.777C2.875 8.269 2 9.519 2 11Z'/%3E%3C/svg%3E");
}
.menu-item.icon-settings > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.902 3.433 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.892 3.433-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527-1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.892-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.229-.774 1.636-.774 1.865 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.73-.398 1.59.383 1.21 1.21l-.16.292a1.873 1.873 0 0 0 1.115 2.692l.319.094c.774.229.774 1.636 0 1.865l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.398.73.383 1.59-1.21 1.21l-.292-.16a1.873 1.873 0 0 0-2.692 1.115l-.094.319c-.229.774-1.636.774-1.865 0l-.094-.319a1.873 1.873 0 0 0-2.693-1.115l-.291.16c-.73-.398-1.59-.383-1.21-1.21l.16-.292a1.873 1.873 0 0 0-1.115-2.692l-.319-.094c-.774-.229-.774-1.636 0-1.865l.319.094a1.873 1.873 0 0 0 1.115-2.693l-.16-.291c-.398-.73.383-1.59 1.21-1.21l.292.16a1.873 1.873 0 0 0 2.692-1.115l.094-.319z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.902 3.433 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.892 3.433-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527-1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.892-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.229-.774 1.636-.774 1.865 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.73-.398 1.59.383 1.21 1.21l-.16.292a1.873 1.873 0 0 0 1.115 2.692l.319.094c.774.229.774 1.636 0 1.865l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.398.73.383 1.59-1.21 1.21l-.292-.16a1.873 1.873 0 0 0-2.692 1.115l-.094.319c-.229.774-1.636.774-1.865 0l-.094-.319a1.873 1.873 0 0 0-2.693-1.115l-.291.16c-.73-.398-1.59-.383-1.21-1.21l.16-.292a1.873 1.873 0 0 0-1.115-2.692l-.319-.094c-.774-.229-.774-1.636 0-1.865l.319.094a1.873 1.873 0 0 0 1.115-2.693l-.16-.291c-.398-.73.383-1.59 1.21-1.21l.292.16a1.873 1.873 0 0 0 2.692-1.115l.094-.319z'/%3E%3C/svg%3E");
}

/* 区切り線用のスタイル */
.app-navigation .menu-item.divider {
  height: 1px;
  margin: 10px 5px;
  padding: 0;
  background-color: var(--border-color);
  list-style: none;
}
.app-navigation .menu-item.divider a {
  display: none; /* リンクテキストは非表示にする */
}