/* =============================================================================
 * Copyright (c) 2025-2026 Custom Launch Ltd. All Rights Reserved.
 * Website  : https://customlaunch.co.uk
 *
 * PROPRIETARY & CONFIDENTIAL SOFTWARE
 * Developed by Aadarsh Kachhwaha for Custom Launch Ltd.
 *
 * NOTICE: This source code is the exclusive intellectual property of Custom
 * Launch Ltd. Any unauthorised copying, modification, distribution, reverse
 * engineering, or use of this software — in whole or in part, by any means or
 * medium — without prior written permission from Custom Launch Ltd is strictly
 * prohibited and may result in civil and/or criminal proceedings.
 * ============================================================================= */

/* Horizon — the skin for the "horizon" theme preset (includes/themes.php).
 *
 * The look: one full-bleed photograph (assets/img/presets/horizon-sky.webp,
 * a generated seascape at golden hour) fixed behind the entire portal, with
 * the shell rendered as frosted-glass panels and pure-white cards floating
 * on top of it. Sidebar, topbar and login screen are all translucent;
 * content cards stay opaque white so body copy never sits on a photo.
 *
 * Rules here are scoped to html[data-cl-preset="horizon"] (set in
 * layout/header.php) — the file only ever loads for this preset, but the
 * scope is what guarantees it, and it also buys the specificity needed to
 * override base.css without a single !important.
 *
 * Colours come from the preset's own --cl-* vars rather than being hard-coded,
 * so a Fleet Control Plane colour push (admin/api/sync.php's set_theme) still
 * repaints this skin the same way it repaints every other theme. The
 * --clh-* vars below are Horizon's own additions: glass tints and the
 * elevation ramp that gives the floating cards their depth.
 *
 * Glass is progressive: backdrop-filter is applied inside an @supports
 * block, and the panels carry a mostly-opaque background either way, so a
 * browser without it gets solid panels instead of unreadable ones.
 */

html[data-cl-preset="horizon"] {
    --clh-glass: rgba(255, 255, 255, 0.72);
    --clh-glass-strong: rgba(255, 255, 255, 0.86);
    --clh-glass-line: rgba(255, 255, 255, 0.55);
    --clh-tint: rgba(21, 84, 209, 0.08);
    --clh-tint-strong: rgba(21, 84, 209, 0.14);
    --clh-shadow-card: 0 10px 30px rgba(16, 42, 75, 0.10), 0 2px 6px rgba(16, 42, 75, 0.05);
    --clh-shadow-panel: 0 16px 44px rgba(16, 42, 75, 0.14), 0 2px 8px rgba(16, 42, 75, 0.06);
    --clh-shadow-hover: 0 18px 44px rgba(16, 42, 75, 0.16), 0 3px 10px rgba(16, 42, 75, 0.07);
    --cl-hover-tint: rgba(21, 84, 209, 0.07);
    --cl-shadow-sm: 0 1px 2px rgba(16, 42, 75, 0.05);
    --cl-shadow-md: var(--clh-shadow-card);
    --cl-shadow-lg: var(--clh-shadow-panel);
}

/* ── The photograph ─────────────────────────────────────────────────────
 * A fixed layer rather than a body background-image so the sky stays put
 * while long admin tables scroll, and so the warm-to-cool wash on top of
 * it can be tuned independently of the photo. --cl-bg still paints
 * underneath as the solid fallback while the image loads (or if it 404s
 * on a deployment that didn't ship the asset).
 *
 * The photo itself is deliberately small — 1100x614 WebP, ~14 KB. It is
 * out-of-focus sky and water sitting behind a white wash, so it survives
 * being scaled up by `cover` on a large display, and a sharper source
 * would cost more than it returns on every single page load. */
html[data-cl-preset="horizon"] body {
    background: var(--cl-bg);
    position: relative;
}

html[data-cl-preset="horizon"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.24) 100%),
        url("/assets/img/presets/horizon-sky.webp");
    background-size: cover, cover;
    background-position: center, center 45%;
    background-repeat: no-repeat, no-repeat;
}

/* A second, very soft vignette keeps the corners from competing with the
 * panels sitting in them. */
