/* layout.css - separated from style.css */

#loading-screen{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;gap:16px}

.loading-bar{width:200px;height:2px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden}

.loading-bar-inner{height:100%;background:linear-gradient(90deg,var(--blue2),var(--blue3));border-radius:2px;animation:loadbar 1.5s ease-in-out infinite}

@keyframes loadbar{0%{width:0%;margin-left:0}50%{width:60%;margin-left:20%}100%{width:0%;margin-left:100%}}

.loading-text{font-size:13px;color:var(--text2);font-weight:500}

#login-screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:999;background:var(--bg)}

#login-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 40%,rgba(37,99,235,0.15),transparent)}

.login-box{position:relative;background:rgba(10,18,35,0.9);border:1px solid var(--border2);border-radius:20px;padding:40px 44px;width:380px;text-align:center;backdrop-filter:blur(20px);box-shadow:0 0 60px rgba(37,99,235,0.12)}

.brand-name{font-size:24px;font-weight:700;color:#fff;margin-bottom:4px;margin-top:12px}

.brand-sub{font-size:11px;color:var(--accent2);letter-spacing:3px;text-transform:uppercase;margin-bottom:24px}


.lbl{font-size:11px;color:var(--text2);text-align:left;display:block;margin-bottom:6px;font-weight:500}

.linput{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'Inter',sans-serif;font-size:13px;padding:11px 14px;outline:none;margin-bottom:12px;transition:all .2s}

.linput:focus{border-color:var(--blue);background:rgba(59,130,246,0.06);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}

.login-btn{width:100%;padding:12px;background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(37,99,235,0.3)}

.login-btn:hover{transform:translateY(-1px)}

.login-error{font-size:12px;color:var(--red);margin-top:10px;display:none}

.topbar{position:relative;z-index:10;background:rgba(5,9,20,0.8);border-bottom:1px solid var(--border);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);flex-shrink:0}

.tb-brand{display:flex;align-items:center;gap:12px}

.tb-name{font-size:14px;font-weight:700;color:#fff}

.tb-sub{font-size:9px;color:var(--accent2);letter-spacing:2px;text-transform:uppercase}

.topbar-right{display:flex;align-items:center;gap:10px}

.tb-tag{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--glass);border:1px solid var(--border);border-radius:20px;font-size:11px;color:var(--text2)}

.tb-clock{font-size:12px;font-weight:600;color:var(--blue3);padding:5px 12px;background:var(--glass);border:1px solid var(--border);border-radius:20px}

.gs-wrap{position:relative}

.gs-input{background:var(--glass);border:1px solid var(--border);border-radius:20px;color:var(--text);font-family:'Inter',sans-serif;font-size:12px;padding:6px 14px 6px 32px;width:200px;outline:none;transition:all .2s}

.gs-input:focus{border-color:var(--border2);width:260px;background:rgba(59,130,246,0.06)}

.gs-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:13px;pointer-events:none}

.gs-dd{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:rgba(10,18,35,0.98);border:1px solid var(--border2);border-radius:12px;z-index:200;max-height:300px;overflow-y:auto;display:none;backdrop-filter:blur(20px);box-shadow:0 16px 48px rgba(0,0,0,.5)}

.sr-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s}

.sr-item:hover{background:var(--glass2)}

.sr-item:last-child{border-bottom:none}

.sr-cat{font-size:9px;color:var(--accent2);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px;font-weight:600}

.sr-name{font-size:13px;color:var(--text);font-weight:500}

.sr-detail{font-size:11px;color:var(--text2);margin-top:1px}

.agent-av{width:38px;height:38px;background:linear-gradient(135deg,#1d4ed8,#3b82f6);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;margin-bottom:8px}

.agent-name{font-size:12px;font-weight:600;color:var(--text)}

.agent-grade{font-size:10px;color:var(--blue4);margin-top:2px}

.agent-mat{font-size:10px;color:var(--text3);margin-top:1px}

.sb-label{font-size:9px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;font-weight:600}

.sb-group{display:flex;flex-direction:column}

.sb-group-header{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;cursor:pointer;padding:8px 18px 4px;font-family:inherit;color:var(--text3);transition:color .15s}

.sb-group-header:hover{color:var(--text2)}

.sb-group-header:focus{outline:none}

.sb-group-header:focus-visible{outline:2px solid var(--blue3);outline-offset:-2px;border-radius:4px}

.sb-chevron{width:10px;height:10px;flex-shrink:0;opacity:.6;transition:transform .18s ease}

.sb-group.collapsed .sb-chevron{transform:rotate(-90deg)}

.sb-group-items{display:flex;flex-direction:column;overflow:hidden;transition:max-height .2s ease}

.sb-group.collapsed .sb-group-items{max-height:0!important}

.nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;cursor:pointer;font-size:12px;color:var(--text2);border-left:2px solid transparent;transition:all .15s;font-weight:500;width:100%;text-align:left;background:transparent;border-top:none;border-right:none;border-bottom:none;font-family:inherit}

.nav-item:hover{background:var(--glass);color:var(--text)}

.nav-item:focus{outline:none}

.nav-item:focus-visible{outline:2px solid var(--blue3);outline-offset:-2px;background:var(--glass)}

.sb-divider{border:none;border-top:1px solid var(--border);margin:6px 12px}

.logout-btn{margin:10px 12px 14px;padding:9px 14px;background:rgba(248,113,113,0.06);border:1px solid rgba(248,113,113,0.15);border-radius:10px;color:rgba(248,113,113,0.7);font-family:'Inter',sans-serif;font-size:11px;font-weight:500;cursor:pointer;width:calc(100% - 24px);text-align:left;transition:all .15s}

.logout-btn:hover{background:rgba(248,113,113,0.12);color:var(--red)}

.main{flex:1;overflow-y:auto;overflow-x:hidden;background:transparent;padding:24px;-webkit-overflow-scrolling:touch;scrollbar-color:rgba(99,160,255,0.3) transparent;scrollbar-width:thin}

.page{display:none}

.page-header{margin-bottom:24px}

.page-title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.3px}

.page-sub{font-size:12px;color:var(--text3);margin-top:4px}

.nav-item:active{background:var(--glass2)}

.sb-toggle{display:none;background:transparent;border:1px solid var(--border);color:var(--text2);width:36px;height:36px;border-radius:9px;cursor:pointer;align-items:center;justify-content:center;padding:0;margin-right:8px;transition:all .15s;font-family:inherit}

.sb-toggle:hover{background:var(--glass);color:var(--text);border-color:var(--border2)}

.sb-toggle:active{transform:scale(0.94)}

.sb-backdrop{display:none}