/* InfraPulse Mockup — shared styles
   実装（standardforce/maintenance_app の app/globals.css・components/*）の意匠に合わせています。
   ・アクセントは indigo / purple
   ・ページは「パネル（角丸・影）＋上部グラデーション帯＋紫グラデーションのヘッダー」
   ・テーブル見出しは白・大文字・字間広め、行は indigo/purple の淡いグラデーション
   ・フッターは indigo→purple のグラデーション
*/

:root {
  --ip-indigo-50: #eef2ff;
  --ip-indigo-100: #e0e7ff;
  --ip-indigo-200: #c7d2fe;
  --ip-indigo-500: #6366f1;
  --ip-indigo-600: #4f46e5;
  --ip-indigo-700: #4338ca;
  --ip-purple-500: #a855f7;
  --ip-purple-600: #9333ea;
  --ip-slate-200: #e2e8f0;
  --ip-slate-600: #475569;
  --ip-ink: #1e293b;
  --ip-muted: #64748b;
}

/* 実装と同じフォント指定 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
  color: var(--ip-ink);
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
::selection { background: rgb(99 102 241 / 0.22); color: rgb(30 41 59); }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { min-width: 0; }
table { max-width: 100%; }

/* --- ブランド ----------------------------------------------------------- */
.ip-brand {
  background: linear-gradient(90deg, #1e293b, #334155);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* --- モックアップ表示バー ------------------------------------------------ */
.ip-mockbar {
  background: repeating-linear-gradient(45deg, #fde68a, #fde68a 10px, #fcd34d 10px, #fcd34d 20px);
  color: #78350f;
}

/* --- パネル（infra-page-panel 相当） ------------------------------------ */
.card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--ip-slate-200);
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 10px 28px rgb(15 23 42 / 0.05);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  animation: infra-fade-up 420ms ease-out both;
}
.card:hover {
  border-color: var(--ip-indigo-200);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 16px 36px rgb(79 70 229 / 0.08);
}

/* パネル上端のグラデーション帯（infra-page-accent） */
.ip-accent {
  height: 4px;
  background: linear-gradient(to right, #6366f1, #0ea5e9, #10b981);
  background-size: 220% 100%;
  opacity: 0.8;
  animation: infra-accent-pan 8s ease-in-out infinite;
}

/* ページヘッダー（infra-page-header）— 紫グラデーション・白文字 */
.ip-page-head {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-image: linear-gradient(to right, #4f46e5, #9333ea, #4338ca);
}
.ip-page-head::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(to right, #818cf8, #a855f7, #4f46e5);
  opacity: 0.8;
}
.ip-page-head-inner { padding: 16px 12px; }
@media (min-width: 640px) { .ip-page-head-inner { padding: 20px 16px; } }
@media (min-width: 1024px) { .ip-page-head-inner { padding: 24px 20px; } }
.ip-page-icon {
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.10);
  backdrop-filter: blur(4px);
  padding: 8px;
  color: #fff;
  transition: background-color 180ms ease, transform 180ms ease;
}
.card:hover .ip-page-icon { background: rgb(255 255 255 / 0.20); transform: translateY(-1px); }
.ip-page-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.35; }
@media (min-width: 640px) { .ip-page-title { font-size: 18px; } }
@media (min-width: 1024px) { .ip-page-title { font-size: 20px; } }
.ip-page-subtitle { margin-top: 2px; font-size: 12px; color: #e0e7ff; }
@media (min-width: 640px) { .ip-page-subtitle { font-size: 13.5px; } }
.ip-head-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.30);
  background: rgb(255 255 255 / 0.20); backdrop-filter: blur(4px);
  padding: 7px 12px; font-size: 12px; font-weight: 500; color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); transition: all 200ms ease; cursor: pointer;
}
.ip-head-btn:hover { background: rgb(255 255 255 / 0.30); box-shadow: 0 4px 10px rgb(0 0 0 / 0.12); }

