/* ==========================================================
   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;
    background: var(--theme-surface-raised, #212939);
    color: var(--theme-text, #f2f4f7);
    border-radius: 6px;
    padding: 14px;
    font-size: 0.95rem;
}

/* Chat bubble styling inside transcript */
.transcript-box .line-ai {
    color: var(--theme-text-muted, #98a2b3);
}
.transcript-box .line-customer {
    color: var(--theme-text, #f2f4f7);
}

.transcript-summary-box {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--theme-primary-soft, rgba(70,95,255,0.10));
    color: var(--theme-text, #f2f4f7);
    border: 1px solid var(--theme-border, #2e3a4d);
    border-left: 3px solid var(--theme-primary, #465fff);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.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;
    }
}

/* ---------------------------------------------------------
   Alerts: Tabler renders .alert as a flex container, which
   splits mixed inline content (<strong> + text + links) into
   awkward side-by-side columns. We never use alert icons, so
   force plain block flow app-wide - one continuous line.
   --------------------------------------------------------- */
.alert {
    display: block;
}

/* ---------------------------------------------------------
   PAGE HEADER SPACING
   Give every page title comfortable breathing room from the
   top edge instead of sitting flush against it.
   --------------------------------------------------------- */
.page-header {
    padding-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------
   RESPONSIVE FIXES — phones & small tablets
   The admin uses a large configurable base font (default
   20px via html{font-size} / inline override from settings).
   On narrow screens that inflates every component and causes
   overflow. Cap the effective base size by viewport width
   (!important so it also beats the inline fontSize override),
   and let button groups wrap instead of spilling off-screen.
   --------------------------------------------------------- */
@media (max-width: 992px) {
    html { font-size: 17px !important; }
}
@media (max-width: 576px) {
    html { font-size: 15px !important; }

    /* Filter tabs (All / New / In Progress / Closed) wrap */
    .btn-group { flex-wrap: wrap; }
    .btn-group > .btn { flex: 1 1 auto; }

    /* Header action rows stack cleanly */
    .card-header.d-flex { row-gap: 0.5rem; }

    /* Slightly tighter card padding on phones */
    .card-body { padding: 0.9rem; }
}

/* Tables: always scroll horizontally inside cards rather than
   stretching the page (safety net for any table not already
   wrapped in .table-responsive) */
.card .table-responsive { -webkit-overflow-scrolling: touch; }

/* Leads table on phones: keep Select, Name, Mobile, Status, Open only */
@media (max-width: 576px) {
    .leads-table th:nth-child(4), .leads-table td:nth-child(4),  /* Priority */
    .leads-table th:nth-child(6), .leads-table td:nth-child(6),  /* Source */
    .leads-table th:nth-child(7), .leads-table td:nth-child(7),  /* Product */
    .leads-table th:nth-child(8), .leads-table td:nth-child(8),  /* Lead opened */
    .leads-table th:nth-child(9), .leads-table td:nth-child(9) { /* Last updated */
        display: none;
    }
}