/* 提案書モックの配色（app/ui_style.py と同トークン）。本番C#UIでも配色トークン・名称表記を踏襲。 */
:root {
  --brand:#1565A8; --header:#173A5E; --title:#0E467A; --ok:#1A7F37; --warn:#9A6700;
  --bg:#FFFFFF; --text:#142A3D; --panel:#F4F8FB; --line:#CBD8E4;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
a { color: var(--brand); text-decoration: none; }

.osg-shell { max-width: 960px; margin: 0 auto; padding: 14px 16px 48px; }

/* 上部バー */
.osg-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.osg-brand { color: var(--header); font-weight: 800; font-size: 18px; }
.osg-nav { display: flex; align-items: center; gap: 14px; }
.osg-nav a { font-weight: 700; }
.osg-who { color: #6b7f90; font-size: 14px; }
.osg-inline { display: inline; margin: 0; }
.osg-btn-link { background: none; border: none; color: var(--brand); font-weight: 700; cursor: pointer; padding: 0; font-size: 14px; }

/* 紺のヘッダバー（モック .hd） */
h1.osg-hd {
  background: var(--header); color: #fff; font-weight: 800; font-size: 24px;
  padding: 18px 22px; border-radius: 14px; margin: 0 0 16px;
  display: flex; align-items: center; gap: 8px;
}
h1.osg-hd .dot { color: #6FA8DC; font-size: 18px; }
.osg-sub { color: var(--title); font-weight: 700; font-size: 16px; margin: 0 2px 16px; }
.osg-h2 { color: var(--title); font-size: 18px; margin: 22px 0 10px; }

/* アラート */
.osg-alert { border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; background: var(--panel); }
.osg-alert.ok { background: #E7F4EB; color: var(--ok); }
.osg-alert.warn { background: #FBE9D0; color: var(--warn); }
.osg-alert.error { background: #FBE3E3; color: #B3261E; }
.osg-alert.danger { background: #FBE0E0; color: #C0362C; font-weight: 800; }  /* 未確認N件など＝赤字 */

/* フォーム */
.osg-form { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.osg-form label { font-weight: 700; margin-top: 8px; }
.osg-form input, .osg-form select {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 15px;
}

/* ボタン */
.osg-btn { border-radius: 12px; font-weight: 800; padding: 11px 18px; cursor: pointer; border: 1px solid var(--brand); background: #fff; color: var(--brand); margin-top: 12px; }
.osg-btn.primary { background: var(--brand); color: #fff; }
.osg-btn.primary:hover { background: var(--title); border-color: var(--title); }
.osg-btn.ghost { padding: 6px 12px; margin: 0; font-weight: 700; }

/* バッジ（要確認＝赤／OK・済＝緑で目立たせる） */
.osg-badge { display: inline-block; font-size: 14px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.osg-badge.ok { background: #DCF0E3; color: #157A37; }
.osg-badge.warn { background: #FBE0E0; color: #C0362C; }
.osg-badge.done { background: #DCF0E3; color: #157A37; }

/* カード（ホーム導線） */
.osg-cards { display: flex; flex-direction: column; gap: 12px; }
.osg-card-link {
  display: flex; align-items: center; gap: 14px; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; background: #FAFCFE;
}
.osg-card-link:hover { border-color: var(--brand); background: #EFF6FD; }
.osg-ic {
  flex: 0 0 44px; height: 44px; border-radius: 10px; background: #E8F0F8; color: var(--brand);
  font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.osg-card-title { font-weight: 800; font-size: 17px; color: #142A3D; }
.osg-card-sub { color: #6b7f90; font-size: 14px; }

/* 写真セクションのカード（現場画面） */
.osg-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 14px 0; background: #FAFCFE; }
.osg-cardhead { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; color: #142A3D; margin: 0 0 10px; }
.osg-cardsub { color: #8aa0b3; font-size: 14px; font-weight: 600; }
.osg-photo { max-width: 100%; border-radius: 10px; border: 1px solid #E7EEF4; margin: 4px 0 10px; display: block; }
.osg-retake { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.osg-retake input[type=file] { max-width: 100%; }
.osg-note { color: #6b7f90; font-size: 13px; margin: 12px 0; }

/* カメラ撮影（getUserMedia） */
.osg-cam-btn { margin-top: 8px; }
.osg-cam { margin-top: 10px; }
.osg-cam video { width: 100%; max-width: 480px; border-radius: 12px; background: #000; display: block; }
.osg-cam-ctrl { display: flex; gap: 8px; margin-top: 8px; }
.osg-cam-ctrl .osg-btn { margin-top: 0; }
.osg-cam-thumbs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.osg-thumb-count { flex-basis: 100%; font-size: 13px; font-weight: 700; color: #6b7f90; }
.osg-thumb-wrap { position: relative; }
.osg-cam-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid #E7EEF4; display: block; }
/* 撮り直し（結果画面）は選んだ1枚を大きくプレビュー＝原本と同じ幅で確認できる。
   既定の flex だと wrap が中身幅に縮み width:100% が効かないので block に上書きする。 */
.osg-cam-thumbs.osg-preview { display: block; }
.osg-cam-thumbs.osg-preview .osg-thumb-wrap { display: block; max-width: 480px; }
.osg-cam-thumbs.osg-preview .osg-cam-thumb { width: 100%; height: auto; }
.osg-thumb-del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: #d1242f; color: #fff; font-size: 15px; line-height: 22px; cursor: pointer; }

/* 合いマークの写真ごとサブカード（結果画面） */
.osg-subcard { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 10px 0; background: #fff; }
.osg-subhead { font-weight: 700; color: #142A3D; margin: 0 0 8px; }

/* 管理画面：検索・詳細 */
.osg-search { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.osg-search input { border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; min-width: 240px; flex: 1; }
.osg-search .osg-btn { margin-top: 0; }
.osg-detail-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.osg-detail-imgs { flex: 2; min-width: 260px; }
.osg-detail-imgs .osg-photo { max-width: 420px; }
.osg-detail-cmt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.osg-detail-cmt textarea { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; }
.osg-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-weight: 700; }
.osg-details { margin: 12px 0; }
.osg-details summary { color: var(--title); font-weight: 700; cursor: pointer; }

/* テーブル（縞は青系） */
.osg-table { width: 100%; border-collapse: collapse; }
.osg-table th { background: #D7E7F5; color: var(--title); font-weight: 800; text-align: left; padding: 9px 10px; }
.osg-table td { border-bottom: 1px solid #E1EAF3; padding: 9px 10px; }
.osg-table tbody tr:nth-child(odd) { background: #FFFFFF; }
.osg-table tbody tr:nth-child(even) { background: #EAF2FB; }   /* 青系の縞 */
.osg-table tbody tr:hover { background: #DCEBFA; }