*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f5f7;--surface:#fff;--border:#dfe1e6;--border2:#b3bac5;
  --text:#172b4d;--muted:#5e6c84;--dim:#8993a4;
  --accent:#0052cc;--accent-bg:#deebff;
  --green:#00875a;--green-bg:#e3fcef;
  --red:#de350b;--red-bg:#ffebe6;
  --amber:#ff8b00;--amber-bg:#fffae6;
  --r:6px;
  /* Unified Font Stack */
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Set mono to use the same stack to eliminate the legacy look globally */
  --mono:var(--font); 
}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;min-height:100vh;}

/* Nav */
.nav{background:var(--accent);padding:0 24px;display:flex;align-items:center;gap:0;height:52px;position:sticky;top:0;z-index:100;margin:16px 20px 0 20px;border-radius:12px;}
.nav-logo{color:#fff;font-weight:700;font-size:15px;text-decoration:none;margin-right:24px;display:flex;align-items:center;gap:8px;}
.nav-logo svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;}
.nav-link{color:rgba(255,255,255,0.7);text-decoration:none;padding:0 12px;height:52px;display:flex;align-items:center;font-size:13px;font-weight:500;transition:all .15s;border-bottom:2px solid transparent;margin-bottom:-2px;}
.nav-link:hover{color:#fff;background:rgba(255,255,255,0.1);}
.nav-link.active{color:#fff;border-bottom-color:#fff;}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.conn-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);}
.conn-dot.ok{background:#36b37e;box-shadow:0 0 0 2px rgba(54,179,126,0.3);}
.conn-label{color:rgba(255,255,255,0.7);font-size:12px;font-family:var(--mono);}

/* Layout */
.shell{max-width:1200px;margin:0 auto;padding:24px;}
.page-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px;}
.page-sub{font-size:13px;color:var(--muted);margin-bottom:20px;}

/* Config bar */
.config-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:20px;}
.config-bar-inner{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:flex-end;}
.config-msg{margin-top:8px;font-size:12px;min-height:16px;}

/* Form */
.field{display:flex;flex-direction:column;gap:4px;}
.field label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
input,select{height:36px;padding:0 10px;border:2px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);font-family:var(--font);font-size:13px;outline:none;transition:border-color .15s;appearance:none;-webkit-appearance:none;}
input::placeholder{color:var(--dim);}
input:focus,select:focus{border-color:var(--accent);}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235e6c84' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer;}

/* Buttons */
.btn{height:36px;padding:0 14px;border-radius:var(--r);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap;}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:#0065ff;}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.btn-ghost{background:var(--surface);color:var(--muted);border:2px solid var(--border);}
.btn-ghost:hover{border-color:var(--border2);color:var(--text);}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed;}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.card-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fafbfc;}
.card-title{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;}
.card-title svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.card-sub{font-size:11px;color:var(--muted);font-family:var(--font);} /* */
.card-body{padding:16px;}

/* Metrics */
.metrics{display:grid;gap:12px;margin-bottom:16px;}
.metrics-3{grid-template-columns:repeat(3,1fr);}
.metrics-4{grid-template-columns:repeat(4,1fr);}
.metrics-5{grid-template-columns:repeat(5,1fr);}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;}
.metric-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.metric-value{font-size:22px;font-weight:700;color:var(--text);}
.metric-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.metric.red{border-left:3px solid var(--red);}.metric.green{border-left:3px solid var(--green);}.metric.amber{border-left:3px solid var(--amber);}.metric.blue{border-left:3px solid var(--accent);}
.val-red{color:var(--red);}.val-green{color:var(--green);}.val-amber{color:var(--amber);}

/* Grid layouts */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.full{margin-bottom:16px;}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
}

thead th {
  /* This pins the header to the top */
  position: sticky;
  top: 0;
  /* Ensures the header sits above the scrolling data rows */
  z-index: 10;
  /* Background is required to prevent rows from being visible behind the text */
  background: #f4f5f7; 
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--border);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: #fafbfc;
}

tbody td {
  padding: 10px 12px;
  vertical-align: middle;
}

.day-row td {
  background: #f4f5f7;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 5px 12px;
  font-family: var(--font);
}

