:root {
  --tab-height: 64px;
    --cf-theme-core: var(--cf-code-magic-core);
    /* app background */
    --cf-theme-100: var(--cf-code-magic-100);
    /* subtle background */
    --cf-theme-150: var(--cf-code-magic-150);
    /* UI element background */
    --cf-theme-200: var(--cf-code-magic-200);
    /* hovered UI background */
    --cf-theme-300: var(--cf-code-magic-300);
    /* active UI */
    --cf-theme-400: var(--cf-code-magic-400);
    /* selected UI */
    --cf-theme-500: var(--cf-code-magic-500);
    /* subtle borders and spearators */
    --cf-theme-600: var(--cf-code-magic-600);
    /* element border / focus rings */
    --cf-theme-700: var(--cf-code-magic-700);
    /* hovered border  */
    --cf-theme-800: var(--cf-code-magic-800);
    /* hovered dark backgrounds */
    --cf-theme-850: var(--cf-code-magic-850);
    /* dark backgrounds */
    --cf-theme-900: var(--cf-code-magic-900);
   
    /* #region code-magic */
    --cf-code-magic-core: #f2c864; /* yellow accent */
    --cf-code-magic-100: hsl(192, 77%, 79%); /* turqoise */
    --cf-code-magic-150: hsl(192, 77%, 74%);
    --cf-code-magic-200: #87bbd7;
    --cf-code-magic-300: hsl(192, 77%, 69%);
    --cf-code-magic-400: #f2c864;
    --cf-code-magic-500: hsl(192, 77%, 49%);
    --cf-code-magic-600: hsl(192, 77%, 39%);
    --cf-code-magic-700: hsl(192, 77%, 29%);
    --cf-code-magic-800: hsl(192, 77%, 19%);
    --cf-code-magic-850: hsl(192, 77%, 15%);
    --cf-code-magic-900: hsl(192, 77%, 9%);
    /* #endregion code-magic */
    /* #region blue */
    --cf-blue-core: hsl(216, 98%, 52%);
    --cf-blue-100: hsl(216, 50%, 91%);
    --cf-blue-150: hsl(216, 50%, 86%);
    --cf-blue-200: hsl(216, 50%, 81%);
    --cf-blue-300: hsl(216, 50%, 71%);
    --cf-blue-400: hsl(216, 50%, 61%);
    --cf-blue-500: hsl(216, 50%, 51%);
    --cf-blue-600: hsl(216, 50%, 41%);
    --cf-blue-700: hsl(216, 50%, 31%);
    --cf-blue-800: hsl(216, 50%, 21%);
    --cf-blue-850: hsl(216, 50%, 16%);
    --cf-blue-900: hsl(216, 50%, 11%);
    /* #endregion blue */
    /* #region indigo */
    --cf-indigo-core: #6610f2;
    --cf-indigo-100: hsl(263, 88%, 90%);
    --cf-indigo-150: hsl(263, 88%, 85%);
    --cf-indigo-200: hsl(263, 88%, 80%);
    --cf-indigo-300: hsl(263, 88%, 70%);
    --cf-indigo-400: hsl(263, 88%, 60%);
    --cf-indigo-500: hsl(263, 88%, 50%);
    --cf-indigo-600: hsl(263, 88%, 40%);
    --cf-indigo-700: hsl(263, 88%, 30%);
    --cf-indigo-800: hsl(263, 88%, 20%);
    --cf-indigo-850: hsl(263, 88%, 15%);
    --cf-indigo-900: hsl(263, 88%, 10%);
    /* #endregion indigo */
    /* #region purple */
    --cf-purple-core: #6f42c1;
    --cf-purple-100: hsl(261, 52%, 90%);
    --cf-purple-150: hsl(261, 52%, 85%);
    --cf-purple-200: hsl(261, 52%, 80%);
    --cf-purple-300: hsl(261, 52%, 70%);
    --cf-purple-400: hsl(261, 52%, 60%);
    --cf-purple-500: hsl(261, 52%, 50%);
    --cf-purple-600: hsl(261, 52%, 40%);
    --cf-purple-700: hsl(261, 52%, 30%);
    --cf-purple-800: hsl(261, 52%, 20%);
    --cf-purple-850: hsl(261, 52%, 15%);
    --cf-purple-900: hsl(261, 52%, 10%);
    /* #endregion purple */
    /* #region pink */
    --cf-pink-core: #d63384;
    --cf-pink-100: hsl(331, 47%, 90%);
    --cf-pink-150: hsl(331, 47%, 85%);
    --cf-pink-200: hsl(331, 47%, 80%);
    --cf-pink-300: hsl(331, 47%, 70%);
    --cf-pink-400: hsl(331, 47%, 60%);
    --cf-pink-500: hsl(331, 47%, 50%);
    --cf-pink-600: hsl(331, 47%, 40%);
    --cf-pink-700: hsl(331, 47%, 30%);
    --cf-pink-800: hsl(331, 47%, 20%);
    --cf-pink-850: hsl(331, 47%, 15%);
    --cf-pink-900: hsl(331, 47%, 10%);
    /* #endregion pink */
    /* #region red */
    --cf-red-core: #dc3545;
    --cf-red-100: hsl(355, 70%, 91%);
    --cf-red-150: hsl(355, 70%, 86%);
    --cf-red-200: hsl(355, 70%, 81%);
    --cf-red-300: hsl(355, 70%, 71%);
    --cf-red-400: hsl(355, 70%, 61%);
    --cf-red-500: hsl(355, 70%, 51%);
    --cf-red-600: hsl(355, 70%, 41%);
    --cf-red-700: hsl(355, 70%, 31%);
    --cf-red-800: hsl(355, 70%, 21%);
    --cf-red-850: hsl(355, 70%, 16%);
    --cf-red-900: hsl(355, 70%, 11%);
    /* #endregion red */
    /* #region orange */
    --cf-orange-core: #fd7e14;
    --cf-orange-100: hsl(19, 50%, 91%);
    --cf-orange-150: hsl(19, 50%, 86%);
    --cf-orange-200: hsl(19, 50%, 81%);
    --cf-orange-300: hsl(19, 50%, 71%);
    --cf-orange-400: hsl(19, 50%, 61%);
    --cf-orange-500: hsl(19, 50%, 51%);
    --cf-orange-600: hsl(19, 50%, 41%);
    --cf-orange-700: hsl(19, 50%, 31%);
    --cf-orange-800: hsl(19, 50%, 21%);
    --cf-orange-850: hsl(19, 50%, 16%);
    --cf-orange-900: hsl(19, 50%, 11%);
    /* #endregion orange */
    /* #region yellow */
    --cf-yellow-core: #ffc107;
    --cf-yellow-100: hsl(46, 70%, 90%);
    --cf-yellow-150: hsl(46, 70%, 85%);
    --cf-yellow-200: hsl(46, 70%, 80%);
    --cf-yellow-300: hsl(46, 70%, 70%);
    --cf-yellow-400: hsl(46, 70%, 60%);
    --cf-yellow-500: hsl(46, 70%, 50%);
    --cf-yellow-600: hsl(46, 70%, 40%);
    --cf-yellow-700: hsl(46, 70%, 30%);
    --cf-yellow-800: hsl(46, 70%, 20%);
    --cf-yellow-850: hsl(46, 70%, 15%);
    --cf-yellow-900: hsl(46, 70%, 10%);
    /* #endregion yellow */
    /* #region green */
    --cf-green-core: #198754;
    --cf-green-100: hsl(152, 38%, 95%);
    --cf-green-150: hsl(152, 38%, 90%);
    --cf-green-200: hsl(152, 38%, 85%);
    --cf-green-300: hsl(152, 38%, 75%);
    --cf-green-400: hsl(152, 38%, 65%);
    --cf-green-500: hsl(152, 38%, 55%);
    --cf-green-600: hsl(152, 38%, 45%);
    --cf-green-700: hsl(152, 38%, 35%);
    --cf-green-800: hsl(152, 38%, 25%);
    --cf-green-850: hsl(152, 38%, 20%);
    --cf-green-900: hsl(152, 38%, 15%);
    /* #endregion green */
    /* #region teal */
    --cf-teal-core: #20c997;
    --cf-teal-100: hsl(162, 60%, 89%);
    --cf-teal-150: hsl(162, 60%, 84%);
    --cf-teal-200: hsl(162, 60%, 79%);
    --cf-teal-300: hsl(162, 60%, 69%);
    --cf-teal-400: hsl(162, 60%, 59%);
    --cf-teal-500: hsl(162, 60%, 49%);
    --cf-teal-600: hsl(162, 60%, 39%);
    --cf-teal-700: hsl(162, 60%, 29%);
    --cf-teal-800: hsl(162, 60%, 19%);
    --cf-teal-850: hsl(162, 60%, 14%);
    --cf-teal-900: hsl(162, 60%, 9%);
    /* #endregion teal */
    /* #region cyan */
    --cf-cyan-core: #0dcaf0;
    --cf-cyan-100: hsl(191, 60%, 90%);
    --cf-cyan-150: hsl(191, 60%, 85%);
    --cf-cyan-200: hsl(191, 60%, 80%);
    --cf-cyan-300: hsl(191, 60%, 70%);
    --cf-cyan-400: hsl(191, 60%, 60%);
    --cf-cyan-500: hsl(191, 60%, 50%);
    --cf-cyan-600: hsl(191, 60%, 40%);
    --cf-cyan-700: hsl(191, 60%, 30%);
    --cf-cyan-800: hsl(191, 60%, 20%);
    --cf-cyan-850: hsl(191, 60%, 15%);
    --cf-cyan-900: hsl(191, 60%, 10%);
    /* #endregion cyan */
    /* #region gray */
    --cf-gray-core: #adb5bd;
    --cf-gray-100: hsl(210, 17%, 98%);
    --cf-gray-150: hsl(210, 17%, 93%);
    --cf-gray-200: hsl(210, 17%, 88%);
    --cf-gray-300: hsl(210, 17%, 78%);
    --cf-gray-400: hsl(210, 17%, 68%);
    --cf-gray-500: hsl(210, 17%, 58%);
    --cf-gray-600: hsl(210, 17%, 48%);
    --cf-gray-700: hsl(210, 17%, 38%);
    --cf-gray-800: hsl(210, 17%, 28%);
    --cf-gray-850: hsl(210, 17%, 23%);
    --cf-gray-900: hsl(210, 17%, 18%);
    /* #endregion gray */

}

