clusev/resources/css/app.css

@import 'tailwindcss';

/* Tailwind v4 scans these for utility usage (Blade + compiled views). */
@source '../views';
@source '../../app/Livewire';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

/* ── Self-hosted fonts (R14 — local only, never a CDN/@import from Google) ─ */
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/chakra-petch-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/chakra-petch-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/chakra-petch-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/chakra-petch-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/space-grotesk.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono.woff2') format('woff2');
}

/* ── Clusev design tokens — "Tactical Terminal" (handoff §6) ───────────── */
@theme {
    /* surfaces */
    --color-void: #06080A;
    --color-base: #0A0D10;
    --color-surface: #0F1318;
    --color-raised: #141A20;
    --color-inset: #0B0E12;

    /* brand — use opacity utilities for tints (bg-accent/10, border-accent/25) */
    --color-accent: #FF6B2C;
    --color-accent-bright: #FF8A4D;
    --color-accent-deep: #E25617;
    --color-accent-text: #FF9259;

    /* cyan counter-accent */
    --color-cyan: #43C1D8;
    --color-cyan-bright: #74D7E8;

    /* status triad */
    --color-online: #35D07F;
    --color-warning: #E8B931;
    --color-offline: #FF5247;

    /* text ramp → text-ink / text-ink-2 ... */
    --color-ink: #E9EEF3;
    --color-ink-2: #9DAAB6;
    --color-ink-3: #7E8A95;
    --color-ink-4: #707B85;

    /* hairline borders → border-line ... */
    --color-line: rgba(255, 255, 255, 0.10);
    --color-line-soft: rgba(255, 255, 255, 0.055);
    --color-line-strong: rgba(255, 255, 255, 0.17);

    /* fonts — self-hosted .woff2 via the @font-face blocks above (R14); system stack is the fallback */
    --font-display: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* radii → rounded-* */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;

    /* elevation → shadow-panel / shadow-pop */
    --shadow-panel: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 30px -18px rgb(0 0 0 / 0.85);
    --shadow-pop: 0 10px 34px -10px rgb(0 0 0 / 0.75);
}

/* ── base layer ───────────────────────────────────────────────────────── */
@layer base {
    /* Alpine: keep x-cloak elements hidden until Alpine inits (prevents drawer/backdrop flash). */
    [x-cloak] {
        display: none !important;
    }

    html {
        color-scheme: dark;
    }

    /* Tailwind v4's preflight makes buttons use the default cursor — restore the pointer on
       enabled interactive controls so clickable elements feel clickable (e.g. folder names). */
    button:not(:disabled),
    [role="button"]:not([aria-disabled="true"]),
    summary,
    label[for] {
        cursor: pointer;
    }

    /* keyboard focus — visible token ring on the dark UI (a11y) */
    :focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: var(--radius-xs);
    }

    /* honor reduced-motion (disables the status-dot ping, transitions, …) */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
        }
    }

    body {
        background-color: var(--color-void);
        color: var(--color-ink);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    /* atmospheric void: fine dot-grid + orange top vignette + bottom sink */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(120% 70% at 50% -8%, rgb(255 107 44 / 0.07), transparent 55%),
            radial-gradient(100% 60% at 50% 112%, rgb(0 0 0 / 0.55), transparent 50%),
            radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.028) 1px, transparent 0);
        background-size: auto, auto, 22px 22px;
    }

    /* thin dark scrollbars */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--color-raised); border-radius: 9px; border: 2px solid var(--color-base); }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-line-strong); }

    /* numbers/IPs/paths render mono */
    .tabular {
        font-variant-numeric: tabular-nums;
    }

    /* Keep scroll capability but hide the track — used on the sidebar nav + the server-detail tab
       strip so macOS "always show scroll bars" doesn't paint a permanent bar where nothing overflows. */
    .no-scrollbar {
        scrollbar-width: none;      /* Firefox */
        -ms-overflow-style: none;   /* old Edge */
    }
    .no-scrollbar::-webkit-scrollbar {
        display: none;              /* Chromium / WebKit (macOS) */
    }
}

/* ── Touch devices: no zoom-on-focus ──────────────────────────────────────
   iOS Safari zooms the viewport when a focused form control's font-size is
   < 16px. The dense design uses text-xs/sm/[11px] on inputs, which triggers it.
   Target by POINTER, not width: `pointer: coarse` matches touch-primary devices
   (phones + tablets of ANY size — incl. a 1024px/1366px iPad Pro that a width cap
   would miss) and excludes mouse desktops, so the small desktop sizing is kept.
   UNLAYERED on purpose — it must win over Tailwind's utility layer (the text-*
   classes in the markup). Excludes controls whose font-size cannot trigger zoom. */
@media (pointer: coarse) {
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
    textarea,
    select {
        font-size: 16px;
    }
}