/* 管理画面。app.css のトークンの上に、飾りを外して情報を詰める（docs/design.md 4）
   角丸・影・グラデーションは使わない。区切りは 2px の黒線。数字は Anton */

/* ── 見張りの警告（オレンジの帯。画面の上に貼りつく） ── */
.admin-alerts{position:sticky;top:0;z-index:60;background:var(--orange);color:var(--black);border-bottom:var(--rule);padding:10px 20px;font-weight:700;font-size:13px}
.admin-alerts p{max-width:1100px;margin:0 auto}
.admin-alerts p + p{margin-top:4px;padding-top:4px;border-top:1px dotted var(--black)}

/* ── ヘッダーとナビ ── */
.admin-header{background:var(--white);border-bottom:var(--rule)}
.admin-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;gap:16px}
.admin-brand{font-family:var(--display);font-size:22px;letter-spacing:.06em;text-decoration:none;margin-right:auto}
.admin-user{font-size:12px;font-weight:700;text-align:right;line-height:1.4}
.admin-email{display:block;font-weight:400;color:#444;word-break:break-all}
.admin-logout{margin:0}
.btn-link{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;color:var(--black)}
.btn-link:hover{color:#666}
.admin-nav{background:var(--black);overflow-x:auto}
.admin-nav .wrap{display:flex;gap:0;padding:0 20px}
.admin-nav a{color:var(--white);text-decoration:none;font-size:13px;font-weight:700;padding:10px 14px;white-space:nowrap;border-right:1px solid #333}
.admin-nav a:first-child{border-left:1px solid #333}
.admin-nav a:hover{background:#333}
.admin-nav a.is-current{background:var(--yellow);color:var(--black)}

/* ── 本文 ── */
.admin{padding-top:24px;padding-bottom:64px}
.admin h1{font-weight:900;font-size:24px;margin-bottom:16px;line-height:1.3}
.admin h2{font-weight:900;font-size:16px;margin:20px 0 10px;padding-bottom:6px;border-bottom:var(--rule)}
.admin h2:first-child{margin-top:0}
.admin p{font-size:14px}
.admin a{text-underline-offset:3px}
.admin .num{font-family:var(--display);letter-spacing:.02em}
.admin .id{font-size:16px}
.admin .note{font-size:12px;line-height:1.6;color:#444;margin-top:4px}
.admin .is-bad{color:var(--orange);font-weight:700}
.admin .nowrap{white-space:nowrap}
.admin .url{font-size:12px;word-break:break-all}
.admin .tag{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--black);font-size:11px;font-weight:700}

.admin dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin-top:16px;border:var(--rule);background:var(--white);padding:16px 18px}
.admin dl.mini{border:0;padding:0;margin-top:10px;font-size:13px;gap:2px 12px}
.admin dt{font-weight:700}

/* ── 合図（flash）と札（chip） ── */
.flash{border:var(--rule);padding:10px 14px;margin-bottom:16px;font-weight:700;font-size:14px}
.flash.is-ok{background:var(--green)}
.flash.is-error{background:var(--orange)}
.chip{display:inline-block;padding:2px 8px;border:var(--rule);font-size:12px;font-weight:700;white-space:nowrap}
.chip.is-green{background:var(--green)}
.chip.is-yellow{background:var(--yellow)}
.chip.is-pink{background:var(--pink)}
.chip.is-orange{background:var(--orange)}
.chip.is-gray{background:#ddd}
.chip.is-black{background:var(--black);color:var(--white)}

/* ── 箱 ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:24px}
.card{border:var(--rule);background:var(--white);padding:16px 18px}
.card h2{margin:0 0 8px;font-size:14px;border-bottom:1px dotted var(--black);padding-bottom:4px}
.card .big{font-family:var(--display);font-size:32px;line-height:1.2;margin:4px 0}
.card .big .chip{font-family:var(--sans);font-size:14px;vertical-align:middle}
.panel{border:var(--rule);background:var(--white);padding:18px 20px;margin-bottom:24px}

/* ── 表 ── */
.grid{width:100%;border-collapse:collapse;background:var(--white);border:var(--rule);font-size:13px;margin-bottom:20px}
.grid th,.grid td{border:1px solid var(--black);padding:8px 10px;text-align:left;vertical-align:top}
.grid thead th{background:var(--black);color:var(--white);font-size:12px;white-space:nowrap}
.grid tbody tr:nth-child(even){background:#faf9f5}
.grid tr.is-test{background:repeating-linear-gradient(45deg,#fff 0 8px,#f2efe6 8px 16px)}
.grid td form{margin:0}
.grid .json{font-size:11px;word-break:break-all;margin-top:4px}
.grid details summary{cursor:pointer;font-size:12px}

/* ── フォーム ── */
.field{margin-bottom:14px}
.field > label{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field input[type=datetime-local],.field input[type=file],.field select,.field textarea{
  width:100%;max-width:560px;font-family:inherit;font-size:16px;padding:10px 12px;border:var(--rule);background:var(--white);border-radius:0}
.field textarea{line-height:1.6;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--yellow);outline-offset:0}
.field input[readonly]{background:#eee;color:#555}
.field.check > label{display:flex;align-items:center;gap:10px;font-weight:700}
.field.check input[type=checkbox]{width:24px;height:24px;margin:0;accent-color:var(--black)}
.req{display:inline-block;margin-left:6px;padding:1px 6px;background:var(--black);color:var(--white);font-size:11px;font-weight:700}

.btn{display:inline-block;background:var(--white);color:var(--black);border:var(--rule);padding:10px 18px;font-weight:900;font-size:14px;text-decoration:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--black);color:var(--white)}
.btn.dark{background:var(--black);color:var(--white)}
.btn.dark:hover{background:var(--white);color:var(--black)}
.btn.small{padding:5px 10px;font-size:12px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{background:var(--white);color:var(--black)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}

.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;border:var(--rule);background:var(--white);padding:14px 16px;margin-bottom:16px}
.filters .field{margin:0}
.filters .field input{width:180px;font-size:14px;padding:8px 10px}

.csv-list{list-style:none;display:grid;gap:14px}
.csv-list li{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ── 写真 ── */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:12px 0 20px}
.photo{border:var(--rule);background:var(--white);padding:8px}
.photo img{width:100%;height:auto;border-bottom:1px dotted var(--black);margin-bottom:6px}
.photo figcaption{font-size:11px;margin-bottom:6px}
.upload{border-top:var(--rule);padding-top:16px}

/* ── QR ── */
.qr-cell{width:170px}
.qr{width:120px;height:120px;background:var(--white);border:1px solid var(--black);margin-bottom:6px}
.qr svg{width:100%;height:100%;display:block}
.qr-cell a{display:inline-block;font-size:12px;margin-right:8px}
.qr-print{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.qr-card{border:var(--rule);background:var(--white);padding:12px;text-align:center;break-inside:avoid}
.qr-card .qr{width:150px;height:150px;margin:0 auto 8px;border:0}
.qr-num{font-family:var(--display);font-size:44px;line-height:1;margin-bottom:6px}
.qr-title{font-size:12px;font-weight:700}
.qr-url{font-size:10px;word-break:break-all;color:#444}

@media print{
  .admin-header,.admin-nav,.admin-alerts,.no-print,.env-band{display:none}
  .admin h1{display:none}
  body{background:var(--white)}
  .qr-print{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:640px){
  .admin h1{font-size:20px}
  .grid{display:block;overflow-x:auto;white-space:nowrap}
  .field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field input[type=datetime-local],.field select,.field textarea{max-width:none}
  .btn{width:100%;text-align:center}
  .actions .btn,.filters .btn{width:auto}
}

/* ── ログイン（ナビの無い 1 枚画面） ── */
.login{max-width:420px;padding-top:56px;padding-bottom:64px}
.login h1{font-family:var(--display);font-size:28px;letter-spacing:.06em;margin-bottom:20px;text-align:center}
.login .panel{margin-bottom:12px}
.login .field{margin-bottom:16px}
.login .actions{display:block;margin-top:20px;margin-bottom:0}
.login .actions .btn{width:100%;text-align:center}
.login .note{text-align:center}