html[data-cl-preset="horizon"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(12, 36, 66, 0.10) 100%);
}

/* ── Shell: sidebar and topbar as floating glass ────────────────────── */

html[data-cl-preset="horizon"] .cl-shell {
    padding: 0.9rem 0.9rem 0;
    gap: 0.9rem;
}

html[data-cl-preset="horizon"] .cl-sidebar {
    background: var(--clh-glass);
    border: 1px solid var(--clh-glass-line);
    border-radius: 20px;
    box-shadow: var(--clh-shadow-panel);
    padding: 1.1rem 0.85rem;
    align-self: flex-start;
    position: sticky;
    top: 0.9rem;
    max-height: calc(100vh - 1.8rem);
    overflow-y: auto;
}

/* The blur is the only thing gated on support — the panels' translucent
 * backgrounds are set on the panels themselves, from the --clh-glass
 * tokens, so a browser without backdrop-filter still gets the same tint,
 * just without the frost behind it. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    html[data-cl-preset="horizon"] .cl-sidebar,
    html[data-cl-preset="horizon"] .cl-topbar,
    html[data-cl-preset="horizon"] .cl-notif-dropdown,
    html[data-cl-preset="horizon"] .cl-auth-card {
        -webkit-backdrop-filter: blur(22px) saturate(1.5);
        backdrop-filter: blur(22px) saturate(1.5);
    }
}

html[data-cl-preset="horizon"] .cl-sidebar__brand {
    padding: 0.35rem 0.5rem 1.25rem;
    letter-spacing: -0.015em;
}

html[data-cl-preset="horizon"] .cl-sidebar__section-label {
    opacity: 0.45;
    letter-spacing: 0.08em;
}

html[data-cl-preset="horizon"] .cl-sidebar__footer {
    border-top: 1px solid rgba(18, 36, 59, 0.10);
}

html[data-cl-preset="horizon"] .cl-sidebar__avatar {
    background: linear-gradient(140deg, var(--cl-primary), var(--cl-accent));
    box-shadow: 0 4px 12px rgba(21, 84, 209, 0.35);
}

html[data-cl-preset="horizon"] .cl-topbar {
    background: var(--clh-glass);
    border: 1px solid var(--clh-glass-line);
    border-radius: 18px;
    box-shadow: var(--clh-shadow-card);
    margin: 0 0 1rem;
    padding: 0.95rem 1.4rem;
    align-items: center;
    position: sticky;
    top: 0.9rem;
    z-index: 20;
}

/* base.css draws a gradient hairline under the topbar; on glass it reads
 * as a seam rather than an accent, so Horizon drops it. */
html[data-cl-preset="horizon"] .cl-topbar::after {
    display: none;
}

html[data-cl-preset="horizon"] .cl-topbar__title {
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

html[data-cl-preset="horizon"] .cl-topbar__icon-btn {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--clh-glass-line);
    width: 2.4rem;
    height: 2.4rem;
    color: var(--cl-text);
}

html[data-cl-preset="horizon"] .cl-topbar__icon-btn:hover {
    background: #ffffff;
    box-shadow: var(--cl-shadow-sm);
}

html[data-cl-preset="horizon"] .cl-shell__main {
    padding-bottom: 0.9rem;
}

/* The shell's own gutter now provides the side padding base.css put on
 * .cl-main, so it only needs the bottom breathing room. The guest variant
 * keeps its padding — there is no shell around it to inherit one from. */
html[data-cl-preset="horizon"] .cl-main:not(.cl-main--guest) {
    padding: 0 0 1.25rem;
}

/* ── Nav: app-launcher tiles ────────────────────────────────────────────
 * Each nav item's emoji is boxed into a rounded white tile, the way an
 * app launcher lists its apps, and the active item becomes a solid white
 * pill lifted off the glass. */

html[data-cl-preset="horizon"] .cl-nav-link {
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
}

html[data-cl-preset="horizon"] .cl-nav-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border-radius: 9px;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(16, 42, 75, 0.14);
}

