:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111827;background-color:#f6f7fb}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;background:#f6f7fb}.sidebar{width:260px;background:#fff;min-height:100vh;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:1000;box-shadow:2px 0 12px #00000014;border-right:1px solid #e5e7eb;transition:transform .3s ease}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sidebar-close{display:none;position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;padding:8px;color:#374151;border-radius:8px;transition:background .2s;z-index:10}.sidebar-close:hover{background:#f3f4f6}.sidebar-header{padding:24px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;background:#fff;position:relative}.sidebar-logo{max-width:140px;height:auto;object-fit:contain}.sidebar-nav{flex:1;padding:20px 0;overflow-y:auto;overflow-x:hidden}.sidebar-nav::-webkit-scrollbar{width:10px}.sidebar-nav::-webkit-scrollbar-track{background:#f1f5f9;border-left:1px solid #e5e7eb}.sidebar-nav::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7393b3,#5a7a9a);border-radius:5px;border:2px solid #f1f5f9;box-shadow:0 1px 3px #0003}.sidebar-nav::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a7a9a,#4a6a8a);box-shadow:0 2px 4px #0000004d}.menu-section{padding:0 12px}.menu-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#4b5563;padding:12px 16px 8px;margin-bottom:4px}.menu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;margin:4px 0;border-radius:10px;text-decoration:none;color:#374151;font-weight:500;font-size:14px;transition:all .2s ease;position:relative;cursor:pointer;min-height:44px}@media (max-width: 768px){.menu-item{padding:14px 16px;font-size:15px}}.menu-item:hover{background:#f3f4f6;color:#111827}.menu-item.active{background:#7393b31a;color:#00f;font-weight:600}.menu-item.active .active-indicator{position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:24px;background:linear-gradient(90deg,#7393b3,#7f5a87);border-radius:0 4px 4px 0}.menu-icon{font-size:20px;width:24px;text-align:center;display:flex;align-items:center;justify-content:center}.menu-text{flex:1}.main-content{flex:1;margin-left:260px;background:#f6f7fb;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .3s ease}.main-header{background:#fff;padding:24px 32px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:flex-end;box-shadow:0 2px 8px #0000000a;position:sticky;top:0;z-index:100}.header-left{display:flex;align-items:center;gap:16px;flex:1}.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:#374151;border-radius:8px;transition:background .2s;align-items:center;justify-content:center}.mobile-menu-btn:hover{background:#f3f4f6}.main-header h1{margin:0;font-size:24px;font-weight:700;color:#111827}.main-header p{margin:4px 0 0;color:#6b7280;font-size:14px}.header-actions{display:flex;align-items:center;gap:16px}.user-info{display:flex;align-items:center;gap:12px}.user-avatar-container{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #e5e7eb}.user-avatar{width:100%;height:100%;object-fit:cover}.user-avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}.user-details{display:flex;flex-direction:column;gap:2px}.user-name{color:#374151;font-weight:600;font-size:14px;line-height:1.2}.user-role{color:#6b7280;font-size:12px;text-transform:uppercase;letter-spacing:.5px;line-height:1.2}.logout-btn{padding:8px 16px;background:#fff;color:#374151;border:1px solid #e5e7eb;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease;min-height:40px;min-width:80px}@media (max-width: 768px){.logout-btn{min-height:44px}}.logout-btn:hover{background:#f9fafb;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.content-area{flex:1;padding:24px 32px;overflow-y:auto;scrollbar-width:auto;scrollbar-color:#7393B3 #e5e7eb}.content-area::-webkit-scrollbar{width:12px}.content-area::-webkit-scrollbar-track{background:#e5e7eb;border-left:1px solid #d1d5db}.content-area::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7393b3,#5a7a9a);border-radius:6px;border:2px solid #e5e7eb;box-shadow:0 2px 4px #0003}.content-area::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a7a9a,#4a6a8a);box-shadow:0 2px 6px #0000004d}.content-area .app-shell{max-width:100%;margin:0;padding:0}.content-area .card{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:20px;box-shadow:0 10px 40px #11182714,0 0 0 1px #ffffff80 inset;padding:24px;border:1px solid rgba(226,232,240,.8);transition:all .3s ease}.content-area .card:hover{box-shadow:0 16px 48px #1118271f,0 0 0 1px #ffffff80 inset}@media (max-width: 768px){.sidebar{width:280px;transform:translate(-100%);box-shadow:4px 0 24px #00000026}.sidebar.sidebar-open{transform:translate(0)}.sidebar-overlay{display:block;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar-close{display:flex}.main-content{margin-left:0;width:100%}.mobile-menu-btn{display:flex}.main-header{padding:16px 20px;flex-wrap:wrap;gap:12px}.main-header h1{font-size:20px}.main-header p{font-size:13px}.header-actions{flex-wrap:wrap;gap:12px}.user-info{gap:8px}.user-avatar-container{width:40px;height:40px}.user-details{display:none}.card h3{font-size:18px;margin-bottom:8px}.card p{font-size:13px}.logout-btn{padding:8px 12px;font-size:13px}.content-area{padding:0;width:100vw;max-width:100vw;overflow-x:hidden;box-sizing:border-box}.content-area>.grid{width:100vw;max-width:100vw;margin:0;padding:16px 0;box-sizing:border-box}.filters{flex-direction:column;align-items:stretch;gap:12px;width:100%;box-sizing:border-box}.filters input,.filters select{width:100%;max-width:100%;padding:12px 14px;font-size:16px;min-height:44px;box-sizing:border-box}.filters button{width:100%;max-width:100%;padding:12px 16px;font-size:16px;min-height:44px;box-sizing:border-box}.filters button.primary{margin-right:0!important;margin-bottom:0;width:100%;max-width:100%}.card:has(.filters){width:100vw;max-width:100vw;margin-left:0;margin-right:0;padding:16px 20px;box-sizing:border-box;border-radius:0}.table-wrapper .table{display:table!important;width:auto!important;min-width:700px!important;table-layout:auto!important;border-collapse:collapse!important}.table-wrapper .table tr{display:table-row!important;width:auto!important}.table thead{position:sticky;top:0;z-index:10;background:#f9fafb}.table td:last-child>div{flex-direction:column;gap:6px}.table td:last-child button{width:100%;min-width:auto}.card{padding:16px;border-radius:16px;width:100vw;max-width:100vw;margin-left:0;margin-right:0;box-sizing:border-box}.card:has(.table-wrapper),.card:has(.data-table),.card:has(.table){width:100%;max-width:100%;margin-left:0;margin-right:0;overflow:visible!important;padding:16px 0!important}.card .table-wrapper{width:100%!important;max-width:100%!important;margin:0!important;border-radius:0!important;overflow-x:scroll!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important;padding:16px 16px 20px!important;scrollbar-width:auto!important;scrollbar-color:#7393B3 #d1d5db!important;position:relative!important}.stats-grid{grid-template-columns:1fr;width:100vw;max-width:100vw;margin:0;padding:0;gap:16px;box-sizing:border-box}.stats-grid .card,.stats-grid .stat-card{width:100vw;max-width:100vw;margin:0;padding:16px 20px;box-sizing:border-box;border-radius:0}.stats-grid .card{overflow:hidden;position:relative;padding:20px 15px!important}.stats-grid .card>div:first-child{padding-left:20px;padding-right:20px}.stats-grid .card>div:last-child{width:100vw!important;max-width:100vw!important;margin-left:0!important;margin-right:0!important;padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important;position:relative}.stats-grid .card>div:last-child>div{width:100%!important;max-width:100%!important;position:relative!important;box-sizing:border-box!important;height:200px!important}.stats-grid .card>div:last-child>div>div{width:100%!important;max-width:100%!important;box-sizing:border-box!important}.stats-grid canvas{width:100%!important;max-width:100%!important;height:200px!important;box-sizing:border-box!important}.stat-card>div:last-child{width:100%!important;max-width:100%!important;box-sizing:border-box}.pagination{flex-wrap:wrap;gap:6px;width:100%;max-width:100%;justify-content:center;padding:0 20px;box-sizing:border-box}.pagination button{padding:10px 14px;font-size:14px;min-width:44px}.modal-backdrop{padding:16px}.modal{max-width:100%;padding:24px 20px 20px;max-height:90vh}.detail-grid{grid-template-columns:1fr}}@media (max-width: 480px){.main-header{padding:12px 16px}.main-header h1{font-size:18px}.card{padding:12px;width:100vw;max-width:100vw;margin-left:0;margin-right:0}.header-actions{width:100%;justify-content:space-between}.logout-btn{flex:1;max-width:120px}}.app-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}h1{margin:0;font-size:24px;font-weight:700}p{margin:4px 0 0;color:#4b5563}.tab-list{display:flex;gap:8px}.tab-btn{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:600;color:#374151;transition:all .15s ease}.tab-btn.active{border-color:#7393b3;color:#fff;background:linear-gradient(90deg,#7393b3,#7f5a87);box-shadow:0 8px 24px #7393b340}.nav-list{display:flex;gap:8px}.nav-link{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:10px 16px;font-weight:600;color:#374151;text-decoration:none;transition:all .15s ease;display:inline-block}.nav-link:hover{border-color:#7393b3;color:#7393b3;transform:translateY(-1px);box-shadow:0 4px 12px #7393b326}.nav-link.active{border-color:#7393b3;color:#fff;background:linear-gradient(90deg,#7393b3,#7f5a87);box-shadow:0 8px 24px #7393b340}.card{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:20px;box-shadow:0 10px 40px #11182714,0 0 0 1px #ffffff80 inset;padding:24px;border:1px solid rgba(226,232,240,.8);transition:all .3s ease}.card:hover{box-shadow:0 16px 48px #1118271f,0 0 0 1px #ffffff80 inset}.grid{display:grid;width:100%;max-width:100%;box-sizing:border-box;overflow-x:hidden;overflow-y:visible}.grid>*{min-width:0;max-width:100%;box-sizing:border-box}@media (max-width: 768px){.grid{width:100vw;max-width:100vw;margin:0;padding:0;box-sizing:border-box}.modal-backdrop{padding-top:120px!important;margin-left:0!important;margin-top:0!important}.modal{max-height:75vh!important}}.stats-grid{display:grid;gap:16px;grid-template-columns:2fr 1fr;width:100%;max-width:100%;min-width:0;box-sizing:border-box;margin:0;padding:0;overflow:hidden}.stats-grid>*{min-width:0;max-width:100%;box-sizing:border-box}.stats-grid .card{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important;margin:0!important;padding:24px!important;border:1px solid rgba(226,232,240,.8)!important}.stats-grid .stat-card{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;margin:0!important}.stats-grid .card>div:last-child{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}.stats-grid .card>div:last-child>div,.stats-grid .card>div:last-child>div>div{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}.stats-grid canvas{max-width:100%!important;width:100%!important;height:auto!important;box-sizing:border-box!important}.stat-card{display:flex;flex-direction:column;padding:32px;background:linear-gradient(135deg,#fff,#f8fafc);border-radius:20px;border:1px solid rgba(226,232,240,.8);box-shadow:0 10px 40px #11182714,0 0 0 1px #ffffff80 inset;position:relative;overflow:hidden;transition:all .3s ease}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);opacity:.8}.stat-card:hover{transform:translateY(-2px);box-shadow:0 16px 48px #1118271f,0 0 0 1px #ffffff80 inset;border-color:#667eea4d}.stat-card h3{margin:0 0 12px;font-size:13px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.stat-card .value{font-size:48px;font-weight:800;color:#7f5a87;line-height:1.2;margin-top:8px}.stats-range-select{padding:8px 32px 8px 12px;border-radius:10px;border:2px solid #e2e8f0;font-size:14px;font-weight:600;color:#475569;background:linear-gradient(135deg,#fff,#f8fafc);cursor:pointer;transition:all .3s ease;-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='%23475569' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;box-shadow:0 2px 8px #0000000a}.stats-range-select:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26;transform:translateY(-1px)}.stats-range-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a,0 4px 12px #667eea33}.table{width:100%;border-collapse:collapse;table-layout:auto;margin-top:12px}.table-wrapper{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;margin:12px 0;position:relative;scrollbar-width:auto;scrollbar-color:#7393B3 #e5e7eb;scrollbar-gutter:stable;background:#fff;border-radius:16px;box-shadow:0 18px 48px #11182714;padding:20px;width:100%;max-width:100%;box-sizing:border-box}.table-wrapper::-webkit-scrollbar{height:14px;width:14px}.table-wrapper::-webkit-scrollbar-track{background:#e5e7eb;border-radius:10px;border:1px solid #d1d5db;box-shadow:inset 0 0 4px #0000000d}.table-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7393b3,#5a7a9a);border-radius:10px;border:2px solid #e5e7eb;box-shadow:0 2px 4px #0003;min-height:30px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a7a9a,#4a6a8a);box-shadow:0 2px 6px #0000004d}.table-wrapper::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#4a6a8a,#3a5a7a)}.table-wrapper::-webkit-scrollbar-corner{background:#e5e7eb}@media (max-width: 768px){.table-wrapper{padding:16px;margin:0;border-radius:0;width:100%;max-width:100%;overflow-x:scroll!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:auto!important;scrollbar-color:#7393B3 #d1d5db!important;padding-bottom:20px!important;scrollbar-gutter:stable!important;position:relative!important;display:block!important}.table-wrapper::-webkit-scrollbar{height:20px!important;width:20px!important;display:block!important;-webkit-appearance:none!important}.table-wrapper::-webkit-scrollbar-track{background:#d1d5db!important;border:2px solid #9ca3af!important;box-shadow:inset 0 0 6px #00000026!important;border-radius:10px!important;display:block!important}.table-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7393b3,#5a7a9a)!important;border:3px solid #d1d5db!important;box-shadow:0 3px 6px #0006!important;min-height:50px!important;border-radius:10px!important;display:block!important;opacity:1!important}.table-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a7a9a,#4a6a8a)!important}.table-wrapper::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#4a6a8a,#3a5a7a)!important;box-shadow:0 4px 8px #00000080!important}.table-wrapper .table thead,.card .table-wrapper .table thead{display:table-header-group!important}.table-wrapper .table tbody,.card .table-wrapper .table tbody{display:table-row-group!important}.table-wrapper .table tr,.card .table-wrapper .table tr{display:table-row!important}.table-wrapper .table th,.table-wrapper .table td,.card .table-wrapper .table th,.card .table-wrapper .table td{white-space:nowrap!important;display:table-cell!important}.card:has(.table-wrapper){overflow:visible!important;max-width:100%!important;padding:20px 16px!important;overflow-x:scroll!important}}.table th,.table td{padding:12px 10px;border-bottom:1px solid #f1f3f9;text-align:left;font-size:14px;white-space:nowrap;box-sizing:border-box}.table th{color:#6b7280;font-weight:700;background:#f9fafb}.table thead{display:table-header-group}.table tbody{display:table-row-group}.table tbody tr:hover{background:#f6f7fb}.table button{padding:6px 14px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-weight:600;color:#374151;transition:all .2s ease;font-size:13px;min-height:36px;min-width:60px}@media (max-width: 768px){.table button{min-height:44px;padding:10px 16px;font-size:14px}}.table button:hover{background:#7393b3;color:#fff;border-color:#7393b3;transform:translateY(-2px);box-shadow:0 8px 20px #7393b34d}.table button:active{transform:translateY(0);box-shadow:0 4px 12px #7393b340}.table button[title=Delete]:hover{background:#f0e6f0;border-color:#7f5a87;transform:translateY(-2px);box-shadow:0 8px 20px #7f5a8740}.table button[title=Delete]:hover svg{color:#7f5a87}.table button[title=Delete]:active{transform:translateY(0);box-shadow:0 4px 12px #7f5a8733}.table input[type=checkbox]{width:18px;height:18px;accent-color:#7393B3;cursor:pointer}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:12px;background:#eef2ff;color:#4338ca;font-weight:600;font-size:12px}.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.filters-spacer{flex:1}@media (max-width: 768px){.filters-spacer{display:none}.filters>div{width:100%}}.filters input,.filters select{padding:9px 10px;border-radius:10px;border:1px solid #e5e7eb;font-size:14px;background:#fff}.filters button{padding:10px 14px;border-radius:10px;border:1px solid #e5e7eb;background:#7393b3;color:#fff;cursor:pointer;font-weight:600;transition:all .15s ease}.filters button.primary{background:#7393b3!;color:#fff;border-color:#7393b3;box-shadow:0 10px 30px #7393b347}.filters button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.filters button.primary:hover{transform:translateY(-2px);box-shadow:0 12px 36px #7393b359}.filters button:active{transform:translateY(0)}.filters button.primary:active{transform:translateY(-1px)}.pagination{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:12px}.pagination button{padding:8px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;transition:all .2s ease;font-weight:500}.pagination button:hover{background:#f9fafb;border-color:#7393b3;transform:translateY(-1px);box-shadow:0 2px 8px #00000014}.pagination button:active{transform:translateY(0)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center;padding:20px;z-index:20;margin-left:260px;margin-top:100px}.modal{background:#fff;max-width:720px;width:100%;max-height:80vh;overflow:auto;border-radius:14px;box-shadow:0 18px 48px #11182733;padding:32px 24px 24px;scrollbar-width:auto;scrollbar-color:#7393B3 #e5e7eb}.modal::-webkit-scrollbar{width:12px}.modal::-webkit-scrollbar-track{background:#e5e7eb;border-radius:14px}.modal::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7393b3,#5a7a9a);border-radius:6px;border:2px solid #e5e7eb;box-shadow:0 2px 4px #0003}.modal::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a7a9a,#4a6a8a);box-shadow:0 2px 6px #0000004d}.modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.modal header button{padding:8px 16px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-weight:600;color:#374151;transition:all .2s ease;font-size:14px}.modal header button:hover{background:#f9fafb;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.modal header button:active{transform:translateY(0);box-shadow:0 2px 6px #00000014}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px}.detail-item{padding:10px 12px;border:1px solid #f1f3f9;border-radius:10px;background:#fbfcff}.detail-item .label{display:block;color:#6b7280;font-size:12px;margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}.detail-item .value{font-weight:500;color:#111827;word-break:break-word;padding:2px 0;font-size:12px}.link{color:#4f46e5;font-weight:600;text-decoration:none}.empty{text-align:center;padding:32px;color:#6b7280}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;overflow:hidden}.login-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea4d,#764ba24d);z-index:1}.login-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffff1a;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:2;animation:fadeIn .6s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.login-box{background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 25px 80px #0006,0 0 0 1px #ffffff1a;padding:48px 40px;width:100%;max-width:420px;position:relative;z-index:3;animation:slideUp .6s ease-out;border:1px solid rgba(255,255,255,.2)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-header{text-align:center;margin-bottom:40px}.login-logo{max-width:180px;height:auto;margin-bottom:20px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));animation:logoFadeIn .8s ease-out}@keyframes logoFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.login-header h1{font-size:28px;color:#111827;margin-bottom:8px}.login-header p{color:#6b7280;font-size:15px;font-weight:500;letter-spacing:.5px}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:#374151;font-size:14px}.form-group input,.form-group select{padding:14px 16px;border:2px solid #e5e7eb;border-radius:10px;font-size:15px;transition:all .3s ease;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-group input:focus,.form-group select:focus{outline:none;border-color:#5b67f1;box-shadow:0 0 0 4px #5b67f126,0 4px 12px #5b67f11a;background:#fff;transform:translateY(-1px)}.login-button{padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:16px;cursor:pointer;transition:all .3s ease;margin-top:12px;box-shadow:0 8px 24px #667eea66;position:relative;overflow:hidden}.login-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.login-button:hover:not(:disabled):before{left:100%}.login-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 32px #667eea80}.login-button:disabled{opacity:.6;cursor:not-allowed}.error-message{background:#fee2e2;color:#991b1b;padding:12px;border-radius:8px;font-size:14px;border:1px solid #fecaca}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center}.loading-spinner{font-size:18px;color:#6b7280}.error-container h2{color:#dc2626;margin-bottom:8px}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.page-header h2{margin:0;font-size:24px;font-weight:700}.btn-primary{padding:10px 20px;background:#7393b3;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #7393b34d}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{padding:8px 16px;background:#fff;color:#374151;border:1px solid #e5e7eb;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover:not(:disabled){background:#f9fafb;border-color:#d1d5db}.btn-sm{padding:6px 12px;font-size:13px;margin-right:8px}.btn-danger{background:#fee2e2;color:#991b1b;border-color:#fecaca;display:flex;align-items:center;gap:8px}.btn-danger:hover:not(:disabled){background:#fecaca;border-color:#f87171}.btn-danger svg{flex-shrink:0}.members-table-container{background:#fff;border-radius:16px;box-shadow:0 18px 48px #11182714;padding:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:auto;scrollbar-color:#7393B3 #e5e7eb}.members-table-container::-webkit-scrollbar{height:14px;width:14px}.members-table-container::-webkit-scrollbar-track{background:#e5e7eb;border-radius:10px;border:1px solid #d1d5db;box-shadow:inset 0 0 4px #0000000d}.members-table-container::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7393b3,#5a7a9a);border-radius:10px;border:2px solid #e5e7eb;box-shadow:0 2px 4px #0003;min-height:30px}.members-table-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a7a9a,#4a6a8a);box-shadow:0 2px 6px #0000004d}.members-table-container::-webkit-scrollbar-corner{background:#e5e7eb}@media (max-width: 768px){.members-table-container{padding:16px 16px 20px;margin:0;border-radius:0;width:100%;max-width:100%;overflow-x:scroll!important;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:auto;scrollbar-color:#7393B3 #d1d5db;scrollbar-gutter:stable}.members-table-container::-webkit-scrollbar{height:20px!important;width:20px!important;display:block!important;-webkit-appearance:none!important}.members-table-container::-webkit-scrollbar-track{background:#d1d5db!important;border:2px solid #9ca3af!important;box-shadow:inset 0 0 6px #00000026!important;border-radius:10px!important;display:block!important}.members-table-container::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7393b3,#5a7a9a)!important;border:3px solid #d1d5db!important;box-shadow:0 3px 6px #0006!important;min-height:50px!important;border-radius:10px!important;display:block!important;opacity:1!important}.members-table-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a7a9a,#4a6a8a)!important}.members-table-container::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#4a6a8a,#3a5a7a)!important;box-shadow:0 4px 8px #00000080!important}.members-table-container .data-table{width:auto!important;min-width:700px!important;display:table!important;table-layout:auto!important}.members-table-container .data-table th,.members-table-container .data-table td{white-space:nowrap!important}.members-table-container:before{content:"";position:absolute;bottom:0;right:0;width:40px;height:100%;background:linear-gradient(to left,rgba(115,147,179,.2),transparent);pointer-events:none;z-index:1;border-radius:0 10px 10px 0}}.data-table{width:100%;border-collapse:collapse;min-width:600px}.data-table th,.data-table td{padding:12px;text-align:left;border-bottom:1px solid #f1f3f9;white-space:nowrap}.data-table th{font-weight:700;color:#6b7280;background:#f9fafb;font-size:13px;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:10}.data-table tbody tr:hover{background:#f6f7fb}.data-table td:nth-child(3),.data-table td:nth-child(4){white-space:normal;max-width:200px}.data-table td:nth-child(4){min-width:150px}@media (max-width: 768px){.data-table{font-size:13px;width:auto;min-width:100%}.data-table th,.data-table td{padding:10px 8px;font-size:12px}.data-table th{font-size:11px;padding:12px 8px}.data-table td:nth-child(3),.data-table td:nth-child(4){max-width:180px;min-width:120px}.data-table td:last-child{white-space:normal}.data-table td:last-child>div{flex-direction:column;gap:6px}.data-table td:last-child button{width:100%;min-width:auto}.members-table-container{overflow-x:scroll!important;overflow-y:visible;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;padding-bottom:20px}}.table-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #e5e7eb}.table-avatar img{width:100%;height:100%;object-fit:cover}.table-avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px}.role-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.role-admin{background:#dbeafe;color:#1e40af}.role-ceo{background:#fef3c7;color:#92400e}.role-dev{background:#d1fae5;color:#065f46}.role-member{background:#e0e7ff;color:#3730a3}.status-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.status-draft{background:#f3f4f6;color:#4b5563}.status-ordered{background:#dbeafe;color:#1e40af}.status-partial{background:#fef3c7;color:#92400e}.status-received{background:#d1fae5;color:#065f46}.status-closed{background:#e5e7eb;color:#374151}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:500px;width:100%;max-height:80vh;overflow:auto;scrollbar-width:auto;scrollbar-color:#7393B3 #e5e7eb}.modal-content::-webkit-scrollbar{width:12px}.modal-content::-webkit-scrollbar-track{background:#e5e7eb;border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7393b3,#5a7a9a);border-radius:6px;border:2px solid #e5e7eb;box-shadow:0 2px 4px #0003}.modal-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a7a9a,#4a6a8a);box-shadow:0 2px 6px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 0;margin-bottom:20px}.modal-header h3{margin:0;font-size:20px;font-weight:700}.modal-close{background:none;border:none;font-size:28px;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .2s}.modal-close:hover{background:#f3f4f6}.modal-form{padding:0 24px 24px;display:flex;flex-direction:column;gap:20px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}.avatar-upload-container{display:flex;align-items:center;gap:16px}.avatar-preview{width:80px;height:80px;border-radius:50%;overflow:hidden;border:2px solid #e5e7eb;flex-shrink:0}.avatar-preview img{width:100%;height:100%;object-fit:cover}.avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:32px}.avatar-upload-controls{display:flex;flex-direction:column;gap:8px}@media (max-width: 900px){.stats-grid{grid-template-columns:1fr}.app-header{flex-direction:column;align-items:flex-start}.page-header{flex-direction:column;align-items:flex-start;gap:16px;padding:20px 16px 0}}.type-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.05em}.type-email{background:#fee2e2;color:#991b1b}.type-domain{background:#dbeafe;color:#1e40af}.page-subtitle{margin:4px 0 0;color:#6b7280;font-size:14px;font-weight:400}