:root{
  --layout-maxw: 1200px;
  --layout-pad-x: 20px;
  --layout-pad-y: 10px;
  --logo-h: 56px;
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --border: #e5e7eb;
  --primary: #1f7ae0;
  --primary-700: #0f61b0;
  --danger: #e5533d;
  --danger-bg: #fff1ef;
  --warn: #f2a900;
  --warn-bg: #fff7e6;
  --ok: #16a34a;
  --ok-bg: #eafaf0;
  --shadow: 0 8px 24px rgba(16,24,40,.08);
  --shadow-sm: 0 2px 10px rgba(16,24,40,.06);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

a{color:inherit; text-decoration:none;}
a:hover{text-decoration:underline;}

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background: var(--card);
  border-bottom:1px solid var(--line);
}

.header-inner{
  max-width: var(--layout-maxw);
  margin:0 auto;
  padding: var(--layout-pad-y) var(--layout-pad-x);
  display:flex;
  align-items:center;
  gap:16px;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  /* NOTE: ロゴ幅の強制はしない（メニュー開始位置を揃えるため） */
  min-width: auto;
}
.logo-badge{
  width: 96px;
  height: 36px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.06em;
  font-size:18px;
}
.logo-sub{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.logo-sub .title{
  font-weight:800;
  font-size:18px;
}
.logo-sub .tag{
  font-size:12px;
  color: var(--muted);
  margin-top:4px;
}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex:1;
  margin-left:6px;
  flex-wrap:nowrap;
  overflow-x:auto;
}
.nav a{
  white-space:nowrap;
  font-size:17px; /* FIX */
  padding: 10px 12px;
  border-radius: 12px;
}
.nav a.active{
  background: #eaf2ff;
  color: var(--primary-700);
  text-decoration:none;
}

.header-right{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 13px;
}

.role-band{
  background: #ffffff;
  border-bottom:1px solid var(--line);
}
.role-band-inner{
  max-width: var(--layout-maxw);
  margin:0 auto;
  padding: var(--layout-pad-y) var(--layout-pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.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;
  white-space:nowrap;
}
.role-pill .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--primary);
  display:inline-block;
}

.role-pill .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--primary);
}
.role-pill.user .dot{ background:#0ea5e9; }
.role-pill.admin .dot{ background:#7c3aed; }

.role-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}
.role-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 10px;
  border:1px solid var(--line);
  background: var(--card);
  cursor:pointer;
  font-weight:700;
  box-shadow: var(--shadow-sm);
}
.btn:hover{border-color:#c7d2fe;}

.role-actions .btn:hover{ background:#f9fafb; }
.role-note{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  max-width:560px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.main{
  width: 100%;
  margin: 0;
  padding: 18px;
  flex: 1;
}

/* Full-width content wrapper */
.container{width:100%;}


.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.h1{
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px 0;
}
.p{
  margin:0;
  color: var(--muted);
  line-height:1.6;
}
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.col-12{grid-column: span 12;}
.col-6{grid-column: span 6;}
.col-4{grid-column: span 4;}
.col-3{grid-column: span 3;}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:999px;
  padding: 6px 10px;
  font-weight:700;
  font-size:12px;
  color:#334155;
}

.footer{
  padding: 16px 18px;
  color: var(--muted);
  font-size: 12px;
  border-top:1px solid var(--line);
  background: var(--card);
}

/* responsive */
@media (max-width: 860px){
  .logo{min-width:unset;}
  .logo-sub{display:none;}
  .role-band-inner{flex-direction:column;}
  .role-actions .btn{min-width:unset; width:100%;}
  .col-6, .col-4, .col-3{grid-column: span 12;}
}


.user-menu{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}

.user-menu:focus{
  outline: 2px solid rgba(76, 107, 140, .35);
  outline-offset: 2px;
}

.user-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #e9eef7;
  border: 1px solid var(--border);
  position: relative;
}
.user-avatar:before{
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #9aa7bf;
}
.user-avatar:after{
  content: "";
  position: absolute;
  left: 50%;
  top: 72%;
  width: 16px;
  height: 10px;
  border-radius: 12px 12px 6px 6px;
  transform: translate(-50%, -50%);
  background: #9aa7bf;
}

.user-name{
  white-space: nowrap;
}

.user-caret{
  color: var(--muted);
}

.user-dropdown{
  position:absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(20, 30, 50, .12);
  padding: 8px;
  display: none;
  z-index: 50;
}

.user-dropdown.open{
  display: block;
}

.user-item{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration:none;
  font-size: 14px;
}

.user-item:hover{
  background: #f2f5fb;
}


/* Step2-2 Sub tabs (期限管理の内訳) */
.subtabs{
  display:flex;
  gap: 8px;
  margin: 10px 0 12px;
}

.subtab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  font-size: 14px;
  text-decoration:none;
  color: var(--text);
}

