/* ========================================================================
   農業IoTシステム 共通スタイルシート
   モックHTML全画面で共有。HTML作成ルール R02 に従い ID セレクタ不使用。

   Lism CSS 非依存（2026-06-03 完全drop）:
   - 旧 Lism トークン（--s*/--fz--*/--bdrs--*/--sh--*/--divider/--sz--*）は
     すべて自前トークンに実値化。lism.css の読み込みは不要。
   - カスケードは自前 @layer（reset < base < components < utilities）で管理。
     優先度: reset < base(:root・要素) < components(.card 等) < utilities(.u-* ヘルパ)
   - レスポンシブは素のモダンCSS（grid auto-fill/auto-fit, clamp(), @media 1個）で対応。
     コンポーネント自己レスポンシブが要るときは各部品に @container を内包する。
   - フォントサイズは旧 Lism の em 追従をやめ rem 固定に変更（親 fz 非依存で
     フォーム要素の高さブレを構造的に根絶）。
   ======================================================================== */

@layer reset, base, components, utilities;

/* Alpine.js x-cloak: 初期化前の要素を隠す（モーダル・空メッセージのちらつき防止）。
   @layer 外（unlayered）に置き、レイヤー内の display 指定より確実に優先させる。 */
[x-cloak] { display: none !important; }

/* ============================ reset ============================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    height: 100%;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    overflow-wrap: anywhere;
    tab-size: 4;
  }
  body {
    min-height: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* クラス付きリストのみマーカー除去（sidebar 等のクラス無し ul は従来通り） */
  :is(ul, ol)[class] { list-style: none; padding: 0; }

  img, picture, svg, video, canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }
  button, input, select, textarea { font: inherit; color: inherit; }
  :is([type="checkbox"], [type="radio"], label[for], select, summary) { cursor: pointer; }
  :is(button, [type="button"], [type="submit"], [type="reset"]) {
    cursor: pointer;
    touch-action: manipulation;
  }
  :disabled { cursor: not-allowed; }
  table { border-collapse: collapse; }
}

/* ============================ base ============================ */
@layer base {
  :root {
    /* --- カラー（プロジェクト固有・Lism非依存、従来通り） --- */
    --color-primary: #28a745;
    --color-primary-dark: #218838;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-muted: #6c757d;
    --color-bg: #f5f7fa;
    --color-surface: #ffffff;
    --color-text: #212529;
    --color-border: #dedfe3;              /* 旧 var(--divider) を実値化 */

    /* --- スペーススケール（4px グリッド。旧 Lism --s* を実値化） --- */
    --space-1: 0.25rem;   /* 4px  （旧 --s5）  */
    --space-2: 0.5rem;    /* 8px  （旧 --s10） */
    --space-3: 0.75rem;   /* 12px （旧 --s15） */
    --space-4: 1rem;      /* 16px （旧 --s20） */
    --space-6: 1.5rem;    /* 24px （旧 --s30） */
    --space-10: 2.5rem;   /* 40px （旧 --s40） */

    /* --- フォントサイズ（rem 固定。旧 Lism em追従 --fz* を実値化） --- */
    --fs-sm: 0.875rem;    /* 14px   （旧 --fz--s）  */
    --fs-base: 1rem;      /* 16px   （旧 --fz--m）  */
    --fs-lg: 1.125rem;    /* 18px   （旧 --fz--l）  */
    --fs-xl: 1.3125rem;   /* 21px   （旧 --fz--xl） */
    --fs-2xl: 1.6rem;     /* 25.6px （旧 --fz--2xl）*/

    /* --- 角丸・影・コンテナ幅（旧 Lism エイリアスを実値化） --- */
    --radius: 0.25rem;                              /* 旧 --bdrs--10 */
    --shadow-sm: 0 1px 3px rgba(20, 20, 21, 0.05);  /* 旧 --sh--5  */
    --shadow-md: 0 2px 6px rgba(20, 20, 21, 0.05);  /* 旧 --sh--10 */
    --container-l: 1280px;   /* 旧 --sz--l  */
    --container-xs: 32rem;   /* 旧 --sz--xs */

    /* --- レイアウト固定値（Lism にトークンなし） --- */
    --sidebar-width: 220px;
    --header-height: 56px;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
                 "Yu Gothic UI", "Meiryo", sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
  }

  a { color: var(--color-primary); text-decoration: none; }
  a:hover { text-decoration: underline; }
}

