/*
 * HostBill Pro — design tokens, lifted from the real reference file
 * Source-Data/hostbillpro_homepage_reference.html (dark navy / indigo /
 * cyan marketing theme). Hand-written CSS custom properties per
 * PLAN_OF_ACTION.md's "no Tailwind / no CSS framework" rule — recreated
 * here as reusable tokens for the admin panel, not copy-pasted markup.
 */
:root {
    --navy: #0A0F1E;
    --navy-raised: #11172A;
    --indigo: #6B48FF;
    --indigo-light: #8B6FFF;
    --indigo-dark: #4A2FCC;
    --cyan: #00D4C8;
    --white: #F0F4FF;
    --slate: #8892AA;
    --slate-dim: #5C6480;
    --card: rgba(255, 255, 255, 0.04);
    --card-hover: rgba(107, 72, 255, 0.06);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(107, 72, 255, 0.4);
    --danger: #FF5F57;
    --warning: #FEBC2E;
    --success: #28C840;

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

/* ── ANIMATED BRAND LOGO ──
   Ported verbatim from Source-Data/hostbillpro_homepage_reference.html's
   `logoGlow`/`orbitRing`/`scanLine` keyframes (2026-07-15 fix — replaces an
   earlier hand-invented "float" animation that didn't match the reference
   design). Applied to resources/views/partials/logo.blade.php's inline SVG:
   `.brand-logo-animated` on the root <svg> (pulsing glow), `.brand-logo-orbit`
   on the outer ring <g> (rotation), `.brand-logo-scan` on the receipt
   scan-line <rect> (sweep). */
.brand-logo-animated {
    animation: brand-logo-glow 3s ease-in-out infinite;
}

.brand-logo-orbit {
    transform-origin: 19px 19px;
    animation: brand-logo-orbit-ring 8s linear infinite;
}

.brand-logo-scan {
    animation: brand-logo-scan-line 3s ease-in-out infinite 1s;
}

@keyframes brand-logo-glow {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(107, 72, 255, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(0, 212, 200, 0.8));
    }
}

@keyframes brand-logo-orbit-ring {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes brand-logo-scan-line {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(200%);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-logo-animated,
    .brand-logo-orbit,
    .brand-logo-scan {
        animation: none;
    }
}

/* ── PASSWORD FIELD EYE TOGGLE ── */
.password-field {
    position: relative;
    display: flex;
}

.password-field .form-control {
    padding-right: 40px;
    width: 100%;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--slate);
    line-height: 0;
}

.password-toggle:hover {
    color: var(--cyan);
}

[x-cloak] {
    display: none !important;
}