*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #4f46e5;--primary-hover: #4338ca;--secondary-color: #64748b;--danger-color: #ef4444;--success-color: #10b981;--warning-color: #f59e0b;--bg-color: #f1f5f9;--card-bg: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--border-color: #e2e8f0;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--transition: all .2s ease}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-primary);line-height:1.6}#root{min-height:100vh}.app-container{display:flex;height:100vh;overflow:hidden}.sidebar{width:200px;background:linear-gradient(180deg,#1e293b,#0f172a);color:#fff;padding:0;display:flex;flex-direction:column;box-shadow:4px 0 20px #0000001a;z-index:10;position:relative;transition:width .3s ease}.sidebar-header{padding:24px 20px;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-header .logo{display:flex;align-items:center;gap:12px}.sidebar-header .logo-icon{width:42px;height:42px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 12px #6366f166}.sidebar-header h1{font-size:18px;font-weight:600;letter-spacing:-.5px}.sidebar-header .subtitle{font-size:12px;color:#ffffff80;margin-top:2px}.nav-menu{flex:1;padding:16px 12px;overflow-y:auto}.nav-section{margin-bottom:24px}.sidebar.collapsed{width:70px}.sidebar.collapsed .sidebar-header{padding:24px 14px}.sidebar.collapsed .sidebar-header .logo-icon{width:36px;height:36px;font-size:18px}.sidebar.collapsed .nav-item{justify-content:center;padding:12px}.sidebar.collapsed .nav-item .nav-icon{margin-right:0}.sidebar-toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#3b82f6;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 2px 8px #3b82f666;transition:background .2s;z-index:20}.sidebar-toggle:hover{background:#2563eb}.nav-item.dragging{opacity:.5;background:#374151}.nav-item.drag-over{border-top:2px solid #3b82f6;background:#374151}.nav-section-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#fff6;padding:0 12px;margin-bottom:8px}.nav-item{padding:12px 16px;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:12px;border-radius:var(--radius-md);margin-bottom:4px;font-size:14px;font-weight:500}.nav-item .nav-icon{font-size:18px;width:24px;text-align:center}.nav-item:hover{background:#ffffff1a;transform:translate(4px)}.nav-item.active{background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 4px 12px #6366f166}.nav-children{margin-left:20px;border-left:1px solid rgba(255,255,255,.1);margin-bottom:8px}.nav-children .nav-item{padding:10px 16px;font-size:13px;font-weight:400}.nav-children .nav-item:hover{transform:translate(2px)}.nav-children .nav-item.active{background:#6366f14d}.main-content{flex:1;overflow-y:auto;padding:24px 32px;background:var(--bg-color)}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.page-header h2{font-size:26px;font-weight:600;color:var(--text-primary)}.page-header-actions{display:flex;gap:12px}.btn{padding:10px 20px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:500;transition:var(--transition);display:inline-flex;align-items:center;gap:8px}.btn-primary{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;box-shadow:0 2px 8px #4f46e54d}.btn-primary:hover{background:linear-gradient(135deg,#4338ca,#4f46e5);transform:translateY(-1px);box-shadow:0 4px 12px #4f46e566}.btn-secondary{background:#fff;color:var(--text-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:#f8fafc;border-color:#cbd5e1}.btn-danger{background:linear-gradient(135deg,#ef4444,#f87171);color:#fff;box-shadow:0 2px 8px #ef44444d}.btn-danger:hover{background:linear-gradient(135deg,#dc2626,#ef4444);transform:translateY(-1px)}.btn-sm{padding:6px 12px;font-size:13px}.card{background:var(--card-bg);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px;box-shadow:var(--shadow-sm);border:1px solid var(--border-color);transition:var(--transition)}.card:hover{box-shadow:var(--shadow-md)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-color)}.card-title{font-size:18px;font-weight:600}.search-bar{display:flex;gap:12px;margin-bottom:20px;background:#fff;padding:16px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}.search-bar input{flex:1;padding:10px 16px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;transition:var(--transition)}.search-bar input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.search-bar select{padding:10px 16px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;min-width:180px;cursor:pointer;transition:var(--transition)}.search-bar select:focus{outline:none;border-color:var(--primary-color)}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-primary);font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;transition:var(--transition);background:#f8fafc}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color);background:#fff;box-shadow:0 0 0 3px #4f46e51a}.form-group textarea{resize:vertical;min-height:80px}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--border-color)}.table-container{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border-color)}.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--border-color)}.table th{background:#f8fafc;font-weight:600;font-size:13px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.table tr:hover{background:#f8fafc}.table tr:last-child td{border-bottom:none}.tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}.tag-primary{background:#eef2ff;color:#4f46e5}.tag-success{background:#d1fae5;color:#059669}.tag-warning{background:#fef3c7;color:#d97706}.tag-danger{background:#fee2e2;color:#dc2626}.tag-info{background:#e0f2fe;color:#0284c7}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:#fff;border-radius:var(--radius-lg);padding:0;min-width:560px;max-width:90%;max-height:90vh;overflow:hidden;box-shadow:0 25px 50px -12px #00000040;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border-color);background:#f8fafc}.modal-header h3{font-size:18px;font-weight:600;color:var(--text-primary)}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-secondary);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition)}.modal-close:hover{background:#f1f5f9;color:var(--text-primary)}.modal-body{padding:24px;max-height:60vh;overflow-y:auto}.modal-footer{display:flex;gap:12px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--border-color);background:#f8fafc}.empty-state{text-align:center;padding:80px 20px;color:var(--text-secondary)}.empty-state-icon{font-size:64px;margin-bottom:16px;opacity:.5}.empty-state h3{font-size:18px;margin-bottom:8px;color:var(--text-primary)}.empty-state p{font-size:14px;margin-bottom:24px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:32px}.stat-card{background:#fff;padding:24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);transition:var(--transition);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#6366f1,#8b5cf6)}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.stat-card .stat-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}.stat-card .stat-icon.blue{background:#e0e7ff;color:#4f46e5}.stat-card .stat-icon.green{background:#d1fae5;color:#059669}.stat-card .stat-icon.orange{background:#fef3c7;color:#d97706}.stat-card .stat-icon.red{background:#fee2e2;color:#dc2626}.stat-card h3{font-size:13px;color:var(--text-secondary);margin-bottom:8px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stat-card .value{font-size:32px;font-weight:700;color:var(--text-primary);line-height:1.2}.stat-card .value span{font-size:16px;font-weight:400;color:var(--text-secondary)}.stat-card .trend{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:13px}.stat-card .trend.up{color:#10b981}.stat-card .trend.down{color:#ef4444}.tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--border-color);padding-bottom:0}.tab{padding:12px 20px;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition);font-weight:500;color:var(--text-secondary);font-size:14px}.tab:hover{color:var(--primary-color)}.tab.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background:#eef2ff;border-radius:var(--radius-sm) var(--radius-sm) 0 0}.action-buttons{display:flex;gap:8px}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:11px;font-weight:600;background:var(--primary-color);color:#fff}.select-with-add{display:flex;gap:8px}.select-with-add select{flex:1}.select-with-add .input-group{display:flex;gap:4px;flex:1}.select-with-add input{flex:1;min-width:0}.multi-select-with-add{display:flex;flex-direction:column;gap:8px}.multi-select-with-add .selected-tags{display:flex;flex-wrap:wrap;gap:6px}.multi-select-with-add .tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#e0f2fe;color:#0369a1;border-radius:4px;font-size:13px}.multi-select-with-add .tag button{background:none;border:none;color:#0369a1;cursor:pointer;padding:0;font-size:14px;line-height:1}.multi-select-with-add .select-row{display:flex;gap:8px}.multi-select-with-add select{flex:1}.multi-select-with-add .input-group{display:flex;gap:4px;flex:1}.multi-select-with-add input{flex:1;min-width:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media (max-width: 768px){.sidebar{width:80px}.sidebar-header h1,.sidebar-header .subtitle,.nav-section-title,.nav-item span:not(.nav-icon){display:none}.nav-item{justify-content:center;padding:14px}.main-content{padding:16px}.form-row{grid-template-columns:1fr}.modal{min-width:auto;margin:16px}}.resizable-table-wrapper{position:relative;max-height:calc(100vh - 400px);display:flex;flex-direction:column}.resizable-table-wrapper>.table-container{flex:1;overflow-y:auto}.table-settings{position:relative;margin-bottom:12px;display:flex;justify-content:flex-end}.column-settings-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 12px #00000026;padding:12px;z-index:100;min-width:180px;margin-top:4px}.column-settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #e2e8f0;font-weight:500}.column-checkbox{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer}.column-checkbox input{cursor:pointer}.table th{position:relative;-webkit-user-select:none;user-select:none}.th-content{display:flex;align-items:center;justify-content:space-between}.resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}.resize-handle:hover{background:#3b82f6}.table th:hover .resize-handle{background:#93c5fd}.drag-handle{cursor:grab;padding:2px 6px;color:#94a3b8;margin-right:4px}.drag-handle:hover{color:#64748b}.drag-handle:active{cursor:grabbing}.table th.drag-over{background:#e0f2fe;border-left:2px solid #3b82f6}.table th[draggable=true]{cursor:grab}.table th[draggable=true]:active{cursor:grabbing}.th-title{cursor:pointer;display:inline-flex;align-items:center;gap:4px}.th-title:hover{color:#3b82f6}.sort-indicator{color:#3b82f6;font-weight:700}.th-filter{display:block;width:90%;margin:4px auto 2px;padding:4px 8px;font-size:12px;border:1px solid #e2e8f0;border-radius:4px}.th-filter:focus{outline:none;border-color:#3b82f6}.table th.sorted{background:#f8fafc}.table th,.table td{text-align:left}.filter-dropdown-wrapper{position:relative}.filter-toggle{background:none;border:none;cursor:pointer;font-size:10px;color:#94a3b8;padding:2px 4px;margin-left:4px}.filter-toggle:hover,.filter-toggle.active{color:#3b82f6}.filter-count{background:#3b82f6;color:#fff;font-size:10px;padding:1px 5px;border-radius:10px;margin-left:4px}.filter-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:100;min-width:150px;max-height:250px;overflow-y:auto;margin-top:4px}.filter-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e2e8f0;font-size:12px}.filter-header label{display:flex;align-items:center;gap:4px}.filter-options{max-height:200px;overflow-y:auto;padding:4px 8px}.filter-options label{display:flex;align-items:center;gap:6px;padding:4px 0;cursor:pointer;font-size:13px}.filter-options label:hover{background:#f8fafc}.th-actions,span.th-actions{display:inline-flex;align-items:center;gap:2px;margin-left:auto}.sort-btn{background:none;border:none;cursor:pointer;font-size:12px;color:#94a3b8;padding:2px 4px;line-height:1}.sort-btn:hover{color:#3b82f6}.sort-btn.active{color:#3b82f6;font-weight:700}.modal-tabs{display:flex;border-bottom:1px solid #e5e7eb;margin-bottom:15px}.modal-tab{padding:10px 20px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:#6b7280;font-size:14px}.modal-tab:hover{color:#3b82f6}.modal-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.tab-content{padding:10px 0}.contact-form{max-height:70vh;overflow-y:auto;padding-right:10px}.form-section{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #e5e7eb}.form-section:last-of-type{border-bottom:none}.form-section-title{font-size:14px;font-weight:600;color:#374151;margin-bottom:12px;padding-bottom:8px;border-bottom:1px dashed #e5e7eb}.form-section .form-row{margin-bottom:12px}.checkbox-group label{display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;border:1px solid #e5e7eb;border-radius:4px;transition:background-color .2s}.checkbox-group label:hover{background-color:#f9fafb}.checkbox-group input[type=checkbox]{width:16px;height:16px;cursor:pointer}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px;border-top:1px solid #e5e7eb;position:sticky;bottom:0;background:#fff;padding:15px 0 5px}