:root {
  --green: #14532d;
  --green2: #166534;
  --green3: #1e7040;
  --green-soft: #ecfdf3;
  --orange: #eb8f1d;
  --ink: #10231a;
  --muted: #66776d;
  --bg: #f3f7f4;
  --line: #dce7df;
  --panel: #ffffff;
  --red: #b42318;
  --red-soft: #fff1f0;
  --blue: #1d4ed8;
  --blue-soft: #eff6ff;
  --shadow: 0 18px 55px rgba(15, 38, 25, .15);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 15% 18%, rgba(235,143,29,.18), transparent 24rem),
    linear-gradient(145deg, #071b11, #14532d 65%, #1d6d3d);
}
.login-card {
  width: min(470px, 100%);
  padding: 31px;
  border-radius: 21px;
  background: white;
  box-shadow: 0 40px 100px rgba(0,0,0,.34);
}
.brand { display: flex; align-items: center; gap: 11px; }
.logo {
  width: 45px; height: 45px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--orange);
  color: white;
  font-weight: 950;
}
.brand-name { font-size: 18px; font-weight: 950; }
.brand-sub { font-size: 11px; color: var(--muted); }
.login-copy { margin: 28px 0 19px; }
.login-copy h1 { margin: 5px 0 7px; font-size: 25px; }
.login-copy p { margin: 0; color: var(--muted); line-height: 1.5; }
.eyebrow {
  color: var(--orange);
  font-weight: 950;
  font-size: 10px;
  letter-spacing: .14em;
}
.form-stack { display: grid; gap: 15px; }
label {
  display: grid;
  gap: 6px;
  color: #344b3e;
  font-size: 12px;
  font-weight: 850;
}
input, select, textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #c8d8ce;
  border-radius: 10px;
  background: white;
  color: var(--ink);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: #4f9368;
  box-shadow: 0 0 0 3px rgba(22,101,52,.10);
}
.local-box {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 12px;
  border-radius: 11px;
  background: #f5f8f6;
  color: var(--muted);
  font-size: 11px;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 268px;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  background: white;
  border-right: 1px solid var(--line);
}
.side-brand { padding: 0 3px; }
.company-identity {
  display: grid;
  gap: 3px;
  margin-top: 20px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eefaf2, #f8fcf9);
  border: 1px solid #cce3d3;
}
.company-identity b { font-size: 13px; }
.company-identity span { color: var(--muted); font-size: 10px; }
.nav { display: grid; gap: 5px; margin-top: 18px; }
.nav-item {
  padding: 11px 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #42564b;
  text-align: left;
  font-weight: 850;
}
.nav-item:hover { background: #f1f6f2; }
.nav-item.active { background: var(--green); color: white; }
.account-box {
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.account-box b { font-size: 12px; }
.account-box > span { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.role-chip {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eaf1ff;
  color: var(--blue) !important;
  font-weight: 900;
}

.main { min-height: 100vh; margin-left: 268px; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 22px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.topbar h2 { margin: 0; font-size: 20px; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.top-actions, .section-toolbar, .modal-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.content { max-width: 1500px; margin: auto; padding: 20px; }
.view { display: none; }
.view.active { display: block; }

.btn {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--ink);
  font-weight: 850;
}
.btn:hover { filter: brightness(.98); }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.btn.primary { background: var(--green); color: white; border-color: var(--green); }
.btn.secondary { background: white; }
.btn.ghost { margin-top: 7px; background: #f6f9f7; }
.btn.full { width: 100%; }
.text-btn { border: 0; background: transparent; color: var(--green2); font-weight: 900; }
.icon-btn { border: 0; background: transparent; color: var(--muted); font-size: 25px; }

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  border-radius: 17px;
  color: white;
  background: linear-gradient(135deg, #092316, #14532d 64%, #1f7141);
}
.hero h1 { margin: 6px 0; font-size: 25px; }
.hero p { margin: 0; color: #d4ecdc; }
.hero-code {
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  font-weight: 900;
  white-space: nowrap;
}

.status-pill {
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 10px;
  white-space: nowrap;
}
.status-pill.good { background: #dcfce7; color: #166534; }
.status-pill.warning { background: #fff7ed; color: #9a3412; }
.status-pill.bad { background: #fee2e2; color: #991b1b; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin-top: 14px;
}
.stat-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.stat-card span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.stat-card strong { display: block; margin: 6px 0 3px; font-size: 29px; }
.stat-card small { color: var(--muted); }
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-top: 13px;
}
.panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.panel h3 { margin: 0 0 12px; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.recent-audit-panel { margin-top: 13px; }
.list-item {
  display: flex;
  justify-content: space-between;
  gap: 13px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2ef;
}
.list-item:last-child { border-bottom: 0; }
.list-main b { display: block; font-size: 12px; }
.list-main small, .list-side small { color: var(--muted); }
.list-side { text-align: right; }

.capacity-list { display: grid; gap: 14px; }
.capacity-list > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.capacity-list span { font-size: 11px; color: var(--muted); }
.capacity-list b { font-size: 11px; }
.bar {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7efe9;
}
.bar i { display: block; width: 0; height: 100%; background: var(--green3); transition: width .25s; }
.bar.neutral i { width: 100%; background: #b8c8be; }

.section-toolbar { justify-content: space-between; margin-bottom: 12px; }
.search { max-width: 430px; }
.table-card {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
}
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
  padding: 10px;
  background: #f7faf8;
  color: var(--muted);
  font-size: 9px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
td { padding: 10px; border-top: 1px solid #edf2ef; vertical-align: middle; }
td b { display: block; }
td small { color: var(--muted); }
.row-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.mini-btn {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-size: 10px;
  font-weight: 850;
}
.mini-btn.danger { color: var(--red); border-color: #efbbb5; }
.badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.badge.active, .badge.accepted { color: #166534; background: #dcfce7; }
.badge.invited, .badge.pending { color: #9a3412; background: #fff7ed; }
.badge.suspended, .badge.cancelled, .badge.expired { color: #991b1b; background: #fee2e2; }
.badge.role { color: var(--blue); background: #eaf1ff; }
.badge.neutral { color: #475569; background: #f1f5f9; }

.info-banner {
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: var(--blue-soft);
  color: #1e40af;
  font-size: 12px;
}
.info-banner a { color: inherit; font-weight: 900; }
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.profile-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.profile-card h3 { margin: 0 0 12px; }
.kv {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #edf2ef;
  font-size: 12px;
}
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); }
.kv span:last-child { max-width: 65%; font-weight: 800; text-align: right; overflow-wrap: anywhere; }

.system-panel { margin-top: 13px; }
.command-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.command-grid > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.command-grid b, .command-grid code { display: block; }
.command-grid code { margin-top: 7px; color: var(--green2); overflow-wrap: anywhere; }
.safe-note {
  margin-top: 13px;
  padding: 11px;
  border: 1px solid #b7e1c1;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--green2);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4,17,10,.72);
}
.modal {
  width: min(800px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow);
}
.modal.small { width: min(570px, 100%); }
.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: white;
}
.modal-head h3 { margin: 0; }
.modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.modal-body { padding: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.span-2 { grid-column: 1 / -1; }
.checkbox-row {
  display: flex;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}
.checkbox-row input { width: auto; }
.modal-actions { justify-content: flex-end; margin-top: 18px; }
.role-guide {
  display: grid;
  gap: 5px;
  margin-top: 15px;
  padding: 12px;
  border-radius: 10px;
  background: #f5f8f6;
  color: var(--muted);
  font-size: 11px;
}
.role-guide b { color: var(--ink); }
.success-box {
  padding: 14px;
  border: 1px solid #b7e1c1;
  border-radius: 11px;
  background: var(--green-soft);
}
.success-box code {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.message {
  margin-top: 12px;
  padding: 10px;
  border-radius: 9px;
  font-size: 11px;
}
.message.error {
  border: 1px solid #efbbb5;
  background: var(--red-soft);
  color: var(--red);
}
.toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 200;
  max-width: 410px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #1f2937;
  color: white;
  box-shadow: var(--shadow);
  transform: translateY(-130px);
  opacity: 0;
  transition: .2s;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: var(--red); }

@media (max-width: 1080px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar { position: static; width: 100%; }
  .company-identity, .account-box { display: none; }
  .nav { grid-template-columns: repeat(3, 1fr); }
  .main { margin-left: 0; }
  .topbar, .hero { align-items: flex-start; flex-direction: column; }
  .form-grid, .profile-grid, .command-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}


/* COMPANY SENSOR RESULTS */

.sensor-toolbar {
  flex-wrap: wrap;
}

.sensor-toolbar select {
  min-width: 190px;
}

.sensor-result-grid,
.report-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.sensor-result-card,
.report-stat-card {
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  padding: 16px;
  background: #ffffff;
}

.sensor-result-card span,
.report-stat-card span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
}

.sensor-result-card strong {
  display: block;
  margin-top: 8px;
  font-size: 21px;
}

.report-range-box {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 16px 0;
}

.report-range-box > div {
  min-width: 210px;
}

.report-range-box label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.report-preview {
  margin-top: 15px;
}

.report-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-stat-card b {
  display: block;
  margin-bottom: 8px;
}

.report-chart-box {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  overflow-x: auto;
}

.temperature-chart {
  display: block;
  width: 100%;
  min-width: 680px;
  max-height: 310px;
}

.chart-line {
  fill: none;
  stroke-width: 3;
}

.chart-long {
  stroke: #2563eb;
  color: #2563eb;
}

.chart-short {
  stroke: #16a34a;
  color: #16a34a;
}

.chart-body {
  stroke: #dc2626;
  color: #dc2626;
}

.chart-axis {
  stroke: #94a3b8;
  stroke-width: 1;
}

.chart-label {
  fill: #64748b;
  font-size: 12px;
}

.chart-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}

.report-reading-table {
  margin-top: 18px;
}

@media (max-width: 1000px) {
  .sensor-result-grid,
  .report-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sensor-result-grid,
  .report-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== PREMIUM COMPANY COMMAND CENTER V1 ===== */

body {
  background:
    radial-gradient(circle at 78% 4%, rgba(235,143,29,.08), transparent 28rem),
    radial-gradient(circle at 25% 30%, rgba(20,83,45,.06), transparent 34rem),
    #f4f7f5;
}

/* SIDEBAR */

.sidebar {
  width: 274px;
  padding: 20px 15px;
  color: #e9f8ef;
  background:
    radial-gradient(circle at 10% 5%, rgba(235,143,29,.16), transparent 17rem),
    linear-gradient(180deg, #071b12 0%, #092519 45%, #0b2d1d 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 14px 0 40px rgba(4,24,14,.13);
}

.main {
  margin-left: 274px;
}

.sidebar .brand-name {
  color: #ffffff;
}

.sidebar .brand-sub {
  color: #8fb19c;
}

.sidebar .logo {
  box-shadow:
    0 0 0 5px rgba(235,143,29,.10),
    0 10px 24px rgba(0,0,0,.24);
}

.sidebar .company-identity {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.035)
    );
  border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.sidebar .company-identity b {
  color: #ffffff;
}

.sidebar .company-identity span {
  color: #8fb19c;
}

.sidebar .nav {
  gap: 6px;
}

.sidebar .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  color: #a9c3b2;
  border: 1px solid transparent;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    color .18s ease;
}

.sidebar .nav-item::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #507563;
  box-shadow: 0 0 0 3px rgba(80,117,99,.10);
}

.sidebar .nav-item:hover {
  color: #ffffff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.06);
  transform: translateX(2px);
}

.sidebar .nav-item.active {
  color: #ffffff;
  background:
    linear-gradient(
      100deg,
      rgba(235,143,29,.25),
      rgba(235,143,29,.10)
    );
  border-color: rgba(235,143,29,.28);
  box-shadow:
    inset 3px 0 0 var(--orange),
    0 8px 24px rgba(0,0,0,.12);
}

.sidebar .nav-item.active::before {
  background: var(--orange);
  box-shadow: 0 0 12px rgba(235,143,29,.7);
}

.sidebar .account-box {
  border-top-color: rgba(255,255,255,.10);
}

.sidebar .account-box b {
  color: white;
}

.sidebar .account-box > span {
  color: #8fb19c;
}

.sidebar .role-chip {
  color: #f7c777 !important;
  background: rgba(235,143,29,.12);
  border: 1px solid rgba(235,143,29,.22);
}

/* TOP BAR */

.topbar {
  padding: 14px 24px;
  background: rgba(250,252,250,.92);
  border-bottom-color: rgba(16,35,26,.08);
  box-shadow: 0 8px 30px rgba(24,50,34,.05);
  backdrop-filter: blur(14px);
}

.topbar h2 {
  font-size: 18px;
  letter-spacing: -.02em;
}

.content {
  max-width: 1640px;
  padding: 24px;
}

/* HERO COMMAND CENTER */

.command-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 26px;
  min-height: 228px;
  padding: 30px;
  border-radius: 24px;
  color: white;
  background:
    radial-gradient(circle at 82% 42%, rgba(235,143,29,.23), transparent 18rem),
    radial-gradient(circle at 45% 0%, rgba(55,163,99,.16), transparent 24rem),
    linear-gradient(125deg, #061a10 0%, #0b3520 58%, #155d35 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 65px rgba(11,46,28,.20);
}

.command-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to right, transparent, black 20%, black);
}

.command-hero-main,
.command-pulse {
  position: relative;
  z-index: 1;
}

.command-kicker,
.panel-kicker {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.command-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f3bd72;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52e083;
  box-shadow:
    0 0 0 5px rgba(82,224,131,.10),
    0 0 18px rgba(82,224,131,.75);
}

.command-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

.command-title-row h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.045em;
}

.command-title-row p {
  max-width: 720px;
  margin: 9px 0 0;
  color: #b8d7c5;
  line-height: 1.55;
}

.company-code-box {
  min-width: 140px;
  padding: 12px 14px;
  border-radius: 14px;
  text-align: right;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
}

.company-code-box span {
  display: block;
  color: #8fb7a0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.company-code-box strong {
  display: block;
  margin-top: 6px;
  color: white;
  font-size: 15px;
}

.command-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.meta-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: #b8d7c5;
  background: rgba(255,255,255,.055);
  font-size: 10px;
  font-weight: 800;
}

.meta-chip strong {
  color: white;
}

.meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.meta-dot.good {
  background: #5be68a;
  box-shadow: 0 0 9px rgba(91,230,138,.8);
}

.command-pulse {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #b9d9c6;
}

.pulse-ring {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(235,143,29,.38);
  box-shadow:
    0 0 0 12px rgba(235,143,29,.05),
    0 0 45px rgba(235,143,29,.20);
}

.pulse-core {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffd291, #eb8f1d 62%, #a85a05);
  box-shadow: 0 0 35px rgba(235,143,29,.62);
}

.command-pulse strong {
  margin-top: 17px;
  color: #f6c57f;
  letter-spacing: .14em;
  font-size: 11px;
}

.command-pulse span {
  margin-top: 4px;
  font-size: 9px;
}

/* KPI */

.digital-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}

.digital-kpi {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 16px;
  border-radius: 17px;
  background:
    linear-gradient(180deg, #ffffff, #f9fbfa);
  border: 1px solid #dce7df;
  box-shadow: 0 12px 32px rgba(25,58,38,.07);
}

.digital-kpi::after {
  content: "";
  position: absolute;
  width: 85px;
  height: 85px;
  right: -38px;
  bottom: -45px;
  border-radius: 50%;
  background: rgba(20,83,45,.055);
}

.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-symbol {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: white;
  background:
    linear-gradient(145deg, #113d27, #1f7041);
  box-shadow: 0 8px 18px rgba(20,83,45,.18);
  font-weight: 950;
  font-size: 11px;
}

.kpi-status {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .07em;
}

.kpi-status.good {
  color: #0d6b35;
  background: #e9f9ef;
}

.kpi-status.warn {
  color: #a75d07;
  background: #fff4df;
}

.kpi-status.neutral {
  color: #52675c;
  background: #eef2ef;
}

.kpi-value {
  display: block;
  margin-top: 17px;
  color: #10231a;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.04em;
}

.kpi-label {
  display: block;
  margin-top: 7px;
  color: #263d31;
  font-weight: 900;
  font-size: 12px;
}

.digital-kpi small {
  display: block;
  margin-top: 4px;
  color: #809087;
  font-size: 9px;
  line-height: 1.4;
}

/* COMMAND PANELS */

.command-grid {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 15px;
  margin-top: 15px;
}

.command-three-grid {
  display: grid;
  grid-template-columns: 1.25fr .85fr 1fr;
  gap: 15px;
  margin-top: 15px;
}

.command-panel {
  border: 1px solid #dce7df;
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(28,61,41,.065);
}

.command-panel .panel-head {
  align-items: flex-start;
}

.command-panel .panel-head h3 {
  margin: 4px 0 0;
}

.panel-kicker {
  color: #829187;
  font-size: 8px;
}

.premium-capacity {
  gap: 19px;
}

.capacity-row {
  display: grid;
  gap: 8px;
}

.capacity-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.capacity-label span {
  color: #44594d;
  font-size: 11px;
  font-weight: 850;
}

.capacity-label b {
  font-size: 11px;
}

.digital-bar {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #edf2ef;
}

.digital-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #1b6b3e, #47a867);
  box-shadow: 0 0 14px rgba(49,145,82,.25);
  transition: width .35s ease;
}

.digital-bar.sensor-bar i {
  background: linear-gradient(90deg, #156b58, #36a98d);
}

.digital-bar.gateway-bar i {
  background: linear-gradient(90deg, #bd7013, #eea23c);
}

/* QUICK ACTIONS */

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.quick-action {
  min-height: 91px;
  display: grid;
  grid-template-columns: 35px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 12px;
  text-align: left;
  border-radius: 13px;
  border: 1px solid #dce7df;
  background: linear-gradient(145deg, #ffffff, #f7faf8);
  color: var(--ink);
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.quick-action:hover {
  transform: translateY(-2px);
  border-color: #adcdb8;
  box-shadow: 0 12px 25px rgba(25,65,40,.09);
}

.quick-icon {
  grid-row: 1 / 3;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: white;
  background: linear-gradient(145deg, #0d3420, #206b40);
  font-size: 11px;
  font-weight: 950;
}

.quick-action b {
  font-size: 11px;
}

.quick-action small {
  color: #819087;
  font-size: 9px;
}

/* PROJECT SNAPSHOT */

.project-snapshot-grid {
  display: grid;
  gap: 9px;
}

.project-snapshot-card {
  padding: 12px;
  border-radius: 13px;
  border: 1px solid #e0e9e3;
  background:
    linear-gradient(145deg, #fbfdfc, #f5f9f6);
}

.project-snapshot-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.project-snapshot-top b {
  display: block;
  font-size: 11px;
}

.project-snapshot-top small {
  display: block;
  margin-top: 3px;
  color: #809087;
  font-size: 8px;
}

.project-snapshot-location {
  margin-top: 8px;
  color: #65766c;
  font-size: 9px;
}

.project-snapshot-metrics {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #e6ece8;
  color: #718177;
  font-size: 9px;
}

.project-snapshot-metrics strong {
  color: #163d27;
  font-size: 12px;
}

/* DEVICE HEALTH */

.health-list {
  display: grid;
  gap: 7px;
}

.health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border-radius: 11px;
  background: #f7faf8;
  border: 1px solid #e4ebe6;
}

.health-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #52645a;
  font-size: 10px;
  font-weight: 800;
}

.health-row b {
  color: #163d27;
  font-size: 13px;
}

.health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.health-dot.good {
  background: #39b864;
  box-shadow: 0 0 8px rgba(57,184,100,.42);
}

.health-dot.warn {
  background: #ed9b2c;
  box-shadow: 0 0 8px rgba(237,155,44,.38);
}

.health-dot.danger {
  background: #cf4a3a;
  box-shadow: 0 0 8px rgba(207,74,58,.35);
}

.health-divider {
  height: 1px;
  margin: 15px 0 12px;
  background: #e6ece8;
}

.compact-head {
  margin-bottom: 10px;
}

.digital-list .list-item {
  padding: 9px 0;
}

.digital-empty {
  padding: 24px 15px;
  border-radius: 12px;
  color: #78887e;
  text-align: center;
  background: #f7faf8;
  border: 1px dashed #d3dfd7;
  font-size: 10px;
}

.recent-audit-panel {
  margin-top: 15px;
}

/* PANEL POLISH */

.panel {
  background: rgba(255,255,255,.97);
}

.text-btn {
  color: #176338;
}

.btn.primary {
  background:
    linear-gradient(135deg, #114c2b, #1b6b3e);
  border-color: #155a34;
  box-shadow: 0 8px 18px rgba(20,83,45,.13);
}

/* RESPONSIVE */

@media (max-width: 1280px) {
  .digital-kpi-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .command-three-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .project-snapshot-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .sidebar {
    width: 230px;
  }

  .main {
    margin-left: 230px;
  }

  .command-grid,
  .command-three-grid {
    grid-template-columns: 1fr;
  }

  .project-snapshot-panel {
    grid-column: auto;
  }

  .command-hero {
    grid-template-columns: 1fr;
  }

  .command-pulse {
    display: none;
  }
}

@media (max-width: 760px) {
  .sidebar {
    position: static;
    width: auto;
    min-height: auto;
  }

  .main {
    margin-left: 0;
  }

  .digital-kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .command-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-code-box {
    text-align: left;
  }

  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 14px;
  }
}


/* ===== LIVE SENSOR TELEMETRY V1 ===== */

.live-telemetry-panel {
  margin-top: 15px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(31,112,65,.08),
      transparent 20rem
    ),
    #ffffff;
}

.live-telemetry-head {
  gap: 18px;
}

.live-telemetry-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.live-telemetry-controls label {
  min-width: 260px;
}

.live-telemetry-controls select {
  background: #f8fbf9;
}

.live-sync-status {
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  color: #116334;
  background: #eaf8ef;
  border: 1px solid #cce8d5;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .04em;
}

.live-sync-status.syncing {
  color: #9c5b09;
  background: #fff5e4;
  border-color: #f1d39e;
}

.live-sensor-meta {
  margin-top: 6px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #66776d;
  background: #f6f9f7;
  border: 1px solid #e2ebe5;
  font-size: 10px;
}

.live-value-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 13px;
}

.live-value-card {
  padding: 13px;
  border-radius: 13px;
  background:
    linear-gradient(
      145deg,
      #fbfdfc,
      #f4f8f5
    );
  border: 1px solid #dce7df;
}

.live-value-card span {
  display: block;
  color: #77887e;
  font-size: 9px;
  font-weight: 850;
}

.live-value-card strong {
  display: block;
  margin-top: 7px;
  color: #143a25;
  font-size: 20px;
  letter-spacing: -.03em;
}

.live-source-value {
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

.live-chart-area {
  margin-top: 14px;
  min-height: 300px;
  padding: 13px;
  border-radius: 15px;
  background:
    linear-gradient(
      180deg,
      #fbfdfc,
      #f7faf8
    );
  border: 1px solid #dce7df;
}

.live-chart-area .temperature-chart {
  width: 100%;
  min-height: 270px;
}

.live-chart-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: #839188;
  font-size: 8px;
}

@media (max-width: 900px) {
  .live-value-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .live-telemetry-controls {
    width: 100%;
  }

  .live-telemetry-controls label {
    min-width: 100%;
  }
}


/* ===== CURESENSE LIVE12 COMPACT OVERVIEW ===== */

.compact-overview {
  padding-top: 0;
}

.compact-kpi-grid {
  margin-top: 0;
  gap: 8px;
}

.compact-kpi-grid .digital-kpi {
  min-height: 94px;
  padding: 10px 11px;
}

.dual-kpi-value {
  font-size: 18px !important;
  white-space: nowrap;
}

.dual-kpi-value em {
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  color: var(--muted);
}

.company-logo-slot {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #14532d;
  font-size: 11px;
  font-weight: 900;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

.compact-live-monitor {
  margin-top: 9px;
  padding: 10px;
}

.live12-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.live12-head h3 {
  margin: 2px 0 1px;
  font-size: 16px;
}

.live12-head p {
  margin: 0;
  font-size: 9px;
  color: var(--muted);
}

.live12-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.monitor-chip {
  display: inline-flex;
  min-height: 27px;
  padding: 0 8px;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #d8e8dd;
  background: var(--green-soft);
  color: var(--green2);
  font-size: 8px;
  font-weight: 800;
}

.live12-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.live12-card {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(15,38,25,.05);
}

.live12-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
}

.live12-card-head b {
  display: block;
  font-size: 10px;
}

.live12-card-head small {
  display: block;
  margin-top: 1px;
  max-width: 155px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 7px;
}

.live12-sync-badge {
  flex: 0 0 auto;
  padding: 3px 5px;
  border-radius: 999px;
  font-size: 6px;
  font-weight: 900;
}

.live12-sync-badge.good {
  color: var(--green2);
  background: var(--green-soft);
}

.live12-sync-badge.neutral {
  color: var(--muted);
  background: #f2f4f3;
}

.live12-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin-top: 5px;
}

.live12-values > div {
  padding: 4px 2px;
  border-radius: 6px;
  text-align: center;
  background: #f5f8f6;
}

.live12-values span {
  display: block;
  font-size: 6px;
  color: var(--muted);
  white-space: nowrap;
}

.live12-values strong {
  display: block;
  margin-top: 1px;
  font-size: 9px;
}

.live12-chart {
  display: block;
  width: 100%;
  height: 89px;
  margin-top: 3px;
}

.live12-axis {
  stroke: #819188;
  stroke-width: .7;
}

.live12-gridline {
  stroke: #e2e9e5;
  stroke-width: .6;
}

.live12-series {
  fill: none;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}

.live12-long {
  stroke: #166534;
}

.live12-short {
  stroke: #eb8f1d;
}

.live12-body {
  stroke: #2563eb;
}

.live12-axis-text {
  fill: #66776d;
  font-size: 6px;
}

.live12-axis-title {
  fill: #66776d;
  font-size: 6px;
  font-weight: 700;
}

.live12-chart-empty {
  display: grid;
  place-items: center;
  height: 89px;
  margin-top: 3px;
  border-radius: 7px;
  background: #f5f7f6;
  color: var(--muted);
  font-size: 8px;
}

.live12-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
  color: var(--muted);
  font-size: 6px;
}

.live12-selector {
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7faf8;
}

.live12-selector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.live12-selector-head b {
  display: block;
  font-size: 10px;
}

.live12-selector-head small {
  display: block;
  margin-top: 1px;
  font-size: 7px;
  color: var(--muted);
}

.live12-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.live12-choice {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.live12-choice b {
  display: block;
  font-size: 8px;
}

.live12-choice small {
  display: block;
  max-width: 170px;
  margin-top: 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 6.5px;
}

.live12-empty {
  grid-column: 1 / -1;
}

.viewer-overview .compact-kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .live12-grid,
  .live12-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .live12-grid,
  .live12-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live12-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .live12-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .live12-grid,
  .live12-choice-grid,
  .viewer-overview .compact-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== VIEWER PROJECT ACCESS PERMISSIONS ===== */

.project-access-modal {
  width: min(1120px, calc(100vw - 36px));
  max-width: 1120px;
}

.project-access-summary {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.project-access-summary > div {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 12px;
  padding: 11px 13px;
}

.project-access-summary span,
.project-access-summary strong {
  display: block;
}

.project-access-summary strong {
  margin-top: 4px;
}

.project-access-table-wrap {
  max-height: 52vh;
  overflow: auto;
  margin-top: 14px;
}

.project-access-table {
  min-width: 850px;
}

.permission-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-weight: 600;
}

.permission-switch input {
  width: 17px;
  height: 17px;
}

.project-access-reason {
  display: block;
  margin-top: 16px;
}

.project-access-reason textarea {
  width: 100%;
  margin-top: 7px;
}

@media (max-width: 760px) {
  .project-access-summary {
    grid-template-columns: 1fr;
  }
}

/* ===== CURESENSE APPROVED OVERVIEW THEME 20260814 ===== */

.compact-overview {
  --cs-bg: #F5F7F5;
  --cs-deep: #F5F7F5;
  --cs-panel: #FFFFFF;
  --cs-panel-2: #F3F6F4;
  --cs-card: #FFFFFF;
  --cs-line: #E4EAE5;
  --cs-line-dim: #EDF1EE;
  --cs-cyan: #3E7BD6;
  --cs-text: #152420;
  --cs-muted: #66766D;
  --cs-faint: #94A19A;
  --cs-amber: #e0a339;
  --cs-green: #6fbf8b;
  --cs-rust: #d5735a;

  padding: 14px;
  border: 1px solid var(--cs-line-dim);
  border-radius: 7px;
  background:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    var(--cs-bg);
  background-size: 34px 34px;
  color: var(--cs-text);
}


/* ---------- KPI ---------- */

.overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 11px;
}

.overview-kpi-card {
  min-width: 0;
  min-height: 105px;
  padding: 12px 13px;
  border: 1px solid var(--cs-line);
  border-radius: 5px;
  background: var(--cs-panel);
  box-shadow: none;
}

.overview-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.overview-kpi-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cs-line);
  border-radius: 3px;
  background: var(--cs-deep);
  color: var(--cs-cyan);
  font-size: 10px;
  font-weight: 900;
}

.overview-kpi-state {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}

.overview-kpi-state.green {
  color: var(--cs-green);
}

.overview-kpi-state.cyan {
  color: var(--cs-cyan);
}

.overview-kpi-state.amber {
  color: var(--cs-amber);
}

.overview-kpi-card > strong {
  display: block;
  margin: 0;
  color: var(--cs-text);
  font-size: 24px;
  line-height: 1.05;
  font-weight: 800;
}

.overview-kpi-card > strong em {
  color: var(--cs-faint);
  font-size: 13px;
  font-style: normal;
}

.overview-kpi-label {
  display: block;
  margin-top: 5px;
  color: var(--cs-text);
  font-size: 11px;
  font-weight: 800;
}

.overview-kpi-card > small {
  display: block;
  margin-top: 2px;
  color: var(--cs-faint);
  font-size: 8px;
}


/* ---------- MAIN LAYOUT ---------- */

.overview-main-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 2.25fr)
    minmax(245px, .75fr);
  gap: 11px;
  align-items: start;
}

.overview-monitor-panel,
.overview-side-panel {
  border: 1px solid var(--cs-line);
  border-radius: 5px;
  background: var(--cs-panel);
  box-shadow: none;
}

.overview-monitor-panel {
  padding: 13px;
}


/* ---------- MONITOR HEADER ---------- */

.overview-monitor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--cs-line-dim);
}

.overview-eyebrow {
  display: block;
  color: var(--cs-faint);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .10em;
}

.overview-monitor-head h3,
.overview-side-head h3 {
  margin: 3px 0 0;
  color: var(--cs-text);
  font-size: 15px;
  font-weight: 800;
}

.overview-monitor-head p {
  margin: 3px 0 0;
  color: var(--cs-muted);
  font-size: 8px;
}

.overview-monitor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.overview-chip {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--cs-line);
  border-radius: 4px;
  background: var(--cs-deep);
  color: var(--cs-muted);
  font-size: 7px;
  font-weight: 800;
}

