/* =========================
   OnePortal 共通CSS（最小）
   - モバイル優先
   - RMS型レフトナビのみ（旧 .sidebar は廃止）
========================= */

/* 0) Tokens */
:root{
  --bg:#f5f7fa; --fg:#111827; --muted:#6b7280;
  --border:#e5e7eb; --primary:#2563eb;
  --radius:10px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --container:1200px;
  --gnav-left:220px;   /* 大項目の横幅 */
  --gnav-sub:260px;    /* 右パネルの横幅 */
  --header-h:56px;
  --gnav-bg:#263238; --gnav-line:#37474f; --gnav-sub-bg:#37474f; --gnav-hover:#3a4850;
}

/* 1) Reset / Base */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif; }
img,video{ max-width:100%; height:auto; }
a{ color:var(--primary); text-decoration:none; }
h1,h2,h3{ line-height:1.25; margin:.6em 0 .3em; }

/* 2) Header */
.header{
  height:var(--header-h); background:#1976d2; color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-4);
}
.header .logo{ font-weight:700; font-size:18px; display:flex; align-items:center; gap:8px; }
.header .nav{ display:flex; align-items:center; gap:12px; }
.header .nav a{ color:#fff; padding:6px 10px; border-radius:6px; }
.header .nav a:hover{ background:rgba(255,255,255,.2); }

/* 3) Layout */
.shell{ display:flex; min-height:calc(100vh - var(--header-h)); }
.content{ flex:1; width:100%; padding:var(--space-4); }

/* デスクトップ時：コンテンツは常に大項目ぶんだけ左余白をとる（サブパネルはオーバーラップ表示） */
@media (min-width:1024px){
  .content{ margin-left:5px; }
}
.container{ width:min(100% - 32px, var(--container)); margin-inline:auto; }

/* 4) RMS型グローバルナビ */
.op-gnav{
  position:sticky; top:var(--header-h); left:0;
  height:calc(100vh - var(--header-h));
  display:flex; z-index:20; background:var(--gnav-bg);
}

/* 左：大項目 */
.op-gnav-cats{
  width:var(--gnav-left); list-style:none; margin:0; padding:0;
  background:var(--gnav-bg); border-right:1px solid var(--gnav-line);
}
.op-gnav-cats li{ border-bottom:1px solid var(--gnav-line); }
.op-gnav-cats a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; color:#fff; text-decoration:none;
}
.op-gnav-cats a:hover,
.op-gnav-cats li.is-active>a{ background:var(--gnav-hover); }
.op-gnav-cats i{ width:18px; text-align:center; color:#cfd8dc; }
.op-gnav-cats span{ line-height:1.2; color:#fff; }

/* 右：小項目パネル（カテゴリごとに1つ） */
.op-gnav-subwrap{ position:relative; width:0; }
.op-gnav-sub{
  position:absolute; inset:0 auto 0 auto;
  transform:translateX(-5000px); ; /* 完全に左の外へ */
  width: var(--gnav-sub); height:100%;
  overflow:auto; list-style:none; margin:0; padding:8px 0;
  background: var(--gnav-sub-bg); border-right:1px solid #455a64;
  transition: left .22s ease;               /* ← transform ではなく left を遷移 */
}
.op-gnav-sub.is-open{ transform:translateX(0); }
.op-gnav-sub li{ border-bottom:1px solid #455a64; }
.op-gnav-sub a{
  display:flex; gap:10px; align-items:center;
  padding:10px 16px; color:#fff; text-decoration:none;
}
.op-gnav-sub a:hover{ background:#546e7a; }
.op-gnav-sub .num{
  display:inline-block; min-width:1.4em; height:1.4em; line-height:1.4em;
  text-align:center; border-radius:4px; background:#222; font-size:12px; color:#cfd8dc;
}

/* 背景オーバーレイ（右パネルが開いている時のみ表示 / クリックで閉じる） */
.op-gnav-backdrop{
  position:fixed; inset:var(--header-h) 0 0 0; background:rgba(0,0,0,.2);
  opacity:0; visibility:hidden; transition:.18s; z-index:10;
}
.op-gnav-backdrop.show{ opacity:1; visibility:visible; }

#sidebarToggle{
  display: none;
}

/* モバイル：大項目をオフキャンバスに */
@media (max-width:1023px){
  .op-gnav{
    position:fixed; top:var(--header-h); height:calc(100vh - var(--header-h));
    transform:translateX(-100%); transition:.22s;
  }
  .op-gnav.is-open{ transform:translateX(0); }
  .content{ margin-left:0; }
  #sidebarToggle{display: block;}
}

/* 5) 共通UI（最小） */
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-4); box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:8px; border:1px solid #d1d5db; background:#fff; color:#111;
  cursor:pointer; transition:.18s;
}
.btn:hover{ filter:brightness(.98); }
.btn--primary{ background:var(--primary); color:#fff; border-color:transparent; }
.btn--danger{ background:#dc2626; color:#fff; border-color:transparent; }
.btn--sm{ font-size:.85em; padding:6px 10px; }
label{ display:block; margin-bottom:6px; color:#374151; font-size:.95em; }
input[type="text"],input[type="password"],input[type="date"],select,textarea{
  width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px; font-size:.95em; background:#fff;
}

/* 6) 認証ページ用（ナビを完全に隠す） */
.auth-page .op-gnav{ display:none !important; }
.auth-page .content{ margin-left:0 !important; }
.auth-container{
  display:flex; justify-content:center; align-items:center;
  min-height:calc(100vh - var(--header-h)); padding:20px; background:var(--bg);
}
.auth-card{
  background:#fff; padding:30px; border-radius:var(--radius);
  max-width:400px; width:100%; box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.auth-card h2{ margin:0 0 20px; text-align:center; color:var(--primary); }
.auth-form p{ margin-bottom:15px; }
.auth-form input[type="text"], .auth-form input[type="password"]{
  padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px;
}
.auth-form button[type="submit"]{
  display:block; width:100%; padding:10px; border:none; border-radius:6px;
  background:var(--primary); color:#fff; font-weight:600; cursor:pointer; transition:background .2s;
}
.auth-form button[type="submit"]:hover{ background:#1e40af; }

/* 7) Utils */
.u-right{ margin-left:auto; }