/* Free tools (includes/templates/tool.php) */
.tool-card { background: #fff; border: 1px solid #E4E7EC; border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 20px 40px -28px rgba(16, 24, 40, 0.35); }
@media (min-width: 768px) { .tool-card { padding: 2rem; } }
.tool-note { text-align: center; font-size: 0.85rem; color: #667085; margin-top: 0.85rem; }
.tool-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .tool-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.tool-fields { display: grid; gap: 1rem; align-content: start; }
.tool-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
/* Fields side by side share rows for label, input and hint, so inputs line up even when one label wraps */
@supports (grid-template-rows: subgrid) {
    .tool-row { grid-template-rows: auto auto auto; row-gap: 0.35rem; column-gap: 1rem; }
    .tool-row > .tool-field { grid-row: span 3; grid-template-rows: subgrid; gap: 0.35rem; align-content: stretch; }
    .tool-row > .tool-field > label, .tool-row > .tool-field > .tool-label { align-self: end; }
}
.tool-field { display: grid; gap: 0.35rem; min-width: 0; align-content: start; }
.tool-field label, .tool-label { font-size: 0.85rem; font-weight: 600; color: #344054; }
.tool-field input, .tool-field select, .tool-field textarea { width: 100%; border: 1px solid #D0D5DD; border-radius: 0.6rem; padding: 0.65rem 0.8rem; font-size: 1rem; color: #101828; background: #fff; }
.tool-field input:not([type="checkbox"]), .tool-field select { height: 2.95rem; }
.tool-field input:focus, .tool-field select:focus, .tool-field textarea:focus { outline: 2px solid #80D1FA; border-color: #0096EE; }
.tool-hint { font-size: 0.8rem; color: #667085; }
.tool-seg { justify-self: start; display: inline-flex; border: 1px solid #D0D5DD; border-radius: 0.6rem; overflow: hidden; }
.tool-seg button { padding: 0.55rem 0.9rem; font-size: 0.9rem; font-weight: 600; color: #475467; background: #fff; }
.tool-seg button + button { border-left: 1px solid #D0D5DD; }
.tool-seg button.is-active { background: #0096EE; color: #fff; }
.tool-result { background: #F6F9FC; border: 1px solid #E4E7EC; border-radius: 1rem; padding: 1.25rem 1.5rem; align-self: start; }
.tool-result-main { font-family: Poppins, sans-serif; font-size: 2rem; font-weight: 700; color: #101828; line-height: 1.2; }
.tool-result-label { font-size: 0.85rem; color: #667085; margin-bottom: 0.25rem; }
.tool-lines { margin-top: 1rem; display: grid; gap: 0.5rem; }
.tool-line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; color: #475467; border-bottom: 1px dashed #E4E7EC; padding-bottom: 0.45rem; }
.tool-line b { color: #101828; font-weight: 600; white-space: nowrap; }
.tool-line.is-total { border-bottom: 0; font-weight: 600; color: #101828; }
.tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem 1.1rem; border-radius: 0.6rem; font-weight: 600; font-size: 0.95rem; background: #0096EE; color: #fff; }
.tool-btn:hover { background: #0078BE; }
.tool-btn--ghost { background: #fff; color: #0078BE; border: 1px solid #B3E3FC; }
.tool-btn--ghost:hover { background: #E6F5FE; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

/* Invoice generator */
.inv-items { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.inv-items th { text-align: left; font-size: 0.8rem; color: #475467; font-weight: 600; padding: 0.4rem; border-bottom: 1px solid #E4E7EC; }
.inv-items td { padding: 0.35rem; vertical-align: top; }
.inv-items input, .inv-items select { width: 100%; border: 1px solid #D0D5DD; border-radius: 0.5rem; padding: 0.45rem 0.5rem; font-size: 0.9rem; }
.inv-items .inv-del { color: #B42318; font-weight: 700; padding: 0.45rem; }
.inv-scroll { overflow-x: auto; }
/* The document preview, PDF and print styles live in js/tools/doc-export.js */
.tool-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; color: #344054; }
.tool-check input { margin-top: 0.2rem; width: 1rem; height: 1rem; flex: none; }
.tool-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tool-table th, .tool-table td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid #E4E7EC; }
.tool-table th { background: #F6F9FC; color: #101828; font-weight: 600; }
.tool-table tr:last-child td { border-bottom: 0; }
.tool-table .num { text-align: right; white-space: nowrap; }
.tool-table code { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: #101828; }
.code-output { display: flex; align-items: center; justify-content: center; min-height: 220px; background: #fff; border: 1px dashed #D0D5DD; border-radius: 0.75rem; padding: 1rem; }
.code-output svg, .code-output img, .code-output canvas { max-width: 100%; height: auto; }
.tool-error { color: #B42318; font-size: 0.9rem; }
.tool-spacer { height: 3rem; }
@media (min-width: 768px) { .tool-spacer { height: 4rem; } }

/* /tools hub */
.th-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.th-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border: 1px solid #D0D5DD; border-radius: 999px; background: #fff; font-size: 0.9rem; font-weight: 600; color: #344054; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.th-chip span { font-size: 0.75rem; font-weight: 600; color: #667085; background: #F2F4F7; border-radius: 999px; padding: 0.05rem 0.45rem; }
.th-chip:hover { border-color: #80D1FA; }
.th-chip.is-active { background: #101828; border-color: #101828; color: #fff; }
.th-chip.is-active span { background: rgba(255, 255, 255, 0.18); color: #fff; }
.th-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .th-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .th-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.th-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #EAECF0; border-radius: 1rem; padding: 1.4rem; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.th-card[hidden] { display: none; }
.th-card:hover { border-color: #B3E3FC; box-shadow: 0 14px 28px -18px rgba(0, 120, 190, 0.5); transform: translateY(-2px); }
.th-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.75rem; background: #E6F5FE; color: #0078BE; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.th-cat { position: absolute; top: 1.5rem; right: 1.4rem; font-size: 0.72rem; font-weight: 600; color: #667085; background: #F2F4F7; border-radius: 999px; padding: 0.2rem 0.6rem; }
.th-card h2 { font-family: Poppins, sans-serif; font-weight: 600; font-size: 1.1rem; line-height: 1.35; color: #101828; margin-bottom: 0.4rem; }
.th-card p { font-size: 0.93rem; line-height: 1.55; color: #475467; margin-bottom: 1rem; }