/* Modern responsive UI for /users
   - Keeps current background image (/users/assets/img/bg_abstract_1.webp)
   - Uses Inter (loaded in partials/header.php)
*/

/* Root tokens --------------------------------------------------------------*/
:root{
  --brand:#0ea5e9;            /* main accent */
  --brand-strong:#0284c7;     /* hover / stronger */
  --danger:#ef4444;
  --success:#16a34a;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#020617;
  --card:#0b1120;
  --card-soft:rgba(15,23,42,.9);
  --border:#1f2937;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-pill:999px;
  --shadow-lg:0 30px 80px rgba(15,23,42,.75);
  --shadow-md:0 18px 45px rgba(15,23,42,.55);
  --ring:0 0 0 1px rgba(56,189,248,.45),0 0 0 8px rgba(56,189,248,.12);
}

/* Reset & base -------------------------------------------------------------*/
*,
*::before,
*::after{
  box-sizing:border-box;
}

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

body{
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:#e5e7eb;
  background:
    radial-gradient(circle at top left,rgba(56,189,248,.25),transparent 55%),
    radial-gradient(circle at bottom right,rgba(94,234,212,.16),transparent 55%),
    linear-gradient(rgba(15,23,42,.9),rgba(15,23,42,.98)),
    url("/users/assets/img/bg_abstract_1.webp") center / cover fixed no-repeat,
    var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{
  color:var(--brand);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* Layout containers --------------------------------------------------------*/
.users-header{
  padding:1.25rem 1.25rem 0;
}

.users-topbar{
  max-width:1140px;
  margin:0 auto;
  padding:.85rem 1.25rem;
  border-radius:var(--radius-pill);
  background:linear-gradient(120deg,rgba(15,23,42,.96),rgba(15,23,42,.94));
  border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-md);
  display:flex;
  align-items:center;
  gap:1.25rem;
}

.users-brand{
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.8rem;
  color:#e5e7eb;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.users-brand a{
  color:#f9fafb;
}

/* Top navigation -----------------------------------------------------------*/
.users-auth{
  margin-left:auto;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  font-size:.85rem;
}

.users-user{
  color:rgba(226,232,240,.9);
  font-weight:500;
  margin-right:.25rem;
}

.users-link{
  display:inline-flex;
  align-items:center;
  padding:.35rem .75rem;
  border-radius:999px;
  border:1px solid transparent;
  color:rgba(226,232,240,.94);
  text-decoration:none;
  background:rgba(15,23,42,.75);
}
.users-link:hover{
  border-color:rgba(148,163,184,.5);
  background:rgba(30,64,175,.8);
  text-decoration:none;
}

/* Main container / cards ---------------------------------------------------*/
.users-container{
  max-width:1140px;
  margin:2.25rem auto;
  padding:0 1.25rem 2.5rem;
}

.users-card{
  background:var(--card-soft);
  border-radius:var(--radius-lg);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:var(--shadow-lg);
  padding:2rem 2rem;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* Card header + title ------------------------------------------------------*/
.users-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
}

.users-title{
  margin:0;
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#f9fafb;
}

.users-note{
  margin:.25rem 0 1.5rem;
  font-size:.9rem;
  color:var(--muted);
}

/* Alerts -------------------------------------------------------------------*/
.users-alert{
  padding:.9rem 1rem;
  border-radius:var(--radius-md);
  margin:0 0 1.1rem;
  font-size:.9rem;
  font-weight:500;
}

.users-alert-info{
  background:rgba(59,130,246,.16);
  color:#bfdbfe;
  border:1px solid rgba(59,130,246,.6);
}

.users-alert-success{
  background:rgba(22,163,74,.16);
  color:#bbf7d0;
  border:1px solid rgba(22,163,74,.6);
}

.users-alert-error{
  background:rgba(220,38,38,.16);
  color:#fecaca;
  border:1px solid rgba(220,38,38,.65);
}

/* Empty states -------------------------------------------------------------*/
.users-empty{
  padding:1.75rem 1.5rem;
  border-radius:var(--radius-md);
  border:1px dashed rgba(148,163,184,.6);
  font-size:.9rem;
  color:rgba(209,213,219,.95);
  text-align:center;
  background:radial-gradient(circle at top,rgba(148,163,184,.18),transparent 55%);
}

/* Forms --------------------------------------------------------------------*/
.users-form{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.users-form-group{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}

.users-label{
  display:block;
  font-weight:600;
  font-size:.88rem;
  color:#e5e7eb;
}

.users-field,
.users-form input[type="text"],
.users-form input[type="email"],
.users-form input[type="password"],
.users-form input[type="number"],
.users-form input[type="url"],
.users-form select{
  width:100%;
  height:42px;
  padding:.6rem .9rem;
  border-radius:var(--radius-md);
  border:1px solid rgba(148,163,184,.6);
  background:rgba(15,23,42,.85);
  color:#e5e7eb;
  font-size:.9rem;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.users-field::placeholder{
  color:rgba(148,163,184,.9);
}

.users-field:focus,
.users-form input:focus,
.users-form select:focus{
  border-color:rgba(56,189,248,.9);
  box-shadow:var(--ring);
  background:rgba(15,23,42,1);
}

/* Generic small text */
small{
  font-size:.8rem;
  color:var(--muted);
}

/* Buttons ------------------------------------------------------------------*/
.users-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  border-radius:var(--radius-pill);
  padding:.55rem 1.25rem;
  font-size:.88rem;
  font-weight:600;
  border:1px solid transparent;
  background:rgba(15,23,42,.85);
  color:#e5e7eb;
  cursor:pointer;
  transition:background .16s ease, transform .08s ease, box-shadow .16s ease, border-color .16s ease;
}

.users-btn:hover{
  background:rgba(15,23,42,1);
  border-color:rgba(148,163,184,.75);
  box-shadow:0 12px 28px rgba(15,23,42,.45);
  text-decoration:none;
}

.users-btn:active{
  transform:translateY(1px);
  box-shadow:none;
}

.users-btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));
  border-color:rgba(56,189,248,.75);
  color:#0f172a;
}
.users-btn-primary:hover{
  background:linear-gradient(135deg,var(--brand-strong),var(--brand));
}

