:root {
  --color-primary: #4a90e2;
  --color-secondary: #357abd;
  --color-success: #4caf50;
  --color-success-dark: #45a049;
  --color-background: #f5f5f5;
  --color-white: #ffffff;
  --color-text: #333333;
  --color-border: #e0e0e0;
  --color-disabled: #cccccc;
  --color-progress: #4caf50;
  --color-link: #4a90e2;
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-large: 1.25rem;
  --spacing-xxsmall: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --border-radius: 0.25rem;
  --size-thinnest: 0.0625rem;
  --size-sidebar: 10rem;
  --size-gantt-cell: 1.875rem;
  --size-gantt-bar-height: 1.875rem;
  --size-gantt-label-width: 15.625rem;
  --toggle-size: 2.5rem;
  --toggle-icon-size: 1.25rem;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  color: var(--color-text);
}

.toggle {
  position: fixed;
  left: var(--spacing-small);
  top: var(--spacing-small);
  z-index: 1001;
  width: var(--toggle-size);
  height: var(--toggle-size);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: left 0.3s ease, transform 0.3s ease;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.toggle.sidebar-open {
  left: calc(var(--size-sidebar) - var(--toggle-size) / 2);
  transform: rotate(180deg);
}

.unit-sidebar {
  position: fixed;
  top: 0;
  left: calc(-1 * var(--size-sidebar));
  z-index: 1000;
  width: var(--size-sidebar);
  height: 100vh;
  padding-block-start: calc(var(--toggle-size) + var(--spacing-small));
  padding-block-end: var(--spacing-small);
  padding-inline: var(--spacing-small);
  background-color: var(--color-white);
  border-inline-end: var(--size-thinnest) solid var(--color-border);
  transition: left 0.3s ease;
  overflow-y: auto;
  box-shadow: 0.25rem 0 0.5rem rgba(0, 0, 0, 0.1);
}

.unit-sidebar.open {
  left: 0;
}

.unit-sidebar .title {
  font-size: var(--font-size-base);
  margin-block-end: var(--spacing-small);
}

.unit-sidebar .list {
  list-style-type: none;
  padding: 0;
}

.unit-sidebar .item {
  margin-block-end: var(--spacing-xxsmall);
}

.unit-sidebar .link {
  display: flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-small);
  padding: var(--spacing-xxsmall);
  border-radius: var(--border-radius);
  transition: background-color 0.2s ease;
}

.unit-sidebar .link:hover,
.unit-sidebar .link.active {
  background-color: var(--color-background);
}

.unit-sidebar .logout {
  margin-block-start: var(--spacing-medium);
}

.unit-main {
  padding: var(--spacing-medium);
  padding-left: calc(var(--spacing-medium) + var(--toggle-size));
  transition: padding-left 0.3s ease;
}

.unit-main.sidebar-open {
  padding-left: calc(var(--size-sidebar) + var(--spacing-medium));
}

.unit-main .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--spacing-medium);
}

.unit-main .header .title {
  margin: 0;
  font-size: var(--font-size-large);
}

.unit-gantt,
.unit-works,
.unit-search,
.unit-clients,
.unit-client-details,
.unit-contacts,
.unit-related-links {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  margin-block-end: var(--spacing-large);
  box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
  overflow-x: auto;
}

.unit-gantt .title,
.unit-works .title {
  font-size: var(--font-size-base);
  margin-block-end: var(--spacing-medium);
}

.unit-gantt .controls {
  margin-block-end: var(--spacing-medium);
}

.unit-gantt .container {
  display: flex;
  overflow: hidden;
  border: var(--size-thinnest) solid var(--color-border);
  margin-block-start: var(--spacing-large);
}

.unit-gantt .labels {
  padding-top: 24px;
  margin-block-start: 1.875rem;
  width: var(--size-gantt-label-width);
  background-color: var(--color-white);
  border-inline-end: var(--size-thinnest) solid var(--color-border);
  z-index: 2;
  position: sticky;
  left: 0;
}