.overview-chip.cyan {
  color: var(--cs-cyan);
}

.overview-select-btn {
  min-height: 29px;
  padding: 0 11px;
  border: 1px solid var(--cs-cyan);
  border-radius: 4px;
  background: var(--cs-cyan);
  color: #071827;
  font-size: 8px;
  font-weight: 900;
  cursor: pointer;
}

.overview-select-btn:hover {
  filter: brightness(1.06);
}


/* ---------- PROJECT SELECTOR ---------- */

.overview-project-selector {
  margin-bottom: 11px;
  padding: 10px;
  border: 1px solid var(--cs-line);
  border-radius: 5px;
  background: var(--cs-deep);
}

.overview-selector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.overview-selector-head b {
  display: block;
  color: var(--cs-text);
  font-size: 10px;
}

.overview-selector-head small {
  display: block;
  margin-top: 2px;
  color: var(--cs-faint);
  font-size: 7px;
}

.overview-project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.overview-project-list .live12-choice {
  width: 100%;
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid var(--cs-line-dim);
  border-radius: 4px;
  background: var(--cs-panel);
  color: var(--cs-text);
  text-align: left;
  cursor: pointer;
}

.overview-project-list .live12-choice:hover {
  border-color: var(--cs-line);
  background: var(--cs-panel-2);
}

