/*
 * GunjoUI パターン（スタンドアロン版・Tailwind 不要の純 CSS）
 * GunjoUI component patterns, standalone. No build step required.
 *
 * 配布元: https://www.gunjo.jp/patterns.css
 * まとめて開ける単一 HTML: https://www.gunjo.jp/starter.html
 * 使い方の解説: https://www.gunjo.jp/docs/no-npm
 * License: MIT (https://github.com/uixhero/gunjo)
 *
 * 前提: 先に tokens.css を読み込むこと（https://www.gunjo.jp/tokens.css）。
 * このファイルは色・角丸・影を tokens.css の変数から引くので、単体では
 * スタイルが付きません。
 *
 * これは npm 不可の単一 HTML 環境（Claude Artifact 等）向けの資産です。
 * npm が使える環境では @gunjo/ui 本体を使ってください（アクセシビリティ・
 * キーボード操作・状態管理は本体にしかありません）。ここにあるのは
 * 「GunjoUI ルックを手早く再現するための見た目クラス」だけです。
 *
 * クラスはすべて gj- プレフィックス付きで、既存の CSS と衝突しません。
 * セマンティック状態は ok=稼働/成功・warn=注意・crit=危険の 3 系統
 * （tokens の success / warning / destructive を割り当て）。
 */

/* ---------- レイアウト補助（最小限） ---------- */
.gj-stack { display: flex; flex-direction: column; gap: 16px; }
.gj-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gj-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------- Card ---------- */
.gj-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.gj-card__title { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.gj-card__desc { font-size: 14px; color: hsl(var(--muted-foreground)); }
.gj-card__body { margin-top: 12px; }

/* ステータスバー変種＝左端の色帯 */
.gj-card--bar { padding-left: 28px; }
.gj-card--bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: var(--radius) 0 0 var(--radius);
    background: hsl(var(--primary));
}
.gj-card--bar-ok::before { background: hsl(var(--success)); }
.gj-card--bar-warn::before { background: hsl(var(--warning)); }
.gj-card--bar-crit::before { background: hsl(var(--destructive)); }
.gj-card--bar-info::before { background: hsl(var(--info)); }

/* ---------- Stat tile ---------- */
.gj-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
}
.gj-stat__label { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.gj-stat__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.gj-stat__delta { font-size: 12px; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); }
.gj-stat__delta--ok { color: hsl(var(--success-strong)); }
.gj-stat__delta--warn { color: hsl(var(--warning-strong)); }
.gj-stat__delta--crit { color: hsl(var(--destructive-strong)); }

/* ---------- Badge / chip（pill） ---------- */
.gj-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 9999px;
}
.gj-badge--neutral { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.gj-badge--primary { background: hsl(var(--primary-subtle)); color: hsl(var(--primary-subtle-foreground)); border-color: hsl(var(--primary-border)); }
.gj-badge--ok { background: hsl(var(--success-subtle)); color: hsl(var(--success-subtle-foreground)); border-color: hsl(var(--success-border)); }
.gj-badge--warn { background: hsl(var(--warning-subtle)); color: hsl(var(--warning-subtle-foreground)); border-color: hsl(var(--warning-border)); }
.gj-badge--crit { background: hsl(var(--destructive-subtle)); color: hsl(var(--destructive-subtle-foreground)); border-color: hsl(var(--destructive-border)); }
.gj-badge--info { background: hsl(var(--info-subtle)); color: hsl(var(--info-subtle-foreground)); border-color: hsl(var(--info-border)); }
.gj-badge--outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }

/* ---------- Button ---------- */
.gj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--duration-150) var(--ease-out), color var(--duration-150) var(--ease-out);
}
.gj-btn:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
.gj-btn[disabled] { pointer-events: none; opacity: 0.5; }
.gj-btn--primary { background: hsl(var(--primary-strong)); color: hsl(var(--primary-strong-foreground)); box-shadow: var(--shadow-sm); }
.gj-btn--primary:hover { background: hsl(var(--primary)); }
.gj-btn--secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); box-shadow: var(--shadow-sm); }
.gj-btn--secondary:hover { background: hsl(var(--secondary) / 0.8); }
.gj-btn--outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); box-shadow: var(--shadow-sm); }
.gj-btn--outline:hover { background: hsl(var(--muted)); }
.gj-btn--ghost { background: transparent; color: hsl(var(--foreground)); }
.gj-btn--ghost:hover { background: hsl(var(--muted)); }
.gj-btn--destructive { background: hsl(var(--destructive-strong)); color: hsl(var(--destructive-strong-foreground)); box-shadow: var(--shadow-sm); }
.gj-btn--sm { height: 32px; padding: 0 12px; font-size: 12px; }