.unit-gantt .label {
  height: var(--size-gantt-bar-height);
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-medium);
  border-block-end: var(--size-thinnest) solid var(--color-border);
  font-size: var(--font-size-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-gantt .chart {
  flex-grow: 1;
  overflow-x: auto;
  position: relative;
}

.unit-gantt .header {
  display: flex;
  border-block-end: var(--size-thinnest) solid var(--color-border);
  position: sticky;
  top: 0;
  background-color: var(--color-white);
  z-index: 1;
  margin-bottom: 0rem;
}

.unit-gantt .header-cell,
.unit-gantt .grid-line,
.unit-gantt .weekend {
  width: var(--size-gantt-cell);
  min-width: var(--size-gantt-cell);
  max-width: var(--size-gantt-cell);
  box-sizing: border-box;
}

.unit-gantt .header-cell {
  text-align: center;
  font-size: var(--font-size-small);
  border-right: var(--size-thinnest) solid var(--color-border);
}

.unit-gantt .header-cell .month {
  font-weight: bold;
}

.unit-gantt .header-cell .day {
  font-size: var(--font-size-small);
}

.unit-gantt .header-cell .weekday {
  font-size: 0.625rem;
}

.unit-gantt .body {
  position: relative;
}

.unit-gantt .row {
  display: flex;
  height: var(--size-gantt-bar-height);
  border-block-end: var(--size-thinnest) solid var(--color-border);
  position: relative;
}

.unit-gantt .bar {
  height: 1.25rem;
  background-color: var(--color-primary);
  border-radius: var(--border-radius);
  position: absolute;
  top: 0.3125rem;
}

.unit-gantt .grid-line {
  border-right: var(--size-thinnest) solid var(--color-border);
  height: 100%;
  position: absolute;
  top: 0;
}

.unit-gantt .weekend {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.05);
}