.subtab.active{
  background: #eef2fb;
  border-color: rgba(76, 107, 140, .35);
}


/* Step2 List (共通一覧骨格) */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px; align-items:center; }
.page-sub{font-size:12px;color:var(--muted);margin-top:4px;}
.list-panel{border:1px solid var(--border);border-radius:16px;background:#fff;padding:14px;}
.filters{display:block;margin-top:10px;}

.filters-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.search-block{flex: 1; min-width: 520px;}
.filter-block{display:flex; align-items:flex-start; gap:18px; white-space:nowrap;}
/* keep table/pager full width */
.table-wrap{width:100%;}
.pager{width:100%;}
@media (max-width: 1100px){
  .filters-grid{flex-direction:column; align-items:stretch;}
  .search-block{min-width:unset;}
  .filter-block{justify-content:flex-start;}
}

.search-block{flex:1 1 520px;min-width:360px;}
.filter-block{flex:0 0 auto;min-width:320px;}
.field-label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.search-row{display:flex;align-items:center;gap:10px;}
.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);font-size:14px;background:#fff;}
.helper{font-size:12px;color:var(--muted);margin-top:6px;}
.filter-row{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:nowrap;
  overflow-x:auto;}
.select-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff;}
.select-label{font-size:12px;color:var(--muted);}
.select{border:none;background:transparent;font-size:14px;outline:none;}
.select.small{font-size:13px;}
.table-wrap{margin-top:12px;border:1px solid var(--border);border-radius:14px;overflow:visible;}
.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);}
.table tbody td{padding:12px 12px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle;}
.th-actions,.td-actions{text-align:right;white-space:nowrap;width:1%;}
/* Actions: keep td as a real table-cell; put flex on an inner wrapper to avoid column border “step” */
.td-actions{font-size:13px;}
.td-actions-inner{
  display:flex;
  justify-content:flex-end;
  gap:14px;
  align-items:center;
}
/* Keep the 3rd action slot width consistent across states (e.g., 一覧から外す / 復活) */
.td-actions-inner .tip-wrap{min-width:96px; justify-content:center;}
.td-actions-inner .link{display:inline-flex;align-items:center;justify-content:center;margin-left:0;}
.link{color:var(--primary);text-decoration:none;margin-left:10px;}
.danger-link{color:#b01919;}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:#f5f7fb;margin-right:6px;}
.badge.danger{background:#fff2f2;}
.badge.warn{background:#fff8eb;}
.badge.ok{background:#eef9f0;}
.row-danger td{background:linear-gradient(0deg, rgba(255,242,242,.55), rgba(255,242,242,.55));}
.row-warn td{background:linear-gradient(0deg, rgba(255,248,235,.65), rgba(255,248,235,.65));}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:nowrap;
  overflow-x:auto;}
.pager-left,.pager-mid,.pager-right{display:flex;align-items:center;gap:8px;}
.pager-label{font-size:12px;color:var(--muted);}
.pager-note{font-size:12px;color:var(--muted);}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:#fff;text-decoration:none;color:var(--text);}
.pager-text{font-size:13px;color:var(--text);}
.pager-go{display:inline-flex;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;text-decoration:none;color:var(--text);font-size:13px;}
.tip-wrap{position:relative;display:inline-flex;align-items:center;}
/* Tooltip (legacy inline DOM) is kept for tooltip text but not shown.
   We render a single global tooltip via JS to prevent overlap/stacking bugs.
*/
.tip-bubble{
  position:absolute;
  right:0;
  left:auto;
  top:calc(100% + 8px);
  min-width:280px;
  max-width:360px;
  width:max-content;
  white-space:normal;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 28px rgba(20, 30, 50, .12);
  font-size:12px;
  color:var(--text);
  display:none;
  z-index:10000;
  pointer-events:none; /* prevent tooltip from blocking nearby actions */
}
.tip-wrap:hover{z-index:9999;}
/* Do NOT show per-element tooltip bubbles. */
.tip-wrap:hover .tip-bubble{display:none;}

/* Global tooltip (single instance) */
#globalTooltip{
  position:fixed;
  top:0;left:0;
  max-width:360px;
  min-width:240px;
  width:max-content;
  white-space:normal;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 28px rgba(20, 30, 50, .12);
  font-size:12px;
  color:var(--text);
  z-index:20000;
  display:none;
  pointer-events:none;
}


/* Pager fixes */
.pager-mid{
  flex-wrap: nowrap;
  white-space: nowrap;
}
.pager-text{
  white-space: nowrap;
}
.pager-mid .pager-label{
  margin-left: 6px;
}
.pager-mid .page-input{
  margin-left: 4px;
}
.pager-mid .pager-go{
  margin-left: 4px;
}
/* Make page input always clearly visible */
.pager-mid .page-input{
  width: 84px;
  border: 1px solid var(--border);
  background:#fff;
}
/* Keep input + go close */
.pager-mid{
  gap: 6px;
}


/* Primary button icon */
.primary-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.primary-btn .plus{
  display:inline-flex;
  width: 18px;
  height: 18px;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 700;
  line-height: 1;
}


/* Pager jump group */
.pager-mid{flex-wrap:nowrap;white-space:nowrap;}
.pager-text{white-space:nowrap;}
.pager-jump{display:flex;align-items:center;gap:6px;margin-left:10px;}
.pager-jump .pager-label{margin:0;}
/* Override generic .input width:100% for pager only */
.pager-jump .page-input{
  width: 76px;
  min-width: 76px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:#fff;
  display:inline-block;
}
.pager-jump .pager-go{margin-left:0;}


/* Filters right column (新規追加を検索/フィルタ近くに) */
.right-col{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
}
.action-block .primary-btn{
  padding: 10px 14px;
}


/* Pager jump group strong */
.pager-mid{gap:8px;}
.pager-jump{margin-left:0;gap:6px;display:inline-flex;align-items:center;}
.pager-jump .page-input{
  border: 2px solid rgba(20, 40, 70, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(20, 40, 70, .06);
}
.pager-jump .pager-go{margin-left:0;}


/* Step2-A-2 layered ops */
.list-panel{position:relative;}
.op-head{margin-bottom:6px;}
.op-title{font-size:13px;color:var(--muted);font-weight:600;}
/* make the whole ops area feel like an interactive block above table */
.filters{
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.table-wrap{margin-top:12px;}
/* ensure keyword input never looks like empty whitespace */
.search-row .input{
  border: 2px solid rgba(20,40,70,.18);
  background:#fff;
  box-shadow: inset 0 0 0 1px rgba(20,40,70,.06);
}
/* floating add button (keeps position without reserving layout width) */
.add-float{
  position:absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

/* list actions group (e.g., 紹介元分析 + 新規追加) */
.add-actions{
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
}

/* Anchor styled like a primary button */
/* Primary action button (anchor/button) */
.btn.btn-primary,
a.btn.btn-primary{
  background: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
  color: #fff !important;
  text-decoration: none !important;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .04s ease;
  box-shadow: 0 6px 16px rgba(16,24,40,.10);
}
.btn.btn-primary:hover,
a.btn.btn-primary:hover{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 10px 22px rgba(16,24,40,.14);
}
.btn.btn-primary:active,
a.btn.btn-primary:active{
  transform: translateY(1px);
}
/* plus icon inside primary button */
.btn.btn-primary .plus,
a.btn.btn-primary .plus{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background: transparent;
  border: 0;
  color:#fff;
  font-weight:800;
  line-height:1;
}


/* Fix3: table full width + remove right blank */
.list-panel, .filters, .table-wrap{width:100%;}
.table-wrap{display:block;}
.table{width:100%;}

/* Fix3: align filter controls with search (label above select) */
.select-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.select-label{display:block;font-size:13px;color:var(--muted);margin:0;}
.filter-row{align-items:flex-start;justify-content:flex-end;}


/* Step2-A-3 refine search/filter */
.filters{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px 18px;
  align-items: start;
}
.search-block .helper{margin-top:6px;}
/* filter block: keep title + fields tight and aligned */
.filter-block{display:flex; flex-direction:column; gap:8px; min-width: 280px;}
.filter-title{font-size:13px;color:var(--muted);font-weight:600;}
.filter-row{display:flex; gap:12px; align-items:flex-start; justify-content:flex-end;}
.select-wrap{display:flex; flex-direction:column; gap:6px;}
.select-wrap .mini-label{font-size:12px;color:var(--muted);font-weight:600;}
/* force equal visual height by giving filter block a subtle helper line */
.filter-helper{font-size:12px;color:transparent; line-height:1.4;}

/* more prominent add button (still calm) */
.primary-btn.add-float{
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
}
.primary-btn.add-float:hover{filter: brightness(.98);}

/* referrals: table rows closer to dashboard "alert row" feel */
.table.table-alertlike tbody tr{ transition: filter .12s ease; }
.table.table-alertlike tbody tr:hover{ filter: brightness(.985); }

.table.table-alertlike tbody tr.row-danger td{ background: var(--danger-bg) !important; }
.table.table-alertlike tbody tr.row-warn td{ background: var(--warn-bg) !important; }
.table.table-alertlike tbody tr.row-ok td{ background: #fff !important; }
.table.table-alertlike tbody tr.row-muted td{ background: rgba(107,114,128,0.16) !important; color: rgba(15,23,42,.72); }
.table.table-alertlike tbody tr.row-muted .pill{ opacity: .75; }
.table.table-alertlike tbody tr.row-muted:hover{ filter: none; }

.table.table-alertlike tbody tr.row-muted td:first-child{ box-shadow: inset 6px 0 0 rgba(107,114,128,0.55) !important; }
.table.table-alertlike tbody tr.row-muted.row-danger td:first-child,
.table.table-alertlike tbody tr.row-muted.row-warn td:first-child,
.table.table-alertlike tbody tr.row-muted.row-ok td:first-child{ box-shadow: inset 6px 0 0 rgba(107,114,128,0.55) !important; }

.table.table-alertlike tbody tr.row-danger td:first-child{ box-shadow: inset 6px 0 0 var(--danger); }
.table.table-alertlike tbody tr.row-warn td:first-child{ box-shadow: inset 6px 0 0 var(--warn); }
.table.table-alertlike tbody tr.row-ok td:first-child{ box-shadow: inset 6px 0 0 transparent; }
.table.table-alertlike tbody tr.row-muted td:first-child{ box-shadow: inset 6px 0 0 rgba(107,114,128,0.45); }

.table.table-alertlike tbody td{ padding-top:14px; padding-bottom:14px; }
/* role switch button: ensure looks clickable */
.role-switch{cursor:pointer;}


/* PATCH_v32_fix6 */

.role-band{
  background: #EAF3FF;
  border: 1px solid #D6E6FF;
  padding: 12px 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.role-pill{ display:flex; align-items:center; gap:8px; }
.role-band-msg{
  font-size: 14px;
  color: #1f3b66;
  font-weight: 600;
}
.role-note{
  font-size: 13px;
  color: #355A8A;
  line-height: 1.5;
  margin-left: 0;
  flex-basis: 100%;
}
/* Keep switch button near note */
.role-switch{ margin-left: auto; }

/* List layout fixes: allow table to fill width and align search/filter row */
.search-filter-row{ align-items: center; }
.search-block{ min-width: 0; flex: 1 1 auto; }
.table-wrap{ min-width: 0; width: 100%; }
.table{ width: 100%; }
.filters{ display:flex; align-items:center; gap:18px; }
.filters .filter-title{ margin-right: 0; white-space: nowrap; }

/* Generic helpers */
.search-area, .search-filter, .search-filter-area, .search-filter-wrap{ align-items: center; }




/* PATCH_v33_fix14_roleband_reset (dashboard baseline) */
.role-band{
  background:#ffffff;
  width:100%;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  box-shadow:none;
  display:block;
  align-items:initial;
  gap:0;
  flex-wrap:nowrap;
  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;
  flex-wrap:nowrap;
}
.role-pill{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;}
.role-actions{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;}
.role-note{font-size:12px;color:var(--muted);line-height:1.45;max-width:560px;margin:0;flex-basis:auto;}
.role-band-msg{display:none;}
.role-switch{margin-left:0;}
/* Step3 detail form */
.card-block{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin-top:12px;
}
.form-grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px 14px;
}
.field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px;}
.textarea{width:100%;border:2px solid rgba(20,40,70,.18);border-radius:12px;padding:10px;background:#fff;}
.note{margin-top:6px;font-size:12px;color:var(--muted);}
.action-bar{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:nowrap;
  overflow-x:auto;}
.btn{border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 12px;font-weight:600;}
.btn.primary{background:rgba(47,112,255,.12);border-color:rgba(47,112,255,.22);color:#1b4fe0;}
.btn.danger{background:rgba(240,68,56,.08);border-color:rgba(240,68,56,.20);color:#b42318;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.detail-head-right{display:flex;gap:14px;align-items:flex-end;justify-content:flex-end;flex-wrap:nowrap;
  overflow-x:auto;}
.status-inline,.deadline-inline{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;border:1px solid var(--border);}
.status-badge.warn{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.28);}
.toast{position:fixed;right:18px;bottom:18px;min-width:220px;max-width:360px;background:#111827;color:#fff;border-radius:14px;padding:12px 14px;opacity:0;transform:translateY(8px);transition:all .18s ease;pointer-events:none;z-index:50;}
.toast.show{opacity:1;transform:translateY(0);}
.modal-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.45);display:flex;align-items:center;justify-content:center;z-index:60;}
.modal{width:min(520px,92vw);background:#fff;border-radius:16px;padding:16px;border:1px solid var(--border);box-shadow:0 18px 50px rgba(16,24,40,.20);}
.modal-title{font-weight:800;margin-bottom:8px;}
.modal-body{color:var(--text);font-size:14px;line-height:1.6;margin-bottom:12px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:nowrap;
  overflow-x:auto;}
.back-link{margin-top:12px;}
@media (max-width: 860px){
  .form-grid2{grid-template-columns:1fr;}
  .detail-head-right{justify-content:flex-start;align-items:flex-start;}
  .status-inline,.deadline-inline{align-items:flex-start;}
}

/* ensure hidden attribute works for modals */
.modal-backdrop[hidden]{display:none !important;}


/* Step3 attachment gallery */
body.is-view .attach-input{display:none;}
.attach-gallery{display:flex;gap:10px;flex-wrap:nowrap;
  overflow-x:auto;margin-bottom:10px;}
.thumb{width:160px;height:90px;border:1px dashed rgba(20,40,70,.28);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);background:rgba(15,23,42,.02);}
.file-chip{border:1px solid var(--border);border-radius:999px;padding:8px 10px;font-size:12px;font-weight:600;background:#fff;}
body.no-attachments #attachGallery{display:none;}

/* Fix11 equipment: hide upload in view mode */
body.is-view .attach-input{display:none;}

/* Fix12 attachments pending + remove */
.attach-pending{margin-top:8px; display:flex; flex-direction:column; gap:6px;}
.attach-item{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid #e6e6e6; border-radius:10px; background:#fff;}
.attach-item .name{font-size:14px;}
.attach-item .meta{font-size:12px; opacity:.7}
.attach-item .remove{border:none; background:transparent; cursor:pointer; font-size:14px; padding:2px 6px; border-radius:8px;}
.attach-item .remove:hover{background:#f3f3f3;}
/* "添付を外す" shown only in edit mode */
body.is-view .detach-btn{display:none;}
.detach-btn{margin-left:8px; font-size:12px;}

/* Detail attachments: unify card + detach UI (FIX07) */
.attach-gallery{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.attach-card{
  width:220px;
}
.attach-card .thumb{
  height:88px;
  border:2px dashed #d1d5db;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  background:#f9fafb;
  font-weight:700;
  font-size:12px;
}
.attach-card .thumb-caption{
  margin-top:8px;
  font-size:12px;
  color:#374151;
  word-break:break-all;
}

/* Make detach clearly clickable + consistent with referral detail */
.attach-gallery .detach-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  margin-left:0;
  padding:2px 6px;
  border-radius:8px;
  color:#b91c1c;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
}
.attach-gallery .detach-btn::before{
  content:'×';
  font-weight:900;
}
.attach-gallery .detach-btn:hover{
  text-decoration:underline;
  background:#fff1f2;
}

/* Fix15 thumbnail constrain */
.attach-gallery{display:flex; flex-wrap:nowrap;
  overflow-x:auto; gap:10px;}
.attach-thumb{width:72px; height:54px; border:1px solid #e6e6e6; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fafafa;}
.attach-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

/* Fix22 attach uploader visibility */
.attach-uploader { display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  overflow-x:auto; }
.attach-uploader label.btn { display:inline-flex; }
.attach-uploader input[type="file"] { display:block; }

/* Fix23 attach button */
#attachBtn { display:inline-flex; }
.attach-uploader { position:relative; }

/* Fix24 attach uploader placement */
.attach-uploader { width: 100%; justify-content:flex-start; margin-top: 8px; }
.attach-uploader .file-name { opacity: .8; }

/* Fix25 create attach placement */
.field #attachBtn { margin-top: 8px; }
.field .file-name { margin-left: 10px; font-size: 13px; opacity: .8; }

/* StepA1 tabs */
.page-help{ margin: 6px 0 10px; opacity: .85; }
.tabs.kanri-tabs{ display:flex; gap:10px; margin: 8px 0 14px; }
.tabs.kanri-tabs .tab{ padding:10px 14px; border:1px solid rgba(0,0,0,.12); border-radius:10px; text-decoration:none; color:inherit; background:#fff; }
.tabs.kanri-tabs .tab.is-active{ background: rgba(0,0,0,.06); font-weight: 700; }
\n/* Dashboard KPI styles (merged from step1b) */
}


/* Step1 Dashboard */
.page-title{
  font-size: 20px;
  margin: 8px 0 14px;
}

.dash-section{
  margin: 18px 0 20px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-title{
  font-size: 16px;
  margin: 0 0 10px;
}

.section-link{
  font-size: 14px;
  text-decoration: none;
  color: var(--primary);
}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.kpi-card{
  display:block;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 14px 14px 12px;
  text-decoration:none;
  color: var(--text);
}

.kpi-label{
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.kpi-value{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 4px;
}

.kpi-sub{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.kpi-action{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 14px;
  color: var(--primary);
}

.summary-row{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.summary-item{
  border: 1px solid var(--border);
  border-radius: 14px;
  background:#fff;
  padding: 12px 12px 10px;
}

.summary-label{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.summary-value{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.summary-link{
  display:inline-flex;
  font-size: 14px;
  color: var(--primary);
  text-decoration:none;
  margin-bottom: 6px;
}

.summary-note{
  font-size: 12px;
  color: var(--muted);
}

.alert-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.alert-row{
  display:flex;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:#fff;
  padding: 12px;
  text-decoration:none;
  color: var(--text);
}


.alert-title-link{color:var(--primary);text-decoration:underline; text-underline-offset: 2px;}
.alert-title-link:hover{text-decoration-thickness:2px;}

/* Alerts hint */
.hint{font-size:12px;color:var(--muted);margin:8px 0 0;}


.logo-img{height:var(--logo-h);width:auto;display:block;}

.icon-row{display:flex;gap:16px;align-items:center;}
.icon-preview{width:96px;height:96px;border-radius:8px;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;color:#888;font-size:12px;}
.icon-actions button{margin-top:8px;}
.note{font-size:12px;color:#888;}

#pf_actions{margin-top:16px;}

.build-badge{font-size:12px;color:#888;margin-left:6px;}

/* ---- Clinic settings (Step3) ---- */
/* Match the feel of 期限管理 tabs (red-framed area) while supporting multi-row. */
.tabs.kanri-tabs.clinic-tabs{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin: 8px 0 14px;
}
.tabs.kanri-tabs.clinic-tabs .tab{
  text-align:center;
}

/* Prevent forms from stretching to full page width on large screens */
.settings-wrap{
  max-width: 980px;
  margin: 0 auto;
}

/* toggle-help */
.toggle-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.toggle-help{
  font-size:12px;
  color:#6B7280;
  line-height:1.2;
  white-space:nowrap;
}
/* sticky actions (security) */
.sticky-actions{
  position:sticky;
  bottom:0;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(6px);
  border-top:1px solid rgba(0,0,0,0.06);
  padding:12px 16px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
  z-index:5;
}

/* toggle state pill */
.toggle-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.toggle-help{
  font-size:12px;
  color:#6B7280;
  line-height:1.2;
  white-space:nowrap;
}
.toggle-state{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  border:1px solid rgba(0,0,0,0.10);
  background:#F3F4F6;
  color:#374151;
  margin-left:8px;
  white-space:nowrap;
}
.toggle-state[data-state="on"]{
  background:#E8F0FF;
  border-color:rgba(59,130,246,0.25);
  color:#1D4ED8;
}


/* referrals note */
.note-inline{
  margin: 8px 0 10px;
  font-size: 12px;
  color: #6B7280;
}


/* permissions page */
.role-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.role-card{border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:14px;background:#fff;}
.role-title{font-weight:700;margin-bottom:6px;}
.role-desc{color:#374151;font-size:14px;line-height:1.5;}
.simple-table{width:100%;border-collapse:separate;border-spacing:0;}
.simple-table th,.simple-table td{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,0.06);font-size:14px;}
.simple-table th{text-align:left;color:#6B7280;font-weight:600;background:rgba(0,0,0,0.02);}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;line-height:20px;}
.pill.ok{background:rgba(16,185,129,0.12);color:#065F46;}
.pill.muted{background:rgba(107,114,128,0.10);color:#374151;}
.bullets{margin:0;padding-left:18px;color:#374151;}


/* FIX19: ensure anchor buttons look like buttons (no underline) */
a.btn{ text-decoration:none !important; color: var(--text); }
a.btn:hover{ text-decoration:none !important; }

/* HEADER_ROLEBAND_UNIFY_GLOBAL_FIX */
/* UI統一（ダッシュボード基準）: ヘッダ/ロール帯/ユーザーメニューを完全一致 */
.header{background:linear-gradient(180deg,#ffffff 0%, #ffffff 100%) !important;border-bottom:1px solid var(--border) !important;}
.header-inner{max-width:1200px !important;margin:0 auto !important;padding:10px 20px !important;display:flex !important;align-items:center !important;gap:16px !important;}
.nav{display:flex !important;gap:10px !important;align-items:center !important;flex:1 !important;margin-left:6px !important;flex-wrap:nowrap !important;}
.nav a{text-decoration:none !important;color:var(--muted) !important;font-size:14px !important;padding:10px 12px !important;border-radius:10px !important;white-space:nowrap !important;}
.nav a:hover{background:#f1f5ff !important;color:var(--primary-700) !important;}
.nav a.active{background:#eaf2ff !important;color:var(--primary-700) !important;font-weight:700 !important;}
.header-right{display:flex !important;gap:10px !important;align-items:center !important;color:var(--muted) !important;font-size:13px !important;position:relative !important;}
.user-menu{border:1px solid var(--border) !important;background:var(--card) !important;border-radius:999px !important;padding:8px 10px !important;display:flex !important;align-items:center !important;gap:8px !important;cursor:pointer !important;box-shadow:var(--shadow-sm) !important;}
.user-name{color:var(--text) !important;font-weight:700 !important;font-size:13px !important;}
.user-caret{color:var(--muted) !important;}

/* Role band */
/* NOTE: assets/app.css の PATCH_v32_fix6 が .role-band に padding/border/radius/flex を付与しており、
   それがロール帯の“厚み”差の原因になるため、ここでダッシュボード基準に完全リセットする */
.role-band{
  background:#ffffff !important;
  width:100% !important;
  /* reset PATCH_v32_fix6 */
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  display:block !important;
  align-items:initial !important;
  gap:0 !important;
  flex-wrap:nowrap !important;
  /* dashboard baseline */
  border-bottom:1px solid var(--border) !important;
}
.role-band-inner{width:100% !important;box-sizing:border-box !important;max-width:1200px !important;margin:0 auto !important;padding:10px 20px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:14px !important;flex-wrap:nowrap !important;}
.role-pill{display:inline-flex !important;align-items:center !important;gap:10px !important;background:#eef6ff !important;color:var(--primary-700) !important;border:1px solid #dbeafe !important;padding:8px 12px !important;border-radius:999px !important;font-weight:700 !important;font-size:13px !important;}
.role-pill .dot{width:10px !important;height:10px !important;border-radius:999px !important;background:var(--primary) !important;display:inline-block !important;}
.role-actions{display:flex !important;align-items:center !important;gap:12px !important;flex-wrap:nowrap !important;}
.btn{border:1px solid var(--border) !important;background:var(--card) !important;border-radius:10px !important;padding:10px 12px !important;font-weight:700 !important;cursor:pointer !important;box-shadow:var(--shadow-sm) !important;;white-space:nowrap !important;flex:0 0 auto !important;}
.btn:hover{border-color:#c7d2fe !important;}
.role-note{
  font-size:12px !important;
  color:var(--muted) !important;
  line-height:1.45 !important;
  max-width:560px !important;
  margin:0 !important;
  /* reset PATCH_v32_fix6 */
  flex-basis:auto !important;
}

/* User dropdown (dashboard baseline) */
.user-dropdown{position:absolute !important;right:0 !important;top:calc(100% + 10px) !important;min-width:200px !important;background:var(--card) !important;border:1px solid var(--border) !important;border-radius:12px !important;box-shadow:var(--shadow) !important;padding:6px !important;display:none !important;z-index:50 !important;}
.user-dropdown.open{display:block !important;}
.user-item{display:block !important;padding:10px 10px !important;border-radius:10px !important;color:var(--text) !important;text-decoration:none !important;font-size:14px !important;}
.user-item:hover{background:rgba(31,122,224,.08) !important;}
.user-avatar{width:28px !important;height:28px !important;border-radius:999px !important;background:#e9eef7 !important;border:1px solid var(--border) !important;position:relative !important;display:inline-block !important;}
.user-avatar:before{content:"" !important;position:absolute !important;left:50% !important;top:30% !important;width:10px !important;height:10px !important;border-radius:999px !important;transform:translate(-50%,-50%) !important;background:#9aa7bf !important;}
.user-avatar:after{content:"" !important;position:absolute !important;left:50% !important;top:74% !important;width:16px !important;height:10px !important;border-radius:999px !important;transform:translate(-50%,-50%) !important;background:#9aa7bf !important;}

/* Main */
.main{padding:0 !important;}
.container{max-width:1200px !important;margin:0 auto !important;padding:22px 20px 36px !important;}
.page-title{margin:6px 0 18px !important;font-size:18px !important;font-weight:800 !important;}



/* FIX04 TEMPLATE: detailページ共通の“静かにリッチ”アクセント（強い行背景は使わない） */
.card-block > h2{
  position:relative;
  padding-left:12px;
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(31, 111, 235, 0.10);
}
.card-block > h2::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:18px;
  border-radius:3px;
  background:rgba(31, 111, 235, 0.35);
}
/* カード自体にごく薄いトーン差 */
.card-block{background:rgba(31, 111, 235, 0.015);}
/* ページタイトル周りに軽いアクセント */
.page-head h1, .page-head h2, h1.page-title{position:relative;}
.page-head h1::after, h1.page-title::after{
  content:"";
  display:block;
  height:2px;
  width:72px;
  margin-top:10px;
  border-radius:2px;
  background:rgba(31, 111, 235, 0.25);
}
/* 証跡テーブルのヘッダに薄いトーン差 */
.audit-table thead th{background:rgba(31, 111, 235, 0.04);}

/* FIX04 TEMPLATE: 一覧に戻る（現位置のまま／見落としにくい副ボタン） */
.back-link{display:flex;justify-content:flex-start;align-items:center;margin-top:16px;}
.back-link a.back-btn.btn-subtle{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(31, 111, 235, 0.10) !important;
  color:var(--text);
  text-decoration:none;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.back-link a.back-btn.btn-subtle:hover{
  background:rgba(31, 111, 235, 0.14) !important;
  border-color:rgba(31, 111, 235, 0.25);
}
.back-ic{font-size:14px;line-height:1;opacity:.85}
.back-sep{opacity:.35}
.back-txt{font-weight:600}

/* FIX04 TEMPLATE: detailページの幅・タイトル・弱アクセント（静かにリッチ） */
.main{padding:0 !important;}
.main .page{
  max-width:1200px;
  margin:0 auto;
  padding:22px 20px 36px;
}

/* detailタイトル（.page-top h1）を一覧と同じサイズ感へ */
.page-top h1{
  margin:6px 0 10px;
  font-size:18px;
  font-weight:800;
}
.page-top .hint{margin-top:2px;color:var(--muted);}

/* ページタイトル下の短いアクセント線（見えないケースがあったので汎用化） */
.page-top h1::after,
.page-head .page-title::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  border-radius:999px;
  background:rgba(31,111,235,0.35);
  margin-top:10px;
}

/* カード見出しの左アクセント＋見出し下ライン（静かに情報感を出す） */
.card-block h2,
.card h2,
.card h3{
  position:relative;
  padding-left:12px;
}
.card-block h2::before,
.card h2::before,
.card h3::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:18px;
  border-radius:999px;
  background:rgba(31,111,235,0.45);
}
.card-block h2::after,
.card h2::after,
.card h3::after{
  content:"";
  display:block;
  height:1px;
  background:rgba(15,23,42,0.06);
  margin-top:12px;
}

/* カードにごく薄いトーン差 */
.card-block,
.card{
  background:rgba(15,23,42,0.02);
}

/* 証跡テーブルのヘッダ（ある場合） */
.table thead th{
  background:rgba(15,23,42,0.03);
}