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

/* ---------------------------------------------------------
   FONT SIZE
   Default/fallback size only - the app is dark-mode-only, and
   the actual font size is admin-adjustable from Settings (see
   ui_config.php), which injects an inline override on every
   page. This value only applies if that config is missing.
   --------------------------------------------------------- */
html {
    font-size: 20px;
}

/* ---------------------------------------------------------
   FONT FAMILY
   Note: this can't be a byte-identical copy of any other
   product's proprietary font (those aren't public/bundleable),
   but this stack targets the same goal - clean, modern,
   comfortable system typography with generous spacing.
   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, generous letter/line spacing for easy reading */
    --app-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, 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);
    line-height: 1.6;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .card-title, .page-title {
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
p, li, td, th, label, .form-label {
    line-height: 1.6;
}
input, textarea, select, .form-control, .form-select {
    font-family: var(--app-font-family);
}

/* Explicit bumps for nav/panel text and form labels, since "still too
   small" feedback suggests the rem-scaling alone wasn't enough */
.navbar-nav .nav-link, .nav-link-title {
    font-size: 1.125rem !important;
}
.form-label {
    font-size: 1rem !important;
}
.card-title {
    font-size: 1.3rem !important;
}
.page-title {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
}

/* ---------------------------------------------------------
   FULL-COVERAGE BACKGROUNDS
   Guarantees the navbar, page-header, and page-body all show
   the exact same background - no lighter/mismatched strip
   anywhere on the page, regardless of viewport width.
   --------------------------------------------------------- */
html, body {
    background-color: var(--tblr-body-bg) !important;
    min-height: 100%;
}
.navbar.bg-dark {
    background-color: var(--theme-surface) !important;
    width: 100%;
}
.page-header {
    background-color: var(--tblr-body-bg) !important;
}
/* ---------------------------------------------------------
   BORDER VISIBILITY & INPUT STYLING
   Tabler's default dark-mode border color is very low-contrast
   against the dark background (checkboxes, inputs, cards all
   nearly invisible). Lightened for a cleaner, professional look
   where structure is actually visible - and aligned to the same
   theme tokens as everything else, so a custom theme file
   controls these too, not just the sidebar/stat cards.
   --------------------------------------------------------- */
:root {
    --tblr-border-color: var(--theme-border) !important;
    /* Bridge Tabler's own primary color to our theme - without this,
       every .btn-primary, active pagination item, and focus ring in
       the app falls back to Tabler's default blue instead of the
       theme's actual accent color. */
    --tblr-primary: var(--theme-primary) !important;
    --tblr-primary-rgb: 8, 102, 255 !important; /* keep in sync with --theme-primary (Meta blue #0866FF) */
}
/* ---------------------------------------------------------
   Standardize button sizing app-wide. Several pages use the
   Bootstrap/Tabler "btn-sm" variant for row-action buttons
   (e.g. the "Open" button on the Leads table), which renders
   noticeably smaller than the standard button used elsewhere
   (forms, page headers). Neutralizing btn-sm here means every
   button - regardless of which class a given page happens to
   use - renders at the same standard height/padding/font-size,
   so sizing is consistent across every page without having to
   edit markup in each PHP file individually. */
.btn-sm {
    --tblr-btn-padding-y: 0.5625rem;
    --tblr-btn-padding-x: 1rem;
    --tblr-btn-font-size: 0.875rem;
    --tblr-btn-line-height: 1.25rem;
    --tblr-btn-border-radius: var(--tblr-border-radius);
}
/* Table action buttons (Edit/Remove, etc.) often stack in a narrow
   last column - give them consistent, breathing-room spacing instead
   of butting up against each other or the cell edge. */
.table td .btn, .table td details.dropdown summary.btn {
    margin: 3px 4px 3px 0;
}
/* The "Edit" action is a <details>/<summary> dropdown (block-level by
   default), which stacks above the "Remove" button/form below it.
   Force it inline so actions sit side-by-side in 2 columns instead. */
.table td details.dropdown {
    display: inline-block;
    vertical-align: middle;
}
.table td form.d-inline {
    display: inline-block !important;
    vertical-align: middle;
}
.table td:last-child {
    white-space: normal;
    min-width: 110px;
}

.form-control, .form-select, .form-check-input {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
/* Edit popovers (Products, Employees) - centered on screen with a
   dimming backdrop instead of a small box pinned to the row, which
   was cramped and easy to miss on wider forms. */
details.dropdown[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}
.edit-popover,
details.dropdown > .position-absolute.end-0 {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    margin-top: 0 !important;
    z-index: 1050;
    max-height: 92vh;
    overflow-y: auto;
}
/* Products table: URL/Brands/Notes are still fully editable via the Edit
   popup, just hidden from the list view to reduce clutter. */
#productsTable .cell-url,
#productsTable .cell-brands,
#productsTable .cell-notes {
    display: none;
}
/* Browser autofill (remembered values) forces its own light background
   on inputs, overriding the CSS above entirely - this is a browser
   behavior, not something normal background-color rules can beat. The
   long transition-delay trick is the standard, reliable way around it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--theme-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--theme-surface) inset !important;
    box-shadow: 0 0 0px 1000px var(--theme-surface) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}
/* File inputs (Logo upload) render a native OS button that CSS can't
   fully restyle - theme the surrounding field and give the button
   itself the same treatment as a normal secondary button. */
input[type="file"].form-control::file-selector-button {
    background-color: var(--theme-surface-raised);
    color: var(--theme-text);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-sm);
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px var(--theme-primary-soft) !important;
}
.card {
    border-color: var(--theme-border) !important;
}
.table > :not(caption) > * > * {
    border-bottom-color: var(--theme-border) !important;
}

