/* The rail runs the full height of the window, starting at the top corner;
   #dt-topbar is offset by var(--sb-w) so the two sit side by side. */
#dt-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 220px;
  background: linear-gradient(180deg, #0b1511 0%, #070c0a 100%);
  border-right: 1px solid rgba(44,221,127,.1);
  display: flex; flex-direction: column;
  padding: 0; z-index: 200; overflow: hidden;
  will-change: width;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  box-shadow: 2px 0 12px rgba(0,0,0,.5);
}
#dt-sidebar.icon-only { width: 68px; }
#dt-sidebar::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(44,221,127,.2) 20%, rgba(44,221,127,.2) 80%, transparent 100%);
  pointer-events: none;
}

#sb-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  position: fixed; top: 50%; left: 207px;
  transform: translateY(-50%);
  width: 26px; height: 48px;
  background: rgba(11,20,16,.92);
  border: 1px solid rgba(44,221,127,.22);
  border-radius: 0 8px 8px 0; color: rgba(44,221,127,.7);
  font-size: 10px; cursor: pointer; z-index: 310;
  transition: background .2s, color .2s, left .22s cubic-bezier(.4,0,.2,1), transform .22s;
  box-shadow: 2px 0 12px rgba(0,0,0,.35); user-select: none;
}
#sb-toggle-btn:hover {
  background: rgba(44,221,127,.15); color: #2cdd7f;
  box-shadow: 2px 0 18px rgba(44,221,127,.3);
}
body.sb-icon-only #sb-toggle-btn { left: 55px; transform: translateY(-50%) rotate(180deg); }

#dt-sidebar.icon-only .sb-logo-title,
#dt-sidebar.icon-only .sb-logo-sub,
#dt-sidebar.icon-only #sb-user-name,
#dt-sidebar.icon-only #sb-user-role,
#dt-sidebar.icon-only #sb-logout-btn,
#dt-sidebar.icon-only #sb-user-text { display: none !important; }

#dt-sidebar.icon-only .sb-logo { justify-content: center; padding: 14px 0 !important; }
#dt-sidebar.icon-only #sb-user-card {
  justify-content: center; padding: 8px 0 !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  width: 46px !important; margin: 4px 11px 8px !important;
}
#dt-sidebar.icon-only .sb-divider { margin: 4px 10px !important; }

body { padding-left: 220px; }
body.sb-icon-only { padding-left: 68px; --sb-w: 68px; }
#dashboard-overlay, #plan-upload-panel, #fp-module, #assets-mgmt-overlay, #tower-plan-overlay {
  transition: left .22s cubic-bezier(.4,0,.2,1);
}
body.sb-icon-only #dashboard-overlay,
body.sb-icon-only #plan-upload-panel,
body.sb-icon-only #fp-module,
body.sb-icon-only #tower-plan-overlay,
body.sb-icon-only #assets-mgmt-overlay { left: 68px; }

@media (max-width: 600px) {
  body { padding-left: 0 !important; --sb-w: 0px !important; }
  #dt-sidebar { display: none !important; }
  #dt-topbar { left: 0 !important; }
  #sb-toggle-btn { display: none !important; }
  #dashboard-overlay, #plan-upload-panel, #fp-module,
  #assets-mgmt-overlay, #walk-overlay { left: 0 !important; }
  #app-wrapper { padding-left: 0 !important; }
}
@media (min-width: 601px) and (max-width: 820px) {
  body { padding-left: 68px !important; --sb-w: 68px !important; }
  #dt-sidebar { width: 68px !important; transition: none !important; }
  #dt-sidebar .sb-label,
  #dt-sidebar .sb-logo-title,
  #dt-sidebar .sb-logo-sub,
  #dt-sidebar #sb-user-name,
  #dt-sidebar #sb-user-role,
  #dt-sidebar #sb-user-text { display: none !important; }
  #dt-sidebar .sb-item {
    justify-content: center !important; padding: 0 !important;
    gap: 0 !important; width: 36px !important; margin: 1px 16px !important;
  }
  #dt-sidebar .sb-logo { justify-content: center !important; }
  #sb-toggle-btn { left: 55px !important; transform: translateY(-50%) rotate(180deg) !important; }
  #dashboard-overlay, #plan-upload-panel, #fp-module,
  #assets-mgmt-overlay, #walk-overlay { left: 68px !important; }
}

#viewer-wrap { box-sizing: border-box; }
#viewer-wrap, #viewer-wrap .viewer-body { min-width: 0; min-height: 0; }
#viewer-canvas { display: block; width: 100% !important; height: 100% !important; }

/* Logo */
#dt-sidebar .sb-logo {
  display: flex; flex-direction: row; align-items: center;
  gap: 11px; flex-shrink: 0; padding: 16px 18px 14px;
  width: 100%; cursor: pointer;
  border-bottom: 1px solid rgba(44,221,127,.1);
  background: rgba(44,221,127,.03); transition: background .18s;
}
#dt-sidebar .sb-logo:hover { background: rgba(44,221,127,.07); }
/* Bare mark — no tile, border, or glow behind it. */
#dt-sidebar .sb-logo .sb-logo-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: none; border: none; border-radius: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: visible;
}
/* Without the tile the 20px mark reads too small, so it fills the box here.
   The sign-in screen keeps its own tile and the shared 20px sizing. */
