body{margin:0;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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion: no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sidebar{position:fixed!important;top:0!important;left:0!important;height:100vh!important;width:70px!important;background:linear-gradient(135deg,#2c3e50,#34495e,#2c3e50)!important;box-shadow:2px 0 10px #0000001a!important;color:#fff!important;transition:width .3s ease!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;z-index:1000!important}.sidebar.expanded{width:220px!important}.sidebar.collapsed{width:70px!important}#content-wrapper{transition:margin-left .3s ease!important;margin-left:70px!important}.sidebar.expanded~#content-wrapper{margin-left:220px!important}.sidebar{transition:width .3s ease!important}.topbar h4{font-size:1.1rem!important;font-weight:600!important}h1,.h1{font-size:1.75rem!important}h2,.h2{font-size:1.5rem!important}h3,.h3{font-size:1.25rem!important}h4,.h4{font-size:1.1rem!important}h5,.h5{font-size:1rem!important}h6,.h6,body,.container-fluid{font-size:.875rem!important}.navbar-brand{font-size:1rem!important}.btn,.card-header,.card-body{font-size:.875rem!important}.sticky-footer{padding:1rem 0!important;background-color:#f8f9fc!important;border-top:1px solid #e3e6f0!important;margin-top:auto!important;font-size:.8rem!important;color:#5a5c69!important}.sticky-footer .copyright{line-height:1!important}#content-wrapper{min-height:100vh!important;display:flex!important;flex-direction:column!important}#content{flex:1!important}.user-dropdown .dropdown-menu{animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-dropdown .dropdown-item{transition:background-color .15s ease-in-out!important}.user-dropdown .dropdown-item:hover,.topbar .nav-link:hover{background-color:#f8f9fc!important}.sidebar .sidebar-menu-btn,.sidebar .sidebar-menu a{display:flex!important;align-items:center!important;width:100%!important;padding:6px 10px!important;color:#fff!important;text-decoration:none!important;transition:all .2s!important;min-height:30px!important;font-size:.8rem!important;background:none!important;border:none!important;text-align:left!important;cursor:pointer!important}.sidebar .sidebar-menu-btn:hover,.sidebar .sidebar-menu a:hover{background:#ffffff26!important;color:#fff!important;border-left:3px solid #3498db!important;padding-left:12px!important;transform:translate(2px)!important}.sidebar .sidebar-menu-btn.active,.sidebar .sidebar-menu a.active{background:#3498db33!important;border-left:3px solid #3498db!important;color:#3498db!important}.sidebar .sidebar-menu-btn.active .menu-icon,.sidebar .sidebar-menu a.active .menu-icon{color:#3498db!important}.sidebar .menu-divider{margin:.5rem 0 .25rem!important;padding:0 10px!important}.sidebar .menu-divider .menu-text{font-size:.65rem!important;font-weight:600!important;text-transform:uppercase!important;color:#ffffff80!important;letter-spacing:.8px!important}.sidebar.collapsed .menu-divider{display:none!important}.sidebar.collapsed .brand-text,.sidebar.collapsed .menu-text{display:none!important;opacity:0!important;visibility:hidden!important;width:0!important;overflow:hidden!important}.sidebar.collapsed .sidebar-brand,.sidebar.collapsed .sidebar-menu a{justify-content:center!important;padding-left:0!important;padding-right:0!important}.sidebar.collapsed .menu-icon{margin:0!important}.sidebar.expanded .brand-text,.sidebar.expanded .menu-text{display:inline!important;opacity:1!important;visibility:visible!important;width:auto!important}.sidebar.expanded .sidebar-brand,.sidebar.expanded .sidebar-menu a{justify-content:flex-start!important;padding-left:15px!important;padding-right:15px!important}.sidebar .sidebar-brand{display:flex!important;align-items:center!important;padding:.5rem!important;font-weight:700!important;font-size:.9rem!important;height:2.375rem!important;color:#fff!important;background:#ffffff0d!important;border-bottom:1px solid rgba(255,255,255,.1)!important}.sidebar .vdc-logo{border-radius:8px!important;background:#ffffff1a!important;padding:4px!important;transition:all .3s ease!important}.sidebar:hover .vdc-logo,.sidebar.expanded .vdc-logo{background:#ffffff26!important;transform:scale(1.05)!important}.sidebar .brand-text{margin-left:10px!important;white-space:nowrap!important}.sidebar .sidebar-menu{list-style:none!important;padding:0!important;margin-top:10px!important}.sidebar .sidebar-menu li{margin:3px 0!important}.sidebar .menu-icon{font-size:14px!important;min-width:14px!important}.sidebar .menu-text{margin-left:8px!important;white-space:nowrap!important;font-size:.8rem!important;font-weight:500!important;letter-spacing:.3px!important;display:flex!important;align-items:center!important;gap:6px!important}.nav-badge{display:inline-block!important;padding:2px 6px!important;font-size:.65rem!important;font-weight:600!important;background:linear-gradient(135deg,#e74c3c,#c0392b)!important;color:#fff!important;border-radius:10px!important;margin-left:4px!important;text-transform:uppercase!important;letter-spacing:.5px!important;box-shadow:0 2px 4px #e74c3c4d!important}.sidebar.collapsed .nav-badge{display:none!important}.users-page{padding:.75rem;background:#f5f6fa;min-height:100vh}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding:.5rem 0}.page-title{font-size:1.1rem;font-weight:600;color:#2c3e50;margin:0}.btn-add{background:#4caf50;color:#fff;border:none;padding:.4rem .9rem;border-radius:4px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.4rem}.btn-add:hover{background:#45a049;transform:translateY(-1px);box-shadow:0 2px 4px #4caf504d}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:.75rem}.stat-box{background:#fff;border-radius:6px;padding:.75rem;display:flex;align-items:center;gap:.75rem;box-shadow:0 1px 3px #00000014;transition:transform .2s}.stat-box:hover{transform:translateY(-2px);box-shadow:0 3px 8px #0000001f}.stat-box i{font-size:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#fff}.stat-primary i{background:linear-gradient(135deg,#667eea,#764ba2)}.stat-success i{background:linear-gradient(135deg,#11998e,#38ef7d)}.stat-warning i{background:linear-gradient(135deg,#f2994a,#f2c94c)}.stat-info i{background:linear-gradient(135deg,#667eea,#764ba2)}.stat-box div{display:flex;flex-direction:column}.stat-num{font-size:1.4rem;font-weight:700;color:#2c3e50;line-height:1}.stat-text{font-size:.7rem;color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px;margin-top:.2rem}.filters-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:.5rem;margin-bottom:.75rem}.search-input,.filter-select{padding:.5rem .75rem;border:1px solid #dfe4ea;border-radius:4px;font-size:.85rem;background:#fff;transition:all .2s}.search-input:focus,.filter-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.btn-reset{background:#fff;border:1px solid #dfe4ea;padding:.5rem .75rem;border-radius:4px;cursor:pointer;color:#7f8c8d;transition:all .2s}.btn-reset:hover{background:#f8f9fa;color:#2c3e50}.users-table-container{background:#fff;border-radius:6px;box-shadow:0 1px 3px #00000014;overflow:hidden}.compact-table{width:100%;border-collapse:collapse;font-size:.85rem}.compact-table thead{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.compact-table thead th{padding:.6rem .75rem;text-align:left;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;border:none}.compact-table tbody tr{border-bottom:1px solid #f1f3f5;transition:background .15s}.compact-table tbody tr:hover{background:#f8f9fa}.compact-table tbody td{padding:.6rem .75rem;vertical-align:middle}.user-info{display:flex;align-items:center;gap:.5rem}.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;flex-shrink:0}.name{font-weight:500;color:#2c3e50}.code-col,.email-col,.validity-col{color:#7f8c8d;font-size:.8rem}.badge-role{display:inline-block;padding:.25rem .6rem;border-radius:3px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.3px}.badge-role.badge-danger{background:#e74c3c;color:#fff}.badge-role.badge-warning{background:#f39c12;color:#fff}.badge-role.badge-info{background:#3498db;color:#fff}.badge-role.badge-secondary{background:#95a5a6;color:#fff}.badge-role.badge-primary{background:#667eea;color:#fff}.badge-role.badge-success{background:#2ecc71;color:#fff}.badge-admin{display:inline-block;width:22px;height:22px;border-radius:50%;text-align:center;line-height:22px;font-size:.75rem;font-weight:700}.badge-admin.yes{background:#d4edda;color:#155724}.badge-admin.no{background:#f8d7da;color:#721c24}.badge-status{display:inline-block;padding:.25rem .6rem;border-radius:12px;font-size:.7rem;font-weight:600;text-transform:capitalize}.badge-status.active{background:#d4edda;color:#155724}.badge-status.inactive{background:#f8d7da;color:#721c24}.actions-col{width:110px}.action-buttons{display:flex;gap:.3rem}.btn-icon{border:none;background:none;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:.75rem}.btn-icon:hover{transform:translateY(-1px)}.btn-edit{color:#3498db;background:#ebf5fb}.btn-edit:hover{background:#3498db;color:#fff}.btn-toggle{color:#f39c12;background:#fef5e7}.btn-toggle:hover{background:#f39c12;color:#fff}.btn-delete{color:#e74c3c;background:#fdedec}.btn-delete:hover{background:#e74c3c;color:#fff}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:1rem;color:#7f8c8d}.spinner{width:40px;height:40px;border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-state{display:flex;flex-direction:column;align-items:center;padding:2rem;gap:1rem;color:#e74c3c}.error-state i{font-size:2.5rem}.btn-retry{padding:.5rem 1rem;background:#e74c3c;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.85rem}.btn-retry:hover{background:#c0392b}.no-data{text-align:center;padding:3rem!important;color:#95a5a6}.no-data i{font-size:3rem;display:block;margin-bottom:1rem;opacity:.5}.no-data span{display:block;margin-bottom:1rem;font-size:.95rem}.clear-search{padding:.4rem .8rem;background:#667eea;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.8rem}.clear-search:hover{background:#5568d3}@media (max-width: 1200px){.stats-row{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.stats-row,.filters-row{grid-template-columns:1fr}.compact-table{font-size:.75rem}.action-buttons{flex-direction:column}}.users-table-container{max-height:calc(100vh - 320px);overflow-y:auto}.users-table-container::-webkit-scrollbar{width:6px;height:6px}.users-table-container::-webkit-scrollbar-track{background:#f1f3f5}.users-table-container::-webkit-scrollbar-thumb{background:#dee2e6;border-radius:3px}.users-table-container::-webkit-scrollbar-thumb:hover{background:#adb5bd}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1050;display:flex;align-items:center;justify-content:center}.modal-dialog{max-width:700px;width:90%;margin:1rem auto}.modal-content{background:#fff;border-radius:8px;box-shadow:0 5px 15px #0000004d;overflow:hidden}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;border-bottom:none}.modal-title{font-size:1.1rem;font-weight:600;margin:0}.btn-close{background:transparent;border:none;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;opacity:.8;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.btn-close:hover{opacity:1}.btn-close:before{content:"×"}.modal-body{padding:1.25rem;max-height:calc(100vh - 250px);overflow-y:auto}.modal-footer{background:#f8f9fa;padding:.75rem 1.25rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end;gap:.5rem}.form-label{font-size:.85rem;font-weight:600;color:#495057;margin-bottom:.3rem;display:block}.form-control,.form-select{font-size:.875rem;padding:.5rem .75rem;border:1px solid #ced4da;border-radius:4px;width:100%;transition:all .2s}.form-control:focus,.form-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-control:disabled{background-color:#e9ecef;cursor:not-allowed}.form-control-sm,.form-select-sm{font-size:.875rem;padding:.5rem .75rem}textarea.form-control{resize:vertical;min-height:60px}.row{display:flex;flex-wrap:wrap;margin:0 -.5rem}.row>*{padding:0 .5rem}.col-md-6{flex:0 0 50%;max-width:50%;margin-bottom:.75rem}.col-12{flex:0 0 100%;max-width:100%;margin-bottom:.75rem}.g-3{margin:0 -.5rem}.btn{padding:.5rem 1rem;border:none;border-radius:4px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.5rem}.btn-sm{padding:.4rem .8rem;font-size:.875rem}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover:not(:disabled){background:#5568d3;transform:translateY(-1px)}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover:not(:disabled){background:#5a6268}.btn:disabled{opacity:.6;cursor:not-allowed}.spinner-border{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.modal-dialog{width:95%;margin:.5rem auto}.col-md-6{flex:0 0 100%;max-width:100%}.modal-body{padding:1rem;max-height:calc(100vh - 200px)}}