/* Ensure page content isn't hidden behind the fixed tabs */
.with-bottom-padding { padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px)); }

/* Container for the fixed bottom tabs */
.bottom-tabs {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--tab-height);
  background-color: var(--cf-code-magic-800); 
  border-top: 1px solid var(--cf-blue-600);
  z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom, 10px);
  box-shadow: 0 -4px 18px color-mix(in srgb, var(--cf-code-magic-850) 10%, transparent);
}

/* The row of tabs */
.bottom-tabs .tabs { display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; }

/* Each tab link */
.bottom-tabs .tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; color: var(--cf-code-magic-400); text-decoration: none;
  font-size: .775rem; font-weight: 500;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .08s ease;
}

/* Icon size */
.bottom-tabs .tab .bi { font-size: 1.25rem; line-height: 1; }

/* Glow on hover (for devices that support hover) */
@media (hover: hover) and (pointer: fine) {
  .bottom-tabs .tab:hover {
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: inset 0 3px 0 var(--bs-primary), 0 0 12px color-mix(in srgb, var(--bs-primary) 55%, transparent);
  }
}

/* Glow on press for touch devices */
@media (hover: none) {
  .bottom-tabs .tab:active {
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    transform: translateY(1px);
    box-shadow: inset 0 3px 0 var(--bs-primary), 0 0 10px color-mix(in srgb, var(--bs-primary) 50%, transparent);
  }
}

