/* =====================================================
   Attendance Schedule - Frontend CSS  v1.1.5
   PHP 7.4対応・レスポンシブ・カスタムプロパティ使用
   ===================================================== */

:root {
  --as-accent:   #c8a46e;
  --as-text:     #333333;
  --as-bg:       #ffffff;
  --as-card-bg:  #f9f9f9;
  --as-radius:   6px;
  --as-shadow:   0 2px 8px rgba(0,0,0,.08);
}

.as-schedule-wrap {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  color: var(--as-text);
  background: var(--as-bg);
  padding: 0;
}

/* ---- Date Navigation Panel ---- */
.as-date-nav-panel {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 4px;
  margin-top: -4px;
  padding-bottom: 4px;
  /* スクロールバー非表示 */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge */
}
.as-date-nav-panel::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}
.as-date-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 48px;
  padding: 8px 4px;
  border-radius: var(--as-radius);
  background: #f0f0f0;
  text-decoration: none;
  color: var(--as-text);
  transition: background .2s, color .2s, transform .15s;
  border: 2px solid transparent;
  cursor: pointer;
}
.as-date-panel:hover {
  background: rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.as-date-panel.as-active {
  background: var(--as-accent);
  color: #fff;
  border-color: var(--as-accent);
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.as-date-panel.as-today:not(.as-active) {
  border-color: var(--as-accent);
}
.as-date-panel.as-sunday     { color: #c0392b; }
.as-date-panel.as-saturday   { color: #2980b9; }
.as-date-panel.as-active     { color: #fff; }
.as-panel-month {
  font-size: .65rem;
  opacity: .75;
  line-height: 1;
}
.as-panel-day {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.as-panel-dow {
  font-size: .72rem;
  line-height: 1;
}

/* ---- Date Panel スクロール矢印 ---- */
.as-date-nav-wrap {
  position: relative;
  margin-bottom: 20px;
}
.as-date-nav-wrap .as-date-nav-panel {
  margin-bottom: 0;         /* wrap が margin を持つ */
}
.as-nav-arrow {
  display: none;            /* JS で制御 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--as-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  padding: 0;
  pointer-events: auto;
  opacity: .92;
  transition: opacity .2s;
}
.as-nav-arrow:hover { opacity: 1; }
.as-nav-arrow.as-arrow-left  { left: 2px; }
.as-nav-arrow.as-arrow-right { right: 2px; }
.as-nav-arrow.as-visible { display: flex; }

/* ---- Header ---- */
.as-schedule-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.as-date-label {
  font-size: 1rem;
  font-weight: 700;
}
.as-count {
  font-size: .85rem;
  background: var(--as-accent);
  color: #fff;
  padding: 2px 10px;
  border-radius: 20px;
}
.as-no-schedule {
  text-align: center;
  padding: 40px;
  color: #888;
}

/* ---- Grid Layout ---- */
.as-schedule-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* デフォルト4列 */
  gap: 16px;
  margin: 0;
  padding: 0;
}
/* list レイアウト時は1列に戻す */
.as-layout-list {
  grid-template-columns: 1fr;
}
/* 列数クラス：コンテナ幅に関わらず指定列を維持 */
.as-layout-grid.as-cols-2  { grid-template-columns: repeat(2, 1fr); }
.as-layout-grid.as-cols-3  { grid-template-columns: repeat(3, 1fr); }
.as-layout-grid.as-cols-4  { grid-template-columns: repeat(4, 1fr); }
.as-layout-grid.as-cols-5  { grid-template-columns: repeat(5, 1fr); }
.as-layout-grid.as-cols-6  { grid-template-columns: repeat(6, 1fr); }
/* grid化によりカードのflex指定は不要になるが念のため明示 */
.as-layout-grid .as-card   { width: 100%; min-width: 0; }

/* ---- List Layout ---- */
.as-layout-list               { gap: 10px; }
.as-layout-list .as-card      { width: 100%; }
.as-layout-list .as-card-inner {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  text-align: left;      /* リスト時は左揃え */
}
.as-layout-list .as-photo-wrap { flex: 0 0 80px; width: 80px; padding-top: 80px; }
.as-layout-list .as-photo      { width: 80px !important; }
.as-layout-list .as-card-body  {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  text-align: left;
}
.as-layout-list .as-name    { font-size: 1rem; margin: 0; font-weight: 700; flex: 0 0 100%; }
.as-layout-list .as-time    { font-size: .9rem; color: var(--as-accent); margin: 0; font-weight: 700; }
.as-layout-list .as-meta,
.as-layout-list .as-comment { font-size: .8rem; margin: 0; color: #666; }

/* ---- Card ---- */
.as-card {
  background: var(--as-card-bg);   /* 管理画面のカード背景色が反映される */
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  min-width: 0;
}
.as-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.as-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;      /* ★ 写真・テキストを中央揃え */
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* ---- Photo ---- */
/*
 * パディングトップ方式で比率を固定
 * --as-photo-ratio-pad: padding-top の % 値（PHP側で算出して出力）
 * 例: 1:1 → 100%、3:4 → 133.33%、2:3 → 150%、4:3 → 75%、16:9 → 56.25%
 */
.as-photo-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: var(--as-photo-ratio-pad, 100%);  /* 比率をpadding-topで実現 */
  height: 0;
  border-radius: calc(var(--as-radius) - 1px);
  flex-shrink: 0;
}
.as-photo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: calc(var(--as-radius) - 1px);
}

/* ---- Badges ---- */
.as-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: .05em;
}
.as-badge-new  { background: #e74c3c; color: #fff; }
.as-badge-rec  { background: var(--as-accent); color: #fff; }

/* ---- Card Body ---- */
.as-card-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;      /* ★ テキストを水平中央 */
  gap: 4px;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}
.as-name {
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  text-align: center;       /* ★ 名前を中央揃え */
}
.as-time {
  font-size: .82rem;
  color: var(--as-accent);
  margin: 0;
  font-weight: 700;
  text-align: center;       /* ★ 時間を中央揃え */
}
.as-meta {
  font-size: .75rem;
  color: #777;
  margin: 0;
  text-align: center;
}
.as-comment {
  font-size: .75rem;
  color: #555;
  margin: 4px 0 0;
  line-height: 1.5;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ============================================
   Responsive
   ============================================ */
/* 640px以下：すべての列数を2列に */
@media (max-width: 640px) {
  .as-layout-grid,
  .as-layout-grid.as-cols-2,
  .as-layout-grid.as-cols-3,
  .as-layout-grid.as-cols-4,
  .as-layout-grid.as-cols-5,
  .as-layout-grid.as-cols-6 { grid-template-columns: repeat(2, 1fr); }

  .as-layout-list .as-card-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .as-layout-list .as-photo-wrap { flex: 0 0 auto; width: 80px; }
}
/* 360px以下：1列 */
@media (max-width: 360px) {
  .as-layout-grid,
  .as-layout-grid.as-cols-2,
  .as-layout-grid.as-cols-3,
  .as-layout-grid.as-cols-4,
  .as-layout-grid.as-cols-5,
  .as-layout-grid.as-cols-6 { grid-template-columns: 1fr; }
}

/* ---- 受付終了カード ---- */
.as-card-ended {
  background: #cccccc;
  filter: grayscale(100%);
  border: 1px solid #aaaaaa;
  box-sizing: border-box;
}
.as-card-ended:hover {
  transform: none;
  box-shadow: var(--as-shadow);
}

/* ---- companion出勤予定表 [as_companion_schedule] ---- */
.as-companion-schedule-wrap {
  margin: 1em 0;
  font-size: 13px;
}
.as-companion-schedule {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.as-companion-schedule th,
.as-companion-schedule td {
  border: 1px solid #ccc;
  text-align: center;
  padding: 6px 4px;
  word-break: break-word;
}
.as-companion-schedule th {
  background: #f5f5f5;
  font-weight: bold;
}
.as-companion-schedule-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.as-companion-schedule-list li {
  display: flex;
  gap: 1em;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
.as-cs-date {
  min-width: 6em;
  color: #555;
}
.as-cs-time {
  color: #0000ff;
  font-weight: bold;
}
@media (max-width: 768px) {
  .as-companion-schedule      { display: none; }
  .as-companion-schedule-list { display: block; }
}

/* =====================================================
   テーマ定義
   data-as-theme 属性で切り替え
   ===================================================== */

/* ---- ② dark : 高級・夜 ---- */
[data-as-theme="dark"] {
  --as-accent:  #e8c97e;
  --as-text:    #e8e8e8;
  --as-bg:      #ffffff;
  --as-card-bg: #16213e;
  --as-radius:  6px;
  --as-shadow:  0 2px 12px rgba(0,0,0,.45);
}
[data-as-theme="dark"] .as-date-panel {
  background: #0f3460;
  color: #ccc;
  border-color: transparent;
}
[data-as-theme="dark"] .as-date-panel:hover {
  background: #1a4a80;
}
[data-as-theme="dark"] .as-date-panel.as-active {
  background: var(--as-accent);
  color: #1a1a2e;
  border-color: var(--as-accent);
}
[data-as-theme="dark"] .as-date-panel.as-today:not(.as-active) {
  border-color: var(--as-accent);
}
[data-as-theme="dark"] .as-date-panel.as-sunday   { color: #e07070; }
[data-as-theme="dark"] .as-date-panel.as-saturday { color: #7abaff; }
[data-as-theme="dark"] .as-date-panel.as-active   { color: #1a1a2e; }
[data-as-theme="dark"] .as-card {
  border: 1px solid #0f3460;
}
[data-as-theme="dark"] .as-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
}
[data-as-theme="dark"] .as-meta  { color: #aaa; }
[data-as-theme="dark"] .as-comment { color: #bbb; }
[data-as-theme="dark"] .as-no-schedule { color: #888; }
[data-as-theme="dark"] .as-card-ended {
  background: #2a2a3e;
  border-color: #444;
  filter: grayscale(80%) brightness(0.6);
}

/* ---- ③ pop : 明るい・親しみやすい ---- */
[data-as-theme="pop"] {
  --as-accent:  #9b59b6;
  --as-text:    #2c2c3a;
  --as-bg:      #ffffff;
  --as-card-bg: #ffffff;
  --as-radius:  16px;
  --as-shadow:  0 3px 10px rgba(155,89,182,.15);
}
[data-as-theme="pop"] .as-date-panel {
  background: #ede4f8;
  color: #5a3d7a;
  border-radius: 12px;
}
[data-as-theme="pop"] .as-date-panel:hover {
  background: #ddd0f5;
}
[data-as-theme="pop"] .as-date-panel.as-active {
  background: var(--as-accent);
  color: #fff;
  border-color: var(--as-accent);
}
[data-as-theme="pop"] .as-date-panel.as-today:not(.as-active) {
  border-color: var(--as-accent);
}
[data-as-theme="pop"] .as-date-panel.as-sunday   { color: #e05c8a; }
[data-as-theme="pop"] .as-date-panel.as-saturday { color: #5b8de8; }
[data-as-theme="pop"] .as-date-panel.as-active   { color: #fff; }
[data-as-theme="pop"] .as-card {
  border: 2px solid #e4d5f8;
}
[data-as-theme="pop"] .as-card:hover {
  box-shadow: 0 6px 18px rgba(155,89,182,.22);
  transform: translateY(-4px);
}
[data-as-theme="pop"] .as-name { font-size: 1rem; }
[data-as-theme="pop"] .as-meta    { color: #8a6faa; }
[data-as-theme="pop"] .as-comment { color: #6a4f8a; }
[data-as-theme="pop"] .as-no-schedule { color: #9b7abb; }

/* ---- ④ red : 深紅・高級・情熱 ---- */
[data-as-theme="red"] {
  --as-accent:  #990000;
  --as-text:    #2a0a0a;
  --as-bg:      #ffffff;
  --as-card-bg: #fff5f5;
  --as-radius:  6px;
  --as-shadow:  0 2px 8px rgba(153,0,0,.10);
}
[data-as-theme="red"] .as-date-panel {
  background: #f9e8e8;
  color: #660000;
}
[data-as-theme="red"] .as-date-panel:hover {
  background: #f5d0d0;
}
[data-as-theme="red"] .as-date-panel.as-active {
  background: var(--as-accent);
  color: #fff;
  border-color: var(--as-accent);
}
[data-as-theme="red"] .as-date-panel.as-today:not(.as-active) {
  border-color: var(--as-accent);
}
[data-as-theme="red"] .as-date-panel.as-sunday   { color: #cc0000; }
[data-as-theme="red"] .as-date-panel.as-saturday { color: #0055aa; }
[data-as-theme="red"] .as-date-panel.as-active   { color: #fff; }
[data-as-theme="red"] .as-card {
  border: 1px solid #f0cccc;
}
[data-as-theme="red"] .as-card:hover {
  box-shadow: 0 6px 16px rgba(153,0,0,.15);
}
[data-as-theme="red"] .as-meta    { color: #885555; }
[data-as-theme="red"] .as-comment { color: #664444; }
[data-as-theme="red"] .as-no-schedule { color: #bb8888; }
[data-as-theme="red"] .as-card-ended {
  background: #e8e0e0;
  border-color: #ccbbbb;
  filter: grayscale(100%);
}

/* ---- ⑤ mono : モノトーン・シンプル・無彩色 ---- */
[data-as-theme="mono"] {
  --as-accent:  #222222;
  --as-text:    #222222;
  --as-bg:      #ffffff;
  --as-card-bg: #f4f4f4;
  --as-radius:  4px;
  --as-shadow:  0 1px 4px rgba(0,0,0,.10);
}
[data-as-theme="mono"] .as-date-panel {
  background: #e8e8e8;
  color: #333;
  border-radius: 4px;
}
[data-as-theme="mono"] .as-date-panel:hover {
  background: #d0d0d0;
}
[data-as-theme="mono"] .as-date-panel.as-active {
  background: #222;
  color: #fff;
  border-color: #222;
}
[data-as-theme="mono"] .as-date-panel.as-today:not(.as-active) {
  border-color: #555;
}
[data-as-theme="mono"] .as-date-panel.as-sunday   { color: #555; }
[data-as-theme="mono"] .as-date-panel.as-saturday { color: #555; }
[data-as-theme="mono"] .as-date-panel.as-active   { color: #fff; }
[data-as-theme="mono"] .as-count {
  background: #222;
}
[data-as-theme="mono"] .as-card {
  border: 1px solid #ddd;
  box-shadow: none;
}
[data-as-theme="mono"] .as-card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
[data-as-theme="mono"] .as-badge-new { background: #444; }
[data-as-theme="mono"] .as-badge-rec { background: #222; }
[data-as-theme="mono"] .as-meta    { color: #666; }
[data-as-theme="mono"] .as-comment { color: #555; }
[data-as-theme="mono"] .as-no-schedule { color: #999; }
[data-as-theme="mono"] .as-nav-arrow { background: #333; }
[data-as-theme="mono"] .as-card-ended {
  background: #e0e0e0;
  border-color: #bbb;
  filter: grayscale(100%) brightness(0.88);
}