/* Guardian Link Company Dashboard — CSS Hotfix v2.0.1
   Fixes the broken first-admin/login form layout and normalises Phase 2 dashboard UI.
*/
:root{
  --gl-navy:#14254a;
  --gl-navy-2:#0f1f40;
  --gl-blue:#4d7cff;
  --gl-blue-dark:#315fdb;
  --gl-bg:#f4f7fb;
  --gl-card:#ffffff;
  --gl-text:#17233c;
  --gl-muted:#718096;
  --gl-border:#dfe6f1;
  --gl-danger:#c62828;
  --gl-success:#0c9b68;
  --gl-shadow:0 12px 34px rgba(20,37,74,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--gl-bg);color:var(--gl-text)}
body{min-width:320px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}

/* MAIN LAYOUT */
.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:254px minmax(0,1fr);
  background:var(--gl-bg);
}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:28px 24px;
  color:#fff;
  background:linear-gradient(180deg,#172c57 0%,#10254d 55%,#0d2147 100%);
  box-shadow:10px 0 30px rgba(15,31,64,.08);
  z-index:10;
}
.sidebar .logo{
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:15px;
  background:#fff;
  padding:4px;
  margin-bottom:22px;
}
.sidebar h1{
  margin:0;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.03em;
  color:#fff;
}
.sidebar p{
  margin:22px 0 0;
  color:#f5f8ff;
  font-size:16px;
  line-height:1.45;
}
.sidebar nav{
  display:grid;
  gap:10px;
  margin-top:46px;
}
.sidebar nav button,
.sidebar .ghost{
  width:100%;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.07);
  color:#fff;
  border-radius:12px;
  padding:13px 14px;
  text-align:left;
  transition:.16s ease;
}
.sidebar nav button:hover,
.sidebar .ghost:hover{
  background:rgba(255,255,255,.13);
  transform:translateY(-1px);
}
.sidebar nav button.active{
  background:rgba(93,132,255,.24);
  border-color:rgba(109,147,255,.30);
}
.sidebar .ghost{
  margin-top:auto;
  color:#fff;
}

main{
  min-width:0;
  width:100%;
  padding:34px 38px 54px;
}

/* AUTH / FIRST ADMIN CARD */
.auth-card{
  width:min(100%,620px);
  margin:7vh auto 0;
  padding:32px 34px 34px!important;
}
.card{
  background:var(--gl-card);
  border:1px solid var(--gl-border);
  border-radius:20px;
  box-shadow:var(--gl-shadow);
}
.auth-card .eyebrow{
  margin:0 0 16px;
}
.auth-card h2{
  margin:0 0 26px;
  font-size:28px;
  line-height:1.2;
  letter-spacing:-.02em;
}

/* THIS IS THE IMPORTANT FIX:
   forms must be stacked and labels must wrap their inputs instead of flowing inline.
*/
.auth-card form{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:18px!important;
  width:100%;
}
.auth-card form label{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  width:100%;
  margin:0!important;
  color:var(--gl-text);
  font-size:14px;
  font-weight:700;
  line-height:1.25;
}
.auth-card form input,
.auth-card form select,
.auth-card form textarea{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:48px;
  margin:0!important;
  padding:0 14px!important;
  border:1px solid #cbd5e4!important;
  border-radius:11px!important;
  background:#fff!important;
  color:var(--gl-text)!important;
  outline:none!important;
  box-shadow:none!important;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.auth-card form input:focus,
.auth-card form select:focus,
.auth-card form textarea:focus{
  border-color:var(--gl-blue)!important;
  box-shadow:0 0 0 4px rgba(77,124,255,.12)!important;
}
.auth-card form button{
  display:block!important;
  width:100%!important;
  min-height:48px;
  margin-top:2px!important;
  border:0!important;
  border-radius:11px!important;
  background:linear-gradient(135deg,var(--gl-blue),var(--gl-blue-dark))!important;
  color:#fff!important;
  font-weight:800!important;
  padding:12px 18px!important;
  box-shadow:0 8px 20px rgba(77,124,255,.22);
}
.auth-card form button:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}
.auth-card .error{
  min-height:18px;
  margin:14px 0 0;
  color:var(--gl-danger);
  font-size:13px;
  font-weight:700;
}
#setupForm + #loginForm:not([hidden]),
#loginForm + #setupForm:not([hidden]){
  margin-top:0;
}

