:root{--bg-color:#f0f4f8;--text-color:#333;--accent-color:#0077b6;--panel-bg:#fff;--header-bg:#2c3e50}body{font-family:Roboto,sans-serif;margin:0;height:100%;padding:0;background-color:var(--bg-color);color:var(--text-color);transition:all .3s ease;overflow:auto}.container{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;height:100vh}header{grid-column:1/3;background-color:var(--header-bg);padding:10px 20px;display:flex;justify-content:space-between;align-items:center}.logo{font-size:24px;font-weight:700;color:var(--accent-color)}.bg-red-300{background-color:#ff8791}.bg-yellow-300{background-color:#ffe387}.bg-green-300{background-color:#7ef299}.progress-bar{height:4px;background-color:#4caf50;border-radius:2px;transition:width .3s ease}.user-menu{position:relative;display:inline-block}.user-menu-content{display:none;position:absolute;right:0;background-color:var(--panel-bg);min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;border-radius:4px}.user-menu-content a{color:var(--text-color);padding:12px 16px;text-decoration:none;display:block}.user-menu-content a:hover{background-color:hsla(0,0%,100%,.1)}.user-menu:hover .user-menu-content{display:block}.left-nav{position:fixed;background-color:var(--panel-bg);padding:20px;transition:width .3s ease;overflow:auto;width:200px}.left-nav a{display:flex;align-items:center;color:var(--text-color);text-decoration:none;margin-bottom:15px;white-space:nowrap}.left-nav i{width:20px;text-align:center;margin-right:10px}.toggle-nav{position:absolute;top:10px;right:10px;font-size:18px}.main-content{padding:20px;overflow-y:auto;height:calc(100vh - 60px)}.tab-content{display:none}.tab-content.active{display:block}.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(250px,auto);gap:20px}.panel{position:relative;background-color:var(--panel-bg);border-radius:8px;padding:15px;box-shadow:0 4px 6px rgba(0,0,0,.1);cursor:move;display:flex;flex-direction:column;overflow:auto}.panel h2{margin-top:0;margin-bottom:10px}.panel-content{flex-grow:1;overflow:auto}.chart-container{height:200px;width:100%}.bottom-section{position:fixed;right:20px;bottom:20px;width:300px;background-color:var(--panel-bg);border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:auto}.bottom-section>div{padding:10px;display:none}.bottom-section>div.active{display:block}.alert{background-color:rgba(244,67,54,.1);color:#f44336}.notification{background-color:rgba(0,119,182,.1);color:#0077b6}.high{border-left:4px solid #f44336}.medium{border-left:4px solid #ff9800}.low{border-left:4px solid #4caf50}h2{color:var(--accent-color);margin-top:0;font-size:18px}.positive{color:#4caf50}.negative{color:#f44336}.mode-toggle{background:none;border:none;color:var(--text-color);cursor:pointer;font-size:18px;margin-right:15px}.chart{width:100%;height:150px;background-color:rgba(100,255,218,.1);border-radius:4px;margin-top:10px}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:8px;border-bottom:1px solid hsla(0,0%,100%,.1)}.tabs{display:flex;background-color:var(--panel-bg);padding:10px 10px 0;border-radius:8px 8px 0 0;margin-bottom:20px}.tab{padding:10px 20px;cursor:pointer;border-radius:4px 4px 0 0;margin-right:5px;background-color:var(--header-bg);border:1px solid var(--accent-color);border-bottom:none}.tab.active{background-color:var(--accent-color);color:var(--bg-color)}.close-tab{margin-left:10px;cursor:pointer}.toggle-nav{background:none;border:none;color:var(--text-color);font-size:24px;cursor:pointer;margin-right:15px}.left-nav.collapsed a span{display:none}.left-nav a span{margin-left:10px}body.light-mode{--bg-color:#f0f4f8;--text-color:#333;--accent-color:#0077b6;--panel-bg:#fff;--header-bg:#e9ecef}.notifications-panel{max-height:100%;overflow-y:auto}.notification{padding:10px;margin-bottom:5px;border-radius:4px}.login-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:var(--bg-color)}.login-container form{background-color:var(--panel-bg);padding:2rem;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.login-container h1{margin-bottom:1rem;color:var(--accent-color)}.login-container div{margin-bottom:1rem}.login-container label{display:block;margin-bottom:.5rem}.login-container input{width:100%;padding:.5rem;border:1px solid var(--text-color);border-radius:4px}.login-container button{background-color:var(--accent-color);color:var(--bg-color);padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer}.login-container button:hover{opacity:.9}.menu-item{display:block;padding:12px 16px;color:var(--text-color);text-decoration:none;cursor:pointer}.menu-item:hover{background-color:rgba(0,0,0,.1)}.user-form{max-width:500px;margin:0 auto}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:5px;font-weight:700}.form-group input[type=email],.form-group input[type=text],.form-group select{width:100%;padding:8px;border:1px solid var(--text-color);border-radius:4px}.btn-primary{background-color:var(--accent-color);color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer}.btn-primary:hover{opacity:.9}.nav-item{display:flex;align-items:center;color:var(--text-color);text-decoration:none;margin-bottom:15px;white-space:nowrap;cursor:pointer}.nav-item:hover{color:var(--accent-color)}.nav-item i{width:20px;text-align:center;margin-right:10px}