/* Free tools (/tools/*), plain CSS loaded only on tool pages. Theme colors come from the site's CSS variables.
   The invoice sheet is paper-white in both themes and prints on its own (see @media print). */

/* Drop zones */
[data-drop] { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px dashed rgb(var(--line) / calc(var(--line-a) * 2.5)); border-radius: 1.5rem; padding: 2rem 1.25rem; text-align: center;
  cursor: pointer; transition: border-color .2s, background-color .2s; }
[data-drop]:hover, [data-drop].is-drag, [data-drop]:focus-within { border-color: rgb(var(--accent)); background: rgb(var(--accent) / .06); }
[data-drop] input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* The hidden attribute must win over display utilities like .flex or .contents inside the tools. */
[data-tool] [hidden] { display: none !important; }

/* Hide JS-only controls until the tool script is ready (pages stay readable without JS). */
[data-tool-loading] [data-js-only] { display: none !important; }

/* Segmented controls */
.seg { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: 999px; border: 1px solid rgb(var(--line) / var(--line-a)); }
.seg button { border-radius: 999px; padding: .5rem 1rem; font-size: .875rem; color: rgb(var(--muted)); transition: background-color .2s, color .2s; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: rgb(var(--accent)); color: rgb(var(--accent-fg)); }

/* Photo preview: a checkerboard behind the crop so empty space is visible */
.photo-stage { background: repeating-conic-gradient(rgb(var(--fg) / .06) 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 1rem; }
.photo-stage canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; touch-action: none; cursor: grab; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .4); }
.photo-stage canvas:active { cursor: grabbing; }
.photo-stage canvas:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 3px; }

/* Converter text areas */
.np-text { font-family: "Noto Sans Devanagari", "Mangal", "Kokila", system-ui, sans-serif; line-height: 1.7; }

