/* ============================================================
   LeadCRM — Premium Polish (lc-premium.css)
   ------------------------------------------------------------
   Layered ON TOP of the existing styles. It does NOT redefine
   the design system — it ties into the existing CSS variables
   (--accent-*, --row-py, --card-p) and existing class names
   (.density-card, .bg-accent, .lc-act, .pill, .lc-sidebar...),
   so EVERY page benefits with zero per-page edits.

   - Modern typography (Inter)
   - Refined surfaces, shadows, hover lift
   - Button micro-interactions
   - Custom focus rings
   - Sidebar + topbar polish
   - Custom scrollbar
   - Smooth page-entry animation
   - Opt-in scroll reveal classes (driven by lc-motion.js)
   - Dark-mode parity + prefers-reduced-motion respect
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   Typography
   ──────────────────────────────────────────────────────────── */
html, body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03', 'tnum';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.011em;
}
h1, h2, h3, h4, h5 { letter-spacing: -0.02em; font-feature-settings: 'cv11', 'ss01', 'tnum'; }
h1.text-2xl, h1.text-xl { letter-spacing: -0.025em; }

/* Optional gradient headline helper */
.lc-grad-text {
    background-image: linear-gradient(135deg, var(--accent-700), var(--accent-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Numeric / monospace tabular fit (KPIs, counts) */
.font-mono, [class*="font-mono"] { font-variant-numeric: tabular-nums; }

/* ────────────────────────────────────────────────────────────
   Surfaces / cards — smooth hover lift + refined shadow
   ──────────────────────────────────────────────────────────── */
.density-card {
    transition:
        transform 280ms cubic-bezier(.2,.7,.2,1),
        box-shadow 280ms cubic-bezier(.2,.7,.2,1),
        border-color 200ms ease;
    will-change: transform;
}
.density-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 32px -18px rgba(15, 23, 42, 0.18),
        0 2px 6px -2px rgba(15, 23, 42, 0.08);
}
.dark .density-card:hover {
    box-shadow:
        0 18px 40px -22px rgba(0, 0, 0, 0.7),
        0 2px 8px -2px rgba(0, 0, 0, 0.45);
}
.density-card:focus-within { border-color: var(--accent-300); }

/* Rounded boxes used as soft surfaces (matches existing rounded-xl) */
[class*="rounded-xl"] { transition: box-shadow 200ms ease, border-color 200ms ease; }

/* ────────────────────────────────────────────────────────────
   Buttons — premium accent + gradient + lift
   ──────────────────────────────────────────────────────────── */
.bg-accent {
    background-image:
        linear-gradient(180deg,
            color-mix(in oklab, var(--accent-600) 100%, white 8%),
            var(--accent-600));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 1px 2px rgba(15,23,42,0.18);
    transition:
        transform 180ms cubic-bezier(.2,.7,.2,1),
        box-shadow 200ms ease,
        filter 180ms ease,
        background-image 200ms ease;
}
.bg-accent:hover {
    transform: translateY(-1px);
    filter: brightness(1.06) saturate(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 8px 22px -10px color-mix(in oklab, var(--accent-600) 60%, transparent);
}
.bg-accent:active { transform: translateY(0); filter: brightness(0.97); }
.bg-accent:focus-visible {
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 0 0 3px color-mix(in oklab, var(--accent-500) 40%, transparent);
}

/* Soft secondary buttons (existing `border-slate-200`/`bg-white` ghost style) */
button:not(.bg-accent):not(.lc-act):not(.lc-ld-bar),
a.inline-flex {
    transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms;
}
button:not(.bg-accent):not(.lc-act):not([disabled]):hover {
    transform: translateY(-1px);
}

/* ────────────────────────────────────────────────────────────
   Action icons (.lc-act) — refined hover
   ──────────────────────────────────────────────────────────── */
.lc-act { transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
.lc-act:hover { transform: translateY(-1px) scale(1.06); }

/* ────────────────────────────────────────────────────────────
   Inputs / selects — smooth focus glow tied to accent
   ──────────────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
textarea,
select {
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-500) 22%, transparent);
}

/* Checkboxes & radios — accent-tinted check */
input[type=checkbox], input[type=radio] {
    accent-color: var(--accent-600);
    transition: transform 140ms ease;
}
input[type=checkbox]:hover, input[type=radio]:hover { transform: scale(1.06); }

/* ────────────────────────────────────────────────────────────
   Status pills — tasteful hover
   ──────────────────────────────────────────────────────────── */
.pill { transition: transform 160ms ease, box-shadow 160ms ease; }
.pill:hover { transform: translateY(-1px); }

/* ────────────────────────────────────────────────────────────
   Sidebar — refined hover + active indicator
   (works on whatever <a>/<button> the menu renders)
   ──────────────────────────────────────────────────────────── */
.lc-sidebar a, .lc-sidebar button {
    transition:
        background-color 220ms ease,
        color 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
}
.lc-sidebar a:hover { transform: translateX(2px); }

/* "Active" treatment: works if the menu emits aria-current="page"
   OR if a parent class .is-active is set (works best-effort, no break). */
.lc-sidebar a[aria-current="page"],
.lc-sidebar a.is-active,
.lc-sidebar a[data-active="true"] {
    position: relative;
    background:
        linear-gradient(90deg,
            color-mix(in oklab, var(--accent-100) 100%, transparent) 0%,
            transparent 100%);
    color: var(--accent-700);
}
.dark .lc-sidebar a[aria-current="page"],
.dark .lc-sidebar a.is-active,
.dark .lc-sidebar a[data-active="true"] {
    background:
        linear-gradient(90deg,
            rgba(255,255,255,0.06) 0%,
            transparent 100%);
    color: var(--accent-300);
}
.lc-sidebar a[aria-current="page"]::before,
.lc-sidebar a.is-active::before,
.lc-sidebar a[data-active="true"]::before {
    content: "";
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-400), var(--accent-600));
    border-radius: 0 3px 3px 0;
}

/* ────────────────────────────────────────────────────────────
   Topbar — smoother search focus
   ──────────────────────────────────────────────────────────── */
header.sticky input[type=search] {
    transition: box-shadow 200ms ease, background-color 200ms ease;
}
header.sticky input[type=search]:focus {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-500) 22%, transparent);
}