.overview-project-list .live12-choice.selected {
  border-color: var(--cs-cyan);
  background: var(--cs-panel-2);
}

.overview-project-list .live12-choice b {
  display: block;
  color: var(--cs-text);
  font-size: 9px;
}

.overview-project-list .live12-choice small {
  display: block;
  margin-top: 2px;
  color: var(--cs-muted);
  font-size: 7px;
}

.overview-project-list .live12-choice > small {
  margin: 0;
  color: var(--cs-green);
  white-space: nowrap;
}


/* ---------- SENSOR GRID ---------- */

.overview-sensor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.compact-overview .live12-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--cs-line-dim);
  border-radius: 5px;
  background: var(--cs-card);
  box-shadow: none;
}

.compact-overview .live12-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 7px;
}

.compact-overview .live12-card-head b {
  display: block;
  color: var(--cs-text);
  font-size: 10px;
  font-weight: 800;
}

.compact-overview .live12-card-head small {
  display: block;
  margin-top: 2px;
  color: var(--cs-faint);
  font-size: 7px;
}

.compact-overview .live12-sync-badge {
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 6px;
  font-weight: 900;
}

.compact-overview .live12-sync-badge.good {
  border: 1px solid rgba(111,191,139,.35);
  background: rgba(111,191,139,.08);
  color: var(--cs-green);
}

.compact-overview .live12-sync-badge.neutral {
  border: 1px solid var(--cs-line-dim);
  background: var(--cs-deep);
  color: var(--cs-faint);
}

.compact-overview .live12-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 9px;
}

.compact-overview .live12-values > div {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid var(--cs-line-dim);
  border-radius: 4px;
  background: var(--cs-deep);
  text-align: left;
}

.compact-overview .live12-values span {
  display: block;
  color: var(--cs-faint);
  font-size: 7px;
  white-space: nowrap;
}

.compact-overview .live12-values strong {
  display: block;
  margin-top: 2px;
  color: var(--cs-text);
  font-size: 14px;
  line-height: 1.1;
}

.compact-overview .live12-values > div:nth-child(1) strong {
  color: var(--cs-amber);
}

.compact-overview .live12-values > div:nth-child(2) strong {
  color: var(--cs-cyan);
}

.compact-overview .live12-values > div:nth-child(3) strong {
  color: var(--cs-green);
}

.compact-overview .live12-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--cs-line-dim);
  color: var(--cs-faint);
  font-size: 7px;
}

.compact-overview .live12-card-foot span:first-child {
  color: var(--cs-amber);
  font-weight: 900;
}


/* ---------- EMPTY STATE ---------- */

.compact-overview .digital-empty,
.overview-list-empty {
  padding: 16px 10px;
  border: 1px dashed var(--cs-line);
  border-radius: 4px;
  background: var(--cs-deep);
  color: var(--cs-faint);
  text-align: center;
  font-size: 8px;
}


/* ---------- SIDE PANELS ---------- */

.overview-side-column {
  display: grid;
  gap: 11px;
}

.overview-side-panel {
  padding: 12px;
}

.overview-side-head {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--cs-line-dim);
}

.overview-list {
  padding-top: 4px;
}

.overview-activity-row {
  display: grid;
  grid-template-columns:
    6px
    minmax(0, 1fr)
    auto;
  gap: 7px;
  align-items: center;
  padding: 8px 1px;
  border-bottom: 1px solid var(--cs-line-dim);
}

.overview-activity-row:last-child {
  border-bottom: 0;
}

.overview-activity-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cs-green);
}

.overview-activity-row b {
  display: block;
  color: var(--cs-text);
  font-size: 8px;
}

.overview-activity-row small {
  display: block;
  margin-top: 1px;
  color: var(--cs-faint);
  font-size: 7px;
}

.overview-activity-row time {
  color: var(--cs-muted);
  font-size: 6px;
  white-space: nowrap;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1100px) {

  .overview-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .overview-main-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 720px) {

  .overview-kpi-grid,
  .overview-project-list,
  .overview-sensor-grid {
    grid-template-columns: 1fr;
  }

  .overview-monitor-head {
    flex-direction: column;
  }

  .overview-monitor-actions {
    justify-content: flex-start;
  }

  .compact-overview .live12-values {
    grid-template-columns: 1fr;
  }

}


/* ===== CURESENSE ORIGINAL SHELL FIX ===== */

html,
body {
  background: #FFFFFF !important;
  color: #152420 !important;
  font-family: Inter, Arial, sans-serif !important;
}

body {
  background-image: none !important;
}

/* SIDEBAR */

.sidebar {
  width: 250px !important;
  min-width: 250px !important;
  background: #F5F7F5 !important;
  border-right: 1px solid #E4EAE5 !important;
  color: #152420 !important;
  box-shadow: none !important;
}

.company-identity {
  background: #FFFFFF !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.company-logo-slot {
  background: #F3F6F4 !important;
  border: 1px solid #E4EAE5 !important;
  color: #3E7BD6 !important;
  box-shadow: none !important;
}

.company-identity b {
  color: #152420 !important;
}

.company-identity span {
  color: #94A19A !important;
}

/* NAV */

.nav-item {
  position: relative !important;
  background: transparent !important;
  color: #66766D !important;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.nav-item.active {
  background: #FFFFFF !important;
  color: #3E7BD6 !important;
  border-left-color: #E0A339 !important;
}

.nav-item:hover {
  color: #152420 !important;
}

/* ACCOUNT */

.account-box {
  background: transparent !important;
  border-top: 1px solid #E4EAE5 !important;
  color: #152420 !important;
}

.account-box b {
  color: #152420 !important;
}

.account-box span {
  color: #66766D !important;
}

.role-chip {
  background: rgba(224,163,57,.08) !important;
  border: 1px solid rgba(224,163,57,.35) !important;
  color: #E0A339 !important;
  border-radius: 0 !important;
}

#logoutButton {
  background: #3E7BD6 !important;
  color: #08192B !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* MAIN + TOP */

.main {
  background: transparent !important;
  color: #152420 !important;
}

.topbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E4EAE5 !important;
  color: #152420 !important;
  box-shadow: none !important;
}

.topbar h2 {
  color: #152420 !important;
}

.topbar p {
  color: #66766D !important;
}

.content {
  background: transparent !important;
}

/* API / REFRESH */

.status-pill {
  background: rgba(111,191,139,.08) !important;
  border: 1px solid rgba(111,191,139,.35) !important;
  color: #6FBF8B !important;
  border-radius: 0 !important;
}

#refreshButton {
  background: transparent !important;
  border: 1px solid #2D62B5 !important;
  color: #3E7BD6 !important;
  border-radius: 0 !important;
}


/* ===== ORIGINAL REFERENCE FINAL FINISH ===== */

/* Typography */
body,
button,
input,
select,
textarea {
  font-family: "Inter", Arial, sans-serif !important;
}

.topbar h2,
.company-identity b,
.overview-kpi-label,
.overview-monitor-head h3,
.overview-side-head h3,
.live12-card-head b {
  font-family: "Space Grotesk", Arial, sans-serif !important;
}

.topbar p,
.company-identity span,
.account-box span,
.role-chip,
.status-pill,
.overview-chip,
.overview-select-btn,
.overview-eyebrow,
.overview-kpi-state,
.overview-kpi-card > strong,
.overview-kpi-card > small,
.live12-values span,
.live12-values strong,
.live12-card-foot {
  font-family: "JetBrains Mono", monospace !important;
}


/* Sidebar closer to reference */
.nav-item {
  min-height: 37px !important;
  padding: 8px 10px 8px 30px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.nav-item::before {
  left: 13px !important;
}

.account-box b {
  font-size: 11px !important;
}

.account-box > span {
  font-size: 8px !important;
}

.role-chip {
  font-size: 8px !important;
  padding: 3px 7px !important;
}


/* Header */
.topbar {
  min-height: 66px !important;
  padding: 13px 22px !important;
}

.topbar h2 {
  font-size: 18px !important;
}

.topbar p {
  font-size: 9.5px !important;
}


/* Main spacing */
.content {
  padding: 22px 26px 32px !important;
}


/* KPI proportions */
.overview-kpi-card {
  min-height: 118px !important;
}

.overview-kpi-card > strong {
  font-size: 22px !important;
}

.overview-kpi-label {
  font-size: 11px !important;
}


/* Monitoring */
.overview-monitor-head {
  padding: 17px 18px 15px !important;
}

.overview-monitor-head h3 {
  font-size: 16px !important;
}

.overview-monitor-head p {
  font-size: 9.5px !important;
}


/* Controls */
.overview-chip {
  padding: 6px 9px !important;
  font-size: 8.5px !important;
}

.overview-select-btn {
  padding: 8px 13px !important;
  font-size: 9.5px !important;
}


/* Side panels */
.overview-main-layout {
  grid-template-columns:
    minmax(0, 1fr)
    300px !important;
}

.overview-side-head {
  padding: 14px 14px 11px !important;
}


/* Cleaner refresh */
#refreshButton {
  padding: 8px 14px !important;
  font-size: 10px !important;
}



/* ===== CURESENSE DARK DATA PAGES ===== */

/* Search / filters */
.main .content input:not([type="checkbox"]):not([type="radio"]),
.main .content select,
.main .content textarea {
  background: #F3F6F4 !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  color: #152420 !important;
  box-shadow: none !important;
}

.main .content input::placeholder,
.main .content textarea::placeholder {
  color: #94A19A !important;
  opacity: 1 !important;
}

.main .content select option {
  background: #FFFFFF !important;
  color: #152420 !important;
}

/* White containers */
#view-users .table-card,
#view-gateways .table-card,
#view-gateways .panel,
#view-sensors .table-card,
#view-invitations .table-card,
#view-audit .table-card {
  background: #FFFFFF !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Tables */
#view-users table,
#view-gateways table,
#view-sensors table,
#view-invitations table,
#view-audit table {
  background: #FFFFFF !important;
  color: #66766D !important;
  border-collapse: collapse !important;
}

/* Header */
#view-users th,
#view-gateways th,
#view-sensors th,
#view-invitations th,
#view-audit th {
  background: #F3F6F4 !important;
  color: #94A19A !important;
  border-bottom: 1px solid #E4EAE5 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9px !important;
  letter-spacing: .05em !important;
}

/* Rows */
#view-users td,
#view-gateways td,
#view-sensors td,
#view-invitations td,
#view-audit td {
  background: #FFFFFF !important;
  color: #66766D !important;
  border-bottom: 1px solid #EDF1EE !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
}

#view-users tbody tr:hover td,
#view-gateways tbody tr:hover td,
#view-sensors tbody tr:hover td,
#view-invitations tbody tr:hover td,
#view-audit tbody tr:hover td {
  background: rgba(62,123,214,.04) !important;
}

/* Main values */
#view-users td b,
#view-users td strong,
#view-gateways td b,
#view-gateways td strong,
#view-sensors td b,
#view-sensors td strong,
#view-invitations td b,
#view-invitations td strong,
#view-audit td b,
#view-audit td strong {
  color: #152420 !important;
}

/* Buttons */
.main .content .mini-btn,
.main .content .table-card button {
  background: transparent !important;
  border: 1px solid #2D62B5 !important;
  border-radius: 0 !important;
  color: #3E7BD6 !important;
  box-shadow: none !important;
}

/* Invitation information strip */
#view-invitations .notice,
#view-invitations .info,
#view-invitations .message {
  background: #F3F6F4 !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  color: #66766D !important;
}



/* ===== CURESENSE DARK COMPANY PROFILE ===== */

#view-profile .profile-grid {
  gap: 13px !important;
}

#view-profile .profile-card {
  padding: 16px 18px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  color: #152420 !important;
  box-shadow: none !important;
}

#view-profile .profile-card h3 {
  margin: 0 0 12px !important;
  color: #152420 !important;
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#view-profile .kv {
  padding: 9px 0 !important;
  border-bottom: 1px solid #EDF1EE !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
}

#view-profile .kv:last-child {
  border-bottom: 0 !important;
}

#view-profile .kv span:first-child {
  color: #94A19A !important;
  font-weight: 400 !important;
}

#view-profile .kv span:last-child {
  color: #152420 !important;
  font-weight: 600 !important;
}



/* ===== CURESENSE DARK SENSOR RESULT PANEL ===== */

#sensorDetailPanel {
  background: #FFFFFF !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  color: #152420 !important;
  box-shadow: none !important;
}

#sensorDetailPanel .panel-head {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E4EAE5 !important;
}