.unit-works .table,
.unit-clients .table,
.info-table,
.contacts-table {
  padding-top: var(--spacing-small);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.unit-works .sort,
.unit-works td,
.unit-clients .sort,
.unit-clients td,
.info-table th,
.info-table td,
.contacts-table th,
.contacts-table td {
  text-align: left;
  padding: var(--spacing-small);
  border-bottom: var(--size-thinnest) solid var(--color-border);
}

.unit-works .sort,
.unit-clients .sort,
.info-table th,
.contacts-table th {
  background-color: var(--color-background);
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.unit-works .sort:hover,
.unit-clients .sort:hover {
  background-color: var(--color-border);
}

.unit-works .sort i,
.unit-clients .sort i {
  margin-inline-start: var(--spacing-small);
}

.unit-works .progress-bar {
  width: 100%;
  background-color: var(--color-border);
  height: 1.25rem;
  border-radius: 0.625rem;
  overflow: hidden;
}

.unit-works .progress {
  height: 100%;
  background-color: var(--color-progress);
}

.pagination {
  display: flex;
  justify-content: center;
  margin-block-start: var(--spacing-large);
  gap: var(--spacing-small);
}

.pagination button {
  padding: var(--spacing-small) var(--spacing-medium);
  background-color: var(--color-background);
  color: var(--color-text);
  border: var(--size-thinnest) solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination button:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination button:disabled {
  background-color: var(--color-disabled);
  color: var(--color-text);
  cursor: not-allowed;
}

.unit-search .form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-medium);
}

.unit-search .form-group {
  flex: 1 1 200px;
}

.unit-search .label {
  display: block;
  margin-block-end: var(--spacing-small);
  font-weight: bold;
}

.unit-search .input {
  width: 100%;
  padding: var(--spacing-small);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: border-color 0.3s ease;
}

.unit-search .input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.unit-search .form-actions {
  display: flex;
  gap: var(--spacing-small);
  align-items: flex-end;
}

.button {
  padding: var(--spacing-small) var(--spacing-medium);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  font-weight: bold;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

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

.button-secondary {
  background-color: var(--color-background);
  color: var(--color-text);
}

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

.button-success {
  background-color: var(--color-success);
  color: var(--color-white);
}

.button-success:hover {
  background-color: var(--color-success-dark);
}

.link {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.3s ease;
}

.link:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

#add-client {
  margin: 0;
}

.unit-works .status {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
  font-size: var(--font-size-small);
  font-weight: bold;
}

.unit-works .status-ongoing {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.unit-works .status-planned {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.unit-works .status-completed {
  background-color: var(--color-success);
  color: var(--color-white);
}

.unit-search input[type="date"] {
  width: 100%;
  padding: var(--spacing-small);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: border-color 0.3s ease;
}

.unit-search input[type="date"]:focus {
  outline: none;
  border-color: var(--color-primary);
}

.unit-search select {
  width: 100%;
  padding: var(--spacing-small);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  transition: border-color 0.3s ease;
}

.unit-search select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* 発注元業者詳細の編集と削除ボタンの配置 */
.unit-client-details {
  position: relative;
}

.unit-client-details .actions {
  position: absolute;
  top: var(--spacing-medium);
  right: var(--spacing-medium);
}

/* 編集モードのスタイル */
.editable.editing {
  border: 1px solid var(--color-primary);
  padding: 8px 12px;
  border-radius: 3px;
  background-color: #f0f8ff;
  display: inline-block;
  min-width: 200px;
}

/* ボタンのスタイル */
.button-edit,
.button-save,
.button-cancel,
.button-danger {
  padding: 8px 12px;
  margin-right: 5px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.button-edit {
  background-color: #f0f0f0;
  color: #333;
}

.button-save {
  background-color: #4CAF50;
  color: white;
}

.button-cancel {
  background-color: #f44336;
  color: white;
}

.button-danger {
  background-color: #dc3545;
  color: white;
}

.button-edit:hover,
.button-save:hover,
.button-cancel:hover,
.button-danger:hover {
  opacity: 0.8;
}

/* アイコンのスタイル */
.button i {
  margin-right: 5px;
}

/* 編集可能な要素のホバー効果 */
.editable:hover {
  background-color: #f5f5f5;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .unit-client-details .actions {
    position: static;
    margin-bottom: var(--spacing-medium);
  }

  .button-edit,
  .button-save,
  .button-cancel,
  .button-danger {
    margin-bottom: 5px;
  }

  .info-table,
  .contacts-table {
    font-size: 14px;
  }

  .info-table th,
  .contacts-table th {
    white-space: nowrap;
  }
}

/* フォーカス時のスタイル */
.editable:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 保存ボタンのアニメーション */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.button-save:active {
  animation: pulse 0.3s ease-in-out;
}

/* モーダルのスタイル */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: var(--color-white);
  margin: 15% auto;
  padding: var(--spacing-large);
  border: var(--size-thinnest) solid var(--color-border);
  width: 50%;
  border-radius: var(--border-radius);
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-small);
  margin-top: var(--spacing-medium);
}

/* フォームのスタイル */
.form-group {
  margin-bottom: var(--spacing-medium);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-small);
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="number"] {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
}

.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="url"]:focus,
.form-group input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* エラーメッセージのスタイル */
.error-message {
  color: #dc3545;
  font-size: var(--font-size-small);
  margin-top: var(--spacing-xxsmall);
}

/* ローディングインジケーターのスタイル */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ツールチップのスタイル */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* アクセシビリティ向上のためのスタイル */
.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;
}

/* 印刷用スタイル */
@media print {
  .unit-sidebar,
  .actions,
  .button {
    display: none;
  }

  .unit-main {
    padding: 0;
  }

  .info-table,
  .contacts-table {
    page-break-inside: avoid;
  }
}
/* 工事詳細ページ特有のスタイル */
.unit-work-details {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  margin-bottom: var(--spacing-large);
  box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
}

.unit-work-details .actions {
  margin-bottom: var(--spacing-medium);
  text-align: right;
}

/* タブのスタイル */
.unit-tabs {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-large);
}

.tab-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.tab-item {
  padding: var(--spacing-small) var(--spacing-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}
.tab-item.active {
  border-bottom-color: var(--color-primary);
}

.tab-content {
  display: none;
  padding: var(--spacing-medium);
}

.tab-content.active {
  display: block;
}

/* 請求書テーブルと作業員テーブルのスタイル */
.invoice-table,
.workers-table,
.info-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: var(--spacing-medium);
}