/* ---------------------------------------------------------
   CONSISTENT TYPOGRAPHY
   Every element (buttons, badges, form fields, tables) uses
   the same font stack - no mismatched system fonts sneaking
   in from browser defaults on form controls.
   --------------------------------------------------------- */
button, input, select, textarea, .btn, .badge, table, .form-label {
    font-family: var(--app-font-family) !important;
}
.card {
    box-shadow: var(--theme-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));
}
.card-header {
    font-weight: 600;
}

/* ---------------------------------------------------------
   CENTRALIZED SIZING - named classes instead of repeated
   inline style="" attributes, so every form/badge/textbox
   pulls from one place and stays consistent app-wide.
   --------------------------------------------------------- */
.form-width-narrow { max-width: 500px; }
.form-width-medium { max-width: 600px; }

.badge-lg {
    font-size: 1rem;
    padding: 8px 16px;
}
.badge-code {
    font-size: 1rem;
    letter-spacing: 2px;
}

.text-truncate-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-thin { height: 8px; }

.cursor-pointer { cursor: pointer; }

.logo-preview {
    max-height: 48px;
}

/* Code/monospace editing surfaces (AI Prompt view + edit boxes) -
   one consistent size, so the "read" and "edit" states of the same
   text never visually jump between different sizes. */
.font-mono-consistent {
    font-family: var(--tblr-font-monospace, monospace);
    font-size: 0.9rem;
}

/* Lead detail page: customer name shown in caps for quick scanning */
.page-lead .page-title {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------
   AI PROMPT PAGE - read view and edit view, both sized to
   fit their full content naturally, no internal scrollbar.
   --------------------------------------------------------- */
.prompt-view-box {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--theme-text);
    background: transparent;
    border: none;
    margin: 0;
    max-height: none;
    overflow: visible;
}
.prompt-edit-box {
    min-height: 120px;
    max-height: none;
    overflow: hidden;
    resize: none;
    font-family: monospace;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------
   STATUS/PRIORITY BADGES - Flowbite's actual documented
   dark-mode badge color conventions (real Tailwind palette
   values), replacing Tabler's own "-lt" badge tints for a
   more precise, recognizable admin-dashboard look.
   --------------------------------------------------------- */
.badge.bg-green-lt { background-color: var(--theme-success-bg) !important; color: var(--theme-success-fg) !important; }
.badge.bg-red-lt { background-color: var(--theme-danger-bg) !important; color: var(--theme-danger-fg) !important; }
.badge.bg-yellow-lt { background-color: var(--theme-warning-bg) !important; color: var(--theme-warning-fg) !important; }
.badge.bg-blue-lt { background-color: var(--theme-badge-blue-bg) !important; color: var(--theme-badge-blue-fg) !important; }
.badge.bg-purple-lt { background-color: var(--theme-badge-purple-bg) !important; color: var(--theme-badge-purple-fg) !important; }
.badge.bg-secondary-lt { background-color: #e4e6eb !important; color: #50565e !important; }
.badge { font-weight: 500; padding: 4px 10px; border-radius: var(--theme-radius-pill); }

/* ---------------------------------------------------------
   TABLE ROW HOVER - Flowbite tables always have a clear
   hover highlight on rows; ours had none.
   --------------------------------------------------------- */
.table-hover > tbody > tr:hover > * {
    background-color: var(--theme-surface-raised) !important;
}
.table > :not(caption) > * > * {
    padding-top: 12px;
    padding-bottom: 12px;
}

body.login-page {
    background: var(--theme-bg);
}

/* 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;
}

.navbar-brand img { max-height: 32px; width: auto; }

/* ---------------------------------------------------------
   PRINT / PDF (used by the "Download / Print PDF" button on
   Reports - browsers can "Save as PDF" from the print dialog,
   so no server-side PDF library or external service is needed)
   --------------------------------------------------------- */
@media print {
    .navbar, .page-header, .footer, .d-print-none {
        display: none !important;
    }
    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }
    .print-report {
        font-family: Georgia, "Times New Roman", serif;
    }
    .print-report h3 {
        font-size: 14pt;
        margin-top: 24px;
        margin-bottom: 8px;
        border-bottom: 2px solid #000;
        padding-bottom: 4px;
    }
    .print-summary-table, .print-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 16px;
    }
    .print-summary-table th, .print-summary-table td,
    .print-table th, .print-table td {
        border: 1px solid #999;
        padding: 6px 10px;
        text-align: left;
        font-size: 11pt;
    }
    .print-summary-table th {
        width: 40%;
        background: #f0f0f0;
        font-weight: bold;
    }
    .print-table thead {
        display: table-header-group; /* repeat header on every printed page */
    }
    .print-table thead th {
        background: #e5e5e5;
        font-weight: bold;
    }
    .print-table tr {
        page-break-inside: avoid;
    }
    .report-print-header h2 {
        font-family: Georgia, "Times New Roman", serif;
    }
}