/* ================================
   StudioOS Admin Panel Styles
   Production-safe shared admin UI
================================ */

:root{
  --admin-bg-start:#1e293b;
  --admin-bg-end:#020617;
  --admin-card:rgba(15,23,42,0.74);
  --admin-card-soft:rgba(255,255,255,0.055);
  --admin-border:rgba(255,255,255,0.10);
  --admin-border-strong:rgba(129,140,248,0.26);
  --admin-text:#ffffff;
  --admin-muted:#94a3b8;
  --admin-primary:#4f46e5;
  --admin-primary-hover:#4338ca;
}

*{
  box-sizing:border-box;
}

html{
  min-height:100%;
  background:#020617;
}

body{
  margin:0;
  min-height:100%;
}

.admin-bg{
  background:
    radial-gradient(circle at top left, rgba(79,70,229,0.20), transparent 32rem),
    radial-gradient(circle at top right, rgba(14,165,233,0.12), transparent 28rem),
    linear-gradient(135deg, var(--admin-bg-start), var(--admin-bg-end));
}

.admin-glass{
  background:var(--admin-card);
  border:1px solid var(--admin-border);
  box-shadow:0 24px 80px rgba(0,0,0,0.34);
  backdrop-filter:blur(18px);
}

.admin-pill{
  background:rgba(99,102,241,0.16);
  border:1px solid rgba(129,140,248,0.30);
  color:#c7d2fe;
}

.admin-card{
  min-height:8rem;
  border-radius:1.5rem;
  padding:1.15rem;
  background:var(--admin-card-soft);
  border:1px solid var(--admin-border);
  box-shadow:0 16px 40px rgba(0,0,0,0.16);
}

.admin-card-label{
  font-size:0.74rem;
  line-height:1rem;
  font-weight:800;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--admin-muted);
}

.admin-card-value{
  margin-top:0.8rem;
  font-size:2rem;
  line-height:2.25rem;
  font-weight:900;
  color:var(--admin-text);
  letter-spacing:-0.04em;
}

.admin-panel{
  border-radius:1.5rem;
  padding:1rem;
  background:var(--admin-card-soft);
  border:1px solid var(--admin-border);
  box-shadow:0 16px 40px rgba(0,0,0,0.16);
}

.admin-panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:0.25rem 0.25rem 0.9rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.admin-panel-title{
  margin:0;
  font-size:1rem;
  line-height:1.4rem;
  font-weight:900;
  color:#ffffff;
}

.admin-panel-subtitle{
  margin:0.2rem 0 0;
  font-size:0.78rem;
  line-height:1.15rem;
  color:var(--admin-muted);
}

.admin-list{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  padding-top:0.9rem;
}

.admin-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.85rem;
  border-radius:1rem;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.07);
}

.admin-list-title{
  font-size:0.9rem;
  font-weight:800;
  color:#ffffff;
  word-break:break-word;
}

.admin-list-subtitle{
  margin-top:0.15rem;
  font-size:0.76rem;
  color:var(--admin-muted);
  word-break:break-word;
}

.admin-badge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0.3rem 0.55rem;
  font-size:0.68rem;
  line-height:0.85rem;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.10);
}

.admin-badge-success{
  background:rgba(34,197,94,0.13);
  color:#bbf7d0;
  border-color:rgba(34,197,94,0.22);
}

.admin-badge-muted{
  background:rgba(148,163,184,0.13);
  color:#cbd5e1;
  border-color:rgba(148,163,184,0.20);
}

.admin-badge-warning{
  background:rgba(245,158,11,0.13);
  color:#fde68a;
  border-color:rgba(245,158,11,0.24);
}

.admin-muted{
  padding:0.85rem;
  border-radius:1rem;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--admin-muted);
  font-size:0.85rem;
}

.admin-action-btn{
  border-radius:1rem;
  padding:0.95rem 1rem;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:#e2e8f0;
  font-size:0.86rem;
  font-weight:800;
  transition:0.18s ease;
}

.admin-action-btn:not(:disabled):hover{
  background:rgba(79,70,229,0.26);
  border-color:rgba(129,140,248,0.35);
}

.admin-action-btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

@media (max-width: 640px){
  .admin-card{
    min-height:7.2rem;
    border-radius:1.25rem;
  }

  .admin-card-value{
    font-size:1.7rem;
    line-height:2rem;
  }

  .admin-panel{
    border-radius:1.25rem;
  }

  .admin-list-item{
    align-items:flex-start;
    flex-direction:column;
    gap:0.55rem;
  }
}

/* ================================
   StudioOS Admin Mobile Responsive Layer
   Final shared responsive hardening
================================ */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

#adminApp{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img,
canvas,
svg,
video{
  max-width:100%;
}

input,
select,
textarea,
button{
  max-width:100%;
}

.admin-panel,
.admin-glass,
.admin-card,
.admin-list,
.admin-list-item,
.admin-muted{
  max-width:100%;
}

.admin-list-item > *{
  min-width:0;
}

