/* StreetMate native-app polish layer — frontend only, no API/backend changes. */
:root{
  --app-radius-xs:12px;
  --app-radius-sm:16px;
  --app-radius:22px;
  --app-radius-lg:28px;
  --app-gap:14px;
  --app-pad:16px;
  --app-card:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032)),rgba(12,18,28,.88);
  --app-border:rgba(255,255,255,.105);
  --app-shadow:0 16px 42px rgba(0,0,0,.26);
  --app-soft-shadow:0 10px 28px rgba(0,0,0,.18);
  --app-ease:cubic-bezier(.2,.8,.2,1);
}

body{
  margin:0;
  text-rendering:optimizeLegibility;
}

.top,
.admin-top{
  min-height:64px;
  height:64px;
  border-bottom-color:rgba(255,255,255,.075);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}

.top .mark,
.admin-brand .brand-mark{
  transform:scale(.92);
}

.site-nav a,
.site-nav button,
.admin-top-actions a,
.admin-top-actions button,
.account-trigger{
  border-radius:999px;
}

.dashboard,
.venues-main,
.route-main.has-content,
.my-main{
  box-sizing:border-box;
  padding-top:18px;
}

.hero,
.venues-hero,
.route-main.has-content .route-intro,
.my-hero{
  padding-top:22px!important;
  padding-bottom:18px!important;
  margin-bottom:14px!important;
}

.hero h1,
.venues-hero h1,
.route-main.has-content .route-intro h1,
.my-hero h1{
  margin-block:8px 8px;
  letter-spacing:-.06em;
}

.hero>p,
.venues-hero p,
.route-main.has-content .route-intro p,
.my-hero p{
  margin-top:8px;
  max-width:620px;
}

.dashboard-section,
.section,
.catalog-results,
.events-catalog,
.my-panel{
  scroll-margin-top:76px;
}

.dashboard-section{
  padding-top:24px;
  padding-bottom:24px;
}

.dashboard-heading,
.catalog-heading,
.events-result-head,
.section-heading{
  margin-bottom:12px;
}

.dashboard-heading h2,
.catalog-heading h2,
.events-result-head h2,
.section-heading h2{
  letter-spacing:-.055em;
}

.dashboard-carousel{
  gap:12px;
  padding-block:2px 6px;
  scroll-snap-type:x proximity;
}

.dashboard-venue,
.dashboard-event,
.dashboard-signal,
.catalog-card,
.event-card,
.route-signal-card,
.my-card,
.admin-card,
.metric-card,
.table-card{
  border-radius:var(--app-radius);
  border-color:var(--app-border);
  background:var(--app-card);
  box-shadow:var(--app-soft-shadow);
  transition:transform .18s var(--app-ease),border-color .18s var(--app-ease),box-shadow .18s var(--app-ease);
}

.dashboard-venue:hover,
.dashboard-event:hover,
.dashboard-signal:hover,
.catalog-card:hover,
.event-card:hover,
.my-card:hover,
.admin-card:hover{
  transform:translateY(-2px);
  border-color:rgba(37,239,255,.28);
  box-shadow:var(--app-shadow);
}

.catalog-card-visual,
.event-card-accent,
.dashboard-venue-art,
.dashboard-event-art,
.my-card-photo{
  height:124px;
  border-radius:0;
}

.catalog-card-body,
.event-card-body,
.dashboard-venue-body,
.dashboard-event-body,
.dashboard-signal,
.my-card-body{
  padding:14px;
}

.catalog-card-body h3,
.event-card-title h3,
.dashboard-venue h3,
.dashboard-event h3,
.my-card h2{
  margin-bottom:4px;
  font-size:clamp(18px,5vw,22px);
  line-height:1.05;
}

.catalog-address,
.event-card-meta,
.dashboard-venue p,
.dashboard-event p,
.my-meta{
  font-size:11px;
  line-height:1.35;
}

.catalog-tags,
.catalog-card-footer>span,
.event-card-meta>span:nth-child(n+4){
  display:none;
}

.catalog-badges,
.event-card-meta{
  margin:10px 0;
  gap:5px;
}

.status-badge,
.catalog-tags span,
.event-card-meta>span,
.my-badge{
  padding:5px 7px;
  font-size:8px;
}

.catalog-card-footer,
.event-detail-toggle,
.my-actions{
  margin-top:10px;
}

.catalog-card-footer .btn,
.event-detail-toggle,
.dashboard-detail-toggle,
.my-actions a,
.my-actions button{
  min-height:42px;
  border-radius:14px;
}

