@charset "UTF-8";
/**
 * ラナイ請求DB - カスタムスタイル
 */

/* 基本スタイル（フッターは常に画面下端：コンテンツが短いときも） */
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  word-break: break-word;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.06em;
  padding-top: 56px;
}

.container {
  max-width: 1100px;
}

/* フォントサイズ */
.size14 { font-size: 14px; }
.size15 { font-size: 15px; }

/* スペーサー */
.mt-6 { margin-top: 4rem !important; }
.mt-7 { margin-top: 5rem !important; }
.mb-6 { margin-bottom: 4rem !important; }
.mb-7 { margin-bottom: 5rem !important; }

/* ナビゲーション */
.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 1) !important;
}

.navbar-nav .nav-link.active {
  color: #fff !important;
  font-weight: bold;
}

.navbar-expand-md .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}

/* PC：メニューが縦に潰れて1文字折り返しになるのを防ぐ（body の word-break 対策） */
@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav {
    flex-wrap: nowrap;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    white-space: nowrap;
  }
}

/* スマホのみ：ログアウト行を全幅にして中央寄せ */
@media (max-width: 767.98px) {
  .navbar-logout-toolbar {
    width: 100%;
  }
}

/* スマホ：ヘッダー内タイムカード直行（ハンバーガー左の大きい時計アイコン） */
.nav-time-quick .nav-time-quick-icon {
  font-size: 2.125rem;
  line-height: 1;
  vertical-align: middle;
}
.nav-time-quick:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* フッター（main が flex-grow で伸び、mt-auto で下端に寄せる） */
footer.footer {
  border-top: 1px solid #eee;
  padding-top: 1rem;
  background-color: #fafafa;
}

/* ログイン画面 */
#Signin {
  height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 450px;
  padding: 15px;
  margin: auto;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* テーブル */
.table th {
  white-space: nowrap;
}

