/* Core responsive layout primitives */
:root{
  --container-max: 1200px;
}

*{box-sizing:border-box}

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

body{
  font-family:Manrope,"Segoe UI",Tahoma,sans-serif;
}

.container{
  width:min(100%, var(--container-max));
  margin-inline:auto;
  padding:1rem clamp(.85rem,2vw,1.25rem);
}

.grid{display:grid;gap:1rem}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.responsive{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.row{display:flex;gap:1rem;align-items:center}
.stack{display:flex;flex-direction:column;gap:.65rem}
.spread{justify-content:space-between}

.mt-1{margin-top:1rem}
.mb-1{margin-bottom:1rem}

.modal-head{justify-content:space-between;align-items:center}
.modal-body{margin-top:.75rem}
.modal-foot{margin-top:.75rem;text-align:right;display:flex;justify-content:flex-end;gap:.5rem}

.section-title{
  margin:0;
  font-family:Sora,Manrope,"Segoe UI",Tahoma,sans-serif;
  font-size:clamp(1.25rem,2.6vw,1.9rem);
  line-height:1.15;
}

.text-muted{opacity:.78}

.table-wrapper{
  overflow-x:auto;
  border-radius:14px;
}

.table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
}

.table th,.table td{
  text-align:left;
  padding:.82rem .88rem;
}

.status-message,
.error-message{
  padding:.55rem .7rem;
  border-radius:10px;
  font-size:.92rem;
}

.status-message{
  color:#0f5132;
  background:rgba(25,135,84,.12);
  border:1px solid rgba(25,135,84,.28);
}

.error-message{
  color:#842029;
  background:rgba(220,53,69,.12);
  border:1px solid rgba(220,53,69,.28);
}

.auth-shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:clamp(1rem,3vw,2rem);
}

.auth-card{
  width:min(100%, 460px);
  padding:clamp(1rem,2vw,1.4rem);
}

.auth-head{
  display:grid;
  gap:.45rem;
  margin-bottom:.75rem;
}

.auth-form{
  display:grid;
  gap:.75rem;
  margin-top:.35rem;
}

.compact-list-wrap{margin-top:.6rem}
.compact-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.dashboard-split{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(250px,1fr);
  gap:1rem;
}

@media (max-width:1024px){
  .container{padding-inline:1rem}
  .table{min-width:620px}
}

@media (max-width:860px){
  .dashboard-split{grid-template-columns:1fr}
}

@media (max-width:640px){
  .grid{gap:.72rem}
  .container{padding-inline:.85rem}
  .table{min-width:0}
}

@media (max-width:540px){
  .table{
    display:block;
    overflow-x:hidden;
    background:transparent;
    min-width:0;
  }

  .table thead{display:none}

  .table tbody,
  .table tr,
  .table td{
    display:block;
    width:100%;
  }

  .table tr{
    margin-bottom:.65rem;
    border-radius:12px;
    overflow:hidden;
  }

  .table td{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:.75rem;
    padding:.65rem .8rem;
  }

  .table td::before{
    content:attr(data-label);
    font-weight:700;
    opacity:.74;
  }
}

@media (max-width:420px){
  .auth-card{padding:.9rem}
  .section-title{font-size:1.18rem}
}