/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 * COLOR PALETTE:
 * - All colors are defined in /config/tailwind.config.js
 * - Use Tailwind utilities like bg-primary-400, text-primary-600, etc.
 * - See /COLORS.md for complete documentation and migration guide
 * - To update colors: Edit the hex values in tailwind.config.js
 */


/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, canvas, svg {
  display: block;
  max-width: 100%;
}
input[type=file]::file-selector-button{
  visibility: hidden;
  color: transparent;
  text-indent: -9999px;                 /* sends the text off-screen */
}

input[type=file]::-webkit-file-upload-button{
  visibility: hidden;
  color: transparent;
  text-indent: -9999px;                 /* sends the text off-screen */
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* 9. Create a root stacking context */
#root, #__next {
  isolation: isolate;
}
    input::placeholder, textarea::placeholder {
      color: rgba(0, 0, 0, 0.6);
    }

    /* Custom Color Utilities - BJJ App Palette */
    :root {
      /* Primary colors */
      --color-primary-50: #f3f7f7;
      --color-primary-100: #e0ebe9;
      --color-primary-200: #c1d7d4;
      --color-primary-300: #9dbcb9;
      --color-primary-400: #7d9d9c;
      --color-primary-500: #658784;
      --color-primary-600: #576f72;
      --color-primary-700: #485a5c;
      --color-primary-800: #3d4b4d;
      --color-primary-900: #353f41;
      --color-primary-950: #1c2527;

      /* Secondary colors */
      --color-secondary-50: #fafafa;
      --color-secondary-100: #f5f5f5;
      --color-secondary-200: #f2f2f2;
      --color-secondary-300: #e8e8e8;
      --color-secondary-400: #d4d4d4;
      --color-secondary-500: #a3a3a3;
      --color-secondary-600: #737373;
      --color-secondary-700: #525252;
      --color-secondary-800: #404040;
      --color-secondary-900: #262626;

      /* Dark colors */
      --color-dark-50: #f7f7f7;
      --color-dark-100: #e3e3e3;
      --color-dark-200: #c8c8c8;
      --color-dark-300: #a4a4a4;
      --color-dark-400: #818181;
      --color-dark-500: #666666;
      --color-dark-600: #515151;
      --color-dark-700: #434343;
      --color-dark-800: #383838;
      --color-dark-900: #222222;
      --color-dark-950: #0a0a0a;
    }

    /* Primary Background Colors */
    .bg-primary-50 { background-color: var(--color-primary-50); }
    .bg-primary-100 { background-color: var(--color-primary-100); }
    .bg-primary-200 { background-color: var(--color-primary-200); }
    .bg-primary-300 { background-color: var(--color-primary-300); }
    .bg-primary-400 { background-color: var(--color-primary-400); }
    .bg-primary-500 { background-color: var(--color-primary-500); }
    .bg-primary-600 { background-color: var(--color-primary-600); }
    .bg-primary-700 { background-color: var(--color-primary-700); }
    .bg-primary-800 { background-color: var(--color-primary-800); }
    .bg-primary-900 { background-color: var(--color-primary-900); }
    .bg-primary-950 { background-color: var(--color-primary-950); }

    /* Primary Text Colors */
    .text-primary-50 { color: var(--color-primary-50); }
    .text-primary-100 { color: var(--color-primary-100); }
    .text-primary-200 { color: var(--color-primary-200); }
    .text-primary-300 { color: var(--color-primary-300); }
    .text-primary-400 { color: var(--color-primary-400); }
    .text-primary-500 { color: var(--color-primary-500); }
    .text-primary-600 { color: var(--color-primary-600); }
    .text-primary-700 { color: var(--color-primary-700); }
    .text-primary-800 { color: var(--color-primary-800); }
    .text-primary-900 { color: var(--color-primary-900); }
    .text-primary-950 { color: var(--color-primary-950); }

    /* Primary Border Colors */
    .border-primary-50 { border-color: var(--color-primary-50); }
    .border-primary-100 { border-color: var(--color-primary-100); }
    .border-primary-200 { border-color: var(--color-primary-200); }
    .border-primary-300 { border-color: var(--color-primary-300); }
    .border-primary-400 { border-color: var(--color-primary-400); }
    .border-primary-500 { border-color: var(--color-primary-500); }
    .border-primary-600 { border-color: var(--color-primary-600); }
    .border-primary-700 { border-color: var(--color-primary-700); }
    .border-primary-800 { border-color: var(--color-primary-800); }
    .border-primary-900 { border-color: var(--color-primary-900); }
    .border-primary-950 { border-color: var(--color-primary-950); }

    /* Primary Hover States */
    .hover\:bg-primary-50:hover { background-color: var(--color-primary-50); }
    .hover\:bg-primary-100:hover { background-color: var(--color-primary-100); }
    .hover\:bg-primary-200:hover { background-color: var(--color-primary-200); }
    .hover\:bg-primary-300:hover { background-color: var(--color-primary-300); }
    .hover\:bg-primary-400:hover { background-color: var(--color-primary-400); }
    .hover\:bg-primary-500:hover { background-color: var(--color-primary-500); }
    .hover\:bg-primary-600:hover { background-color: var(--color-primary-600); }
    .hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }
    .hover\:bg-primary-800:hover { background-color: var(--color-primary-800); }
    .hover\:bg-primary-900:hover { background-color: var(--color-primary-900); }
    .hover\:bg-primary-950:hover { background-color: var(--color-primary-950); }

    .hover\:text-primary-400:hover { color: var(--color-primary-400); }
    .hover\:text-primary-500:hover { color: var(--color-primary-500); }
    .hover\:text-primary-600:hover { color: var(--color-primary-600); }

    /* Primary Focus Ring Colors */
    .focus\:border-primary-400:focus { border-color: var(--color-primary-400); }
    .focus\:ring-primary-400:focus { --tw-ring-color: var(--color-primary-400); }
    .focus\:outline-primary-400:focus { outline-color: var(--color-primary-400); }
    .focus-visible\:ring-primary-400:focus-visible { --tw-ring-color: var(--color-primary-400); }

    /* Group Hover States */
    .group:hover .group-hover\:text-primary-400 { color: var(--color-primary-400); }
    .group:hover .group-hover\:text-primary-500 { color: var(--color-primary-500); }
    .group:hover .group-hover\:bg-primary-100 { background-color: var(--color-primary-100); }
    .group:hover .group-hover\:bg-primary-200 { background-color: var(--color-primary-200); }

    /* Peer Checked States */
    .peer:checked ~ .peer-checked\:bg-primary-400 { background-color: var(--color-primary-400); }
    .peer:checked ~ .peer-checked\:bg-primary-500 { background-color: var(--color-primary-500); }

    /* Secondary Background Colors */
    .bg-secondary-50 { background-color: var(--color-secondary-50); }
    .bg-secondary-100 { background-color: var(--color-secondary-100); }
    .bg-secondary-200 { background-color: var(--color-secondary-200); }
    .bg-secondary-300 { background-color: var(--color-secondary-300); }
    .bg-secondary-400 { background-color: var(--color-secondary-400); }
    .bg-secondary-500 { background-color: var(--color-secondary-500); }

    /* Secondary Text Colors */
    .text-secondary-200 { color: var(--color-secondary-200); }
    .text-secondary-300 { color: var(--color-secondary-300); }
    .text-secondary-400 { color: var(--color-secondary-400); }

    /* Dark Colors */
    .bg-dark-900 { background-color: var(--color-dark-900); }
    .text-dark-900 { color: var(--color-dark-900); }

    /*
     * Legacy color class aliases - use Tailwind utilities instead for new code
     * e.g., use bg-primary-400 instead of bg-light-blue
     * These are kept for backwards compatibility
     */
    .light-blue {
        color: var(--color-primary-400);
    }
    .bg-light-blue {
        background-color: var(--color-primary-400);
    }
    .b--light-blue {
        border-color: var(--color-primary-400);
    }
    .sand {
        color: var(--color-secondary-200);
    }
    .bg-sand {
        background-color: var(--color-secondary-200);
    }
    .b--sand {
        border-color: var(--color-secondary-200);
    }
    .bg-blue {
      background-color: var(--color-primary-600);
    }
    .blue {
      color: var(--color-primary-600);
    }
    .b--blue {
      border-color: var(--color-primary-600);
    }
    .black {
      color: var(--color-dark-900);
    }
    .bg-black {
      background-color: var(--color-dark-900);
    }
    .b--black {
      border-color: var(--color-dark-900);
    }
    ::placeholder {
      color: inherit;
      opacity: 1;
    }
    :-ms-input-placeholder {
      color: inherit;
    }
    ::-ms-input-placeholder {
      color: inherit;
    }
    .inherit {
        color: inherit;
    }
    .pointer {
      cursor: pointer;
    }
    .font-variant-normal { font-variant: normal; }
    
.overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
  backdrop-filter: blur(1px); /* This creates the blur effect */
  opacity: 0;
  visibility: hidden; /* Initially hidden */
  z-index: 998; /* Below the sheet but above everything else */
  transition-property: opacity, visibility;
  transition-timing-function: ease-out;
  transition-duration: 0.4s;
}

.overlay.active {
  opacity: 1;
  visibility: visible; /* Visible when active */

}

.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
  opacity: 1; /* Start with opacity 0 */
  transform: translateY(100%); /* Start below the viewport */
  transition-property: transform;
  transition-timing-function: ease-out;
  transition-duration: 0.3s;
  transition-delay: 0.5s;
}

.sheet-open {
  transform: translateY(0); /* Slide up to bottom */
}

.sheet-closed {
  transform: translateY(100%); /* Slide down out of view */
}

    /* Custom animations using theme colors */
    .animate-background-icon {
      animation: animate-background-color ease-in-out 0.3s;
    }
    @keyframes animate-background-color {
      from  { background-color: var(--color-primary-600); }
      to    { background-color: var(--color-primary-400); }
    }

    .gradient-underline {
        display: inline-block;
        text-decoration: none;
        background-image: linear-gradient(to right, #ffd700, #ffd700);
        background-position: bottom;
        background-size: 100% 2px;
        background-repeat: no-repeat;
        animation: animate-underline linear 0.3s;
        transition: background-size 0.3s;
    }
    @keyframes animate-underline {
      from  { background-size: 0 2px; }
      to    { background-size: 100% 2px; }
    }
    .light-shadow { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
    nav > * {
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
    }
    *:focus {
        -webkit-tap-highlight-color: transparent;
        outline: none;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
    }
    .empty-list-message {
        font-size: 18px; /* Large enough to be readable but not overwhelming */
        font-weight: 400; /* Normal weight for readability */
        color: rgba(0, 0, 0, 0.7);
        text-align: center; /* Center the text for symmetry */
        line-height: 1.5; /* Good spacing for readability */
        letter-spacing: 0.5px; /* Slight letter spacing for a modern look */
        padding: 20px; /* Some space around the text */
        margin-top: 50px; /* Space from the top of the screen or preceding elements */
        max-width: 300px; /* Prevents the text from stretching too wide on larger screens */
        margin-left: auto; /* Center the block if it's less than max-width */
        margin-right: auto;
        font-style: italic; /* Adds a friendly, informal touch */
    }
    .slide-in-left {
      animation: slide-in-left 0.3s forwards;
      -webkit-animation: slide-in-left 0.3s forwards;
    }
    @keyframes slide-in-left {
        100% { transform: translateX(0); }
    }

    @-webkit-keyframes slide-in-left {
        100% { -webkit-transform: translateX(0); }
    }
    .slide-in-right {
      animation: slide-in-right 0.3s forwards;
      -webkit-animation: slide-in-right 0.3s forwards;
    }
    @keyframes slide-in-right {
        100% { transform: translateX(0); }
    }

    @-webkit-keyframes slide-in-right {
        100% { -webkit-transform: translateX(0); }
    }

    /* Hide scrollbar for Chrome, Safari, and Opera */
    .scrollable-content::-webkit-scrollbar {
        display: none;
    }

    /* Ensure the element is scrollable */
    .scrollable-content {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
        overflow-y: scroll; /* Or auto, depending on your need */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
    }
    :has(.overlay.active) nav { display: none; }