:root{
  --purple:#6f3cff;
  --purple-dark:#5830c9;
  --purple-soft:#f0ebff;
  --bg:#f6f6fa;
  --surface:#ffffff;
  --surface2:#fafafe;
  --border:#e5e5ed;
  --text:#22232a;
  --muted:#727580;
  --nav:#19171f;
  --nav2:#292530;
  --danger:#b42318;
  --danger-bg:#fff5f4;
  --warning:#9a6700;
  --warning-bg:#fff8e7;
  --success:#18794e;
  --success-bg:#edf9f3;
  --blue:#175cd3;
  --blue-bg:#eff5ff;
}

*{
  box-sizing:border-box;
}

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

body{
  background:var(--bg);
  color:var(--text);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.hidden{
  display:none!important;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

h1{
  margin:0;
  font-size:29px;
  letter-spacing:-.03em;
}

h2{
  margin:0;
  font-size:19px;
}

h3{
  margin:0;
}

p{
  line-height:1.5;
}

.muted{
  color:var(--muted);
}

.eyebrow{
  color:var(--purple);
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
  margin-bottom:7px;
}


/* LOGIN */

.login-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(111,60,255,.11),
      transparent 35%
    ),
    var(--bg);
}

.login-card{
  width:min(430px,100%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:38px;
  box-shadow:0 25px 70px rgba(24,20,40,.08);
}

.brand-name{
  font-weight:850;
  color:var(--purple);
  font-size:21px;
}

.brand-name.light{
  color:#fff;
}

.brand-product{
  color:#8d8995;
  font-size:13px;
  margin-top:2px;
}

.brand-mark{
  margin-bottom:31px;
}

label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#5f626b;
  margin:15px 0 7px;
}

input,
select,
textarea{
  width:100%;
  padding:11px 12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  outline:none;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#b9a7ff;
  box-shadow:0 0 0 3px rgba(111,60,255,.08);
}

textarea{
  resize:vertical;
  min-height:100px;
}

.button{
  border:0;
  padding:10px 14px;
  border-radius:9px;
  font-weight:700;
}

.button.primary{
  background:var(--purple);
  color:#fff;
}

.button.primary:hover{
  background:var(--purple-dark);
}

.button.secondary{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
}

.button.ghost{
  background:transparent;
  color:#565963;
}

.button.danger{
  background:var(--danger-bg);
  color:var(--danger);
}

.full{
  width:100%;
  margin-top:22px;
}

.notice{
  padding:12px;
  border-radius:9px;
  background:var(--blue-bg);
  color:var(--blue);
  margin:10px 0;
}

.error{
  margin-top:15px;
  padding:12px;
  background:var(--danger-bg);
  border:1px solid #ffd5d0;
  color:var(--danger);
  border-radius:9px;
}


/* SHELL */

.app-shell{
  min-height:100vh;
}

.sidebar{
  width:235px;
  position:fixed;
  inset:0 auto 0 0;
  background:var(--nav);
  color:#fff;
  padding:25px 15px;
  overflow-y:auto;
}

.sidebar-brand{
  padding:0 11px 25px;
}

nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.nav-item{
  border:0;
  background:transparent;
  color:#bcb8c3;
  border-radius:8px;
  padding:10px 12px;
  text-align:left;
}

.nav-item:hover,
.nav-item.active{
  background:var(--nav2);
  color:#fff;
}

.main{
  margin-left:235px;
}

.topbar{
  height:69px;
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 27px;
  position:sticky;
  top:0;
  z-index:10;
}

.tenant-selector{
  width:325px;
  font-weight:650;
}

.topbar-user{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:13px;
}

.page{
  padding:29px;
}

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.page-head p{
  margin:5px 0 0;
}


/* CARDS */

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

.metric-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:13px;
  padding:19px;
}

.metric-card.purple{
  background:
    linear-gradient(
      135deg,
      #6f3cff,
      #5c30d5
    );
  color:#fff;
  border-color:transparent;
}

.metric-card span{
  display:block;
  font-size:13px;
  color:var(--muted);
}

.metric-card.purple span,
.metric-card.purple small{
  color:#e6ddff;
}

