@charset "UTF-8";

/*
Theme Name:CLSAsystem
Description:CLSAのポータルサイト
Version:1.0
Author: M.Yasuda
Text Domain: clsaservicerecord
*/

/* ================================
   基本設定
================================= */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}
@media screen and (max-width: 768px) {
  body { font-size: var(--font-size-small); }
}

a {
  color: inherit;
  text-decoration: none;
  word-break: break-all;
}

/* 全要素の幅計算を border-box に統一 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 全テーブルのボーダーを collapse に統一 */
table {
  border-collapse: collapse;
}

/* ================================
   ボタン
================================= */
.service-menu .btn {
  display: flex;
  margin: 1em auto;
  padding: var(--btn-padding);
  font-size: 1.2em;
  background-color: var(--color-bg);
  border: solid 1px var(--color-text);
  width: 250px;
  height: 50px;
  border-radius: var(--btn-radius);
  align-items: center;
 justify-content: center;
}

.service-menu .btn:hover {
  border-color: var(--color-accent-dark);
  background-color: var(--table-row-hover-bg);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--btn-color);
  border: none;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  box-shadow: var(--btn-shadow);
  transition: var(--btn-transition);
}
.btn-primary:hover {
  background-color: var(--color-accent-dark);
  transform: var(--btn-hover-transform);
}

/* ================================
   チェックボックス（日付選択）
================================= */
.date-selector {
/*  appearance: none;
  -webkit-appearance: none;*/
  position: absolute;
  top:0;
  right: 0;
  width: 10px;
  height: 10px;
  border: var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  background-color: var(--color-bg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.date-selector:hover {
  border-color: var(--color-accent-dark);
  background-color: var(--color-beige);
}
.date-selector:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ================================
   メッセージ
================================= */
.error-message {
  color: var(--color-error);
  background-color: var(--color-error-bg);
  padding: 8px;
  border-radius: var(--btn-radius);
}
.success-message {
  color: var(--color-success);
  background-color: var(--color-success-bg);
  padding: 8px;
  border-radius: var(--btn-radius);
}

/* ================================
   カレンダー
================================= */
.calendar-section{
margin-top:70px;
}

#calendar-view table {
  table-layout: fixed;
  width: 100%;
  text-align: left;
  width: 100%;
}

#calendar-view thead th {
  border: 1px solid #ccc;
  padding: 6px;
  text-align: center;
}

#calendar-view tbody td {
  border: 1px solid #eee;
  padding: 6px;
  text-align: center;
}

#calendar-view tbody tr {
  border-bottom: 1px solid #ddd;
}

#calendar-view table thead tr th {
text-align:center;
}

#calendar-view table td {
  width: 14.28%;
  min-height: var(--table-cell-min-height);
  vertical-align: top;
}

.cell-wrapper{
  min-height: 100px;
}

.cell-header{
  position:relative;
}

.calendar-cell{
  margin: 10px 5px;
  font-size: 12px;
  text-align: left;
}

.calendar-cell:hover{
  /*margin: 5px;*/
  /*font-size: 0.875rem;*/
  background-color:var(--table-row-hover-bg);
}


.calendar-cell.conflict {
  background-color: var(--row-conflict-bg);
}

.calendar-cell.conflict:hover{
  background-color:var(--table-row-hover-bg);
}

.abbr-badge {
    display: inline-block;
    width: 4rem;
    text-align: center;
    background-color: #fff;
    border-radius: 25px;
    padding: 0px 2px;
    color:var(--color-egreen);
    font-size: 10px;
    border: solid 1px var(--color-egreen);
    margin-left:10px;
}

td[data-date] {
  text-align: center;
  vertical-align: middle;
}

.calendar-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
  margin-top: 4px; /* 日付との間隔 */
}

/* スマホでは予定一覧を隠して、バッジ中心のUIに */
@media (max-width: 768px) {
.plans-container {
display: none;
}
.cell-wrapper {
  text-align: center;   /* 中央寄せ */
}

.cell-wrapper strong,
.calendar-badge {
  display: block;       /* ブロック要素にして縦並び */
  margin: 0 auto;       /* 中央寄せ */
}

.calendar-badge {
  margin-top: 25px;      /* 日付との間隔 */
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
  line-height: 25px;    /* 数字を中央に */
}
}

@media (min-width: 768px) {
.calendar-badge {
display: none;
}
}

#calendar-detail-modal {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--modal-bg);
  padding: 20px;
  border-radius: var(--modal-radius);
  width: 90%;
  max-width: 350px;
  z-index: 1000;
}

#calendar-detail-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--modal-overlay-bg);
  z-index: 999;
  display: none;
}