/* ============================ components ============================ */
@layer components {

/* === 共通プリミティブ（複数コンポーネントで共有する宣言を集約） === */
/* サーフェスパネル: 白背景＋角丸＋弱い影。.card / .table-wrapper / .device-card / .summary-box が共有
   （.guest-card は影が --shadow-md のため対象外） */
.card,
.table-wrapper,
.device-card,
.summary-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* --- 共通レイアウト (ヘッダ + サイドバー) --- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  z-index: 10;
}
.site-header .logo {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;   /* 狭幅でもロゴを折り返さない */
}
.header-left { display: flex; align-items: center; gap: var(--space-3); }
/* ハンバーガー: デスクトップでは非表示。モバイル(@media)で flex 表示しサイドバードロワーを開閉 */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--color-text);
  padding: var(--space-2);
}
/* ドロワー開時の背面オーバーレイ。可視制御は Alpine の x-show="navOpen" に委ねる（ヘッダーは覆わない） */
.nav-backdrop {
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 40;
}
.user-menu { display: flex; align-items: center; gap: var(--space-4); }
.user-name { color: var(--color-muted); }
.logout-form { display: inline; }

.sidebar {
  position: fixed;
  top: var(--header-height); left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding-top: var(--space-4);
  overflow-y: auto;
}
.sidebar li a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  border-left: 3px solid transparent;
}
.sidebar li a:hover { background: var(--color-bg); text-decoration: none; }
.sidebar li a.active {
  background: var(--color-bg);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

.main-content {
  margin-left: var(--sidebar-width);
  padding-top: var(--header-height);
  min-height: 100%;
}
.main-inner { padding: clamp(var(--space-4), 3vw, var(--space-6)); max-width: var(--container-l); }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.page-header h1 { font-size: var(--fs-2xl); font-weight: 600; }

/* --- ゲスト (login / register) 用レイアウト --- */
.guest-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-4);
}
.guest-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-10);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-md);
}
.guest-card h1 {
  text-align: center;
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-6);
  color: var(--color-primary);
}
.guest-card .form-footer {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
}

/* --- フォーム共通 --- */
.form-group { margin-bottom: var(--space-4); }
.form-group > label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.required-mark { color: var(--color-danger); }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  /* 固定値で揃える (rem 基準のトークンなので親 fz に依存せず高さが揃う) */
  font-size: 1rem;
  line-height: 1.5;
  background: var(--color-surface);
  box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}
/* select にも appearance: none を適用して独自矢印に置換、input と完全に同じ寸法にする */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236c757d' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: calc(var(--space-3) * 2 + 12px);
}
/* input[type=number] のスピナーを非表示化し、他の input/select と見た目を統一 */
.form-group input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.form-group input[type="number"]::-webkit-outer-spin-button,
.form-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-help {
  display: block;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
}
.error-message {
  display: block;
  color: var(--color-danger);
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
  min-height: 1em;
}
/* HTMX グローバルエラー通知トースト (App.templ #global-error-toast)。
   インラインのフィールド検証エラー .error-message とは別物のため独立クラスにする。 */
.error-toast {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 90%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger);
  color: var(--color-surface);
  font-size: var(--fs-sm);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.radio-group { display: flex; gap: var(--space-4); }
.radio-group label { font-weight: normal; }

.form-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-6);
}
.form-actions.full-width .btn { width: 100%; }

/* --- ボタン --- */
.btn {
  display: inline-block;
  white-space: nowrap;   /* 狭幅セル内でもボタン文字(編集/削除等)を改行させない */
  padding: var(--space-2) var(--space-4);
  /* input と同じ見かけ高さにするため transparent border を敷く (2px 分) */
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  transition: background 0.15s;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-secondary { background: var(--color-muted); color: #fff; }
.btn-danger { background: var(--color-danger); color: #fff; }
/* <a class="btn"> が base の a:hover 下線を継がないよう、ホバー下線解除を一括指定 */
.btn:hover { text-decoration: none; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary:hover { background: #5a6268; }
.btn-danger:hover { background: #c82333; }
.btn-small { padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); }

/* --- カード --- */
.card {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.card h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
/* 1カラム編集フォーム（device-create / device-edit）用の幅制限カード（R15: インラインstyle禁止の置換先） */
.card-narrow { max-width: 600px; }

/* --- テーブル --- */
.table-wrapper {
  overflow-x: auto;
  margin-bottom: var(--space-4);
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { background: var(--color-bg); }
.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  /* 狭幅では数値や日時を途中改行させず、.table-wrapper の overflow-x:auto で横スクロールさせる */
  white-space: nowrap;
}
.data-table th { font-weight: 600; color: var(--color-muted); font-size: var(--fs-sm); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-bg); }
.empty-message {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-muted);
}

/* --- ページネーション --- */
.pagination {
  display: flex;
  gap: var(--space-1);
  justify-content: center;
  margin-top: var(--space-4);
}
.pagination a,
.pagination span {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  background: var(--color-surface);
}
/* ページネーションのアクティブ状態と期間セレクタの選択中状態は同一デザイン */
.pagination .current,
.period-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.pagination .disabled {
  color: var(--color-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* --- アラート通知バナー --- */
.alert-banner {
  background: #fff3cd;
  border-left: 4px solid var(--color-warning);
  padding: var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
}
.alert-banner h2 {
  font-size: var(--fs-base);
  color: #856404;
  margin-bottom: var(--space-2);
}
.alert-banner li {
  padding: var(--space-1) 0;
  color: #856404;
}

/* --- ダッシュボード: デバイスカード --- */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.device-card {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.device-card h3 { font-size: var(--fs-lg); }
.device-card .meta { color: var(--color-muted); font-size: var(--fs-sm); }
.status-active { color: var(--color-primary); }
.status-inactive { color: var(--color-muted); }
.readings-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-2) 0;
}
.reading-value {
  flex: 1;
  text-align: center;
}
.reading-value .label { font-size: var(--fs-sm); color: var(--color-muted); }
.reading-value .value { font-size: var(--fs-2xl); font-weight: 600; }

/* --- デバイス詳細: 情報 --- */
.device-info dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-2);
}
.device-info dt { font-weight: 600; color: var(--color-muted); }
.device-info dd { color: var(--color-text); }

/* --- デバイス詳細: 期間セレクタ --- */
.period-selector {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.period-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--fs-sm);
}
/* .period-btn.active は pagination セクションで .pagination .current と束ねて定義 */

/* --- SVGグラフプレースホルダー --- */
.chart-placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      #eef2f5,
      #eef2f5 10px,
      #e4e9ed 10px,
      #e4e9ed 20px
    );
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  border-radius: var(--radius);
  font-style: italic;
}

