/* styles for post-login */

.app-base{
  /* height:100dvh; */
}

.app-base main{
  align-items:unset;
}

.app-base .page-container{
  /* unneccesary, use flex box */
  /* height:100%; */
}

@media only screen and (max-width:768px){
  .app-base main{
    overflow-x:hidden;
  }
  .app-base .page-container{
    flex:none;
    width:100dvw;
  }
}

/* from claude ... O.o */
/* ── Dropdown menus ──────────────────────────────────────────────────────── */
.dropdown{
  position:relative;
}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:190px;
  background-color:var(--background);
  border:1px solid var(--grey);
  border-radius:4px;
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:200;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--ux-speed);
}
.dropdown.open .dropdown-menu{
  pointer-events:auto;
  opacity:1;
}
.dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:12px 15px;
  text-align:left;
  background:transparent;
  border:none;
  border-radius:0;
  color:var(--foreground);
  font-size:0.875rem;
  cursor:pointer;
  transition:all var(--ux-speed);
}
.dropdown-item i{
  font-size:1rem;
  flex-shrink:0;
}
.dropdown-item:hover{
  background-color:var(--accent-green-light-trans);
  border-color:transparent;
}
/* <a> items must override the site's global link styles (bold, accent color) */
a.dropdown-item{
  color:var(--foreground);
  font-weight:normal;
  display:flex;
}
.dropdown-item:disabled,
.dropdown-item[disabled]{
  opacity:0.4;
  cursor:not-allowed;
}
.dropdown-item:disabled:hover,
.dropdown-item[disabled]:hover{
  background-color:transparent;
}
.dropdown-divider{
  height:1px;
  background-color:var(--grey);
  /* margin:4px 0; */
}

/* ── Filter pills ─────────────────────────────────────────────────────────── */
.filter-bar{
  flex-wrap:wrap;
}
.filter-pill{
  padding:4px 12px;
  font-size:0.8rem;
}
.filter-pill.selected{
  background-color:var(--accent-green-light-trans);
  border-color:var(--accent-green-trans);
}

/* ── State transition fade-in ────────────────────────────────────────────── */
@keyframes state-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

[data-state="loading"] [data-show-on-state="loading"],
[data-state="loaded"]  [data-show-on-state="loaded"],
[data-state="empty"]   [data-show-on-state="empty"],
[data-state="error"]   [data-show-on-state="error"] {
  animation: state-fade-in var(--ux-speed) ease;
}

/* ── Stat cards (dashboard) ──────────────────────────────────────────────── */

@media only screen and (max-width:450px){
  /* .stat-card{
    max-width:none;
  } */
   .stat-card{
    /* font-size:1rem; */
   }
}
.stat-value{
  font-size:2rem;
  font-weight:700;
}
.stat-label{
  font-size:0.75rem;
  text-transform:uppercase;
}

/* ── Domain chips (instance edit form) ───────────────────────────────────── */
.domain-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px 3px 10px;
  border-radius:4px;
  border:1px solid var(--accent-green-light-trans);
  background-color:var(--accent-green-light-trans);
  font-size:0.8rem;
}