/* ────────────────────────────────────────────────────────────
   Page entry — gentle fade-in on every navigation
   (kicks in after the global loader hides)
   ──────────────────────────────────────────────────────────── */
/* The loader script sets `lc-page-ready` once the overlay starts to fade,
   so the main content animates in IN SYNC with the loader fade-out
   (rather than playing invisibly underneath it).

   IMPORTANT: opacity-only fade — NO transform on the parent. A transform on
   <main> (even translateY(0) after the animation, when fill-mode=both) makes
   <main> the containing block for any position:fixed descendant, which traps
   slide-out drawers / modals inside the page area and breaks their layout. */
main.lc-main-container.lc-page-ready { animation: lcPageEnter 480ms cubic-bezier(.2,.7,.2,1); }
@keyframes lcPageEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ────────────────────────────────────────────────────────────
   Scroll reveal — opt-in (driven by lc-motion.js)
   Add `data-lc-reveal` to any element; it fades + slides in
   when scrolled into view.
   ──────────────────────────────────────────────────────────── */
[data-lc-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 560ms cubic-bezier(.2,.7,.2,1),
        transform 560ms cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
[data-lc-reveal].lc-in {
    opacity: 1;
    transform: translateY(0);
}

/* ────────────────────────────────────────────────────────────
   Soft accent glow (decorative; opt-in via .lc-accent-glow)
   ──────────────────────────────────────────────────────────── */
.lc-accent-glow { position: relative; isolation: isolate; }
.lc-accent-glow::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 50% at 20% 20%, color-mix(in oklab, var(--accent-400) 22%, transparent), transparent 70%),
        radial-gradient(50% 60% at 80% 30%, color-mix(in oklab, var(--accent-500) 18%, transparent), transparent 75%);
    filter: blur(40px);
    opacity: 0.7;
}

/* ────────────────────────────────────────────────────────────
   Refined scrollbars (subtle, Tailwind-styled feel)
   ──────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,0.32) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,0.32);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(100,116,139,0.55);
    background-clip: content-box;
}
.dark *::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.28);
    background-clip: content-box;
}
.dark *::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,0.5);
    background-clip: content-box;
}

/* ────────────────────────────────────────────────────────────
   Loader polish — gradient bars + softened backdrop
   (Targets the existing #lcPageLoader / .lc-ld-bar markup.)
   ──────────────────────────────────────────────────────────── */
.lc-ld-bar {
    background-image: linear-gradient(180deg, var(--accent-400), var(--accent-600)) !important;
}
.dark .lc-ld-bar {
    background-image: linear-gradient(180deg, var(--accent-300), var(--accent-500)) !important;
}

/* ────────────────────────────────────────────────────────────
   Table rows — soft hover background already exists; add
   a smoother transition so dark→light feels velvety
   ──────────────────────────────────────────────────────────── */
tbody tr { transition: background-color 180ms ease; }

/* ────────────────────────────────────────────────────────────
   Selection color — accent tinted
   ──────────────────────────────────────────────────────────── */
::selection {
    background: color-mix(in oklab, var(--accent-500) 35%, transparent);
    color: inherit;
}

/* ────────────────────────────────────────────────────────────
   Reduced-motion: switch off all non-essential motion
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-lc-reveal] { opacity: 1 !important; transform: none !important; }
    main.lc-main-container { animation: none !important; }
}