:root{--color-primary: #F5C518;--color-primary-dark: #D4A910;--color-bg-light: #FFF9E0;--color-white: #FFFFFF;--color-black: #000000;--color-text: #1A1A1A;--color-border: #E5E5E5;--color-gray: #F5F5F5;--color-gray-dark: #999999;--color-error: #DC3545;--color-success: #28A745;--color-info: #17A2B8;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--transition: all .2s ease}*{margin:0;padding:0;box-sizing:border-box}[data-env=dev]{--color-primary: #2563EB;--color-primary-dark: #1D4ED8;--color-bg-light: #EFF6FF}[data-env=dev] .content-area{background-color:#fff5f5}html,body,#root{width:100%;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-white);color:var(--color-text);line-height:1.5}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin-bottom:var(--spacing-md)}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.1rem}h6{font-size:1rem}p{margin-bottom:var(--spacing-md)}a{color:var(--color-primary-dark);text-decoration:none;transition:var(--transition)}a:hover{color:var(--color-primary)}.app-container{display:flex;height:100vh;width:100%;overflow:hidden}.sidebar{width:250px;background-color:var(--color-white);border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow-y:auto}.sidebar-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacing-md)}.heura-logo{width:40px;height:40px;background-color:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.5rem;color:var(--color-black);flex-shrink:0}.sidebar-logo-text{font-weight:700;font-size:1.1rem;color:var(--color-text)}.sidebar-nav{flex:1;padding:var(--spacing-lg) 0}.nav-item{padding:var(--spacing-md) var(--spacing-lg);color:var(--color-text);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:var(--spacing-md);border-left:3px solid transparent;text-decoration:none}.nav-item:hover{background-color:var(--color-gray);color:var(--color-primary-dark)}.nav-item.active{background-color:var(--color-bg-light);border-left-color:var(--color-primary-dark);color:var(--color-primary-dark);font-weight:600}.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar-footer{padding:var(--spacing-lg);border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--spacing-sm)}.user-info{font-size:.875rem;color:var(--color-gray-dark);word-break:break-all}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.top-bar{height:60px;background-color:var(--color-white);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-xl);flex-shrink:0}.top-bar-title{font-size:1.25rem;font-weight:600;color:var(--color-text)}.top-bar-actions{display:flex;align-items:center;gap:var(--spacing-lg)}.content-area{flex:1;overflow-y:auto;padding:var(--spacing-xl);background-color:var(--color-white)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none;white-space:nowrap}.btn-primary{background-color:var(--color-primary);color:var(--color-black);border:none}.btn-primary:hover{background-color:var(--color-primary-dark);box-shadow:var(--shadow-md)}.btn-primary:active{transform:translateY(1px)}.btn-primary:disabled{background-color:#ccc;cursor:not-allowed;opacity:.6}.btn-secondary{background-color:var(--color-gray);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:#eee}.btn-danger{background-color:var(--color-error);color:var(--color-white)}.btn-danger:hover{background-color:#bb2d3b;box-shadow:var(--shadow-md)}.btn-success{background-color:var(--color-success);color:var(--color-white)}.btn-success:hover{background-color:#1e8449;box-shadow:var(--shadow-md)}.btn-sm{padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem}.btn-block{width:100%}.form-group{margin-bottom:var(--spacing-lg)}.form-label{display:block;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-text);font-size:.95rem}.form-control{width:100%;padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;transition:var(--transition);background-color:var(--color-white);color:var(--color-text)}.form-control:focus{outline:none;border-color:var(--color-primary-dark);box-shadow:0 0 0 3px #f5c5181a}.form-control::placeholder{color:var(--color-gray-dark)}.form-control:disabled{background-color:var(--color-gray);cursor:not-allowed;opacity:.7}textarea.form-control{resize:vertical;min-height:120px}select.form-control{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231A1A1A' d='M1 4l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-md) center;padding-right:2.5rem}.form-error{color:var(--color-error);font-size:.875rem;margin-top:var(--spacing-xs)}.form-help{color:var(--color-gray-dark);font-size:.875rem;margin-top:var(--spacing-xs)}.card{background-color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:var(--transition)}.card:hover{box-shadow:var(--shadow-md)}.card-header{border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-md)}.card-title{font-size:1.1rem;font-weight:600;color:var(--color-text)}.card-body{padding:0}.card-footer{border-top:1px solid var(--color-border);padding-top:var(--spacing-md);margin-top:var(--spacing-md)}.table-container{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--color-border)}table{width:100%;border-collapse:collapse;background-color:var(--color-white)}thead{background-color:var(--color-gray);border-bottom:2px solid var(--color-border)}th{padding:var(--spacing-md);text-align:left;font-weight:600;color:var(--color-text);font-size:.875rem;white-space:nowrap}td{padding:var(--spacing-md);border-bottom:1px solid var(--color-border);font-size:.95rem}tbody tr:hover{background-color:var(--color-gray)}td input[type=text],td input[type=number]{padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.95rem;width:100%}td input[type=text]:focus,td input[type=number]:focus{outline:none;border-color:var(--color-primary-dark);box-shadow:0 0 0 2px #d4a91033}.cell-light-yellow{background-color:var(--color-bg-light)}.cell-dark-yellow{background-color:var(--color-primary)}.cell-disabled{background-color:var(--color-gray);color:var(--color-gray-dark)}.grid{display:grid;gap:var(--spacing-lg)}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-center{display:flex;justify-content:center;align-items:center}.flex-gap-sm{gap:var(--spacing-sm)}.flex-gap-md{gap:var(--spacing-md)}.flex-gap-lg{gap:var(--spacing-lg)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.kpi-card{background:linear-gradient(135deg,var(--color-white) 0%,var(--color-bg-light) 100%);border:1px solid var(--color-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.kpi-label{font-size:.875rem;color:var(--color-gray-dark);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.kpi-value{font-size:2rem;font-weight:700;color:var(--color-primary-dark)}.kpi-unit{font-size:.875rem;color:var(--color-gray-dark)}.unit-toggle{display:flex;gap:var(--spacing-xs);background-color:var(--color-gray);padding:var(--spacing-xs);border-radius:var(--radius-md)}.unit-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;background-color:transparent;color:var(--color-text);cursor:pointer;font-weight:600;border-radius:var(--radius-sm);font-size:.875rem;transition:var(--transition)}.unit-btn.active{background-color:var(--color-primary);color:var(--color-black)}.unit-btn:hover:not(.active){background-color:#eee}.search-select-container{position:relative;width:100%}.search-input{width:100%;padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;background-color:var(--color-white)}.search-input:focus{outline:none;border-color:var(--color-primary-dark);box-shadow:0 0 0 3px #f5c5181a}.dropdown-menu{position:absolute;top:calc(100% + var(--spacing-xs));left:0;right:0;background-color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-height:300px;overflow-y:auto;z-index:100}.dropdown-item{padding:var(--spacing-md);cursor:pointer;border-bottom:1px solid var(--color-border);transition:var(--transition);color:var(--color-text);font-size:.95rem}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background-color:var(--color-bg-light);color:var(--color-primary-dark)}.dropdown-item.selected{background-color:var(--color-bg-light);font-weight:600;color:var(--color-primary-dark)}.login-container{display:flex;height:100vh;width:100%;background:linear-gradient(135deg,#FFFFFF 0%,var(--color-bg-light) 100%)}.login-box{width:100%;max-width:400px;margin:auto;padding:var(--spacing-xl);background-color:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.login-header{text-align:center;margin-bottom:var(--spacing-2xl);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.login-logo{width:60px;height:60px;background-color:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:2rem;color:var(--color-black)}.login-title{font-size:1.75rem;font-weight:700;color:var(--color-text);margin:0}.login-subtitle{font-size:.95rem;color:var(--color-gray-dark)}.login-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.login-form .form-group{margin-bottom:0}.login-footer{text-align:center;font-size:.875rem;color:var(--color-gray-dark);margin-top:var(--spacing-xl)}.alert{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);font-size:.95rem;border-left:4px solid}.alert-error{background-color:#fce4e4;color:#722c2c;border-left-color:var(--color-error)}.alert-success{background-color:#e8f5e9;color:#1b5e20;border-left-color:var(--color-success)}.alert-info{background-color:#e3f2fd;color:#1565c0;border-left-color:var(--color-info)}.alert-warning{background-color:#fff3e0;color:#e65100;border-left-color:#ff9800}.spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-container{display:flex;justify-content:center;align-items:center;padding:var(--spacing-2xl);gap:var(--spacing-md)}.loading-text{color:var(--color-gray-dark);font-size:1rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background-color:var(--color-white);border-radius:var(--radius-lg);max-width:500px;width:90%;box-shadow:var(--shadow-lg)}.modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-text);margin:0}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-gray-dark);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.modal-close:hover{color:var(--color-text)}.modal-body{padding:var(--spacing-lg)}.modal-footer{padding:var(--spacing-lg);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--spacing-md)}.chart-container{background-color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-top:var(--spacing-lg)}.recharts-surface{background-color:transparent}.recharts-text{fill:var(--color-text)}.recharts-cartesian-axis-tick-value{fill:var(--color-gray-dark);font-size:12px}@media (max-width: 768px){.app-container{flex-direction:column}.sidebar{width:100%;height:60px;border-right:none;border-bottom:1px solid var(--color-border);flex-direction:row;overflow-x:auto}.sidebar-header{padding:0 var(--spacing-lg);border-bottom:none;border-right:1px solid var(--color-border)}.sidebar-nav{flex:1;padding:0;display:flex;overflow-x:auto}.nav-item{padding:0 var(--spacing-lg);border-left:none;border-bottom:3px solid transparent}.nav-item.active{border-left:none;border-bottom-color:var(--color-primary-dark)}.sidebar-footer{display:none}.content-area{padding:var(--spacing-lg)}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}h1{font-size:1.75rem}h2{font-size:1.5rem}.login-box{max-width:90%;padding:var(--spacing-lg)}.table-container{font-size:.875rem}th,td{padding:var(--spacing-sm)}}@media (max-width: 480px){.top-bar{padding:0 var(--spacing-md)}.content-area{padding:var(--spacing-md)}h1{font-size:1.5rem}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.login-box{padding:var(--spacing-md)}.btn{width:100%}}