/* ヘッダー内に置かれたボタン・リンクは実装の infra-page-header-btn の見た目に揃える */
.ip-page-head .btn-ghost,
.ip-page-head .btn-primary,
.ip-page-head .btn-danger {
  background: rgb(255 255 255 / 0.20);
  border-color: rgb(255 255 255 / 0.30);
  color: #fff;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.ip-page-head .btn-ghost:hover,
.ip-page-head .btn-primary:hover,
.ip-page-head .btn-danger:hover {
  background: rgb(255 255 255 / 0.32);
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.14);
}
.ip-page-head .text-blue-600,
.ip-page-head .text-blue-700 { color: #e0e7ff !important; }
.ip-page-head .badge-gray { background: rgb(255 255 255 / 0.20); color: #fff; }

/* パネル内の見出し行（実装のセクション見出し相当） */
.card-h {
  padding: 10px 14px;
  border-bottom: 1px solid rgb(199 210 254 / 0.6);
  background: linear-gradient(to right, rgb(238 242 255 / 0.5), rgb(250 245 255 / 0.5));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-t { font-weight: 700; font-size: 13.5px; color: #1e293b; }
.ip-page-body { padding: 12px; }
@media (min-width: 640px) { .ip-page-body { padding: 16px; } }

/* --- 絞り込み行（infra-filter-row） ------------------------------------- */
.ip-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (min-width: 640px) { .ip-filter-row { gap: 12px; } }
.ip-filter-label {
  display: flex; align-items: center;
  font-size: 13px; font-weight: 600; color: #334155; margin-right: 4px;
}
.ip-filter-label-accent {
  display: inline-block; width: 4px; height: 16px; border-radius: 999px;
  background: var(--ip-indigo-500); margin-right: 8px;
  animation: infra-soft-pulse 2.6s ease-in-out infinite;
}

/* --- テーブル（infra-table-frame + PropertiesTable 相当） ---------------- */
.ip-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.ip-table thead th {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  color: #374151;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
  padding: 12px 12px;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 0 0 rgb(0 0 0 / 0.08);
  backdrop-filter: blur(4px);
}
.ip-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid rgb(224 231 255 / 0.5);
  white-space: nowrap;
  color: #334155;
}
.ip-table tbody tr {
  background: linear-gradient(to right, rgb(238 242 255 / 0.30), rgb(250 245 255 / 0.30));
  transition: background-color 160ms ease, transform 160ms ease;
}
.ip-table tbody tr:hover {
  background: linear-gradient(to right, rgb(238 242 255 / 0.60), rgb(250 245 255 / 0.60));
  transform: translateX(1px);
}
.ip-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #1e293b; }

/* 案件番号など、リンクのセルは実装と同じ青いピル表示 */
.ip-table tbody td > a.text-blue-600 {
  display: inline-block; border-radius: 6px;
  background: #eff6ff; padding: 3px 8px;
  color: #1d4ed8; font-weight: 600; text-decoration: none;
}
.ip-table tbody td > a.text-blue-600:hover { background: #dbeafe; }

/* 値のピル表示（実装のセル内ピル） */
.pill {
  display: inline-block; max-width: 100%; border-radius: 6px;
  background: #f3f4f6; padding: 3px 9px; font-size: 12px; font-weight: 500; color: #374151;
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.pill-num {
  display: inline-block; border-radius: 6px;
  background: #eff6ff; padding: 3px 8px; font-size: 12px; font-weight: 600; color: #1d4ed8;
  font-variant-numeric: tabular-nums;
}

/* 表の枠（infra-table-frame）とスクロールバー */
.ip-scroll {
  overflow: auto; max-height: 62vh;
  border-radius: 8px; border: 1px solid var(--ip-slate-200); background: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9);
  overscroll-behavior: contain;
}
.ip-scroll::-webkit-scrollbar { width: 12px; height: 12px; background: #f5f3ff; }
.ip-scroll::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #f5f3ff, #ede9fe);
  border-radius: 10px; border: 1px solid rgba(139, 92, 246, 0.2);
}
.ip-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #6366f1, #8b5cf6);
  border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 6px rgba(99, 102, 241, 0.3);
}
.ip-scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #4f46e5, #7c3aed); }

/* ページャ（infra-pagination-bar） */
.ip-pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  border-top: 1px solid #e4e4e7;
  background: rgb(250 250 250 / 0.95);
  padding: 12px;
  font-size: 12px; color: #52525b;
}
@media (min-width: 640px) { .ip-pager { padding: 12px 16px; } }

/* --- バッジ ------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 18px;
}
.badge-green { background: linear-gradient(to right, #dcfce7, #d1fae5); color: #15803d; }
.badge-amber { background: linear-gradient(to right, #fef3c7, #fef9c3); color: #b45309; }
.badge-red   { background: linear-gradient(to right, #fee2e2, #ffe4e6); color: #be123c; }
.badge-blue  { background: linear-gradient(to right, #e0e7ff, #dbeafe); color: #4338ca; }
.badge-gray  { background: #f1f5f9; color: #475569; }
.badge-violet{ background: linear-gradient(to right, #e0e7ff, #f3e8ff); color: #6d28d9; }

/* --- フォーム ----------------------------------------------------------- */
.f-label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 4px; }
.f-input, .f-select {
  width: 100%; border: 1px solid #d4d4d8; border-radius: 8px; padding: 7px 10px;
  font-size: 13px; background: #fff; color: #0f172a;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.f-input:focus, .f-select:focus {
  outline: none;
  border-color: rgb(129 140 248);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.14);
}
.f-hint { font-size: 11px; color: var(--ip-muted); margin-top: 4px; }

