/* =============================================
 * ファイルの役割：
 * システム全体の見た目を決める共通テーマ（ネオブルータリズム）。
 * 管理画面(admin/layout/header.php)・ログイン画面・アプリインストール画面から読み込む。
 *
 * 【ネオブルータリズムとは】
 * 2020年前後に広まった様式で、次の4点が特徴。
 *   1. すべての要素に 2〜3px の黒い実線ボーダーを引く
 *   2. 影はぼかさない。黒い塊を右下へずらして置く（box-shadow: 4px 4px 0 #000）
 *   3. 彩度の高い色を「グラデーションなしの平らな面」として置く
 *   4. ボタンを押すと、影の位置へ要素そのものが沈む
 *
 * 【この業務システムでの使い分け】
 * 参照元も「長文では読みづらさが増すので、彩度は構造と操作部分に留め、
 * 本文は素直に」としている。配車担当者が終日見る画面なので、
 *   ・色を効かせる … ボタン／見出し／カード／サイドバー／状態バッジ
 *   ・落ち着かせる … 一覧表の本文、台帳の入力欄、補足説明
 * という配分にしている。
 *
 * 【変更するときは】
 * 色や太さは下の :root の変数だけを直せば全画面に反映される。
 * 各画面のインラインCSSにも同じ値が書かれているが、
 * それらは「この変数と同じ値」を前提にしているので、
 * 大きく変える場合は各画面側も合わせて確認すること。
 * ============================================= */

:root {
    /* ---- 線と影（様式の中核。ここを変えると全体の印象が変わる） ---- */
    --nb-ink: #000000;                     /* 線・文字の黒 */
    --nb-border: 2px solid #000000;        /* 要素の縁取り */
    --nb-border-thin: 1px solid #000000;   /* 表の行区切りなど、細くしたい線 */
    --nb-border-thick: 3px solid #000000;  /* 見出しなど強調したい縁取り */
    --nb-shadow: 4px 4px 0 #000000;        /* 標準のハードシャドウ（ぼかし0） */
    --nb-shadow-sm: 2px 2px 0 #000000;     /* 小さい部品用 */
    --nb-radius: 8px;
    --nb-radius-sm: 6px;

    /* ---- 面の色 ---- */
    --nb-bg: #ffffff;        /* 画面の地。白より少し温かいクリーム */
    --nb-surface: #ffffff;   /* カード・入力欄など、地より前に出る面 */
    --nb-subtle: #f7f4e8;    /* 表のヘッダなど、わずかに沈めたい面 */

    /* ---- アクセント（イエロー基調） ----
       黒文字を前提にした彩度の高い平色。白文字は使わない。 */
    --nb-accent: #ffd200;        /* 主役。主ボタン・見出し・現在地 */
    --nb-accent-hover: #ffe14d;  /* 主役のホバー（明るくするだけ。グラデーションは使わない） */
    /* さらに淡いイエロー。サイドバーのように面積が広く、
       常時表示されている場所のホバーに使う（濃いと目が疲れるため） */
    --nb-accent-soft: #fff6c9;
    --nb-lime: #b8ff3c;          /* 進行中・成功 */
    --nb-cyan: #7de2ff;          /* 情報・移動中・フォーカス */
    --nb-pink: #ff5fa2;          /* 削除・危険 */
    --nb-orange: #ffa23c;        /* 休憩・注意 */
    --nb-purple: #c9a3ff;        /* 自宅出発 */

    /* ---- 文字色 ----
       元は薄いグレーを多用していたが、黒い枠が増えると相対的に沈んで読みにくい。
       補足文でもコントラストが取れる濃さにしている。 */
    --nb-text: #000000;
    --nb-muted: #444444;      /* 補足・単位など */
    --nb-muted-2: #555555;    /* さらに弱い補足 */
    --nb-danger: #c0006b;     /* エラー文字（ピンク面の上でも読める濃さ） */
    --nb-success: #17692b;
}

/* =============================================
 * 基本要素
 * ============================================= */

html, body {
    background: var(--nb-bg);
    color: var(--nb-text);
    /* 太字が綺麗に出る日本語フォントを優先。
       Webフォントは日本語だと数MBになるので読み込まない（表示速度を優先） */
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
                 "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 見出しは大きく・太く。様式の「ブロック的な見出し」にあたる部分 */
h1, h2, h3 {
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--nb-text);
}
h1 { font-size: 26px; margin: 0 0 12px; }
h2 { font-size: 19px; margin: 20px 0 10px; }
h3 { font-size: 16px; margin: 16px 0 8px; }

