/* v3.2 UI Polish (CSS only) - Dashboard(index.html) tone alignment */

/* Font (dashboard uses Noto Sans JP). In local/offline env this falls back to system fonts. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700;800&display=swap');

:root{
  /* keep palette in app.css; no overrides here */
}

/* Typography: match dashboard */
body{
  font-family:"Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* Headings rhythm */
.page-title{ font-size:18px; font-weight:800; }
.section-title{ font-size:14px; font-weight:800; color:var(--muted); letter-spacing:.02em; }

/* --- Deadline state (期限状態) : color is primary, text is secondary --- */
.row-danger td{
  background: var(--danger-bg) !important;
}
.row-warn td{
  background: var(--warn-bg) !important;
}


/* v3.3 Step5(A): referrals table rows should visually match dashboard alert rows */
.table-alertlike tbody tr.row-danger{ background: var(--danger-bg) !important; }
.table-alertlike tbody tr.row-warn{ background: var(--warn-bg) !important; }
.table-alertlike tbody tr.row-danger td,
.table-alertlike tbody tr.row-warn td{ background: transparent !important; }

/* left edge accent like dashboard (single source of truth)
   - Do NOT mix border-left + inset shadow, as it creates 1px steps across rows.
   - Use a single pseudo-element on the first cell so height always matches the row.
*/
.table-alertlike tbody tr{ border-left:none !important; }
.table-alertlike tbody tr td:first-child{ box-shadow:none !important; }
.table-alertlike tbody td:first-child{ position:relative; }
.table-alertlike tbody td:first-child::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background:transparent;
  pointer-events:none;
}
.table-alertlike tbody tr.row-danger td:first-child::before{ background:var(--danger); }
.table-alertlike tbody tr.row-warn td:first-child::before{ background:var(--warn); }
/* archived/muted rows must visually override deadline accents */
.table-alertlike tbody tr.row-muted td:first-child::before{ background:rgba(107,114,128,0.55) !important; }

/* row height rhythm (align closer to dashboard lists) */
.table-alertlike tbody td{ padding-top:12px; padding-bottom:12px; }
/* badges / pills (align to dashboard "alert-badge") */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--border);
  background:#f5f7fb;
  margin-right:6px;
  line-height:1;
}
.badge.danger{ background:var(--danger-bg) !important; color:var(--danger); border-color:#ffd3cc !important; }
.badge.warn{ background:var(--warn-bg) !important; color:var(--warn) !important; border-color:var(--warn) !important; }
.badge.ok{ background:var(--ok-bg) !important; color:var(--ok); border-color:#bfeccd !important; }

.status-badge.danger{
  background: rgba(229,83,61,.12);
  border-color: rgba(229,83,61,.24);
  color: #b42318;
}
.status-badge.ok{
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.20);
  color: #166534;
}

/* status-badge also gets dashboard weight */
.status-badge{ font-weight:800; border-radius:999px; padding:6px 10px; line-height:1; }

/* alert cards */
.alert-row.danger{
  background: var(--danger-bg);
  border-color: rgba(229,83,61,.22);
}
.alert-row.warn{
  background: var(--warn-bg);
  border-color: rgba(242,169,0,.22);
}

/* --- List rhythm: "操作(検索/新規追加)" then "一覧" --- */
.list-panel{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px;
}

.op-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 2px 10px 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.op-title{
  font-weight: 800;
}

.op-actions{display:flex; align-items:center; gap:10px;}
.filters{
  margin-bottom: 14px;
}
.filters-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.search-block{ grid-column: span 8; }
.filter-block{ grid-column: span 4; }
@media (max-width: 980px){
  .search-block{ grid-column: span 12; }
  .filter-block{ grid-column: span 12; }
}

/* search row */
.search-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.search-row .input{
  flex: 1;
  min-width: 280px;
}

/* floating add button - keep visible but not noisy */
.add-float{
  position: sticky;
  top: 92px;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}

/* --- Tables (including data-table alias) --- */
.data-table{ width:100%; border-collapse: collapse; }
.data-table thead th{
  text-align:left;
  font-size:12px;
  color: var(--muted);
  background:#f6f8fc;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  white-space: nowrap;
}
.data-table tbody td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  font-size:14px;
  vertical-align: middle;
}
.data-table tbody tr:hover td{
  filter: brightness(.99);
}

/* reduce "many links" visual noise in action column */
.td-actions .link,
.td-actions .danger-link{
  margin-left: 8px;
  text-decoration: none;
}
.td-actions .link:hover,
.td-actions .danger-link:hover{
  text-decoration: underline;
}