#sensorDetailPanel .panel-head h3 {
  color: #152420 !important;
}

#sensorDetailPanel .muted {
  color: #66766D !important;
}


/* Temperature / gateway cards */

#sensorDetailPanel .sensor-result-card {
  background: #F3F6F4 !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#sensorDetailPanel .sensor-result-card span {
  color: #94A19A !important;
  font-family: "JetBrains Mono", monospace !important;
}

#sensorDetailPanel .sensor-result-card strong {
  color: #152420 !important;
  font-family: "Space Grotesk", Arial, sans-serif !important;
}


/* Date range section */

#sensorDetailPanel .report-range-box {
  background: #F3F6F4 !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  padding: 14px !important;
}

#sensorDetailPanel .report-range-box label {
  color: #66766D !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9.5px !important;
}

#sensorDetailPanel .report-range-box input {
  background: #F5F7F5 !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  color: #152420 !important;
}


/* Preview area */

#sensorDetailPanel .report-preview {
  background: #F3F6F4 !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  color: #66766D !important;
}

#sensorDetailPanel .report-stat-card {
  background: #FFFFFF !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
  color: #66766D !important;
  box-shadow: none !important;
}

#sensorDetailPanel .report-stat-card b {
  color: #152420 !important;
}


/* Preview tables */

#sensorDetailPanel .report-preview table {
  background: #FFFFFF !important;
  border-collapse: collapse !important;
}

#sensorDetailPanel .report-preview th {
  background: #F5F7F5 !important;
  color: #94A19A !important;
  border-bottom: 1px solid #E4EAE5 !important;
}

#sensorDetailPanel .report-preview td {
  background: #FFFFFF !important;
  color: #66766D !important;
  border-bottom: 1px solid #EDF1EE !important;
}


/* Buttons */

#sensorDetailPanel .btn {
  border-radius: 0 !important;
  box-shadow: none !important;
}

#sensorDetailPanel .btn.primary {
  background: #3E7BD6 !important;
  border: 1px solid #3E7BD6 !important;
  color: #F5F7F5 !important;
}

#sensorDetailPanel .btn.secondary,
#sensorDetailPanel .btn.ghost {
  background: transparent !important;
  border: 1px solid #2D62B5 !important;
  color: #3E7BD6 !important;
}



/* ===== CURESENSE WHITE PANEL CLEANUP ===== */

/* Remove remaining white content windows */
.main .content .panel,
.main .content .table-card,
.main .content .profile-card,
.main .content .info-banner,
.main .content .sensor-result-card,
.main .content .report-stat-card,
.main .content .project-access-table-wrap,
.main .content .project-access-summary > div {
  background: #FFFFFF !important;
  border-color: #E4EAE5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #152420 !important;
}

/* Sensor list outer window */
#view-sensors > .panel,
#view-sensors .panel {
  background: #FFFFFF !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 0 !important;
}

/* Panel headings */
.main .content .panel-head {
  background: #FFFFFF !important;
  border-color: #E4EAE5 !important;
}

.main .content .panel-head h2,
.main .content .panel-head h3,
.main .content .table-card h2,
.main .content .table-card h3 {
  color: #152420 !important;
}

/* Any muted text inside dark panels */
.main .content .panel .muted,
.main .content .table-card .muted {
  color: #66766D !important;
}

/* Remove white table wrapper backgrounds */
.main .content table,
.main .content thead,
.main .content tbody {
  box-shadow: none !important;
}

/* Generic content cards that still inherit white */
.main .content article {
  --card-background: #FFFFFF;
}

/* Information banners */
.main .content .info-banner {
  color: #66766D !important;
}

.main .content .info-banner a {
  color: #3E7BD6 !important;
}



/* =========================================================
   CURESENSE MASTER COMPANY PORTAL UI V1
   Final visual consistency layer
   ========================================================= */

:root {
  --cs-bg: #FFFFFF;
  --cs-bg-deep: #F5F7F5;
  --cs-panel: #FFFFFF;
  --cs-panel-2: #F3F6F4;
  --cs-panel-3: #F3F6F4;
  --cs-line: #E4EAE5;
  --cs-line-dim: #EDF1EE;

  --cs-cyan: #3E7BD6;
  --cs-cyan-dim: #2D62B5;

  --cs-text: #152420;
  --cs-text-dim: #9AB1C2;
  --cs-text-faint: #68859A;

  --cs-green: #6FBF8B;
  --cs-amber: #E0A339;
  --cs-red: #D5735A;

  --cs-ui-font: Inter, "Segoe UI", Arial, sans-serif;
  --cs-data-font: Consolas, "Courier New", monospace;
}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

html {
  font-size: 16px !important;
}

body {
  font-family: var(--cs-ui-font) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--cs-text) !important;
  background: var(--cs-bg) !important;
}

button,
input,
select,
textarea {
  font-family: var(--cs-ui-font) !important;
}

code,
.status-pill,
.role-chip,
.badge {
  font-family: var(--cs-data-font) !important;
}


/* =========================================================
   PAGE SHELL
   ========================================================= */

.sidebar {
  width: 250px !important;
  background: var(--cs-bg-deep) !important;
  border-right: 1px solid var(--cs-line) !important;
}

.main {
  background: transparent !important;
}

.content {
  padding: 22px 26px 40px !important;
  background: transparent !important;
}

.view {
  color: var(--cs-text) !important;
}


/* =========================================================
   TOP HEADER
   ========================================================= */

.topbar {
  min-height: 68px !important;
  padding: 13px 22px !important;
  background: var(--cs-bg-deep) !important;
  border-bottom: 1px solid var(--cs-line) !important;
}

.topbar h1,
.topbar h2,
#pageTitle {
  margin: 0 !important;
  color: var(--cs-text) !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

.topbar p,
#pageSubtitle {
  margin-top: 4px !important;
  color: var(--cs-text-dim) !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.company-identity {
  background: var(--cs-panel) !important;
  border: 1px solid var(--cs-line) !important;
  border-radius: 0 !important;
}

.nav-item {
  min-height: 43px !important;
  padding: 10px 12px 10px 30px !important;

  color: var(--cs-text-dim) !important;

  font-size: 13.5px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;

  background: transparent !important;
}

.nav-item:hover {
  background: rgba(62,123,214,.035) !important;
  color: var(--cs-text) !important;
}

.nav-item.active {
  background: var(--cs-panel) !important;
  color: var(--cs-cyan) !important;
  border-left: 2px solid var(--cs-amber) !important;
  font-weight: 600 !important;
}

.account-box {
  font-size: 12px !important;
}

.account-box b {
  color: var(--cs-text) !important;
  font-size: 12px !important;
}

.account-box > span {
  color: var(--cs-text-dim) !important;
  font-size: 10px !important;
}

.role-chip {
  font-size: 9px !important;
  line-height: 1.2 !important;
}


/* =========================================================
   GENERAL PAGE HEADINGS
   ========================================================= */

.view h2,
.view h3 {
  color: var(--cs-text) !important;
}

.view h2 {
  font-size: 18px !important;
}

.view h3 {
  font-size: 16px !important;
}

.muted {
  color: var(--cs-text-dim) !important;
}


/* =========================================================
   TOOLBARS
   ========================================================= */

.section-toolbar,
.sensor-toolbar {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;

  margin-bottom: 14px !important;

  background: transparent !important;
}


/* =========================================================
   INPUTS / SEARCH / FILTERS
   ========================================================= */

.main .content input:not([type="checkbox"]):not([type="radio"]),
.main .content select,
.main .content textarea,
.main .content .search {
  min-height: 40px !important;

  padding: 8px 12px !important;

  background: var(--cs-panel-3) !important;
  border: 1px solid var(--cs-line) !important;
  border-radius: 0 !important;

  color: var(--cs-text) !important;

  font-size: 13px !important;

  box-shadow: none !important;
}

.main .content input::placeholder,
.main .content textarea::placeholder {
  color: var(--cs-text-faint) !important;
  opacity: 1 !important;
}

.main .content input:focus,
.main .content select:focus,
.main .content textarea:focus {
  outline: none !important;
  border-color: var(--cs-cyan) !important;
}

.main .content select option {
  color: var(--cs-text) !important;
  background: var(--cs-panel) !important;
}


/* =========================================================
   FLAT PANELS — REMOVE WHITE WINDOWS
   ========================================================= */

.main .content .panel,
.main .content .table-card,
.main .content .profile-card,
.main .content .system-panel,
.main .content .sensor-result-card,
.main .content .report-stat-card,
.main .content .project-access-table-wrap,
.main .content .project-access-summary > div {
  background: var(--cs-panel) !important;

  border: 1px solid var(--cs-line) !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  color: var(--cs-text) !important;
}


/* Main data tables should feel direct, not like white cards */

.main .content .table-card {
  padding: 0 !important;
  overflow: auto !important;
}


/* =========================================================
   PANEL HEADERS
   ========================================================= */

.panel-head {
  min-height: 54px !important;

  padding: 14px 16px !important;

  background: var(--cs-panel) !important;
  border-bottom: 1px solid var(--cs-line) !important;
}

.panel-head h3 {
  margin: 0 !important;

  color: var(--cs-text) !important;

  font-size: 16px !important;
  font-weight: 650 !important;
}

.panel-head .muted {
  margin-top: 3px !important;

  color: var(--cs-text-dim) !important;

  font-size: 11px !important;
}


/* =========================================================
   TABLE SYSTEM — ALL PAGES
   ========================================================= */

.main .content table {
  width: 100% !important;

  border-collapse: collapse !important;

  background: var(--cs-panel) !important;

  color: var(--cs-text-dim) !important;

  font-size: 13px !important;

  box-shadow: none !important;
}


/* Headers */

.main .content thead,
.main .content thead tr {
  background: var(--cs-panel-3) !important;
}

.main .content th {
  height: 43px !important;

  padding: 10px 14px !important;

  background: var(--cs-panel-3) !important;

  border-bottom: 1px solid var(--cs-line) !important;

  color: var(--cs-text-faint) !important;

  font-size: 10.5px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;

  text-transform: uppercase !important;
  letter-spacing: .055em !important;

  white-space: nowrap !important;
}


/* Rows */

.main .content td {
  min-height: 54px !important;

  padding: 13px 14px !important;

  background: var(--cs-panel) !important;

  border-bottom: 1px solid var(--cs-line-dim) !important;

  color: var(--cs-text-dim) !important;

  font-size: 12.5px !important;
  line-height: 1.35 !important;

  vertical-align: middle !important;
}

.main .content tbody tr:last-child td {
  border-bottom: 0 !important;
}

.main .content tbody tr:hover td {
  background: rgba(62,123,214,.035) !important;
}


/* Important table values */

.main .content td b,
.main .content td strong {
  color: var(--cs-text) !important;

  font-size: 12.5px !important;
  font-weight: 600 !important;
}


/* Secondary codes/details */

.main .content td small,
.main .content td .muted {
  color: var(--cs-text-faint) !important;
  font-size: 10.5px !important;
}


/* =========================================================
   BUTTON SYSTEM
   ========================================================= */

.main .content .btn,
.main .content .mini-btn,
.main .content button:not(.nav-item) {
  min-height: 34px !important;

  padding: 7px 12px !important;

  border-radius: 0 !important;

  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;

  box-shadow: none !important;
}


/* Primary */

.main .content .btn.primary,
#topInviteButton {
  background: var(--cs-cyan) !important;

  border: 1px solid var(--cs-cyan) !important;

  color: var(--cs-bg-deep) !important;
}


/* Normal / secondary */

.main .content .btn.secondary,
.main .content .btn.ghost,
.main .content .mini-btn,
.main .content .table-card button {
  background: transparent !important;

  border: 1px solid var(--cs-cyan-dim) !important;

  color: var(--cs-cyan) !important;
}


/* Danger */

.main .content .btn.danger,
.main .content .danger {
  background: transparent !important;

  border-color: rgba(213,115,90,.6) !important;

  color: var(--cs-red) !important;
}


/* =========================================================
   BADGES / STATUS
   ========================================================= */

.main .content .badge {
  display: inline-flex !important;
  align-items: center !important;

  padding: 4px 9px !important;

  border-radius: 0 !important;

  font-size: 9.5px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

.main .content .badge.good,
.main .content .badge.success {
  background: rgba(111,191,139,.08) !important;

  border: 1px solid rgba(111,191,139,.35) !important;

  color: var(--cs-green) !important;
}

.main .content .badge.warn,
.main .content .badge.warning {
  background: rgba(224,163,57,.08) !important;

  border: 1px solid rgba(224,163,57,.35) !important;

  color: var(--cs-amber) !important;
}

.main .content .badge.bad,
.main .content .badge.danger {
  background: rgba(213,115,90,.08) !important;

  border: 1px solid rgba(213,115,90,.35) !important;

  color: var(--cs-red) !important;
}

.main .content .badge.neutral {
  background: transparent !important;

  border: 1px solid var(--cs-line) !important;

  color: var(--cs-text-dim) !important;
}


/* =========================================================
   COMPANY PROFILE
   ========================================================= */

#view-profile .profile-grid {
  gap: 14px !important;
}

#view-profile .profile-card {
  padding: 17px 18px !important;
}

#view-profile .profile-card h3 {
  margin: 0 0 14px !important;

  color: var(--cs-text) !important;

  font-size: 15px !important;
}

#view-profile .kv {
  min-height: 39px !important;

  padding: 9px 0 !important;

  border-bottom: 1px solid var(--cs-line-dim) !important;

  font-size: 12px !important;
}

#view-profile .kv span:first-child {
  color: var(--cs-text-dim) !important;
}

#view-profile .kv span:last-child {
  color: var(--cs-text) !important;

  font-size: 12.5px !important;
  font-weight: 600 !important;
}


/* =========================================================
   SENSOR RESULT
   ========================================================= */

#sensorDetailPanel {
  background: var(--cs-panel) !important;

  border: 1px solid var(--cs-line) !important;
  border-radius: 0 !important;
}

#sensorDetailPanel .sensor-result-grid {
  gap: 12px !important;
}

#sensorDetailPanel .sensor-result-card {
  min-height: 88px !important;

  padding: 15px !important;

  background: var(--cs-panel-3) !important;

  border: 1px solid var(--cs-line) !important;
}

#sensorDetailPanel .sensor-result-card span {
  color: var(--cs-text-faint) !important;

  font-size: 11px !important;
}

#sensorDetailPanel .sensor-result-card strong {
  margin-top: 5px !important;

  color: var(--cs-text) !important;

  font-size: 18px !important;
}

#sensorDetailPanel .report-range-box {
  padding: 15px !important;

  background: var(--cs-panel-3) !important;

  border: 1px solid var(--cs-line) !important;
  border-radius: 0 !important;
}

#sensorDetailPanel .report-range-box label {
  color: var(--cs-text-dim) !important;

  font-size: 11px !important;
}

#sensorDetailPanel .report-preview {
  background: var(--cs-panel-3) !important;

  border: 1px solid var(--cs-line) !important;
  border-radius: 0 !important;

  color: var(--cs-text-dim) !important;
}