/* ================================
   一覧
================================= */
.list-section{
margin-top:70px;
}

.list-cell{
  margin: 5px;
  font-size: 0.875rem;
}


.list-cell.conflict,
.overlap-row,
.attendance-row.conflict {
  background-color: var(--row-conflict-bg);
}


#list-view table {
  table-layout: fixed;
  width: 100%;
  text-align: left;
}

#list-view thead th {
  border: 1px solid #ccc;
  padding: 6px;
  text-align: center;
}

#list-view tbody td {
  border: 1px solid #eee;
  padding: 6px;
  text-align: center;
}

#list-view tbody tr {
  border-bottom: 1px solid #ddd;
}

#list-view tbody tr:hover {
  background-color:var(--table-row-hover-bg);
}

#list-view table thead tr th {
text-align:center;
font-size: 14px;
}

#list-view table thead tr th:first-child, 
#list-view table thead tr th:nth-child(2) {
width:2rem;
}

#list-view table thead tr th:nth-child(3) {
max-width:10rem;
}
 
#list-view table thead tr th:nth-child(4) {
max-width:15rem;
}
 
#list-view table thead tr th:nth-child(5) {
max-width:10rem;
}
 
#list-view table thead tr th:nth-child(6),
#list-view table thead tr th:nth-child(7) {
width:3rem;
}

#list-view table thead tr th:nth-child(8) {
width:2.5rem;
}

#list-view table thead tr th:nth-child(9) {
width:2.5rem;
}

#list-view table td {
  width: 14.28%;
  height: 35px;
  vertical-align: middle;
  font-size: 12px;
}



/* ================================
   計画実績差分一覧
================================= */


.contract-summary{
  table-layout: fixed;
  /* width: 100%; */
  text-align: left;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.contract-summary tbody tr {
  border: 1px solid #ddd;
  height:35px;
}

.contract-summary tbody tr th{
  border: 1px solid #ddd;
  width:6rem;
  text-align: center;
}

.contract-summary tbody tr th:first-child{
 width:15rem;
}

.contract-summary tbody tr td{
  border: 1px solid #ddd;
  padding:6px;
  width:6rem;
  text-align: right;
  font-size: 12px;
}

.contract-summary tbody tr td:first-child{
  border: 1px solid #ddd;
  padding: 6px;
  text-align: left;
}


#list-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--modal-overlay-bg);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}



.submit-icon-btn {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: var(--btn-hover-bg);
  border: none;
  font-size: 12px;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  color:#fff;
  transition: background-color 0.25s ease, border-color 0.25s ease;

}

.submit-icon-btn:hover {
  background: var(--table-row-hover-bg);
  color:var(--btn-hover-bg);
}


.delete-icon-btn {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: #de202e;
  border: none;
  font-size: 12px;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  color:#fff;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.delete-icon-btn:hover {
  background: var(--row-conflict-bg);
  color:#de202e;
}


/* ================================
   ログインフォーム
================================= */
.login-form-container input[type="text"],
.login-form-container input[type="password"] {
  width: 100%;
  padding: var(--form-padding);
  margin-bottom: var(--form-margin-bottom);
  border: var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--form-bg);
  font-size: var(--form-font-size);
}
.login-form-container input[type="text"]:focus,
.login-form-container input[type="password"]:focus {
  border: var(--form-focus-border);
  box-shadow: var(--form-focus-shadow);
  outline: none;
}
.login-form-container input[type="submit"] {
  width: 100%;
  padding: var(--login-input-padding);
  background-color: var(--login-submit-bg);
  color: var(--login-submit-color);
  border: none;
  border-radius: var(--login-submit-radius);
  cursor: pointer;
  font-size: var(--login-submit-font-size);
  transition: var(--btn-transition);
}
.login-form-container input[type="submit"]:hover {
  background-color: var(--color-accent-dark);
}

/* ================================
   共通モーダル（詳細テーブル）
================================ */

/* テーブル本体 */
.modal-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--table-border);
  border-radius: var(--table-radius);
}

/* セル */
.modal-table th,
.modal-table td {
  border: var(--table-border);
  padding: var(--table-cell-padding);
  text-align: center;
  font-size: var(--table-cell-font-size);
}

/* ヘッダー */
.modal-table th {
  background-color: var(--table-header-bg);
  color: var(--table-header-color);
}

/* 偶数行 */
.modal-table tr:nth-child(even) {
  background: var(--table-row-even-bg);
}

/* ホバー */
.modal-table tr:hover {
  background-color: var(--table-row-hover-bg);
}



/* ================================
   バッジ／ラベル
================================= */

td[onclick] {
  text-align: center;
  cursor: pointer;
}