/* Active tab state */
.bottom-tabs .tab.active { color: var(--cf-teal-900); background-color: var(--cf-green-100); box-shadow: inset 0 3px 0 var(--cf-pink-300); }

/* Optional rounding on wider screens */
@media (min-width: 768px) { .bottom-tabs { border-top-left-radius: 12px; border-top-right-radius: 12px; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { .bottom-tabs .tab { transition: none; } }


html, body {
    font-family: var(--cf-body-font);
    font-size: var(--cf-font-size);
    height: 100%;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cf-title-font);
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cf-title-font);
}



#app{
    height:100%
}

/* #region  Blazor default */

h1:focus {
    outline: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}



.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* #endregion */



.big-check {
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin-top: 0; /* Aligns it better with text */
    border: 2px solid #0d6efd !important; /* Uses Bootstrap Primary color */
    transition: transform 0.2s ease;
}

.big-check:active {
    transform: scale(0.9); /* Squish effect when tapped on S24 */
}

.big-check:checked {
    background-color: #0d6efd;
}


/* Define the jump animation */
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Adjust this to jump higher/lower */
  }
}

/* Create a class to trigger the jump */
.btn-jump {
  animation: jump 1.5s ease infinite; /* 'infinite' keeps it jumping forever */
}

@keyframes irregular-jump {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-12px); } /* Fast jump up */
  40% { transform: translateY(0); }     /* Fast land */
  50% { transform: translateY(-4px); }  /* Small, quick secondary hop */
  60% { transform: translateY(0); }     /* Land */
  80% { transform: translateY(0); }     /* Long pause (Slow feel) */
}

