/**
 * premium-skin.css (2026-08-31)
 *
 * Global premium pass — the typography and surface language piloted on
 * ads-performance.php (owner-approved from the Gemini mock), promoted to
 * every page via includes/header.php. One file, cache-busted with
 * ?v=filemtime, instead of 419 per-page copies.
 *
 * WHAT THIS IS: fonts (Plus Jakarta Sans for text, JetBrains Mono for
 * numeric surfaces), softer card language (1rem radius, hairline border,
 * low shadow), premium table headers, and a small set of OPT-IN components
 * (.tbf-pulse, .tbf-funnel) any page can use.
 *
 * WHAT THIS IS NOT: a Tailwind import (its preflight reset would strip
 * Bootstrap page-wide), a colour rebrand (colours stay with tbf-suite.css,
 * which reads Settings > Corporate Branding — this file uses that system's
 * --tbf-* variables and neutral values only, so whitelabel installs keep
 * their own palette), or a print style (everything is @media screen, so
 * invoices and packing slips render exactly as before).
 *
 * Fonts are loaded by the <link> tags in header.php, not @import here —
 * @import serialises behind the CSS download; the preconnect+link pair does
 * not. Every rule carries low specificity on purpose: any page's own
 * stylesheet or inline block still wins without needing !important wars.
 */

@media screen {

/* ---- Typography ------------------------------------------------------- */

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

/* Numeric surfaces read in mono: right-aligned table cells (the numeric-
   column convention across the CRM), explicitly-monospace elements, and the
   .tbf-num opt-in for KPI values. NOT applied to inputs or free text. */
.table tbody td.text-end,
.table thead th,
.tbf-num,
.font-monospace {
    font-family: 'JetBrains Mono', 'SFMono-Regular', SFMono-Regular, Consolas, 'Liberation Mono', monospace;
}

/* ---- Surface language ------------------------------------------------- */

.card {
    border-radius: 1rem;
    border: 1px solid var(--tbf-line, #e2e8f0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.card > .card-header { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.card > .card-footer { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }

.modal-content { border-radius: 1rem; }
.btn { border-radius: .6rem; }
.btn-sm { border-radius: .5rem; }
.form-control, .form-select, .input-group-text { border-radius: .55rem; }
/* Grouped controls keep their flush inner corners. */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---- Tables ------------------------------------------------------------ */

.table thead th {
    font-size: .655rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tbf-muted, #64748b);
    background: var(--tbf-raised, #f8fafc);
    border-bottom: 1px solid var(--tbf-line, #e2e8f0);
}
.table tbody tr { transition: background-color .15s ease; }
.table.table-hover tbody tr:hover,
.table tbody tr:hover { background-color: #f0f9ff; }
/* Striped tables keep their own hover colour — double-tinting reads muddy. */
.table-striped tbody tr:hover { background-color: #e8f4fd; }

/* ---- Opt-in components (used by ads-performance, available anywhere) --- */

/* Live-status pill with a pulsing dot:
   <span class="tbf-pulse">Synced 12:41</span> */
.tbf-pulse {
    font-size: .64rem; font-weight: 700; color: #047857;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px;
    padding: .2rem .6rem; display: inline-flex; align-items: center; gap: .35rem;
    font-family: 'JetBrains Mono', monospace;
}
.tbf-pulse::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #10b981; animation: tbfPulse 1.6s ease-in-out infinite;
}
@keyframes tbfPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* N-stage pipeline strip with arrow separators — see ads-performance.php's
   funnel for markup. Stage tints are the generic slate/sky/purple/amber/
   emerald ladder; a page may add its own modifiers. */
.tbf-funnel { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .tbf-funnel { grid-template-columns: repeat(var(--tbf-funnel-cols, 5), 1fr); } }
.tbf-funnel-step {
    position: relative; border-radius: .8rem; border: 1px solid #e2e8f0;
    background: #f8fafc; padding: .7rem .5rem; text-align: center;
}
@media (min-width: 768px) {
    .tbf-funnel-step:not(:last-child)::after {
        content: '\2794'; position: absolute; right: -13px; top: 50%;
        transform: translateY(-50%); color: #94a3b8; font-weight: 900;
        font-size: 11px; z-index: 2;
    }
}
.tbf-funnel-k { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; font-family: 'JetBrains Mono', monospace; }
.tbf-funnel-v { font-size: 1.05rem; font-weight: 800; color: #0f172a; line-height: 1.2; margin-top: .1rem; font-family: 'JetBrains Mono', monospace; }
.tbf-funnel-s { font-size: .62rem; color: #64748b; font-weight: 600; }

} /* @media screen */

/* Capacitor native-shell update offer (includes/footer.php) — identical
   markup/rule to assets/css/wa-app.css's .wa-update-bar, duplicated rather
   than shared because CRM pages never load that stylesheet (it is scoped
   to the WA Studio SPA screen). Keep both in sync if this is restyled. */
.wa-update-bar {
    position: fixed; left: 12px; right: 12px; z-index: 1050;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 12px;
    background: #0f766e; color: #ecfeff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .84rem; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.wa-update-bar span { flex: 1; }
.wa-update-bar button {
    border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer;
    font: inherit; font-weight: 800;
    background: #ecfeff; color: #0f766e;
}
.wa-update-bar .wa-update-later { background: transparent; color: #ccfbf1; padding: 7px 6px; }