.invoice-table th,
.invoice-table td,
.workers-table th,
.workers-table td,
.info-table th,
.info-table td {
  text-align: left;
  padding: var(--spacing-small);
  border-bottom: var(--size-thinnest) solid var(--color-border);
}

.invoice-table th,
.workers-table th,
.info-table th {
  background-color: var(--color-background);
  font-weight: bold;
}

/* リンクのスタイル */
.client-link,
.employee-link,
.subcontractor-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.client-link:hover,
.employee-link:hover,
.subcontractor-link:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* 編集モード時のリンクスタイル */
.editable.editing.client-link,
.editable.editing.employee-link,
.editable.editing.subcontractor-link {
    color: var(--color-text);
    text-decoration: none;
    pointer-events: none;
}

/* 進捗バーのスタイル */
.progress-bar {
  width: 100%;
  background-color: var(--color-border);
  height: 1.25rem;
  border-radius: 0.625rem;
  overflow: hidden;
  margin-bottom: var(--spacing-xxsmall);
}

.progress {
  height: 100%;
  background-color: var(--color-progress);
  transition: width 0.3s ease;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .tab-list {
    flex-direction: column;
  }

  .tab-item {
    border-bottom: none;
    border-left: 2px solid transparent;
  }

  .tab-item.active {
    border-bottom-color: transparent;
    border-left-color: var(--color-primary);
  }

  .unit-work-details .actions {
    text-align: center;
  }

  .info-table,
  .invoice-table,
  .workers-table {
    font-size: var(--font-size-small);
  }

  .info-table th,
  .invoice-table th,
  .workers-table th {
    white-space: nowrap;
  }
}

/* 下請け業者一覧ページ特有のスタイル */
.unit-subcontractors {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  margin-bottom: var(--spacing-large);
  box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
  overflow-x: auto;
}

.unit-subcontractors .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.unit-subcontractors .sort,
.unit-subcontractors td {
  text-align: left;
  padding: var(--spacing-small);
  border-bottom: var(--size-thinnest) solid var(--color-border);
}

