html,body{height:100%;overflow:hidden;min-width:960px;font-family:'Inter',sans-serif;font-weight:400;background:var(--bg);color:var(--tx);transition:background .3s,color .3s;}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
*:focus{outline:none;}
*:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px;}

/* ── Scrollbars ─────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--mu);}

/* ===================== APP ===================== */
#app{
  display:none;width:100vw;height:100vh;
  flex-direction:row;overflow:hidden;
}
#app.visible{display:flex;}

/* ===================== SIDEBAR ===================== */
#sidebar{
  width:220px;min-width:220px;height:100%;
  background:var(--bg2);
  box-shadow:1px 0 0 var(--bd),2px 0 8px rgba(0,0,0,.04);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:width .3s ease;
  z-index:10;
}

.sb-top{
  height:52px;
  padding:0 16px;
  border-bottom:1px solid var(--bd);
  display:flex;flex-direction:column;justify-content:center;
  flex-shrink:0;
}

.sb-orbit{
  font-size:24px;font-weight:700;
  letter-spacing:-1px;color:var(--tx);
  line-height:1;
}
.sb-orbit span{color:var(--cyan);}

.sb-byline{
  display:flex;align-items:center;gap:4px;
  margin-top:3px;
  justify-content:flex-start;
}
.sb-by-text{font-size:8px;color:var(--mu);letter-spacing:.8px;text-transform:uppercase;font-weight:500;}
.sb-by-logo-dark{height:12px;width:auto;opacity:0.5;display:none;}
.sb-by-logo-light{height:12px;width:auto;opacity:0.5;}
[data-theme=dark] .sb-by-logo-dark{display:inline;}
[data-theme=dark] .sb-by-logo-light{display:none;}

.sb-nav{flex:1;overflow-y:auto;padding:8px 8px;scrollbar-width:none;}
.sb-nav::-webkit-scrollbar{display:none;}

.sb-section{
  font-size:10px;font-weight:700;color:var(--mu);
  text-transform:uppercase;letter-spacing:1.2px;
  padding:6px 10px 4px;
  user-select:none;
}

.sb-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:var(--r-md);
  cursor:pointer;color:var(--tx2);font-size:13px;font-weight:500;
  transition:background .15s,color .15s;user-select:none;
  margin-bottom:1px;position:relative;
}
.sb-item:hover{color:var(--tx);background:var(--sur);}
.sb-item.on{color:var(--cyan);background:var(--cyan-dim);font-weight:600;}
.sb-item svg{
  width:15px;height:15px;flex-shrink:0;
  stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}

.sb-foot{
  padding:10px 10px;border-top:1px solid var(--bd);
  flex-shrink:0;
}
.sb-sep{height:1px;background:var(--bd);margin:8px 0;}

.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--cyan-dim);border:1.5px solid var(--cyan-b);color:var(--cyan);font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.user-avatar:hover{background:var(--cyan-b);}

