body{margin:0;padding:0}.layout-wrapper{display:flex;height:100vh;background-color:#eef7f2;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#333}.sidebar{width:250px;background:#fbfdfc;display:flex;flex-direction:column;border-right:1px solid #eef0f2}.logo{padding:24px;font-size:1.2rem;font-weight:700;display:flex;align-items:center;gap:10px}.menu{flex:1;padding:0 16px;display:flex;flex-direction:column;gap:8px}.menu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;color:#666;border-radius:8px;font-weight:500}.menu-item .icon{font-size:1.3rem;display:flex;align-items:center}.menu-item:hover{background:#f8f9fa}.menu-item.active{background:#e8f9ee;color:#00e676}.menu-dropdown{display:flex;flex-direction:column}.dropdown-toggle{width:100%;justify-content:space-between;background:none;border:none;cursor:pointer;font-size:1rem;font-family:inherit;padding:12px 16px}.menu-left{display:flex;align-items:center;gap:12px}.chevron{font-size:1.2rem;transition:transform .3s ease}.chevron.rotate{transform:rotate(180deg)}.submenu{display:flex;flex-direction:column;padding-left:38px;margin-top:2px;gap:4px}.submenu-item{display:block;padding:10px 12px;text-decoration:none;color:#777;border-radius:8px;font-size:.9rem;font-weight:500;transition:all .2s}.submenu-item:hover{background:#e8f9ee;color:#00e676}.submenu-item.active{color:#00e676;background:#e8f9ee;font-weight:600}.user-profile{padding:20px;border-top:1px solid #eef0f2;display:flex;align-items:center;gap:12px}.avatar{width:40px;height:40px;border-radius:50%;background:#ffbc9b;display:flex;align-items:center;justify-content:center;font-weight:700}.user-info{flex:1}.user-info .name{font-size:.9rem;font-weight:600}.user-info .role{font-size:.8rem;color:#888}.logout-btn{background:transparent;border:none;padding:5px;color:#888;cursor:pointer;display:flex;align-items:center;font-size:1.2rem;transition:color .2s}.logout-btn:hover{color:#ff5252}.top-actions{display:flex;align-items:center}.icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid #eef0f2;background:#fff;font-size:1.1rem;cursor:pointer}.main-content{flex:1;display:flex;flex-direction:column;overflow-y:auto}.greeting-wrapper{display:flex;align-items:center;gap:15px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:#f7fbf8;border-bottom:1px solid #eef0f2}.breadcrumb{display:flex;align-items:center;font-size:.9rem;color:#888}.breadcrumb-item{text-decoration:none;color:#888;transition:color .2s}.breadcrumb-item.active{color:#333;font-weight:600}.breadcrumb-separator{margin:0 10px;color:#ccc}.header-right{display:flex;align-items:center;gap:20px}.user-profile-top{display:flex;align-items:center;gap:12px;padding-left:20px;border-left:1px solid #eef0f2;height:40px}.user-info-text{display:flex;flex-direction:column;justify-content:center;text-align:right;line-height:1.2}.user-info-text .name{font-size:.85rem;font-weight:700;color:#333;white-space:nowrap}.user-info-text .role{font-size:.75rem;color:#00e676;font-weight:600;margin-top:2px}.avatar{width:38px;height:38px;border-radius:10px;background:#e8f9ee;color:#00e676;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;flex-shrink:0}.greeting-section{margin-bottom:25px}.date{color:#888;font-size:.9rem;margin-bottom:5px}.topbar h1{margin:0;font-size:1.8rem;font-weight:700}.text-green{color:#00e676}.top-actions{display:flex;gap:15px}.content-slot{padding:30px 40px}.fab-btn{position:fixed;bottom:30px;right:30px;width:60px;height:60px;border-radius:50%;background:#00e676;color:#fff;font-size:2rem;border:none;box-shadow:0 4px 15px #00e67666;cursor:pointer;display:flex;align-items:center;justify-content:center}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:25px}.card{background:#fbfdfc;border-radius:16px;padding:24px;box-shadow:0 4px 15px #00000005}.icon-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:15px}.bg-green-light{background:#e8f9ee;color:#00e676}.bg-blue-light{background:#e8f0fe;color:#4285f4}.bg-purple-light{background:#f3e8fe;color:#a142f4}.card-title{color:#888;font-size:.9rem;margin-bottom:5px}.card-value{font-size:2rem;font-weight:700;margin-bottom:15px}.unit{font-size:1rem;color:#888;font-weight:400}.card-trend{font-size:.85rem;font-weight:500}.bottom-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.card-header h3{margin:0 0 5px;font-size:1.1rem}.card-header p{margin:0;color:#888;font-size:.85rem}.header-action{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.page-title{margin:0;font-size:1.5rem;color:#333;font-weight:700}.page-subtitle{margin:5px 0 0;color:#888;font-size:.9rem}.btn{padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:.95rem;transition:all .2s;font-family:inherit}.btn-primary{background:#00e676;color:#fff}.btn-primary:hover{background:#00c853;box-shadow:0 4px 10px #00e6764d}.icon-plus{font-size:1.2rem}.table-card{background:#fff;border-radius:12px;box-shadow:0 4px 15px #00000008;overflow:hidden}.table-responsive{overflow-x:auto;width:100%}.data-table{width:100%;border-collapse:collapse;text-align:left}.data-table th{background:#f8fbf9;padding:16px 20px;color:#666;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #eef0f2}.data-table td{padding:16px 20px;border-bottom:1px solid #eef0f2;font-size:.95rem;color:#444;vertical-align:middle}.data-table tbody tr:hover{background:#fafdfb}.text-center{text-align:center}.text-right{text-align:right}.badge{padding:6px 14px;border-radius:30px;font-size:.8rem;font-weight:600;display:inline-block}.badge.active{background:#e8f9ee;color:#00e676}.action-buttons{display:flex;justify-content:center;gap:8px}.btn-action{padding:8px;border-radius:8px;background:transparent;border:none;cursor:pointer;font-size:1.2rem;display:inline-flex;align-items:center;justify-content:center;transition:.2s}.btn-action.edit{color:#4285f4;background:#f0f4ff}.btn-action.edit:hover{background:#dce6ff}.btn-action.delete{color:#ff5252;background:#ffebee}.btn-action.delete:hover{background:#ffcdd2}.hamburger-btn,.close-sidebar,.sidebar-overlay{display:none}@media (max-width: 1024px){.cards-grid{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr}}@media (max-width: 768px){.cards-grid{grid-template-columns:1fr}.content-slot{padding:20px}.topbar{padding:20px;align-items:flex-start;flex-direction:column;gap:15px}.topbar h1{font-size:1.4rem}.header-action{flex-direction:column;align-items:flex-start;gap:15px}.sidebar{position:fixed;left:-260px;top:0;height:100%;z-index:1000;transition:left .3s ease;box-shadow:4px 0 15px #0000000d}.sidebar.open{left:0}.hamburger-btn{display:block;background:none;border:none;font-size:1.8rem;cursor:pointer;color:#333;padding:0}.close-sidebar{display:block;background:none;border:none;font-size:1.2rem;cursor:pointer;margin-left:auto;color:#888}.sidebar-overlay{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:999}.fab-btn{bottom:20px;right:20px;width:50px;height:50px;font-size:1.5rem}.form-row{grid-template-columns:1fr;gap:0}}.form-card{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 15px #00000008}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:8px;font-weight:600;color:#444;font-size:.9rem}.text-danger{color:#ff5252}.form-control{width:100%;padding:12px 16px;border:1px solid #dcdcdc;border-radius:8px;font-size:.95rem;font-family:inherit;transition:all .2s;box-sizing:border-box;background-color:#fff;color:#333}.form-control:focus{outline:none;border-color:#00e676;box-shadow:0 0 0 3px #00e67626}.input-with-suffix{position:relative}.suffix{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#888;font-weight:500}.form-actions{margin-top:30px;display:flex;gap:15px;border-top:1px solid #f0f0f0;padding-top:24px}.btn-paginate{padding:6px 12px;font-size:.85rem;color:#333;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s}.btn-paginate:hover:not(.disabled){background:#f4f7f6;border-color:#ccc}.btn-paginate.active{background:#2e7d32;color:#fff;border-color:#2e7d32;font-weight:700}.btn-paginate.disabled{color:#aaa;background:#f9f9f9;cursor:not-allowed}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;padding:25px;border-radius:8px;width:450px;max-width:90%;box-shadow:0 5px 15px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:20px}.modal-header h3{margin:0;font-size:1.25rem}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#555}.mb-3{margin-bottom:1rem}