:root{--bg-body:#f3f4f6;--bg-white:#fff;--text-primary:#333;--text-secondary:#8898aa;--vestro-blue:#005c81;--vestro-blue-dark:#004a66;--alert-bg:#ffecec;--alert-text:#d32f2f;--border-color:#e5e7eb}*{box-sizing:border-box;margin:0;padding:0;font-family:Roboto,Helvetica,Arial,sans-serif}body{background-color:var(--bg-body);height:100vh;overflow:hidden}.layout-wrapper{height:100%;display:flex}.sidebar{background-color:var(--bg-white);border-right:1px solid var(--border-color);flex-direction:column;width:240px;display:flex}.logo-area{border-bottom:1px solid var(--border-color);text-align:center;margin-bottom:10px;padding:20px}.logo{max-width:120px}.menu{flex-direction:column;display:flex}.menu-item{color:var(--text-secondary);cursor:pointer;border-left:4px solid #0000;align-items:center;gap:15px;padding:12px 20px;font-size:14px;text-decoration:none;transition:all .2s;display:flex}.menu-item i{font-size:1.2rem}.menu-item:hover{color:var(--vestro-blue);background-color:#f9fafb}.menu-item.active{color:var(--vestro-blue);border-left-color:var(--vestro-blue);background-color:#f0f9ff;font-weight:500}.content-area{background-color:var(--bg-body);flex-direction:column;flex:1;display:flex;overflow:hidden}.top-bar{background-color:var(--bg-white);border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;padding:15px 30px;display:flex}.user-welcome{color:var(--text-primary);font-size:1.1rem}.user-name{color:var(--vestro-blue);font-weight:700}.top-actions{color:var(--text-secondary);flex-shrink:0;align-items:center;gap:15px;display:flex}.logout-icon{cursor:pointer;font-size:1.4rem;transition:all .2s}.logout-icon:hover{color:#ef4444}.btn-refresh{border:1px solid var(--border-color);cursor:pointer;color:var(--vestro-blue);background:#fff;border-radius:6px;justify-content:center;align-items:center;padding:8px 15px;font-weight:500;transition:all .3s;display:flex}.btn-refresh:hover{background-color:#e0f2fe}.main-content{width:100%;height:100%;position:relative;overflow-y:auto}.main-content.cards-container{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-content:start;gap:20px;padding:25px;display:grid}.table-container{background-color:var(--bg-white);border:1px solid #eef0f2;border-radius:8px;margin:30px;padding:25px;overflow-x:auto;box-shadow:0 2px 5px #0000000d}.page-title{color:var(--vestro-blue);border-left:5px solid var(--vestro-blue);margin-bottom:20px;padding-left:15px;font-size:1.25rem;font-weight:700}.vestro-table{border-collapse:collapse;color:#444;width:100%;font-size:.9rem}.vestro-table thead tr{background-color:#f8f9fa;border-bottom:2px solid #eef0f2}.vestro-table th{text-align:left;color:#8898aa;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;padding:15px;font-size:.75rem;font-weight:700}.vestro-table td{vertical-align:middle;white-space:nowrap;border-bottom:1px solid #eef0f2;padding:15px}.vestro-table tbody tr:hover{background-color:#f0f9ff}.vestro-table tbody tr:last-child td{border-bottom:none}.loading-msg,.error-msg{text-align:center;color:#666;width:100%;padding:50px;font-size:1.1rem}.error-msg{color:#e53e3e}.vestro-card{background-color:var(--bg-white);border:1px solid #eef0f2cc;border-radius:16px;justify-content:space-between;height:240px;padding:20px;transition:transform .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000000f}.vestro-card:before{content:"";background:var(--vestro-blue);opacity:.8;width:6px;height:100%;position:absolute;top:0;left:0}.vestro-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px #0000001a}.card-options{color:#cbd5e0;cursor:pointer;font-size:1.2rem;transition:color .2s;position:absolute;top:15px;right:15px}.card-options:hover{color:var(--vestro-blue)}.card-info{z-index:2;flex-direction:column;justify-content:space-between;width:58%;display:flex}.tank-header{margin-bottom:5px}.tank-id-title{color:var(--text-primary);margin-bottom:2px;font-size:1.15rem;font-weight:800;line-height:1.2}.tank-base{color:var(--text-secondary);margin-bottom:8px;font-size:.8rem;font-weight:500}.product-name{color:var(--vestro-blue);text-transform:uppercase;align-items:center;gap:5px;margin-bottom:6px;font-size:1rem;font-weight:700;display:flex}.capacity-info{color:#718096;font-size:.8rem;line-height:1.6}.status-section{margin-top:auto}.status-label{color:#a0aec0;text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:600}.percentage-text{letter-spacing:-1px;margin:2px 0 8px;font-size:2.2rem;font-weight:900;line-height:1}.alert-badge{border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:.75rem;font-weight:700;display:inline-flex;box-shadow:0 2px 4px #0000000d}.card-visual{justify-content:center;align-items:flex-end;width:38%;display:flex;position:relative}.tank-svg-container{filter:drop-shadow(0 8px 15px #0000001a);width:100%;height:auto;max-height:180px}.submenu .menu-item{background-color:#f8f9fa;border-left:3px solid #e5e7eb;padding:10px 20px 10px 45px;font-size:.9rem}.submenu .menu-item:hover{border-left-color:var(--vestro-blue);background:#f1f5f9}.menu-group{flex-direction:column;display:flex}.report-header{border:1px solid var(--border-color);background:#fff;border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;padding:15px 25px;display:flex}.report-grid{grid-template-columns:2fr 1fr;gap:20px;height:auto;min-height:calc(100vh - 160px);display:grid}.charts-section{flex-direction:column;gap:20px;height:100%;display:flex}.chart-card{background:#fff;border:1px solid #eef0f2;border-radius:8px;flex-direction:column;flex:1;padding:15px;display:flex;position:relative;box-shadow:0 2px 4px #0000000d}.table-section{background:#fff;border:1px solid #eef0f2;border-radius:8px;flex-direction:column;height:100%;display:flex;overflow:hidden;box-shadow:0 2px 4px #0000000d}@media (width<=1100px){.report-grid{grid-template-columns:1fr;height:auto;overflow-y:visible}.charts-section{height:600px}.table-section{height:400px}}.dash-grid-top{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;min-height:300px;margin-bottom:20px;display:grid}.dash-grid-bottom{grid-template-columns:4fr 6fr;gap:20px;min-height:350px;display:grid}.dash-card{background:#fff;border-top:3px solid #0000;border-radius:4px;flex-direction:column;padding:15px;display:flex;box-shadow:0 1px 3px #0000001a}.dash-title{color:#005c81;text-transform:uppercase;margin-bottom:15px;font-size:.85rem;font-weight:700}.chart-box{flex:1;width:100%;min-height:0;position:relative}.btn-export{color:var(--text-secondary);cursor:pointer;background:#f8f9fa;border:1px solid #eef0f2;border-radius:6px;justify-content:center;align-items:center;width:30px;height:30px;font-size:1.1rem;transition:all .2s;display:flex}.btn-export:hover{background:var(--vestro-blue);color:#fff;border-color:var(--vestro-blue)}.btn-export.pdf:hover{background:#e11d48;border-color:#e11d48}.btn-export.csv:hover{background:#059669;border-color:#059669}@media (width<=1100px){.dash-grid-top,.dash-grid-bottom{grid-template-columns:1fr;height:auto}.dash-card{height:300px;margin-bottom:20px}}.sidebar{transition:width .3s;position:relative}.sidebar-toggle{background:var(--vestro-blue);color:#fff;cursor:pointer;z-index:100;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:transform .3s;display:flex;position:absolute;top:30px;right:-12px;box-shadow:0 2px 5px #0000001a}.sidebar-toggle:hover{background-color:var(--vestro-blue-dark)}.sidebar.collapsed{width:80px}.sidebar.collapsed .link-text,.sidebar.collapsed .arrow-icon,.sidebar.collapsed .user-welcome{opacity:0;display:none}.sidebar.collapsed .logo{max-width:40px;margin-left:5px}.sidebar.collapsed .logo-area{padding:20px 10px}.sidebar.collapsed .menu-item{justify-content:center;padding:15px}.sidebar.collapsed .menu-item i{margin:0;font-size:1.6rem}.sidebar.collapsed .sidebar-toggle{transform:rotate(180deg)}.sidebar.collapsed .submenu{display:none!important}.filter-bar{align-items:center;gap:10px;display:flex}.filter-select{color:var(--text-primary);cursor:pointer;background-color:#fff;border:1px solid #ddd;border-radius:6px;outline:none;padding:8px 12px;font-size:.85rem;font-weight:500;transition:all .2s;box-shadow:0 1px 2px #0000000d}.filter-select:hover{border-color:var(--vestro-blue);background-color:#fcfcfc}.filter-select:focus{border-color:var(--vestro-blue);box-shadow:0 0 0 2px #005c811a}.mobile-nav-toggle{display:none}.tank-dropdown-menu{z-index:100;background:#fff;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;min-width:130px;display:flex;position:absolute;top:40px;right:15px;overflow:hidden;box-shadow:0 4px 12px #0000001a}.tank-dropdown-menu a{color:#4a5568;align-items:center;gap:8px;padding:10px 15px;font-size:.85rem;text-decoration:none;transition:background .2s;display:flex}.tank-dropdown-menu a:hover{color:var(--vestro-blue);background:#f7fafc}.tank-dropdown-menu a i{font-size:1rem}