/* h1 の左に黄色の帯を置いて、ページの起点をはっきりさせる */
h1 {
    border-left: 10px solid var(--nb-accent);
    padding-left: 12px;
}

a {
    color: var(--nb-text);
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover { background: var(--nb-accent); }

/* =============================================
 * 入力欄
 * 黒枠は付けるが、面は白のまま。台帳の入力が主作業なので落ち着かせる。
 * ============================================= */

input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=email], input[type=search],
select, textarea {
    border: var(--nb-border);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-surface);
    color: var(--nb-text);
    font-family: inherit;
    padding: 6px 8px;
}
input::placeholder, textarea::placeholder { color: #767676; }

input[type=checkbox], input[type=radio] {
    /* 標準の見た目のままだと黒枠の中で浮くので、少し大きくして黒に寄せる */
    accent-color: var(--nb-ink);
    width: 16px; height: 16px;
    vertical-align: -2px;
}

/* 【重要】キーボード操作の現在位置。
   黒い枠がどの要素にも付くため、枠の変化だけでは «今どこにいるか» が分からない。
   枠と明確に違う色（シアン）の輪を外側に出す。 */
:focus-visible {
    outline: 3px solid var(--nb-cyan);
    outline-offset: 2px;
}

/* =============================================
 * ボタン
 * 「押すと影の位置へ沈む」のが様式の要。全画面のボタンに効かせる。
 * ============================================= */

/* 【注意】ここで指定できるのは button 要素だけ。
   見た目をボタンにした a 要素（一覧画面の「新規登録」など）には効かない。
   a でボタンを作るときは、その画面側で border / box-shadow / :active を
   自分で指定するか、下の .nb-primary を付けること。 */
button, input[type=submit], input[type=button] {
    font-family: inherit;
    font-weight: bold;
    color: var(--nb-text);
    background: var(--nb-surface);
    border: var(--nb-border);
    border-radius: var(--nb-radius-sm);
    box-shadow: var(--nb-shadow-sm);
    cursor: pointer;
    transition: transform .04s linear, box-shadow .04s linear, background .1s linear;
}
button:hover, input[type=submit]:hover, input[type=button]:hover {
    background: var(--nb-accent-hover);
}
/* 押下：影の分だけ右下へ移動し、影を消す＝影に沈み込んだ表現 */
button:active, input[type=submit]:active, input[type=button]:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}
button:disabled { opacity: .5; cursor: default; box-shadow: none; transform: none; }

/* 動きを減らす設定の利用者には移動をやめ、色の変化だけで押下を伝える */
@media (prefers-reduced-motion: reduce) {
    button, input[type=submit], input[type=button] { transition: none; }
    button:active, input[type=submit]:active, input[type=button]:active { transform: none; }
}

/* =============================================
 * 表
 * 行が多いので、外枠は太く・行区切りは細くして圧迫感を抑える。
 * ============================================= */

table { border-collapse: collapse; }
th {
    background: var(--nb-subtle);
    font-weight: 800;
    color: var(--nb-text);
}

/* =============================================
 * 共通部品（各画面から使えるクラス）
 * ============================================= */

/* 黒枠＋ハードシャドウの箱。カードや囲みに使う */
.nb-card {
    background: var(--nb-surface);
    border: var(--nb-border);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow);
}

/* 主ボタン（黄色）。白文字は使わず、必ず黒文字にする */
.nb-primary {
    background: var(--nb-accent);
    color: var(--nb-text);
    border: var(--nb-border);
    box-shadow: var(--nb-shadow-sm);
}
.nb-primary:hover { background: var(--nb-accent-hover); }

/* 危険操作（削除など） */
.nb-danger { background: var(--nb-pink); color: var(--nb-text); border: var(--nb-border); }
.nb-danger:hover { background: #ff85b8; }

/* 状態を表す小さな札。色だけに頼らず文字も併記して使うこと */
.nb-badge {
    display: inline-block;
    border: var(--nb-border-thin);
    border-radius: var(--nb-radius-sm);
    padding: 1px 7px;
    font-size: 11px;
    font-weight: bold;
    background: var(--nb-surface);
    color: var(--nb-text);
}

/* =============================================
 * 印刷
 * 黒ベタの影は印刷するとインクを食うだけなので落とす。
 * ============================================= */
@media print {
    html, body { background: #fff; }
    * { box-shadow: none !important; }
    .no-print { display: none !important; }
}