/* Data tools (data-tools.php). Loaded after pdf-tools.css (hero, fields, drop zone) and
   code-tools.css (tab strip, pill radios, mini buttons); this file adds the tool layout,
   code/output areas, the table preview, the mock-data column builder and the ER canvas. */
.dt-hero{background:linear-gradient(120deg,#071f3d 0%,#123c6a 55%,#4a2a8a 150%)}
.dt-hero:before{content:"SQL"}
.dt-hero h1 em{color:#c9b8ff}
.dt-hero .pdft-hero-summary>span,.dt-hero .pdft-hero-badges .icon{color:#c9b8ff}
.dt-hero .pdft-hero-summary i{background:#c9b8ff}
.dt-app{padding-top:48px}
.dt-tabs{grid-template-columns:repeat(4,1fr)}
.dt-layout{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:24px;align-items:start}
.dt-layout-even{grid-template-columns:1fr 1fr}
.dt-controls{display:grid;gap:18px}
.dt-main{min-width:0}
.dt-card{background:#fff;border:1px solid #dde4ea;border-radius:14px;box-shadow:0 1px 2px rgba(7,20,42,.07),0 12px 35px rgba(13,35,58,.06);padding:22px;min-width:0}
.dt-card>h2{margin:0 0 14px;font-size:1.02rem;color:#102c4b}
.dt-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dt-head h2{font-size:1.05rem;color:#102c4b;margin:3px 0 0}
.dt-head h3{font-size:.92rem;color:#102c4b;margin:3px 0 0}
.dt-hint{font-size:.74rem;color:#728294}
.dt-mt{margin-top:14px}
.dt-drop{padding:22px 18px}
.dt-drop strong{font-size:.95rem}
.dt-drop.has-file{border-style:solid;border-color:#3f9a80;background:#effaf6}
.dt-card .pdft-privacy{margin:12px 0 0;font-size:.74rem}
.dt-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dt-fields .pdft-field{min-width:0}
.dt-fields .pdft-field[hidden]{display:none!important}
.dt-fields input[type=text],.dt-fields input[type=number],.dt-fields select,.dt-card textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:.9rem;color:var(--ink);background:#fff}
.dt-fields input:focus,.dt-fields select:focus,.dt-card textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,176,.15)}
.dt-checkbox{display:flex;align-items:center;gap:10px;min-height:42px;border:1px solid var(--line);border-radius:8px;padding:5px 10px;background:#fff}
.dt-checkbox input{width:18px;height:18px;accent-color:#0b3155}
.dt-checkbox em{font-style:normal;font-size:.82rem;color:#314a63}
.dt-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.dt-inline .ct-mini-btn{padding:8px 12px;font-size:.76rem}
.dt-head .dt-inline{margin-top:0}
.dt-count{margin-left:auto;color:#183a5a;font-size:.76rem;font-weight:700}
.dt-inline-btn{justify-content:center;min-height:42px;width:100%}
.dt-types{gap:6px}
.dt-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.dt-actions-wrap{grid-template-columns:1fr 1fr 1fr}
.dt-actions-wrap .button-primary{grid-column:1/-1}
.dt-actions .button{justify-content:center;border-radius:4px;padding:11px 12px;font-size:.78rem}
.dt-actions .dt-full{grid-column:1/-1}
.dt-secondary{background:#fff;color:#163d5d;border:1px solid #bfcbd4}
.dt-secondary:hover:not(:disabled){border-color:#457897;background:#eef5f8}
.dt-actions button:disabled{opacity:.45;cursor:not-allowed}
.dt-status{min-height:22px;margin:10px 0 0;font-size:.75rem;color:#456276;white-space:pre-wrap}
.dt-status.is-error{color:#a43c3c}
.dt-card textarea{resize:vertical;line-height:1.5}
.dt-code,.dt-output{font-family:ui-monospace,Cascadia Mono,Consolas,"IBM Plex Mono",monospace;font-size:.8rem!important;line-height:1.55;tab-size:2;white-space:pre;overflow:auto}
.dt-output{background:#f7f9fb!important;color:#1c2f42}
.dt-table-wrap{overflow:auto;max-height:420px;border:1px solid #e1e8ee;border-radius:8px}
.dt-table{width:100%;border-collapse:collapse;font-size:.78rem;white-space:nowrap}
.dt-table th,.dt-table td{padding:7px 10px;border-bottom:1px solid #edf1f4;text-align:left;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.dt-table th{position:sticky;top:0;background:#0b3155;color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.03em}
.dt-table tbody tr:nth-child(even){background:#f7f9fb}
.dt-table .dt-more{color:#728294;font-style:italic;text-align:center}
.dt-table:empty{display:none}
.dt-table:empty+*{display:none}
.dt-help{margin-top:10px;font-size:.78rem;color:#456276}
.dt-help summary{cursor:pointer;font-weight:700;color:#183a5a}
.dt-help pre{margin:8px 0 0;padding:10px 12px;background:#f4f7fa;border-radius:4px;font-size:.72rem;line-height:1.55;white-space:pre-wrap;color:#2b4257}
.dt-cols{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dt-col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr) auto;gap:6px;align-items:center;border:1px solid #e1e8ee;border-radius:8px;padding:6px;background:#f8fafb}
.dt-col input,.dt-col select{width:100%;min-width:0;border:1px solid var(--line);border-radius:4px;padding:7px 8px;font-size:.78rem;color:var(--ink);background:#fff}
.dt-col-opt[hidden]{display:block!important;visibility:hidden}
.dt-col-actions{display:flex;gap:2px}
.dt-icon-btn{display:grid;place-items:center;width:28px;height:28px;border:1px solid #d5dee6;border-radius:4px;background:#fff;color:#183a5a;cursor:pointer;transition:.15s;padding:0}
.dt-icon-btn:hover{border-color:#457897;background:#eef5f8}
.dt-icon-btn .icon{width:14px;height:14px}
.dt-er-shell{position:relative;background:repeating-conic-gradient(#e6ebef 0 25%,#f3f6f8 0 50%) 0 0/24px 24px;border-radius:14px;overflow:hidden;box-shadow:inset 0 1px 4px rgba(13,31,49,.12);min-height:320px;max-height:78vh;aspect-ratio:16/9;display:grid}
.dt-er-shell svg{width:100%;height:100%;display:block;touch-action:none;user-select:none}
.dt-er-table:active{cursor:grabbing}
@media(max-width:1000px){.dt-tabs{grid-template-columns:1fr 1fr}.dt-layout,.dt-layout-even{grid-template-columns:1fr}.dt-controls{grid-template-columns:1fr 1fr}.dt-controls .dt-card:first-child{grid-column:1/-1}}
@media(max-width:680px){.dt-app{padding-top:28px}.dt-tabs{grid-template-columns:1fr}.dt-controls{grid-template-columns:1fr}.dt-controls .dt-card:first-child{grid-column:auto}.dt-card{padding:16px;border-radius:14px}.dt-fields,.dt-actions,.dt-actions-wrap{grid-template-columns:1fr}.dt-col{grid-template-columns:1fr 1fr}.dt-col-actions{grid-column:1/-1;justify-content:flex-end}.dt-er-shell{aspect-ratio:auto;height:60vh}}

/* ---- dark mode ---- */
[data-theme="dark"] .dt-card,[data-theme="dark"] .dt-checkbox,[data-theme="dark"] .dt-fields input[type=text],[data-theme="dark"] .dt-fields input[type=number],[data-theme="dark"] .dt-fields select,[data-theme="dark"] .dt-card textarea,[data-theme="dark"] .dt-secondary,[data-theme="dark"] .dt-icon-btn,[data-theme="dark"] .dt-col input,[data-theme="dark"] .dt-col select{background:var(--dm-surface);border-color:var(--dm-border);color:var(--dm-text)}
[data-theme="dark"] .dt-output{background:var(--dm-bg)!important;color:var(--dm-text)}
[data-theme="dark"] .dt-card>h2,[data-theme="dark"] .dt-head h2,[data-theme="dark"] .dt-head h3,[data-theme="dark"] .dt-checkbox em,[data-theme="dark"] .dt-help summary,[data-theme="dark"] .dt-count{color:var(--dm-text)}
[data-theme="dark"] .dt-col,[data-theme="dark"] .dt-help pre{background:var(--dm-surface-2);border-color:var(--dm-border);color:var(--dm-text-muted)}
[data-theme="dark"] .dt-status,[data-theme="dark"] .dt-hint,[data-theme="dark"] .dt-help,[data-theme="dark"] .dt-table .dt-more{color:var(--dm-text-muted)}
[data-theme="dark"] .dt-table-wrap{border-color:var(--dm-border)}
[data-theme="dark"] .dt-table td{border-color:var(--dm-border);color:var(--dm-text)}
[data-theme="dark"] .dt-table tbody tr:nth-child(even){background:var(--dm-surface-2)}
[data-theme="dark"] .dt-er-shell{background:repeating-conic-gradient(var(--dm-bg) 0 25%,var(--dm-surface-2) 0 50%) 0 0/24px 24px}
[data-theme="dark"] .dt-drop.has-file{background:rgba(66,170,135,.12);border-color:#3f9a80}
