/* toolsfy — Spreadsheet & Data Tools (shared styles). Builds on bizdocs.css (.bd form styles). */
#tool-container .dt { gap: 16px; }
#tool-container .dt-mono, #tool-container .dt textarea.dt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .88rem; }
#tool-container .dt-drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 18px; background: #f8fafc; cursor: pointer; color: #334155; position: relative; }
#tool-container .dt-drop i { font-size: 1.5rem; color: #2563eb; }
#tool-container .dt-drop.is-over, #tool-container .dt-drop:hover { border-color: #2563eb; background: #eff6ff; }
#tool-container .dt-drop:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
#tool-container .dt-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
#tool-container .dt-paste { margin-top: 8px; }
#tool-container .dt-paste summary { cursor: pointer; font-weight: 600; color: #1d4ed8; font-size: .9rem; padding: 4px 0; }
#tool-container .dt-paste textarea { margin: 6px 0 8px; min-height: 120px; }
#tool-container .dt-input { display: flex; flex-direction: column; gap: 4px; }
#tool-container .dt-fileinfo { margin: 0; font-size: .88rem; color: #0f172a; font-weight: 600; overflow-wrap: anywhere; }
#tool-container .dt-tablewrap { position: relative; overflow: auto; max-width: 100%; max-height: 520px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
#tool-container .dt-tablewrap:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
#tool-container .dt-table { border-collapse: separate; border-spacing: 0; font-size: .84rem; width: max-content; min-width: 100%; }
#tool-container .dt-table th, #tool-container .dt-table td { border-bottom: 1px solid #e2e8f0; border-right: 1px solid #f1f5f9; padding: 5px 8px; text-align: left; vertical-align: top; white-space: pre-wrap; max-width: 320px; overflow-wrap: anywhere; color: #0f172a; }
#tool-container .dt-table thead th { position: sticky; top: 0; background: #f1f5f9; z-index: 2; font-weight: 700; color: #1e293b; }
#tool-container .dt-table .dt-rn { position: sticky; left: 0; background: #f8fafc; color: #64748b; font-weight: 500; z-index: 1; text-align: right; font-variant-numeric: tabular-nums; }
#tool-container .dt-table thead .dt-rn { z-index: 3; }
#tool-container .dt-table .dt-empty::before { content: '∅'; color: #cbd5e1; }
#tool-container .dt-table .dt-none { text-align: center; color: #64748b; padding: 16px; }
#tool-container .dt-table td.is-changed { background: #fef9c3; }
#tool-container .dt-table td.is-flag { background: #fee2e2; }
#tool-container .dt-table tr.is-removed td { background: #fef2f2; text-decoration: line-through; text-decoration-color: #fca5a5; }
#tool-container .dt-table tr.is-added td { background: #ecfdf5; }
#tool-container .dt-table th.is-key { background: #dbeafe; }
#tool-container .dt-table .dt-cin, #tool-container .dt-table .dt-hin { width: 100%; min-width: 90px; border: 1px solid transparent; background: transparent; padding: 3px 4px; font: inherit; color: inherit; border-radius: 4px; resize: vertical; min-height: 0; line-height: 1.35; }
#tool-container .dt-table .dt-hin { font-weight: 700; }
#tool-container .dt-table .dt-cin:focus, #tool-container .dt-table .dt-hin:focus { border-color: #2563eb; background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(37, 99, 235, .2); }
#tool-container .dt-table .dt-rt { white-space: nowrap; }
#tool-container .dt-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: #475569; margin: 6px 0 0; }
#tool-container .dt-pgin { width: 70px !important; padding: 4px 6px !important; display: inline-block; }
#tool-container .dt-info { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; border-radius: 8px; padding: 9px 12px; font-size: .86rem; }
#tool-container .dt-info p { margin: 0; } #tool-container .dt-info ul { margin: 4px 0 0; padding-left: 20px; }
#tool-container .dt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0; }
#tool-container .dt-stats > div { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; }
#tool-container .dt-stats dt { font-size: .78rem; color: #64748b; }
#tool-container .dt-stats dd { margin: 2px 0 0; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#tool-container .dt-stats .is-key { border-color: #93c5fd; background: #eff6ff; }
#tool-container .dt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#tool-container .dt-actions button { padding: 9px 14px; font-size: .9rem; }
#tool-container .dt-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #e2e8f0; }
#tool-container .bd button.dt-tab:not(#bd-n) { background: transparent; color: #334155; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 8px 12px; font-size: .88rem; transform: none; }
#tool-container .bd button.dt-tab[aria-selected="true"]:not(#bd-n) { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
#tool-container .dt-collist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#tool-container .dt-colitem { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; border: 1px solid #e2e8f0; border-radius: 10px; padding: 6px 8px; background: #f8fafc; }
#tool-container .dt-colitem.is-off { opacity: .55; }
#tool-container .dt-colitem .dt-src { font-size: .86rem; overflow-wrap: anywhere; }
#tool-container .dt-colitem input[type="text"] { padding: 6px 8px; }
#tool-container .dt-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 0; padding: 0; margin: 0; }
#tool-container .dt-checks legend { font-size: .86rem; font-weight: 600; color: #334155; padding: 0; margin-bottom: 4px; }
#tool-container .dt-checks label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; font-size: .88rem; margin: 0; }
#tool-container .dt-checks input { margin: 0; accent-color: #2563eb; width: 16px; height: 16px; }
#tool-container .dt-filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: f; }
#tool-container .dt-filelist li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; background: #f8fafc; }
#tool-container .dt-filelist .dt-fname { font-weight: 600; overflow-wrap: anywhere; min-width: 0; flex: 1 1 200px; }
#tool-container .dt-filelist .dt-fname small { font-weight: 400; color: #64748b; display: block; }
#tool-container .dt-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
#tool-container .dt-parts li { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px dashed #e2e8f0; padding: 4px 2px; }
#tool-container .dt-parts code { overflow-wrap: anywhere; }
#tool-container .dt-ops { margin: 0; padding-left: 22px; font-size: .88rem; color: #334155; display: flex; flex-direction: column; gap: 3px; }
#tool-container .dt-colgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 10px; }
#tool-container .dt-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 10px; }
#tool-container .dt-typegrid .bd-f label { overflow-wrap: anywhere; }
#tool-container .dt-diffcol { font-size: .84rem; }
:root[data-theme="dark"] #tool-container .dt-drop { background: var(--tf-surface-2); border-color: var(--tf-border-strong); color: var(--tf-text); }
:root[data-theme="dark"] #tool-container .dt-tablewrap { background: var(--tf-surface); border-color: var(--tf-border); }
:root[data-theme="dark"] #tool-container .dt-table th, :root[data-theme="dark"] #tool-container .dt-table td { color: var(--tf-text); border-color: var(--tf-border); }
:root[data-theme="dark"] #tool-container .dt-table thead th, :root[data-theme="dark"] #tool-container .dt-table .dt-rn { background: var(--tf-surface-2); color: var(--tf-text-soft); }
:root[data-theme="dark"] #tool-container .dt-table td.is-changed { background: rgba(234, 179, 8, .2); }
:root[data-theme="dark"] #tool-container .dt-table td.is-flag, :root[data-theme="dark"] #tool-container .dt-table tr.is-removed td { background: rgba(239, 68, 68, .18); }
:root[data-theme="dark"] #tool-container .dt-table tr.is-added td { background: rgba(16, 185, 129, .15); }
:root[data-theme="dark"] #tool-container .dt-table th.is-key { background: rgba(37, 99, 235, .25); }
:root[data-theme="dark"] #tool-container .dt-table .dt-cin:focus, :root[data-theme="dark"] #tool-container .dt-table .dt-hin:focus { background: var(--tf-surface-2); }
:root[data-theme="dark"] #tool-container .dt-info { background: rgba(37, 99, 235, .14); color: #bfdbfe; border-color: rgba(96, 165, 250, .35); }
:root[data-theme="dark"] #tool-container .dt-stats > div, :root[data-theme="dark"] #tool-container .dt-colitem, :root[data-theme="dark"] #tool-container .dt-filelist li { background: var(--tf-surface-2); border-color: var(--tf-border); }
:root[data-theme="dark"] #tool-container .dt-stats dd, :root[data-theme="dark"] #tool-container .dt-fileinfo { color: var(--tf-text); }
:root[data-theme="dark"] #tool-container .dt-pager, :root[data-theme="dark"] #tool-container .dt-ops, :root[data-theme="dark"] #tool-container .dt-checks legend { color: var(--tf-text-soft); }
:root[data-theme="dark"] #tool-container .bd button.dt-tab[aria-selected="true"]:not(#bd-n) { background: rgba(37, 99, 235, .2); color: #bfdbfe; }
@media (max-width: 560px) {
  #tool-container .dt-colitem { grid-template-columns: auto minmax(0, 1fr); }
  #tool-container .dt-colitem .bd-itools, #tool-container .dt-colitem input[type="text"] { grid-column: 1 / -1; }
  #tool-container .dt-tablewrap { max-height: 420px; }
}
#tool-container .dt-pre { max-height: 420px; overflow: auto; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; margin: 0; white-space: pre; font-size: .82rem; color: #0f172a; }
#tool-container .dt-pre:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
:root[data-theme="dark"] #tool-container .dt-pre { background: var(--tf-surface-2); border-color: var(--tf-border); color: var(--tf-text); }