/* HadiVerify design system — colours taken from the HadiVerify logo
   navy #0B1B4D · royal blue #1E4FE0 · sky #12B5F5 · violet #6B3CF6 · green #1FC46F */

:root {
    --hv-navy: #0B1B4D;
    --hv-blue: #1E4FE0;
    --hv-blue-bright: #2F6BFF;
    --hv-sky: #12B5F5;
    --hv-violet: #6B3CF6;
    --hv-green: #1FC46F;
    --hv-green-deep: #0E9F6E;

    --hv-gradient: linear-gradient(135deg, #1E4FE0 0%, #2F6BFF 35%, #12B5F5 65%, #1FC46F 100%);
    --hv-gradient-soft: linear-gradient(135deg, rgba(30, 79, 224, .12), rgba(31, 196, 111, .12));
    --hv-gradient-ring: linear-gradient(120deg, #1E4FE0, #6B3CF6 45%, #1FC46F);

    --hv-bg: #F4F7FD;
    --hv-surface: #FFFFFF;
    --hv-surface-2: #F7F9FE;
    --hv-border: #E3E9F5;
    --hv-text: #0B1B4D;
    --hv-text-muted: #5B6B8F;
    --hv-shadow: 0 1px 2px rgba(11, 27, 77, .04), 0 8px 24px rgba(11, 27, 77, .06);
    --hv-shadow-lg: 0 24px 60px -20px rgba(30, 79, 224, .35);
    color-scheme: light;
}

.dark {
    --hv-bg: #060B1F;
    --hv-surface: #0C1533;
    --hv-surface-2: #101B40;
    --hv-border: rgba(148, 170, 255, .12);
    --hv-text: #EAF0FF;
    --hv-text-muted: #93A3C8;
    --hv-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    --hv-shadow-lg: 0 24px 60px -20px rgba(47, 107, 255, .45);
    color-scheme: dark;
}

html { scroll-behavior: smooth; }
body.hv-body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--hv-bg);
    color: var(--hv-text);
    -webkit-font-smoothing: antialiased;
}

/* Decorative background: soft brand glows + faint grid */
.hv-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hv-backdrop::before, .hv-backdrop::after {
    content: ''; position: absolute; border-radius: 9999px; filter: blur(110px); opacity: .55;
}
.hv-backdrop::before { width: 520px; height: 520px; top: -160px; left: -120px; background: rgba(47, 107, 255, .28); }
.hv-backdrop::after { width: 460px; height: 460px; bottom: -180px; right: -120px; background: rgba(31, 196, 111, .22); }
.dark .hv-backdrop::before { opacity: .45; }
.dark .hv-backdrop::after { opacity: .35; }
.hv-grid {
    background-image:
        linear-gradient(rgba(30, 79, 224, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 79, 224, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Brand gradient helpers */
.hv-gradient.hv-gradient, .hv-gradient { background: var(--hv-gradient); }
.hv-gradient-ring { background: var(--hv-gradient-ring); }
.hv-gradient-text {
    background: var(--hv-gradient); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* Surfaces */
.hv-card {
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 1.25rem;
    box-shadow: var(--hv-shadow);
}
.hv-glass {
    background: color-mix(in srgb, var(--hv-surface) 78%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
            backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid var(--hv-border);
}
.hv-muted { color: var(--hv-text-muted); }
.hv-divider { border-color: var(--hv-border); }

/* Gradient border wrapper: <div class="hv-ring-border"><div class="hv-card">…</div></div> */
.hv-ring-border { padding: 1px; border-radius: 1.3rem; background: var(--hv-gradient-ring); }
.hv-ring-border > * { border: 0; }

/* Buttons */
.hv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 700; font-size: .9rem; border-radius: .9rem; padding: .8rem 1.3rem;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.hv-btn:active { transform: scale(.98); }
.hv-btn:disabled { opacity: .6; cursor: wait; }
.hv-btn-primary.hv-btn-primary { background: var(--hv-gradient); color: #fff; box-shadow: 0 10px 24px -10px rgba(30, 79, 224, .7); background-size: 140% 140%; }
.hv-btn-primary.hv-btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(30, 79, 224, .85); background-position: 100% 0; }
.hv-btn-ghost.hv-btn-ghost { background: var(--hv-surface); color: var(--hv-text); border: 1px solid var(--hv-border); }
.hv-btn-ghost.hv-btn-ghost:hover { border-color: var(--hv-blue-bright); color: var(--hv-blue-bright); }
.hv-btn-white.hv-btn-white { background: #fff; color: var(--hv-blue); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); }
.hv-btn-white.hv-btn-white:hover { background: #F2F6FF; }
.hv-icon-btn.hv-icon-btn {
    width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: .85rem; background: var(--hv-surface); border: 1px solid var(--hv-border);
    color: var(--hv-text-muted); transition: color .2s, border-color .2s, transform .15s;
}
.hv-icon-btn.hv-icon-btn:hover { color: var(--hv-blue-bright); border-color: var(--hv-blue-bright); }

/* Form fields */
.hv-label { display: block; font-size: .78rem; font-weight: 700; color: var(--hv-text-muted); margin-bottom: .45rem; letter-spacing: .01em; }
.hv-input {
    width: 100%; padding: .85rem 1rem; border-radius: .9rem; font-size: .95rem;
    background: var(--hv-surface-2); color: var(--hv-text);
    border: 1px solid var(--hv-border); transition: border-color .15s, box-shadow .15s, background .15s;
}
.hv-input::placeholder { color: color-mix(in srgb, var(--hv-text-muted) 70%, transparent); }
.hv-input:focus { outline: none; border-color: var(--hv-blue-bright); box-shadow: 0 0 0 4px rgba(47, 107, 255, .15); background: var(--hv-surface); }
.hv-input-icon { position: relative; }
.hv-input-icon > i:first-child { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--hv-text-muted); font-size: .9rem; pointer-events: none; }
.hv-input-icon > .hv-input { padding-left: 2.7rem; }

/* Service tiles (dashboard) */
.hv-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    padding: 1.1rem .75rem; border-radius: 1.1rem; text-align: center; text-decoration: none;
    background: var(--hv-surface); border: 1px solid var(--hv-border); box-shadow: var(--hv-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hv-tile:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--hv-shadow-lg); }
.hv-tile::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--hv-gradient-ring); opacity: 0; transition: opacity .2s;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.hv-tile:hover::after { opacity: 1; }
.hv-tile-icon {
    width: 3rem; height: 3rem; border-radius: .95rem; display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: #fff; box-shadow: 0 10px 20px -10px currentColor;
}
.hv-tile-label { font-size: .78rem; font-weight: 700; color: var(--hv-text); line-height: 1.25; }

/* Icon chip colour sets (from the logo) */
.hv-chip-blue   { background: linear-gradient(135deg, #1E4FE0, #2F6BFF); }
.hv-chip-sky    { background: linear-gradient(135deg, #1E8BF0, #12B5F5); }
.hv-chip-violet { background: linear-gradient(135deg, #5B2EE8, #8B5CF6); }
.hv-chip-green  { background: linear-gradient(135deg, #0E9F6E, #1FC46F); }
.hv-chip-teal   { background: linear-gradient(135deg, #0D8F9E, #19B7A6); }
.hv-chip-navy   { background: linear-gradient(135deg, #0B1B4D, #1E3A8A); }

/* Navigation */
.hv-nav-link {
    display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: .85rem;
    font-weight: 600; font-size: .9rem; color: var(--hv-text-muted); text-decoration: none; transition: background .15s, color .15s;
}
.hv-nav-link i { width: 1.2rem; text-align: center; }
.hv-nav-link:hover { background: var(--hv-surface-2); color: var(--hv-text); }
.hv-nav-link.is-active { background: var(--hv-gradient-soft); color: var(--hv-blue-bright); }
.dark .hv-nav-link.is-active { color: #8FB0FF; }
.hv-nav-section { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-text-muted); opacity: .7; padding: 0 .9rem; margin: 1.1rem 0 .4rem; }

/* Badges */
.hv-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 9999px; font-size: .72rem; font-weight: 700; }
.hv-badge-live { background: rgba(31, 196, 111, .12); color: #0E9F6E; }
.dark .hv-badge-live { color: #4BE29A; }
.hv-pulse { width: .5rem; height: .5rem; border-radius: 9999px; background: #1FC46F; box-shadow: 0 0 0 0 rgba(31, 196, 111, .6); animation: hv-pulse 2s infinite; }
@keyframes hv-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 196, 111, .55); } 70% { box-shadow: 0 0 0 9px rgba(31, 196, 111, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 196, 111, 0); } }

/* Entrance animation */
.hv-rise { animation: hv-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hv-float { animation: hv-float 6s ease-in-out infinite; }
@keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hv-text-muted) 35%, transparent); border-radius: 10px; }

/* SweetAlert2 popups follow the theme */
.swal2-popup.hv-swal { border-radius: 1.4rem !important; background: var(--hv-surface) !important; color: var(--hv-text) !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.swal2-popup.hv-swal .swal2-title, .swal2-popup.hv-swal .swal2-html-container { color: var(--hv-text) !important; }

@media (prefers-reduced-motion: reduce) {
    .hv-rise, .hv-float, .hv-pulse { animation: none !important; }
    .hv-tile, .hv-btn { transition: none; }
}