/* ===== Pages — 博多区役所資料デザイン準拠（Vercel風 + アンバーアクセント） ===== */

:root {
  --p-bg: #000;
  --p-bg-2: #0a0a0a;
  --p-bg-3: #111;
  --p-border: #1f1f1f;
  --p-border-2: #2a2a2a;
  --p-text: #ededed;
  --p-text-2: #a1a1a1;
  --p-text-3: #6b6b6b;
  --p-accent: #f5a623;
  --p-accent-soft: rgba(245,166,35,.12);
}

body {
  font-family: "Geist", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif !important;
  background: #000 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ダークテーマ変数を資料のトークンに合わせる */
.dark {
  --background: #000;
  --surfacePrimary: #0a0a0a;
  --surfaceSecondary: #111;
  --divider: #1f1f1f;
  --icon: #a1a1a1;
  --textPrimary: #ededed;
  --textSecondary: #a1a1a1;
}

/* ヘッダー */
header {
  background: #000 !important;
  border-bottom: 1px solid var(--p-border);
  box-shadow: none !important;
}
header .logo, header img {
  background: transparent !important;
  border-radius: 0 !important;
}

/* 検索バー */
#search {
  background: var(--p-bg-2) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
#search > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#search input {
  background: transparent !important;
  border: none !important;
  color: var(--p-text) !important;
}
#search:hover { border-color: var(--p-border-2) !important; }

/* サイドバー */
.dark .sidebar {
  background: #000 !important;
  border-right: 1px solid var(--p-border);
}

/* セクション見出し（ファイル/フォルダー）を資料のeyebrow風に */
.dark #listing h2,
main h2 {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--p-accent) !important;
}

/* ファイルカード：資料のpanel準拠 */
.dark #listing .item {
  background: var(--p-bg-2) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 12px;
  transition: border-color .15s ease, background .15s ease;
}
.dark #listing .item:hover {
  border-color: var(--p-border-2) !important;
  background: var(--p-bg-3) !important;
}

/* パンくずバー */
.dark .breadcrumbs {
  border-bottom: 1px solid var(--p-border) !important;
  background: #000 !important;
}

/* ボタン：白プライマリ */
.button--flat,
.dark .button--flat,
input[type="submit"] {
  background: var(--p-text) !important;
  color: #000 !important;
  border-radius: 8px !important;
  font-weight: 500;
  border: none !important;
  transition: background .15s ease;
}
.button--flat:hover,
input[type="submit"]:hover { background: #ccc !important; }

/* 入力フォーム */
.dark input, .dark .input {
  background: var(--p-bg-2) !important;
  border: 1px solid var(--p-border-2) !important;
  border-radius: 8px;
  color: var(--p-text) !important;
}
.dark input:focus, .dark .input:focus { border-color: var(--p-accent) !important; }

/* ダイアログ・モーダル */
.dark .card {
  background: var(--p-bg-2) !important;
  border: 1px solid var(--p-border);
  border-radius: 12px;
}

/* D&Dハイライト：アンバー */
.dark #listing.dragging {
  background: var(--p-accent-soft) !important;
  outline: 2px dashed var(--p-accent);
  outline-offset: -8px;
  border-radius: 12px;
}

/* ===== ログイン画面 ===== */
/* 資料のヒーローと同じ上部アンバーグロー */
#login {
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(245,166,35,.10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(0,112,243,.05), transparent 70%),
    #000 !important;
}
#login img { display: none !important; }
#login h1 {
  /* 資料のgrad-text */
  background: linear-gradient(180deg, #fff 0%, #888 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 700;
  letter-spacing: -.045em;
  margin-top: 0;
}
#login form {
  background: var(--p-bg-2);
  border: 1px solid var(--p-border);
  border-radius: 12px;
  padding: 2em;
}
#login input[type="text"],
#login input[type="password"] {
  background: #000 !important;
  color: var(--p-text) !important;
  border: 1px solid var(--p-border-2) !important;
  border-radius: 8px;
}
#login input[type="text"]:focus,
#login input[type="password"]:focus { border-color: var(--p-accent) !important; }
#login button,
#login input[type="submit"],
#login .button {
  background: var(--p-text) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
#login button:hover,
#login input[type="submit"]:hover,
#login .button:hover { background: #ccc !important; }

/* フォルダアイコンをアクセントのアンバーに */
.dark #listing .item[data-dir="true"] i.material-icons {
  color: var(--p-accent) !important;
}