/* Badges */
.badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 6px;border-radius:3px;font-family:var(--font);text-transform:uppercase;vertical-align:middle;margin-left:4px;} /* */
.badge-done{background:#e3fcef;color:#00875a;}
.badge-uat{background:#deebff;color:#0052cc;}
.badge-closed,.badge-resolved{background:#dfe1e6;color:#5e6c84;}
.badge-inprogress{background:#fffae6;color:#ff8b00;}
.badge-bug{background:#ffebe6;color:#de350b;}
.badge-added{background:#fffae6;color:#ff8b00;}
.badge-spill{background:#ffebe6;color:#de350b;}
.badge-label{background:#f4f5f7;color:#5e6c84;border:1px solid var(--border);}
.badge-feature{background:#eae6ff;color:#5243aa;}
.badge-priority-highest{background:#172b4d;color:#fff;}
.badge-priority-high{background:#ffebe6;color:#bf2600;}
.badge-priority-medium{background:#fffae6;color:#ff8b00;}
.badge-priority-low{background:#deebff;color:#0052cc;}

/* Issue rows */
.ii{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.ii:last-child{border-bottom:none;}
.ii-key{font-family:var(--font);font-size:11px;font-weight:600;color:var(--accent);min-width:68px;white-space:nowrap;} /* */
.ii-sum{font-size:12px;color:var(--muted);flex:1;line-height:1.4;}
.ii-who{font-size:11px;color:var(--dim);white-space:nowrap;}
.ii-hrs{font-size:11px;font-family:var(--font);font-weight:600;white-space:nowrap;color:var(--text);} /* */

/* Avatar */
.avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}

/* Estimate bar */
.est-wrap{min-width:160px;}
.est-bar{height:4px;background:#dfe1e6;border-radius:2px;overflow:hidden;margin-bottom:4px;}
.est-bar-fill{height:100%;border-radius:2px;}
.est-bar-fill.ok{background:var(--green);}.est-bar-fill.warn{background:var(--amber);}.est-bar-fill.over{background:var(--red);}
.est-nums{display:flex;justify-content:space-between;font-size:10px;font-family:var(--font);} /* */
.est-remain{font-weight:600;}.est-remain.ok{color:var(--green);}.est-remain.warn{color:var(--amber);}.est-remain.over{color:var(--red);}
.est-none{color:var(--dim);font-size:11px;font-family:var(--font);} /* */

/* --- Donut --- */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.donut-legend div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 5px;
  font-family: var(--font); /* */
  color: var(--text);
}
.donut-legend span.dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.donut-legend span.name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.donut-legend span.val {
  font-family: var(--font); /* */
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* Bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;        /* Very small gap to match the reference image */
  height: 250px;   /* Significantly taller to match the scale of your reference */
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border); /* Adds the baseline look from the reference */
}

.bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bar {
  width: 100%;
  /* No max-width here so they can fill the space and look 'thick' like the reference */
  border-radius: 2px 2px 0 0; /* Slightly sharper corners for a professional look */
  min-height: 2px;
  transition: height .4s;
  background: #ff9d85; /* This matches the salmon-pink color in your reference photo */
}

.bar-val {
  font-size: 11px;
  font-weight: 700; /* Bold numbers above the bars like the reference */
  color: var(--text);
  font-family: var(--font);
}

.chart-labels {
  display: flex;
  gap: 4px; /* Matches the chart gap */
  margin-top: 8px;
}

.chart-labels span {
  flex: 1;
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font);
  text-align: center;
  line-height: 1.2;
}

/* Section divider */
.section-div{display:flex;align-items:center;gap:12px;margin:20px 0 14px;}
.section-div hr{flex:1;border:none;border-top:1px solid var(--border);}
.section-div span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap;}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.chip{padding:5px 12px;border-radius:20px;font-size:12px;border:2px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .15s;}
.chip:hover{border-color:var(--accent);color:var(--accent);}
.chip.selected{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:600;}

/* Empty */
.empty{text-align:center;padding:48px 16px;color:var(--muted);}
.empty svg{width:40px;height:40px;stroke:var(--dim);fill:none;stroke-width:1.5;margin:0 auto 12px;display:block;opacity:.5;}
.empty h3{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;}
.empty p{font-size:13px;}

/* Error */
.error-bar{background:var(--red-bg);border:1px solid #ffbdad;border-radius:var(--r);padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:16px;display:none;}
.error-bar.show{display:block;}

/* Spinner */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .7s linear infinite;display:inline-block;}
.loading-spinner{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#c1c7d0;border-radius:3px;}
/* ── Inline admin table ─────────────────────────── */
.users-table { width:100%; border-collapse:collapse; }
.users-table th { position:sticky;top:0;z-index:10;background:#fafbfc;padding:9px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:2px solid var(--border); }
.users-table td { padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:13px; }
.users-table tr:last-child td { border-bottom:none; }
.users-table tbody tr:hover td { background:#fafbfc; }
.org-tag { display:inline-block;padding:2px 7px;background:var(--bg);border:1px solid var(--border);border-radius:3px;font-size:11px;color:var(--muted); }