html[data-cl-preset="horizon"] .cl-nav-link:hover {
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

html[data-cl-preset="horizon"] .cl-nav-link--active {
    background: #ffffff;
    box-shadow: var(--clh-shadow-card);
    opacity: 1;
}

html[data-cl-preset="horizon"] .cl-nav-link--active .cl-nav-link__icon {
    background: var(--clh-tint-strong);
    box-shadow: none;
}

/* The gradient bar base.css bleeds into the sidebar's padding would hang
 * off the rounded glass panel here — the white pill is the active cue
 * instead. */
html[data-cl-preset="horizon"] .cl-nav-link--active::before {
    display: none;
}

html[data-cl-preset="horizon"] .cl-sidebar__logout,
html[data-cl-preset="horizon"] .cl-sidebar__collapse-btn {
    border-radius: 12px;
}

/* ── Cards, tiles, tables ───────────────────────────────────────────── */

html[data-cl-preset="horizon"] .cl-card,
html[data-cl-preset="horizon"] .cl-stat-tile {
    background: var(--cl-surface);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--cl-radius);
    box-shadow: var(--clh-shadow-card);
}

html[data-cl-preset="horizon"] .cl-card {
    padding: 1.35rem 1.4rem;
}

html[data-cl-preset="horizon"] .cl-card h2 {
    letter-spacing: -0.015em;
}

html[data-cl-preset="horizon"] .cl-stat-tile {
    padding: 1.1rem 1.3rem;
}

html[data-cl-preset="horizon"] .cl-stat-tile__value {
    font-size: 2rem;
    letter-spacing: -0.02em;
}

html[data-cl-preset="horizon"] .cl-table th {
    background: var(--clh-tint);
    color: var(--cl-text);
    border-bottom-color: rgba(18, 36, 59, 0.10);
}

html[data-cl-preset="horizon"] .cl-table td {
    border-bottom-color: rgba(18, 36, 59, 0.07);
}

html[data-cl-preset="horizon"] .cl-list li {
    border-bottom-color: rgba(18, 36, 59, 0.07);
}

html[data-cl-preset="horizon"] .cl-badge {
    border-radius: 999px;
    font-weight: 600;
}

html[data-cl-preset="horizon"] .cl-alert {
    border-radius: 14px;
    border-width: 1px;
}

/* ── Buttons and controls: pills ────────────────────────────────────── */

html[data-cl-preset="horizon"] .cl-btn {
    border-radius: 999px;
    padding: 0.6rem 1.35rem;
    background: var(--cl-primary);
    box-shadow: 0 6px 16px rgba(21, 84, 209, 0.28);
}

html[data-cl-preset="horizon"] .cl-btn:hover {
    filter: none;
    background: color-mix(in srgb, var(--cl-primary) 88%, #000);
    box-shadow: var(--clh-shadow-hover);
}

html[data-cl-preset="horizon"] .cl-btn--secondary {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(18, 36, 59, 0.14);
    color: var(--cl-text);
    box-shadow: var(--cl-shadow-sm);
}

html[data-cl-preset="horizon"] .cl-btn--secondary:hover {
    background: #ffffff;
}

html[data-cl-preset="horizon"] .cl-btn--danger {
    background: var(--cl-danger);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}

html[data-cl-preset="horizon"] .cl-form-group input[type="text"],
html[data-cl-preset="horizon"] .cl-form-group input[type="email"],
html[data-cl-preset="horizon"] .cl-form-group input[type="password"],
html[data-cl-preset="horizon"] .cl-form-group input[type="number"],
html[data-cl-preset="horizon"] .cl-form-group input[type="date"],
html[data-cl-preset="horizon"] .cl-form-group textarea,
html[data-cl-preset="horizon"] .cl-form-group select {
    border-radius: 12px;
    border-color: rgba(18, 36, 59, 0.14);
    padding: 0.6rem 0.8rem;
}

html[data-cl-preset="horizon"] .cl-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.5);
    gap: 0.35rem;
}

html[data-cl-preset="horizon"] .cl-tab {
    border-bottom: none;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    margin-bottom: 0;
}

html[data-cl-preset="horizon"] .cl-tab:hover {
    background: rgba(255, 255, 255, 0.55);
}