#dt-sidebar .sb-logo .sb-logo-icon .dt-brand-mark {
  width: 38px; height: 34px;
}
/* Gloss overlay removed along with the tile — nothing to sit on. */
#dt-sidebar .sb-logo .sb-logo-icon::before { content: none; }
#dt-sidebar .sb-logo .sb-logo-text { display: flex; flex-direction: column; gap: 1px; }
#dt-sidebar .sb-logo .sb-logo-title {
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.1px;
  color: #ecf3f0; text-transform: none; white-space: nowrap; line-height: 1.2;
}
/* Brand lockup: "Orion" white, "Dtwin" in the brand green. The rail is dark
   in both themes, so these are theme-independent. */
#dt-sidebar .sb-logo-title .dt-brand-a { color: #ffffff; }
#dt-sidebar .sb-logo-title .dt-brand-b { color: #10A37E; }
#dt-sidebar .sb-logo .sb-logo-sub {
  font-size: 8.5px; font-weight: 600; letter-spacing: 1.5px;
  color: rgba(44,221,127,.7); text-transform: uppercase; white-space: nowrap;
}

/* Nav items */
#dt-sidebar .sb-item {
  width: calc(100% - 14px); margin: 1px 7px; height: 36px;
  border-radius: 0; padding: 0 14px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; position: relative; color: rgba(255,255,255,.72);
  border: 1px solid transparent; overflow: visible;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
#dt-sidebar .sb-item .sb-icon {
  font-size: 18px; line-height: 1; width: 22px; text-align: center; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s ease;
}
#dt-sidebar .sb-item:hover .sb-icon { transform: scale(1.12); }
#dt-sidebar .sb-item .sb-label {
  font-size: 13px; font-weight: 400; letter-spacing: .15px;
  color: inherit; white-space: nowrap; overflow: hidden;
  opacity: 1; transition: opacity .16s ease; flex-shrink: 0;
}
#dt-sidebar .sb-item:hover {
  color: #ffffff;
  border-color: rgba(10,73,56,.85);
  background: rgba(10,73,56,.55);
}
#dt-sidebar .sb-item.active {
  background: #0a4938;
  color: #ffffff; border-color: #0a4938;
}
#dt-sidebar .sb-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; height: 100%;
  width: 3px; border-radius: 0;
  background: #3ddc84;
}
#dt-sidebar.icon-only .sb-item {
  justify-content: center; padding: 0 !important; gap: 0 !important;
  width: 36px !important; margin: 1px 16px !important;
}
#dt-sidebar.icon-only .sb-item .sb-label {
  width: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
#dt-sidebar.icon-only .sb-item.active::before { display: none; }
#dt-sidebar.icon-only .sb-item.active .sb-icon { color: #2cdd7f; }
#dt-sidebar.icon-only .sb-item[title]::after {
  content: attr(title);
  position: absolute; left: 56px; top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: #0d1914; border: 1px solid rgba(44,221,127,.25);
  color: #ecf3f0; font-size: .72rem; font-weight: 600;
  padding: 5px 12px; border-radius: 7px; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
  box-shadow: 4px 4px 16px rgba(0,0,0,.65); z-index: 9999;
}
#dt-sidebar.icon-only .sb-item:hover[title]::after { opacity: 1; transform: translateY(-50%) translateX(0); }

#dt-sidebar .sb-divider {
  height: 1px; margin: 4px 14px; flex-shrink: 0;
  background: linear-gradient(90deg, transparent, rgba(44,221,127,.14), transparent);
}
#dt-sidebar .sb-bottom { margin-top: auto; width: 100%; padding-bottom: 8px; }

/* User card */
#sb-user-card {
  width: calc(100% - 14px); margin: 4px 7px 8px;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: linear-gradient(135deg, rgba(44,221,127,.08), rgba(119,233,214,.06));
  border: 1px solid rgba(44,221,127,.14); border-radius: 11px;
  cursor: default; box-shadow: inset 0 1px 0 rgba(44,221,127,.08);
}
#sb-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #2cdd7f, #77e9d6);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; color: #0a130f;
  box-shadow: 0 0 12px rgba(44,221,127,.4), 0 0 0 2px rgba(44,221,127,.18);
}
#sb-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#sb-user-name {
  font-size: .77rem; font-weight: 700; color: #ecf3f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sb-user-role {
  font-size: .6rem; font-weight: 600; color: rgba(44,221,127,.75);
  text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
#sb-logout-btn {
  background: rgba(255,77,109,.08); border: 1px solid rgba(255,77,109,.18);
  color: rgba(255,77,109,.75); border-radius: 7px; width: 28px; height: 28px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s; flex-shrink: 0;
}
#sb-logout-btn:hover {
  background: rgba(255,77,109,.2); border-color: rgba(255,77,109,.45);
  color: #ff4d6d; box-shadow: 0 0 10px rgba(255,77,109,.3);
}