/* DASHBOARD */
.topbar,
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.topbar h2{
  margin:4px 0 0;
  font-size:30px;
  letter-spacing:-.025em;
}
.eyebrow{
  color:var(--gl-blue);
  font-size:11px;
  line-height:1;
  letter-spacing:.15em;
  font-weight:900;
  text-transform:uppercase;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.actions select,
.section-head select{
  height:42px;
  padding:0 12px;
  border:1px solid var(--gl-border);
  border-radius:10px;
  background:#fff;
  color:var(--gl-text);
}

.metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:18px 0;
}
.metric{
  min-width:0;
  padding:18px;
  background:#fff;
  border:1px solid var(--gl-border);
  border-radius:16px;
  box-shadow:0 6px 22px rgba(20,37,74,.06);
}
.metric strong{
  display:block;
  font-size:26px;
  line-height:1.1;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.metric span,
.metric small{
  display:block;
  margin-top:6px;
  color:var(--gl-muted);
}
.grid2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  margin:18px 0;
}
.grid2>.card,
section.card{
  padding:20px;
}
.card h3{
  margin:0 0 16px;
  font-size:18px;
}
canvas{
  display:block;
  width:100%!important;
  max-width:100%;
}
.mix{
  display:grid;
  gap:10px;
}
.mix>div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  background:#f7f9fd;
  border:1px solid #edf1f7;
  border-radius:12px;
}

/* FORMS INSIDE PARTNER MANAGEMENT */
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.form-grid label{
  display:grid;
  gap:7px;
  color:var(--gl-text);
  font-size:13px;
  font-weight:700;
}
.form-grid label input,
.form-grid label select{
  width:100%;
  min-width:0;
  height:44px;
  padding:0 12px;
  border:1px solid #cbd5e4;
  border-radius:10px;
  background:#fff;
  outline:none;
}
.form-grid fieldset{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:0;
  padding:14px;
  border:1px solid var(--gl-border);
  border-radius:12px;
}
.form-grid fieldset legend{
  padding:0 6px;
  font-weight:800;
  font-size:13px;
}
.form-grid fieldset input{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 10px;
  border:1px solid #cbd5e4;
  border-radius:9px;
}
.form-grid>button{
  grid-column:1/-1;
}

/* BUTTONS */
.primary,
form button{
  border:0;
  border-radius:10px;
  background:var(--gl-blue);
  color:#fff;
  padding:11px 15px;
  font-weight:800;
}
.secondary,
.mini{
  border:1px solid #cbd5e4;
  border-radius:9px;
  background:#fff;
  color:var(--gl-text);
  padding:9px 12px;
  font-weight:700;
}
.primary:hover,
form button:hover{
  background:var(--gl-blue-dark);
}
.secondary:hover,
.mini:hover{
  background:#f7f9fd;
}

/* TABLES */
.table-wrap{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
}
th,td{
  padding:12px 11px;
  border-bottom:1px solid #edf0f5;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
}
th{
  color:var(--gl-muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
td{
  font-size:14px;
}
.status{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  text-transform:capitalize;
}
.status.pending{background:#fff4d8;color:#8a6411}
.status.approved{background:#e8f1ff;color:#245ec6}
.status.paid{background:#e6f8ed;color:#087b50}

/* RESPONSIVE */
@media (max-width:1080px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:780px){
  .shell{grid-template-columns:1fr}
  .sidebar{
    position:relative;
    height:auto;
    min-height:0;
    padding:18px;
  }
  .sidebar .logo{width:52px;height:52px;margin-bottom:10px}
  .sidebar h1{font-size:24px}
  .sidebar p{margin-top:8px;font-size:14px}
  .sidebar nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:18px;
  }
  .sidebar .ghost{margin-top:14px}
  main{padding:18px 14px 34px}
  .auth-card{
    margin:22px auto 0;
    padding:24px 18px 26px!important;
    border-radius:16px;
  }
  .auth-card h2{font-size:24px}
  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .metrics{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid fieldset{grid-template-columns:1fr}
}
@media (max-width:480px){
  .sidebar nav{grid-template-columns:1fr}
}