html[data-cl-preset="horizon"] .cl-tab--active {
    background: #ffffff;
    box-shadow: var(--cl-shadow-sm);
}

/* ── Notification dropdown ──────────────────────────────────────────── */

html[data-cl-preset="horizon"] .cl-notif-dropdown {
    background: var(--clh-glass-strong);
    border: 1px solid var(--clh-glass-line);
    border-radius: 16px;
    box-shadow: var(--clh-shadow-panel);
}

html[data-cl-preset="horizon"] .cl-notif-dropdown__head,
html[data-cl-preset="horizon"] .cl-notif-item {
    border-bottom-color: rgba(18, 36, 59, 0.08);
}

/* ── Login screen ───────────────────────────────────────────────────────
 * The guest pages get the same photograph. base.css's drifting colour
 * blobs and prism stripes were designed for a flat background and turn to
 * mud over a photo, so Horizon keeps only the pointer highlight. */

html[data-cl-preset="horizon"] .cl-guest-bg {
    background-image: none;
    animation: none;
}

html[data-cl-preset="horizon"] .cl-guest-bg::before,
html[data-cl-preset="horizon"] .cl-guest-bg::after {
    display: none;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    html[data-cl-preset="horizon"] .cl-guest-bg__pointer {
        background: radial-gradient(
            620px circle at var(--cl-mx, 50%) var(--cl-my, 40%),
            rgba(255, 255, 255, 0.35),
            transparent 62%
        );
    }
}

html[data-cl-preset="horizon"] .cl-guest-header__brand {
    background: var(--clh-glass-strong);
    box-shadow: var(--clh-shadow-card);
}

html[data-cl-preset="horizon"] .cl-guest-header__brand::before,
html[data-cl-preset="horizon"] .cl-guest-header__brand::after {
    display: none;
}

html[data-cl-preset="horizon"] .cl-auth-card {
    background: var(--clh-glass-strong);
    border: 1px solid var(--clh-glass-line);
    border-radius: 22px;
    box-shadow: var(--clh-shadow-panel);
}

/* base.css's 3px gradient bar across the card top is kept — .cl-auth-card
 * clips it to the radius, so it still reads as an accent at 22px. */

html[data-cl-preset="horizon"] .cl-footer {
    color: rgba(18, 36, 59, 0.65);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* ── Motion ─────────────────────────────────────────────────────────────
 * Only under the animations feature flag, matching base.css's own
 * convention (and so still off under prefers-reduced-motion, which the
 * feature's own stylesheet handles). */

html[data-cl-preset="horizon"].cl-animations-enabled .cl-card,
html[data-cl-preset="horizon"].cl-animations-enabled .cl-stat-tile,
html[data-cl-preset="horizon"].cl-animations-enabled .cl-nav-link__icon,
html[data-cl-preset="horizon"].cl-animations-enabled .cl-topbar__icon-btn {
    transition: box-shadow 0.22s ease, transform 0.22s ease, background 0.18s ease;
}

html[data-cl-preset="horizon"].cl-animations-enabled .cl-card:hover,
html[data-cl-preset="horizon"].cl-animations-enabled .cl-stat-tile:hover {
    box-shadow: var(--clh-shadow-hover);
    transform: translateY(-2px);
}

/* ── Narrow screens ─────────────────────────────────────────────────────
 * base.css turns the sidebar into a full-width strip below 768px; the
 * sticky offsets and side gutters have to unwind with it or the panels
 * fight each other for the viewport. */

@media (max-width: 768px) {
    html[data-cl-preset="horizon"] .cl-shell {
        padding: 0.6rem 0.6rem 0;
        gap: 0.6rem;
    }

    html[data-cl-preset="horizon"] .cl-sidebar {
        position: static;
        max-height: none;
        border-radius: 16px;
        padding: 0.75rem 0.9rem;
    }

    html[data-cl-preset="horizon"] .cl-topbar {
        position: static;
        padding: 0.8rem 1rem;
        border-radius: 16px;
    }

    html[data-cl-preset="horizon"] .cl-main {
        padding: 0 0 0.6rem;
    }
}