/* ── SIDEBAR ── */
#sidebar{width:var(--sw);background:var(--bg1);border-right:1px solid var(--bdr);height:100vh;position:fixed;top:0;left:0;display:flex;flex-direction:column;z-index:200;overflow-y:hidden;overflow-x:hidden;padding-bottom:50px;}
/* Credit footer sidebar */
#sidebar-credit{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:12px 10px;
  border-top:1px solid var(--bdr);
  text-align:center;
  font-size:10px;
  color:var(--txt4);
  font-family:var(--mono);
  letter-spacing:.4px;
  background:var(--bg1);
  z-index:5;
}

#sidebar-credit span{
  color:var(--amber);
}

/* Saat sidebar minimize */
#sidebar.minimized #sidebar-credit{
  font-size:8px;
  padding:10px 4px;
}

#sidebar.minimized #sidebar-credit span{
  display:block;
  margin-top:2px;
}
.sb-logo{padding:20px 20px 16px;border-bottom:1px solid var(--bdr);position:relative}
.sb-logo::after{content:'';position:absolute;bottom:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.logo-mark{font-family:var(--display);font-size:20px;font-weight:800;color:var(--amber);letter-spacing:-1px;display:flex;align-items:center;gap:8px}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:blink 2s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.logo-sub{font-size:10px;color:var(--txt3);margin-top:4px;letter-spacing:.5px;line-height:1.6}
.nav-sect{padding:13px 20px 4px;font-size:9px;color:var(--txt4);text-transform:uppercase;letter-spacing:1.2px;font-family:var(--mono);font-weight:600}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 20px;font-size:13px;color:var(--txt2);cursor:pointer;border-left:2px solid transparent;transition:all .15s;user-select:none}
.nav-item:hover{background:var(--bg2);color:var(--txt);border-left-color:var(--bdr3)}
.nav-item.active{background:var(--amber-dim);color:var(--amber);border-left-color:var(--amber)}
.nav-icon{width:15px;font-size:12px;flex-shrink:0;opacity:.7}
.nav-item.active .nav-icon{opacity:1}
.nav-badge{margin-left:auto;font-size:9px;font-family:var(--mono);background:var(--red-dim);color:var(--red);padding:1px 6px;border-radius:20px}
.nav-badge.ok{background:var(--green-dim);color:var(--green)}
.sb-user{padding:13px 20px;border-top:1px solid var(--bdr);display:flex;align-items:center;gap:10px;margin-top:auto}
.avatar{width:32px;height:32px;border-radius:8px;background:var(--amber-dim);border:1px solid var(--amber);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--mono);flex-shrink:0}
.u-name{font-size:12px;font-weight:600;color:var(--txt)}
.u-role{font-size:10px;color:var(--txt3);margin-top:2px;font-family:var(--mono)}

/* ── MAIN ── */
#main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;min-height:100vh;position:relative;z-index:1}
.topbar{height:var(--th);background:var(--bg1);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-title{font-family:var(--display);font-size:14px;font-weight:700;color:var(--txt);letter-spacing:-.2px}
.topbar-sep{color:var(--txt4);font-size:12px}
.topbar-bread{font-size:11px;color:var(--txt3);font-family:var(--mono)}
.topbar-right{display:flex;align-items:center;gap:8px}
.conn-indicator{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-family:var(--mono);color:var(--txt3);padding:3px 9px;border-radius:20px;background:var(--bg3);border:1px solid var(--bdr)}
.conn-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.conn-dot.conn-on{background:var(--green)}
.conn-dot.conn-off{background:var(--red);animation:blink 1.2s infinite}
.conn-dot.conn-warn{background:var(--yellow);animation:blink 1.2s infinite}
.pill-live{display:inline-flex;align-items:center;gap:5px;background:var(--green-dim);border:1px solid rgba(34,214,122,.2);color:var(--green);font-size:10px;font-family:var(--mono);padding:3px 9px;border-radius:20px}
.pill-live i{font-size:7px;animation:blink 1.2s infinite}
.topbar-clock{font-size:11px;color:var(--txt3);font-family:var(--mono)}
.icon-btn{width:30px;height:30px;border-radius:var(--rad);background:var(--bg3);border:1px solid var(--bdr);color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s;position:relative}
.icon-btn:hover{background:var(--bg4);color:var(--txt)}
.ndot{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--red);border:1px solid var(--bg1)}

/* ── PAGES ── */
.page{display:none;padding:20px 24px;animation:fadein .2s ease;overflow-y:auto}
.page.active{display:block}
/* insheet special: override display block → flex */
#pg-insheet.active{display:flex !important;padding:14px 20px}
@keyframes fadein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.pg-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--bdr)}
.pg-title{font-family:var(--display);font-size:22px;font-weight:800;color:var(--txt);letter-spacing:-.5px}
.pg-sub{font-size:12px;color:var(--txt3);margin-top:4px;font-family:var(--mono)}
.pg-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.ri-row:hover td{background:rgba(255,255,255,.035)}
.ri-row:active td{background:rgba(255,180,30,.07)}