.unit-subcontractors .sort {
  background-color: var(--color-background);
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.unit-subcontractors .sort:hover {
  background-color: var(--color-border);
}

.unit-subcontractors .sort i {
  margin-inline-start: var(--spacing-small);
}

/* 下請け業者詳細ページ特有のスタイル */
.unit-subcontractor-details {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  margin-bottom: var(--spacing-large);
  box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
}

.unit-subcontractor-details .actions {
  margin-bottom: var(--spacing-medium);
  text-align: right;
}

.unit-subcontractor-details .related-links {
  margin-top: var(--spacing-large);
}

/* 下請け業者カテゴリのスタイル */
.unit-subcontractors .category,
.unit-subcontractor-details .category {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
  font-size: var(--font-size-small);
  font-weight: bold;
}

.unit-subcontractors .category-individual,
.unit-subcontractor-details .category-individual {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.unit-subcontractors .category-corporation,
.unit-subcontractor-details .category-corporation {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* 下請け従業員一覧ページ特有のスタイル */
.unit-employees {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  margin-bottom: var(--spacing-large);
  box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
  overflow-x: auto;
}

.unit-employees .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.unit-employees th,
.unit-employees td {
  text-align: left;
  padding: var(--spacing-small);
  border-bottom: var(--size-thinnest) solid var(--color-border);
}

.unit-employees .sort {
  background-color: var(--color-background);
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.unit-employees .sort:hover {
  background-color: var(--color-border);
}

.unit-employees .sort i {
  margin-inline-start: var(--spacing-small);
}

/* 保険証有効期限切れの従業員のスタイル */
.unit-employees td.expired {
  color: #ff0000; /* 赤色 */
  font-weight: bold;
}

/* 健康診断受診日が6ヶ月以上前の従業員のスタイル */
.unit-employees td.warning {
  color: #ffa500; /* オレンジ色 */
  font-weight: bold;
}

/* 所属事業者のカテゴリスタイル */
.unit-employees .category {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
  font-size: var(--font-size-small);
  font-weight: bold;
}

.unit-employees .category-individual {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.unit-employees .category-corporation {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* 従業員詳細ページ特有のスタイル */
.unit-employee-details {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  margin-bottom: var(--spacing-large);
  box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
}

.unit-employee-details .actions {
  margin-bottom: var(--spacing-medium);
  text-align: right;
}

/* タブのスタイル */
.unit-tabs {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-large);
}

.tab-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.tab-item {
  padding: var(--spacing-small) var(--spacing-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.tab-item.active {
  border-bottom-color: var(--color-primary);
}

.tab-content {
  display: none;
  padding: var(--spacing-medium);
}

.tab-content.active {
  display: block;
}

/* 画像アップロードフォームのスタイル */
#insurance-card-image,
#accident-insurance-image {
  max-width: 100%;
  margin-bottom: var(--spacing-medium);
}

#insurance-card-upload-form,
#accident-insurance-upload-form {
  display: flex;
  gap: var(--spacing-small);
  align-items: center;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .tab-list {
    flex-direction: column;
  }

  .tab-item {
    border-bottom: none;
    border-left: 2px solid transparent;
  }

  .tab-item.active {
    border-bottom-color: transparent;
    border-left-color: var(--color-primary);
  }

  .unit-employee-details .actions {
    text-align: center;
  }

  .info-table {
    font-size: var(--font-size-small);
  }

  .info-table th {
    white-space: nowrap;
  }
}

/* 見積書ページ特有のスタイル */
.unit-estimates {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-large);
    margin-bottom: var(--spacing-large);
    box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
    overflow-x: auto;
}

.unit-estimates .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.unit-estimates .sort,
.unit-estimates td {
    text-align: left;
    padding: var(--spacing-small);
    border-bottom: var(--size-thinnest) solid var(--color-border);
}

.unit-estimates .sort {
    background-color: var(--color-background);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.unit-estimates .sort:hover {
    background-color: var(--color-border);
}

.unit-estimates .sort i {
    margin-inline-start: var(--spacing-small);
}

/* 見積書ステータスのスタイル */
.unit-estimates .status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    font-weight: bold;
}

.unit-estimates .status-sent {
    background-color: var(--color-success);
    color: var(--color-white);
}

.unit-estimates .status-pending {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

/* estimate.html 特有のスタイル */
.unit-estimate-details {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-large);
    margin-bottom: var(--spacing-large);
    box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
}

.unit-estimate-details .actions {
    margin-bottom: var(--spacing-medium);
    text-align: right;
}

.estimate-info,
.estimate-company-info,
.estimate-items,
.estimate-notes {
    margin-bottom: var(--spacing-large);
}

.estimate-items h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-medium);
}

#company-info,
#estimate-notes {
    width: 100%;
    resize: vertical;
}

.item-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-medium);
}

.item-table th,
.item-table td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-small);
    text-align: left;
}

.item-table th {
    background-color: var(--color-background);
}

.item-table input,
.item-table select {
    width: 100%;
    padding: 4px;
    border: none;
    background: transparent;
}

.item-table .delete-item {
    background: none;
    border: none;
    color: #ff0000;
    cursor: pointer;
}

.tax-settings {
    margin-bottom: var(--spacing-medium);
}

.total {
    text-align: right;
    font-weight: bold;
    font-size: var(--font-size-large);
    margin-bottom: var(--spacing-medium);
}

.pdf-preview {
    background-color: var(--color-background);
    padding: var(--spacing-large);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

@media (max-width: 768px) {
    .item-table {
        font-size: var(--font-size-small);
    }
    
    .item-table th,
    .item-table td {
        padding: var(--spacing-xxsmall);
    }
}

/* estimate.html 特有のスタイル（続き） */
.unit-estimate-details {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-large);
    margin-bottom: var(--spacing-large);
    box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
}

.unit-estimate-details .actions {
    margin-bottom: var(--spacing-medium);
    text-align: right;
}

.estimate-info,
.estimate-company-info,
.estimate-items,
.estimate-notes {
    margin-bottom: var(--spacing-large);
}

.estimate-items h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-medium);
}

.info-box {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
}

#company-info,
#estimate-notes {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-small);
}

.item-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-medium);
}

.item-table th,
.item-table td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-small);
    text-align: left;
}

.item-table th {
    background-color: var(--color-background);
}