/* ---------- Form ---------- */
.gj-field { display: flex; flex-direction: column; gap: 6px; }
.gj-label { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); }
.gj-input {
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
}
.gj-input::placeholder { color: hsl(var(--muted-foreground)); }
.gj-input:focus-visible { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring)); }
textarea.gj-input { height: auto; padding: 8px 12px; line-height: 1.5; }

/* ---------- Table ---------- */
.gj-table-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
}
.gj-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gj-table th {
    padding: 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--accent) / 0.55);
    white-space: nowrap;
}
.gj-table td { padding: 12px; vertical-align: middle; border-top: 1px solid hsl(var(--border)); }
.gj-table tbody tr:hover { background: hsl(var(--muted) / 0.5); }
.gj-table--striped tbody tr:nth-child(even) { background: hsl(var(--muted) / 0.25); }
.gj-table .gj-num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Tabs（pill） ---------- */
.gj-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: hsl(var(--muted) / 0.6);
    border-radius: var(--radius);
}
.gj-tab {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    background: transparent;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: background-color var(--duration-150) var(--ease-out), color var(--duration-150) var(--ease-out);
}
.gj-tab:hover { color: hsl(var(--foreground)); }
.gj-tab[aria-selected="true"] { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); }
.gj-tabpanel[hidden] { display: none; }

/* ---------- Timeline（縦：when / dot / rail / what） ---------- */
.gj-timeline { display: flex; flex-direction: column; }
.gj-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    padding-bottom: 20px;
}
.gj-timeline__item::before { /* rail */
    content: "";
    position: absolute;
    left: 95px;
    top: 6px;
    bottom: -6px;
    width: 2px;
    background: hsl(var(--border));
}
.gj-timeline__item:last-child::before { display: none; }
.gj-timeline__when { font-size: 12px; color: hsl(var(--muted-foreground)); text-align: right; padding-top: 1px; }
.gj-timeline__body { position: relative; padding-left: 16px; }
.gj-timeline__body::before { /* dot */
    content: "";
    position: absolute;
    left: -9px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--background));
}
.gj-timeline__title { font-size: 14px; font-weight: 600; }
.gj-timeline__desc { font-size: 13px; color: hsl(var(--muted-foreground)); }
.gj-timeline__item--ok .gj-timeline__body::before { background: hsl(var(--success)); }
.gj-timeline__item--warn .gj-timeline__body::before { background: hsl(var(--warning)); }
.gj-timeline__item--crit .gj-timeline__body::before { background: hsl(var(--destructive)); }

/* ---------- Gantt / schedule bar（横：期間バー＋菱形マイルストーン＋今日線） ----------
 * 各行の期間バーは inline style の --from / --to（トラック幅に対する %）で置く:
 *   <div class="gj-gantt__bar" style="--from: 10%; --to: 60%"></div>
 * マイルストーン・今日線は --at:
 *   <div class="gj-gantt__milestone" style="--at: 60%"></div>
 *   <div class="gj-gantt__today" style="--at: 42%"></div>
 */
.gj-gantt { display: flex; flex-direction: column; gap: 8px; }
.gj-gantt__row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; }
.gj-gantt__label { font-size: 13px; color: hsl(var(--foreground)); }
.gj-gantt__track {
    position: relative;
    height: 22px;
    background: hsl(var(--muted) / 0.5);
    border-radius: 9999px;
}
.gj-gantt__bar {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: var(--from);
    width: calc(var(--to) - var(--from));
    background: hsl(var(--primary));
    border-radius: 9999px;
}
.gj-gantt__bar--ok { background: hsl(var(--success)); }
.gj-gantt__bar--warn { background: hsl(var(--warning)); }
.gj-gantt__bar--crit { background: hsl(var(--destructive)); }
.gj-gantt__milestone {
    position: absolute;
    top: 50%;
    left: var(--at);
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: hsl(var(--primary-strong));
    border: 2px solid hsl(var(--card));
}
.gj-gantt__today {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: var(--at);
    width: 2px;
    background: hsl(var(--destructive));
}

/* ---------- Meter（バー型・KPI 進捗など） ---------- */
.gj-meter {
    position: relative;
    height: 8px;
    background: hsl(var(--muted) / 0.6);
    border-radius: 9999px;
    overflow: hidden;
}
.gj-meter__fill {
    height: 100%;
    width: var(--value, 0%);
    background: hsl(var(--primary));
    border-radius: 9999px;
    transition: width var(--duration-300) var(--ease-out);
}
.gj-meter__fill--ok { background: hsl(var(--success)); }
.gj-meter__fill--warn { background: hsl(var(--warning)); }
.gj-meter__fill--crit { background: hsl(var(--destructive)); }