/* ====== RideRIX: Global Styles ====== */

/* 変数 */
:root{
  --primary:#0f766e;   /* 深めのティールグリーン */
  --accent:#10b981;    /* 明るめのミントグリーン */
  --text:#1a1a1a;      /* 本文 */
  --muted:#4b5563;     /* 補助テキスト */
  --line:#e5e7eb;      /* 罫線 */
  --bg:#ffffff;        /* 背景 */
  --sidebar-bg:#f6fbfa;/* サイドバー淡色 */
  --hover:#e7f5f1;     /* ホバー */
}

/* ベース */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Segoe UI",system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}

h1,h2,h3{ color:var(--primary); margin:0 0 8px }

/* レイアウト */
.app{
  display:grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height:100dvh;
}

/* サイドバー */
aside.sidebar{
  grid-area:sidebar;
  background:var(--sidebar-bg);
  border-right:1px solid var(--line);
  position:sticky; top:0; height:100dvh;
  padding:16px 12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:20px; color:var(--primary);
  text-decoration:none; padding:8px 10px; border-radius:8px;
}
.brand .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--accent);
  display:inline-block;
}
.menu{ margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }
.menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:4px 0; border-radius:10px;
  color:var(--text); text-decoration:none;
  transition:background .2s, color .2s;
  font-weight:500;
}
.menu a:hover{ background:var(--hover); color:var(--primary); }
.menu a[aria-current="page"]{
  background:var(--hover); color:var(--primary); font-weight:700;
  border:1px solid #d7efe9;
}
.menu .icon{ width:18px; text-align:center; opacity:.9 }

/* トップバー */
header.topbar{
  grid-area:topbar;
  border-bottom:1px solid var(--line);
  background:#fff; position:sticky; top:0; z-index:5;
}
.topbar-inner{
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
}
.topbar-left{ display:flex; align-items:center; gap:10px; }
.topbar-title{ font-size:16px; color:var(--muted); }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--text); text-decoration:none;
  transition:background .2s, border-color .2s;
}
.btn:hover{ background:#fafafa; border-color:#dcdfe4; }
.cta{ border-color:transparent; background:var(--primary); color:#fff; }
.cta:hover{ background:#0c5f59; }

/* メイン */
main{
  grid-area:main;
  padding:20px 18px 28px;
  max-width:1200px; width:100%;
}
.container{ max-width:1040px; margin:0 auto; }
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:20px; box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.card.narrow{ max-width:520px; margin:0 auto; }

/* フォーム共通（login/signup から統合） */
.form { display:grid; gap:12px; }
.field { display:grid; gap:6px; }
.field label { font-weight:600; color:var(--text); }
.field input {
  padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font:inherit; width:100%; background:#fff;
}
.actions { display:flex; gap:10px; align-items:center; }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:8px; border:0; cursor:pointer;
  background:var(--primary); color:#fff;
}

/* ===== logout用の小フォーム ===== */
form.inline { display:inline; margin:0; }
form.inline button { font: inherit; }

/* トップバー右側余白調整 */
.topbar-actions form.inline { margin-left: 8px; }
.topbar-actions .btn-ghost { line-height: 1; }

/* ボタン風 */
.btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn-ghost:hover{
  background: #fafafa;
  border-color: var(--line);
}
.btn-ghost:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* テキスト */
.hint{ color:var(--muted); font-size:14px; }
.mr-10{ margin-right:10px; }

/* フラッシュメッセージ */
.flash { display:grid; gap:8px; margin:12px 0; }
.flash-success, .flash-error {
  padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:#fff;
}
.flash-success { border-color:#cce7df; color:#0f5132; background:#e7f5f1; }
.flash-error { border-color:#f3c2c2; color:#842029; background:#fdecec; }

/* インラインフォーム用 */
.inline-form{ display:inline; }

/* レスポンシブ（モバイル：サイドバーをオフキャンバスに） */
.sidebar-toggle{ display:none; }
@media (max-width: 900px){
  .app{
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  aside.sidebar{
    position:fixed; inset:0 auto 0 0; width:260px; height:100dvh;
    transform:translateX(-100%); transition:transform .25s ease;
    z-index:20; box-shadow: 2px 0 12px rgba(0,0,0,.08);
  }
  aside.sidebar.open{ transform:translateX(0); }
  .sidebar-toggle{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 10px; border-radius:8px; border:1px solid var(--line);
    background:#fff; color:var(--text); cursor:pointer;
  }
  .overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.25);
    display:none; z-index:15;
  }
  .overlay.show{ display:block; }
}

  /* フラッシュメッセージリスト */
  .flash-list{margin:12px 0;padding:0;list-style:none}
  .flash-item{padding:8px 12px;border-radius:8px;border:1px solid #e5e7eb}
  .flash-success{background:#f0fdf4}
  .flash-error{background:#fef2f2}

  .link-small {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  margin-left: 8px;
  transition: color .2s;
}
.link-small:hover {
  color: var(--primary);
  text-decoration: underline;
}