/* ============================================================
   ge365x-web — base styles (v3, 白基調 + 紺サイドバー + 青アクセント)
   ============================================================ */

:root {
  --sidebar:        #1E2A3B;
  --sidebar-hover:  #2A3B52;
  --sidebar-active: #2F4A7A;
  --accent:         #2563EB;
  --accent-hover:   #1D4ED8;
  --accent-light:   #EFF6FF;
  --paper:          #F7F8FB;
  --paper-soft:     #F1F3F7;
  --card:           #FFFFFF;
  --ink:            #1F2937;
  --ink-muted:      #6B7280;
  --ink-faint:      #9CA3AF;
  --line:           #E5E7EB;
}

html, body { background: var(--paper); color: var(--ink); font-family: 'Noto Sans JP', Inter, system-ui, sans-serif; }

/* ===== 入力 ===== */
.inp {
  @apply w-full px-3 py-2 rounded-lg bg-white border border-line text-ink
         placeholder:text-ink-faint text-sm
         focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent;
  transition: all .15s;
}
textarea.inp { min-height: 6rem; resize: vertical; line-height: 1.6; }

.input-mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }

/* ===== ボタン ===== */
.btn {
  @apply inline-flex items-center gap-1.5 px-3.5 py-2 rounded-md text-sm font-medium cursor-pointer transition-all border border-transparent;
}
.btn-primary { @apply bg-accent text-white hover:bg-accent-hover shadow-sm; }
.btn-ghost   { @apply bg-white text-ink border-line hover:bg-paper-soft hover:border-ink-faint; }
.btn-subtle  { @apply bg-accent-light text-accent-hover border-accent-light/50 hover:bg-accent/10; }
.btn-danger  { @apply bg-white text-red-700 border-red-200 hover:bg-red-50; }
.btn-sm      { @apply px-2.5 py-1.5 text-xs; }

/* ===== カード ===== */
.card {
  @apply bg-white border border-line rounded-xl p-6 shadow-sm;
}
.card-sm { @apply p-4; }

/* ===== サイドバー ===== */
.nav-item {
  @apply flex items-center gap-2.5 px-3 py-2 rounded-md text-xs font-medium
         text-[#A7B6CE] cursor-pointer transition-all my-0.5 mx-2;
}
.nav-item:hover    { background: var(--sidebar-hover); color: #fff; }
.nav-item.active   { background: var(--sidebar-active); color: #fff; box-shadow: inset 3px 0 0 #60A5FA; }
.nav-item i        { width: 1.1rem; text-align: center; font-size: 0.95rem; opacity: 0.9; }

/* ===== ラベル ===== */
.field-label {
  @apply flex items-center gap-1.5 text-xs font-semibold text-ink mb-1.5;
}
.field-label i.icon-red    { @apply text-red-500; }
.field-label i.icon-blue   { @apply text-blue-500; }
.field-label i.icon-yellow { @apply text-amber-500; }
.field-label i.icon-purple { @apply text-purple-500; }
.field-label i.icon-green  { @apply text-emerald-500; }

/* ===== バッジ ===== */
.pill {
  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold border;
}
.pill-ok       { @apply bg-emerald-50  text-emerald-800 border-emerald-200; }
.pill-warn     { @apply bg-amber-50    text-amber-800   border-amber-200;   }
.pill-err      { @apply bg-red-50      text-red-800     border-red-200;     }
.pill-soft     { @apply bg-paper-soft  text-ink-muted   border-line;        }
.pill-blue     { @apply bg-accent-light text-accent-hover border-accent-light; }

/* ===== アラート ===== */
.alert {
  @apply flex items-start gap-2 px-4 py-3 rounded-md text-sm leading-relaxed border;
}
.alert-warn { @apply bg-amber-50    border-amber-200 text-amber-900; }
.alert-ok   { @apply bg-emerald-50  border-emerald-200 text-emerald-900; }
.alert-err  { @apply bg-red-50      border-red-200 text-red-900; }
.alert-info { @apply bg-accent-light border-accent-light text-accent-hover; }

/* ===== テーブル ===== */
table.data { @apply w-full border-collapse text-sm; }
table.data thead th {
  @apply px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider
         text-ink-muted bg-paper-soft border-b border-line;
}
table.data tbody td {
  @apply px-3 py-2.5 border-b border-line/60 text-ink;
}
table.data tbody tr:hover { background: #F9FAFB; }

/* ===== チャットFAB ===== */
.fab {
  @apply fixed bottom-6 right-6 w-13 h-13 rounded-full bg-accent text-white
         flex items-center justify-center shadow-xl cursor-pointer;
  width: 3.25rem; height: 3.25rem;
  box-shadow: 0 10px 25px rgba(37,99,235,0.35);
  transition: transform .15s, background .15s;
}
.fab:hover { transform: scale(1.05); background: var(--accent-hover); }

/* ===== 「使用例」小ボタン ===== */
.example-btn {
  @apply inline-flex items-center gap-1 px-2.5 py-1 rounded
         bg-accent-light text-accent-hover border border-accent-light
         text-xs font-medium cursor-pointer hover:bg-accent/10;
}

/* ===== セクションタイトル ===== */
.section-title {
  @apply flex items-center gap-2 text-lg font-bold text-ink;
}
.section-title i { @apply text-accent; }
.section-desc { @apply text-xs text-ink-muted mt-1; }

/* ===== ログインカード ===== */
.login-card {
  @apply bg-white border border-line rounded-2xl p-8 shadow-xl;
}

/* スクロールバー */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ユーティリティ */
.hide { display: none !important; }
.divider { height: 1px; background: var(--line); margin: 1rem 0; }