.item-table input,
.item-table select {
    width: 100%;
    padding: 4px;
    border: none;
    background: transparent;
}

.item-table .delete-item {
    background: none;
    border: none;
    color: #ff0000;
    cursor: pointer;
}

.tax-settings {
    margin-bottom: var(--spacing-medium);
}

.tax-settings input[type="number"],
.tax-settings select {
    padding: var(--spacing-xxsmall);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-right: var(--spacing-small);
}

.total {
    text-align: right;
    font-weight: bold;
    font-size: var(--font-size-large);
    margin-bottom: var(--spacing-medium);
}

.pdf-preview {
    background-color: var(--color-background);
    padding: var(--spacing-large);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

/* 編集モード時のスタイル */
.editable-details.editing,
.editable-items.editing {
    background-color: #f0f8ff;
    border: 1px solid var(--color-primary);
}

/* 日付入力フィールドのスタイル */
input[type="date"].editable-details {
    padding: var(--spacing-xxsmall);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: inherit;
}

input[type="date"].editable-details:disabled {
    background-color: var(--color-background);
    color: var(--color-text);
}

@media (max-width: 768px) {
    .item-table {
        font-size: var(--font-size-small);
    }
    
    .item-table th,
    .item-table td {
        padding: var(--spacing-xxsmall);
    }

    .tax-settings {
        display: flex;
        flex-direction: column;
    }

    .tax-settings input[type="number"],
    .tax-settings select {
        margin-bottom: var(--spacing-small);
    }
}

/* 請求書ページ特有のスタイル */
.unit-invoices {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-large);
    margin-bottom: var(--spacing-large);
    box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
    overflow-x: auto;
}

.unit-invoices .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.unit-invoices .sort,
.unit-invoices td {
    text-align: left;
    padding: var(--spacing-small);
    border-bottom: var(--size-thinnest) solid var(--color-border);
}

.unit-invoices .sort {
    background-color: var(--color-background);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.unit-invoices .sort:hover {
    background-color: var(--color-border);
}

.unit-invoices .sort i {
    margin-inline-start: var(--spacing-small);
}

/* 請求書ステータスのスタイル */
.unit-invoices .status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    font-weight: bold;
}

.unit-invoices .status-paid {
    background-color: var(--color-success);
    color: var(--color-white);
}

.unit-invoices .status-unpaid {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

/* ... (previous styles remain unchanged) ... */

/* 請求書ページ特有のスタイル */
.unit-invoices {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-large);
    margin-bottom: var(--spacing-large);
    box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
    overflow-x: auto;
}

.unit-invoices .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.unit-invoices .sort,
.unit-invoices td {
    text-align: left;
    padding: var(--spacing-small);
    border-bottom: var(--size-thinnest) solid var(--color-border);
}

.unit-invoices .sort {
    background-color: var(--color-background);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.unit-invoices .sort:hover {
    background-color: var(--color-border);
}

.unit-invoices .sort i {
    margin-inline-start: var(--spacing-small);
}

/* 請求書ステータスのスタイル */
.unit-invoices .status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    font-weight: bold;
}

.unit-invoices .status-unpaid {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.unit-invoices .status-paid {
    background-color: var(--color-success);
    color: var(--color-white);
}

/* invoice.html 特有のスタイル */
.unit-invoice-details {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-large);
    margin-bottom: var(--spacing-large);
    box-shadow: 0 var(--size-thinnest) 0.1875rem rgba(0,0,0,0.12);
}

.unit-invoice-details .actions {
    margin-bottom: var(--spacing-medium);
    text-align: right;
}

.invoice-info,
.invoice-company-info,
.invoice-items,
.invoice-notes {
    margin-bottom: var(--spacing-large);
}

.invoice-items h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-medium);
}

#company-info,
#invoice-notes {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-small);
}

.item-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-medium);
}

.item-table th,
.item-table td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-small);
    text-align: left;
}

.item-table th {
    background-color: var(--color-background);
}

.item-table input,
.item-table select {
    width: 100%;
    padding: 4px;
    border: none;
    background: transparent;
}

.item-table .delete-item {
    background: none;
    border: none;
    color: #ff0000;
    cursor: pointer;
}

