* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  background: #f5f5f5;
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: #1a3a5c;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

header h1 { font-size: 1.4rem; }

header nav a {
  color: #cce0ff;
  text-decoration: none;
  margin-right: 1.5rem;
  font-size: 0.95rem;
}
header nav a:hover { color: white; }

main { flex: 1; padding: 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }

footer {
  background: #1a3a5c;
  color: #aaa;
  text-align: center;
  padding: 0.8rem;
  font-size: 0.85rem;
}

h2 { margin-bottom: 1.2rem; color: #1a3a5c; }

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  column-gap: 1rem;
  row-gap: 1.56rem;
  user-select: none;
}

.card-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.card-item img[data-portrait="1"] {
  width: 130px;
  height: 100cqw;
  margin-left: calc((100cqw - 130px) / 2);
  margin-top:  calc((130px - 100cqw) / 2);
  margin-bottom: calc((130px - 100cqw) / 2);
  transform: rotate(90deg);
  object-fit: cover;
  object-position: left top;
  border-bottom: none;
  border-right: 1.5px solid #4a90d9;
  box-shadow: 5px 0 18px rgba(74, 144, 217, 0.7);
}

.card-item img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  object-position: left center;
  border-bottom: 1.5px solid #4a90d9;
  box-shadow: 0 5px 18px rgba(74, 144, 217, 0.7);
  box-sizing: border-box;
}
.card-info { padding: 0.4rem 0.6rem 0.3rem; flex: 1; }
.card-name-row { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.card-name    { font-weight: bold; font-size: 0.92rem; padding: 0.1rem 0.2rem; border-radius: 3px; flex: 1; min-width: 0; }
.card-company-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.15rem; }
.card-company { font-size: 0.80rem; color: #666; }
.card-email   { font-size: 0.75rem; color: #888; margin-top: 0.1rem; }

.card-link {
  display: block;
  text-align: center;
  padding: 0.3rem;
  background: #1a3a5c;
  color: white;
  text-decoration: none;
  font-size: 0.82rem;
}
.card-link:hover { background: #265a8c; }

/* Forms */
.search-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.search-form input {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.upload-form .form-group {
  margin-bottom: 1rem;
}
.upload-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}
.upload-form input,
.upload-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}
.upload-form textarea { resize: vertical; }

/* Detail */
.detail-layout {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.detail-image {
  flex: 0 0 auto;
  max-width: 65%;
}
.detail-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border: 1.5px solid #4a90d9;
  border-radius: 4px;
  box-shadow: 0 5px 18px rgba(74, 144, 217, 0.7);
  border: 1px solid #ddd;
  border-radius: 4px;
}
.detail-info { flex: 1; min-width: 280px; margin-top: -2.1rem; }

.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  padding: 0.36rem 0.59rem;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
  text-align: left;
}
.info-table th { width: 110px; color: #555; background: #f9f9f9; }
.info-table input[type=text] { width: 100%; padding: 0.27rem 0.45rem; border: 1px solid #ccc; border-radius: 3px; font-size: 0.9rem; }

.memo-box { margin-top: 1rem; background: #fff8e1; padding: 1rem; border-radius: 4px; }

.detail-actions { margin-top: 1.5rem; display: flex; gap: 0.8rem; }

/* Buttons */
.btn-primary, button[type=submit] {
  padding: 0.6rem 1.4rem;
  background: #1a3a5c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn-primary:hover, button[type=submit]:hover { background: #265a8c; }

.btn-secondary {
  padding: 0.6rem 1.2rem;
  background: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
}
.btn-secondary:hover { background: #c5c5c5; }

.btn-danger {
  padding: 0.6rem 1.2rem;
  background: #c0392b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-danger:hover { background: #a93226; }

/* 一括選択ツールバー */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.6rem 1rem;
  background: #f0f4ff;
  border-radius: 6px;
}
.check-all-label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-weight: bold; }
.selected-count  { font-size: 0.88rem; color: #555; flex: 1; }
.filter-checks   { display: flex; align-items: center; gap: 1rem; margin-left: auto; font-size: 0.88rem; }
.filter-checks label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; white-space: nowrap; }

/* カードのチェック状態 */
.card-item.selectable { cursor: pointer; position: relative; outline: 2px solid #1a3a5c; }
.card-item.selected   { outline: 3px solid #f5c400; background: #fff59a; box-shadow: 0 0 10px rgba(245, 196, 0, 0.35); }
.card-check { cursor: pointer; line-height: 1; }
.card-check input { cursor: pointer; width: 15px; height: 15px; vertical-align: middle; }

.badge-public, .badge-shared, .badge-private {
  flex-shrink: 0;
  font-size: 0.70rem;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.6;
  white-space: nowrap;
}
.badge-public  { background: #e00;    color: white; }
.badge-shared  { background: #2471a3; color: white; }
.badge-private { background: #888;    color: white; }

.card-item.card-shared { outline: 2px solid #2471a3; }

.btn-public  { background: #e00; color: white; }
.btn-public:hover  { background: #c00; }
.btn-private { background: #7f8c8d; color: white; }
.btn-private:hover { background: #626567; }

.card-serial {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 1;
  background: rgba(26,58,92,0.75);
  color: white;
  font-size: 0.72rem;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.6;
}

/* Messages */
.error       { color: #c0392b; background: #fdecea; padding: 0.7rem; border-radius: 4px; margin-bottom: 1rem; }
.success-msg { color: #1a6b3c; background: #eafaf1; padding: 0.7rem; border-radius: 4px; margin-bottom: 1rem; }
.success { color: #1a6b3c; background: #e8f5e9; padding: 0.7rem; border-radius: 4px; margin-bottom: 1rem; }

#recognize-btn { display: block; margin-top: 0.8rem; width: 100%; }

.img-label { font-size: 0.8rem; color: #666; margin-bottom: 0.2rem; font-weight: bold; }

.rotate-toolbar { display:flex; align-items:center; gap:0.5rem; margin-top:0.6rem; flex-wrap:wrap; }
.detail-image img { transition: transform 0.3s; }

.bulk-help { background: #e8f0fe; padding: 1rem 1.2rem; border-radius: 6px; margin-bottom: 1.5rem; font-size: 0.9rem; }
.bulk-help ol { margin: 0.4rem 0 0 1.2rem; }
.bulk-help li { margin-bottom: 0.3rem; }

select { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; min-width: 260px; }
#recognize-result pre { margin-top: 0.8rem; background: #eee; padding: 0.8rem; border-radius: 4px; font-size: 0.82rem; overflow-x: auto; }

/* ─── Auth: ヘッダー右端 ─── */
.header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.88rem;
}
.header-username { color: #cce0ff; font-weight: bold; text-decoration: none; }
.header-username:hover { color: white; text-decoration: underline; }
.badge-admin { background: #e74c3c; color: white; padding: 1px 7px; border-radius: 10px; font-size: 0.75rem; }
.badge-user  { background: #3498db; color: white; padding: 1px 7px; border-radius: 10px; font-size: 0.75rem; }
.btn-logout {
  color: #cce0ff;
  text-decoration: none;
  border: 1px solid #4a7ab5;
  padding: 0.2rem 0.7rem;
  border-radius: 4px;
  font-size: 0.82rem;
}
.btn-logout:hover { background: #265a8c; color: white; }

.btn-help {
  background: none;
  border: 1px solid #4a7ab5;
  color: #cce0ff;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.btn-help:hover { background: #265a8c; color: white; }

.help-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.help-modal-box {
  background: white;
  border-radius: 8px;
  padding: 2rem 2.5rem;
  min-width: 320px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.help-modal-box h2 { margin: 0 0 1rem; font-size: 1.1rem; color: #1a3a5c; }
.help-version { font-size: 0.95rem; color: #555; margin: 0 0 0.5rem; }
.help-copyright { font-size: 0.82rem; color: #888; margin: 0 0 1.5rem; }
.help-actions { margin-top: 1rem; }

/* ─── Auth: ログイン画面 ─── */
.login-body { display: flex; flex-direction: column; min-height: 100vh; background: #f0f4fa; }
.login-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-box {
  background: #fff9c4;
  padding: 2.5rem 3rem;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 420px;
}
.login-title { font-size: 1.3rem; color: #1a3a5c; margin-bottom: 1.5rem; text-align: center; }
.login-setup-note { background: #fff3cd; color: #856404; padding: 0.6rem 0.9rem; border-radius: 4px; font-size: 0.88rem; margin-bottom: 1rem; }
.login-form .form-group { margin-bottom: 1rem; }
.login-form label { display: block; font-weight: bold; margin-bottom: 0.3rem; font-size: 0.9rem; }
.login-form input { width: 100%; padding: 0.55rem 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
.btn-login { width: 100%; margin-top: 0.5rem; padding: 0.7rem; background: #1a3a5c; color: white; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; }
.btn-login:hover { background: #265a8c; }

/* ─── ユーザ管理画面 ─── */
.section-subtitle { font-size: 1rem; color: #1a3a5c; margin-bottom: 0.8rem; border-left: 3px solid #1a3a5c; padding-left: 0.6rem; }
.user-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); table-layout: fixed; }
.user-table th { background: #1a3a5c; color: white; padding: 0.55rem 0.8rem; text-align: left; }
.user-table th:nth-child(1) { width: 5%; }
.user-table th:nth-child(2) { width: 10%; }
.user-table th:nth-child(3) { width: 15%; }
.user-table th:nth-child(4) { width: 10%; }
.user-table th:nth-child(5) { width: 10%; }
.user-table th:nth-child(6) { width: 5%; }
.user-table th:nth-child(7) { width: 15%; }
.user-table th:nth-child(8) { width: 10%; }
.user-table td { padding: 0.5rem 0.8rem; border-bottom: 1px solid #eee; vertical-align: middle; }
.user-table td:nth-child(2),
.user-table td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-table td:nth-child(4),
.user-table td:nth-child(5) { padding: 0.3rem 0.2rem; overflow: hidden; }
.user-table td:nth-child(4) .select-sm,
.user-table td:nth-child(5) .select-sm { width: 90px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.user-table tr:last-child td { border-bottom: none; }
.user-table tr.user-me td { background: #f0f4ff; }
.badge-me { background: #f39c12; color: white; font-size: 0.72rem; padding: 1px 5px; border-radius: 8px; margin-left: 4px; }
.text-muted { color: #aaa; font-size: 0.85rem; }
.input-sm { padding: 0.3rem 0.5rem; border: 1px solid #ccc; border-radius: 3px; font-size: 0.85rem; width: 140px; }
.select-sm { padding: 0.3rem 0.2rem; border: 1px solid #ccc; border-radius: 3px; font-size: 0.78rem; width: 100%; box-sizing: border-box; }
.btn-sm { padding: 0.3rem 0.65rem; border: none; border-radius: 3px; cursor: pointer; font-size: 0.82rem; }
.btn-sm.btn-secondary { background: #e0e0e0; color: #333; }
.btn-sm.btn-secondary:hover { background: #c5c5c5; }
.btn-sm.btn-danger { background: #222; color: white; }
.btn-sm.btn-danger:hover { background: #000; }
.btn-sm.btn-export { background: #1a9ed4; color: white; }
.btn-sm.btn-export:hover { background: #1480b0; }
.user-add-form .form-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.user-add-form .form-group { display: flex; flex-direction: column; gap: 0.3rem; }
.user-add-form .form-group label { font-weight: bold; font-size: 0.9rem; }
.user-add-form .form-group input,
.user-add-form .form-group select { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; }
.user-add-form .form-group select { width: 200px; min-width: 0; }
.user-add-form .form-group-btn { justify-content: flex-end; }

/* ─── 強制2FA セットアップ画面 ─── */
.totp-force-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f0f4fa;
}
.totp-force-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.totp-force-box {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
  padding: 2.5rem 2.5rem;
  width: 100%;
  max-width: 480px;
}
.totp-force-box h1 {
  font-size: 1.2rem;
  color: #1a3a5c;
  margin-bottom: 0.3rem;
  text-align: center;
}
.totp-force-box h2 {
  font-size: 1rem;
  color: #1a3a5c;
  margin-bottom: 0.6rem;
  text-align: center;
}
.totp-force-box .totp-qr-center {
  display: flex;
  justify-content: center;
  margin: 0.8rem 0;
}

/* ─── システム設定 ─── */
.badge-totp-on  { color: #1a6b3c; font-weight: bold; font-size: 1rem; }
.badge-totp-off { color: #bbb; font-size: 1rem; }
.settings-checkbox-label { display:flex; align-items:center; gap:0.5rem; font-size:0.95rem; cursor:pointer; }
.settings-checkbox-label input[type="checkbox"] { width:1.1rem; height:1.1rem; cursor:pointer; }

/* ─── 2段階認証 ─── */
.totp-status { font-weight: bold; margin-bottom: 0.8rem; padding: 0.5rem 0.8rem; border-radius: 4px; display: inline-block; }
.totp-status-on  { background: #e8f5e9; color: #1a6b3c; }
.totp-status-off { background: #f5f5f5; color: #666; }
.totp-qr-box { margin-bottom: 1rem; }
.totp-qr-box img, .totp-qr-box canvas { border: 4px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 4px; }
.totp-secret-box { background: #f0f4fa; border: 1px solid #c8d8f0; border-radius: 6px; padding: 0.6rem 0.9rem; display: inline-block; margin-bottom: 0.5rem; }
.totp-verify-desc { color: #555; font-size: 0.92rem; margin-bottom: 1.2rem; }

/* ─── プロフィール設定 ─── */
.profile-form { max-width: 480px; }
.profile-form .form-group { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.profile-form label { font-weight: bold; font-size: 0.9rem; }
.profile-form input[type="text"],
.profile-form input[type="password"],
.profile-form select { padding: 0.55rem 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; width: 100%; }
.form-note { color: #666; font-size: 0.82rem; }
.profile-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }