@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
   Design system primitives — ReservaPro
   ============================================================ */

@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    body {
        @apply bg-ink-50 text-ink-900;
        font-feature-settings: "cv11", "ss01", "ss03";
    }

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

@layer components {

    /* Card primitive */
    .card {
        @apply bg-white rounded-xl shadow-soft border border-ink-100 overflow-hidden;
    }
    .card-pad { @apply p-5 md:p-6; }

    /* Button primitives (utility-class friendly) */
    .btn {
        @apply inline-flex items-center justify-center gap-2 font-semibold rounded-full transition focus:outline-none focus:ring-2 focus:ring-brand-500/30 disabled:opacity-50;
    }
    .btn-sm { @apply text-xs px-3 py-1.5; }
    .btn-md { @apply text-sm px-4 py-2; }
    .btn-lg { @apply text-base px-5 py-2.5; }

    .btn-primary   { @apply bg-ink-900 text-white shadow-soft hover:bg-ink-800; }
    .btn-secondary { @apply bg-white text-ink-800 border border-ink-200 hover:bg-ink-50; }
    .btn-danger    { @apply bg-rose-600 text-white shadow-soft hover:bg-rose-700; }
    .btn-success   { @apply bg-emerald-600 text-white shadow-soft hover:bg-emerald-700; }
    .btn-ghost     { @apply text-ink-700 hover:bg-ink-100; }

    [data-push-enable].is-push-blocked {
        @apply border-amber-200 bg-amber-50 text-amber-800 hover:bg-amber-100;
    }

    [data-push-enable].is-push-blocked svg {
        @apply text-amber-600;
    }

    [data-push-enable].is-push-active {
        @apply border-emerald-200 bg-emerald-50 text-emerald-700;
    }

    [data-push-enable].is-push-active svg {
        @apply text-emerald-600;
    }

    /* Input */
    .input {
        @apply w-full text-sm bg-white border border-ink-200 rounded-xl px-3.5 py-2.5 text-ink-900
               focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500
               placeholder:text-ink-400 transition;
    }
    .input-sm { @apply text-xs px-3 py-2; }

    /* Sidebar nav link */
    .nav-link {
        @apply flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition
               text-ink-600 hover:bg-ink-100 hover:text-ink-900;
    }
    .nav-link.active {
        @apply bg-brand-600 text-white shadow-soft;
    }
    .nav-link .icon { @apply w-5 h-5 flex-shrink-0 text-current; }
    .nav-link .icon svg { @apply w-5 h-5; }
    .nav-link .nav-label {
        @apply min-w-0 flex-1 truncate;
    }
    .nav-section {
        @apply px-3 pt-5 pb-1.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-ink-400;
    }

    /* Glass card variant */
    .card-glass {
        @apply bg-white/90 backdrop-blur-xl border border-white/70 shadow-soft-lg rounded-xl;
    }

    /* Status pill */
    .pill {
        @apply inline-flex items-center gap-1 font-medium rounded-full px-2.5 py-0.5 text-xs;
    }

    /* Skeleton */
    .skeleton { @apply animate-pulse rounded-md bg-ink-200/60; }

    /* Global loading overlay */
    .ap-loader {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: grid;
        place-items: center;
        background:
            radial-gradient(circle at 50% 42%, rgba(79, 70, 229, 0.10), transparent 32%),
            rgba(248, 250, 252, 0.86);
        backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, visibility .22s ease;
    }

    .ap-loader.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .ap-loader-card {
        @apply flex flex-col items-center gap-3 rounded-3xl border border-white/80 bg-white/90 px-8 py-7 shadow-soft-lg;
        transform: translateY(8px) scale(.98);
        transition: transform .22s ease;
    }

    .ap-loader.is-visible .ap-loader-card {
        transform: translateY(0) scale(1);
    }

    .ap-loader-logo {
        width: 86px;
        height: 86px;
        object-fit: contain;
        filter: drop-shadow(0 16px 26px rgba(13, 58, 133, .22));
    }

    .ap-loader-text {
        @apply text-xs font-black uppercase tracking-[0.18em] text-ink-500;
    }

    .ap-loader-bar {
        position: relative;
        width: 132px;
        height: 4px;
        overflow: hidden;
        border-radius: 999px;
        background: rgb(226 232 240);
    }

    .ap-loader-bar::after {
        content: "";
        position: absolute;
        inset: 0;
        width: 42%;
        border-radius: inherit;
        background: linear-gradient(90deg, #0d3a85, #14b8ca);
        animation: ap-loader-bar 1.1s ease-in-out infinite;
    }

    @keyframes ap-loader-bar {
        0% { transform: translateX(-110%); }
        100% { transform: translateX(250%); }
    }

    @media (prefers-reduced-motion: reduce) {
        .ap-loader,
        .ap-loader-card {
            transition: none;
        }

        .ap-loader-bar::after {
            animation: none;
            width: 100%;
        }
    }

    /* Scroll-area */
    .scroll-area {
        scrollbar-width: thin;
        scrollbar-color: rgb(203 213 225) transparent;
    }
    .scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
    .scroll-area::-webkit-scrollbar-thumb { @apply bg-ink-300 rounded-full; }
    .scroll-area::-webkit-scrollbar-track { background: transparent; }
}

@layer utilities {
    .bg-mesh-light {
        background-color: #f8fafc;
        background-image:
            radial-gradient(at 20% 0%, rgba(99, 102, 241, 0.07) 0px, transparent 50%),
            radial-gradient(at 80% 0%, rgba(139, 92, 246, 0.05) 0px, transparent 50%);
    }

    .bg-grid {
        background-image:
            linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
        background-size: 32px 32px;
    }

    .text-balance { text-wrap: balance; }
    .text-pretty  { text-wrap: pretty; }

    .fresha-panel {
        @apply bg-white border border-ink-100 rounded-xl shadow-soft;
    }

    .fresha-table {
        @apply w-full text-sm text-ink-700;
    }

    .fresha-table thead {
        @apply bg-ink-50 text-left text-xs font-semibold text-ink-500;
    }

    .fresha-table th,
    .fresha-table td {
        @apply px-4 py-4 border-b border-ink-100;
    }

    .fresha-table tbody tr {
        @apply hover:bg-ink-50 transition;
    }

    .fresha-field {
        @apply bg-white border-ink-200 text-ink-900 placeholder:text-ink-400 rounded-full focus:border-brand-500 focus:ring-brand-500/20;
    }
}

/* ============================================================
   Global loader
   Kept outside Tailwind layers because the DOM is injected by JS.
   ============================================================ */
.ap-loader-lock {
    overflow: hidden;
}

.ap-loader {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: center !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100dvh !important;
    background: rgba(255, 255, 255, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

.ap-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ap-loader-card {
    position: relative;
    width: 192px;
    height: 192px;
    transform: translateY(8px) scale(.98);
    transition: transform .18s ease;
}

.ap-loader.is-visible .ap-loader-card {
    transform: translateY(0) scale(1);
}

.ap-loader-ring {
    position: absolute;
    top: 26px;
    left: 50%;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    transform: translateX(-50%);
    background:
        conic-gradient(from 20deg, #0d3a85 0deg, #14b8ca 82deg, rgba(226, 232, 240, .55) 82deg, rgba(226, 232, 240, .55) 360deg);
    animation: ap-loader-spin .92s linear infinite;
    box-shadow: 0 18px 42px rgba(13, 58, 133, .10);
}

.ap-loader-ring::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: inherit;
    background: #fff;
}

.ap-loader-logo {
    position: absolute;
    top: 85px;
    left: 50%;
    z-index: 1;
    width: 62px;
    height: 62px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 12px 20px rgba(13, 58, 133, .18));
}

.ap-loader-text {
    position: absolute;
    top: 160px;
    left: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .22em;
    line-height: 1;
    text-transform: uppercase;
}

@keyframes ap-loader-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ap-loader,
    .ap-loader-card {
        transition: none;
    }

    .ap-loader-ring {
        animation: none;
    }
}

/* ============================================================
   Mobile app look — internal product shell
   ============================================================ */
@media (max-width: 767px) {
    body.ap-mobile-app {
        background: #f3f6fb;
    }

    body.ap-sidebar-open {
        overflow: hidden;
    }

    body.ap-mobile-app .ap-mobile-sidebar {
        width: min(86vw, 18rem);
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        box-shadow: 24px 0 50px rgba(15, 23, 42, .18);
        scrollbar-width: none;
    }

    body.ap-mobile-app .ap-mobile-sidebar::-webkit-scrollbar {
        display: none;
    }

    body.ap-mobile-app header {
        height: 64px;
        border-bottom: 0;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
    }

    body.ap-mobile-app main {
        padding: 1.15rem 1rem calc(6.75rem + env(safe-area-inset-bottom));
        background:
            radial-gradient(circle at 20% 0%, rgba(79, 70, 229, .08), transparent 34%),
            linear-gradient(180deg, #f4f6ff 0%, #f8fafc 42%, #f3f6fb 100%);
    }

    body.ap-mobile-app footer {
        display: none;
    }

    body.ap-mobile-app .card {
        border-color: rgba(226, 232, 240, .82);
        border-radius: 1.45rem;
        box-shadow: 0 12px 34px rgba(15, 23, 42, .065);
    }

    body.ap-mobile-app .card-pad {
        padding: 1.15rem;
    }

    body.ap-mobile-app .rounded-2xl.bg-grad-amber,
    body.ap-mobile-app .rounded-2xl.bg-grad-brand,
    body.ap-mobile-app .rounded-2xl.bg-grad-emerald,
    body.ap-mobile-app .rounded-2xl.bg-grad-rose,
    body.ap-mobile-app .rounded-2xl.bg-grad-sky {
        border-radius: 1.45rem;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .09);
    }

    body.ap-mobile-app h1 {
        letter-spacing: 0;
    }

    .ap-mobile-bottom-nav {
        position: fixed;
        right: .9rem;
        bottom: max(.85rem, env(safe-area-inset-bottom));
        left: .9rem;
        z-index: 40;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: .25rem;
        min-height: 68px;
        padding: .5rem;
        border: 1px solid rgba(226, 232, 240, .95);
        border-radius: 1.6rem;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
        backdrop-filter: blur(18px);
        transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
    }

    body.ap-sidebar-open .ap-mobile-bottom-nav {
        transform: translateY(calc(100% + 1.25rem));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .ap-mobile-tab {
        display: inline-flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        border-radius: 1.1rem;
        color: #64748b;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1;
        text-decoration: none;
        transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .ap-mobile-tab svg {
        width: 21px;
        height: 21px;
    }

    .ap-mobile-tab:active {
        transform: scale(.96);
    }

    .ap-mobile-tab.is-active {
        background: #0f172a;
        color: #fff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .22);
    }
}