/* bond-centrality.css - restored clean stylesheet
   - consistent system UI font in cards and SVG
   - reduced page gutters (wider main container)
   - sketcher occupies top row; molecule + table sit side-by-side underneath
   - preserves JS hooks: #sketcher, #smiles, #read-sketcher, #read-smiles, #molecule, #centralities-table, .selectable, .hovered, .selected
*/

:root{
    --bg: #f7f8fb;
    --card: #ffffff;
    --muted: #6b7280;
    --accent: #0b74de;
    --primary: #0b74de;
    --surface-border: #e6e9ee;
    --success: #06b6a4;
    --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui;
}

/* pointer-events default for ChemDoodle SVGs */
svg, svg * { pointer-events: none; }
svg { flex: 1; }

/* make certain SVG elements interactive again */
path.selectable { pointer-events: all; cursor: pointer; }
path.selectable.hovered { fill: green !important; }
td.selectable.hovered { background-color: green !important; }
path.selected { fill: cyan !important; fill-opacity: 1; }
td.selected { background-color: cyan !important; }

body {
    font-family: var(--ui-font);
    background: var(--bg);
    color: #111827;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* main {
    max-width: 1200px; 
    margin: 12px auto;
    padding: 12px 14px;
} */

.page-header { margin-bottom: 14px; }
.page-header h1, h2 { margin: 0 0 6px 0; font-size: 1.35rem; }
.page-header .subtitle { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Top area: single column so sketcher is on its own row */
.controls-and-sketch { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }

.sketcher-card, .molecule-card, .table-card { background: var(--card); border: 1px solid var(--surface-border); border-radius: 10px; padding: 12px; box-shadow: 0 6px 18px rgba(16,24,40,0.04); }

.sketcher-card canvas { display: block; height: auto; max-width: 820px; margin: 0 auto; border-radius: 6px; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); border: 1px solid var(--surface-border); }

/* Two-column layout under the sketcher: molecule | table */
.below-sketch { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-top: 14px; }
@media (max-width: 900px) { .below-sketch { grid-template-columns: 1fr; } }

.input-row { display:flex; gap:10px; margin-top:10px; align-items:center; }
.input-row input[type="text"] { flex:1; padding:8px 10px; border-radius:8px; border:1px solid var(--surface-border); outline: none; }
.input-row input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(11,116,222,0.08); border-color: var(--primary); }
.buttons { display:flex; gap:8px; }
button { padding:8px 12px; border-radius:8px; background: transparent; border:1px solid var(--surface-border); cursor:pointer; }
button.primary { background: var(--primary); color: #fff; border-color: rgba(11,116,222,0.9); }
button:hover { filter:brightness(0.98); }

.card-title, th { margin:0 0 8px 0; font-size:1rem; }
.molecule-viewport { min-height: 220px; display:flex; align-items:center; justify-content:center; }

.table-card { padding: 8px; box-shadow: 0 6px 18px rgba(16,24,40,0.03); height: 100%; font-family: var(--ui-font); }
.molecule-card { font-family: var(--ui-font); }

/* constrain the table: fixed layout and scrollable tbody */
.table-wrap { max-height: 300px; overflow: auto; border-radius: 6px; border:1px solid var(--surface-border); background:var(--card); }
#centralities-table { width:100%; table-layout: fixed; border-collapse: collapse; min-width:220px; }
#centralities-table thead th { text-align:left; padding:10px 12px; background:transparent; color:var(--muted); font-size:0.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#centralities-table tbody td { padding:8px 10px; border-top:1px solid var(--surface-border); color: #0f172a; }
#centralities-table tbody tr:nth-child(even) td { background:linear-gradient(90deg, rgba(0,0,0,0.01), rgba(0,0,0,0.01)); }

.feedback { color: var(--muted); margin-top:10px; }

/* interaction classes used by the JS */
td.selectable.hovered, td.selectable.hovered * { outline: 2px solid rgba(0,0,0,0.06); }
td.selected { box-shadow: inset 0 0 0 3px rgba(0,0,0,0.04); }
path.selectable.hovered { opacity:0.9; }
path.selected { stroke: #06b6a4 !important; stroke-width: 3px !important; }

/* Prevent layout from reflowing into multi-column top grid at very wide sizes */
@media (min-width: 1400px) { .controls-and-sketch { grid-template-columns: 1fr; } }

.wrapper {
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	padding-right: 30px;
	padding-left: 30px;
}