/* admin.html 固有スタイル(共通トークンは style-shared.css を参照) */


  body {
    font-family: var(--font-family);
    margin: 0;
    padding: 20px 16px 40px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
  }

  .container { max-width: 1100px; margin: 0 auto; }

  .dashboard-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
    border-top: 4px solid var(--color-accent);
    padding: 0 14px;
    margin-bottom: 20px;
  }

  .dashboard-header-action {
    margin-left: auto;
  }

  .page-section {
    border-top: 4px solid var(--color-accent);
    padding-top: 20px;
    scroll-margin-top: 16px;
  }

  .page-section-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 12px;
  }

  h1 {
    font-size: 21px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
  }

  h2 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--color-text);
    border-left: 4px solid var(--color-accent);
    padding-left: 10px;
  }

  section h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
    border-left: 4px solid var(--color-accent);
    padding-left: 8px;
  }

  section {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 13px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  }

  label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--color-muted); }

  input[type="text"], input[type="password"], input[type="month"], input[type="date"], input[type="number"] {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fff;
  }

  input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
  }

  button {
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
    margin-right: 6px;
    min-height: 44px;
  }

  button.secondary { background: #fff; color: var(--color-primary); }
  button.danger { background: var(--danger-fg); border-color: var(--danger-fg); }

  input[type="file"] { display: none; }

  .file-label {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    cursor: pointer;
    margin: 10px 6px 0 0;
    min-height: 44px;
    box-sizing: border-box;
  }

  .file-label.secondary { background: #fff; color: var(--color-primary); }

  table.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 14px;
    table-layout: fixed;
  }
  table.admin-table th, table.admin-table td { border: 1px solid var(--color-border); padding: 6px 10px; text-align: left; }
  table.admin-table th { background: var(--color-primary-tint); color: var(--color-primary); font-weight: 700; }

  .staff-list-wrap table.admin-table th:nth-child(1),
  .staff-list-wrap table.admin-table td:nth-child(1) {
    width: 56px;
  }
  .staff-list-wrap table.admin-table th:nth-child(3),
  .staff-list-wrap table.admin-table td:nth-child(3) {
    width: 92px;
  }
  .staff-list-wrap table.admin-table th:nth-child(2),
  .staff-list-wrap table.admin-table td:nth-child(2) {
    width: auto;
  }

  .staff-list-wrap table.admin-table button {
    white-space: nowrap;
    padding: 6px 10px;
  }

  #submission-section-body {
    max-height: var(--scroll-area-height);
    overflow-y: auto;
  }

  #submission-section-body table.admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  #submission-section-body table.admin-table th:nth-child(1),
  #submission-section-body table.admin-table td:nth-child(1) {
    width: 56px;
  }
  #submission-section-body table.admin-table th:nth-child(2),
  #submission-section-body table.admin-table td:nth-child(2) {
    width: 140px;
  }
  #submission-section-body table.admin-table th:nth-child(3),
  #submission-section-body table.admin-table td:nth-child(3) {
    width: 180px;
  }

  .dashboard-columns {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  @media (min-width: 900px) {
    .dashboard-columns {
      flex-direction: row;
      align-items: flex-start;
      gap: 24px;
    }
    .dashboard-left {
      flex: 0 1 380px;
    }
    .dashboard-right {
      flex: 1 1 0%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      /* 高さはJSで.dashboard-leftに合わせて動的に設定する。
         JSが実行されるまでの初期値として、他の画面幅と同じ
         --scroll-area-height程度を仮の高さにしておく */
      height: var(--scroll-area-height);
    }
    .dashboard-right section {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    .dashboard-right .staff-section-columns {
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .dashboard-right .staff-list-wrap {
      flex: 1;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
    }
  }

  .dashboard-right .staff-controls {
    overflow-y: auto;
    min-height: 0;
  }

  .staff-controls button {
    margin-bottom: 4px;
  }

  .dashboard-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 28px 0;
  }

  .staff-backup-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 16px 0;
  }

  .backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .section-heading-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 12px;
  }

  .section-heading-row h2 {
    margin-bottom: 0;
  }

  .backup-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--color-primary-tint);
    color: var(--color-primary);
  }

  .staff-section-columns {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .staff-list-wrap {
    max-height: var(--scroll-area-height);
    overflow-y: auto;
  }

  .staff-list-wrap table.admin-table {
    margin-top: 0;
  }

  .staff-list-wrap table.admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  @media (min-width: 1300px) {
    .staff-section-columns {
      flex-direction: row;
      align-items: stretch;
      gap: 24px;
    }
    .staff-controls {
      flex: 0 1 240px;
    }
    .staff-list-wrap {
      flex: 1 1 0%;
      min-width: 0;
    }
  }

  .error-text { color: var(--danger-fg); font-size: 13px; margin-top: 6px; }
  .hint {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-muted);
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .status-badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
  .st-none { background: #EEECE6; color: var(--color-muted); }
  .st-leave { background: var(--safe-bg); color: var(--safe-fg); }
  .st-noleave { background: var(--color-primary-tint); color: var(--color-primary); }
  .tag-late { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: var(--warning-bg); color: var(--warning-fg); font-weight: 600; }

  #screen-login {
    max-width: 320px;
    margin: 60px auto;
  }

  code {
    word-break: break-all;
    background: var(--color-primary-tint);
    padding: 2px 6px;
    border-radius: 4px;
  }