.metric-card strong{
  display:block;
  font-size:31px;
  margin:7px 0 2px;
}

.metric-card small{
  color:#8b8e97;
}

.panel{
  margin-top:18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:13px;
  padding:19px;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:17px;
}

.dashboard-columns{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:18px;
}

.overview-list > div{
  display:flex;
  justify-content:space-between;
  padding:11px 0;
  border-bottom:1px solid var(--border);
}

.overview-list > div:last-child{
  border-bottom:0;
}

.status-pill{
  display:inline-block;
  padding:6px 9px;
  border-radius:999px;
  background:var(--purple-soft);
  color:var(--purple-dark);
  font-size:12px;
  font-weight:750;
}

.warning{
  background:var(--warning-bg);
  color:#725200;
  border:1px solid #ffe3a1;
  padding:12px;
  border-radius:9px;
}

.gap-card{
  background:var(--danger-bg);
  border:1px solid #f6d1cd;
  padding:11px 13px;
  border-radius:9px;
  margin-bottom:7px;
}

.success-card{
  background:var(--success-bg);
  color:var(--success);
  border:1px solid #cce8da;
  padding:12px;
  border-radius:9px;
}


/* CONTROLS */

.toolbar{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:12px;
  margin-bottom:16px;
}

.control-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.control-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:13px;
  padding:17px;
}

.control-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.control-ref{
  color:var(--purple);
  font-size:12px;
  font-weight:800;
}

.control-title{
  margin-top:3px;
  font-weight:760;
  font-size:16px;
}

.control-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.tag{
  background:#f2f2f6;
  color:#646671;
  padding:4px 7px;
  border-radius:6px;
  font-size:11px;
}

.status-select{
  width:190px;
}


/* GENERIC GRID */

.card-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fill,minmax(320px,1fr));
  gap:14px;
}

.person-card,
.approval-card,
.location-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:13px;
  padding:18px;
}

.person-role{
  margin-top:7px;
  background:#f6f4fb;
  padding:8px;
  border-radius:7px;
  font-size:12px;
}

.person-actions{
  display:flex;
  gap:7px;
  margin-top:15px;
}


/* TABLE */

.table-panel{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,
td{
  padding:11px 10px;
  text-align:left;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}

th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#858893;
}

td{
  font-size:13px;
}

tr:last-child td{
  border-bottom:0;
}

.overdue{
  color:var(--danger);
  font-weight:750;
}

.priority-CRITICAL{
  color:#b42318;
  font-weight:800;
}

.priority-HIGH{
  color:#c15c00;
  font-weight:750;
}


/* REGISTER TABS */

.register-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:15px;
}

.chip{
  border:1px solid var(--border);
  background:#fff;
  padding:7px 10px;
  border-radius:999px;
  color:#666974;
}

.chip.active{
  background:var(--purple-soft);
  border-color:#d4c7ff;
  color:var(--purple-dark);
}


/* FORMS */

.form-panel{
  max-width:720px;
}

.form-panel .button{
  margin-top:20px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 15px;
}

.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  color:var(--text);
}

.check-row input{
  width:auto;
}


/* MODAL */

.modal{
  position:fixed;
  inset:0;
  background:rgba(20,17,29,.58);
  display:grid;
  place-items:center;
  padding:22px;
  z-index:100;
}

.modal-card{
  width:min(720px,100%);
  max-height:90vh;
  overflow-y:auto;
  background:#fff;
  border-radius:16px;
  padding:24px;
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:20px;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px;
}


/* TOAST */

.toast{
  position:fixed;
  right:25px;
  bottom:25px;
  background:#211c2d;
  color:#fff;
  padding:13px 17px;
  border-radius:9px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  z-index:200;
}


/* RESPONSIVE */

@media(max-width:1100px){

  .metric-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .dashboard-columns{
    grid-template-columns:1fr;
  }

}

@media(max-width:750px){

  .sidebar{
    display:none;
  }

  .main{
    margin-left:0;
  }

  .metric-grid{
    grid-template-columns:1fr;
  }

  .toolbar{
    grid-template-columns:1fr;
  }

  .topbar{
    padding:0 13px;
  }

  .tenant-selector{
    width:190px;
  }

  .page{
    padding:18px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

}