/* Mobile-first behavior layered on top of Bulma.
   Do not override native/Bulma select rendering here. */

.mobile-app-bar,
.mobile-nav-backdrop,
.mobile-filter-toggle,
.mobile-sort-control{display:none}

@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  body.mobile-nav-open{overflow:hidden}

  .mobile-app-bar{
    position:sticky;
    top:0;
    z-index:45;
    display:flex;
    align-items:center;
    gap:.75rem;
    min-height:60px;
    padding:.65rem .9rem;
    background:var(--sidebar);
    color:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,.18)
  }
  .mobile-menu-button{
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid #52675e;
    border-radius:7px;
    background:transparent;
    color:#fff;
    font-size:1.05rem;
    cursor:pointer
  }
  .mobile-app-title{min-width:0;line-height:1.15;text-decoration:none!important;color:#fff!important}
  .mobile-app-title strong{
    display:block;
    overflow:hidden;
    color:#fff;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.94rem
  }
  .mobile-app-title span{
    display:block;
    margin-top:.18rem;
    color:var(--acid);
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase
  }

  .app-sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    z-index:60!important;
    width:min(88vw,330px)!important;
    min-height:100dvh!important;
    height:100dvh;
    padding:1.1rem!important;
    transform:translateX(-105%);
    transition:transform .18s ease,visibility .18s ease;
    visibility:hidden;
    box-shadow:12px 0 36px rgba(0,0,0,.3)
  }
  .app-sidebar.is-open{transform:translateX(0);visibility:visible}
  .mobile-nav-backdrop{
    position:fixed;
    inset:0;
    z-index:55;
    border:0;
    background:rgba(10,20,16,.62);
    cursor:pointer
  }
  body.mobile-nav-open .mobile-nav-backdrop{display:block}
  .app-sidebar .app-brand{margin-bottom:1rem}
  .app-sidebar .museum-switcher{max-width:none}
  .app-sidebar .app-menu{display:block!important;margin-top:.15rem}
  .app-sidebar .app-menu .menu-label{margin:1rem .55rem .35rem}
  .app-sidebar .app-account{margin-top:1rem}

  .app-main{margin-left:0!important;min-width:0}
  .page{max-width:100%;padding:1.4rem 1rem 4rem!important}

  .heading{gap:1rem;margin-bottom:1.25rem}
  .heading h1{font-size:clamp(1.8rem,7vw,2.25rem)}
  .heading>div{min-width:0}
  .heading p{overflow-wrap:anywhere}
  .detail-actions{justify-content:flex-start!important}

  .button,a.button,.primary,.secondary,.danger{min-height:44px}
  .button.is-small,a.button.is-small{min-height:40px}
  .tabs a{min-height:44px}
  input[type="checkbox"],input[type="radio"]{min-width:18px;min-height:18px}
}