/* =========================================================
   INVITATION BANNER
   ========================================================= */

#view-invitations .info-banner {
  padding: 11px 13px !important;

  background: var(--cs-panel-3) !important;

  border: 1px solid var(--cs-line) !important;
  border-radius: 0 !important;

  color: var(--cs-text-dim) !important;

  font-size: 12px !important;
}

#view-invitations .info-banner a {
  color: var(--cs-cyan) !important;
}


/* =========================================================
   MODALS
   ========================================================= */

.modal {
  background: var(--cs-panel) !important;

  border: 1px solid var(--cs-line) !important;
  border-radius: 0 !important;

  color: var(--cs-text) !important;

  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
}

.modal-head {
  padding: 16px 18px !important;

  border-bottom: 1px solid var(--cs-line) !important;
}

.modal-head h3 {
  color: var(--cs-text) !important;
  font-size: 16px !important;
}

.modal-head p {
  color: var(--cs-text-dim) !important;
  font-size: 11px !important;
}

.modal-body {
  background: var(--cs-panel) !important;

  color: var(--cs-text-dim) !important;

  font-size: 12.5px !important;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.overview-kpi-card {
  border-radius: 0 !important;
}

.overview-kpi-card > strong {
  font-size: 25px !important;
}

.overview-kpi-label {
  font-size: 12px !important;
}

.overview-monitor-head h3 {
  font-size: 17px !important;
}

.overview-monitor-head p {
  font-size: 11px !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: var(--cs-bg-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--cs-line);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .content {
    padding: 18px !important;
  }

  .main .content td {
    padding: 11px 12px !important;
  }

}

@media (max-width: 760px) {

  body {
    font-size: 13px !important;
  }

  .main .content th {
    font-size: 9.5px !important;
  }

  .main .content td {
    font-size: 11.5px !important;
  }

}


/* ===== LOGIN DESIGN STEP 1 ===== */

#loginScreen.login-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 24px !important;
  background: #F0F2F0 !important;
}

#loginScreen .login-card {
  width: min(100%, 440px) !important;
  padding: 34px 36px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 6px !important;
  box-shadow: 0 22px 55px rgba(8,22,39,.24) !important;
  color: #152420 !important;
}

#loginScreen .brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#loginScreen .logo {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #E7862F !important;
  border: 1px solid #E7862F !important;
  border-radius: 5px !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#loginScreen .brand-name {
  color: #152420 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

#loginScreen .brand-sub {
  color: #66766D !important;
  font-size: 11px !important;
}

#loginScreen .login-copy {
  margin: 32px 0 24px !important;
}

#loginScreen .login-copy h1 {
  margin: 0 0 7px !important;
  color: #152420 !important;
  font-size: 27px !important;
  font-weight: 700 !important;
}

#loginScreen .login-copy p {
  margin: 0 !important;
  color: #66766D !important;
  font-size: 13px !important;
}

/* ===== LOGIN DESIGN STEP 2 ===== */

#loginScreen .form-stack {
  display: grid !important;
  gap: 18px !important;
}

#loginScreen .form-stack label {
  display: grid !important;
  gap: 7px !important;
  color: #66766D !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#loginScreen #loginEmail,
#loginScreen #loginPassword {
  width: 100% !important;
  min-height: 46px !important;
  padding: 11px 13px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4EAE5 !important;
  border-radius: 4px !important;
  color: #152420 !important;
  font-size: 13.5px !important;
  outline: none !important;
  box-shadow: none !important;
}

#loginScreen #loginEmail::placeholder,
#loginScreen #loginPassword::placeholder {
  color: #94A19A !important;
  opacity: 1 !important;
}

#loginScreen #loginEmail:focus,
#loginScreen #loginPassword:focus {
  background: #F3F6F4 !important;
  border-color: #3E7BD6 !important;
}

#loginScreen #loginButton {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 3px !important;
  padding: 11px 16px !important;
  background: #E7862F !important;
  border: 1px solid #E7862F !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

#loginScreen #loginButton:hover {
  background: #D9761E !important;
  border-color: #D9761E !important;
}

#loginScreen #loginError {
  margin-top: 16px !important;
  padding: 10px 12px !important;
  background: rgba(213,115,90,.10) !important;
  border: 1px solid rgba(213,115,90,.45) !important;
  border-radius: 3px !important;
  color: #B42318 !important;
  font-size: 12px !important;
}

@media (max-width: 540px) {
  #loginScreen.login-screen {
    padding: 18px !important;
  }

  #loginScreen .login-card {
    padding: 28px 24px 30px !important;
  }

  #loginScreen .login-copy h1 {
    font-size: 24px !important;
  }
}

/* ===== LOGIN SUCCESS VISIBILITY FIX ===== */

#loginScreen.login-screen.hidden {
  display: none !important;
}


/* ===== CURESENSE REFERENCE MASTER V2 STEP 1 ===== */

:root {
  --v2-bg: #F5F7F5;
  --v2-deep: #FFFFFF;
  --v2-panel: #FFFFFF;
  --v2-panel-dark: #F3F6F4;
  --v2-line: #E4EAE5;
  --v2-line-soft: #EDF1EE;

  --v2-text: #152420;
  --v2-muted: #66766D;
  --v2-faint: #94A19A;

  --v2-cyan: #3E7BD6;
  --v2-green: #2F8F5B;
  --v2-amber: #C9871B;
  --v2-red: #D5573F;
}


/* GLOBAL */

html,
body {
  background: var(--v2-bg) !important;
}

body {
  color: var(--v2-text) !important;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}


/* MAIN APP */

.app-shell {
  background: var(--v2-bg) !important;
}

.main {
  min-width: 0 !important;
  background:
    linear-gradient(
      rgba(255,255,255,0) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 1px,
      transparent 1px
    ),
    var(--v2-bg) !important;

  background-size: 34px 34px !important;
}

.content {
  padding: 16px 28px 40px !important;
  background: transparent !important;
}


/* PAGE HEADER */

.topbar {
  min-height: 74px !important;

  padding: 16px 28px 8px !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;
}

#pageTitle {
  color: var(--v2-text) !important;

  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

#pageSubtitle {
  margin-top: 4px !important;

  color: var(--v2-muted) !important;

  font-family:
    Consolas,
    "Courier New",
    monospace !important;

  font-size: 13px !important;
  line-height: 1.35 !important;
}


/* SIDEBAR */

.sidebar {
  width: 282px !important;

  padding: 18px 16px !important;

  background: var(--v2-deep) !important;

  border-right: 1px solid var(--v2-line) !important;
}

.side-brand {
  margin-bottom: 22px !important;
}

.side-brand .logo {
  width: 46px !important;
  height: 46px !important;

  border-radius: 9px !important;

  font-size: 15px !important;
}

.side-brand .brand-name {
  color: var(--v2-text) !important;

  font-size: 19px !important;
  font-weight: 700 !important;
}

.side-brand .brand-sub {
  color: var(--v2-muted) !important;

  font-family:
    Consolas,
    "Courier New",
    monospace !important;

  font-size: 11px !important;
}


/* COMPANY IDENTITY */

.company-identity {
  margin-bottom: 22px !important;

  padding: 16px !important;

  background: var(--v2-panel) !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
}

.company-identity b {
  margin-top: 8px !important;

  color: var(--v2-text) !important;

  font-size: 15px !important;
}

.company-identity span {
  color: var(--v2-muted) !important;

  font-family:
    Consolas,
    "Courier New",
    monospace !important;

  font-size: 11px !important;
}


/* NAVIGATION */

.nav {
  gap: 2px !important;
}

.nav-item {
  min-height: 43px !important;

  padding: 10px 12px 10px 34px !important;

  background: transparent !important;

  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;

  color: var(--v2-muted) !important;

  font-size: 14.5px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

.nav-item:hover {
  background: rgba(62,123,214,.04) !important;

  color: var(--v2-text) !important;
}

.nav-item.active {
  background: var(--v2-panel) !important;

  border-left-color: var(--v2-amber) !important;

  color: var(--v2-cyan) !important;

  font-weight: 600 !important;
}


/* ACCOUNT AREA */

.account-box {
  border-top-color: var(--v2-line) !important;
}

.account-box b {
  color: var(--v2-text) !important;

  font-size: 12px !important;
}

.account-box > span {
  color: var(--v2-muted) !important;

  font-family:
    Consolas,
    "Courier New",
    monospace !important;

  font-size: 10.5px !important;
}


/* TOP ACTIONS */

.top-actions {
  gap: 10px !important;
}

#apiBadge {
  min-height: 36px !important;

  padding: 8px 12px !important;

  background: rgba(47,143,91,.06) !important;

  border: 1px solid rgba(47,143,91,.35) !important;

  color: var(--v2-green) !important;

  font-size: 10.5px !important;
}

#refreshButton,
#topInviteButton {
  min-height: 40px !important;

  padding: 9px 16px !important;

  background: transparent !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;

  color: var(--v2-text) !important;

  font-size: 13px !important;
}


/* Reference behavior:
   API/Refresh mainly Overview.
   Invite button Users + Invitations.
*/

.main:has(.view.active:not(#view-overview))
#apiBadge,

.main:has(.view.active:not(#view-overview))
#refreshButton {
  display: none !important;
}

#topInviteButton {
  display: none !important;
}

.main:has(#view-users.active)
#topInviteButton:not(.hidden),

.main:has(#view-invitations.active)
#topInviteButton:not(.hidden) {
  display: inline-flex !important;
  align-items: center !important;
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .sidebar {
    width: 235px !important;
  }

  .content,
  .topbar {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

}


/* ===== CURESENSE REFERENCE MASTER V2 STEP 2 ===== */
/* CONTENT SURFACES, TABLES, FILTERS, PROFILE, BUTTONS */

.view {
  color: var(--v2-text) !important;
}


/* -------------------------------------------------
   SECTION HEADINGS / SUBTEXT INSIDE VIEWS
   ------------------------------------------------- */

.view h2,
.view h3,
.view h4 {
  color: var(--v2-text) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.view p,
.view .muted,
.view small,
.main .content .muted,
.main .content small {
  color: var(--v2-muted) !important;
}

.view .eyebrow,
.main .content .eyebrow {
  color: var(--v2-cyan) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}


/* -------------------------------------------------
   SEARCH / FILTER / FORM CONTROLS
   ------------------------------------------------- */

.section-toolbar,
.sensor-toolbar,
.form-grid,
.modal-body .form-grid {
  gap: 12px !important;
}

.section-toolbar,
.sensor-toolbar {
  margin-bottom: 16px !important;
  background: transparent !important;
}

.main .content input:not([type="checkbox"]):not([type="radio"]),
.main .content select,
.main .content textarea,
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select,
.modal textarea {
  min-height: 42px !important;
  padding: 10px 12px !important;

  background: var(--v2-panel-dark) !important;
  color: var(--v2-text) !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.main .content textarea,
.modal textarea {
  min-height: 96px !important;
  resize: vertical !important;
}

.main .content input::placeholder,
.main .content textarea::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
  color: var(--v2-faint) !important;
}


/* -------------------------------------------------
   GENERIC PANELS / CARDS
   ------------------------------------------------- */

.main .content .table-card,
.main .content .panel,
.main .content .profile-card,
.main .content .stats-grid > article,
.main .content .safe-note,
.main .content .info-banner {
  background: var(--v2-panel) !important;
  color: var(--v2-text) !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.main .content .table-card,
.main .content .panel,
.main .content .profile-card {
  padding: 0 !important;
  overflow: hidden !important;
}

.main .content .table-card > h3,
.main .content .panel > h3 {
  margin: 0 !important;
  padding: 16px 18px 10px !important;
}

.main .content .table-card > .muted,
.main .content .panel > .muted,
.main .content .table-card > p,
.main .content .panel > p {
  padding: 0 18px 12px !important;
}


/* -------------------------------------------------
   TABLES
   ------------------------------------------------- */

.main .content table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

.main .content thead th {
  padding: 13px 18px !important;

  background: rgba(255,255,255,.01) !important;
  color: var(--v2-muted) !important;

  border-bottom: 1px solid var(--v2-line) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.main .content tbody td {
  padding: 14px 18px !important;

  color: #4B5B54 !important;

  border-bottom: 1px solid var(--v2-line-soft) !important;

  font-size: 13px !important;
  line-height: 1.35 !important;
  vertical-align: middle !important;
}

.main .content tbody tr:last-child td {
  border-bottom: 0 !important;
}

.main .content tbody tr:hover {
  background: rgba(62,123,214,.035) !important;
}

.main .content tbody td:first-child,
.main .content tbody td b,
.main .content tbody td strong {
  color: var(--v2-text) !important;
  font-weight: 700 !important;
}


/* -------------------------------------------------
   BADGES / CHIPS / ROLE / STATUS
   ------------------------------------------------- */

.role-chip,
.status-pill,
.badge,
.chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  min-height: 30px !important;
  padding: 6px 12px !important;

  border-radius: 0 !important;
  border: 1px solid var(--v2-line) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.status-pill.good,
.badge.good,
.chip.good {
  color: var(--v2-green) !important;
  background: rgba(47,143,91,.10) !important;
  border-color: rgba(47,143,91,.35) !important;
}

.status-pill.warning,
.badge.warning,
.chip.warning {
  color: var(--v2-amber) !important;
  background: rgba(201,135,27,.10) !important;
  border-color: rgba(201,135,27,.35) !important;
}

.status-pill.danger,
.badge.danger,
.chip.danger {
  color: var(--v2-red) !important;
  background: rgba(213,87,63,.10) !important;
  border-color: rgba(213,87,63,.35) !important;
}


/* -------------------------------------------------
   BUTTONS
   ------------------------------------------------- */

.main .content .btn,
.main .content button,
.modal .btn,
.modal button {
  min-height: 40px !important;
  padding: 9px 14px !important;

  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 13px !important;
  line-height: 1.2 !important;
}

.main .content .btn.primary,
.modal .btn.primary {
  background: #E7862F !important;
  color: #FFFFFF !important;
  border: 1px solid #E7862F !important;
}

.main .content .btn.secondary,
.main .content .btn.ghost,
.modal .btn.secondary,
.modal .btn.ghost {
  background: transparent !important;
  color: var(--v2-text) !important;
  border: 1px solid var(--v2-line) !important;
}

.main .content .btn:disabled,
.main .content button:disabled,
.modal .btn:disabled,
.modal button:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}


/* -------------------------------------------------
   EMPTY / HELP / MESSAGE SURFACES
   ------------------------------------------------- */

.main .content .message,
.main .content .safe-note,
.main .content .info-banner,
.modal .message {
  padding: 12px 14px !important;

  color: var(--v2-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.main .content .info-banner a,
.modal .message a {
  color: var(--v2-cyan) !important;
}


/* -------------------------------------------------
   PROFILE PAGE
   ------------------------------------------------- */

#view-profile .profile-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#view-profile .profile-card {
  padding: 18px !important;
}

#view-profile .profile-card h3 {
  margin: 0 0 14px !important;
  color: var(--v2-text) !important;
  font-size: 15px !important;
}

#view-profile .kv {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;

  padding: 10px 0 !important;

  border-bottom: 1px solid var(--v2-line-soft) !important;

  font-size: 13px !important;
}

#view-profile .kv:last-child {
  border-bottom: 0 !important;
}

#view-profile .kv span:first-child {
  color: var(--v2-muted) !important;
}

#view-profile .kv span:last-child {
  color: var(--v2-text) !important;
  font-weight: 700 !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}


/* -------------------------------------------------
   MODALS
   ------------------------------------------------- */

.modal-backdrop {
  background: rgba(6, 16, 28, .74) !important;
}

.modal {
  background: var(--v2-panel) !important;
  color: var(--v2-text) !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.28) !important;
}

.modal-head {
  border-bottom: 1px solid var(--v2-line) !important;
}

.modal-head h3 {
  color: var(--v2-text) !important;
}

.modal-head p {
  color: var(--v2-muted) !important;
}

.modal-actions {
  gap: 10px !important;
}


/* -------------------------------------------------
   RESPONSIVE
   ------------------------------------------------- */

@media (max-width: 1100px) {
  #view-profile .profile-grid {
    grid-template-columns: 1fr !important;
  }
}



