.mail-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px
}

.mail-metric{
  padding:18px
}

.mail-metric span{
  display:block;
  opacity:.65;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em
}

.mail-metric strong{
  display:block;
  margin-top:8px;
  font-size:24px
}

.mail-layout{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(340px,.85fr);
  gap:18px;
  align-items:start
}

.mail-panel{
  overflow:hidden
}

.mail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  border-bottom:1px solid rgba(148,163,184,.16)
}

.mail-head h3{
  margin:3px 0 0
}

.mail-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid rgba(148,163,184,.16)
}

.mail-form label,
.mail-password-form label{
  display:grid;
  gap:7px;
  font-size:12px;
  font-weight:700
}

.mail-wide{
  grid-column:1/-1
}

.mail-policy{
  grid-column:1/-1;
  font-size:12px;
  opacity:.7;
  line-height:1.55
}

.mail-notice{
  grid-column:1/-1;
  min-height:18px;
  font-size:12px;
  font-weight:700
}

.mail-table-wrap{
  overflow:auto
}

.mail-address{
  font-weight:800;
  white-space:nowrap
}

.mail-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:800
}

.mail-state::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#64748b
}

.mail-state.active::before{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12)
}

.mail-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap
}

.mail-actions button{
  white-space:nowrap
}

.mail-empty{
  padding:24px;
  text-align:center;
  opacity:.65
}

.mail-info{
  margin:18px 20px;
  padding:14px 16px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  font-size:12px;
  line-height:1.55
}

.mail-info b{
  display:block;
  margin-bottom:4px
}

.mail-dialog{
  width:min(500px,calc(100vw - 30px));
  border:1px solid rgba(148,163,184,.22);
  border-radius:18px;
  padding:0;
  background:#111827;
  color:#f8fafc;
  box-shadow:0 30px 90px rgba(0,0,0,.45)
}

.mail-dialog::backdrop{
  background:rgba(2,6,23,.7);
  backdrop-filter:blur(4px)
}

.mail-dialog-inner{
  padding:22px
}

.mail-dialog-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:18px
}

.mail-dialog-head h3{
  margin:3px 0 0
}

.mail-password-form{
  display:grid;
  gap:13px
}

.mail-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px
}

@media(max-width:1050px){
  .mail-layout{
    grid-template-columns:1fr
  }

  .mail-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:650px){
  .mail-metrics,
  .mail-form{
    grid-template-columns:1fr
  }

  .mail-wide,
  .mail-policy,
  .mail-notice{
    grid-column:auto
  }
}

/* GBRemote Mail Admin - full width readable layout */

.mail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  align-items:start;
}

#mail .mail-panel{
  width:100%;
  min-width:0;
}

#mailAliasForm{
  grid-template-columns:minmax(280px,1fr) minmax(320px,1.4fr);
}

#mailAliasForm .mail-wide,
#mailAliasForm .mail-notice{
  grid-column:1/-1;
}

#mailAliasRows td:nth-child(1),
#mailAliasRows td:nth-child(2){
  min-width:220px;
}

#mailAliasRows td:nth-child(3){
  min-width:120px;
}

#mailAliasRows td:nth-child(4){
  min-width:170px;
}

#mail .mail-table-wrap{
  width:100%;
  overflow-x:auto;
}

#mail .table{
  width:100%;
}

@media(max-width:800px){
  #mailAliasForm{
    grid-template-columns:1fr;
  }

  #mailAliasForm .mail-wide,
  #mailAliasForm .mail-notice{
    grid-column:auto;
  }
}