/* コンフリクトセルのクリック領域を広げる */
.conflict-cell {
  text-align: center;
  width: 48px; /* 押しやすい幅 */
  cursor: pointer;
  padding: 4px 0;
}

.conflict-badge {
  margin-left: var(--conflict-margin-left);
  color: var(--conflict-color);
  font-weight: var(--conflict-font-weight);
  cursor: pointer;
}


.badge {
  background: var(--badge-bg);
  color: var(--badge-color);
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  margin-left: 5px;
}
.saved-label {
  background: var(--label-saved-bg);
  color: var(--label-saved-color);
  padding: var(--label-saved-padding);
  border-radius: var(--label-saved-radius);
  font-size: var(--label-saved-font-size);
  margin-left: 10px;
}


/* ================================
   警告／ハイライト
================================= */
.warning-icon {
  color: var(--warning-color);
  font-weight: var(--warning-font-weight);
  margin-left: var(--warning-margin-left);
}
.highlight-cell,
.highlight-row {
  background-color: var(--highlight-bg) !important;
  transition: var(--highlight-transition);
}

/* ================================
   出席簿
================================= */
.attendance-row.disabled {
  background-color: var(--row-disabled-bg);
  opacity: var(--row-disabled-opacity);
}
.attendance-row.absent {
  background-color: var(--row-absent-bg);
}

/*.attendance-row.error {
  background-color: var(--row-error-bg);
}
*/

.attendance-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.attendance-table th,
.attendance-table td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
}

.attendance-table th {
  background-color: #fafafa;
  font-weight: bold;
  font-size:14px;
}

.attendance-table td {
  font-size:12px;
}

.attendance-table input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 700px) {
  .attendance-table thead {
    display: none;
  }

.attendance-table th, .attendance-table td {
    text-align: left;
}

  /* カード化 */
  .attendance-table tr.attendance-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3列 */
    grid-template-rows: auto auto auto auto auto; /* 5行 */
    gap: 6px 8px;
    padding: 12px;
    border: 1px solid #ccc;
    margin-bottom: 14px;
    border-radius: 6px;
    /*background: #fff;*/
  }

  /* 全 td を block に戻す */
  .attendance-table td {
    display: flex;
    align-items: center;
    gap: 6px;
  }


  /* ラベルは横に小さく表示 */
  .attendance-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: bold;
    color: #555;
    margin: 0; /* 上下余白を消す */
    flex-shrink: 0; /* ラベルが潰れないように */
  }


  /* ====== 配置指定 ====== */

  /* 1行目：利用者（3列結合） */
  .attendance-row td:nth-child(1) {
    grid-column: 1 / 4; /* 1〜3列を結合 */
    grid-row: 1;
  }

  /* 2行目：利用有無・欠席加算・重複 */
  .attendance-row td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .attendance-row td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .attendance-row td:nth-child(9) { grid-column: 3; grid-row: 2; } /* 重複 */

  /* 3行目：開始・終了・空欄 */
  .attendance-row td:nth-child(4) { grid-column: 1; grid-row: 3; }
  .attendance-row td:nth-child(5) { grid-column: 2; grid-row: 3; }
  /* 3列目は空欄なので何も置かない */

  /* 4行目：送迎往・送迎復・食事 */
  .attendance-row td:nth-child(6) { grid-column: 1; grid-row: 4; }
  .attendance-row td:nth-child(7) { grid-column: 2; grid-row: 4; }
  .attendance-row td:nth-child(8) { grid-column: 3; grid-row: 4; }

  /* 5行目：備考（3列結合） */
  .attendance-row td:nth-child(10) {
    grid-column: 1 / 4;
    grid-row: 5;
  }

  /* 入力欄の幅調整 */
  .attendance-table input[type="text"],
  .attendance-table input[type="time"] {
    flex: 1;
  }

  /* 状態なしの通常行だけ白背景にする（任意） */
  /*.attendance-table tr.attendance-row:not(.disabled):not(.absent):not(.error) {
    background-color: #fff;
  }*/

  /* 状態付きカードにもきちんと色が乗るように明示する */
  .attendance-table tr.attendance-row.disabled {
    background-color: var(--row-disabled-bg);
    opacity: var(--row-disabled-opacity);
  }

  .attendance-table tr.attendance-row.absent {
    background-color: var(--row-absent-bg);
  }

  .attendance-table tr.attendance-row.error {
    background-color: var(--row-error-bg);
  }

  .attendance-table tr.attendance-row.conflict {
    background-color: var(--row-conflict-bg);
  }
}


/* ============================
   バッティングバッジ
============================ */

