@import "tailwindcss";

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

@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-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;
}

@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;
}

/* 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;
}

/* 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;
    }
}