/* ===== CURESENSE REFERENCE MASTER V2 STEP 3A ===== */
/* OVERVIEW + PROJECT SELECTOR */


/* -------------------------------------------------
   OVERVIEW KPI GRID
   ------------------------------------------------- */

#view-overview .overview-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

#view-overview .overview-kpi-card {
  min-height: 135px !important;
  padding: 16px 18px !important;

  background: var(--v2-panel) !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

#view-overview .overview-kpi-head {
  margin-bottom: 13px !important;
}

#view-overview .overview-kpi-icon {
  width: 31px !important;
  height: 31px !important;

  background: var(--v2-panel-dark) !important;

  border: 1px solid var(--v2-line) !important;

  color: var(--v2-cyan) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 12px !important;
}

#view-overview .overview-kpi-state {
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 9.5px !important;
  letter-spacing: .06em !important;
}

#view-overview .overview-kpi-card > strong {
  margin-top: 3px !important;

  color: var(--v2-text) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 27px !important;
  line-height: 1.1 !important;
}

#view-overview .overview-kpi-label {
  margin-top: 5px !important;

  color: var(--v2-text) !important;

  font-size: 13px !important;
  font-weight: 700 !important;
}

#view-overview .overview-kpi-card > small {
  margin-top: 3px !important;

  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 10.5px !important;
}


/* -------------------------------------------------
   OVERVIEW MAIN LAYOUT
   ------------------------------------------------- */

#view-overview .overview-main-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 14px !important;
  align-items: start !important;
}

#view-overview .overview-monitor-panel,
#view-overview .overview-side-panel {
  background: var(--v2-panel) !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* -------------------------------------------------
   PROJECT SENSOR HEADER
   ------------------------------------------------- */

#view-overview .overview-monitor-head {
  min-height: 78px !important;

  padding: 16px 18px !important;

  background: transparent !important;

  border-bottom: 1px solid var(--v2-line-soft) !important;
}

#view-overview .overview-eyebrow {
  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

#view-overview .overview-monitor-head h3 {
  margin: 5px 0 3px !important;

  color: var(--v2-text) !important;

  font-size: 18px !important;
  line-height: 1.15 !important;
}

#view-overview .overview-monitor-head p {
  margin: 0 !important;

  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 11px !important;
}


/* -------------------------------------------------
   OVERVIEW CHIPS / SELECT BUTTON
   ------------------------------------------------- */

#view-overview .overview-monitor-actions {
  gap: 8px !important;
}

#view-overview .overview-chip {
  min-height: 36px !important;

  padding: 8px 11px !important;

  background: transparent !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;

  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 10.5px !important;
}

#view-overview .overview-select-btn {
  min-height: 38px !important;

  padding: 8px 15px !important;

  background: #E7862F !important;

  border: 1px solid #E7862F !important;
  border-radius: 0 !important;

  color: #FFFFFF !important;

  font-size: 12px !important;
  font-weight: 700 !important;
}


/* -------------------------------------------------
   SENSOR CARDS
   ------------------------------------------------- */

#view-overview .overview-sensor-grid {
  gap: 12px !important;
  padding: 14px !important;
}

#view-overview .live12-card {
  background: var(--v2-panel-dark) !important;

  border: 1px solid var(--v2-line-soft) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

#view-overview .live12-card-head {
  padding: 13px 14px 9px !important;
}

#view-overview .live12-card-head b {
  color: var(--v2-text) !important;

  font-size: 13px !important;
}

#view-overview .live12-card-head small {
  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 9.5px !important;
}

#view-overview .live12-values {
  gap: 7px !important;
  padding: 0 14px 10px !important;
}

#view-overview .live12-values > div {
  min-height: 59px !important;
  padding: 9px 10px !important;

  background: #F3F6F4 !important;

  border: 1px solid var(--v2-line-soft) !important;
}

#view-overview .live12-values span {
  color: var(--v2-muted) !important;
  font-size: 9.5px !important;
}

#view-overview .live12-values strong {
  margin-top: 5px !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 18px !important;
}

#view-overview .live12-card-foot {
  padding: 10px 14px !important;

  border-top: 1px solid var(--v2-line-soft) !important;

  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 9.5px !important;
}


/* -------------------------------------------------
   PROJECT SELECTOR AS CENTERED MODAL
   ------------------------------------------------- */

#view-overview .overview-project-selector {
  position: fixed !important;

  z-index: 4500 !important;

  top: 50% !important;
  left: 50% !important;

  width: min(720px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 70px) !important;

  transform: translate(-50%, -50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: auto !important;

  background: var(--v2-panel) !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;

  box-shadow:
    0 0 0 9999px rgba(5,15,26,.76),
    0 22px 50px rgba(0,0,0,.35) !important;
}


/* Preserve hidden behavior */

#view-overview .overview-project-selector.hidden {
  display: none !important;
}


/* Selector header */

#view-overview .overview-selector-head {
  padding: 18px 20px 14px !important;

  border-bottom: 1px solid var(--v2-line) !important;
}

#view-overview .overview-selector-head b {
  color: var(--v2-text) !important;

  font-size: 17px !important;
}

#view-overview .overview-selector-head small {
  margin-top: 4px !important;

  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 10.5px !important;
}


/* Project rows */

#view-overview .overview-project-list {
  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 0 !important;

  padding: 14px 18px !important;
}

#view-overview .overview-project-list .live12-choice {
  width: 100% !important;
  min-height: 62px !important;

  padding: 12px 14px !important;

  background: transparent !important;

  border: 1px solid var(--v2-line-soft) !important;
  border-radius: 0 !important;

  color: var(--v2-muted) !important;

  text-align: left !important;
}

#view-overview .overview-project-list .live12-choice + .live12-choice {
  margin-top: 8px !important;
}

#view-overview .overview-project-list .live12-choice:hover {
  background: rgba(104,213,245,.04) !important;

  border-color: var(--v2-line) !important;
}

#view-overview .overview-project-list .live12-choice.selected {
  background: rgba(104,213,245,.07) !important;

  border-color: var(--v2-cyan) !important;
}

#view-overview .overview-project-list .live12-choice b {
  color: var(--v2-text) !important;

  font-size: 13px !important;
}

#view-overview .overview-project-list .live12-choice small {
  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 10px !important;
}

#view-overview .overview-project-list .live12-choice > small {
  color: var(--v2-green) !important;
}


/* -------------------------------------------------
   SIDE PANELS
   ------------------------------------------------- */

#view-overview .overview-side-head {
  padding: 14px 16px !important;

  border-bottom: 1px solid var(--v2-line-soft) !important;
}

#view-overview .overview-side-head h3 {
  margin: 0 !important;

  font-size: 14px !important;
}

#view-overview .overview-list {
  padding: 10px 14px !important;
}

#view-overview .overview-activity-row {
  padding: 10px 0 !important;

  border-bottom: 1px solid var(--v2-line-soft) !important;
}

#view-overview .overview-activity-row b {
  color: var(--v2-text) !important;
  font-size: 11.5px !important;
}

#view-overview .overview-activity-row small,
#view-overview .overview-activity-row time {
  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 9.5px !important;
}


/* -------------------------------------------------
   RESPONSIVE
   ------------------------------------------------- */

@media (max-width: 1180px) {

  #view-overview .overview-main-layout {
    grid-template-columns: 1fr !important;
  }

}

@media (max-width: 900px) {

  #view-overview .overview-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}



/* ===== CURESENSE REFERENCE MASTER V2 STEP 3B ===== */
/* SENSOR RESULT / REPORT AREA */


/* MAIN RESULT PANEL */

#sensorDetailPanel {
  margin-top: 16px !important;
  padding: 0 !important;

  background: var(--v2-panel) !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* HEADER */

#sensorDetailPanel .panel-head {
  min-height: 70px !important;

  padding: 15px 18px !important;

  background: transparent !important;

  border-bottom: 1px solid var(--v2-line) !important;
}

#sensorDetailPanel .panel-head h3 {
  margin: 0 !important;

  color: var(--v2-text) !important;

  font-size: 18px !important;
  line-height: 1.2 !important;
}

#sensorDetailPanel .panel-head .muted {
  margin-top: 4px !important;

  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 11px !important;
}


/* TEMPERATURE / GATEWAY CARDS */

#sensorDetailPanel .sensor-result-grid {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 10px !important;

  padding: 16px 18px 0 !important;
}

#sensorDetailPanel .sensor-result-card {
  min-height: 86px !important;

  padding: 14px !important;

  background: var(--v2-panel-dark) !important;

  border: 1px solid var(--v2-line-soft) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

#sensorDetailPanel .sensor-result-card span {
  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 10.5px !important;
}

#sensorDetailPanel .sensor-result-card strong {
  display: block !important;

  margin-top: 8px !important;

  color: var(--v2-text) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
}


/* REPORT DATE / ACTION AREA */

#sensorDetailPanel .report-range-box {
  display: grid !important;

  grid-template-columns:
    minmax(190px, 1fr)
    minmax(190px, 1fr)
    auto auto auto auto !important;

  gap: 10px !important;

  align-items: end !important;

  margin: 16px 18px 0 !important;
  padding: 14px !important;

  background: var(--v2-panel-dark) !important;

  border: 1px solid var(--v2-line-soft) !important;
  border-radius: 0 !important;
}

#sensorDetailPanel .report-range-box > div {
  min-width: 0 !important;
}

#sensorDetailPanel .report-range-box label {
  display: block !important;

  margin-bottom: 6px !important;

  color: var(--v2-muted) !important;

  font-size: 11px !important;
  font-weight: 600 !important;
}

#sensorDetailPanel .report-range-box input {
  width: 100% !important;
  min-height: 40px !important;

  background: #F3F6F4 !important;

  border: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;

  color: var(--v2-text) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 12px !important;
}


/* REPORT BUTTONS */

#sensorDetailPanel .report-range-box .btn {
  min-height: 40px !important;

  padding: 9px 13px !important;

  border-radius: 0 !important;

  font-size: 12px !important;

  white-space: nowrap !important;
}

#sensorDetailPanel #reportPreviewButton {
  background: #E7862F !important;

  border: 1px solid #E7862F !important;

  color: #FFFFFF !important;
}

#sensorDetailPanel #reportPdfButton,
#sensorDetailPanel #reportCsvButton,
#sensorDetailPanel #reportFullPeriodButton,
#sensorDetailPanel #closeSensorDetailButton {
  background: transparent !important;

  border: 1px solid var(--v2-line) !important;

  color: var(--v2-text) !important;
}


/* PREVIEW */

#sensorDetailPanel .report-preview {
  margin: 14px 18px 18px !important;

  padding: 14px !important;

  min-height: 62px !important;

  background: var(--v2-panel-dark) !important;

  border: 1px solid var(--v2-line-soft) !important;
  border-radius: 0 !important;

  color: var(--v2-muted) !important;
}


/* REPORT SUMMARY CARDS */

#sensorDetailPanel .report-stat-card {
  padding: 12px 14px !important;

  background: #F3F6F4 !important;

  border: 1px solid var(--v2-line-soft) !important;
  border-radius: 0 !important;
}

#sensorDetailPanel .report-stat-card b {
  color: var(--v2-text) !important;

  font-size: 12px !important;
}

#sensorDetailPanel .report-stat-card span {
  color: var(--v2-muted) !important;

  font-family: Consolas, "Courier New", monospace !important;
  font-size: 10.5px !important;
}


/* REPORT TABLE */

#sensorDetailPanel .report-preview table {
  width: 100% !important;

  background: transparent !important;

  border-collapse: collapse !important;
}

#sensorDetailPanel .report-preview th {
  padding: 11px 12px !important;

  background: #F3F6F4 !important;

  color: var(--v2-muted) !important;

  border-bottom: 1px solid var(--v2-line) !important;

  font-size: 10px !important;
}

#sensorDetailPanel .report-preview td {
  padding: 11px 12px !important;

  background: transparent !important;

  color: #4B5B54 !important;

  border-bottom: 1px solid var(--v2-line-soft) !important;

  font-size: 12px !important;
}


/* RESPONSIVE */

@media (max-width: 1250px) {

  #sensorDetailPanel .report-range-box {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}

@media (max-width: 900px) {

  #sensorDetailPanel .sensor-result-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}



/* ===== COMPANY SIDEBAR LOGO ===== */

.company-logo-slot {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 800;
}

.company-logo-slot.has-image {
  padding: 4px;
  background: #ffffff;
}

.company-logo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}


/* ===== SENSOR CHART & PROBE CONFIGURATION (NEW) ===== */

.schart-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 20, 15, .55);
}
.schart-overlay.hidden { display: none; }

