/* =============================================================================
   DRISHTI  |  drishti.css  —  small polish on top of Tailwind
   Powered by SaarthiFi Smart Solutions LLP

   Almost all styling is done with Tailwind classes directly in the templates.
   This file only holds the few things Tailwind cannot express neatly: scroll
   bars, print styles, and a couple of small animations.
   ========================================================================== */

/* ---- Smooth, thin scrollbars in the brand colours ---------------------- */
* { scrollbar-width: thin; scrollbar-color: #94A3B8 #F1F5F9; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #F1F5F9; }
*::-webkit-scrollbar-thumb { background: #94A3B8; border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: #0F172A; }

html { scroll-behavior: smooth; }

/* ---- Sticky table headers so column names stay visible while scrolling -- */
.sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ---- A gentle fade so new panels do not snap into view ------------------ */
.fade-in { animation: drishtiFadeIn 0.28s ease-out; }
@keyframes drishtiFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- The "working…" pulse used on sync and dispatch buttons ------------- */
.pulse-gold { animation: drishtiPulse 1.4s ease-in-out infinite; }
@keyframes drishtiPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5); }
  50%      { box-shadow: 0 0 0 12px rgba(217, 119, 6, 0); }
}

/* ---- Spinner used while the Tally Bridge is being contacted ------------- */
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: drishtiSpin 0.7s linear infinite;
  display: inline-block;
}
@keyframes drishtiSpin { to { transform: rotate(360deg); } }

/* ---- Confidence bar on the AI mapping screen ---------------------------- */
.confidence-track { background: #E2E8F0; border-radius: 999px; height: 5px; width: 56px; }
.confidence-fill  { height: 5px; border-radius: 999px; transition: width 0.3s ease; }

/* ---- Financial figures always read better in a tabular font ------------- */
.figure {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* =============================================================================
   PRINT / SAVE-AS-PDF
   The dashboard and the statements are meant to be exported as PDF straight
   from the browser (Ctrl+P -> Save as PDF). These rules make that come out
   looking like a proper report rather than a web page.
   ========================================================================== */
@media print {
  body { background: #FFFFFF !important; font-size: 10pt; }

  .print\:hidden, header nav, .no-print { display: none !important; }

  main { max-width: 100% !important; padding: 0 !important; }

  /* Keep a card or a table from being sliced across two pages. */
  .print-block, table, .kpi-card { page-break-inside: avoid; }

  /* Force the browser to actually print our background colours. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  a[href]:after { content: ""; }   /* do not print the URL after every link */

  .print-page-break { page-break-before: always; }

  /* A discreet SaarthiFi credit on every printed page. */
  @page { margin: 14mm 12mm; }
}

/* ---- Charts need a fixed height or Chart.js grows forever --------------- */
.chart-box { position: relative; height: 300px; width: 100%; }
.chart-box-tall { position: relative; height: 380px; width: 100%; }

/* ---- Small helper for very long ledger names in narrow columns ---------- */
.truncate-cell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Screen-reader-only text (accessibility) --------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}