.users-btn-secondary{
  background:rgba(15,23,42,.85);
  border-color:rgba(148,163,184,.7);
  color:#e5e7eb;
}
.users-btn-secondary:hover{
  background:rgba(15,23,42,1);
}

/* Tables -------------------------------------------------------------------*/
.users-table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0 0;
  font-size:.88rem;
  background:rgba(15,23,42,.7);
  border-radius:var(--radius-md);
  overflow:hidden;
}

.users-table thead{
  background:linear-gradient(135deg,rgba(15,23,42,.95),rgba(30,64,175,.9));
}

.users-table th,
.users-table td{
  padding:.65rem .8rem;
  border-bottom:1px solid rgba(31,41,55,.9);
  text-align:left;
  white-space:nowrap;
}

.users-table th{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(203,213,225,.9);
}

.users-table tbody tr:nth-child(even){
  background:rgba(15,23,42,.85);
}

.users-table tbody tr:hover{
  background:rgba(30,64,175,.65);
}

/* Cell used for action buttons */
.users-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

/* Renew form inside table --------------------------------------------------*/
.users-renew-form{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
}

/* Misc utility -------------------------------------------------------------*/
.users-auth .users-link + .users-link{
  margin-left:.15rem;
}

/* reCAPTCHA spacing */
.g-recaptcha{
  margin-top:1rem;
}

/* Footer spacer when needed */
.users-footer{
  height:2rem;
}

/* Responsive behaviour -----------------------------------------------------*/
@media (max-width: 960px){
  .users-topbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .users-auth{
    margin-left:0;
    width:100%;
  }
  .users-container{
    margin:1.75rem auto;
    padding:0 1.25rem 2rem;
  }
  .users-card{
    padding:1.5rem 1.4rem;
  }
}

@media (max-width: 720px){
  body{
    background-attachment:scroll;
  }
  .users-topbar{
    padding:.75rem .9rem;
  }
  .users-card{
    padding:1.35rem 1.1rem;
    border-radius:16px;
  }
  .users-card-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .users-title{
    font-size:1.15rem;
  }
  .users-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .users-table table{
    min-width:720px;
  }
  .users-actions{
    flex-direction:row;
  }
}

@media (max-width: 480px){
  .users-header{
    padding:1rem .75rem 0;
  }
  .users-container{
    padding:0 .75rem 1.5rem;
  }
  .users-auth{
    gap:.4rem;
  }
  .users-btn{
    width:100%;
    justify-content:center;
  }
}