@media (max-width:700px){
  .page{padding:1rem .85rem 4.5rem!important}
  .heading{display:flex!important;flex-direction:column;align-items:stretch!important}
  .heading>div+div,.heading>a{margin-top:0!important}
  .heading>.button,.heading>a.button{width:100%}
  .card-actions,.detail-actions,.editor-top-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:.5rem}
  .card-actions>*:only-child,.detail-actions>*:only-child{grid-column:1/-1}
  .card-actions .button,.detail-actions .button,.editor-top-actions .button{width:100%;justify-content:center}
  .detail-actions .inline-action{display:block;margin-left:0}

  .box{padding:1rem}
  .card-content{padding:1rem}
  .detail-grid,.form-grid{grid-template-columns:1fr!important}
  .editor section,.editor-related{padding:1rem}

  /* Dashboard stays compact on a phone instead of becoming five tall rows. */
  .dashboard-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem;
    margin:0 0 1rem!important
  }
  .dashboard-kpis .column{display:block!important;padding:0!important;min-width:0}
  .dashboard-kpis .card-content{padding:.85rem}
  .dashboard-kpis .kpi-value{font-size:1.65rem}
  .dashboard-kpis .kpi-label{font-size:.72rem}
  .dashboard-kpis .kpi-icon{width:2rem;height:2rem}
  .dashboard-grid .level{display:block}
  .dashboard-grid .level-right{margin-top:.75rem}
  .dashboard-grid .buttons{display:grid;grid-template-columns:1fr;width:100%}
  .dashboard-grid .buttons .button{width:100%}

  /* Search remains visible. The remaining catalogue filters become a disclosure. */
  .mobile-filter-toggle{display:inline-flex}
  .filter-card .level{align-items:center}
  .filter-card .level-right{display:flex;gap:.45rem;flex-wrap:wrap}
  .filter-card .level-right .level-item{margin:0}
  .filter-card.has-mobile-filter-toggle.is-mobile-collapsed .columns>.column:not(:first-child){display:none}
  .filter-card.has-mobile-filter-toggle .columns>.column:first-child{width:100%;flex:none}
  .mobile-sort-control{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.6rem;
    margin:-.4rem 0 1rem;
    padding:.75rem;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--panel)
  }
  .mobile-sort-control .label{margin-bottom:.3rem;color:var(--muted);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}

  /* Any tabular admin view can become readable cards. responsive.js supplies
     the header text through data-label, so markup and backend data stay single-source. */
  .table-wrap,.review-table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  table.responsive-stack-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    table-layout:auto!important;
    background:transparent!important
  }
  table.responsive-stack-table thead{display:none!important}
  table.responsive-stack-table tbody{display:grid!important;gap:.75rem!important;width:100%!important}
  table.responsive-stack-table tbody tr{
    display:block!important;
    width:100%!important;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--panel);
    box-shadow:0 2px 8px rgba(20,35,29,.035)
  }
  table.responsive-stack-table tbody tr[hidden]{display:none!important}
  table.responsive-stack-table tbody td,
  table.responsive-stack-table tbody th{
    display:grid!important;
    grid-template-columns:minmax(92px,34%) minmax(0,1fr);
    gap:.75rem;
    align-items:start;
    width:100%!important;
    min-width:0!important;
    padding:.65rem .8rem!important;
    border:0!important;
    border-bottom:1px solid #ece8df!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere
  }
  table.responsive-stack-table tbody td:last-child,
  table.responsive-stack-table tbody th:last-child{border-bottom:0!important}
  table.responsive-stack-table tbody td::before,
  table.responsive-stack-table tbody th::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.06em;
    line-height:1.35;
    text-transform:uppercase
  }
  table.responsive-stack-table tbody tr.is-empty-row td,
  table.responsive-stack-table tbody tr.is-empty-row th{display:block!important;text-align:center!important;padding:1.5rem!important}
  table.responsive-stack-table tbody tr.is-empty-row td::before,
  table.responsive-stack-table tbody tr.is-empty-row th::before{display:none}
  table.responsive-stack-table .buttons{justify-content:flex-start!important;margin:0;flex-wrap:wrap}
  table.responsive-stack-table .catalog-title{font-size:1rem}
  table.responsive-stack-table .catalog-meta{white-space:normal!important}
  table.responsive-stack-table .tag{white-space:normal;height:auto;min-height:1.8em;text-align:left}
  .catalog-table{min-width:0!important}

  /* Catalogue rows are intentionally denser than generic admin tables: on a
     phone each result is a compact card, not eight vertically stacked fields. */
  table.catalog-table.responsive-stack-table tbody tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:.65rem .8rem;
    padding:.85rem
  }
  table.catalog-table.responsive-stack-table tbody td{border:0!important;padding:0!important;min-width:0}
  table.catalog-table.responsive-stack-table tbody td:nth-child(1),
  table.catalog-table.responsive-stack-table tbody td:nth-child(3),
  table.catalog-table.responsive-stack-table tbody td:nth-child(4){display:none!important}
  table.catalog-table.responsive-stack-table tbody td:nth-child(2){
    display:block!important;
    grid-column:1/-1;
    padding-bottom:.65rem!important;
    border-bottom:1px solid #ece8df!important
  }
  table.catalog-table.responsive-stack-table tbody td:nth-child(2)::before{display:none!important}
  table.catalog-table.responsive-stack-table .catalog-title{display:block;font-size:1.08rem;line-height:1.2;overflow-wrap:anywhere}
  table.catalog-table.responsive-stack-table .catalog-meta{display:block;margin-top:.3rem;font-size:.76rem;line-height:1.3}
  table.catalog-table.responsive-stack-table tbody td:nth-child(5),
  table.catalog-table.responsive-stack-table tbody td:nth-child(6){display:block!important}
  table.catalog-table.responsive-stack-table tbody td:nth-child(5)::before,
  table.catalog-table.responsive-stack-table tbody td:nth-child(6)::before,
  table.catalog-table.responsive-stack-table tbody td:nth-child(7)::before{
    display:block;
    margin-bottom:.25rem;
    font-size:.6rem
  }
  table.catalog-table.responsive-stack-table tbody td:nth-child(7){display:block!important;grid-column:1/-1;padding-top:.1rem!important}
  table.catalog-table.responsive-stack-table tbody td:nth-child(8){display:block!important;grid-column:1/-1;padding-top:.15rem!important}
  table.catalog-table.responsive-stack-table tbody td:nth-child(8)::before{display:none!important}
  table.catalog-table.responsive-stack-table tbody td:nth-child(8) .button{width:100%;justify-content:center}
  table.catalog-table.responsive-stack-table .tags{margin-bottom:.25rem!important}

  /* Detail pages */
  .detail-hero{padding:1rem!important}
  .detail-hero .columns{margin-top:0;margin-bottom:0}
  .detail-hero .column{padding-top:.55rem;padding-bottom:.55rem}
  .detail-hero .media-preview{min-height:150px}
  .detail-hero .media-preview img{max-height:220px}
  .detail-facts{height:auto!important;border-left:0!important;border-top:1px solid var(--line);padding:1rem 0 0!important}
  .detail-section-title{align-items:flex-start;flex-wrap:wrap}
  .image-grid{grid-template-columns:1fr!important}
  .image-grid img{height:auto;max-height:260px}

  /* Editor: persistent save action, horizontally scrollable section tabs. */
  .editor-toolbar{
    position:sticky!important;
    top:60px!important;
    bottom:auto!important;
    z-index:30!important;
    margin:0 -.85rem .85rem!important;
    padding:.55rem .85rem!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important
  }
  .editor-toolbar .level{display:block!important}
  .editor-toolbar .level-left p{display:none}
  .editor-toolbar .level-right{margin-top:.45rem!important}
  .editor-toolbar .buttons{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.5rem}
  .editor-toolbar .buttons .button{width:100%;margin:0!important}
  .editor-tabs{
    position:relative!important;
    top:auto!important;
    margin:0 -.85rem .9rem!important;
    padding:0 .85rem!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch
  }
  .editor-tabs::-webkit-scrollbar{display:none}
  .editor-tabs ul{width:max-content;min-width:max-content!important}
  .editor-card .card-content{padding:1rem!important}
  .option-grid,.release-editor-grid{grid-template-columns:1fr!important}
  .release-editor-grid label:first-child{grid-column:auto!important}

  /* Physical copy editor and every other dialog must remain usable above the
     software keyboard and phone safe areas. */
  .entry-dialog{
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important
  }
  .entry-dialog>.entry-dialog-shell{height:100dvh!important;max-height:100dvh!important}
  .entry-dialog-header{padding:calc(.9rem + env(safe-area-inset-top)) 1rem .8rem!important}
  .entry-dialog-body{padding:.85rem 1rem .3rem!important}
  .entry-dialog-footer{padding:.75rem 1rem calc(.8rem + env(safe-area-inset-bottom))!important}
  .entry-dialog-footer{display:grid!important;grid-template-columns:1fr 1fr}
  .confirmation-dialog,.flash-dialog{width:calc(100vw - 20px)!important;max-width:none}
  .confirmation-dialog>div,.flash-dialog>div{padding:1.1rem!important}
  .dialog-actions{display:grid!important;grid-template-columns:1fr 1fr}

  .auth-card{margin:1rem auto!important;padding:1.2rem!important}
  .print-preview-shell{padding:.65rem!important;border-radius:6px}
}

@media (max-width:380px){
  .dashboard-kpis{grid-template-columns:1fr 1fr}
  .kpi-icon{display:none!important}
  .card-actions,.detail-actions,.editor-top-actions{grid-template-columns:1fr}
  .editor-toolbar .buttons,.mobile-sort-control{grid-template-columns:1fr}
  table.responsive-stack-table tbody td,
  table.responsive-stack-table tbody th{grid-template-columns:82px minmax(0,1fr);gap:.55rem;padding:.6rem .7rem!important}
  table.catalog-table.responsive-stack-table tbody tr{grid-template-columns:1fr}
  table.catalog-table.responsive-stack-table tbody td:nth-child(5),
  table.catalog-table.responsive-stack-table tbody td:nth-child(6){grid-column:1/-1}
}