
/* File: nw-sidebar.css */

/* Location: /shared-components/sidebar/nw-sidebar.css */



:root {

  --nws-bg:#0C0E14;--nws-bg-hover:#161922;--nws-bg-active:#1E222E;--nws-border:#1E222E;

  --nws-text:#8B92A5;--nws-text-dim:#555B6E;--nws-text-bright:#E8ECF4;--nws-surface:#12151C;

  --nws-accent:#0ea5e9;--nws-accent-dim:rgba(14,165,233,0.12);

  --nws-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --nws-font-mono:'JetBrains Mono','SF Mono','Fira Code',monospace;

  --nws-fs-body:13px;--nws-fs-small:11px;--nws-fs-tiny:9px;--nws-fs-label:10px;

  --nws-width:260px;--nws-width-col:52px;--nws-radius:6px;

  --nws-transition:all 0.18s cubic-bezier(0.4,0,0.2,1);

}

:root[data-nw-theme="light"]{--nws-bg:#fff;--nws-bg-hover:#F1F5F9;--nws-bg-active:#E2E8F0;--nws-border:#E5E7EB;--nws-text:#64748B;--nws-text-dim:#94A3B8;--nws-text-bright:#0F172A;--nws-surface:#F8FAFC;}

:root[data-nw-fontsize="S"]{--nws-fs-body:12px;--nws-fs-small:10px;--nws-fs-tiny:8px;--nws-fs-label:9px;}

:root[data-nw-fontsize="M"]{--nws-fs-body:13px;--nws-fs-small:11px;--nws-fs-tiny:9px;--nws-fs-label:10px;}

:root[data-nw-fontsize="L"]{--nws-fs-body:15px;--nws-fs-small:13px;--nws-fs-tiny:10px;--nws-fs-label:11px;}

:root[data-nw-fontsize="XL"]{--nws-fs-body:17px;--nws-fs-small:14px;--nws-fs-tiny:11px;--nws-fs-label:12px;}

@media(prefers-reduced-motion:reduce){:root{--nws-transition:none;}}

:root[data-nw-reduced-motion="true"]{--nws-transition:none;}

:root[data-nw-high-contrast="true"]{--nws-text:var(--nws-text-bright);--nws-text-dim:var(--nws-text);--nws-border:var(--nws-text);}



#nw-sidebar{position:fixed;top:0;left:0;width:var(--nws-width);height:100vh;background:var(--nws-bg);border-right:1px solid var(--nws-border);display:flex;flex-direction:column;font-family:var(--nws-font);font-size:var(--nws-fs-body);color:var(--nws-text);z-index:9000;transition:width 0.18s cubic-bezier(0.4,0,0.2,1);overflow:hidden;}

#nw-sidebar.nws-collapsed{width:var(--nws-width-col);}

body.nw-has-sidebar{margin-left:var(--nws-width);transition:margin-left 0.18s cubic-bezier(0.4,0,0.2,1);}

body.nw-has-sidebar.nw-sidebar-collapsed{margin-left:var(--nws-width-col);}



.nws-header{padding:12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--nws-border);min-height:50px;gap:8px;flex-shrink:0;}

.nws-logo-area{display:flex;align-items:center;gap:10px;overflow:hidden;min-width:0;}

.nws-logo-mark{width:28px;height:28px;border-radius:6px;background:var(--nws-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff;flex-shrink:0;letter-spacing:-0.5px;}

.nws-logo-text{font-size:calc(var(--nws-fs-body) + 2px);font-weight:600;color:var(--nws-text-bright);white-space:nowrap;}

.nws-collapse-btn{width:28px;height:28px;border:1px solid var(--nws-border);border-radius:var(--nws-radius);background:transparent;color:var(--nws-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--nws-transition);padding:0;}

.nws-collapse-btn:hover{border-color:var(--nws-accent);color:var(--nws-accent);background:var(--nws-accent-dim);}

.nws-collapse-btn svg{width:16px;height:16px;}

.nws-collapsed .nws-hide{display:none!important;}



.nws-search{padding:8px 10px;border-bottom:1px solid var(--nws-border);flex-shrink:0;}

.nws-search-wrap{display:flex;align-items:center;gap:8px;background:var(--nws-bg-hover);border:1px solid var(--nws-border);border-radius:var(--nws-radius);padding:6px 10px;transition:var(--nws-transition);}

.nws-search-wrap:focus-within{border-color:var(--nws-accent);}

.nws-search-wrap .nws-icon{flex-shrink:0;color:var(--nws-text-dim);}

.nws-search-wrap .nws-icon svg{width:14px;height:14px;}

.nws-search-input{background:transparent;border:none;outline:none;color:var(--nws-text-bright);font-family:var(--nws-font);font-size:var(--nws-fs-body);width:100%;min-width:0;}

.nws-search-input::placeholder{color:var(--nws-text-dim);}

.nws-collapsed .nws-search-wrap{padding:6px;justify-content:center;}



.nws-actions{padding:4px 6px;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--nws-border);flex-shrink:0;}