/* ------------------------------------------------------------ PDF tools: page previews */
.pdf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: .75rem; }
.pdf-grid-lg { grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); }
.pdf-scroll { max-height: 34rem; overflow-y: auto; overscroll-behavior: contain; padding: .25rem; margin: -.25rem; }
.pdf-card { position: relative; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.pdf-page { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border-radius: .85rem;
  background: rgb(var(--fg) / .05); border: 1px solid rgb(var(--line) / var(--line-a)); overflow: hidden; cursor: zoom-in;
  transition: border-color .2s, background-color .2s, box-shadow .2s; }
button.pdf-page:hover, .pdf-page:focus-visible { border-color: rgb(var(--accent)); outline: none; }
.pdf-page > img { max-width: 86%; max-height: 86%; background: #fff; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .45); transition: transform .25s ease, opacity .2s; }
.pdf-page > img.is-side { max-width: 64%; max-height: 64%; }
.pdf-page > img:not([src]) { width: 60%; aspect-ratio: 1 / 1.414; background: rgb(var(--fg) / .1); box-shadow: none; animation: pdf-pulse 1s ease-in-out infinite alternate; }
@keyframes pdf-pulse { to { opacity: .4; } }
.pdf-badge { position: absolute; top: .4rem; left: .4rem; z-index: 1; padding: .05rem .45rem; border-radius: 999px; pointer-events: none;
  font: 600 .68rem/1.5 "Geist Mono", ui-monospace, monospace; background: rgb(var(--bg) / .85); color: rgb(var(--fg));
  border: 1px solid rgb(var(--line) / calc(var(--line-a) * 2)); }
.pdf-cap { font: .7rem/1.3 "Geist Mono", ui-monospace, monospace; color: rgb(var(--muted)); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-card.is-alt .pdf-page { background: rgb(var(--accent) / .09); }
.pdf-card.is-off .pdf-page > img { opacity: .35; }
.pdf-card.is-on .pdf-page { border-color: rgb(var(--accent)); box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
.pdf-card.is-on .pdf-badge { background: rgb(var(--accent)); color: rgb(var(--accent-fg)); border-color: transparent; }
.pdf-pick { border-radius: 999px; padding: .25rem .5rem; font: .72rem/1.3 "Geist Mono", ui-monospace, monospace; color: rgb(var(--muted));
  border: 1px solid rgb(var(--line) / calc(var(--line-a) * 2)); transition: background-color .2s, color .2s, border-color .2s; }
.pdf-pick:hover { color: rgb(var(--fg)); border-color: rgb(var(--accent)); }
.pdf-pick[aria-pressed="true"] { background: rgb(var(--accent)); color: rgb(var(--accent-fg)); border-color: transparent; }
.pdf-mini { flex: none; width: 2.25rem; height: 3rem; object-fit: contain; border-radius: .3rem; background: rgb(var(--fg) / .08); }
.pdf-mini[src] { background: #fff; }
[data-tool="pdf"] [draggable="true"] { cursor: grab; }
[data-tool="pdf"] .is-dragging { opacity: .4; }
[data-tool="pdf"] li.is-over { border-color: rgb(var(--accent)); }
[data-tool="pdf"] li.is-over .pdf-page { border: 2px dashed rgb(var(--accent)); }
/* Images → PDF: a white sheet with the image placed as it will be in the PDF */
.pdf-sheet { position: relative; max-width: 86%; max-height: 86%; background: #fff; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .45); }
.pdf-sheet img { position: absolute; max-width: none; object-fit: fill; }
/* Compress: before / after panes */
.pdf-cmp { height: 18rem; overflow: auto; border-radius: .75rem; background: #fff; border: 1px solid rgb(var(--line) / var(--line-a)); overscroll-behavior: contain; }
.pdf-cmp img { display: block; max-width: none; height: auto; }
/* Full-size page viewer */
.pdf-viewer { width: min(60rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border-radius: 1.25rem; overflow: hidden;
  background: rgb(var(--surface)); color: rgb(var(--fg)); border: 1px solid rgb(var(--line) / var(--line-a)); }
.pdf-viewer::backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(4px); }
.pdf-viewer-stage { display: grid; place-items: center; padding: 1rem; overflow: auto; max-height: calc(100dvh - 6rem); }
.pdf-viewer-stage img { max-width: 100%; max-height: calc(100dvh - 8.5rem); background: #fff; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .6); }
.pdf-viewer-stage img.is-side { max-width: calc(100dvh - 8.5rem); max-height: min(100%, calc(100vw - 4rem)); }
.pdf-viewer-stage img:not([src]) { width: 40%; aspect-ratio: 1 / 1.414; }
@media (prefers-reduced-motion: reduce) { .pdf-page > img:not([src]) { animation: none; } }

/* ------------------------------------------------------------ Invoice sheet */
.inv-sheet { --ia: #1d4ed8; background: #fff; color: #111; font: 10pt/1.45 Arial, "Liberation Sans", Helvetica, "Noto Sans Devanagari", sans-serif;
  padding: 36pt 34pt; border-radius: 6px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .45), 0 0 0 1px rgb(0 0 0 / .06);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; overflow-wrap: anywhere; }
.inv-sheet p { margin: 0; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16pt; padding-bottom: 14pt; border-bottom: 2pt solid var(--ia); }
.inv-logo { display: block; max-height: 46pt; max-width: 160pt; margin-bottom: 6pt; object-fit: contain; }
.inv-seller { font-size: 14pt; font-weight: 700; }
.inv-title { text-align: right; }
.inv-title h2 { margin: 0; font-size: 22pt; line-height: 1.1; font-weight: 700; color: var(--ia); text-transform: uppercase; letter-spacing: .6pt; }
.inv-title p { margin-top: 2pt; color: #444; font-weight: 600; }
.inv-meta { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16pt; margin: 16pt 0; }
.inv-k { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .6pt; color: #666; margin-bottom: 2pt !important; }
.inv-dates .inv-k { display: inline-block; min-width: 52pt; }
.inv-party { font-weight: 700; }
.inv-ph { color: #9a9a9a; }
.inv-table { width: 100%; border-collapse: collapse; margin-top: 4pt; }
.inv-table th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: .5pt; color: #fff; background: var(--ia); padding: 6pt; }
.inv-table td { padding: 6pt; border-bottom: .6pt solid #ddd; vertical-align: top; }
.inv-table td:first-child, .inv-table th:first-child { width: 18pt; color: #666; }
.inv-sheet .r { text-align: right; white-space: nowrap; }
.inv-bottom { display: flex; justify-content: space-between; gap: 20pt; margin-top: 12pt; align-items: flex-start; }
.inv-words { flex: 1; font-style: italic; color: #333; }
.inv-sum { border-collapse: collapse; min-width: 200pt; }
.inv-sum td { padding: 3pt 0 3pt 12pt; }
.inv-sum td:first-child { padding-left: 0; color: #444; }
.inv-total td { font-weight: 700; font-size: 11pt; border-top: 1pt solid #111; padding-top: 5pt; color: #111 !important; }
.inv-note { margin-top: 14pt; padding-top: 8pt; border-top: .6pt solid #ddd; color: #333; }
@media (max-width: 640px) {
  .inv-sheet { padding: 20pt 16pt; font-size: 9pt; }
  .inv-meta { grid-template-columns: 1fr; gap: 10pt; }
  .inv-bottom { flex-direction: column; }
  .inv-sum { min-width: 0; width: 100%; }
}

/* ------------------------------------------------------------ Print */
@media print {
  @page { margin: 12mm; }
  [data-tool] [data-print-hide], .tool-content { display: none !important; }
  /* Invoice: print the sheet only */
  .inv-print-host ~ *, main > :not(.inv-print-host):has(~ .inv-print-host) { display: none !important; }
  .inv-print-host [data-inv-ui] { display: none !important; }
  .inv-print-host { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .inv-print-host .inv-grid { display: block !important; }
  .inv-print-host .inv-preview { position: static !important; max-height: none !important; overflow: visible !important; }
  .inv-sheet { box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; font-size: 10pt !important; }
  .inv-sheet .inv-meta { grid-template-columns: 1fr 1fr auto !important; }
  .inv-sheet .inv-bottom { flex-direction: row !important; }
  .inv-sheet .inv-sum { min-width: 200pt !important; width: auto !important; }
  .inv-table tr { break-inside: avoid; }
}