.report-inline-button{
  opacity:.55;
  transform:scale(.92);
  transform-origin:left center;
}

.report-inline-button:hover{
  opacity:1;
}

.catalog-inline-detail,
.event-inline-detail,
.venue-detail-shell{
  border-radius:0 0 var(--app-radius) var(--app-radius);
}

.inline-detail-facts,
.event-detail-facts,
.venue-info-grid,
.venue-detail-facts{
  gap:8px;
}

.inline-detail-facts article,
.event-detail-facts article,
.venue-detail-facts article,
.venue-info-grid article{
  border-radius:14px;
  padding:12px;
}

.map-route .route-intro{
  margin-bottom:14px!important;
}

.map-toolbar{
  margin-bottom:8px;
}

.map-stage{
  height:clamp(620px,78vh,920px);
  border-radius:24px;
}

footer{
  padding-top:22px!important;
  padding-bottom:22px!important;
  font-size:12px;
  opacity:.82;
}

.filter-sheet-head,
.mobile-filter-toggle{
  display:none;
}

.filter-sheet{
  display:contents;
}

.my-hero .btn,
.my-card .primary{
  box-shadow:0 12px 32px rgba(37,239,255,.18);
}

.my-card{
  overflow:hidden;
}

.my-card-photo{
  height:118px;
}

.my-actions{
  grid-template-columns:1fr;
}

.my-events-panel{
  border-radius:18px;
  padding:10px;
}

.my-event-row{
  border-radius:16px;
  padding:12px;
}

.admin-sidebar,
.admin-main,
.admin-section,
.table-card,
.admin-dialog,
.dialog-section,
.metric-card{
  transition:border-color .18s var(--app-ease),background .18s var(--app-ease),transform .18s var(--app-ease);
}

.admin-main{
  padding-top:22px;
}

.section-heading{
  position:sticky;
  top:64px;
  z-index:12;
  padding:12px;
  margin:-12px -12px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(7,11,18,.86);
  backdrop-filter:blur(18px);
}

.table-card{
  overflow:hidden;
}

.table-scroll table{
  border-spacing:0 6px;
}

.table-scroll tbody tr{
  transition:transform .16s var(--app-ease),background .16s var(--app-ease);
}

.table-scroll tbody tr:hover{
  transform:translateY(-1px);
}

.row-actions button,
.admin-primary,
.section-actions button{
  min-height:40px;
  border-radius:12px;
}

.admin-dialog,
.my-dialog-card,
.account-dialog,
.sm-signal-dialog,
.signal-dialog,
.place-dialog{
  animation:sheet-in .22s var(--app-ease) both;
}

@keyframes sheet-in{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}

