/* Database schema page (templates/Schema/index.php, webroot/js/schema.js) */
.sch {
    --blue: #3284BF; --navy: #536895; --ink: #1f2933; --muted: #6b7785; --line: #dfe6ee;
    --soft: #f5f8fb; --pick: #3284BF; --added: #9fb6cf; --fk: #4caf50; --implied: #d39c3f;
    font-family: 'Roboto', Arial, sans-serif; color: var(--ink);
    max-width: 1500px; margin: 14px auto 28px;
}
.sch-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px;
    border-bottom: 1px solid var(--line); margin-bottom: 0; }
.sch-header h1 { font-size: 26px; font-weight: 500; margin: 0; color: var(--navy); }
.sch-sub { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.sch-tabs { border-bottom: 0; }
.sch-tabs .nav-link { color: var(--navy); font-weight: 500; }
.sch-tabs .nav-link.active { color: var(--blue); border-color: var(--line) var(--line) #fff; }

.sch-pane { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: #fff;
    border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; min-height: 70vh; }
.sch-pane[hidden] { display: none; }
.sch-side { border-right: 1px solid var(--line); padding: 12px; background: var(--soft);
    display: flex; flex-direction: column; gap: 10px; max-height: 82vh; position: sticky; top: 0; }
.sch-main { padding: 18px 22px; min-width: 0; }
.sch-placeholder { color: var(--muted); padding: 40px 10px; text-align: center; }

/* table list */
.sch-list { overflow-y: auto; flex: 1 1 auto; margin: 0 -4px; padding: 0 4px; }
.sch-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
    margin: 12px 4px 4px; font-weight: 500; }
.sch-group:first-child { margin-top: 2px; }
.sch-item { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 5px;
    padding: 5px 8px; line-height: 1.25; cursor: pointer; }
.sch-item:hover { background: #e8eff6; }
.sch-item.active { background: var(--blue); color: #fff; }
.sch-item .n { font-weight: 500; font-size: 13.5px; }
.sch-item .d { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-item.active .d { color: #dbe9f5; }
.sch-item .hit { font-size: 11px; color: var(--implied); }
.sch-item.active .hit { color: #fff3d6; }

/* table detail */
.sch-detail h2 { font-size: 24px; font-weight: 500; margin: 0; }
.sch-detail .desc { color: #3e4c59; margin: 4px 0 10px; font-size: 15px; }
.sch-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.sch-badge { font-size: 12px; background: #eaf2f9; color: var(--navy); border-radius: 12px; padding: 2px 10px; }
.sch-detail h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    margin: 22px 0 8px; font-weight: 500; }
.sch-cols { font-size: 13px; }
.sch-cols thead th { background: var(--navy); color: #fff; font-weight: 500; position: sticky; top: 0; border-color: var(--navy); }
.sch-cols td { vertical-align: top; }
.sch-cols td.cn { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px; white-space: nowrap; font-weight: 500; }
.sch-cols td.ct { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12px; color: #52606d; white-space: nowrap; }
.sch-cols tr.pk td.cn::before { content: '\1F511'; font-size: 11px; margin-right: 4px; }
.sch-k { display: inline-block; font-size: 11px; border-radius: 4px; padding: 0 6px; margin: 1px 3px 1px 0; white-space: nowrap; }
.sch-k-pk { background: #fdf0c4; color: #7a5b00; }
.sch-k-fk { background: #e2ecf7; color: var(--fk); cursor: pointer; }
.sch-k-imp { background: #f8ecdf; color: var(--implied); cursor: pointer; border: 1px dashed #d9b48a; }
.sch-k-null { color: var(--muted); }
.sch-links { display: flex; flex-wrap: wrap; gap: 6px; }
.sch-chip { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 3px 11px; font-size: 13px; cursor: pointer; }
.sch-chip:hover { border-color: var(--blue); color: var(--blue); }
.sch-chip small { color: var(--muted); font-family: Menlo, Consolas, monospace; }
.sch-chip.imp { border-style: dashed; }
.sch-actions { margin-left: auto; }

/* "How you get here" breadcrumb and "Where it connects" neighborhood */
.sch-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sch-crumb { border: 1px solid var(--line); background: #fff; border-radius: 5px; padding: 3px 10px; font-weight: 500; font-size: 13.5px; cursor: pointer; }
.sch-crumb:hover { border-color: var(--blue); color: var(--blue); }
.sch-crumb.here { background: var(--blue); border-color: var(--blue); color: #fff; cursor: default; }
.sch-step { font-family: Menlo, Consolas, monospace; font-size: 11.5px; color: #2e7d32; white-space: nowrap; }
.sch-step.imp { color: var(--implied); }
.sch-h3-note { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); margin-left: 8px; font-weight: 400; }
.sch-rels { font-size: 13.5px; }
.sch-rels thead th { background: #f1f4f8; color: var(--navy); font-weight: 600; border-bottom: 2px solid var(--line); }
.sch-rels td { vertical-align: middle; }
.sch-rel { display: inline-block; min-width: 58px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; border-radius: 4px; padding: 2px 8px; }
.sch-rel-parent { background: #e8f1fb; color: #1d5f99; border: 1px solid #b9d3ec; }
.sch-rel-child { background: #e9f6ea; color: #2e7d32; border: 1px solid #b7dcb9; }
.sch-rel-name { border: 0; background: none; padding: 0; font-weight: 700; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.sch-rel-name:hover { color: var(--blue); text-decoration: underline; }
.sch-rel-join { font-family: Menlo, Consolas, monospace; font-size: 12.5px; white-space: nowrap; color: #52606d; }
.sch-rel-join b { color: var(--ink); }
.sch-rels tbody tr:has(.sch-rel-child):first-of-type td,
.sch-rels tr.sch-split td { border-top: 2px solid var(--line); }

/* relationships */
.sch-presets .form-label { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.sch-pick { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 5px; font-size: 13px; cursor: pointer; margin: 0; }
.sch-pick:hover { background: #e8eff6; }
.sch-pick input { margin: 0; }
.sch-pick .d { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-pick.added { color: #5f7a96; }
.sch-pick.added::after { content: 'added'; font-size: 10px; background: #e4ebf2; border-radius: 8px; padding: 0 6px; margin-left: auto; }
.sch-options { border-top: 1px solid var(--line); padding-top: 10px; font-size: 13px; }
.sch-opt { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; cursor: pointer; font-weight: 400; }
/* own checkbox styling: the site layout also loads Bootstrap 4, whose .form-check-input is absolutely positioned */
.sch-side input[type=checkbox] { position: static !important; margin: 0 !important; width: 15px; height: 15px; flex: 0 0 15px; accent-color: var(--blue); }
.sch-pick span:nth-child(2) { font-weight: 500; }
.sch-canvas-wrap { padding: 0; display: flex; flex-direction: column; }
.sch-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.sch-info { color: var(--muted); margin-right: auto; }
.sch-legend { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.sch-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-left: 6px; }
.sch-key-picked { background: var(--pick); }
.sch-key-added { background: var(--added); }
.sch-canvas { flex: 1 1 auto; min-height: 66vh; position: relative; overflow: hidden; cursor: grab;
    background: #fff; }
.sch-canvas.dragging { cursor: grabbing; }
.sch-canvas svg.sch-svg { width: 100%; height: 100%; position: absolute; inset: 0; }

/* diagram drawing (also inlined on SVG export) */
.sch-edge-fk { stroke: var(--fk, #4caf50); stroke-width: 2; fill: none; }
.sch-edge-implied { stroke: var(--implied, #d39c3f); stroke-width: 2; fill: none; stroke-dasharray: 6 4; }
.sch-edge-hit { stroke: transparent; stroke-width: 10; fill: none; cursor: pointer; }
g.sch-node { cursor: pointer; }
g.sch-node:hover .sch-box { filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.sch-hl .sch-edge-fk, .sch-hl .sch-edge-implied { stroke-width: 3.2; }
.sch-opt-select { display: block; margin-top: 4px; }
.sch-opt-select select { margin-top: 3px; }
.sch-dim { opacity: .25; }
.sch-tip { position: absolute; pointer-events: none; background: #1f2933; color: #fff; font-size: 12px; padding: 5px 8px;
    border-radius: 4px; white-space: nowrap; z-index: 5; display: none; }

@media (max-width: 900px) {
    .sch-pane { grid-template-columns: 1fr; }
    .sch-side { position: static; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); }
}