/* --- ボタン ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 12px; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border: 1px solid transparent; cursor: pointer;
  transition: all 200ms ease;
}
.btn-primary {
  background: linear-gradient(to right, #6366f1, #a855f7);
  color: #fff;
  box-shadow: 0 2px 6px rgb(79 70 229 / 0.25);
}
.btn-primary:hover { box-shadow: 0 6px 16px rgb(79 70 229 / 0.30); }
.btn-ghost {
  background: #fff; color: var(--ip-indigo-700); border-color: var(--ip-indigo-200);
}
.btn-ghost:hover { background: var(--ip-indigo-50); }
.btn-danger { background: linear-gradient(to right, #ef4444, #e11d48); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 9px; }
/* 実装の Excel / PDF 専用色 */
.btn-excel { background: #1d6f42 !important; color: #fff !important; border-color: transparent; }
.btn-excel:hover { background: #165a36 !important; }
.btn-pdf { background: #e5252a !important; color: #fff !important; border-color: transparent; }
.btn-pdf:hover { background: #c41e22 !important; }

/* --- その他 ------------------------------------------------------------- */
.kpi-v { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sec-note { font-size: 11.5px; color: var(--ip-muted); }
.gantt-row:hover { background: rgb(238 242 255 / 0.5); }

/* セクション小見出し（実装の折りたたみヘッダー相当） */
.ip-section-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 12px;
  background: linear-gradient(to right, rgb(238 242 255 / 0.5), rgb(250 245 255 / 0.5));
  border: 1px solid rgb(199 210 254 / 0.6);
}

/* --- アニメーション ----------------------------------------------------- */
@keyframes infra-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes infra-accent-pan {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes infra-soft-pulse {
  0%, 100% { opacity: 0.72; transform: scaleY(0.9); }
  50% { opacity: 1; transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .card, .ip-accent, .ip-filter-label-accent { animation: none !important; }
  .card, .ip-page-icon { transition: none !important; transform: none !important; }
}

@media print {
  .ip-mockbar, .ip-nav, .ip-foot, .no-print { display: none !important; }
  .card { box-shadow: none; animation: none; }
}