.btn-random-jump {
  /* 'cubic-bezier' adds a custom "snap" to the movement */
  animation: irregular-jump 2s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

/* app.css */

@keyframes alert-jump {
  0%, 10% { transform: translateY(0); }
  20% { transform: translateY(-8px); } /* The "Hey!" jump */
  30% { transform: translateY(0); }
  40% { transform: translateY(-4px); } /* The "Listen!" hop */
  50%, 100% { transform: translateY(0); } /* Long pause to feel 'random' */
}

.btn-save-alert {
  animation: alert-jump 3s ease-in-out infinite;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* Optional: Make it glow slightly so they can't miss it */
.btn-save-alert:not(:hover) {
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); /* Warning yellow glow */
}
/* app.css */

@keyframes shake-horizontal {
  0%, 100% { transform: translateX(0); }
  10%, 30% { transform: translateX(-5px); } /* Move Left */
  20%, 40% { transform: translateX(5px); }  /* Move Right */
  50% { transform: translateX(0); }         /* Back to center */
}

.btn-shake {
  /* 2s duration gives it a nice rhythmic 'reminder' feel */
  animation: shake-horizontal 2s ease-in-out infinite;
}

@keyframes shake-warning {
  0%, 100% { transform: translateX(0); background-color: #0d6efd; } /* Primary Blue */
  20%, 40% { transform: translateX(-5px); background-color: #ffc107; } /* Warning Yellow */
  50% { transform: translateX(0); }
}
.btn-shake-warning {
  animation: shake-warning 2s ease-in-out infinite;
}

@keyframes sleeve-tug {
  0% { transform: translateX(0); }
  5% { transform: translateX(-6px); }
  10% { transform: translateX(5px); }
  15% { transform: translateX(-3px); }
  20% { transform: translateX(2px); }
  25% { transform: translateX(0); }
  100% { transform: translateX(0); } /* Long pause makes the next shake a surprise */
}

.btn-caution {
  animation: sleeve-tug 2.5s ease-in-out infinite;
  /* Optional: a subtle red or orange border to reinforce the warning */
  border: 2px solid #dc3545; 
}


.bounce-icon {
  width: 32px;                 /* adjust 24–32px to fit your button */
  height: 32px;
  object-fit: contain;
  animation: bounce 1.25s ease-in-out infinite;
  will-change: transform;
  cursor: pointer;             /* make it feel clickable */
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-6px); }
  60%      { transform: translateY(-2px); }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .bounce-icon { animation: none; }
}

/* Optional: pause bounce when modal is open */
.modal.show ~ .d-inline-flex .bounce-icon,
.modal.show .bounce-icon {
  animation-play-state: paused;
}

/* ~1/3 of viewport height on small screens */
@media (max-width: 3000px) {
  .modal-mobile-1of3 .modal-content {
    height: 50vh;                  /* target height */
    max-height: 70vh;              /* small safety cap */
    display: flex;
    flex-direction: column;
  }

  .modal-mobile-1of3 .modal-body {
    overflow: auto;                /* scroll inner content if needed */
    -webkit-overflow-scrolling: touch;
  }
}