/* ANIMUR exact responsive compact layout - based on actual app.css structure */

#dashboard-view.view{
  min-height:100vh;
}

#dashboard-view .topbar{
  height:58px !important;
  padding:0 20px !important;
}

#dashboard-view .brand-mark.small{
  width:36px !important;
  height:36px !important;
  border-radius:11px !important;
  font-size:19px !important;
}

#dashboard-view .dashboard{
  width:min(1380px,calc(100% - 28px)) !important;
  padding:16px 0 30px !important;
}

/* Hero: drastically reduce vertical space */
#dashboard-view .hero{
  grid-template-columns:minmax(0,1fr) 190px !important;
  gap:12px !important;
}

#dashboard-view .hero>div{
  border-radius:16px !important;
  padding:16px 20px !important;
}

#dashboard-view .hero h1{
  font-size:32px !important;
  line-height:1.05 !important;
  margin:3px 0 5px !important;
}

#dashboard-view .hero p{
  font-size:15px !important;
  line-height:1.3 !important;
  margin:0 !important;
}

#dashboard-view .hero .eyebrow{
  font-size:10px !important;
}

#dashboard-view .core-card{
  min-height:0 !important;
  padding:13px 18px !important;
  align-content:center !important;
}

#dashboard-view .core-card span{
  font-size:12px !important;
}

#dashboard-view .core-card strong{
  font-size:31px !important;
  line-height:1 !important;
}

#dashboard-view .core-card small{
  font-size:11px !important;
}

/* Four stats remain on one desktop row but become much smaller */
#dashboard-view .stats-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:9px !important;
  margin:10px 0 12px !important;
}

#dashboard-view .stats-grid article{
  border-radius:13px !important;
  padding:10px 14px !important;
  gap:2px !important;
}

#dashboard-view .stats-grid span{
  font-size:11px !important;
}

#dashboard-view .stats-grid strong{
  font-size:21px !important;
  line-height:1.05 !important;
}

/* Main menu always visible */
#dashboard-view .tabs{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  margin:0 0 12px !important;
}

#dashboard-view .tab{
  min-height:34px !important;
  padding:7px 13px !important;
  font-size:13px !important;
}

/* Content below menu compact as well */
#dashboard-view .section-head{
  margin-bottom:10px !important;
}

#dashboard-view .section-head h2{
  font-size:21px !important;
  margin:2px 0 0 !important;
}

#dashboard-view .platform-grid{
  gap:10px !important;
}

#dashboard-view .platform-card{
  border-radius:13px !important;
  padding:13px 16px !important;
}

#dashboard-view .platform-card h3{
  font-size:19px !important;
  margin:4px 0 !important;
}

#dashboard-view .platform-card p{
  font-size:13px !important;
}

#dashboard-view .data-list{
  gap:8px !important;
}

#dashboard-view .data-row{
  border-radius:13px !important;
  padding:11px 14px !important;
  gap:10px !important;
}

/* Desktop master actions */
@media (min-width:901px){
  #animur-platform-button{
    right:164px !important;
    bottom:12px !important;
    padding:8px 12px !important;
    min-height:36px !important;
    font-size:13px !important;
  }

  #animur-security-button{
    right:12px !important;
    bottom:12px !important;
    padding:8px 12px !important;
    min-height:36px !important;
    font-size:13px !important;
  }
}

/* Short laptop displays: squeeze a little further */
@media (min-width:901px) and (max-height:800px){
  #dashboard-view .topbar{
    height:50px !important;
  }

  #dashboard-view .dashboard{
    padding-top:10px !important;
  }

  #dashboard-view .hero>div{
    padding:11px 16px !important;
  }

  #dashboard-view .hero h1{
    font-size:27px !important;
  }

  #dashboard-view .stats-grid{
    margin:7px 0 8px !important;
  }

  #dashboard-view .stats-grid article{
    padding:8px 12px !important;
  }

  #dashboard-view .tab{
    padding:6px 11px !important;
    min-height:31px !important;
  }

  #dashboard-view .platform-card{
    padding:10px 13px !important;
  }
}

