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

/* Self-hosted fonts (GDPR-compliant, no external requests) */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/bebas-neue-400-23d6a164.woff2") format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/barlow-400-47c07709.woff2") format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/barlow-500-078cf4a1.woff2") format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/barlow-600-81a96cd2.woff2") format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/barlow-700-d0f827ec.woff2") format('woff2');
}

.font-display { font-family: 'Bebas Neue', sans-serif; }
.font-body { font-family: 'Barlow', sans-serif; }


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

    /* Cross-document page transitions (MPA View Transitions API)
       Opt in to browser-native transitions for same-origin navigations.
       Unsupported browsers ignore this entirely — no fallback needed. */
    @view-transition {
      navigation: auto;
    }

    /* Keep the navbar stable across page transitions */
    nav[data-nav] {
      view-transition-name: navbar;
    }

    /* Material Design "Fade Through" transition for lateral navigation.
       Old content fades out + scales down, new content fades in + scales up. */
    ::view-transition-old(root) {
      animation: vt-fade-through-out 90ms cubic-bezier(0.4, 0, 1, 1) both;
    }

    ::view-transition-new(root) {
      animation: vt-fade-through-in 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both;
    }

    /* Navbar stays put — no animation */
    ::view-transition-old(navbar),
    ::view-transition-new(navbar) {
      animation: none;
    }

    @keyframes vt-fade-through-out {
      to { opacity: 0; transform: scale(0.92); }
    }

    @keyframes vt-fade-through-in {
      from { opacity: 0; transform: scale(1.08); }
    }

    /* Belt progression timeline */
    @keyframes timeline-fade-in {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .timeline-entry {
      opacity: 0;
      animation: timeline-fade-in 0.4s ease-out forwards;
    }
    .stripe-mark {
      width: 6px;
      height: 2px;
      border-radius: 1px;
    }

    /* ── Offline / online status bar ─────────────────────────────────────── */

    /* Always present in the DOM; hidden above viewport when connected.
       Visibility is driven entirely by CSS classes on <html>:
         html.is-offline       → offline state (dark charcoal + amber)
         html.is-back-online   → reconnected state (teal) — auto-dismissed after 4 s
       The <html> element is never replaced by Turbo or view transitions, so
       these classes (and therefore the bar) persist across every navigation. */
    #offline-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: 44px;
      overflow: hidden;
      /* Default: parked above the viewport */
      transform: translateY(-100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  background-color 0.45s ease;
      background-color: #1c2527; /* primary-950 */
      border-bottom: 1px solid rgba(245, 158, 11, 0.15);
      pointer-events: none;
    }

    /* Slide bar down and style it when offline */
    html.is-offline #offline-bar {
      transform: translateY(0);
      background-color: #1c2527;
      border-bottom-color: rgba(245, 158, 11, 0.2);
    }

    /* Slide bar down and transition to teal when back online */
    html.is-back-online #offline-bar {
      transform: translateY(0);
      background-color: #485a5c; /* primary-700 */
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    /* Push page content down so the bar doesn't overlap it */
    html.is-offline body,
    html.is-back-online body {
      padding-top: 44px;
    }

    /* Content slots — stacked, cross-faded via opacity */
    .offline-bar-slot {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 10px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    html.is-offline .offline-bar-slot--offline,
    html.is-back-online .offline-bar-slot--online {
      opacity: 1;
    }

    /* Pulsing wifi-off icon (offline state) */
    @keyframes offline-icon-pulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.35; }
    }

    .offline-icon-pulse {
      animation: offline-icon-pulse 2s ease-in-out infinite;
    }

    /* Spinning refresh icon (back-online / syncing state) */
    @keyframes offline-icon-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    .offline-icon-spin {
      animation: offline-icon-spin 1s linear infinite;
    }

    /* Pending card entrance (offline-saved items in index lists) */
    @keyframes pending-appear {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0);    }
    }

    .offline-pending-card,
    .offline-failed-card {
      animation: pending-appear 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    }