/* Navigation and action-control consistency layer.
   Loaded last so legacy screen styles cannot unfix the bottom navigation. */
:root{--rr-bottom-nav-height:72px}
.nav-installation-eye{display:block;width:25px;height:19px;object-fit:contain;flex:0 0 auto}
.nav-label{min-width:0}
.nav-agenda-count{display:inline-grid;min-width:28px;height:23px;place-items:center;padding:0 7px;border-radius:999px;background:#e5b54f;color:#20352a;font-size:12px;font-weight:850;line-height:1;box-shadow:0 3px 9px rgba(139,92,13,.18)}

/* Compact, predictable action rows without changing form submit layouts. */
.actions,.smart-alert-actions,.reproduction-status-actions,.dashboard-alert-actions{
  align-items:center;
  gap:8px;
}
.card>.actions .rr-button:not(.rr-icon-action),
.rr-card>.actions .rr-button:not(.rr-icon-action),
.offspring-profile-head>.actions .rr-button:not(.rr-icon-action),
.smart-alert-actions .rr-button:not(.rr-icon-action),
.reproduction-status-actions .rr-button:not(.rr-icon-action),
.dashboard-alert-actions .rr-button:not(.rr-icon-action){
  width:auto;
  min-height:38px;
  padding:8px 12px;
  flex:0 1 auto;
  border-radius:11px;
  font-size:12px;
  white-space:nowrap;
}
.rr-actions-has-delete>.rr-icon-delete{
  flex:0 0 36px!important;
  margin-inline-start:auto;
}
.rr-icon-action{
  flex:0 0 36px!important;
  margin:0;
}
.rr-row-has-icon-action{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 36px;
  align-items:center!important;
  gap:10px 12px!important;
  flex-wrap:nowrap!important;
}
.rr-row-has-icon-action>.rr-icon-delete{
  grid-column:-1;
  justify-self:end;
  align-self:center;
}
.rr-row-has-icon-action>div:first-child{min-width:0}
.rr-row-has-icon-action>div:first-child small{overflow-wrap:anywhere}

/* Close controls always occupy a quiet corner, away from the content/actions. */
dialog{isolation:isolate}
dialog>.rr-dialog-close{
  top:10px!important;
  right:10px!important;
}
dialog>h2:first-of-type,
dialog>.eyebrow:first-child+h2{padding-right:48px}
.demo-data-notice .demo-data-notice-close{margin-left:2px}

/* Align section-level controls and prevent isolated buttons becoming oversized. */
.section-heading,.offspring-toolbar,.smart-section-head,.habitat-preview-heading{
  align-items:center;
}
.section-heading>button,.offspring-toolbar>button,.smart-section-head>button,
.habitat-preview-heading>button,.offspring-species-search{
  width:auto;
  min-height:40px;
  padding:9px 13px;
  flex:0 0 auto;
}

/* Phones and tablets share one genuinely fixed navigation bar. */
@media(max-width:900px){
  html{scroll-padding-bottom:calc(var(--rr-bottom-nav-height) + env(safe-area-inset-bottom,0px) + 14px)}
  body{min-height:100dvh}
  aside{
    position:fixed!important;
    inset:auto 0 0 0!important;
    z-index:60!important;
    width:100%!important;
    height:calc(var(--rr-bottom-nav-height) + env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;
    padding:7px max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px))!important;
    overflow:hidden!important;
    border:0!important;
    border-top:1px solid var(--rr-border)!important;
    background:color-mix(in srgb,#fff 94%,transparent)!important;
    box-shadow:0 -10px 30px rgba(19,42,32,.11)!important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transform:translateZ(0);
  }
  aside .brand,aside>small,aside>.foot{display:none!important}
  aside nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:2px!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  aside nav button{
    display:flex!important;
    min-width:0!important;
    min-height:54px!important;
    margin:0!important;
    padding:5px 2px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:1px!important;
    border-radius:13px!important;
    font-size:10px!important;
    line-height:1.12!important;
    text-align:center!important;
    white-space:normal!important;
  }
  aside nav button::before{font-size:19px;line-height:1.05}
  aside nav button[data-page="Inicio"]::before{content:'⌂'}
  aside nav button[data-page="Ejemplares"]::before{content:'◉'}
  aside nav button[data-page="Instalacion"]::before,aside nav button[data-page="Agenda"]::before{content:none}
  aside nav button[data-page="Terrarios"]::before{content:'▤'}
  aside nav button[data-page="Especies"]::before{content:'⌕'}
  aside nav button.active{background:var(--rr-brand-soft)!important;color:var(--rr-brand-strong)!important;box-shadow:none!important}
  aside nav button[data-page="Instalacion"]{position:relative;color:var(--rr-brand-strong)!important;font-weight:800!important}
  aside nav button[data-page="Instalacion"] .nav-installation-eye{width:44px;height:34px;filter:drop-shadow(0 5px 7px rgba(30,113,90,.18));transform:translateY(-2px)}
  aside nav button[data-page="Instalacion"] .nav-installation-label{display:none}
  aside nav button[data-page="Agenda"]{gap:3px!important}
  aside nav button[data-page="Agenda"] .nav-agenda-count{min-width:30px;height:24px;font-size:12px}
  aside nav button[data-page="Instalacion"].active{background:transparent!important}
  main{
    margin-left:0!important;
    padding-bottom:calc(var(--rr-bottom-nav-height) + env(safe-area-inset-bottom,0px) + 26px)!important;
  }
  .demo-data-notice{bottom:calc(var(--rr-bottom-nav-height) + env(safe-area-inset-bottom,0px) + 12px)!important}
  .rr-toast{bottom:calc(var(--rr-bottom-nav-height) + env(safe-area-inset-bottom,0px) + 14px)!important}
}

@media(max-width:600px){
  .card>.actions:not(.species-form-footer) .rr-button:not(.rr-icon-action),
  .rr-card>.actions:not(.species-form-footer) .rr-button:not(.rr-icon-action){
    flex:0 1 auto;
  }
  .offspring-toolbar>button{width:auto!important;align-self:flex-start}
  .rr-row-has-icon-action{grid-template-columns:minmax(0,1fr) auto 38px;gap:8px!important}
  .rr-actions-has-delete>.rr-icon-delete{flex-basis:38px!important}
}

@media(min-width:901px){
  aside{top:0;bottom:auto}
}