.schart-modal {
  width: min(820px, 100%);
  max-height: calc(100vh - 60px);
  overflow: auto;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.schart-modal-narrow { width: min(560px, 100%); }

.schart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.schart-head h3 { margin: 0; font-size: 17px; }
.schart-head p { margin: 4px 0 0; }
.schart-head-actions { display: flex; align-items: center; gap: 8px; }

.schart-value-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.schart-value-card {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7faf8;
  border: 1px solid var(--line);
}
.schart-value-card span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.schart-value-card strong { font-size: 22px; display: block; margin-top: 6px; }
.schart-value-card.surface strong { color: #EB8F1D; }
.schart-value-card.core strong { color: #1d4ed8; }
.schart-value-card.bottom strong { color: #166534; }

.schart-chart-area {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fbfdfb;
}
.schart-svg { width: 100%; height: 220px; display: block; }

.schart-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.schart-legend-item { display: flex; align-items: center; gap: 6px; }
.schart-legend-item i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* Probe configuration rows */
.probe-rows { display: grid; gap: 12px; margin-bottom: 14px; }
.probe-row {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f9fbf9;
}
.probe-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.probe-row-head b { display: block; font-size: 13.5px; }
.probe-row-head small { color: var(--muted); font-size: 11px; }

.probe-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.probe-switch input { opacity: 0; width: 0; height: 0; }
.probe-track {
  position: absolute; inset: 0;
  background: #d7ded8;
  border-radius: 999px;
  transition: background .15s;
  cursor: pointer;
}
.probe-track::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .15s;
}
.probe-switch input:checked + .probe-track { background: var(--green); }
.probe-switch input:checked + .probe-track::before { transform: translateX(18px); }

.probe-role-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.probe-role-btn {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.probe-role-btn.selected {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}

.probe-reason {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 850;
}
.probe-reason textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #c8d8ce;
  border-radius: 10px;
  font-family: inherit;
}

@media (max-width: 640px) {
  .schart-value-cards { grid-template-columns: 1fr; }
}

/* ===== LOGIN FORGOT PASSWORD MODAL FIX ===== */
#modalBackdrop.modal-backdrop {
  z-index: 6000 !important;
}


   CURESENSE COMPANY PORTAL — PROFESSIONAL BLUE THEME
   Visual override only: no structure, behavior, or logo changes
   ========================================================= */

:root {
  --green: #1269e8;
  --green2: #0c5dce;
  --green3: #1672ee;
  --green-soft: #eaf3ff;
  --ink: #172337;
  --muted: #6f7b8d;
  --bg: #f6f8fb;
  --line: #dfe5ec;
  --panel: #ffffff;
  --blue: #1269e8;
  --blue-soft: #eaf3ff;
  --shadow: 0 14px 34px rgba(31, 48, 73, .10);

  --cs-bg: #f6f8fb;
  --cs-bg-deep: #ffffff;
  --cs-panel: #ffffff;
  --cs-panel-2: #f8fafc;
  --cs-panel-3: #f7f9fc;
  --cs-line: #dfe5ec;
  --cs-line-dim: #edf0f4;
  --cs-cyan: #1269e8;
  --cs-cyan-dim: #0c5dce;
  --cs-text: #172337;
  --cs-text-dim: #6f7b8d;
  --cs-text-faint: #929cab;
  --cs-green: #15966f;
  --cs-amber: #c98220;
  --cs-red: #d84c59;

  --v2-bg: #f6f8fb;
  --v2-deep: #ffffff;
  --v2-panel: #ffffff;
  --v2-panel-dark: #f7f9fc;
  --v2-line: #dfe5ec;
  --v2-line-soft: #edf0f4;
  --v2-text: #172337;
  --v2-muted: #6f7b8d;
  --v2-faint: #929cab;
  --v2-cyan: #1269e8;
  --v2-green: #15966f;
  --v2-amber: #c98220;
  --v2-red: #d84c59;
}

html,
body,
.app-shell {
  color: #172337 !important;
  background: #f6f8fb !important;
}

body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Login */

#loginScreen.login-screen {
  background:
    radial-gradient(circle at 15% 15%, rgba(18, 105, 232, .12), transparent 31rem),
    radial-gradient(circle at 88% 82%, rgba(30, 132, 246, .08), transparent 28rem),
    #f4f7fb !important;
}

#loginScreen .login-card {
  background: #ffffff !important;
  border: 1px solid #dce3eb !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 65px rgba(24, 44, 71, .16) !important;
  color: #172337 !important;
}

#loginScreen .brand-name,
#loginScreen .login-copy h1 {
  color: #172337 !important;
}

#loginScreen .brand-sub,
#loginScreen .login-copy p,
#loginScreen .form-stack label {
  color: #748093 !important;
}

#loginScreen #loginEmail,
#loginScreen #loginPassword,
#loginScreen #mfaLoginCode {
  color: #263448 !important;
  background: #f8fafc !important;
  border: 1px solid #d9e1ea !important;
  border-radius: 9px !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#loginScreen #loginEmail:focus,
#loginScreen #loginPassword:focus,
#loginScreen #mfaLoginCode:focus {
  background: #ffffff !important;
  border-color: #1269e8 !important;
  box-shadow: 0 0 0 3px rgba(18, 105, 232, .12) !important;
}

#loginScreen #loginButton,
#loginScreen #mfaLoginButton {
  color: #ffffff !important;
  background: #1269e8 !important;
  border-color: #1269e8 !important;
  border-radius: 9px !important;
  box-shadow: 0 7px 16px rgba(18, 105, 232, .18) !important;
}

#loginScreen #loginButton:hover,
#loginScreen #mfaLoginButton:hover {
  background: #0c5dce !important;
  border-color: #0c5dce !important;
}

#loginScreen #forgotPasswordButton,
#loginScreen #cancelMfaLoginButton {
  color: #526174 !important;
  background: #f7f9fc !important;
  border-color: #dfe5ec !important;
  border-radius: 9px !important;
}

/* Preserve the original CureSense logo colors */

.logo,
.sidebar .logo,
#loginScreen .logo {
  color: #ffffff !important;
  background: #e7862f !important;
  border-color: #e7862f !important;
  box-shadow: none !important;
}

.company-logo-slot,
.company-logo-slot.has-image,
.company-logo-slot img {
  background: #ffffff !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Sidebar */

.sidebar {
  color: #4f5c6e !important;
  background: #ffffff !important;
  border-right: 1px solid #dfe5ec !important;
  box-shadow: 8px 0 24px rgba(31, 48, 73, .025) !important;
}

.sidebar .brand-name {
  color: #19263a !important;
}

.sidebar .brand-sub {
  color: #7b8798 !important;
}

.sidebar .company-identity {
  background: linear-gradient(145deg, #f8fafc, #ffffff) !important;
  border: 1px solid #dfe5ec !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(31, 48, 73, .035) !important;
}

.sidebar .company-identity b {
  color: #2e3b4e !important;
}

.sidebar .company-identity span,
.sidebar .account-box > span {
  color: #8390a1 !important;
}

.sidebar .nav {
  gap: 4px !important;
}

.sidebar .nav-item {
  color: #566376 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: color .15s ease, background .15s ease, transform .15s ease !important;
}

.sidebar .nav-item::before {
  background: #9aa5b4 !important;
}

.sidebar .nav-item:hover {
  color: #145fc9 !important;
  background: #f2f6fc !important;
  transform: translateX(2px);
}

.sidebar .nav-item.active {
  color: #0c63d6 !important;
  background: #edf4ff !important;
  border: 0 !important;
  box-shadow: inset 3px 0 0 #1269e8 !important;
  font-weight: 700 !important;
}

.sidebar .nav-item.active::before {
  background: #1269e8 !important;
}

.sidebar .account-box {
  border-top-color: #e3e8ee !important;
}

.sidebar .account-box b {
  color: #344255 !important;
}

.sidebar .role-chip {
  color: #0c63d6 !important;
  background: #eaf3ff !important;
  border-color: #cfe1fb !important;
  border-radius: 999px !important;
}

.sidebar #changePasswordButton,
.sidebar #logoutButton {
  color: #526174 !important;
  background: #ffffff !important;
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
}

.sidebar #changePasswordButton:hover {
  color: #0d62d2 !important;
  border-color: #bcd4f7 !important;
  background: #f3f8ff !important;
}

.sidebar #logoutButton:hover {
  color: #bd3f4c !important;
  border-color: #f0c1c7 !important;
  background: #fff4f5 !important;
}

/* Main shell and top header */

.main {
  background: #f6f8fb !important;
}

.topbar {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid #dfe5ec !important;
  box-shadow: 0 4px 14px rgba(31, 48, 73, .035) !important;
  backdrop-filter: blur(12px) !important;
}

#pageTitle,
.topbar h2 {
  color: #172337 !important;
  letter-spacing: -.025em !important;
}

#pageSubtitle,
.topbar p {
  color: #7a8696 !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
}

#apiBadge {
  color: #167d60 !important;
  background: #f0faf6 !important;
  border-color: #bee4d6 !important;
  border-radius: 999px !important;
}

#refreshButton,
#topInviteButton {
  border-radius: 8px !important;
  transition: color .15s ease, background .15s ease, border-color .15s ease,
    transform .15s ease !important;
}

#refreshButton {
  color: #46566a !important;
  background: #ffffff !important;
  border-color: #d7dfe8 !important;
}

#topInviteButton {
  color: #ffffff !important;
  background: #1269e8 !important;
  border-color: #1269e8 !important;
  box-shadow: 0 6px 14px rgba(18, 105, 232, .16) !important;
}

#refreshButton:hover,
#topInviteButton:hover {
  transform: translateY(-1px);
}

#topInviteButton:hover {
  background: #0c5dce !important;
  border-color: #0c5dce !important;
}

/* Inputs, filters, and controls */

.main .content input:not([type="checkbox"]):not([type="radio"]),
.main .content select,
.main .content textarea,
.main .content .search,
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select,
.modal textarea {
  color: #344255 !important;
  background: #f8fafc !important;
  border: 1px solid #d9e1ea !important;
  border-radius: 8px !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}

.main .content input:not([type="checkbox"]):not([type="radio"]):focus,
.main .content select:focus,
.main .content textarea:focus,
.modal input:not([type="checkbox"]):not([type="radio"]):focus,
.modal select:focus,
.modal textarea:focus {
  color: #27364a !important;
  background: #ffffff !important;
  border-color: #1269e8 !important;
  box-shadow: 0 0 0 3px rgba(18, 105, 232, .11) !important;
}

/* Buttons */

.main .content .btn,
.main .content .mini-btn,
.main .content button:not(.nav-item),
.modal .btn,
.modal button {
  border-radius: 8px !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
  transition: color .15s ease, background .15s ease, border-color .15s ease,
    box-shadow .15s ease, transform .15s ease !important;
}

.main .content .btn:hover,
.main .content .mini-btn:hover,
.main .content button:not(.nav-item):hover,
.modal .btn:hover,
.modal button:hover {
  transform: translateY(-1px);
}

.main .content .btn.primary,
.modal .btn.primary,
#view-overview .overview-select-btn,
#sensorDetailPanel #reportPreviewButton {
  color: #ffffff !important;
  background: #1269e8 !important;
  border-color: #1269e8 !important;
  box-shadow: 0 5px 12px rgba(18, 105, 232, .13) !important;
}

.main .content .btn.primary:hover,
.modal .btn.primary:hover,
#view-overview .overview-select-btn:hover,
#sensorDetailPanel #reportPreviewButton:hover {
  background: #0c5dce !important;
  border-color: #0c5dce !important;
}

.main .content .btn.secondary,
.main .content .btn.ghost,
.main .content .mini-btn,
.main .content .table-card button,
.modal .btn.secondary,
.modal .btn.ghost,
#sensorDetailPanel #reportPdfButton,
#sensorDetailPanel #reportCsvButton,
#sensorDetailPanel #reportFullPeriodButton,
#sensorDetailPanel #closeSensorDetailButton {
  color: #46566a !important;
  background: #ffffff !important;
  border-color: #d7dfe8 !important;
}

.main .content .btn.secondary:hover,
.main .content .btn.ghost:hover,
.main .content .mini-btn:hover,
.main .content .table-card button:hover,
.modal .btn.secondary:hover,
.modal .btn.ghost:hover {
  color: #0d62d2 !important;
  background: #f3f8ff !important;
  border-color: #bcd4f7 !important;
}

.main .content .mini-btn.danger,
.main .content .btn.danger,
.main .content .danger {
  color: #c33f4d !important;
  background: #fff7f8 !important;
  border-color: #efc4c9 !important;
}

/* Cards, tables, and content surfaces */

.main .content .panel,
.main .content .table-card,
.main .content .profile-card,
.main .content .system-panel,
.main .content .stats-grid > article,
.main .content .sensor-result-card,
.main .content .report-stat-card,
.main .content .project-access-table-wrap,
.main .content .project-access-summary > div,
#view-overview .overview-kpi-card,
#view-overview .overview-monitor-panel,
#view-overview .overview-side-panel,
#view-overview .overview-project-selector,
#sensorDetailPanel,
.schart-modal {
  color: #344255 !important;
  background: #ffffff !important;
  border-color: #dfe5ec !important;
  border-radius: 10px !important;
  box-shadow: 0 7px 20px rgba(31, 48, 73, .045) !important;
}

.panel-head,
#view-overview .overview-monitor-head,
#view-overview .overview-side-head,
#sensorDetailPanel .panel-head {
  background: #ffffff !important;
  border-bottom-color: #e7ebf0 !important;
}

.main .content table,
.main .content tbody td,
.main .content td {
  color: #536174 !important;
  background: #ffffff !important;
}

.main .content thead,
.main .content thead tr,
.main .content thead th,
.main .content th,
#sensorDetailPanel .report-preview th {
  color: #768294 !important;
  background: #f5f7fa !important;
  border-bottom-color: #dfe5ec !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
}

.main .content tbody td,
.main .content td,
#sensorDetailPanel .report-preview td {
  border-bottom-color: #edf0f4 !important;
}

.main .content tbody tr:hover td {
  background: #f7faff !important;
}

.main .content td b,
.main .content td strong,
.view h2,
.view h3,
.panel-head h3,
#view-profile .kv span:last-child {
  color: #2d3b4e !important;
}

.view p,
.view .muted,
.view small,
.panel-head .muted,
.main .content td small,
.main .content td .muted,
#view-profile .kv span:first-child {
  color: #7d8999 !important;
}

.view .eyebrow,
.main .content .eyebrow,
#view-overview .overview-eyebrow {
  color: #1269e8 !important;
}

/* Overview */

#view-overview .overview-kpi-card {
  background: linear-gradient(145deg, #ffffff, #fbfcfe) !important;
}

#view-overview .overview-kpi-card:hover {
  border-color: #c6d8ef !important;
  box-shadow: 0 11px 25px rgba(31, 48, 73, .075) !important;
  transform: translateY(-1px);
}

#view-overview .overview-kpi-icon {
  color: #1269e8 !important;
  background: #eaf3ff !important;
  border-color: #d3e4fc !important;
  border-radius: 8px !important;
}

#view-overview .overview-kpi-card > strong,
#view-overview .overview-kpi-label,
#view-overview .overview-monitor-head h3,
#view-overview .overview-side-head h3 {
  color: #263448 !important;
}

#view-overview .overview-chip {
  color: #657286 !important;
  background: #f7f9fc !important;
  border-color: #dfe5ec !important;
  border-radius: 999px !important;
}

#view-overview .live12-card,
#view-overview .live12-values > div,
#sensorDetailPanel .sensor-result-card,
#sensorDetailPanel .report-range-box,
#sensorDetailPanel .report-preview,
#sensorDetailPanel .report-stat-card,
.schart-value-card,
.schart-chart-area,
.probe-row {
  background: #f8fafc !important;
  border-color: #e3e8ee !important;
  border-radius: 9px !important;
}

#view-overview .overview-project-selector {
  box-shadow:
    0 0 0 9999px rgba(24, 38, 58, .52),
    0 24px 62px rgba(24, 38, 58, .22) !important;
}

#view-overview .overview-project-list .live12-choice {
  color: #667387 !important;
  background: #ffffff !important;
  border-color: #dfe5ec !important;
  border-radius: 8px !important;
}

#view-overview .overview-project-list .live12-choice:hover,
#view-overview .overview-project-list .live12-choice.selected {
  color: #0e63d8 !important;
  background: #f3f8ff !important;
  border-color: #bcd4f7 !important;
}