@media(max-width:767px){
  :root{--app-pad:12px;--sm-gutter:12px;--sm-nav:68px}

  .top,
  .route-page .top,
  .admin-top{
    min-height:56px!important;
    height:56px!important;
    padding:7px 10px!important;
  }

  .top .logo,
  .route-page .logo,
  .admin-brand{
    font-size:16px!important;
  }

  .top .mark,
  .route-page .mark{
    width:32px!important;
    height:31px!important;
  }

  .dashboard,
  .venues-main,
  .route-main.has-content,
  .my-main{
    width:min(100% - 20px,430px)!important;
    padding-top:10px!important;
    padding-bottom:calc(34px + var(--sm-nav))!important;
  }

  .hero,
  .venues-hero,
  .route-main.has-content .route-intro,
  .my-hero{
    padding-top:14px!important;
    padding-bottom:10px!important;
    margin-bottom:10px!important;
  }

  .hero h1,
  .venues-hero h1,
  .route-main.has-content .route-intro h1,
  .my-hero h1{
    font-size:clamp(34px,10vw,46px)!important;
    line-height:.94!important;
  }

  .route-icon{
    display:none!important;
  }

  .hero>p,
  .venues-hero p,
  .route-main.has-content .route-intro p,
  .my-hero p{
    font-size:13px!important;
    line-height:1.4!important;
  }

  .dashboard-section,
  .section{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }

  .dashboard-heading h2,
  .catalog-heading h2,
  .events-result-head h2,
  .section-heading h2{
    font-size:clamp(24px,7vw,32px)!important;
  }

  .mobile,
  .route-page .mobile{
    grid-template-columns:repeat(5,minmax(0,1fr));
    height:calc(var(--sm-nav) + env(safe-area-inset-bottom))!important;
  }

  .mobile a,
  .mobile button{
    min-height:56px!important;
    font-size:8px!important;
  }

  .catalog-controls,
  .events-catalog{
    position:relative;
  }

  .catalog-controls{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:8px!important;
    margin:12px 0 20px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .catalog-search,
  .events-search{
    min-height:48px!important;
    height:48px!important;
    border-radius:16px!important;
  }

  .catalog-search{grid-column:auto!important}

  .mobile-filter-toggle{
    min-width:88px;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font:inherit;
    font-size:12px;
    font-weight:900;
  }

  .filter-sheet{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:120;
    display:grid;
    gap:12px;
    max-height:min(78svh,620px);
    padding:14px 14px calc(18px + env(safe-area-inset-bottom));
    border:1px solid rgba(255,255,255,.12);
    border-radius:26px 26px 0 0;
    background:rgba(8,13,22,.98);
    box-shadow:0 -22px 70px rgba(0,0,0,.42);
    backdrop-filter:blur(22px);
    overflow:auto;
    transform:translateY(105%);
    opacity:0;
    pointer-events:none;
    transition:transform .24s var(--app-ease),opacity .24s var(--app-ease);
  }

  .filter-sheet[data-open="true"]{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .filter-sheet-head{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  .filter-sheet-head strong{
    font-size:16px;
  }

  .filter-sheet-head button{
    width:40px;
    min-height:40px;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:20px;
  }

  .filter-sheet label,
  .filter-sheet .event-time-filters{
    width:100%;
  }

  .filter-sheet select{
    width:100%;
  }

  .filter-sheet .catalog-toggle{
    min-height:52px;
    justify-content:flex-start;
  }

  .filter-sheet .event-time-filters{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .filter-sheet .event-time-filters button:first-child{
    grid-column:1/-1;
  }

  .catalog-card,
  .event-card{
    display:grid;
    grid-template-columns:104px 1fr;
    min-height:136px;
  }

  .catalog-card.expanded,
  .event-card.expanded{
    display:block;
  }

  .catalog-card-visual,
  .event-card-accent{
    height:100%!important;
    min-height:136px;
  }

  .catalog-card.expanded .catalog-card-visual,
  .event-card.expanded .event-card-accent{
    height:150px!important;
  }

  .catalog-card-icon,
  .event-card-accent i{
    font-size:30px!important;
  }

  .catalog-card-body,
  .event-card-body{
    padding:12px!important;
  }

  .catalog-address{
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .catalog-badges .status-badge:nth-child(n+4),
  .event-card-meta span:nth-child(n+4){
    display:none;
  }

  .catalog-card-footer{
    align-items:stretch!important;
    padding-top:8px!important;
    margin-top:8px!important;
  }

  .map-route{
    padding-top:12px!important;
  }

  .map-stage{
    height:calc(100svh - 190px)!important;
    min-height:560px!important;
    border-radius:22px!important;
  }

  .map-mode-switch{
    margin-bottom:8px!important;
  }

  .map-filters{
    border-radius:16px!important;
  }

  .my-card{
    display:grid;
    grid-template-columns:96px 1fr;
    min-height:126px;
  }

  .my-card-photo{
    height:100%;
    min-height:126px;
  }

  .my-card-body{
    gap:8px;
    padding:12px!important;
  }

  .my-actions{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .my-actions .wide,
  .my-events-panel{
    grid-column:1/-1;
  }

  .my-dialog{
    width:100%!important;
    max-width:none!important;
    height:100dvh;
    max-height:100dvh;
  }

  .my-dialog-card{
    min-height:100dvh;
    border-radius:0!important;
    display:flex;
    flex-direction:column;
  }

  .my-dialog-body{
    flex:1;
    max-height:none!important;
  }

  .my-dialog-actions{
    position:sticky;
    bottom:0;
    padding-top:10px;
    background:#101823;
  }

  footer{
    padding:16px 12px calc(18px + var(--sm-nav))!important;
    gap:6px!important;
  }

  .admin-top{
    position:sticky;
    top:0;
    z-index:60;
  }

  .admin-top-actions span,
  .prototype-alert strong{
    display:none;
  }

  .admin-shell{
    display:block!important;
  }

  .admin-sidebar{
    top:56px!important;
  }

  .admin-main{
    padding:14px 10px calc(42px + env(safe-area-inset-bottom))!important;
  }

  .section-heading{
    top:56px;
    margin:0 0 12px!important;
    padding:10px!important;
    border-radius:18px;
  }

  .section-heading p{
    display:none;
  }

  .metric-grid,
  .quick-actions,
  .dashboard-grid,
  .accounts-grid,
  .city-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .metric-card{
    min-height:88px!important;
  }

  .table-scroll{
    overflow:visible!important;
  }

  .table-scroll table,
  .table-scroll thead,
  .table-scroll tbody,
  .table-scroll tr,
  .table-scroll td{
    display:block;
    width:100%;
  }

  .table-scroll thead{
    display:none;
  }

  .table-scroll tbody{
    display:grid;
    gap:10px;
  }

  .table-scroll tr{
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    padding:10px;
    background:rgba(255,255,255,.04);
  }

  .table-scroll td{
    border:0!important;
    padding:6px 2px!important;
  }

  .row-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:6px!important;
  }

  .row-actions button{
    width:100%;
  }

  .admin-dialog,
  .admin-dialog:has(.dialog-section){
    width:100%!important;
    max-width:none!important;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border-radius:0!important;
  }

  .admin-dialog-card,
  .dialog-card{
    min-height:100dvh;
    border-radius:0!important;
  }

  .dialog-grid,
  .dialog-body,
  .admin-dialog form{
    grid-template-columns:1fr!important;
  }

  .dialog-section{
    border-radius:18px!important;
    padding:14px!important;
  }
}

@media(max-width:340px){
  .my-main{
    width:calc(100% - 16px)!important;
  }

  .my-card,
  .my-event-row{
    grid-template-columns:80px minmax(0,1fr)!important;
    min-width:0!important;
  }

  .my-card-body,
  .my-card-body *,
  .my-event-row,
  .my-event-row *{
    min-width:0!important;
  }

  .my-actions,
  .my-card-actions{
    grid-template-columns:1fr!important;
  }

  .my-actions .btn,
  .my-actions button,
  .my-card-actions .btn,
  .my-card-actions button{
    width:100%;
  }
}

@media(min-width:768px){
  .dashboard-venue,
  .dashboard-event,
  .dashboard-signal{
    min-height:0;
  }

  .venues-hero,
  .route-main.has-content .route-intro{
    padding-top:38px!important;
  }
}

/* Public navigation: keep favorites next to the account/profile action. */
.top .nav-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-left:auto;
  flex:0 0 auto;
}
.top .nav-favorite-link{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:850;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.top .nav-favorite-link:hover,
.top .nav-favorite-link:focus-visible,
.top .nav-favorite-link[aria-current="page"]{
  color:#031018;
  background:linear-gradient(135deg,var(--cyan),#8df9ff);
  border-color:transparent;
  box-shadow:0 14px 34px rgba(0,0,0,.22),0 0 0 5px rgba(37,239,255,.06);
}
.top .nav-favorite-icon{
  font-size:16px;
  line-height:1;
}
.top .nav-actions .login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
}
.catalog-favorites-link{
  width:max-content;
  max-width:100%;
  min-height:42px;
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 15px;
  border:1px solid rgba(37,239,255,.25);
  border-radius:999px;
  background:rgba(37,239,255,.075);
  color:#dffcff;
  font-size:12px;
  font-weight:850;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.catalog-favorites-link:hover,
.catalog-favorites-link:focus-visible{
  color:#031018;
  background:var(--cyan);
  border-color:transparent;
  box-shadow:0 14px 32px rgba(37,239,255,.16);
}
@media(max-width:900px){
  body:has(.mobile) .top .nav-actions .login{
    display:inline-flex!important;
  }
  .top .nav-actions{
    gap:7px;
    min-width:0;
  }
  .top .nav-favorite-link{
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    border-radius:16px;
  }
  .top .nav-favorite-text{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }
  .top .nav-actions .login{
    min-width:44px!important;
    min-height:44px!important;
    padding-inline:10px!important;
    border-radius:16px!important;
  }
  .top .nav-actions .login:not(.account-trigger){
    font-size:0!important;
  }
  .top .nav-actions .login:not(.account-trigger)>span[aria-hidden="true"]{
    font-size:17px!important;
  }
  .top .nav-actions .login.account-trigger .account-name{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }
}
@media(max-width:374px){
  .top .nav-actions{gap:5px}
  .top .nav-favorite-link{
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
  }
  .top .nav-actions .login{
    min-width:40px!important;
    min-height:40px!important;
    padding-inline:8px!important;
  }
}