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

/* Fairway Editorial: sharp corners on all interactive elements */
a[class*="bg-"],
button,
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select,
.btn {
  border-radius: 0.125rem !important;
}

/* Preserve pill badges (admin, status) */
.rounded-full {
  border-radius: 9999px !important;
}

/* Hide scrollbar for mobile carousel */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Sticky offset for document-scrolled headers: clears the iOS status bar in
   standalone (home-screen) mode; env() is 0 in regular browsers. Only for
   elements whose scrollport is the document — keep top-0 inside overflow
   containers. */
.top-safe { top: env(safe-area-inset-top); }

.pairing-page [data-controller~="score-entry"] button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pairing-page [data-controller~="score-entry"] button:not(:disabled):active {
  background-color: var(--color-primary-dark) !important;
  color: white !important;
  transform: scale(0.96);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-tertiary-fixed) 48%, transparent);
}

.public-navigation { position: relative; z-index: 40; background: var(--color-primary-dark); color: #fff; }
.public-navigation-inner { width: min(80rem, calc(100% - 3rem)); min-height: 4rem; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; }
.public-brand-lockup { min-width: 0; display: flex; align-items: center; gap: .7rem; flex: none; }
.public-brand-logo { width: auto; max-width: 7rem; height: 2.6rem; border-radius: .5rem; object-fit: contain; }
.public-brand-mark { width: 2.45rem; height: 2.45rem; flex: none; color: var(--color-tertiary-fixed); }
.public-brand-copy { min-width: 0; }
.public-brand-copy strong { max-width: 10rem; display: block; overflow: hidden; color: #fff; font: 700 .875rem/1.08 "Space Grotesk", sans-serif; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.public-brand-copy small { margin-top: .25rem; display: block; color: var(--color-on-primary-container); font-size: .5rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.public-desktop-links, .public-desktop-account { display: none; }
.public-mobile-toggle { width: 2.25rem; height: 2.25rem; margin-left: auto; border: 0; display: grid; place-items: center; background: var(--color-primary-container); color: #fff; }
.public-mobile-toggle svg { width: 1.25rem; height: 1.25rem; }
.public-mobile-menu { padding: .3rem 1rem 1.05rem; background: var(--color-primary-dark); }
.public-mobile-manage { min-height: 3.4rem; margin-bottom: .45rem; padding: .7rem .8rem; display: flex; align-items: center; gap: .7rem; background: var(--color-tertiary-fixed); color: var(--color-on-tertiary-fixed); }
.public-mobile-manage svg { width: 1.1rem; height: 1.1rem; flex: none; }
.public-mobile-manage span { min-width: 0; flex: 1; }
.public-mobile-manage strong, .public-mobile-manage small { display: block; }
.public-mobile-manage strong { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
.public-mobile-manage small { margin-top: .08rem; overflow: hidden; font-size: .56rem; opacity: .72; text-overflow: ellipsis; white-space: nowrap; }
.public-mobile-link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.public-mobile-link-grid a { min-height: 2.55rem; padding: .65rem .75rem; display: flex; align-items: center; background: color-mix(in srgb, #fff 5%, transparent); color: #fff; font-size: .7rem; }
.public-mobile-account { min-height: 2.8rem; margin-top: .5rem; padding: .7rem .75rem 0; display: flex; align-items: center; gap: .55rem; background: linear-gradient(color-mix(in srgb, var(--color-on-primary-container) 25%, transparent), color-mix(in srgb, var(--color-on-primary-container) 25%, transparent)) top/100% 1px no-repeat; color: var(--color-on-primary-container); font-size: .62rem; }
.public-mobile-account > span { padding: .2rem .45rem; background: #fff; color: var(--color-primary-dark); font-size: .5rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.public-mobile-profile { min-width: 0; overflow: hidden; color: #fff; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.public-mobile-account > a:last-child { margin-left: auto; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.public-tenant-context { background: var(--color-surface-container-lowest); }
.public-tenant-context > div { width: min(80rem, calc(100% - 3rem)); min-height: 2.1rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--color-outline); font-size: .56rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.public-tenant-context strong { color: var(--color-primary-dark); overflow-wrap: anywhere; }
.public-tenant-context i { width: .38rem; height: .38rem; margin-right: .4rem; display: inline-block; background: var(--color-tertiary-fixed); }

@media (min-width: 769px) {
  .public-desktop-links { min-width: 0; align-self: stretch; display: flex; align-items: center; gap: clamp(.8rem, 1.7vw, 1.75rem); }
  .public-desktop-links a { height: 100%; display: inline-flex; align-items: center; color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap; }
  .public-desktop-links a:hover { color: var(--color-on-primary-container); }
  .public-desktop-links a.active { color: var(--color-tertiary-fixed); box-shadow: inset 0 -2px 0 var(--color-tertiary-fixed); }
  .public-desktop-account { margin-left: auto; display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
  .public-manage-entry { min-height: 2.15rem; padding: .5rem .75rem; display: inline-flex; align-items: center; gap: .45rem; background: var(--color-tertiary-fixed); color: var(--color-on-tertiary-fixed); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .public-manage-entry svg { width: .9rem; height: .9rem; }
  .public-profile-entry { display: flex; align-items: center; gap: .5rem; color: #fff; font-size: .72rem; font-weight: 600; }
  .public-profile-entry span { padding: .2rem .42rem; background: color-mix(in srgb, #fff 12%, transparent); color: var(--color-on-primary-container); font-size: .48rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .public-logout-entry { color: var(--color-on-primary-container); font-size: .68rem; }
  .public-mobile-toggle, .public-mobile-menu { display: none !important; }
}

@media (max-width: 1180px) and (min-width: 769px) {
  .public-optional-link { display: none !important; }
  .public-brand-copy small, .public-profile-entry span { display: none; }
}

@media (max-width: 920px) and (min-width: 769px) {
  .public-brand-copy { display: none; }
  .public-navigation-inner { gap: .8rem; }
  .public-desktop-links { gap: .75rem; }
  .public-profile-entry { display: none; }
}

@media (max-width: 768px) {
  .public-navigation-inner { width: 100%; padding: 0 1rem; }
  .public-tenant-context > div { width: 100%; min-height: 1.95rem; padding: .3rem 1rem; }
  .public-tenant-context span:last-child { display: none; }
}