.digital-bar,
.bar {
  background: #e9edf2 !important;
  border-color: #dfe5ec !important;
}

.digital-bar i,
.digital-bar.sensor-bar i,
.digital-bar.gateway-bar i,
.bar i {
  background: linear-gradient(90deg, #1269e8, #4d9aff) !important;
}

/* Badges and status colors */

.role-chip,
.status-pill,
.badge,
.chip,
.main .content .badge {
  border-radius: 999px !important;
}

.badge.active,
.badge.accepted,
.badge.good,
.badge.success,
.status-pill.good,
.chip.good,
.overview-kpi-state.green,
.live12-sync-badge.good {
  color: #167d60 !important;
  background: #e7f6f0 !important;
  border-color: #bde3d5 !important;
}

.badge.invited,
.badge.pending,
.badge.warn,
.badge.warning,
.status-pill.warning,
.chip.warning,
.overview-kpi-state.amber {
  color: #aa6618 !important;
  background: #fff2df !important;
  border-color: #efd09d !important;
}

.badge.suspended,
.badge.cancelled,
.badge.expired,
.badge.bad,
.badge.danger,
.status-pill.bad,
.status-pill.danger,
.chip.danger {
  color: #b83d49 !important;
  background: #ffeaed !important;
  border-color: #efbec4 !important;
}

.badge.role,
.badge.neutral,
.overview-kpi-state.cyan,
.live12-sync-badge.neutral {
  color: #0f63d4 !important;
  background: #eaf3ff !important;
  border-color: #cee1fb !important;
}

/* Profile, messages, and modals */

.main .content .info-banner,
.main .content .safe-note,
.main .content .message,
#view-invitations .info-banner,
.role-guide,
.safe-note {
  color: #647286 !important;
  background: #f2f7ff !important;
  border-color: #cee0f7 !important;
  border-radius: 9px !important;
}

.main .content .info-banner a,
.modal .message a,
.text-btn,
.command-grid code {
  color: #0c63d6 !important;
}

.modal-backdrop,
#modalBackdrop.modal-backdrop,
.schart-overlay {
  background: rgba(24, 38, 58, .52) !important;
  backdrop-filter: blur(3px) !important;
}

.modal,
.schart-modal {
  color: #344255 !important;
  background: #ffffff !important;
  border: 1px solid #dce3eb !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 65px rgba(24, 38, 58, .22) !important;
}

.modal-head,
.schart-head {
  border-bottom-color: #e7ebf0 !important;
}

.probe-track {
  background: #d9e0e8 !important;
}

.probe-switch input:checked + .probe-track {
  background: #1269e8 !important;
}

.probe-role-btn {
  color: #697689 !important;
  background: #ffffff !important;
  border-color: #d9e1ea !important;
  border-radius: 8px !important;
}

.probe-role-btn.selected {
  color: #0d63d5 !important;
  background: #edf5ff !important;
  border-color: #bcd5f8 !important;
}

.toast {
  color: #ffffff !important;
  background: #22344d !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 36px rgba(24, 38, 58, .24) !important;
}

.toast.error {
  background: #c54451 !important;
}

/* Accessible interaction finish */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(18, 105, 232, .18) !important;
  outline-offset: 2px !important;
}

::-webkit-scrollbar-track {
  background: #f5f7fa !important;
}

::-webkit-scrollbar-thumb {
  background: #cfd7e1 !important;
  border: 2px solid #f5f7fa;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aeb9c7 !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== MODERN V2 SAFE OVERRIDES (merged on top of Sep-9 live CSS) ===== */
/* =========================================================
   CURESENSE COMPANY DASHBOARD — MODERN UI V3
   ========================================================= */
:root {
  --modern-blue:#1268f3; --modern-blue-soft:#edf5ff; --modern-ink:#101828;
  --modern-muted:#475467; --modern-bg:#f6f8fb; --modern-line:#e4e7ec;
  --modern-shadow:0 8px 24px rgba(16,24,40,.055);
  --ink:var(--modern-ink); --muted:var(--modern-muted); --bg:var(--modern-bg); --line:var(--modern-line);
}
html,body,button,input,select,textarea{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important}
body{color:#101828!important;background:var(--modern-bg)!important}.main{background:var(--modern-bg)!important}.content{max-width:1700px!important;padding:20px 22px 28px!important}
.sidebar{width:248px!important;padding:18px 14px!important;background:#fff!important;border-right:1px solid var(--modern-line)!important}.main{margin-left:248px!important}
.company-identity{background:#fff!important;border:1px solid var(--modern-line)!important;border-radius:12px!important;box-shadow:none!important}.company-identity b,.account-box b,.brand-name{color:#101828!important}.company-identity span,.account-box>span,.brand-sub{color:#667085!important}
.nav{gap:4px!important}.nav-item{min-height:44px!important;color:#27364a!important;font-size:14px!important;font-weight:650!important;border-radius:9px!important;padding:11px 14px!important}.nav-item:hover{background:#f5f8fd!important}.nav-item.active{background:var(--modern-blue-soft)!important;color:#0b63e5!important;box-shadow:inset 3px 0 0 var(--modern-blue)!important}
.topbar{min-height:72px!important;padding:14px 24px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--modern-line)!important}.topbar h2{color:#101828!important;font-size:26px!important;font-weight:760!important;letter-spacing:-.025em!important}.topbar p{color:#667085!important;font-size:13px!important}
.btn{border-radius:8px!important;min-height:38px!important;font-weight:650!important;color:#1d2939!important;border-color:#d0d5dd!important;background:#fff!important}.btn.primary{background:var(--modern-blue)!important;border-color:var(--modern-blue)!important;color:#fff!important;box-shadow:0 4px 12px rgba(18,104,243,.16)!important}
.section-toolbar{padding:14px 16px!important;margin-bottom:14px!important;background:#fff!important;border:1px solid var(--modern-line)!important;border-radius:12px!important;box-shadow:var(--modern-shadow)!important}.search,input,select,textarea{color:#101828!important;background:#fff!important;border-color:#d0d5dd!important;border-radius:8px!important}.search::placeholder,input::placeholder,textarea::placeholder{color:#98a2b3!important}
.table-card,.panel,.profile-card,.overview-kpi-card,.overview-monitor-panel,.overview-side-panel{background:#fff!important;border:1px solid var(--modern-line)!important;border-radius:12px!important;box-shadow:var(--modern-shadow)!important}table{color:#101828!important}th{color:#475467!important;background:#f8fafc!important;font-weight:700!important}td{color:#1d2939!important;border-color:#eef2f6!important}td b{color:#101828!important}td small,.muted{color:#667085!important}
.row-actions{gap:7px!important;align-items:center!important}.mini-btn{border:1px solid #d0d5dd!important;border-radius:7px!important;background:#fff!important;color:#344054!important;min-height:31px!important;padding:6px 10px!important;font-weight:650!important}.mini-btn.danger{color:#d92d20!important;border-color:#fecdca!important;background:#fff8f7!important}.mini-btn.success{color:#067647!important;border-color:#abefc6!important;background:#ecfdf3!important}.badge{border-radius:999px!important;font-weight:750!important}
/* Overview inline project selection */
#view-overview .overview-main-layout{grid-template-columns:minmax(0,1fr) 300px!important;gap:16px!important}#view-overview .overview-monitor-panel{display:grid!important;grid-template-columns:300px minmax(0,1fr)!important;gap:0 16px!important;padding:0!important;overflow:hidden!important}#view-overview .overview-monitor-head{grid-column:1/-1!important;padding:18px 20px!important;margin:0!important;border-bottom:1px solid var(--modern-line)!important;min-height:auto!important}#view-overview .overview-monitor-head h3{color:#101828!important;font-size:20px!important}#view-overview .overview-monitor-head p,#view-overview .overview-eyebrow{color:#667085!important;font-family:inherit!important}#view-overview #liveMonitorSelectButton,#view-overview .overview-selector-done{display:none!important}
#view-overview .overview-project-selector,#view-overview .overview-project-selector.hidden{position:static!important;display:block!important;grid-column:1!important;width:auto!important;max-height:none!important;transform:none!important;overflow:visible!important;margin:0!important;padding:14px!important;background:#fbfcfe!important;border:0!important;border-right:1px solid var(--modern-line)!important;border-radius:0!important;box-shadow:none!important}#view-overview .overview-selector-head{padding:0 0 12px!important;margin:0!important;border:0!important}#view-overview .overview-selector-head b{color:#101828!important;font-size:15px!important}#view-overview .overview-selector-head small{color:#667085!important;font-family:inherit!important;font-size:11px!important;line-height:1.45!important}#view-overview .overview-project-list{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:0!important}#view-overview .overview-project-list .live12-choice{min-height:64px!important;padding:11px 12px!important;border:1px solid var(--modern-line)!important;border-radius:9px!important;background:#fff!important;color:#101828!important}#view-overview .overview-project-list .live12-choice+.live12-choice{margin-top:0!important}#view-overview .overview-project-list .live12-choice.selected{border-color:var(--modern-blue)!important;background:#eff6ff!important;box-shadow:inset 3px 0 0 var(--modern-blue)!important}#view-overview .overview-project-list .live12-choice b{color:#101828!important;font-size:13px!important}#view-overview .overview-project-list .live12-choice small{color:#667085!important;font-family:inherit!important;font-size:10.5px!important}#view-overview .overview-project-list .live12-choice>small{color:#067647!important}
#view-overview .overview-sensor-grid{grid-column:2!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:16px 16px 18px 0!important;gap:12px!important;align-content:start!important}#view-overview .live12-card{border-radius:10px!important;background:#fff!important;border:1px solid var(--modern-line)!important}#view-overview .live12-values>div{background:#f8fafc!important;border-color:#eaecf0!important;border-radius:8px!important}#view-overview .live12-values strong{color:#101828!important;font-family:inherit!important}#view-overview .live12-card-head small,#view-overview .live12-card-foot{font-family:inherit!important;color:#667085!important}#view-overview .overview-chip{border-radius:999px!important;background:#fff!important;color:#475467!important;font-family:inherit!important}
/* User summary and action menu */
.user-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.user-summary-card{display:flex;align-items:center;gap:13px;min-height:96px;padding:17px;background:#fff;border:1px solid var(--modern-line);border-radius:12px;box-shadow:var(--modern-shadow)}.user-summary-card strong{display:block;color:#101828;font-size:28px;line-height:1}.user-summary-card span:not(.user-summary-icon){display:block;margin-top:6px;color:#475467;font-size:12px;font-weight:650}.user-summary-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;font-weight:850}.user-summary-icon.blue{color:#1268f3;background:#eaf2ff}.user-summary-icon.green{color:#067647;background:#ecfdf3}.user-summary-icon.red{color:#d92d20;background:#fef3f2}.user-summary-icon.purple{color:#7f56d9;background:#f4f3ff}
.user-action-menu{position:relative}.user-action-menu>summary{list-style:none}.user-action-menu>summary::-webkit-details-marker{display:none}.user-action-popover{position:absolute;z-index:120;top:calc(100% + 6px);right:0;width:190px;padding:6px;background:#fff;border:1px solid var(--modern-line);border-radius:9px;box-shadow:0 16px 30px rgba(16,24,40,.14)}.user-menu-item{width:100%;border:0;background:transparent;color:#344054;text-align:left;padding:9px 10px;border-radius:6px;font-weight:600}.user-menu-item:hover{background:#f8fafc}.user-menu-item.danger-text{color:#d92d20}
/* Profile */
#view-profile .profile-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}.profile-hero-card{grid-column:1/-1;position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) 260px;align-items:center;gap:20px;min-height:185px;padding:24px;overflow:hidden;background:#fff;border:1px solid var(--modern-line);border-radius:14px;box-shadow:var(--modern-shadow)}.profile-hero-logo{width:96px;height:96px;display:grid;place-items:center;border:1px solid var(--modern-line);border-radius:16px;background:#fff;color:#101828;font-size:28px;font-weight:850}.profile-hero-title-row{display:flex;align-items:center;gap:12px}.profile-hero-title-row h2{margin:0;color:#101828;font-size:30px;letter-spacing:-.025em}.profile-hero-main>p{margin:7px 0 18px;color:#475467;font-size:14px}.profile-hero-meta{display:flex;gap:28px;flex-wrap:wrap}.profile-hero-meta span{min-width:130px}.profile-hero-meta small{display:block;color:#667085;font-size:11px}.profile-hero-meta b{display:block;margin-top:4px;color:#101828;font-size:13px}.profile-hero-art{align-self:stretch;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:20px;background:linear-gradient(135deg,#f7fbff,#eaf3ff);border-radius:12px}.profile-hero-art span{display:block;width:44px;background:linear-gradient(180deg,#8ab8ff,#dceaff);border-radius:8px 8px 0 0}.profile-hero-art span:nth-child(1){height:55px}.profile-hero-art span:nth-child(2){height:105px}.profile-hero-art span:nth-child(3){height:78px}
#view-profile .modern-profile-card{padding:20px!important;border-radius:12px!important}.profile-card-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid #eef2f6}.profile-card-head h3{margin:0!important;color:#101828!important;font-size:17px!important}.profile-card-head p{margin:4px 0 0;color:#667085;font-size:11px}.profile-section-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;font-weight:850}.profile-section-icon.blue{background:#eaf2ff;color:#1268f3}.profile-section-icon.orange{background:#fff4e8;color:#e36f0b}.profile-section-icon.green{background:#ecfdf3;color:#067647}.profile-section-icon.purple{background:#f4f3ff;color:#7f56d9}#view-profile .kv{min-height:43px!important;padding:10px 2px!important;border-bottom:1px solid #eef2f6!important}#view-profile .kv span:first-child{color:#667085!important;font-size:12px!important}#view-profile .kv span:last-child{color:#101828!important;font-size:12px!important;font-weight:700!important}.profile-location-art{margin-top:14px;min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,#f7f9fc,#eef4fb);color:#475467}.profile-location-art span{font-size:11px}.profile-location-art b{margin-top:4px;color:#101828}
#view-gateways .panel,#view-sensors .panel,#view-invitations .table-card,#view-audit .table-card{border-radius:12px!important}#view-gateways h3,#view-sensors h3,#view-invitations h3,#view-audit h3{color:#101828!important}.info-banner{border-radius:9px!important}
@media(max-width:1180px){#view-overview .overview-monitor-panel{grid-template-columns:1fr!important}#view-overview .overview-project-selector{grid-column:1!important;border-right:0!important;border-bottom:1px solid var(--modern-line)!important}#view-overview .overview-sensor-grid{grid-column:1!important;padding:16px!important}.user-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-hero-card{grid-template-columns:90px 1fr}.profile-hero-art{display:none}}
@media(max-width:820px){.sidebar{width:220px!important}.main{margin-left:220px!important}#view-overview .overview-main-layout{grid-template-columns:1fr!important}#view-profile .profile-grid,.user-summary-grid{grid-template-columns:1fr!important}.profile-hero-card{grid-template-columns:1fr}}