.nws-action-btn{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--nws-radius);cursor:pointer;transition:var(--nws-transition);font-size:var(--nws-fs-body);color:var(--nws-text);border:none;background:transparent;width:100%;text-align:left;font-family:var(--nws-font);position:relative;text-decoration:none;}

.nws-action-btn:hover{background:var(--nws-bg-hover);color:var(--nws-text-bright);}

.nws-action-btn .nws-icon svg{width:18px;height:18px;}

.nws-collapsed .nws-action-btn{justify-content:center;padding:8px;}

.nws-notif-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;position:absolute;top:4px;left:26px;}

.nws-collapsed .nws-notif-dot{left:auto;top:4px;right:6px;}



.nws-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 0;scrollbar-width:thin;scrollbar-color:var(--nws-border) transparent;}

.nws-body::-webkit-scrollbar{width:4px;}

.nws-body::-webkit-scrollbar-thumb{background:var(--nws-border);border-radius:4px;}



.nws-label{font-size:var(--nws-fs-label);font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--nws-text-dim);padding:6px 16px 4px;}

.nws-section{padding:2px 6px;}

.nws-section-header{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;cursor:pointer;border-radius:var(--nws-radius);transition:var(--nws-transition);user-select:none;}

.nws-section-header:hover{background:var(--nws-bg-hover);}

.nws-section-left{display:flex;align-items:center;gap:8px;}

.nws-section-left .nws-icon svg{width:14px;height:14px;color:var(--nws-accent);opacity:0.7;}

.nws-section-title{font-size:var(--nws-fs-label);font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:var(--nws-text-dim);white-space:nowrap;}

.nws-chevron{width:12px;height:12px;color:var(--nws-text-dim);transition:transform 0.15s ease;}

.nws-chevron svg{width:12px;height:12px;}

.nws-chevron.nws-open{transform:rotate(90deg);}

.nws-section-items{display:none;}

.nws-section-items.nws-expanded{display:block;}



.nws-dapp{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 22px;border-radius:var(--nws-radius);cursor:pointer;transition:var(--nws-transition);position:relative;text-decoration:none;color:var(--nws-text);font-size:var(--nws-fs-body);font-family:var(--nws-font);}

.nws-dapp:hover{background:var(--nws-bg-hover);color:var(--nws-text-bright);}

.nws-dapp.nws-active{background:var(--nws-accent-dim);color:var(--nws-accent);}

.nws-dapp.nws-active::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--nws-accent);border-radius:2px;}

.nws-dapp .nws-icon svg{width:16px;height:16px;flex-shrink:0;}

.nws-dapp-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}

.nws-dapp-badge{font-size:var(--nws-fs-tiny);font-family:var(--nws-font-mono);padding:1px 5px;border-radius:3px;background:var(--nws-bg-hover);color:var(--nws-text-dim);margin-left:auto;flex-shrink:0;text-transform:uppercase;letter-spacing:0.5px;}

.nws-dapp-pin{margin-left:auto;color:var(--nws-accent);opacity:0.4;}

.nws-dapp-pin svg{width:12px;height:12px;}

.nws-collapsed .nws-dapp{padding:8px;justify-content:center;}

.nws-collapsed .nws-dapp-badge,.nws-collapsed .nws-dapp-pin,.nws-collapsed .nws-dapp.nws-active::before{display:none;}



.nws-tip{position:relative;}

.nws-tip::after{content:attr(data-tip);display:none;position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--nws-surface);border:1px solid var(--nws-border);color:var(--nws-text-bright);font-size:var(--nws-fs-small);padding:4px 10px;border-radius:5px;white-space:nowrap;z-index:9999;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,0.2);}

.nws-collapsed .nws-tip:hover::after{display:block;}



.nws-footer{border-top:1px solid var(--nws-border);padding:10px;flex-shrink:0;}

.nws-user{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:var(--nws-radius);cursor:pointer;transition:var(--nws-transition);text-decoration:none;color:inherit;}

.nws-user:hover{background:var(--nws-bg-hover);}

.nws-avatar{width:32px;height:32px;border-radius:50%;background:var(--nws-bg-hover);border:2px solid var(--nws-accent);display:flex;align-items:center;justify-content:center;font-size:var(--nws-fs-body);font-weight:700;color:var(--nws-accent);flex-shrink:0;overflow:hidden;}

