/* ==========================================================
   Echo Leads Admin - site-wide overrides on top of Tabler
   ========================================================== */

/* ---------------------------------------------------------
   FONT SIZE CONTROL
   Change the value below to make text bigger/smaller across
   the entire app. Tabler's default is 14px; team asked for
   easier reading, so this is bumped up.
   16px = comfortable reading size (current)
   18px = extra large
   14px = Tabler's original default
   --------------------------------------------------------- */
html {
    font-size: 16px; /* <-- CHANGE THIS LINE TO ADJUST APP-WIDE FONT SIZE */
}

/* ---------------------------------------------------------
   FONT FAMILY
   Pick one of the presets below by uncommenting it (remove
   the /* and */ around the line you want, and comment out
   the others), or paste your own font stack.
   --------------------------------------------------------- */
:root {
    /* Default - clean system font (fast, no download, matches OS look) */
    --app-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Rounded/friendly - uncomment to use instead:
    --app-font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    */

    /* Classic serif - uncomment to use instead:
    --app-font-family: Georgia, "Times New Roman", serif;
    */

    /* Larger, extra-readable sans - uncomment to use instead:
    --app-font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
    */
}
body {
    font-family: var(--app-font-family);
}

/* ---------------------------------------------------------
   LIGHT MODE CONTRAST FIX
   Tabler's default light-mode "muted"/secondary text (table
   column headers, timestamps, helper text) is a fairly pale
   gray by default. Darkened here for easier reading. Only
   applies in light mode - dark mode already uses a lighter,
   higher-contrast gray by default.
   --------------------------------------------------------- */
html:not([data-bs-theme="dark"]) {
    --tblr-secondary-color: #495057;
}
html:not([data-bs-theme="dark"]) .text-secondary,
html:not([data-bs-theme="dark"]) .leads-table th,
html:not([data-bs-theme="dark"]) .muted {
    color: #495057 !important;
}
body.login-page {
    background: linear-gradient(135deg, #182433 0%, #0b1727 100%);
}

/* Slightly roomier table rows for readability on top of the larger font */
.table-vcenter > :not(caption) > * > * {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Transcript box */
.transcript-box {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 480px;
    overflow-y: auto;
    background: var(--tblr-bg-surface-secondary, #f4f6fa);
    border-radius: 6px;
    padding: 14px;
    font-size: 0.95rem;
}

/* ---------------------------------------------------------
   LOGO: light/dark variants
   Only one of these should be visible at a time, based on
   the active theme. If only one variant was uploaded, it
   just stays visible in both themes (better than nothing).
   --------------------------------------------------------- */
.navbar-brand img { max-height: 32px; width: auto; }
.logo-dark { display: none; }
html[data-bs-theme="dark"] .logo-light { display: none; }
html[data-bs-theme="dark"] .logo-dark { display: inline-block; }

#theme-toggle .ti { font-size: 1.1rem; }