.tax-settings {
    margin-bottom: var(--spacing-medium);
}

.tax-settings input[type="number"],
.tax-settings select {
    padding: var(--spacing-xxsmall);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-right: var(--spacing-small);
}

.total {
    text-align: right;
    font-weight: bold;
    font-size: var(--font-size-large);
    margin-bottom: var(--spacing-medium);
}

.pdf-preview {
    background-color: var(--color-background);
    padding: var(--spacing-large);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

/* 編集モード時のスタイル */
.editable-details.editing,
.editable-items.editing {
    background-color: #f0f8ff;
    border: 1px solid var(--color-primary);
}

/* 日付入力フィールドのスタイル */
input[type="date"].editable-details {
    padding: var(--spacing-xxsmall);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: inherit;
}

input[type="date"].editable-details:disabled {
    background-color: var(--color-background);
    color: var(--color-text);
}

@media (max-width: 768px) {
    .item-table {
        font-size: var(--font-size-small);
    }
    
    .item-table th,
    .item-table td {
        padding: var(--spacing-xxsmall);
    }

    .tax-settings {
        display: flex;
        flex-direction: column;
    }

    .tax-settings input[type="number"],
    .tax-settings select {
        margin-bottom: var(--spacing-small);
    }
}

/* statistics.html 特有のスタイル */
.dashboard-controls {
    margin-bottom: var(--spacing-medium);
    padding: 0 var(--spacing-medium);
}

.dashboard-controls select {
    padding: var(--spacing-small);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-medium);
    padding: var(--spacing-medium);
}

.dashboard-item {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-medium);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-item h3 {
    margin-bottom: var(--spacing-small);
    color: var(--color-primary);
}

.chart-container {
    height: 300px;
    position: relative;
}

.full-width {
    grid-column: 1 / -1;
}

.tabs {
    display: flex;
    margin-bottom: var(--spacing-small);
}

.tab-button {
    padding: var(--spacing-small) var(--spacing-medium);
    background-color: var(--color-background);
    border: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    cursor: pointer;
}

.tab-button.active {
    background-color: var(--color-white);
    border-bottom: 2px solid var(--color-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .chart-container {
        height: 250px;
    }

    .tabs {
        flex-direction: column;
    }

    .tab-button {
        width: 100%;
        text-align: left;
        border-radius: 0;
    }
}

.dashboard-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-medium);
    padding: var(--spacing-medium);
}

.dashboard-item {
    flex: 1 1 calc(33.333% - var(--spacing-medium));
    min-width: 300px;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-medium);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-item.full-width {
    flex-basis: 100%;
}

.chart-controls {
    margin-bottom: var(--spacing-small);
}

.chart-container {
    height: 300px;
    position: relative;
}

@media (max-width: 1200px) {
    .dashboard-item {
        flex-basis: calc(50% - var(--spacing-medium));
    }
}

@media (max-width: 768px) {
    .dashboard-item {
        flex-basis: 100%;
    }
}

/* 期間選択ボックスのスタイル */
.chart-controls {
    margin-bottom: var(--spacing-medium);
}

.period-selector {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    color: var(--color-text);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.period-selector:hover {
    border-color: var(--color-primary);
}

.period-selector:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* PDF出力ボタンのスタイル */
.export-buttons {
    display: flex;
    gap: 1rem;
}

/* PDF出力ボタンのスタイル */
.export-buttons .button {
    display: flex;
    gap: 1rem;
    margin-left: auto;
}


/* 情報セクション全般のスタイル */
.info-section {
    margin-bottom: var(--spacing-large);
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: var(--font-size-base);
    padding: var(--spacing-medium);
    margin: 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title button {
    font-size: var(--font-size-small);
}

/* 工事ステータス関連のスタイル */
.status-section {
    padding: var(--spacing-medium);
}

.status-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
}

.status-label {
    font-weight: bold;
}

.status-badge {
    display: inline-block;
    padding: var(--spacing-xxsmall) var(--spacing-small);
    border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    font-weight: bold;
    color: var(--color-white);
}

/* ステータスの種類に応じた色分け */
.status-未着工 {
    background-color: var(--color-secondary);
}

.status-着工準備中 {
    background-color: #ffa500;
}

.status-進行中 {
    background-color: var(--color-primary);
}

.status-完了 {
    background-color: var(--color-success);
}

/* ステータス履歴のタイムライン */
.status-timeline {
    margin-top: var(--spacing-medium);
    padding-left: var(--spacing-medium);
    border-left: 2px solid var(--color-border);
}

.status-timeline-item {
    position: relative;
    margin-bottom: var(--spacing-medium);
    padding-left: var(--spacing-medium);
}

.status-timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
}