/* 年別一覧 yearly.php・入力一覧 list.php 共通：スマホも1行表示（横スクロール、body の word-break を打ち消し） */
.table-yearly-scroll,
.table-list-scroll {
  -webkit-overflow-scrolling: touch;
}
.table-yearly-scroll .table,
.table-list-scroll .table {
  width: 100%;
  min-width: max-content;
  margin-bottom: 0;
}
.table-yearly-scroll th,
.table-yearly-scroll td,
.table-list-scroll th,
.table-list-scroll td {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.table-input td {
  vertical-align: middle;
}

.table-input input[type="number"] {
  width: 80px;
  text-align: right;
}

/* ホーム：スタッフ向け4カード（表との間隔） */
.staff-home-summary-cards {
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}

/* 勤務時間カードの数値（display-6 より小さく、最大「2,000時間55分」程度まで収める） */
.staff-card-worktime {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

/* カード統計（ホバーで浮き上がらない） */
.stat-card:hover {
  transform: none;
}

.stat-card .bi {
  font-size: 2rem;
  opacity: 0.7;
}

/* 請求書印刷スタイル */
@media print {
  .navbar, footer, .no-print, .btn {
    display: none !important;
  }
  body {
    padding-top: 0;
  }
  .invoice-print {
    margin: 0;
    padding: 20px;
  }
}

/* 請求書レイアウト */
.invoice-header {
  border-bottom: 3px solid #333;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.invoice-table th {
  background-color: #f8f9fa;
}

.invoice-total {
  font-size: 1.2em;
  font-weight: bold;
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
  .size-sp-18 {
    font-size: 18px !important;
  }
  .table-responsive {
    font-size: 14px;
  }
  .stat-card .display-6 {
    font-size: 1.5rem;
  }
}

/* セレクトボックス角丸 */
.leftradius {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* データ入力テーブルのスタイル */
.input-table .form-control {
  min-width: 70px;
}

/* 設定ページ（タブラベルを読みやすく） */
.settings-tab .nav-link {
  color: #495057;
  font-size: 1.125rem; /* 約18px（16px基準） */
}

.settings-tab .nav-link.active {
  color: #0d6efd;
  font-weight: bold;
}

/* ページネーション */
.pagination .page-link {
  color: #0d6efd;
}

.pagination .page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* 操作ボタングループ */
.btn-action {
  padding: 2px 8px;
  font-size: 13px;
}

/* 一覧 list.php：768px以上でセル内ラベル非表示。合計行の数量内訳は折り返し防止 */
@media (min-width: 768px) {
  .table-list-items .list-mb-label,
  .table-invoice-items .list-mb-label,
  .table-invoice-page .list-mb-label,
  .table-timecard .tc-mb-label {
    display: none;
  }

}

@media (max-width: 767.98px) {
  /* 横スクロール表で width:100% のままだと、列最小幅の合計＜画面幅のとき余剰幅が列に配分され、単価・数量のあいだなどが不自然に空く */
  .table-yearly-scroll .table,
  .table-list-scroll .table {
    width: max-content;
  }

  /* 入力一覧 list.php：スマホは年別と同じく横スクロール1行（.table-list-scroll）。品目行ラベルは非表示 */
  .table-list-scroll .table-list-items .list-mb-label {
    display: none !important;
  }

  .table-list-scroll .table-list-items .btn-action {
    padding: 0.35rem 0.65rem;
    font-size: 1.05rem;
  }

  /* 数値列（単価・数量・金額）は余白を少し詰めて隣同士を近づける */
  .table-list-scroll .table-list-items th:nth-child(3),
  .table-list-scroll .table-list-items td:nth-child(3),
  .table-list-scroll .table-list-items th:nth-child(4),
  .table-list-scroll .table-list-items td:nth-child(4),
  .table-list-scroll .table-list-items th:nth-child(5),
  .table-list-scroll .table-list-items td:nth-child(5) {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  /* 請求品目一覧 invoice-items.php：list.php と同じ5列版（操作列なし・最下段は日付のみ全幅） */
  .table-invoice-items-responsive {
    overflow-x: visible;
  }

  .table-invoice-items thead {
    display: none;
  }

  .table-invoice-items tbody tr:has(td[colspan="5"]) {
    display: block;
  }

  .table-invoice-items tbody tr:has(td[colspan="5"]) td {
    display: block;
    width: 100%;
    border: none;
  }

  .table-invoice-items tbody tr:not(:has(td[colspan="5"])) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "item item item"
      "price qty amt"
      "date date date";
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }

  .table-invoice-items tbody tr:not(:has(td[colspan="5"])) td {
    border-left: none;
    border-right: none;
    min-width: 0;
  }

  .table-invoice-items tbody td:nth-child(1) {
    grid-area: date;
    padding: 0.4rem 0.75rem 0.75rem;
    font-size: 1.0625rem;
    color: #495057;
    align-self: center;
    border-top: none !important;
    line-height: 1.4;
  }

  .table-invoice-items tbody td:nth-child(2) {
    grid-area: item;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.45;
    padding: 0.85rem 0.75rem 0.5rem;
    white-space: normal;
    word-break: break-word;
    border-bottom: none !important;
  }

  .table-invoice-items tbody td:nth-child(3) {
    grid-area: price;
    text-align: left !important;
    padding: 0.5rem 0.5rem 0.65rem;
    border-top: none !important;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .table-invoice-items tbody td:nth-child(4) {
    grid-area: qty;
    text-align: center !important;
    padding: 0.5rem 0.5rem 0.65rem;
    border-top: none !important;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .table-invoice-items tbody td:nth-child(5) {
    grid-area: amt;
    text-align: right !important;
    padding: 0.5rem 0.5rem 0.65rem;
    border-top: none !important;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .table-invoice-items .list-mb-label {
    display: block;
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: normal;
    margin-bottom: 0.35rem;
  }

  .table-invoice-items tbody td:nth-child(4) .list-mb-label {
    text-align: center;
  }

  .table-invoice-items tbody td:nth-child(5) .list-mb-label,
  .table-invoice-items tbody td:nth-child(3) .list-mb-label {
    text-align: inherit;
  }

  /* フッター（小計・消費税・合計）：スマホは縦積みで読みやすく */
  .table-invoice-items tfoot tr {
    display: block;
    padding: 0.55rem 0.75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
  }

  .table-invoice-items tfoot td {
    display: block;
    width: 100% !important;
    border: none;
    text-align: right !important;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .table-invoice-items tfoot td[colspan] {
    text-align: center !important;
    font-weight: bold;
  }

  .table-invoice-items tfoot td:empty {
    display: none !important;
  }

  .table-invoice-items tfoot .list-mb-label {
    display: block;
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: normal;
    margin-bottom: 0.3rem;
  }

  /* 請求書 invoice.php：品目全幅→数量・単価・金額（列順は画面表どおり） */
  .table-invoice-page-responsive {
    overflow-x: visible;
  }

  .table-invoice-page thead {
    display: none;
  }

  .table-invoice-page tbody tr:has(td[colspan="4"]) {
    display: block;
  }

  .table-invoice-page tbody tr:has(td[colspan="4"]) td {
    display: block;
    width: 100%;
    border-left: none;
    border-right: none;
    padding: 0.5rem 0.35rem 0.35rem !important;
  }

  .table-invoice-page tbody tr:not(:has(td[colspan="4"])) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "item item item"
      "qty price amt";
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }

  .table-invoice-page tbody tr:not(:has(td[colspan="4"])) td {
    border-left: none;
    border-right: none;
    min-width: 0;
  }

  .table-invoice-page tbody tr:not(:has(td[colspan="4"])) td:nth-child(1) {
    grid-area: item;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.45;
    padding: 0.75rem 0.5rem 0.45rem !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    border-bottom: none !important;
  }

  .table-invoice-page tbody tr:not(:has(td[colspan="4"])) td:nth-child(2) {
    grid-area: qty;
    text-align: center !important;
    padding: 0.5rem 0.5rem 0.65rem;
    border-top: none !important;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .table-invoice-page tbody tr:not(:has(td[colspan="4"])) td:nth-child(3) {
    grid-area: price;
    text-align: left !important;
    padding: 0.5rem 0.5rem 0.65rem;
    border-top: none !important;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .table-invoice-page tbody tr:not(:has(td[colspan="4"])) td:nth-child(4) {
    grid-area: amt;
    text-align: right !important;
    padding: 0.5rem 0.5rem 0.65rem;
    border-top: none !important;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .table-invoice-page .list-mb-label {
    display: block;
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: normal;
    margin-bottom: 0.35rem;
  }

  .table-invoice-page tbody td:nth-child(2) .list-mb-label {
    text-align: center;
  }

  .table-invoice-page tbody td:nth-child(3) .list-mb-label,
  .table-invoice-page tbody td:nth-child(4) .list-mb-label {
    text-align: inherit;
  }

  .table-invoice-page tfoot tr {
    display: block;
    padding: 0.55rem 0.35rem;
  }

  .table-invoice-page tfoot tr:first-child {
    border-top: 2px solid #333;
    margin-top: 0.25rem;
    padding-top: 0.65rem;
  }

  .table-invoice-page tfoot tr:not(:first-child) {
    border-top: 1px solid #ccc;
  }

  .table-invoice-page tfoot td {
    display: block;
    width: 100% !important;
    border: none;
    text-align: right !important;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  /* 見出しセル（小計・消費税・合計）は中央のまま */
  .table-invoice-page tfoot td.text-center {
    text-align: center !important;
  }

  .table-invoice-page tfoot td:empty {
    display: none !important;
  }

  .table-invoice-page tfoot .list-mb-label {
    display: block;
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: normal;
    margin-bottom: 0.3rem;
  }

  /* タイムカード timecard.php：スマホは2行（1行目：日・曜・出勤・退勤・勤務時間／2行目：メモ＋操作） */
  .table-timecard-responsive {
    overflow-x: visible;
  }

  .table-timecard thead {
    display: none;
  }

  .table-timecard tbody tr:has(td:nth-child(6)) {
    display: grid;
    /* 1行目を5列で横並び、2行目はメモが左〜中央、操作は右端 */
    grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }

  .table-timecard tbody tr:has(td:nth-child(6)) td {
    border-left: none;
    border-right: none;
    min-width: 0;
  }

  /* 1行目：日・曜日・出勤・退勤・勤務時間 */
  .table-timecard tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    text-align: center !important;
    font-weight: 600;
    padding: 0.35rem 0.2rem 0.25rem;
    font-size: 1rem;
    line-height: 1.3;
  }

  .table-timecard tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    padding: 0.35rem 0.25rem 0.25rem;
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
  }

  .table-timecard tbody td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
    text-align: center !important;
    padding: 0.35rem 0.2rem 0.25rem;
    font-size: 0.95rem;
  }

  .table-timecard tbody td:nth-child(4) {
    grid-column: 4;
    grid-row: 1;
    text-align: center !important;
    padding: 0.35rem 0.2rem 0.25rem;
    font-size: 0.95rem;
  }

  .table-timecard tbody td:nth-child(5) {
    grid-column: 5;
    grid-row: 1;
    text-align: center !important;
    padding: 0.35rem 0.2rem 0.25rem;
    font-size: 0.95rem;
  }

  /* 2行目：メモ（スタッフは全5列／管理者は左4列＋操作1列） */
  .table-timecard tbody tr:has(td:nth-child(6)):not(:has(td:nth-child(7))) td:nth-child(6) {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0.3rem 0.35rem 0.45rem !important;
    font-size: 1rem;
    line-height: 1.4;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  .table-timecard tbody tr:has(td:nth-child(7)) td:nth-child(6) {
    grid-column: 1 / 5;
    grid-row: 2;
    padding: 0.3rem 0.35rem 0.45rem 0.25rem !important;
    font-size: 1rem;
    line-height: 1.4;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  /* 操作列：justify-self:center だとセルが縮み土日の背景色が端で切れる → セルは列いっぱい、中身だけ中央 */
  .table-timecard tbody tr:has(td:nth-child(7)) td:nth-child(7) {
    grid-column: 5;
    grid-row: 2;
    align-self: stretch;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.25rem 0.45rem !important;
    text-align: center !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  /* グリッド化しても tr に付いた --bs-table-bg を各セルまで確実に塗る */
  .table-timecard tbody tr.table-danger > td,
  .table-timecard tbody tr.table-primary > td {
    background-color: var(--bs-table-bg) !important;
  }

  .table-timecard .tc-mb-label {
    display: block;
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: normal;
    margin-bottom: 0.15rem;
    line-height: 1.2;
  }

  .table-timecard tbody td:nth-child(1) .tc-mb-label,
  .table-timecard tbody td:nth-child(2) .tc-mb-label,
  .table-timecard tbody td:nth-child(3) .tc-mb-label,
  .table-timecard tbody td:nth-child(4) .tc-mb-label,
  .table-timecard tbody td:nth-child(5) .tc-mb-label {
    text-align: center;
  }

  .table-timecard tbody td:nth-child(2) .tc-mb-label {
    text-align: left;
  }

  /* スタッフ：メモ行は横並び（入力が伸び、保存は右） */
  .table-timecard tbody td:nth-child(6) form.d-flex {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
  }

  .table-timecard tbody td:nth-child(6) form .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    font-size: 16px;
  }

  .table-timecard tbody td:nth-child(6) form .btn {
    width: auto;
    flex-shrink: 0;
  }

  .table-timecard tbody td:nth-child(7) .btn-action {
    padding: 0.3rem 0.55rem;
    font-size: 1rem;
  }

  /* 集計「19 日」が改行されないように */
  .timecard-summary-stats span {
    white-space: nowrap;
  }

  /* タイムカード集計：1行目＝勤務日数＋有給、2行目＝勤務時間のみ */
  .timecard-summary-stats .timecard-summary-hours {
    flex-basis: 100%;
  }
}