:root{
  --dose:#f47b20;
  --dose-2:#ff8b34;
  --dose-soft:#fff5ec;
  --dose-soft-2:#fffaf6;
  --ink:#171717;
  --text:#323232;
  --muted:#8a8a8a;
  --line:#eee8e2;
  --bg:#fbfaf8;
  --white:#ffffff;
  --green:#198754;
  --red:#c53d32;
  --shadow:0 8px 28px rgba(44,31,18,.06);
  --shadow-hover:0 12px 30px rgba(44,31,18,.10);
  --radius:18px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 100% 0, rgba(244,123,32,.055), transparent 26%),
    linear-gradient(180deg,#fff 0,#fbfaf8 100%);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button,input,select,textarea{font:inherit}

/* LEFT NAV — same bright DOSE web feeling */
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:260px;
  background:#fff;
  border-right:1px solid var(--line);
  padding:24px 18px;
  overflow-y:auto;
  z-index:20;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin:3px 8px 27px;
  color:var(--ink);
  font-size:21px;
  font-weight:900;
  letter-spacing:-.55px;
}
.brand::before{
  content:"";
  width:10px;
  height:31px;
  border-radius:10px;
  background:linear-gradient(180deg,#ff9a54,var(--dose));
}
.brand b{color:var(--dose)}
.brand span{color:var(--ink);font-weight:800}

.tenant{
  padding:14px 15px;
  border:1px solid #f1e9e2;
  border-radius:16px;
  background:linear-gradient(135deg,#fffaf6,#fff);
  margin-bottom:18px;
}
.tenant strong{display:block;color:var(--ink);font-size:14px}
.tenant small{display:block;color:var(--muted);font-size:11px;margin-top:4px}

nav{display:flex;flex-direction:column;gap:3px}
nav a{
  display:flex;
  align-items:center;
  min-height:43px;
  padding:0 14px;
  border-radius:12px;
  color:#696969;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  transition:.16s ease;
}
nav a:hover{
  color:var(--dose);
  background:var(--dose-soft-2);
}
nav a.active{
  background:var(--dose-soft);
  color:var(--dose);
  box-shadow:inset 3px 0 0 var(--dose);
}

/* PAGE */
.main{
  margin-left:260px;
  min-height:100vh;
  padding:32px 36px 55px;
}
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:26px;
}
.top h1{
  margin:0;
  color:var(--ink);
  font-size:29px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:-.9px;
}
.muted{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
  margin-top:6px;
}
.userpill{
  display:flex;
  align-items:center;
  gap:9px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  min-height:43px;
  padding:7px 13px 7px 7px;
  box-shadow:var(--shadow);
  color:#555;
  font-size:12px;
  font-weight:750;
}
.userpill::before{
  content:"D";
  display:grid;
  place-items:center;
  width:29px;height:29px;
  border-radius:50%;
  background:var(--dose);
  color:#fff;
  font-size:12px;
  font-weight:900;
}

/* CARDS */
.card,.filters,.alert{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card{
  padding:21px;
  transition:.16s ease;
}
.card:hover{box-shadow:var(--shadow-hover)}
.cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  margin:15px 0 19px;
}
.metric{
  min-height:126px;
  position:relative;
  overflow:hidden;
}
.metric::before{
  content:"";
  position:absolute;
  right:-28px;top:-28px;
  width:86px;height:86px;
  border-radius:50%;
  background:var(--dose-soft);
}
.metric small{
  color:#96908a;
  text-transform:uppercase;
  letter-spacing:.45px;
  font-size:10px;
  font-weight:850;
}
.metric h2{
  margin:15px 0 4px;
  color:var(--ink);
  font-size:27px;
  letter-spacing:-.8px;
}
.metric span{
  color:var(--green);
  font-size:11px;
  font-weight:750;
}
.card h3{
  margin:0 0 15px;
  color:var(--ink);
  font-size:16px;
  letter-spacing:-.25px;
}
.grid2{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:15px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.sectiontitle{
  display:flex;justify-content:space-between;align-items:center;gap:14px;margin:4px 0 13px;
}

/* FORM / FILTER */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding:12px;
  margin-bottom:15px;
}
input,select,textarea{
  min-height:42px;
  padding:10px 12px;
  color:var(--ink);
  background:#fff;
  border:1px solid #e6e0db;
  border-radius:11px;
  outline:none;
}
input::placeholder,textarea::placeholder{color:#aaa}
input:focus,select:focus,textarea:focus{
  border-color:rgba(244,123,32,.65);
  box-shadow:0 0 0 4px rgba(244,123,32,.09);
}
textarea{width:100%;min-height:100px}
button,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 15px;
  border-radius:11px;
  border:1px solid #e3ded9;
  background:#fff;
  color:#555;
  text-decoration:none;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  transition:.16s ease;
}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.055)}
.primary{
  color:#fff;
  border-color:var(--dose);
  background:linear-gradient(135deg,var(--dose),var(--dose-2));
  box-shadow:0 8px 18px rgba(244,123,32,.17);
}
.danger{color:var(--red);border-color:#f0d0ca;background:#fff8f6}

/* TABLES */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12.5px;
}
th,td{
  padding:13px 11px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid #f1ece8;
}
th{
  background:#fffaf6;
  color:#988f88;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-weight:850;
}
th:first-child{border-radius:10px 0 0 10px}
th:last-child{border-radius:0 10px 10px 0}
tbody tr:hover td{background:#fffdfb}
tbody tr:last-child td{border-bottom:0}
.link{color:var(--dose);text-decoration:none;font-weight:800}
.link:hover{text-decoration:underline}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  color:var(--green);
  background:#eef9f2;
  font-size:10px;
  font-weight:850;
}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ALERTS */
.alert{
  padding:12px 14px;
  margin-bottom:14px;
  font-size:12px;
  font-weight:650;
}
.alert.success{background:#f4fbf7;border-color:#cce8d6;color:var(--green)}
.alert.error{background:#fff7f5;border-color:#f1cbc5;color:var(--red)}

/* LIGHT DOSE LOGIN */
.loginwrap{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);
  background:#fff;
}
.loginwrap::before{
  content:"";
  min-height:100vh;
  background:
    radial-gradient(circle at 32% 25%,rgba(255,255,255,.24),transparent 25%),
    linear-gradient(145deg,#f47b20 0%,#ff9140 58%,#ffad72 100%);
}
.loginbox{
  align-self:center;
  justify-self:center;
  width:min(430px,calc(100% - 48px));
  padding:36px;
  background:#fff;
}
.loginbox .brand{
  margin:0 0 34px;
  font-size:24px;
}
.loginbox h2{
  margin:0 0 8px;
  color:var(--ink);
  font-size:30px;
  font-weight:850;
  letter-spacing:-1px;
}
.loginbox .muted{margin-bottom:23px}
.loginbox form{display:grid;gap:11px}
.loginbox input{
  width:100%;
  height:49px;
  border-radius:13px;
  background:#fff;
}
.loginbox button{
  width:100%;
  height:49px;
  border-radius:13px;
  margin-top:2px;
  font-size:13px;
}
.loginlinks{text-align:center;margin-top:15px}
.loginlinks a{
  color:var(--dose);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}
.loginlinks a:hover{text-decoration:underline}

/* misc */
.code{
  white-space:pre-wrap;
  background:#292929;
  color:#f7f7f7;
  border-radius:14px;
  padding:15px;
  overflow:auto;
  font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  line-height:1.55;
}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.small{font-size:11px}

@media(max-width:1150px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr 1fr}
}
@media(max-width:920px){
  .sidebar{width:215px}
  .main{margin-left:215px;padding:26px 21px}
  .grid2{grid-template-columns:1fr}
  .loginwrap{grid-template-columns:1fr}
  .loginwrap::before{display:none}
}
@media(max-width:700px){
  .sidebar{position:relative;width:100%;padding:16px}
  .brand{margin-bottom:14px}
  .tenant{margin-bottom:12px}
  nav{display:grid;grid-template-columns:repeat(2,1fr)}
  nav a{justify-content:center}
  .main{margin-left:0;padding:19px 13px 40px}
  .top{align-items:center}
  .top h1{font-size:24px}
  .cards,.grid3{grid-template-columns:1fr}
  .card{padding:17px;overflow-x:auto}
  table{min-width:740px}
  .loginbox{padding:28px 22px}
}