.status-date {
    font-size: var(--font-size-small);
    color: #666;
    margin-bottom: var(--spacing-xxsmall);
}

.status-comment {
    margin-top: var(--spacing-xxsmall);
    font-size: var(--font-size-small);
}

/* 下請け業者一覧のスタイル */
.subcontractors-list {
    padding: var(--spacing-medium);
}

.subcontractor-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-small);
    background-color: var(--color-white);
}

.subcontractor-info {
    flex-grow: 1;
}

.subcontractor-info h4 {
    margin: 0 0 var(--spacing-xxsmall) 0;
    font-size: var(--font-size-base);
}

.subcontractor-info p {
    margin: var(--spacing-xxsmall) 0;
    font-size: var(--font-size-small);
    color: #666;
}

.subcontractor-actions {
    display: flex;
    gap: var(--spacing-small);
}

/* 下請け業者追加モーダルのスタイル */
.modal-content h4 {
    margin-top: 0;
    margin-bottom: var(--spacing-medium);
}

.form-group {
    margin-bottom: var(--spacing-medium);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xxsmall);
    font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-small);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* 編集モード時のスタイル */
.editable.editing {
    padding: var(--spacing-xxsmall);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    background-color: rgba(74, 144, 226, 0.05);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .subcontractor-item {
        flex-direction: column;
    }

    .subcontractor-actions {
        margin-top: var(--spacing-small);
        justify-content: flex-end;
        width: 100%;
    }

    .status-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-group input,
    .form-group select {
        max-width: 100%;
    }
}

/* アニメーション */
.subcontractor-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.subcontractor-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* エラー表示のスタイル */
.error-message {
    color: #dc3545;
    font-size: var(--font-size-small);
    margin-top: var(--spacing-xxsmall);
}

.form-group.has-error input,
.form-group.has-error select {
    border-color: #dc3545;
}

/* ツールチップのスタイル */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: var(--color-white);
    text-align: center;
    padding: var(--spacing-xxsmall) var(--spacing-small);
    border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* 印刷用スタイル */
@media print {
    .subcontractor-actions,
    .section-title button,
    .modal {
        display: none;
    }

    .info-section {
        break-inside: avoid;
        box-shadow: none;
    }

    .status-timeline {
        border-left-color: #000;
    }

    .status-badge {
        border: 1px solid #000;
    }
}


/* セクションヘッダーのスタイル */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-medium);
    border-bottom: 1px solid var(--color-border);
}

.section-actions {
    display: flex;
    gap: var(--spacing-small);
}

/* ステータスバッジのスタイル */
.status-badge {
    display: inline-block;
    padding: var(--spacing-small) var(--spacing-medium);
    border-radius: var(--border-radius);
    font-weight: bold;
    color: var(--color-white);
}

.status-未着工 { background-color: var(--color-secondary); }
.status-工事中 { background-color: var(--color-primary); }
.status-完了 { background-color: var(--color-success); }

/* 下請け業者テーブルのスタイル */
.subcontractors-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-small);
}

.subcontractors-table th,
.subcontractors-table td {
    padding: var(--spacing-small);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.subcontractors-table th {
    background-color: var(--color-background);
    font-weight: bold;
}

.subcontractors-table tr:hover {
    background-color: var(--color-background);
}

.subcontractors-table .action-buttons {
    display: flex;
    gap: var(--spacing-small);
}

/* フォーム要素のスタイル */
.status-select {
    width: 100%;
    padding: var(--spacing-small);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
}

/* 編集モード時のスタイル */
.section-editing .editable {
    background-color: rgba(74, 144, 226, 0.05);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    padding: 2px 4px;
}