/* ========= Portal Premium Pack (mobile-first) ========= */

:root{
  --card-pad: 14px;
  --card-radius: 18px;
  --stroke-strong: rgba(255,255,255,.14);
  --glass: rgba(255,255,255,.04);
  --glass-2: rgba(255,255,255,.06);
  --shadow-2: 0 18px 55px rgba(0,0,0,.55);
}

body.portal{
  /* slight polish */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.portal .container{
  max-width: 1120px;
}

/* Page head */
.portal-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.portal-head h1{
  margin:0; font-size:28px; letter-spacing:-.45px; line-height:1.12;
}
.portal-head p{
  margin:8px 0 0; color:var(--muted); line-height:1.55;
}
.portal-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* Better cards */
.card{
  border-radius: var(--card-radius);
  border: 1px solid var(--stroke);
  background: var(--glass);
  box-shadow: var(--shadow);
}
.card:hover{ filter: brightness(1.02); }

.card-body{ padding: var(--card-pad); }

/* Panels that never overhang */
.panel{
  padding: var(--card-pad);
  overflow: hidden;
}
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-wrap .table{ min-width: 880px; }

/* Mobile-first list cards */
.list-cards{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.item-card{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.item-card .top{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
}
.item-card .title{font-weight:900; letter-spacing:-.2px; line-height:1.25}
.item-card .sub{color:var(--muted); font-size:13px; margin-top:6px; line-height:1.4}
.item-card .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.item-card .actions .btn{flex:1}
@media (min-width: 640px){ .item-card .actions .btn{flex:0} }

/* Alerts look cleaner */
.alert{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
}

/* Inputs feel more premium */
.input{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.input:focus{
  border-color: rgba(38,183,255,.38);
  box-shadow: 0 0 0 4px rgba(38,183,255,.18);
}

/* Buttons: consistent height + nicer hover */
.btn{ border-radius: 14px; }
.btn:hover{ filter: brightness(1.05); }
.btn.primary{ box-shadow: 0 12px 28px rgba(0,0,0,.35); }

/* Desktop-only helper (same convention as admin) */
.desktop-only{display:none}
@media (min-width: 980px){
  .desktop-only{display:block}
  .mobile-only{display:none}
}