.overlap-badge {
  display: inline-block;
  background-color: #ff9800;
  color: #fff;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-weight: bold;
}

.overlap-badge:hover {
  background-color: #e68900;
}



/* ================================
   ナビゲーション
================================= */
.nav-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  font-size: var(--nav-btn-font-size);
}
.nav-btn {
  background-color: var(--nav-btn-bg);
  border: var(--nav-btn-border);
  padding: var(--nav-btn-padding);
  margin: var(--nav-btn-margin);
  text-decoration: none;
  color: var(--nav-btn-color);
  border-radius: var(--nav-btn-radius);
  transition: background-color 0.2s;
}
.nav-btn:hover {
  background-color: var(--nav-btn-hover-bg);
}
.nav-current {
  font-weight: var(--nav-current-font-weight);
  margin: var(--nav-current-margin);
}

/* ================================
   グローバルナビ
================================= */
.global-nav {
  position: fixed;
  top: var(--header-height);
  width: 100%;
  /* background: var(--global-nav-bg); */
  z-index: 1000;
  /* border-bottom: var(--global-nav-border); */
  /* box-shadow: var(--global-nav-shadow); */
}
.global-nav a {
  text-decoration: none;
  color: var(--global-nav-link-color);
  font-weight: var(--global-nav-link-font-weight);
  padding: var(--global-nav-link-padding);
}
.global-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.global-nav li {
  position: relative;
  margin-right: var(--global-nav-item-margin-right);
}.global-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--global-nav-dropdown-bg);
  border: var(--global-nav-dropdown-border);
  padding: var(--global-nav-dropdown-padding);
  z-index: 1000;
  min-width: var(--global-nav-dropdown-min-width);
}
.global-nav .dropdown:hover .dropdown-menu {
  display: block;
}
.global-nav .dropdown-menu li a {
  display: block;
  padding: var(--global-nav-dropdown-link-padding);
  text-decoration: none;
  color: var(--global-nav-dropdown-link-color);
}
.global-nav .dropdown-menu li a:hover {
  background-color: var(--global-nav-dropdown-link-hover-bg);
}

/* ================================
   ログインページ全体
================================= */
.login-page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background-color: var(--login-bg);
}
.login-section {
  background: var(--login-box-bg);
  padding: var(--login-box-padding);
  border-radius: var(--login-box-radius);
  box-shadow: var(--login-box-shadow);
  max-width: var(--login-box-max-width);
  width: 100%;
}
.login-title {
  text-align: center;
  margin-bottom: var(--login-title-margin-bottom);
  font-size: var(--login-title-font-size);
}
.login-warning {
  margin-top: 1em;
  padding: var(--login-warning-padding);
  background-color: var(--login-warning-bg);
  border-left: var(--login-warning-border);
  font-size: var(--login-warning-font-size);
  color: var(--login-warning-color);
}

/* ================================
   ヘッダー
================================= */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  /* padding: var(--header-padding); */
  background-color: var(--table-row-hover-bg);
  /* border-bottom: var(--header-border); */
  /* box-shadow: var(--header-shadow); */
  /*position: fixed;*/
  width: 100%;
  top:45px;
}

.site-header .logo {
  font-size: var(--header-logo-font-size);
  font-weight: var(--header-logo-font-weight);
  color: var(--header-logo-color);
  text-decoration: none;
}
.site-header nav {
  display: flex;
  align-items: center;
}
.site-header nav a {
  color: var(--header-nav-link-color);
  text-decoration: none;
  padding: var(--header-nav-link-padding);
  transition: color 0.2s ease;
}
.site-header nav a:hover {
  color: var(--header-nav-link-hover-color);
}


/* PCサイズ（大きい画面）では summary を非表示、detail を表示 */
@media screen and (min-width: 769px) {
  .calendar-cell .summary {
    display: none;
  }
  .calendar-cell .detail {
    display: inline;
  }
}

/* ================================
   カレンダーレスポンシブ
================================= */
/* スマホサイズ（小さい画面）では summary を表示、detail を非表示 */
@media screen and (max-width: 768px) {
  .calendar-cell .summary {
    display: inline;
  }
  .calendar-cell .detail {
    display: none;
  }
}









/* ================================
   利用者等編集ページ専用モーダル
================================= */

.edit-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--modal-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 1; /* ← active クラス不要にする */
}

.edit-modal-box {
  background: var(--modal-bg);
  padding: var(--modal-padding);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  text-align: center;
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translateX(-50%) translateY(0); /* ← active クラス不要 */
  width: 95%;
  height: 90%;
  z-index: 1000;
  overflow: scroll;
  max-width: 500px;
  opacity: 1; /* ← active クラス不要 */
}