@import "tailwindcss";

/* Scan Vue components for Tailwind classes */
@source "../../../app/frontend/**/*.vue";
@source "../../../app/frontend/**/*.ts";

/* Hide Alpine-controlled elements until Alpine initialises (prevents modal flash). */
[x-cloak] {
    display: none !important;
}

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

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/aspect-ratio';
@plugin '@tailwindcss/typography';

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentcolor);
    }
}

@utility text-cellary-purple {
    color: #3a3042;
}

@utility bg-cellary-purple {
    background-color: #3a3042;
}

@utility bg-cellary-dark-purple {
    background-color: #29222f;
}

@utility bg-cellary-lighter-purple {
    background-color: #84738a;
}

@utility bg-cellary-lightest-purple {
    background-color: #84738a;
}

@utility border-cellary-lighter-purple {
    border-color: #84738a;
}

@utility border-cellary-purple {
    --tw-border-opacity: 1;
    border-color: #563964;
}

@utility border-cellary-lightest-purple {
    --tw-border-opacity: 1;
    border-color: #84738a;
}

@utility ring-cellary-purple {
    ring-color: #563964;
    --tw-ring-color: #563964;
}

@utility bg-cellary-red {
    background-color: #b80c09;
}

@utility bg-cellary-green {
    background-color: #849324;
}

@utility bg-cellary-dark-green {
    background-color: #31572c;
}

@utility bg-cellary-blue {
    background-color: #437f97;
}

@utility bg-cellary-yellow {
    background-color: #ffb30f;
}

@utility bg-cellary-secondary {
    background-color: #437f97;
    /* background-color: #7A9E9F; */
}

@utility bg-cellary-notification {
    background-color: #83a22f;
    /* background-color: #7A9E9F; */
}

@utility outline-cellary-purple {
    outline-color: #3a3042;
}

/* ───────────────────────────────────────────────────────────────────────
   Status palette — derived from the brand colors above.
   Used for drink-readiness states and other status indicators.
   See DesignChoices.md for the state → colour mapping.
   ─────────────────────────────────────────────────────────────────────── */

/* Readable text / icon shades (some brand colours are too light for text). */
@utility text-cellary-dark-green {
    color: #31572c;
} /* ready to drink */
@utility text-cellary-blue {
    color: #437f97;
} /* holding / maturing */
@utility text-cellary-amber {
    color: #946200;
} /* drink soon — dark companion to cellary-yellow */
@utility text-cellary-red {
    color: #b80c09;
} /* past peak */
@utility text-cellary-yellow {
    color: #ffb30f;
} /* fills, e.g. rating stars */

@utility border-cellary-yellow {
    border-color: #ffb30f;
}

/* Soft tints for card / pill backgrounds and their borders. */
@utility bg-cellary-green-soft {
    background-color: #f2f4e3;
}
@utility border-cellary-green-soft {
    border-color: #d8deb1;
}
@utility bg-cellary-blue-soft {
    background-color: #e7eef1;
}
@utility border-cellary-blue-soft {
    border-color: #c0d4dc;
}
@utility bg-cellary-yellow-soft {
    background-color: #fff5e0;
}
@utility border-cellary-yellow-soft {
    border-color: #ffe19f;
}
@utility bg-cellary-red-soft {
    background-color: #fae9e8;
}
@utility border-cellary-red-soft {
    border-color: #eebcbb;
}

@layer utilities {
    /*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

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

input {
    --tw-ring-shadow: 0 0 #000 !important;
}

/* Make links & buttons feel more tactile, particulary for PWA */
a {
    transition:
        background-color 0.2s ease,
        transform 0.1s ease;
}

a:active {
    transform: scale(0.98); /* Slight press-down effect */
}

button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

/* Instant visual change when touched or clicked */
button:active {
    transform: scale(0.96); /* Creates a realistic compression look */
    opacity: 0.9;
}

/* PWA Safe Area Utilities */
@utility pt-safe {
    padding-top: env(safe-area-inset-top);
}

@utility pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

@utility pl-safe {
    padding-left: env(safe-area-inset-left);
}

@utility pr-safe {
    padding-right: env(safe-area-inset-right);
}

/*
 * PWA Visibility System
 *
 * These rules MUST be outside @layer to ensure proper cascade behavior.
 * In Tailwind v4, @layer creates lower specificity which breaks the
 * display-mode: standalone media query override.
 */

/* Default state: PWA elements hidden in browser mode */
.pwa-show {
    display: none;
}

.pwa-hide {
    display: block;
}

.pwa-header {
    padding-top: 0;
}

.pwa-bottom-nav {
    padding-bottom: 0;
}

.pwa-main-content {
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .shadow_mobile {
        box-shadow: rgba(0, 0, 0, 0.4) 0 -20px 20px -20px;
    }
}

/* PWA standalone mode - these rules override the defaults above */
@media all and (display-mode: standalone) {
    /* Show PWA-specific elements */
    .pwa-show {
        display: flex !important;
    }

    /* Hide browser-specific elements */
    .pwa-hide {
        display: none !important;
    }

    /* PWA header extends under status bar */
    .pwa-header {
        padding-top: env(safe-area-inset-top);
    }

    /* PWA bottom nav respects home indicator */
    .pwa-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Main content padding to accommodate bottom nav */
    .pwa-main-content {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }

    /* Hide footer in PWA mode */
    footer {
        display: none !important;
    }
}