/*
Theme Name: Kintai Portal
Theme URI: https://example.com/
Author: ChatGPT
Description: Simple Kintai Manager 専用の軽量ポータルテーマ（レスポンシブ／ハンバーガーメニュー／タブ風メニュー）
Version: 1.0.18
Text Domain: kintai-portal
*/
:root{
  --kp-bg:#f7f7f9;
  --kp-card:#ffffff;
  --kp-text:#1f2328;
  --kp-muted:#6b7280;
  --kp-border:#e5e7eb;
  --kp-accent:#2563eb;
  --kp-accent-weak:rgba(37,99,235,.12);
  --kp-danger:#d63638;
  --kp-radius:14px;
  --kp-shadow:0 10px 30px rgba(0,0,0,.08);
  --kp-max:980px;
  --kp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--kp-font);
  color:var(--kp-text);
  background:var(--kp-bg);
  line-height:1.55;
}
a{color:var(--kp-accent); text-decoration:none}
a:hover{text-decoration:underline}
.kp-container{max-width:var(--kp-max); margin:0 auto; padding:18px}
.kp-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,247,249,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--kp-border);
}
.kp-header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.kp-brand{display:flex; align-items:center; gap:10px; min-width:0;}
.kp-logo{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--kp-accent), #60a5fa);
  box-shadow:var(--kp-shadow);
}
.kp-title{
  font-weight:800; letter-spacing:.2px; font-size:16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kp-sub{font-size:12px; color:var(--kp-muted)}
.kp-nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--kp-border);
  background:var(--kp-card);
}
.kp-nav-toggle:active{transform:scale(.98)}
.kp-nav-toggle span{width:20px; height:2px; background:#111827; position:relative; display:block;}
.kp-nav-toggle span:before,.kp-nav-toggle span:after{content:""; position:absolute; left:0; width:20px; height:2px; background:#111827;}
.kp-nav-toggle span:before{top:-6px}
.kp-nav-toggle span:after{top:6px}

.kp-nav{display:none; margin-top:10px;}
.kp-nav.open{display:block}
.kp-menu{
  display:flex; flex-direction:column; gap:8px;
  padding:10px; border:1px solid var(--kp-border);
  background:var(--kp-card); border-radius:var(--kp-radius);
  box-shadow:var(--kp-shadow);
}
.kp-menu a{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--kp-text);
}
.kp-menu a:hover{background:var(--kp-accent-weak); border-color:rgba(37,99,235,.18); text-decoration:none}
.kp-menu a[aria-current="page"]{background:var(--kp-accent-weak); border-color:rgba(37,99,235,.35); font-weight:700}

.kp-tabs{display:none; gap:10px; align-items:center;}
.kp-tabs a{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--kp-border);
  background:var(--kp-card);
  color:var(--kp-text);
}
.kp-tabs a:hover{background:var(--kp-accent-weak); text-decoration:none}
.kp-tabs a[aria-current="page"]{border-color:rgba(37,99,235,.45); background:var(--kp-accent-weak); font-weight:700}

.kp-main{padding-top:18px}
.kp-card{
  background:var(--kp-card);
  border:1px solid var(--kp-border);
  border-radius:var(--kp-radius);
  box-shadow:var(--kp-shadow);
  padding:16px;
}
.kp-footer{color:var(--kp-muted); font-size:12px; padding:22px 0 10px; text-align:center;}
.kp-grid{display:grid; grid-template-columns:1fr; gap:14px;}
.kp-note{padding:12px; background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; color:#9a3412; font-size:13px;}

@media (min-width: 860px){
  .kp-nav-toggle{display:none}
  .kp-nav{display:block !important; margin-top:0}
  .kp-menu{display:none}
  .kp-tabs{display:flex}
}


/* === Simple Kintai Manager 表示の視認性改善（罫線・表） === */
.kp-card .kintai-section,
.kp-card .kintai-attendance,
.kp-card .kintai-history,
.kp-card #kintai-attendance,
.kp-card #kintai-history{
  border:1px solid var(--kp-border);
  border-radius:12px;
  padding:14px;
  background:var(--kp-card);
}

/* プラグインが出力するテーブル全般 */
.kp-card table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  background:transparent;
}

/* 罫線と余白 */
.kp-card table th,
.kp-card table td{
  border:1px solid var(--kp-border);
  padding:10px 10px;
  vertical-align:middle;
}

/* 見出し行 */
.kp-card table th{
  background:#f3f4f6;
  font-weight:700;
  white-space:nowrap;
}

/* 行の見やすさ */
.kp-card table tbody tr:nth-child(even){
  background:#fafafa;
}

/* 打刻ボタン行が詰まらないように */
.kp-card .kintai-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.kp-card .kintai-btn{
  border:1px solid var(--kp-border);
  background:var(--kp-card);
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
}
.kp-card .kintai-btn:active{transform:scale(.98)}

/* スマホで表が横に長い場合は横スクロール（必要に応じてラッパーdivに付与） */
.kp-card .kintai-table-wrap,
.kp-card .kintai-history-table-wrap,
.kp-card .kintai-attendance-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* 画面幅が狭い場合は文字を少しだけ詰める */
@media (max-width: 520px){
  .kp-card table th,
  .kp-card table td{
    padding:8px 8px;
    font-size:13px;
  }
}


/* === 部署フィルタ（勤怠打刻ページ用） === */
.kp-dept-filter{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin: 0 0 12px 0;
}
.kp-dept-filter label{
  font-weight:700;
  color:var(--kp-text);
}
.kp-dept-filter select{
  appearance:none;
  border:1px solid var(--kp-border);
  background:var(--kp-card);
  border-radius:12px;
  padding:10px 12px;
  min-width: 220px;
  font-weight:700;
}
.kp-dept-hint{
  font-size:12px;
  color:var(--kp-muted);
}

/* === スタッフ並び替え（勤怠打刻ページ用） === */
.kp-sort-filter{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin: 0 0 12px 0;
}
.kp-sort-filter label{font-weight:700; color:var(--kp-text);}
.kp-sort-filter select{
  appearance:none;
  border:1px solid var(--kp-border);
  background:var(--kp-card);
  border-radius:12px;
  padding:10px 12px;
  min-width: 220px;
  font-weight:700;
}

/* === 従業員IDバッジ（デバッグ/視認用） === */
.kp-id-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--kp-border);
  background:#f3f4f6;
  border-radius:999px;
  padding:2px 8px;
  margin-left:6px;
  color:var(--kp-muted);
}
.kp-sort-warn{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #fecaca;
  background:#fef2f2;
  border-radius:12px;
  color:#991b1b;
  font-size:13px;
}


/* === 打刻ボタン 状態制御（次に押すボタンを強調） === */
.kp-card .kintai-btn{
  background:#f9fafb;
  color:#6b7280;
}
.kp-card .kintai-btn.is-next{
  background:#2563eb;
  color:#ffffff;
  border-color:#2563eb;
}
.kp-card .kintai-btn.is-disabled{
  opacity:0.5;
  pointer-events:none;
}


/* === Punch button state (v1.0.12) === */
.kintai-btn.is-next{
  background: #2271b1;
  border-color: #2271b1;
  color: #fff;
}
.kintai-btn.is-disabled,
.kintai-btn:disabled{
  background: #e6e6e6 !important;
  border-color: #cfcfcf !important;
  color: #666 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}


/* Toast */
.kintai-toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  font-size: 14px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 99999;
  max-width: 86vw;
  white-space: pre-wrap;
}
.kintai-toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}
.kintai-toast.is-ok{ border-color:#7fbf7f; }
.kintai-toast.is-ng{ border-color:#e28a8a; }