.admin-list-title,
.admin-list-subtitle,
.admin-card-value,
.admin-panel-title,
.admin-panel-subtitle{
  overflow-wrap:anywhere;
}

@media (max-width: 768px){
  header .max-w-7xl{
    padding-left:1rem;
    padding-right:1rem;
  }

  header .flex{
    min-width:0;
  }

  header h1{
    font-size:1.05rem;
    line-height:1.35rem;
  }

  header a,
  header button{
    padding:0.55rem 0.75rem !important;
    font-size:0.76rem !important;
    border-radius:0.75rem !important;
    white-space:nowrap;
  }

  main.max-w-7xl{
    padding-left:0.85rem;
    padding-right:0.85rem;
    padding-top:1rem;
    padding-bottom:1.25rem;
  }

  .admin-glass{
    border-radius:1.25rem !important;
    padding:1rem !important;
  }

  .admin-card{
    min-height:6.6rem;
    padding:1rem;
    border-radius:1.15rem;
  }

  .admin-card-label{
    font-size:0.66rem;
    line-height:0.9rem;
    letter-spacing:0.11em;
  }

  .admin-card-value{
    font-size:1.45rem;
    line-height:1.75rem;
  }

  .admin-panel{
    padding:0.85rem;
    border-radius:1.15rem;
  }

  .admin-panel-header{
    flex-direction:column;
    gap:0.6rem;
    padding-bottom:0.75rem;
  }

  .admin-panel-title{
    font-size:0.95rem;
    line-height:1.25rem;
  }

  .admin-panel-subtitle{
    font-size:0.72rem;
    line-height:1.05rem;
  }

  .admin-list{
    gap:0.58rem;
    padding-top:0.72rem;
  }

  .admin-list-item{
    padding:0.78rem;
    border-radius:0.95rem;
  }

  .admin-list-title{
    font-size:0.84rem;
    line-height:1.12rem;
  }

  .admin-list-subtitle{
    font-size:0.7rem;
    line-height:1rem;
  }

  .admin-badge{
    font-size:0.62rem;
    line-height:0.78rem;
    padding:0.26rem 0.48rem;
  }

  .admin-action-btn{
    padding:0.8rem 0.85rem;
    font-size:0.8rem;
    border-radius:0.9rem;
  }

  /* Inline grid rows used by admin JS modules */
  .admin-list-item[style*="grid-template-columns"],
  #earningsList .admin-list-item,
  #payoutRequestsList .admin-list-item,
  #costAlertsList .admin-list-item,
  #costSettingsList .admin-list-item{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0.65rem !important;
  }

  .admin-list-item[style*="grid-template-columns"] > div,
  .admin-list-item[style*="grid-template-columns"] > span,
  .admin-list-item[style*="grid-template-columns"] > button,
  #earningsList .admin-list-item > div,
  #payoutRequestsList .admin-list-item > div,
  #costAlertsList .admin-list-item > div,
  #costSettingsList .admin-list-item > div{
    width:100% !important;
    min-width:0 !important;
    text-align:left !important;
  }

  #earningsList > div:first-child,
  #payoutRequestsList > div:first-child,
  #costAlertsList > div:first-child{
    display:none !important;
  }

  #costSettingsList .admin-list-item{
    grid-template-columns:1fr !important;
  }

  #costSettingsList input{
    width:100% !important;
  }

  #costSettingsList button{
    width:100% !important;
  }

  #costAlertSearchInput,
  #costAlertFilter{
    width:100% !important;
  }
}

@media (max-width: 480px){
  header .max-w-7xl{
    align-items:flex-start;
  }

  header .flex.items-center.gap-3{
    gap:0.45rem;
  }

  header a,
  header button{
    padding:0.48rem 0.62rem !important;
    font-size:0.7rem !important;
  }

  main.max-w-7xl{
    padding-left:0.65rem;
    padding-right:0.65rem;
  }

  .admin-glass{
    padding:0.85rem !important;
  }

  .admin-card{
    min-height:6rem;
  }

  .admin-card-value{
    font-size:1.28rem;
    line-height:1.55rem;
  }

  .admin-panel{
    padding:0.75rem;
  }

  .admin-muted{
    font-size:0.78rem;
    padding:0.75rem;
  }

  .admin-action-btn{
    width:100%;
  }
}

/* ================================
   Mobile-only metric labels
   Keeps desktop table headers clean
================================ */

.admin-mobile-metric-label{
  display:none;
}

@media (max-width: 768px){
  .admin-mobile-metric{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0.75rem !important;
    width:100% !important;
    min-width:0 !important;
    text-align:left !important;
    padding:0.52rem 0.65rem !important;
    border-radius:0.8rem !important;
    background:rgba(255,255,255,0.035) !important;
    border:1px solid rgba(255,255,255,0.06) !important;
  }

  .admin-mobile-metric-label{
    display:inline-flex;
    color:#94a3b8;
    font-size:0.68rem;
    line-height:0.9rem;
    font-weight:900;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
}