:root{--bg:#0b1020;--card:#111a33;--text:#e9ecf5;--muted:#b8c0d9;--accent:#6ea8fe;--border:#223057;}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",Helvetica,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),#070a14);color:var(--text);}
a{color:inherit;text-decoration:none;}
header{padding:28px 20px 10px;max-width:1100px;margin:0 auto;}
h1{font-size:28px;margin:0 0 6px;}
.subtitle{color:var(--muted);margin:0 0 14px;}
main{max-width:1100px;margin:0 auto;padding:10px 20px 40px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.card{background:rgba(17,26,51,.75);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.25);}
.card:hover{border-color:rgba(110,168,254,.55);transform:translateY(-1px);transition:.15s ease;}
.card h2{font-size:18px;margin:0 0 8px;}
.card p{margin:0;color:var(--muted);line-height:1.4;}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0;}
input[type="search"], select{background:#0f1630;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;min-width:240px;outline:none;}
input[type="search"]:focus, select:focus{border-color:rgba(110,168,254,.7);}
...tablewrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:rgba(17,26,51,.55);}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:820px;}
th,td{padding:10px 12px;border-bottom:1px solid rgba(34,48,87,.6);vertical-align:top;}
th{position:sticky;top:0;background:#0f1630;text-align:left;font-weight:650;cursor:pointer;user-select:none;}
tr:hover td{background:rgba(110,168,254,.06);}
.badge{display:inline-block;border:1px solid rgba(110,168,254,.55);color:var(--text);padding:2px 8px;border-radius:999px;font-size:12px;}
small{color:var(--muted);}
footer{max-width:1100px;margin:0 auto;padding:16px 20px 30px;color:var(--muted);}
pre{white-space:pre-wrap;background:rgba(15,22,48,.75);border:1px solid var(--border);padding:14px;border-radius:14px;line-height:1.45;color:var(--text);}
.accordion button{width:100%;text-align:left;background:rgba(17,26,51,.75);border:1px solid var(--border);padding:12px 14px;border-radius:14px;color:var(--text);font-size:15px;display:flex;justify-content:space-between;gap:10px;align-items:center;}
.accordion button:hover{border-color:rgba(110,168,254,.55);}
.accordion .panel{display:none;margin:10px 0 14px;}
.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px;margin-top:6px;}
.breadcrumb a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;}

.errorbox{border:1px solid #e5e7eb;border-radius:16px;padding:14px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.06)}


/* v6 layout fixes */
body{font-size:14px;line-height:1.5;}
h1{font-size:34px;}
.controls input[type="search"], .controls select{font-size:13px;padding:10px 12px;}
...tablewrap{border-radius:16px;}
table{min-width:1100px;}
th,td{padding:10px 12px;font-size:12px;line-height:1.4;}
th{white-space:nowrap;}
td{white-space:nowrap;}
/* allow wrapping for long text columns */
td:nth-child(4){white-space:normal;min-width:240px;}
td:nth-child(6){white-space:normal;word-break:break-all;min-width:420px;}
/* keep id columns wide enough */
th:nth-child(1),th:nth-child(2),td:nth-child(1),td:nth-child(2){min-width:90px;}





/* URL column: show domain, keep header readable */
#dataTable th:nth-child(5),
#dataTable td:nth-child(5){
  white-space: nowrap;
  min-width: 180px;
  max-width: 320px;
}
#dataTable td:nth-child(5) a{
  display:inline-block;
  max-width: 320px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Table cells for JS-built tables */
.data-table th, .data-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.data-table th{white-space:nowrap;}


/* URL cells (auto-link): show domain neatly */
.data-table td.url a{display:inline-block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}


/* Clickable row hint (VPN/GW) */
tr.clickable-row{cursor:pointer;}
tr.clickable-row td{transition:background .15s ease;}
tr.clickable-row:hover td{background:rgba(98,200,255,.10);}
tr.clickable-row td.component-link{font-weight:700;text-decoration:underline;}
tr.clickable-row td.component-link .badge,
tr.clickable-row td.component-link a.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  padding:2px 8px;
  border:1px solid rgba(120,170,255,.55);
  border-radius:999px;
  font-size:12px;
  opacity:.75;
}
tr.clickable-row:hover td.component-link .badge{opacity:1;}

/* Equipment table: wrap long text columns */
.equipment-table td{white-space: normal; overflow-wrap:anywhere; word-break: break-word; line-height:1.35;}
/* Keep these columns compact */
.equipment-table th:nth-child(1), .equipment-table td:nth-child(1),
.equipment-table th:nth-child(2), .equipment-table td:nth-child(2){
  white-space: nowrap;
}

/* Collapsible long text cells (equipment.html) */
td.collapsible{max-width: 420px;}
td.collapsible .preview{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.35;
}
td.collapsible .hint{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;font-size:12px;opacity:.75;
}
td.collapsible .hint .dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(120,170,255,.8);
}
.floating-popover{
  position:fixed;z-index:9999;
  max-width:min(720px, calc(100vw - 40px));
  max-height:min(70vh, calc(100vh - 80px));
  overflow:auto;
  padding:12px 14px;
  border:1px solid var(--border);
  background: rgba(17,26,51,.96);
  color: var(--text);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  display:none;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.floating-popover .title{font-weight:700;margin-bottom:8px;}
.floating-popover .close{
  float:right;cursor:pointer;font-size:12px;opacity:.8;
  padding:2px 8px;border:1px solid var(--border);border-radius:999px;
}
.floating-popover .close:hover{opacity:1;}

/* Component name link */
a.componentAnchor{color:var(--text); text-decoration:underline;}
a.componentAnchor:hover{text-decoration:underline;}


textarea.memo{width:100%;box-sizing:border-box;min-height:110px;resize:vertical;}
.data-table ol{margin:0;padding-left:18px;}
.data-table td{vertical-align:top;}


/* status dropdown coloring (same as Infra_WideImpact_20251220.html) */
.status-select { font-size:12px; padding:2px 6px; border-radius:6px; border:1px solid #ccc; }
.status-未着手 { background:#e5e7eb !important; }
.status-対応中 { background:#fde68a !important; }
.status-完了   { background:#bbf7d0 !important; }

/* ensure status text is visible */
.status-select,
.status-select option {
  color: #111827; /* dark text */
}