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}*{margin:0;padding:0;box-sizing:border-box}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:#f5f5f5;color:#333}.app{min-height:100vh}.loading-container{display:flex;justify-content:center;align-items:center;min-height:200px}.loading-spinner{padding:20px;font-size:16px;color:#666}.access-denied-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.access-denied-message{background:#fff;padding:40px;border-radius:12px;box-shadow:0 10px 30px #0000001a;text-align:center;max-width:500px}.access-denied-message h2{color:#dc3545;margin-bottom:20px;font-size:24px}.access-denied-message p{color:#666;margin-bottom:15px;line-height:1.6}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;gap:20px}.error-message{background-color:#fee;border:1px solid #fcc;color:#c33;padding:15px;border-radius:8px;position:relative;margin:20px 0}.close-error{position:absolute;top:5px;right:10px;background:none;border:none;font-size:18px;cursor:pointer;color:#c33}.btn{display:inline-block;padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;text-align:center;transition:background-color .2s,color .2s;margin:0 5px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#0056b3}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#545b62}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover:not(:disabled){background-color:#1e7e34}.btn-warning{background-color:#ffc107;color:#212529}.btn-warning:hover:not(:disabled){background-color:#e0a800}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover:not(:disabled){background-color:#c82333}.btn-danger.confirm{background-color:#ff4757;animation:pulse .5s infinite}.btn-outline{background-color:transparent;color:#007bff;border:1px solid #007bff}.btn-outline:hover:not(:disabled){background-color:#007bff;color:#fff}.btn-sm{padding:5px 10px;font-size:12px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.login-card{background:#fff;padding:40px;border-radius:12px;box-shadow:0 10px 30px #0000001a;width:100%;max-width:400px}.login-card h1{text-align:center;margin-bottom:10px;color:#333;font-size:24px}.login-card h2{text-align:center;margin-bottom:30px;color:#666;font-size:18px;font-weight:400}.login-form{display:flex;flex-direction:column;gap:20px}.login-button{width:100%;padding:12px;background-color:#007bff;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s}.login-button:hover:not(:disabled){background-color:#0056b3}.login-button:disabled{opacity:.6;cursor:not-allowed}.dashboard{min-height:100vh}.dashboard-header{background:#fff;padding:20px 40px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.dashboard-header h1{color:#333;font-size:24px}.user-info{display:flex;align-items:center;gap:15px}.logout-button{background-color:#dc3545;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px}.logout-button:hover{background-color:#c82333}.dashboard-nav{background:#f8f9fa;padding:0 40px;border-bottom:1px solid #e0e0e0}.dashboard-nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0}.nav-link{display:block;padding:15px 0;text-decoration:none;color:#666;font-weight:500;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}.nav-link:hover,.nav-link.active{color:#007bff;border-bottom-color:#007bff}.dashboard-content{padding:40px}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px}.dashboard-card{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 10px #0000001a;border:1px solid #e0e0e0}.dashboard-card h3{margin-bottom:15px;color:#333;font-size:20px}.dashboard-card p{color:#666;margin-bottom:20px;line-height:1.5}.card-link{color:#007bff;text-decoration:none;font-weight:500;font-size:14px}.card-link:hover{color:#0056b3}.stats{display:flex;gap:20px;margin-top:20px}.stat{display:flex;flex-direction:column;gap:5px}.stat-label{font-size:12px;color:#666;text-transform:uppercase;font-weight:500}.stat-value{font-size:24px;font-weight:700;color:#333}.page-header{background:#fff;padding:30px 40px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.page-header h1{color:#333;font-size:28px;margin:0}.header-actions{display:flex;gap:10px}.form{background:#fff;padding:40px;margin:20px;border-radius:12px;box-shadow:0 2px 10px #0000001a;max-width:800px}.form-section{margin-bottom:40px}.form-section h3{margin-bottom:20px;color:#333;font-size:20px;padding-bottom:10px;border-bottom:2px solid #f0f0f0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px;margin:10px 0}.form-group label{font-weight:500;color:#333;font-size:14px}.form-group input,.form-group textarea,.form-group select{padding:12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.form-group input:disabled,.form-group textarea:disabled,.form-group select:disabled{background-color:#f8f9fa;color:#666}.form-group input.error,.form-group textarea.error,.form-group select.error{border-color:#dc3545;box-shadow:0 0 0 3px #dc35451a}.field-error{color:#dc3545;font-size:12px;margin-top:4px;display:block}.field-help{color:#666;font-size:12px;margin-top:4px;display:block;line-height:1.4}.password-section{border:1px solid #ddd;border-radius:8px;padding:16px;background-color:#f8f9fa}.password-toggle{margin-bottom:16px}.password-fields{border-top:1px solid #ddd;padding-top:16px;margin-top:8px}.password-fields .form-group{margin-bottom:0}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 0}.checkbox-label input[type=checkbox]{width:auto;margin:0}.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.role-description{display:block;color:#666;font-size:12px;margin-top:5px}.form-actions{display:flex;gap:15px;padding-top:30px;border-top:1px solid #e0e0e0;margin-top:30px}.users-table-container{background:#fff;margin:20px;border-radius:12px;box-shadow:0 2px 10px #0000001a;overflow:hidden}.users-table{width:100%;border-collapse:collapse}.users-table th{background:#f8f9fa;padding:15px;text-align:left;font-weight:600;color:#333;border-bottom:1px solid #e0e0e0;font-size:14px}.users-table td{padding:15px;border-bottom:1px solid #f0f0f0;font-size:14px}.users-table tr:hover{background-color:#f8f9fa}.users-table tr.inactive-user{opacity:.6}.status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;text-transform:uppercase}.status-badge.active{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.status-badge.inactive{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.actions{display:flex;gap:5px;flex-wrap:wrap}.empty-state{padding:60px 40px;text-align:center;color:#666}.empty-state p{margin-bottom:20px;font-size:16px}.user-detail{background:#fff;margin:20px;border-radius:12px;box-shadow:0 2px 10px #0000001a}.user-detail-content{padding:40px}.detail-section{margin-bottom:40px}.detail-section h3{margin-bottom:20px;color:#333;font-size:20px;padding-bottom:10px;border-bottom:2px solid #f0f0f0}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.detail-item{display:flex;flex-direction:column;gap:5px}.detail-item label{font-weight:600;color:#666;font-size:12px;text-transform:uppercase}.detail-item span{color:#333;font-size:14px}.user-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid #e0e0e0}.roles-list{display:flex;flex-direction:column;gap:15px}.role-item{padding:15px;background:#f8f9fa;border-radius:8px;border-left:4px solid #007bff}.role-name{font-weight:600;color:#333;display:block;margin-bottom:5px}.role-description{color:#666;font-size:14px}.preferences{background:#f8f9fa;padding:20px;border-radius:8px;border:1px solid #e0e0e0}.preferences pre{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;color:#333}@media (max-width: 768px){.dashboard-header,.page-header{padding:20px;flex-direction:column;gap:15px;align-items:flex-start}.dashboard-nav{padding:0 20px}.dashboard-nav ul{flex-direction:column;gap:0}.nav-link{padding:12px 0}.dashboard-content,.user-detail-content,.form{padding:20px}.form-row,.detail-grid{grid-template-columns:1fr}.users-table-container{margin:10px;overflow-x:auto}.users-table{min-width:800px}.header-actions{flex-direction:column;width:100%}.header-actions .btn{margin:0;text-align:center}}.role-management{padding:20px;max-width:1200px;margin:0 auto}.role-form-container{background:#fff;border-radius:8px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px #0000001a}.role-form h3{margin-bottom:20px;color:#333;font-size:20px}.role-form .form-group{margin-bottom:20px}.role-form label{display:block;margin-bottom:6px;font-weight:500;color:#555}.role-form input[type=text],.role-form textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;transition:border-color .2s}.role-form input[type=text]:focus,.role-form textarea:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.permissions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;border:1px solid #e9ecef;border-radius:4px;padding:16px;background:#f8f9fa}.permission-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.permission-checkbox:hover{background-color:#e9ecef}.permission-checkbox input[type=checkbox]{width:auto;margin:0}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid #e9ecef}.roles-table-container{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a}.roles-table{width:100%;border-collapse:collapse}.roles-table th{background:#f8f9fa;padding:16px 12px;text-align:left;font-weight:600;color:#495057;border-bottom:2px solid #dee2e6}.roles-table td{padding:16px 12px;border-bottom:1px solid #dee2e6;vertical-align:top}.roles-table tr:hover{background:#f8f9fa}.role-name{font-weight:500;color:#495057}.permissions-display{max-width:300px;word-wrap:break-word;color:#6c757d;font-size:14px}.system-role-note{background:#e3f2fd;color:#1976d2;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.roles-table .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.roles-table .actions .btn{white-space:nowrap}@media (max-width: 768px){.role-management{padding:12px}.permissions-grid{grid-template-columns:1fr}.form-actions{flex-direction:column}.roles-table-container{overflow-x:auto}.roles-table{min-width:800px}.roles-table .actions{flex-direction:column;align-items:flex-start;gap:4px}.permissions-display{max-width:200px}}