/* --- センサーデータ履歴: フィルタとサマリ --- */
/* インラインフォーム共通（.filter-form=履歴/readings の絞り込み, .rule-form=アラートルール追加）。
   flex 配置と form-group の伸縮を共有し、gap と min-width だけ各フォームで個別指定する */
.filter-form,
.rule-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filter-form .form-group,
.rule-form .form-group { margin: 0; flex: 1; }
/* button を form-group の input 上端と揃える (error-message 空間 + margin-top 分だけ下げる) */
.filter-form > .btn,
.rule-form > .btn {
  margin-bottom: calc(var(--fs-sm) + var(--space-1));
}
.filter-form { gap: var(--space-4); }
.filter-form .form-group { min-width: 150px; }

.summary-grid {
  display: grid;
  /* 温度3指標 + 湿度3指標を 2行×3列 で表示（設計意図を保持）。狭幅では @media で1列化 */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.summary-box {
  padding: var(--space-4);
  text-align: center;
}
.summary-box .label { font-size: var(--fs-sm); color: var(--color-muted); }
.summary-box .value { font-size: var(--fs-lg); font-weight: 600; margin-top: var(--space-1); }

/* --- アラートルール管理 --- */
/* .rule-form のflex配置・form-group伸縮は「インラインフォーム共通」で定義済み。ここは固有値のみ */
.rule-form { gap: var(--space-3); }
.rule-form .form-group { min-width: 120px; }
.rule-list-actions { display: flex; gap: var(--space-2); }

/* --- Tom Select: ネイティブ .form-group select と見た目を揃える (TS03 / TS07) --- */
/* デバイス選択など DB 由来 select に適用。生成される .ts-control を素の入力欄と同寸法にする */
.form-group .ts-wrapper.single .ts-control {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 0;
  background: var(--color-surface);
  box-shadow: none;
}
.form-group .ts-wrapper.single .ts-control input { font-size: 1rem; }
.form-group .ts-wrapper.focus .ts-control {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-border);
  box-shadow: none;
}
/* dropdownParent:'body' で body 直下に出るドロップダウンをヘッダー(z-index:10)より前面に (TS02) */
.ts-dropdown { z-index: 200 !important; }

/* --- モーダル (R14) --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-content {
  background: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius);
  max-width: var(--container-xs);
  width: 90%;
}

/* --- レスポンシブ (ビューポート起因の切替のみ。grid 系は auto-fill/auto-fit で対応済み) --- */
@media (max-width: 768px) {
  /* サイドバーはドロワー化。display:none をやめ、画面外へ transform で退避→ハンバーガーで開閉 */
  .nav-toggle { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 50;            /* backdrop(40) より上、コンテンツより上 */
    box-shadow: var(--shadow-md);
  }
  .sidebar.is-open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .summary-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
}

/* 狭幅スマホ: ヘッダーが窮屈になるためユーザー名を隠し、ハンバーガー+ロゴ+ログアウトを優先 */
@media (max-width: 480px) {
  .user-name { display: none; }
}

} /* end @layer components */

/* ============================ utilities ============================ */
/* 旧 Lism Property Class (-d:inline, -my-e:15 等) の置換先。components より優先。 */
@layer utilities {
  .u-d-inline { display: inline; }
  .u-ta-right { text-align: right; }
  .u-mb-4  { margin-block: var(--space-4); }
  .u-mbs-2 { margin-block-start: var(--space-2); }
  .u-mbs-6 { margin-block-start: var(--space-6); }
  .u-mbe-3 { margin-block-end: var(--space-3); }
  .u-mbe-4 { margin-block-end: var(--space-4); }
  /* 視覚的に隠しつつスクリーンリーダーには読ませる（R01-2: トグルcheckbox のラベルテキスト用） */
  .u-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}