.nws-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

.nws-user-info{overflow:hidden;min-width:0;}

.nws-user-name{font-size:var(--nws-fs-body);font-weight:600;color:var(--nws-text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.nws-user-handle{font-size:var(--nws-fs-tiny);font-family:var(--nws-font-mono);color:var(--nws-text-dim);}

.nws-user-score{margin-left:auto;text-align:right;flex-shrink:0;}

.nws-score-value{font-size:var(--nws-fs-small);font-weight:600;font-family:var(--nws-font-mono);color:var(--nws-accent);}

.nws-score-label{font-size:var(--nws-fs-tiny);color:var(--nws-text-dim);text-transform:uppercase;letter-spacing:0.5px;}

.nws-collapsed .nws-user{justify-content:center;}



.nws-login{flex:1;display:flex;flex-direction:column;padding:24px 14px;gap:14px;overflow-y:auto;}

.nws-login-icon{text-align:center;}

.nws-login-icon svg{width:40px;height:40px;color:var(--nws-accent);}

.nws-login-title{font-size:calc(var(--nws-fs-body) + 3px);font-weight:600;color:var(--nws-text-bright);text-align:center;}

.nws-login-sub{font-size:var(--nws-fs-small);color:var(--nws-text-dim);text-align:center;line-height:1.5;}

.nws-field{display:flex;flex-direction:column;gap:4px;}

.nws-field-label{font-size:var(--nws-fs-label);font-weight:500;color:var(--nws-text-dim);text-transform:uppercase;letter-spacing:0.5px;}

.nws-field-input{background:var(--nws-bg-hover);border:1px solid var(--nws-border);border-radius:var(--nws-radius);padding:9px 12px;font-family:var(--nws-font);font-size:var(--nws-fs-body);color:var(--nws-text-bright);outline:none;transition:var(--nws-transition);}

.nws-field-input:focus{border-color:var(--nws-accent);}

.nws-field-input::placeholder{color:var(--nws-text-dim);}

.nws-login-btn{padding:10px;border:none;border-radius:var(--nws-radius);background:var(--nws-accent);color:#fff;font-family:var(--nws-font);font-size:var(--nws-fs-body);font-weight:600;cursor:pointer;transition:var(--nws-transition);}

.nws-login-btn:hover{filter:brightness(1.1);}

.nws-login-divider{display:flex;align-items:center;gap:10px;color:var(--nws-text-dim);font-size:var(--nws-fs-tiny);text-transform:uppercase;letter-spacing:1px;}

.nws-login-divider::before,.nws-login-divider::after{content:'';flex:1;height:1px;background:var(--nws-border);}

.nws-login-register{text-align:center;font-size:var(--nws-fs-small);color:var(--nws-text-dim);}

.nws-login-register a{color:var(--nws-accent);text-decoration:none;font-weight:500;}

.nws-login-register a:hover{text-decoration:underline;}

.nws-login-footer{margin-top:auto;text-align:center;font-size:var(--nws-fs-tiny);color:var(--nws-text-dim);font-family:var(--nws-font-mono);letter-spacing:0.5px;}

.nws-collapsed .nws-login{padding:16px 6px;align-items:center;}



.nws-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}

.nws-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

.nws-gf-img{display:inline-block;vertical-align:middle;filter:brightness(0) invert(70%);transition:filter 0.15s ease;}

:root[data-nw-theme="light"] .nws-gf-img{filter:invert(44%) sepia(10%) saturate(897%) hue-rotate(182deg) brightness(95%) contrast(88%);}

.nws-dapp:hover .nws-gf-img,.nws-action-btn:hover .nws-gf-img{filter:brightness(0) invert(90%);}

:root[data-nw-theme="light"] .nws-dapp:hover .nws-gf-img,:root[data-nw-theme="light"] .nws-action-btn:hover .nws-gf-img{filter:invert(8%) sepia(10%) saturate(300%) hue-rotate(188deg) brightness(20%) contrast(95%);}

.nws-dapp.nws-active .nws-gf-img{filter:invert(52%) sepia(98%) saturate(1200%) hue-rotate(176deg) brightness(98%) contrast(96%);}



@media(max-width:768px){

  #nw-sidebar{transform:translateX(-100%);box-shadow:4px 0 24px rgba(0,0,0,0.3);}

  #nw-sidebar.nws-mobile-open{transform:translateX(0);}

  body.nw-has-sidebar{margin-left:0;}

  body.nw-has-sidebar.nw-sidebar-collapsed{margin-left:0;}

  .nws-mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:8999;display:none;}

  .nws-mobile-overlay.nws-visible{display:block;}

}