/* --- Detail pages: make it a "read" screen --- */
.page-head{
  padding: 2px 0 10px 0;
}
.mini-label{
  color: var(--muted);
  font-size: 12px;
}
.field{
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.field .label{
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.field .value{
  font-weight: 700;
}

/* --- Create/Edit pages: 1 item = 1 block --- */
.form-grid2{
  gap: 12px;
}
.input{
  border-radius: 12px;
}
.btn.primary{
  border-radius: 12px;
}


/* --- Layout: align all pages to Dashboard width/spacing --- */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 20px 36px;
}
.main{
  background: var(--bg);
}

/* Page header rhythm */
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.page-title{
  letter-spacing: .02em;
}
.page-sub{
  margin-top: 6px;
  color: var(--muted);
}

/* Role band: keep compact like dashboard */
.role-band{
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}
.role-band-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.role-note{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  max-width:560px;
}

/* Role pill (left) */
.role-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#eef6ff;
  color:var(--primary-700);
  border:1px solid #dbeafe;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}
.role-pill .dot{ width:10px; height:10px; border-radius:999px; background:var(--primary); display:inline-block; }

/* Role band center message (exists on list pages) */
.role-band-msg{ color:var(--muted); font-size:12px; }

/* Buttons: align to dashboard */
.btn{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ border-color:#c7d2fe; }

/* --- Tables: apply to .table (used in most pages) --- */
.table{
  width:100%;
  border-collapse: collapse;
}
.table thead th{
  text-align:left;
  font-size:12px;
  color: var(--muted);
  background:#f6f8fc;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  white-space: nowrap;
}
.table tbody td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  font-size:14px;
  vertical-align: middle;
}
.table tbody tr:hover td{
  filter: brightness(.99);
}

/* Make row-click affordance clear without changing JS */
.table tbody tr{
  cursor: pointer;
}

/* Row interactive feedback (hover/active/focus) */
.table tbody tr:active td{
  filter: brightness(.97);
}
.table tbody tr.row-link:focus{
  outline:2px solid rgba(31,122,224,.35);
  outline-offset:-2px;
}

/* Action links: reduce noise */
.th-actions, .td-actions{
  text-align: right;
  white-space: nowrap;
  width: 1%;
}


/* PATCH_fix10_1: MFA toggle & layout improvements */
.mfa-title{
  font-weight: 700;
  font-size: 16px;
  color: var(--text,#1a1a1a);
  letter-spacing: .01em;
}
.mfa-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.toggle{
  display: inline-flex;
  align-items: center;
}
.toggle input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-track{
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background .15s ease;
}
.toggle-thumb{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  transform: translateX(0);
  transition: transform .15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.toggle input:checked + .toggle-track{
  background: rgba(47,112,255,.65);
}
.toggle input:checked + .toggle-track .toggle-thumb{
  transform: translateX(20px);
}
.mfa-steps{
  margin: 8px 0 0 18px;
}
.mfa-steps li{
  margin: 6px 0;
}
.backup-card{
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border,#d9d9d9);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
}
.backup-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin-top: 10px;
}
.backup-code{
  padding: 8px 10px;
  border: 1px solid var(--border,#d9d9d9);
  border-radius: 10px;
  background: #fff;
}


/* --- billing polish (minimal additions) --- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.page-head-right{display:flex;align-items:center;gap:12px}
.stat{border:1px solid rgba(15,23,42,.10);border-radius:12px;padding:10px 12px;min-width:180px}
.stat-k{font-size:12px;color:#64748b}
.stat-v{font-size:20px;font-weight:700;letter-spacing:.02em}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid rgba(15,23,42,.10);background:#f8fafc;color:#0f172a}
.badge-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.badge-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.badge-info{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.subtle{color:#64748b}
.progress{height:10px;background:#f1f5f9;border-radius:999px;overflow:hidden;border:1px solid rgba(15,23,42,.08)}
.progress-bar{height:100%;background:#3b82f6;border-radius:999px}
.storage-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pay-box{border:1px solid rgba(15,23,42,.10);border-radius:12px;padding:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.list-check li{position:relative;padding-left:22px}
.list-check li:before{content:"✓";position:absolute;left:0;top:0;color:#16a34a;font-weight:800}
@media (max-width: 900px){
  .storage-grid,.two-col{grid-template-columns:1fr}
  .stat{min-width:auto}
}
/* --- /billing polish --- */