@import url("./refinements.css");
@import url("./app-shell.css");
@import url("./archive-picker.css");
@import url("./notification-settings.css");
@import url("./site-menu.css");
@import url("./pwa-install.css");
@import url("./native-parity.css");

.site-view[hidden] {
  display: none !important;
}

.site-nav a[aria-current="page"] {
  font-weight: 850;
}

.site-view--alerts .alerts-list {
  grid-template-columns: minmax(0, 1fr);
}

/* Keep the three desktop dashboard columns visually balanced while allowing
 * each traffic-heavy region to scroll independently. */
@media (min-width: 1100px) {
  body[data-layout="dashboard"] {
    display: flex;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    flex-direction: column;
  }

  body[data-layout="dashboard"] .site-header,
  body[data-layout="dashboard"] .site-footer {
    flex: 0 0 auto;
  }

  body[data-layout="dashboard"] .site-main {
    min-height: 0;
    flex: 1 1 0;
    align-items: stretch;
    overflow: hidden;
  }

  body[data-layout="dashboard"] .site-view--scanner,
  body[data-layout="dashboard"] .site-view--alerts,
  body[data-layout="dashboard"] .site-view--archive {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-layout="dashboard"] .scanner-panel,
  body[data-layout="dashboard"] .alerts-panel,
  body[data-layout="dashboard"] .archive-panel {
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }

  body[data-layout="dashboard"] .scanner-panel,
  body[data-layout="dashboard"] .archive-panel {
    display: flex;
    flex-direction: column;
  }

  /* Desktop mirrors mobile, but keeps the Now Playing block compact. The
   * action row is part of the card instead of consuming a second full-height
   * band underneath it. */
  body[data-layout="dashboard"] .scanner-display {
    box-sizing: border-box;
    height: 188px;
    min-height: 188px;
    max-height: 188px;
    overflow: hidden;
  }

  body[data-layout="dashboard"] .scanner-display__topline {
    min-height: 36px;
    padding-block: 8px;
  }

  body[data-layout="dashboard"] .scanner-display__content {
    box-sizing: border-box;
    height: 88px;
    min-height: 88px;
    max-height: 88px;
    padding: 10px 14px 6px;
    overflow: hidden;
  }

  body[data-layout="dashboard"] .scanner-display[data-state="waiting"] .scanner-display__system,
  body[data-layout="dashboard"] .scanner-display[data-state="playing"] .scanner-display__system {
    display: none;
  }

  body[data-layout="dashboard"] .scanner-display__details {
    margin-top: 5px;
  }

  body[data-layout="dashboard"] .scanner-display__progress {
    display: none;
  }

  body[data-layout="dashboard"] .scanner-control-stack {
    position: relative;
    z-index: 2;
    margin-top: -52px;
    padding: 0 8px 8px;
    flex: 0 0 auto;
  }

  /* Keep the controls visually inside Now Playing without adding a dark footer
   * slab. Each button carries its own contrast against the active backlight. */
  body[data-layout="dashboard"] .scanner-display[data-state="playing"] + .scanner-control-stack {
    background: transparent;
    box-shadow: none;
  }

  body[data-layout="dashboard"] .scanner-display[data-state="playing"] + .scanner-control-stack .scanner-action-button:not(:disabled) {
    border-color: var(--accent);
    background: var(--selected-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  }

  body[data-layout="dashboard"] .scanner-display[data-state="playing"] + .scanner-control-stack .scanner-action-button:disabled {
    border-color: var(--border-strong);
    background: var(--panel-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    opacity: 0.82;
  }

  body[data-layout="dashboard"] .scanner-action-button {
    min-height: 44px;
    padding: 6px 5px;
    border-radius: 10px;
    font-size: 0.7rem;
  }

  body[data-layout="dashboard"] .scanner-display[data-state="paused"] .scanner-display__content,
  body[data-layout="dashboard"] .scanner-display[data-state="avoided"] .scanner-display__content {
    box-sizing: border-box;
    height: 116px;
    min-height: 116px;
    max-height: 116px;
    margin: 10px;
    padding: 10px 12px;
  }

  body[data-layout="dashboard"] .recent-section {
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-layout="dashboard"] .activity-pane--recent {
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-layout="dashboard"] .activity-pane--recent > .section-heading {
    flex: 0 0 auto;
  }

  body[data-layout="dashboard"] .recent-list {
    min-height: 0;
    max-height: none;
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    -webkit-overflow-scrolling: touch;
  }

  body[data-layout="dashboard"] .recent-list:hover {
    scrollbar-color: var(--border-strong) transparent;
  }

  body[data-layout="dashboard"] .archive-heading,
  body[data-layout="dashboard"] .archive-controls,
  body[data-layout="dashboard"] .archive-results-heading,
  body[data-layout="dashboard"] .archive-pagination {
    flex: 0 0 auto;
  }

  body[data-layout="dashboard"] .archive-heading > div > p:last-child {
    margin-top: 3px;
    font-size: 0.66rem;
    line-height: 1.25;
  }

  body[data-layout="dashboard"] .archive-controls {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
  }

  body[data-layout="dashboard"] .archive-field select,
  body[data-layout="dashboard"] .archive-field input {
    height: 36px;
  }

  body[data-layout="dashboard"] .archive-field__hint {
    display: none;
  }

  body[data-layout="dashboard"] .archive-message:empty {
    display: none;
  }

  body[data-layout="dashboard"] .archive-results-heading {
    align-items: flex-end;
    flex-direction: row;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
  }

  body[data-layout="dashboard"] .archive-results-heading p {
    margin: 0 0 1px auto;
    font-size: 0.66rem;
    line-height: 1.25;
    text-align: right;
  }

  body[data-layout="dashboard"] .archive-results {
    min-height: 0;
    max-height: none;
    flex: 1 1 0;
    margin-top: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body[data-layout="dashboard"] .archive-result {
    gap: 6px;
    padding: 8px 9px;
  }

  body[data-layout="dashboard"] .archive-result__meta {
    margin-top: 3px;
  }

  body[data-layout="dashboard"] .archive-mini-player {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 8px;
  }

  body[data-layout="dashboard"] .archive-mini-player .mini-player__toggle {
    width: 58px;
    min-width: 58px;
    height: 32px;
    padding: 0 8px;
  }

  body[data-layout="dashboard"] .archive-mini-player .mini-player__progress {
    grid-column: 2;
    grid-row: 1;
    height: 24px;
    margin-inline: 2px;
    width: calc(100% - 4px);
  }

  body[data-layout="dashboard"] .archive-mini-player .mini-player__time {
    grid-column: 3;
    grid-row: 1;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  body[data-layout="dashboard"] .archive-pagination {
    margin-top: 8px;
  }

  /* Keep independent dashboard scrollers without the browser's heavy native
   * scrollbar chrome. The thumb stays hidden until the scroll region is
   * hovered, then appears as a narrow rounded indicator. */
  body[data-layout="dashboard"] .recent-list,
  body[data-layout="dashboard"] .alerts-list,
  body[data-layout="dashboard"] .archive-results {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  body[data-layout="dashboard"] .recent-list:hover,
  body[data-layout="dashboard"] .alerts-list:hover,
  body[data-layout="dashboard"] .archive-results:hover {
    scrollbar-color: var(--border-strong) transparent;
  }

  body[data-layout="dashboard"] .recent-list::-webkit-scrollbar,
  body[data-layout="dashboard"] .alerts-list::-webkit-scrollbar,
  body[data-layout="dashboard"] .archive-results::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  body[data-layout="dashboard"] .recent-list::-webkit-scrollbar-track,
  body[data-layout="dashboard"] .alerts-list::-webkit-scrollbar-track,
  body[data-layout="dashboard"] .archive-results::-webkit-scrollbar-track {
    background: transparent;
  }

  body[data-layout="dashboard"] .recent-list::-webkit-scrollbar-thumb,
  body[data-layout="dashboard"] .alerts-list::-webkit-scrollbar-thumb,
  body[data-layout="dashboard"] .archive-results::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: transparent;
  }

  body[data-layout="dashboard"] .recent-list:hover::-webkit-scrollbar-thumb,
  body[data-layout="dashboard"] .alerts-list:hover::-webkit-scrollbar-thumb,
  body[data-layout="dashboard"] .archive-results:hover::-webkit-scrollbar-thumb {
    background: var(--border-strong);
  }

  body[data-layout="dashboard"] .recent-list::-webkit-scrollbar-button,
  body[data-layout="dashboard"] .alerts-list::-webkit-scrollbar-button,
  body[data-layout="dashboard"] .archive-results::-webkit-scrollbar-button {
    display: none;
  }
}

/* iOS Safari gives datetime-local controls a stubborn intrinsic inline size.
 * Constrain both the host control and its WebKit editing box without removing
 * the native date/time picker affordance. */
@media (max-width: 680px) {
  .archive-field {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  #archive-at {
    display: block;
    box-sizing: border-box;
    width: 100%;
    inline-size: 100%;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    max-width: 100%;
    max-inline-size: 100%;
    overflow: hidden;
  }

  #archive-at::-webkit-date-and-time-value,
  #archive-at::-webkit-datetime-edit {
    min-width: 0;
    max-width: 100%;
  }

  @supports (-webkit-touch-callout: none) {
    #archive-at {
      width: -webkit-fill-available;
    }
  }

  /* Keep the fixed-height scanner card, but reserve enough usable space for
   * two-line talkgroup names plus the status/detail line instead of clipping
   * the bottom pixels or forcing an ellipsis. */
  .scanner-display__talkgroup {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    font-size: clamp(16px, 4.8vw, 20px);
    font-weight: 750;
    line-height: 1.1;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .scanner-state,
  .queue-count {
    font-weight: 750;
  }

  .scanner-display__details {
    box-sizing: border-box;
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    margin-top: 2px;
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
  }

  .scanner-action-button,
  .mobile-activity-tab,
  .recent-item__meta,
  .recent-item__name,
  .recent-item__replay {
    font-weight: 700;
  }

  .mobile-activity-tab {
    font-size: 15px;
  }

  /* Match the native recent-call card geometry: timestamp top-right,
   * talkgroup bottom-left, Replay bottom-right. Keeping Replay absolutely
   * anchored prevents the timestamp column from squeezing the talkgroup name. */
  .recent-item {
    position: relative;
    display: block;
    min-height: 78px;
    padding: 11px 82px 11px 12px;
  }

  .recent-item__main {
    display: grid;
    min-width: 0;
    min-height: 56px;
    grid-template-rows: auto 1fr;
    row-gap: 8px;
  }

  .recent-item__meta {
    grid-row: 1;
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
  }

  .recent-item__name {
    grid-row: 2;
    align-self: end;
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recent-item time {
    position: absolute;
    top: 11px;
    right: 12px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
  }

  .recent-item__replay {
    position: absolute;
    right: 12px;
    bottom: 11px;
    width: 62px;
    min-width: 62px;
    min-height: 34px;
    padding: 0 7px;
    font-size: 11.5px;
    font-weight: 700;
  }

  /* A failed HTMLAudioElement.play() is Safari/browser autoplay blocking, not
   * a scanner-state concept. Keep Now Playing in the card and expose the real
   * recovery action on the power button instead of "Playback Needs Attention". */
  .scanner-panel:has(#scanner-power[data-state="running"]):has(#scanner-display[data-state="playing"]):has(#pause-call:disabled) .scanner-state {
    font-size: 0;
  }

  .scanner-panel:has(#scanner-power[data-state="running"]):has(#scanner-display[data-state="playing"]):has(#pause-call:disabled) .scanner-state::after {
    content: "Now Playing";
    font-size: 13px;
  }

  .scanner-panel:has(#scanner-power[data-state="running"]):has(#scanner-display[data-state="playing"]):has(#pause-call:disabled) .scanner-power__copy strong::after {
    content: "Resume Playback";
  }

  .scanner-panel:has(#scanner-power[data-state="running"]):has(#scanner-display[data-state="playing"]):has(#pause-call:disabled) .scanner-power__copy small::after {
    content: "Tap to Continue";
  }

  /* The mobile scanner is a fixed viewport shell. Header, power control,
   * Now Playing, action controls, and activity tabs stay put; only the active
   * Recently Played/Alerts pane is allowed to scroll. */
  body[data-site-view="scanner"],
  body[data-site-view="alerts"] {
    display: flex;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    flex-direction: column;
    overscroll-behavior: none;
  }

  body[data-site-view="scanner"] .site-header,
  body[data-site-view="alerts"] .site-header {
    position: relative;
    flex: 0 0 auto;
  }

  body[data-site-view="scanner"] .site-main,
  body[data-site-view="alerts"] .site-main {
    min-height: 0;
    padding-bottom: 0;
    flex: 1 1 0;
    overflow: hidden;
  }

  body[data-site-view="scanner"] .site-view--scanner,
  body[data-site-view="alerts"] .site-view--scanner {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-site-view="scanner"] .scanner-panel,
  body[data-site-view="alerts"] .scanner-panel {
    display: flex;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
  }

  body[data-site-view="scanner"] .scanner-power,
  body[data-site-view="alerts"] .scanner-power,
  body[data-site-view="scanner"] .scanner-display,
  body[data-site-view="alerts"] .scanner-display,
  body[data-site-view="scanner"] .scanner-control-stack,
  body[data-site-view="alerts"] .scanner-control-stack,
  body[data-site-view="scanner"] .mobile-activity-tabs,
  body[data-site-view="alerts"] .mobile-activity-tabs {
    flex: 0 0 auto;
  }

  body[data-site-view="scanner"] .recent-section,
  body[data-site-view="alerts"] .recent-section {
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-site-view="scanner"] .activity-pane--recent,
  body[data-site-view="scanner"] .activity-pane--alerts,
  body[data-site-view="alerts"] .activity-pane--recent,
  body[data-site-view="alerts"] .activity-pane--alerts {
    min-height: 0;
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}