/* Tablet */
@media (max-width:900px){
  #dashboard-view .topbar{
    height:54px !important;
    padding:0 12px !important;
  }

  #dashboard-view .dashboard{
    width:calc(100% - 18px) !important;
    padding:10px 0 22px !important;
  }

  #dashboard-view .hero{
    grid-template-columns:minmax(0,1fr) 150px !important;
    gap:8px !important;
  }

  #dashboard-view .hero>div{
    padding:12px 14px !important;
  }

  #dashboard-view .hero h1{
    font-size:26px !important;
  }

  #dashboard-view .hero p{
    font-size:13px !important;
  }

  #dashboard-view .core-card strong{
    font-size:25px !important;
  }

  #dashboard-view .stats-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    margin:8px 0 9px !important;
  }

  #dashboard-view .stats-grid article{
    padding:8px 9px !important;
  }

  #dashboard-view .stats-grid strong{
    font-size:18px !important;
  }

  #dashboard-view .tabs{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
    gap:4px !important;
  }

  #dashboard-view .tab{
    width:100% !important;
    min-width:0 !important;
    padding:7px 5px !important;
    font-size:12px !important;
  }

  #dashboard-view .platform-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Phone */
@media (max-width:600px){
  #dashboard-view .topbar{
    height:50px !important;
  }

  #dashboard-view .topbar-brand span{
    display:none !important;
  }

  #dashboard-view .topbar-actions{
    gap:6px !important;
  }

  #dashboard-view .topbar .ghost{
    padding:7px 10px !important;
    font-size:12px !important;
  }

  #dashboard-view .dashboard{
    width:calc(100% - 12px) !important;
    padding:7px 0 18px !important;
  }

  #dashboard-view .hero{
    grid-template-columns:minmax(0,1fr) 104px !important;
    gap:6px !important;
  }

  #dashboard-view .hero>div{
    border-radius:12px !important;
    padding:10px 11px !important;
  }

  #dashboard-view .hero h1{
    font-size:21px !important;
    margin:2px 0 3px !important;
  }

  #dashboard-view .hero p{
    font-size:11px !important;
    line-height:1.25 !important;
  }

  #dashboard-view .hero .eyebrow{
    font-size:8px !important;
  }

  #dashboard-view .core-card{
    padding:9px !important;
  }

  #dashboard-view .core-card strong{
    font-size:19px !important;
  }

  #dashboard-view .core-card small{
    font-size:9px !important;
  }

  #dashboard-view .stats-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
    margin:6px 0 7px !important;
  }

  #dashboard-view .stats-grid article{
    min-width:0 !important;
    border-radius:10px !important;
    padding:7px 5px !important;
  }

  #dashboard-view .stats-grid span{
    font-size:9px !important;
    overflow-wrap:anywhere;
  }

  #dashboard-view .stats-grid strong{
    font-size:16px !important;
  }

  #dashboard-view .tabs{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    margin-bottom:8px !important;
  }

  #dashboard-view .tab{
    min-height:32px !important;
    font-size:11px !important;
    padding:6px 3px !important;
    white-space:normal !important;
  }

  #dashboard-view .section-head{
    margin-bottom:7px !important;
  }

  #dashboard-view .section-head h2{
    font-size:18px !important;
  }

  #dashboard-view .platform-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #dashboard-view .platform-card{
    padding:9px !important;
    border-radius:10px !important;
  }

  #dashboard-view .platform-card h3{
    font-size:15px !important;
  }

  #dashboard-view .platform-card p{
    font-size:11px !important;
  }

  #dashboard-view .badge{
    padding:3px 6px !important;
    font-size:9px !important;
  }

  #dashboard-view .data-row{
    grid-template-columns:1fr !important;
    padding:9px !important;
  }

  /* keep action buttons in normal flow on phone */
  #animur-responsive-actions{
    padding:0 6px 6px !important;
    gap:4px !important;
  }

  #animur-platform-button,
  #animur-security-button{
    flex:1 1 calc(50% - 4px) !important;
    width:auto !important;
    min-height:34px !important;
    padding:6px 8px !important;
    font-size:11px !important;
    margin:0 !important;
  }
}

/* Extremely narrow phones: menu remains visible in one row */
@media (max-width:360px){
  #dashboard-view .hero{
    grid-template-columns:minmax(0,1fr) 90px !important;
  }

  #dashboard-view .hero h1{
    font-size:18px !important;
  }

  #dashboard-view .stats-grid span{
    font-size:8px !important;
  }

  #dashboard-view .tab{
    font-size:10px !important;
  }
}