/* Dropdown shared transition */
.user-dropdown,.notif-dropdown{
  visibility:hidden;opacity:0;
  transform:translateY(-6px) scale(.98);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.user-dropdown.open,.notif-dropdown.open{
  visibility:visible;opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s;
}

/* User dropdown */
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--sur);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shadow-lg);z-index:9000;min-width:220px;overflow:hidden;padding:0;}
.ud-head{padding:14px 16px 12px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--bd);}
.ud-avatar{width:36px;height:36px;border-radius:50%;background:var(--cyan-dim);border:1.5px solid var(--cyan-b);color:var(--cyan);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ud-info{flex:1;min-width:0;}
.ud-name{font-size:13px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ud-role{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin-top:1px;}
.ud-sep{height:1px;background:var(--bd);}
.ud-item{display:flex;width:100%;padding:10px 16px;gap:10px;align-items:center;justify-content:space-between;font-size:13px;border:none;background:transparent;cursor:pointer;color:var(--tx2);font-family:'Inter',sans-serif;transition:background .15s,color .15s;text-align:left;white-space:nowrap;}
.ud-item:hover{background:var(--bg2);color:var(--tx);}
.ud-item-icon{width:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.7;}
.ud-logout{color:#ef4444 !important;border-top:1px solid var(--bd);}
.ud-logout:hover{background:#fef2f210 !important;color:#ef4444 !important;}
[data-theme=dark] .ud-logout:hover{background:#ef444410 !important;}

/* Theme toggle switch */
.theme-row{display:flex;width:100%;padding:10px 16px;align-items:center;justify-content:space-between;cursor:pointer;transition:background .15s;border:none;background:transparent;font-family:'Inter',sans-serif;gap:10px;}
.theme-row:hover{background:var(--bg2);}
.theme-row-label{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx2);}
.theme-row:hover .theme-row-label{color:var(--tx);}
.toggle-track{width:34px;height:19px;border-radius:10px;background:var(--bd2);position:relative;transition:background .3s;flex-shrink:0;}
[data-theme=dark] .toggle-track{background:var(--cyan);}
.toggle-thumb{width:15px;height:15px;border-radius:50%;background:var(--sur);position:absolute;top:2px;left:2px;transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 4px rgba(0,0,0,.25);}
[data-theme=dark] .toggle-thumb{transform:translateX(15px);}

/* ===================== MAIN ===================== */
#main{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden;}

#topbar{
  padding:0 24px;height:52px;
  box-shadow:0 1px 0 var(--bd),0 2px 8px rgba(0,0,0,.04);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;background:var(--sur);
}
#page-title{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.2px;}
/* ETL icon button states (uses .notif-btn as base) */
.etl-ok{border-color:var(--c-success-b) !important;color:#22c55e !important;}
.etl-ok:hover{border-color:#22c55e !important;background:var(--c-success-dim) !important;}
.etl-err{border-color:var(--c-danger-b) !important;color:#ef4444 !important;}
.etl-err:hover{border-color:#ef4444 !important;background:var(--c-danger-dim) !important;}
.etl-idle{border-color:var(--c-warning-b) !important;color:#f59e0b !important;}
.etl-idle:hover{border-color:#f59e0b !important;background:var(--c-warning-dim) !important;}
.etl-sync{border-color:var(--cyan-b) !important;color:var(--cyan) !important;}
.etl-sync svg{animation:spin .8s linear infinite;}

#content{
  flex:1;overflow-y:auto;padding:0;min-height:0;
  animation:fadeIn .2s ease;
}
#content.padded{padding:20px 24px;}

/* NOTIFICATION BELL */
.notif-btn{width:32px;height:32px;border-radius:6px;border:1px solid var(--bd);background:transparent;color:var(--tx2);cursor:pointer;transition:width .3s cubic-bezier(.4,0,.2,1),background .2s,border-color .2s,color .2s;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;overflow:hidden;white-space:nowrap;}
/* Bell keeps overflow:visible so badge renders outside button bounds */
#notif-bell{overflow:visible;}
#adm-notif-bell{overflow:visible;}
#etl-label{display:inline-block;max-width:0;overflow:hidden;opacity:0;font-size:11px;font-weight:600;font-family:'Inter',sans-serif;vertical-align:middle;transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-left .3s;}
#etl-btn.etl-expanded{width:auto;padding:0 10px;}
#etl-btn.etl-expanded #etl-label{max-width:120px;opacity:1;margin-left:5px;}
.notif-btn svg{stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.notif-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.notif-btn.has-alerts{border-color:#ef4444;color:#ef4444;}
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;border-radius:8px;background:#ef4444;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--sur);padding:0 3px;font-family:'Inter',sans-serif;line-height:1;}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--sur);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shadow-lg);z-index:9000;width:320px;overflow:hidden;}
.notif-hdr{padding:10px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--mu);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;}
.notif-hdr-clr{font-size:10px;font-weight:600;padding:3px 8px;border-radius:5px;border:1px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none;transition:all .15s;}
.notif-hdr-clr:hover{border-color:#ef4444;color:#ef4444;}
.notif-list{max-height:320px;overflow-y:auto;}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bd);}
.notif-item:last-child{border-bottom:none;}
.notif-item-body{flex:1;min-width:0;}
.notif-item-time{font-size:10px;color:var(--mu);margin-bottom:3px;}
.notif-item-msg{color:#ef4444;font-size:11px;line-height:1.5;word-break:break-word;user-select:text;cursor:text;}
.notif-item-dismiss{flex-shrink:0;width:18px;height:18px;border-radius:4px;border:1px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .15s;margin-top:1px;}
.notif-item-dismiss:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.notif-empty{padding:24px;text-align:center;color:var(--mu);font-size:12px;}

/* logo theme helpers */
.logo-light-only{height:14px;width:auto;opacity:0.55;}
.logo-dark-only{height:14px;width:auto;opacity:0.55;display:none;}
[data-theme=dark] .logo-light-only{display:none;}
[data-theme=dark] .logo-dark-only{display:inline;}