/* ============================================================
   1. GLOBAL RESET & THEME
   ============================================================ */
   :root { --vtc-blue: #5266ff; --vtc-bg: #181818; --vtc-card: #242424; }
   html, body { height: 100%; width: 100%; margin: 0; padding: 0; background: var(--vtc-bg); color: #fff; font-family: 'Inter', "Segoe UI", sans-serif; overflow-x: hidden; }
   .text-white { color: #ffffff !important; }
   
   /* ============================================================
      2. HEADER & LAYOUT
      ============================================================ */
   .content-wrapper { margin-left: 280px; flex-grow: 1; padding: 40px; display: flex; flex-direction: column; min-height: 100vh; }
   .content-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; margin-bottom: 30px; overflow: visible !important; }
   .page-title { font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin: 0; }
   
   /* ============================================================
      3. SIDEBAR & PROFILE CARD
      ============================================================ */ 
   .sidebar { width: 280px; background: var(--vtc-card); height: 100vh; position: fixed; left: 0; top: 0; display: flex; flex-direction: column; border-right: 1px solid #333; z-index: 1000; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--vtc-blue) transparent; box-sizing: border-box; }
   .sidebar::-webkit-scrollbar { width: 6px; }
   .sidebar::-webkit-scrollbar-track { background: transparent; }
   .sidebar::-webkit-scrollbar-thumb { background: var(--vtc-blue); border-radius: 10px; }
   .sidebar-header { padding: 30px; text-align: center; flex-shrink: 0; }
   .sidebar-logo { width: 150px; height: auto; filter: drop-shadow(0 0 10px rgba(82, 102, 255, 0.3)); }
   .sidebar-nav { flex: 1 0 auto; padding: 10px 20px; display: flex; flex-direction: column; }
   .nav-item { display: block; padding: 12px 20px; color: #aaa; text-decoration: none; font-weight: 600; border-radius: 8px; margin-bottom: 8px; transition: 0.3s; flex-shrink: 0; }
   .nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
   .nav-item.active { color: #fff !important; background: rgba(82, 102, 255, 0.15) !important; border: 1px solid var(--vtc-blue) !important; box-shadow: 0 0 15px rgba(82, 102, 255, 0.4) !important; }
   .sidebar-profile { position: relative; margin: 0 15px 20px 15px; padding: 10px 12px; display: flex !important; align-items: center !important; border-radius: 12px; border: 1px solid #333; background-color: rgba(0,0,0,0.2); transition: 0.3s; text-decoration: none; width: calc(100% - 30px); min-height: 56px; flex-shrink: 0; }
   .sidebar-profile:hover { background-color: rgba(82, 102, 255, 0.1); border-color: var(--vtc-blue); }
   .sidebar-profile .profile-img { width: 36px !important; height: 36px !important; min-width: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--vtc-blue); margin-right: 12px; flex-shrink: 0; }
   .sidebar-profile .name { font-weight: 700; font-size: 0.9rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; line-height: 1.2; display: block; }
   
   /* ============================================================
      4. DROPDOWN (Enhanced 1.5x Size)
      ============================================================ */
   .select { display: none; position: relative; cursor: pointer; z-index: 1001; margin-left: auto !important; }
   .selected { background: #2a2f3b; padding: 12px 20px; border-radius: 10px; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--vtc-blue); min-width: 230px; transition: 0.3s; }
   .selected::before { content: attr(data-default); color: white; }
   .arrow { height: 12px; width: auto; fill: var(--vtc-blue); transition: transform 300ms; margin-left: 15px; }
   .select:hover .arrow { transform: rotate(180deg); }
   .options { display: flex; flex-direction: column; border-radius: 10px; padding: 8px; background-color: #2a2f3b; position: absolute; top: 100%; right: 0; width: 100%; opacity: 0; transition: 300ms; pointer-events: none; border: 2px solid #444; z-index: 999; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: translateY(-10px); } 
   .options::before { content: ""; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; background: transparent; }
   .select:hover > .options { opacity: 1; pointer-events: auto; transform: translateY(5px); }
   .option-item { border-radius: 6px; padding: 12px 15px; color: white; text-decoration: none; display: block; font-size: 16px; transition: 0.2s; }
   .option-item:hover { background-color: rgba(82, 102, 255, 0.15); color: var(--vtc-blue); padding-left: 20px; }
   
   /* ============================================================
      5. BUTTONS & FOOTER (FIXED WIDTHS)
      ============================================================ */
   .sidebar-footer { padding: 20px; border-top: 1px solid #333; display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; flex-shrink: 0; margin-top: auto; }

   .atropos-inner { border-radius: 12px; transition: 0.3s; border: 1px solid #333; background: var(--vtc-card); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 15px; }
   .staff-avatar { width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--vtc-blue); margin-bottom: 15px; background-size: cover; background-repeat: no-repeat; flex-shrink: 0; }
   .staff-name { color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 2px; text-align: center; }
   .staff-role { color: var(--vtc-blue); font-size: 0.75rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-align: center; }
   .login-btn, .logout-btn, .discord-btn, .admin-sidebar-btn { width: 100% !important; max-width: 240px; height: 45px !important; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; font-size: 14px !important; font-weight: 700 !important; border-radius: 10px !important; transition: 0.3s; border: 1px solid #5266FF !important; text-decoration: none !important; margin-bottom: 12px; flex-shrink: 0; box-sizing: border-box; }
   .discord-btn { background-color: #5865F2; color: #fff; } .discord-btn:hover { box-shadow: 0 0 20px rgba(88, 101, 242, 0.6); }
   .login-btn { background-color: transparent; color: #fff; }
   .admin-sidebar-btn { width: 100% !important; max-width: 240px; height: 45px !important; align-items: center; justify-content: center; padding: 0 !important; font-size: 14px !important; font-weight: 700 !important; border-radius: 10px !important; transition: 0.3s; border: none !important; text-decoration: none !important; margin-bottom: 12px; flex-shrink: 0; box-sizing: border-box;background-color: transparent; color: #fff; border: 1px solid #5266FF !important;display: none; }
   .logout-btn { background-color: transparent; border: 1px solid #5266FF !important; color: #ffffff !important; } .logout-btn:hover { box-shadow: 0 0 20px rgba(88, 101, 242, 0.6); }
   .main-footer { width: 100% !important; margin-top: 50px !important; padding: 20px 0 !important; border-top: 1px solid #333 !important; color: #666 !important; font-size: 0.85rem !important; text-align: center !important; display: block; clear: both !important; }
   #loginBtn, #logoutBtn { display: none !important; }
   
   /* ============================================================
      6. CARDS & TABLES
      ============================================================ */
   .bg-dark-soft { background: #2a2a2a; border: 1px solid #333; border-radius: 12px; }
   .section-divider { border-bottom: 1px solid #333; margin: 10px 0 20px 0; padding-bottom: 10px; display: flex; align-items: center; gap: 1px; }
   .section-divider h4 { margin: 0; letter-spacing: 2px; color: var(--vtc-blue) !important; font-weight: 900; }
   .card h6 { color: #ffffff !important; opacity: 1 !important; font-weight: 700 !important; }
   .table-responsive { overflow-x: auto !important; width: 100%; border-radius: 12px; }
   .log-container-card { background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: 1px solid #333; padding: 15px; margin-top: 20px; }
   .table-fancy { width: 100%; border-collapse: collapse; color: #ffffff !important; table-layout: fixed; }
   .table-fancy th { color: #ffffff !important; opacity: 0.5; padding: 15px 20px; font-size: 0.65rem; text-align: left; border-bottom: 1px solid #444; vertical-align: middle; }
   .table-fancy td { padding: 15px 20px; color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.85rem; vertical-align: middle; word-wrap: break-word; }
   .company-badge { font-size: 0.65rem; color: #aaaaaa !important; display: block; margin-top: 2px; font-weight: normal; }
   .game-badge { font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; font-weight: 800; }
   .badge-ets2 { background: #5266ff; color: white; }
   .badge-ats { background: #f1c40f; color: black; }
   
   /* ============================================================
      7. ADMIN PANEL & INPUTS
      ============================================================ */
   .form-label-white { color: #ffffff !important; font-weight: 600; font-size: 0.85rem; margin-bottom: 5px; display: block; }
   .search-input { background: #212121; border: 1px solid #444; color: white; padding: 8px 15px; border-radius: 6px; width: 250px; outline: none; }
   .login-input { width: 100%; height: 45px; background: #212121 !important; border: 1px solid #444 !important; border-radius: 8px !important; padding: 0 15px; color: #fff !important; outline: none; transition: 0.3s; }
   .login-input:focus { border-color: var(--vtc-blue) !important; box-shadow: 0 0 10px rgba(82, 102, 255, 0.2); }
   input[type="checkbox"] { accent-color: var(--vtc-blue); width: 18px; height: 18px; vertical-align: middle; cursor: pointer; }
   .login-btn-main { background: var(--vtc-blue); color: white; padding: 12px; border: none; border-radius: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
   .login-btn-main:hover { background: #3f4cff; box-shadow: 0 0 15px rgba(82, 102, 255, 0.4); }
   .perm-badge { background: var(--vtc-blue); font-size: 0.65rem; padding: 3px 8px; border-radius: 4px; color: #fff; font-weight: 600; }
   .card h4, .card p, .card .text-muted { color: #ffffff !important; opacity: 1 !important; } .card .small { color: #aaaaaa !important; }
   .card .text-white.small.fw-bold.text-uppercase { color: #ffffff !important; opacity: 1 !important; }
   .role-scroll { background: rgba(0, 0, 0, 0.25); border: 1px solid #444; border-radius: 8px; padding: 12px; max-height: 180px; /* bigger container; adjust as you like */ overflow-y: auto; }
   .role-check { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 0.9rem; margin: 6px 0; cursor: pointer; }
   .role-scroll::-webkit-scrollbar { width: 10px; }
   .role-scroll::-webkit-scrollbar-track { background: transparent; }
   .role-scroll::-webkit-scrollbar-thumb { background: rgba(82, 102, 255, 0.2); border-radius: 8px;  border: 2px solid rgba(0, 0, 0, 0.2); }
   .role-scroll::-webkit-scrollbar-thumb:hover { background: rgba(82, 102, 255, 0.3); }
   .role-scroll {  scrollbar-width: thin; scrollbar-color: rgba(82, 102, 255, 0.2) transparent; }
   /* ============================================================
      8. RESPONSIVE STAFF DIRECTORY
      ============================================================ */
   .staff-row-fancy { display: flex; flex-wrap: wrap; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid #333; border-radius: 10px; padding: 15px; margin-bottom: 10px; transition: 0.3s; gap: 15px; }
   .staff-row-fancy:hover { border-color: var(--vtc-blue); background: rgba(82, 102, 255, 0.05); }
   .staff-col-user { flex: 1 1 180px; display: flex; flex-direction: column; }
   .staff-role-subtext { font-size: 0.7rem; color: var(--vtc-blue); text-transform: uppercase; font-weight: 700; margin-top: 2px; letter-spacing: 0.5px; }
   .staff-col-perms { flex: 2 1 200px; display: flex; flex-wrap: wrap; gap: 5px; }
   .staff-col-actions { flex: 1 1 auto; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
   @media (max-width: 768px) { .staff-col-actions { justify-content: flex-start; width: 100%; margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; } }
   
   /* ============================================================
      9. CLEAN ADMIN BUTTONS
      ============================================================ */
   .admin-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: none; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); text-decoration: none; }
   .admin-btn svg { opacity: 0.7; }
   .admin-btn:hover { background: rgba(255,255,255,0.1); color: #fff; transform: translateY(-1px); }
   .admin-btn:hover svg { opacity: 1; }
   .admin-btn.edit:hover { background: rgba(0, 212, 255, 0.15); color: #00d4ff; }
   .admin-btn.view:hover { background: rgba(82, 102, 255, 0.15); color: var(--vtc-blue); }
   .admin-btn.image:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
   .admin-btn.pass:hover { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
   .admin-btn.delete:hover { background: rgba(255, 94, 94, 0.15); color: #ff5e5e; }
   
   /* ============================================================
      10. FLOATING TMP BUTTON (Wide & Short)
      ============================================================ */
   .tmp-float-btn { position: absolute; bottom: 20px; right: 20px; background: var(--vtc-blue); width: 110px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.3); padding: 0 5px; overflow: hidden; }
   .tmp-float-btn img { display: block; max-width: 100%; height: 95%; object-fit: contain; }
   .tmp-float-btn:hover { background: #3f4cff; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(82, 102, 255, 0.4); border-color: rgba(255,255,255,0.3); }
   @media (max-width: 768px) { .tmp-float-btn { position: relative; bottom: 0; right: 0; margin: 20px auto 0; } }
   
   /* ============================================================
      11. JOB TIMELINE UI
      ============================================================ */
   .timeline-modal-body { background: #1a1a1a; padding: 30px; border-radius: 15px; }
   .timeline-wrapper { display: flex; overflow-x: auto; padding: 80px 20px; position: relative; scrollbar-width: thin; scrollbar-color: var(--vtc-blue) transparent; }
   .timeline-line { position: absolute; top: 50%; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.1); transform: translateY(-50%); z-index: 1; }
   .timeline-item { position: relative; min-width: 160px; flex-shrink: 0; z-index: 2; }
   .timeline-marker { width: 32px; height: 32px; background: #333; border: 2px solid #555; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; z-index: 3; transition: 0.3s; font-size: 1.1rem; }
   .timeline-item.top .timeline-marker { margin-bottom: 20px; } .timeline-item.bottom .timeline-marker { margin-top: 20px; }
   .timeline-content { background: #252525; border: 1px solid #444; padding: 10px; border-radius: 8px; position: absolute; left: 50%; transform: translateX(-50%); width: 140px; text-align: center; }
   .timeline-item.top .timeline-content { bottom: 50px; } .timeline-item.bottom .timeline-content { top: 50px; }
   .timeline-content .time { font-size: 0.65rem; opacity: 0.5; display: block; margin-bottom: 3px; }
   .timeline-content .label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: #fff; }
   
   /* ============================================================
      12. ATROPOS GLOW EFFECTS FOR PARTNERS (FIXED)
      ============================================================ */
   .atropos-active .atropos-inner{border-color:var(--vtc-blue)!important;box-shadow:0 0 30px rgba(82,102,255,.3)!important}.my-atropos-partner .atropos-inner{border-radius:20px;overflow:hidden;border:1px solid #333;transition:.3s}.atropos-inner,.atropos-rotate,.atropos-scale{pointer-events:none!important}.atropos-inner a,.atropos-inner button,.atropos-inner .card{pointer-events:auto!important}
   
   /* ============================================================
      13. FANCY CONVOY WIDGET
      ============================================================ */
   #liveConvoyWidget { transition: opacity 0.5s ease; cursor: pointer; visibility: visible !important; opacity: 1 !important; position: relative; z-index: 10; }
   .my-atropos-convoy .atropos-inner { pointer-events: auto !important; }
   .visible .atropos-rotate { animation: subtleShake 6s infinite ease-in-out; }
   .convoy-card-fancy { background: rgba(82, 102, 255, 0.1); border: 1px solid rgba(82, 102, 255, 0.3); border-radius: 12px; padding: 12px 25px; display: flex; align-items: center; backdrop-filter: blur(10px); min-width: 300px; min-height: 72px; text-decoration: none !important; }
   .status-light-container { position: relative; width: 14px; height: 14px; margin-right: 15px; flex-shrink: 0; }
   .status-light-core { width: 12px; height: 12px; background: #2ecc71; border-radius: 50%; position: relative; z-index: 2; box-shadow: 0 0 10px #2ecc71; }
   .status-light-glow { position: absolute; top: -6px; left: -6px; width: 26px; height: 26px; background: #2ecc71; border-radius: 50%; filter: blur(6px); opacity: 0.6; animation: pulseGlow 2s infinite ease-in-out; }
   .convoy-label { font-size: 0.55rem; font-weight: 900; letter-spacing: 2px; color: var(--vtc-blue); margin-bottom: 2px; text-transform: uppercase; }
   .convoy-title { color: #fff; font-weight: 800; font-size: 0.9rem; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .convoy-time { font-size: 0.65rem; color: #aaa; font-weight: 600; margin-top: 2px; }
   .convoy-arrow { margin-left: auto; color: var(--vtc-blue); opacity: 0.5; transition: 0.3s; padding-left: 10px; pointer-events: none; }
   .atropos-active .convoy-arrow { opacity: 1; transform: translateX(5px); }
   @keyframes pulseGlow { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.4); opacity: 0.7; } }
   @keyframes subtleShake { 0%, 85%, 100% { transform: rotate(0deg); } 88% { transform: rotate(1deg); } 92% { transform: rotate(-1deg); } 96% { transform: rotate(1deg); } }
   
   /* ============================================================
      14. NEON DASHBOARD SEARCH BAR (FIXED & SCOPED)
      ============================================================ */
   .dashboard-search { display: flex; justify-content: flex-start; width: 100%; position: relative; overflow: visible !important; z-index: 10; }
   #main{position:relative;width:450px;display:flex;align-items:center;justify-content:center;overflow:visible!important}
   #poda{display:flex;align-items:center;justify-content:center;position:relative;margin-top:1px;width:450px;overflow:visible!important}
   #poda .white::before,#poda .border::before,#poda .darkBorderBg::before,#poda .glow::before{content:"";top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;width:800px;height:800px;animation:rotate 4s linear infinite}
   #poda .white,#poda .border,#poda .darkBorderBg{height:55px;width:450px;position:absolute;overflow:hidden;z-index:1;border-radius:12px;filter:blur(2px);pointer-events:none}
   #poda .glow{height:80px;width:480px;position:absolute;overflow:hidden;z-index:0;border-radius:20px;filter:blur(25px);pointer-events:none;top:-12.5px;left:-15px;opacity:0.9!important}
   #poda .input{background-color:#222!important;border:none;width:440px;height:48px;border-radius:10px;color:white;padding-inline:50px;font-size:15px;outline:none;position:relative;z-index:5}
   #poda .white{filter:blur(4px);opacity:0.5;z-index:1}
   #poda .white::before{background-image:conic-gradient(transparent 0%,var(--vtc-blue) 10%,transparent 20%,transparent 50%,var(--vtc-blue) 60%,transparent 70%)}
   #poda .border{filter:blur(0.5px);z-index:2}
   #poda .border::before{background-image:conic-gradient(#222,var(--vtc-blue) 5%,#222 14%,#222 50%,var(--vtc-blue) 60%,#222 64%)}
   #poda .darkBorderBg{z-index:1}
   #poda .darkBorderBg::before{background-image:conic-gradient(transparent,#111,transparent 10%,transparent 50%,#111,transparent 60%)}
   #poda .glow::before{background-image:conic-gradient(transparent,var(--vtc-blue) 5%,transparent 38%,transparent 50%,var(--vtc-blue) 60%,transparent 87%);z-index:-1}
   @keyframes rotate{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
   #search-icon{position:absolute;left:15px;top:14px;width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235266ff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;z-index:10;pointer-events:none}
   .search-suggestions-box{position:absolute;top:60px;left:5px;width:440px;background:#1a1a1a;border:1px solid var(--vtc-blue);border-radius:10px;z-index:100;max-height:300px;overflow-y:auto;display:none;box-shadow:0 10px 30px rgba(0,0,0,.5)}.suggestion-item{display:flex;align-items:center;padding:12px 15px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:.2s}.suggestion-item:hover{background:rgba(82,102,255,.15)}.suggestion-img{width:32px;height:32px;border-radius:50%;margin-right:12px;border:1px solid var(--vtc-blue)}.suggestion-info .name{font-weight:700;font-size:.9rem;display:block}.suggestion-info .role{font-size:.7rem;color:var(--vtc-blue);text-transform:uppercase;font-weight:800}
   .nav-dropdown{position:relative}.dropdown-container{max-height:0;overflow:hidden;transition:max-height .4s ease;background:rgba(0,0,0,.2);border-radius:8px;margin:0 20px}.nav-dropdown:hover .dropdown-container{max-height:200px;margin-bottom:10px;border:1px solid rgba(255,255,255,.05)}.dropdown-toggle-btn{cursor:default}.sub-item{font-size:.85rem!important;padding:10px 15px 10px 30px!important;margin:0!important}.dropdown-toggle-btn{color:#fff;background:rgba(255,255,255,.05)}
  .select {
    min-width: 180px; 
    max-width: 220px;
}

/* Ensure icons in the dropdown look right */
.dropdown-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    flex-shrink: 0; /* Prevents the icon from squishing */
}

/* Fix for the Loading text if it was coming from CSS ::before */
.selected::before {
    content: none !important;
}

/* Ensure the layout inside the button stays centered */
.selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 45px;
}

.user-name-text {
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* If the name is too long, it adds ... */
}
   /* ============================================================
   DRIVERS XP LEADERBOARD
   ============================================================ */
  .card.bg-dark-soft { overflow: visible !important; }
  .table-responsive { overflow: visible !important; padding: 10px; }
  .xp-podium { display: flex; gap: 20px; margin-bottom: 40px; align-items: stretch; }
  .xp-podium-card { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 20px; padding: 30px 20px; text-align: center; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; }
  .xp-podium-card.place-1 { background: linear-gradient(145deg, rgba(255, 215, 0, 0.15), rgba(20, 20, 20, 0.4)); border-color: #ffd700; transform: scale(1.05); z-index: 5; box-shadow: 0 15px 40px rgba(255, 215, 0, 0.1); }
  .xp-podium-card.place-2 { background: linear-gradient(145deg, rgba(192, 192, 192, 0.1), rgba(20, 20, 20, 0.4)); border-color: #c0c0c0; }
  .xp-podium-card.place-3 { background: linear-gradient(145deg, rgba(205, 127, 50, 0.1), rgba(20, 20, 20, 0.4)); border-color: #cd7f32; }
  .xp-podium-card.place-1 .xp-total-badge { background: #ffd700; color: #000; }
  .xp-podium-card:hover { transform: translateY(-8px); border-color: var(--vtc-blue); box-shadow: 0 15px 45px rgba(82, 102, 255, 0.4); background: rgba(82, 102, 255, 0.15); }
  .xp-avatar { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 15px; border: 3px solid var(--vtc-blue); object-fit: cover; }
  .xp-rank-badge { position: absolute; top: 15px; right: 15px; font-size: 0.7rem; font-weight: 900; background: rgba(255,255,255,0.1); padding: 2px 10px; border-radius: 10px; }
  .xp-name a { font-size: 1.3rem; font-weight: 800; color: #fff; text-decoration: none; display: block; margin-bottom: 5px; }
  .xp-level { font-size: 0.75rem; font-weight: 700; opacity: 0.5; text-transform: uppercase; letter-spacing: 1px; }
  .xp-total-badge { display: inline-block; padding: 8px 20px; border-radius: 25px; background: rgba(255,255,255,0.05); color: var(--vtc-blue); font-weight: 900; font-size: 1.1rem; margin: 15px 0 10px; }
  .xp-sub { font-size: 0.7rem; opacity: 0.5; font-weight: 600; color: #fff; }
  .table-fancy { border-collapse: separate; border-spacing: 0 8px; width: 100%; table-layout: fixed; }
  .table-fancy thead th { border: none; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 2px; opacity: 0.3; padding: 10px 20px; }
  .leaderboard-row { background: rgba(255,255,255,0.02); border-radius: 12px; transition: 0.25s all ease-in-out; border: 1px solid transparent; }
  .leaderboard-row:hover { background: rgba(82, 102, 255, 0.08); transform: scale(1.002); border-color: rgba(82, 102, 255, 0.8); box-shadow: 0 0 30px rgba(82, 102, 255, 0.3); }
  .leaderboard-row td { border: none !important; padding: 12px 20px !important; vertical-align: middle; }
  .rank-cell { width: 100px; text-align: center; }
  .rank-content { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 4px; }
  .rank-num { font-weight: 900; opacity: 0.2; font-size: 1.2rem; font-style: italic; }
  .trend-up { color: #2ecc71; font-size: 0.7rem; }
  .trend-down { color: #e74c3c; font-size: 0.7rem; }
  .trend-same { opacity: 0.1; font-size: 0.5rem; }
  .driver-cell { width: auto; overflow: hidden; }
  .row-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(82,102,255,0.3); }
  .driver-name-link { font-weight: 700; color: #fff; font-size: 1rem; text-decoration: none; white-space: nowrap; }
  .level-cell { width: 100px; font-weight: 800; font-size: 0.8rem; color: #aaa; text-align: left; }
  .xp-cell { width: 260px; text-align: right; }
  .xp-total-text { font-weight: 900; color: var(--vtc-blue); font-size: 1.1rem; }
  .xp-breakdown-text { font-size: 0.65rem; opacity: 0.5; font-weight: 600; color: #fff; margin-bottom: 5px; }
  .xp-mini-bar-bg { width: 100%; height: 3px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
  .xp-mini-bar-fill { height: 100%; background: var(--vtc-blue); box-shadow: 0 0 10px var(--vtc-blue); }
  .is-self-row { background: rgba(82, 102, 255, 0.1) !important; border-color: rgba(82, 102, 255, 0.4) !important; }
  .is-self-card { border-color: #ffd700 !important; }
  .self-tag { font-size: 0.6rem; color: var(--vtc-blue); font-weight: 900; margin-left: 5px; letter-spacing: 1px; }
  #lastUpdated { white-space: nowrap; text-transform: uppercase; font-weight: 700; pointer-events: none; }
  .xp-cell { width: 260px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
  .xp-mini-bar-bg { width: 140px; height: 3px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; margin-top: 5px; }
  .xp-mini-bar-fill { height: 100%; background: var(--vtc-blue); box-shadow: 0 0 10px var(--vtc-blue); border-radius: 3px; }


  :root {
    --row-bg: rgba(255, 255, 255, 0.03);
    --row-hover: rgba(255, 255, 255, 0.07);
    --accent: #5266ff;
}

.leaderboard-wrapper {
    background: rgba(10, 10, 10, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.leaderboard-header-row {
    display: flex;
    padding: 15px 25px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    background: var(--row-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
}

.leaderboard-row:hover {
    background: var(--row-hover);
    transform: scale(1.002);
}

.is-self-row {
    background: rgba(82, 102, 255, 0.1) !important;
    border-left: 4px solid var(--accent);
}

/* Column Definitions */
.col-rank { width: 80px; font-weight: 800; }
.col-driver { flex: 1; display: flex; align-items: center; gap: 15px; }
.col-level { width: 120px; font-weight: 700; color: var(--accent); }
.col-xp { width: 280px; }

/* Image Lazy Loading State */
.row-avatar {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: #222; /* Placeholder color */
    object-fit: cover;
    transition: opacity 0.5s ease;
    opacity: 0;
}

.row-avatar.loaded {
    opacity: 1;
}

/* Pagination Styling */
.modern-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.pag-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
}

.pag-btn:disabled {
    background: #222;
    color: #555;
    cursor: not-allowed;
}

.pag-info {
    font-size: 0.85rem;
    color: #888;
}

/* Gap below search */
.dashboard-search {
    margin-bottom: 30px !important;
}

/* User Pin Styling */
.user-pin-container {
    border-bottom: 2px solid var(--vtc-blue);
    margin-bottom: 10px;
    background: rgba(82, 102, 255, 0.05);
}

.pin-label {
    font-size: 0.6rem;
    color: var(--vtc-blue);
    font-weight: 800;
    letter-spacing: 1px;
    padding: 5px 25px;
    text-transform: uppercase;
}

.xp-podium {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    align-items: flex-end; /* Keeps them aligned at the bottom */
}

.xp-podium-card .xp-avatar {
    width: 130px !important;  /* 2x bigger (assumes previous was ~65px) */
    height: 130px !important;
    border-radius: 20px;     /* Slightly more rounded corner for the big size */
    margin: 15px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

.xp-podium-card:hover .xp-avatar {
    transform: scale(1.05);
}

.xp-podium-card {
    min-width: 280px; /* Give them enough breathing room */
}

/* Tiered Podium Layout */
.xp-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    margin: 40px 0;
    padding-bottom: 20px;
}

.xp-podium-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to top */
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.8) 0%, rgba(15, 15, 15, 0.9) 100%);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    width: 260px; /* Slightly wider to fit text better */
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 15px; /* Space for the subtext at the very bottom */
}

/* Tiered MIN-heights so they don't overflow */
.place-1 { order: 2; min-height: 360px; border: 1px solid rgba(255, 215, 0, 0.3); }
.place-2 { order: 1; min-height: 320px; border: 1px solid rgba(192, 192, 192, 0.2); }
.place-3 { order: 3; min-height: 300px; border: 1px solid rgba(205, 127, 50, 0.2); }


/* Large Circular Avatars */
.podium-avatar-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
}

.place-1 .podium-avatar-wrapper { width: 130px; height: 130px; }

.xp-podium-card .xp-avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 4px solid #222;
}

/* Medal Borders */
.place-1 .xp-avatar { border-color: #ffd700; } /* Gold */
.place-2 .xp-avatar { border-color: #c0c0c0; } /* Silver */
.place-3 .xp-avatar { border-color: #cd7f32; } /* Bronze */

/* Rank Badges */
.xp-rank-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vtc-blue);
    padding: 4px 15px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 0.8rem;
}

.place-1 .xp-rank-badge { background: #ffd700; color: #000; }

.xp-name a {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
}

.xp-total-badge {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
    margin: 10px 0;
}

/* Update the podium container for the gap */
.xp-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 30px; /* Increased gap between cards */
    margin: 40px 0;
    padding-bottom: 20px;
}

/* Adjust card heights to ensure 1-line text fits */
.place-1 { order: 2; height: 340px; }
.place-2 { order: 1; height: 300px; }
.place-3 { order: 3; height: 280px; }

/* Styling for the single-line XP breakdown at the bottom */
.xp-podium-subtext {
    margin-top: auto; /* This is the magic line that pushes text to the bottom */
    font-size: 0.65rem;
    opacity: 0.5;
    white-space: nowrap;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* This creates the physical gap between rows */
    padding: 15px; /* Padding inside the wrapper */
}

.leaderboard-row {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05); /* subtle border instead of just bottom */
    border-radius: 10px; /* Rounds the corners of each individual row */
    transition: all 0.2s ease;
}

.leaderboard-row:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateX(5px); /* Slight slide effect on hover */
    border-color: var(--vtc-blue);
}

/* User Standing Section Gap */
.pinned-user-section {
    margin-bottom: 25px !important; /* Space between "Your Position" and the rest of the list */
}

/* Special styling for the pinned row to make it pop */
.pinned-row {
    border: 1px solid var(--vtc-blue) !important;
    background: rgba(82, 102, 255, 0.08) !important;
}



   /* ============================================================
      16. LOADING CURTAIN & REVEAL
      ============================================================ */
   body.loading-curtain::after { content: ""; position: fixed; inset: 0; background-color: #181818; z-index: 99999; opacity: 1; visibility: visible; }
   body.loading-curtain::before { content: ""; position: fixed; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border: 3px solid rgba(82, 102, 255, 0.1); border-top-color: var(--vtc-blue); border-radius: 50%; z-index: 100000; animation: curtain-spin 0.6s linear infinite; }
   @keyframes curtain-spin { to { transform: rotate(360deg); } }
   @keyframes curtain-exit { 0% { opacity: 1; backdrop-filter: blur(10px); } 100% { opacity: 0; visibility: hidden; backdrop-filter: blur(0px); } }
   body:not(.loading-curtain)::after { animation: curtain-exit 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; pointer-events: none; }
   body:not(.loading-curtain)::before { display: none; }
   body:not(.loading-curtain) .content-wrapper { animation: content-reveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
   @keyframes content-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
   
   /* ============================================================
      17. MODAL BLUR & MISC
      ============================================================ */
   body.modal-open .content-wrapper, body.modal-open .sidebar { filter: blur(8px); pointer-events: none; transition: filter 0.3s ease; }
   .modal-backdrop.show { backdrop-filter: blur(4px); background-color: rgba(0, 0, 0, 0.7); }
   #viewAvatar, .profile-img, .xp-avatar, .row-avatar { object-fit: cover !important; object-position: center; }
   
   /* ============================================================
      18. SIDEBAR SOCIAL SQUARE BUTTONS
      ============================================================ */
   .sidebar-socials { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 0 15px 25px 15px; width: 100%; box-sizing: border-box; flex-shrink: 0; }
   .social-sq-btn { width: 44px; height: 44px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none !important; animation: social-float 4s ease-in-out infinite; flex-shrink: 0; }
   .social-sq-btn.discord { animation-delay: 0s; } 
   .social-sq-btn.tmp { animation-delay: 0.5s; } 
   .social-sq-btn.web { animation-delay: 1s; } 
   .social-sq-btn.insta { animation-delay: 1.5s; }
   @keyframes social-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-3px) rotate(-2deg); } 66% { transform: translateY(-1px) rotate(2deg); } }
   .social-sq-btn img.white-icon { width: 22px; height: 22px; filter: brightness(0) invert(1); opacity: 0.7; transition: 0.3s; }
   .social-sq-btn img.color-icon { width: 30px; height: auto; transition: 0.3s; }
   .social-sq-btn:hover { animation-play-state: paused; transform: translateY(-8px) scale(1.1); background: rgba(82, 102, 255, 0.2); border-color: var(--vtc-blue); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
   .social-sq-btn:hover img.white-icon { opacity: 1; }
   
   /* ============================================================
      19. RESPONSIVE SCALING (FORCED)
      ============================================================ */
   @media screen and (max-width: 1550px) {
    .sidebar { width: 240px !important; }
    .content-wrapper { margin-left: 240px !important; padding: 20px !important; }
    #poda, #poda .white, #poda .border, #poda .darkBorderBg { width: 100% !important; max-width: 320px; }
    #poda .input { width: 100% !important; max-width: 310px; }
    #poda .glow { width: 100% !important; max-width: 380px; }
   }
   @media screen and (max-width: 1100px) {
       .sidebar { width: 80px !important; }
       .sidebar .name, .sidebar-header, .sidebar-footer, .sidebar-profile .name { display: none !important; }
       .content-wrapper { margin-left: 80px !important; }
       .nav-item { text-align: center !important; font-size: 20px !important; }
       .sidebar-socials { flex-direction: column; }
   }
   @media (max-width: 768px) {
       .sidebar { width: 100% !important; height: auto !important; position: relative !important; border-right: none; border-bottom: 1px solid #333; }
       .content-wrapper { margin-left: 0 !important; padding: 15px !important; }
       .sidebar-nav { display: flex; overflow-x: auto; white-space: nowrap; padding: 10px; }
       .nav-item { display: inline-block; margin-right: 10px; margin-bottom: 0; font-size: 14px; }
   }

/* ============================================================
   20. PROFILE PICTURE CUSTOMISATION
   ============================================================ */
   #viewAvatar, #sidebarAvatar, .suggestion-img, #avatarPreview { object-fit: cover !important; }
  #viewAvatar, .profile-img, .row-avatar, .xp-avatar, .suggestion-img, #avatarPreview {object-fit: cover !important;}

/* ============================================================
   20.1 SETTINGS INTEGRATIONS (Discord/Steam parity)
   ============================================================ */
  #discord_btn.integration-main-btn,
  #connectSteamBtn.integration-main-btn {width: 200px !important;min-width: 200px !important;height: 44px !important;min-height: 44px !important;display: inline-flex !important;align-items: center !important;justify-content: center !important;font-size: 0.85rem !important;font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; white-space: nowrap !important; margin: 0 !important; padding: 0 12px !important; vertical-align: middle !important; }
  #unlinkDiscordBtn.integration-unlink-btn, #unlinkSteamBtn.integration-unlink-btn { width: 88px !important; min-width: 88px !important; height: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.8rem !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.2px !important; text-transform: none !important; margin: 0 !important;padding: 0 10px !important;vertical-align: middle !important; }
  .integration-actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; }
  .table-fancy th { white-space: nowrap; }

/* ===============================
   21. Event Management – HARD FIX
   =============================== */
 .event-management-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
 .event-driver-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
 .main-footer { width: 100%; padding: 20px 0; border-top: 1px solid #333; color: #666; font-size: 0.85rem; text-align: center; margin-top: auto; }
 
/* ============================================================
   22. CHALLENGE LEADERBOARD
   ============================================================ */
	.table-fancy th:first-child, .table-fancy td:first-child { white-space: nowrap !important; min-width: 80px; }

/* ============================================================
  23. CHALLENGE CREATE CARGO MENU
  ============================================================ */
  .custom-select-wrapper { position: relative; width: 100%; }
  .custom-dropdown-menu { position: absolute; top: 100%; left: 0; width: 100%; background: #1a1a1a; border: 1px solid #444; border-radius: 8px; margin-top: 5px; max-height: 300px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
  .dropdown-item-custom { padding: 10px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222; transition: 0.2s; font-size: 0.9rem; color: #eee; }
  .dropdown-item-custom:hover { background: var(--vtc-blue); color: white; }
  .dlc-badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1); color: #aaa; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
  .dropdown-item-custom:hover .dlc-badge { background: rgba(255,255,255,0.2); color: white; }
  .custom-dropdown-menu::-webkit-scrollbar { width: 6px; }
  .custom-dropdown-menu::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }

/* ============================================================
  24. LOGBOOK PAGE
  ============================================================ */

  select.login-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235266ff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; padding-right: 2.5rem; }
  select.login-input:hover, select.login-input:focus { background-color: #212121 !important; /* Matches your input color */ border-color: var(--vtc-blue) !important; color: white !important; }
  input[type="date"].login-input::-webkit-calendar-picker-indicator { filter: invert(1) sepia(100%) saturate(1000%) hue-rotate(190deg); /* Makes icon blueish */ cursor: pointer; }
  #paginationControls .admin-btn.active { background: var(--vtc-blue) !important; color: white !important; border-color: var(--vtc-blue) !important; box-shadow: 0 0 10px rgba(82, 102, 255, 0.4); }
  #paginationControls .admin-btn { display: flex; align-items: center; justify-content: center; padding: 5px 12px; }
  .job-route-modal-body { min-height: 260px; }
  .nav-dropdown:hover .folder-caret svg { transform: rotate(90deg); transition: transform 180ms ease; }
  .nav-dropdown.open .folder-caret svg { transform: rotate(90deg); transition: transform 180ms ease; }
  .nav-dropdown.nav-open .dropdown-container { display: block !important; max-height: 1000px !important; /* large enough to reveal content */ overflow: visible !important; }
  .nav-dropdown .dropdown-container { transition: max-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease; overflow: hidden; max-height: 0; opacity: 0; display: block; }
  .nav-dropdown.nav-open .dropdown-container { opacity: 1; max-height: 1200px; }
  .folder-caret { display: inline-flex; align-items: center; transition: transform 180ms ease; }
  .nav-dropdown.nav-open .folder-caret { transform: rotate(90deg); }

/* =====================================================
  25. TIMELINE MODAL BACKDROP
===================================================== */
.timeline-large-backdrop{position:fixed;inset:0;z-index:220000;display:flex;align-items:center;justify-content:center;background:rgba(6,7,8,0.65);backdrop-filter:blur(8px);}

/* =====================================================
  26. MODAL CONTAINER (FULLY RESPONSIVE)
===================================================== */
.timeline-large.modal-card{width:clamp(900px,92vw,1500px);height:clamp(650px,92vh,1000px);background:linear-gradient(180deg,rgba(20,20,22,0.98),rgba(10,10,12,0.98));border:1px solid rgba(255,255,255,0.04);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:1 40px 120px rgba(0, 0, 0, 0.53);}

/* =====================================================
  27. HEADER
===================================================== */
.timeline-large__header{display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,1.2vw,18px) clamp(16px,1.4vw,22px);border-bottom:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg,rgba(20,20,22,0.98),rgba(10,10,12,0.98));}
.timeline-large__title{display:flex;gap:12px;align-items:center;}
.timeline-large__title .h1{font-weight:900;font-size:clamp(0.9rem,0.95vw,1.1rem);letter-spacing:1px;}
.timeline-large__title .muted{color:#aaa;font-size:clamp(0.75rem,0.8vw,0.9rem);transition:all .2s ease;cursor:pointer;}
.timeline-large__title .muted:hover{color:#fff;text-shadow:0 0 8px rgba(255,255,255,0.25);transform:translateY(-1px);}
.btn-icon{background:none;border:none;color:#ddd;font-size:clamp(16px,1vw,20px);cursor:pointer;padding:6px 10px;border-radius:8px;}
.btn-icon:hover{background:rgba(255,255,255,0.05);color:#fff;}

/* =====================================================
  28. CONTENT AREA
===================================================== */
.timeline-large__content{flex:1;overflow:auto;padding:clamp(12px,1.2vw,18px);display:flex;flex-direction:column;gap:clamp(12px,1.2vw,18px);}
.timeline-large__footer{display:none!important;}

/* =====================================================
  29. ROW LAYOUT
===================================================== */
.tl-row{display:flex;gap:clamp(10px,1vw,18px);align-items:stretch;}
.tl-row--top .tl-box{flex:1;}
.tl-row--mid .tl-box{flex:1;}
.tl-row--timeline .tl-box{flex:1;height:clamp(240px,38vh,420px);}

/* =====================================================
  30. GENERIC BOX
===================================================== */
.tl-box{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:10px;padding:clamp(10px,0.9vw,14px);display:flex;flex-direction:column;}
.tl-box__label{font-size:clamp(0.65rem,0.65vw,0.75rem);font-weight:900;letter-spacing:1px;color:var(--vtc-blue);margin-bottom:10px;}
.tl-box__body{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;}

/* =====================================================
  31. FROM / TO
===================================================== */
.tl-loc{flex:1;display:flex;flex-direction:column;}
.tl-loc--to{align-items:flex-end;text-align:right;}
.tl-loc__title{font-weight:900;font-size:clamp(0.85rem,0.9vw,1rem);}
.tl-loc__sub{font-size:clamp(0.75rem,0.8vw,0.85rem);color:#aaa;font-weight:600;}

/* =====================================================
  32. VEHICLE
===================================================== */
.vehicle-line{display:flex;width:100%;justify-content:space-between;gap:12px;}
.tl-vehicle__title{font-weight:900;font-size:clamp(0.85rem,0.9vw,1rem);}
.tl-vehicle__meta{color:#aaa;font-size:clamp(0.7rem,0.75vw,0.85rem);}

/* =====================================================
  33. TIMING
===================================================== */
.tl-time{display:flex;flex-direction:column;gap:4px;}
.tl-time strong{font-weight:900;font-size:clamp(0.75rem,0.8vw,0.9rem);}
.tl-time div{font-size:clamp(0.75rem,0.8vw,0.9rem);color:#ddd;font-weight:700;}

/* =====================================================
  34. CARGO
===================================================== */
.cargo-title{font-weight:900;font-size:clamp(0.9rem,0.95vw,1.05rem);}
.cargo-weight{color:#aaa;font-size:clamp(0.75rem,0.8vw,0.85rem);margin-top:4px;}
.cargo-badge{display:inline-block;margin-top:8px;margin-right:6px;background:rgba(0,0,0,0.3);color:#12b886;padding:4px 7px;border-radius:6px;font-size:clamp(0.6rem,0.6vw,0.7rem);font-weight:800;}

/* =====================================================
  35. STATS GRID
===================================================== */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;}
.stat{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,0.015);padding:10px;border-radius:8px;}
.stat-icon{width:clamp(30px,2vw,40px);height:clamp(30px,2vw,40px);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.02);border-radius:6px;}
.stat-title{font-size:clamp(0.65rem,0.65vw,0.75rem);color:#aaa;font-weight:900;}
.stat-value{font-size:clamp(0.85rem,0.9vw,1rem);font-weight:900;color:var(--vtc-blue);}

/* =====================================================
  36. TIMELINE
===================================================== */
.timeline-wrapper{position:relative;display:flex;align-items:center;gap:clamp(30px,3vw,52px);overflow-x:auto;padding:clamp(20px,2vw,36px) 12px;}
.timeline-line{position:absolute;left:0;right:0;top:50%;height:3px;background:rgba(255,255,255,0.05);transform:translateY(-50%);}

/* =====================================================
  37. TIMELINE ITEMS
===================================================== */
.timeline-item{position:relative;min-width:clamp(120px,10vw,160px);display:flex;flex-direction:column;align-items:center;}
.timeline-marker{width:clamp(20px,1.6vw,28px);height:clamp(20px,1.6vw,28px);border-radius:50%;background:#131418;border:3px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,0.6);}
.timeline-item.top .timeline-card{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);}
.timeline-item.bottom .timeline-card{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);}

/* =====================================================
  38. TIMELINE CARDS
===================================================== */
.timeline-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.45));border-radius:8px;padding:10px;width:clamp(140px,12vw,180px);box-shadow:0 12px 28px rgba(0,0,0,0.7);}
.card-meta{font-size:clamp(0.65rem,0.65vw,0.75rem);color:#aaa;margin-bottom:4px;}
.card-title{font-weight:900;font-size:clamp(0.75rem,0.8vw,0.9rem);}
.card-details{margin-top:6px;font-size:clamp(0.7rem,0.75vw,0.8rem);color:#e6e6e6;font-weight:600;}

/* =====================================================
  39. EVENT COLORS
===================================================== */
.event-collision{border-color:#ff4d4d!important;box-shadow:0 8px 24px rgba(255,77,77,0.1)!important;}
.event-speeding{border-color:#ffa500!important;box-shadow:0 8px 24px rgba(255,165,0,0.1)!important;}
.event-fuel{border-color:#4dff4d!important;box-shadow:0 8px 24px rgba(77,255,77,0.1)!important;}
.event-start{border-color:var(--vtc-blue)!important;box-shadow:0 8px 24px rgba(82,102,255,0.1)!important;}

/* =====================================================
  40. EMPTY MESSAGE
===================================================== */
.tl-empty-message{padding:20px;color:#5266FF;text-align:center;font-size:0.9rem;}

/* =====================================================
  41. MOBILE
===================================================== */
@media (max-width:900px){
.tl-row{flex-direction:column;}
.timeline-large.modal-card{width:96vw;height:96vh;}
.timeline-wrapper{gap:24px;}
.timeline-card{width:140px;}
}

/* =====================================================
  42. TIMELINE WIDTH + CROPPING FIX
   ===================================================== */
.tl-row--timeline .tl-box{ flex:1 1 100%; height:auto !important; min-height:420px; }
.tl-box--timeline .tl-box__body{ width:100%; height:100%; display:flex; align-items:center; }
.timeline-wrapper{ width:100%; height:100%; min-height:320px; overflow-x:auto; overflow-y:hidden; display:flex; align-items:center; gap:52px; padding:40px 60px; }
.timeline-line{ position:absolute; left:0; right:0; width:100%; }
.timeline-item{ flex-shrink:0; min-width:150px; }

/* =====================================================
  43. JOB ID HOVER GLOW (LOGBOOK TABLE)
   ===================================================== */
.logbook-row td:first-child{ color:#5266FF; font-weight:700; transition:all .15s ease; cursor:pointer; }
.logbook-row:hover td:first-child{ color:#5266FF; text-shadow:0 0 8px #5266FF; transform:translateY(-1px); }

/* ===============================
  44. LOGBOOK – Job ID always blue + glow on hover
   =============================== */
#logbookFeed td:first-child { color: var(--vtc-blue) !important; font-weight: 800; }
#logbookFeed td:first-child a { color: #5266FF !important; text-decoration: none !important; font-weight: 800; }
#logbookFeed td:first-child:hover { text-shadow: 0 0 10px rgba(82, 102, 255, 0.75); }
#logbookFeed td:first-child a:hover, #logbookFeed td:first-child a:focus { color: #5266FF !important; text-shadow: 0 0 10px rgba(82, 102, 255, 0.75); outline: none; }
.timeline-large.modal-card, .timeline-large__content { overflow-x: hidden; }
.tl-box--timeline { overflow: hidden; width: 100%; box-sizing: border-box; }
.tl-box--timeline .tl-box__body { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.timeline-wrapper { position: relative; display: flex; align-items: center; gap: clamp(24px, 3vw, 52px); padding: clamp(20px, 2vw, 36px) 12px; width: 100%; min-width: 100%; height: 100%; min-height: 320px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.timeline-wrapper .timeline-item { display: inline-flex;  flex-direction: column; vertical-align: top; flex-shrink: 0;          /* don't shrink, preserve width */ min-width: clamp(120px, 10vw, 160px); }
.tl-box--timeline .timeline-line { left: 0; right: 0; width: 100%; position: absolute; }
.timeline-wrapper::-webkit-scrollbar { height: 10px; }
.timeline-wrapper::-webkit-scrollbar-track { background: transparent; }
.timeline-wrapper::-webkit-scrollbar-thumb { background: rgba(82,102,255,0.20); border-radius: 8px; border: 2px solid rgba(0,0,0,0.2); }
.timeline-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(82,102,255,0.30); }
@media (max-width: 900px) {
.timeline-large.modal-card { overflow-x: hidden; }
}

/* =========================
  45. VERTICAL SCROLL BAR FOR TIMELINE
   ========================= */
.timeline-wrapper, .timeline-large__content, .tl-box--timeline .tl-box__body, .event-driver-list, .custom-dropdown-menu, .sidebar { scrollbar-width: thin; scrollbar-color: rgba(82,102,255,0.20) transparent; }
.timeline-wrapper::-webkit-scrollbar, .timeline-large__content::-webkit-scrollbar, .tl-box--timeline .tl-box__body::-webkit-scrollbar, .event-driver-list::-webkit-scrollbar, .custom-dropdown-menu::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 10px; height: 10px;  }
.timeline-wrapper::-webkit-scrollbar-track, .timeline-large__content::-webkit-scrollbar-track, .tl-box--timeline .tl-box__body::-webkit-scrollbar-track, .event-driver-list::-webkit-scrollbar-track, .custom-dropdown-menu::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track { background: transparent; }
.timeline-wrapper::-webkit-scrollbar-thumb, .timeline-large__content::-webkit-scrollbar-thumb, .tl-box--timeline .tl-box__body::-webkit-scrollbar-thumb, .event-driver-list::-webkit-scrollbar-thumb, .custom-dropdown-menu::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background: rgba(82,102,255,0.20); border-radius: 8px; border: 2px solid rgba(0,0,0,0.20); }
.timeline-wrapper::-webkit-scrollbar-thumb:hover, .timeline-large__content::-webkit-scrollbar-thumb:hover, .tl-box--timeline .tl-box__body::-webkit-scrollbar-thumb:hover, .event-driver-list::-webkit-scrollbar-thumb:hover, .custom-dropdown-menu::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(82,102,255,0.30); }
@media (max-width: 900px) { .timeline-wrapper::-webkit-scrollbar, .timeline-large__content::-webkit-scrollbar, .tl-box--timeline .tl-box__body::-webkit-scrollbar, .event-driver-list::-webkit-scrollbar, .custom-dropdown-menu::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 8px;} }
/* =========================
  46. MODAL BOXES
   ========================= */
.tl-row--mid { display: flex; gap: 14px; align-items: stretch; justify-content: space-between; width: 100%; box-sizing: border-box; }
.tl-row--mid .tl-box { flex: 0 1 calc(33.333% - 9.33px); min-width: 220px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; min-height: 150px; padding: 12px; }
.tl-box--damage .tl-box__body { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 8px 0; }
.tl-box--damage .damage-line { display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 12px; }
.tl-box--damage .muted { color: #9aa0c0; font-weight: 700; }
.tl-box--damage .damage-value { color: var(--vtc-blue); font-weight: 900; }
.tl-box#tl-box-cargo { min-height: 170px; padding: 16px; }
.tl-box#tl-box-stats { min-height: 150px; padding: 10px 12px; }
.tl-box#tl-box-stats .stats-grid { gap: 8px; align-content: start; }
.tl-box#tl-box-stats .stat { padding: 8px; gap: 8px; min-height: 42px; }
.tl-box#tl-box-stats .stat-title { font-size: 0.75rem; font-weight: 700; color: #9aa0c0; }
.tl-box#tl-box-stats .stat-value { font-size: 0.95rem; font-weight: 900; }
.tl-box .tl-box__body > *:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .tl-row--mid { flex-direction: column; gap: 12px; } .tl-row--mid .tl-box { flex: 1 1 auto; min-width: 0; min-height: auto; padding: 12px; } .tl-box#tl-box-cargo { min-height: auto; padding: 12px; } .tl-box#tl-box-stats { min-height: auto; padding: 12px; } }
:root { --modal-scale: 0.90; }
.timeline-large.modal-card { transform-origin: center top; transform: translateY(0) scale(var(--modal-scale)); transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); box-shadow: 0 28px 90px rgba(0,0,0,0.45); }
.timeline-large-backdrop { align-items: start; padding-top: 20px; }

/* ----------------------------
  47. MODAL SCALEDOWN + CROPPING FIX
   ---------------------------- */
:root { --modal-scale: 0.90; }

/* =========================
  48. TIMELINE BACKDROPS + MODAL SIZING FIX
   ========================= */
.timeline-large.modal-card { transform-origin: center center; transform: translateY(0) scale(var(--modal-scale)); transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); margin: 0 auto; max-width: calc(92vw * 1 / var(--modal-scale)); box-shadow: 0 28px 90px rgba(0,0,0,0.45); }
.timeline-large-backdrop { display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.timeline-large.modal-card, .timeline-large__content { height: auto; max-height: calc(92vh * (1 / var(--modal-scale))); overflow: hidden; }
.timeline-large__content { display: flex; flex-direction: column; gap: 12px; padding: 14px; overflow: auto; -webkit-overflow-scrolling: touch; }
.timeline-large__footer { display: none !important; }
.tl-row, .tl-box { margin: 0; box-sizing: border-box; }
.timeline-large.modal-card .timeline-large__content { padding-bottom: 12px; }
.timeline-large .tl-box .tl-box__body > *:last-child { margin-bottom: 0 !important; }
.tl-row--timeline .tl-box--timeline,
.tl-box--timeline .tl-box__body,
.timeline-wrapper { max-height: 46vh; box-sizing: border-box; }
.tl-box--timeline .tl-box__body { overflow: hidden; }
.timeline-wrapper { overflow-x: auto; overflow-y: hidden; }
@media (max-width: 1000px) {
  :root { --modal-scale: 1; }
  .timeline-large.modal-card { width: 96vw !important; height: 96vh !important; }
  .timeline-large-backdrop { padding: 10px; }
  .timeline-large__content { padding: 12px; }
}
/* =========================
  49. ROLE MANAGEMENT 
   ========================= */
#roleManagerModal .modal-dialog {
    max-width: 550px;
    margin: 1.75rem auto;
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

/* 2. Fix the Card appearance */
.role-modal-card {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* 3. The Grid of roles */
.role-modal-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout like your screenshot */
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 8px;
    margin-top: 10px;
}

/* Role Item (Label) */
.role-check {
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    margin-bottom: 0;
}

.role-check:hover {
    background: rgba(82, 102, 255, 0.1);
    border-color: rgba(82, 102, 255, 0.4);
}

.role-check input[type="checkbox"] {
    accent-color: var(--vtc-blue);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.role-check span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

/* Scrollbar for Roles */
.role-modal-grid::-webkit-scrollbar {
    width: 4px;
}
.role-modal-grid::-webkit-scrollbar-track {
    background: transparent;
}
.role-modal-grid::-webkit-scrollbar-thumb {
    background: var(--vtc-blue);
    border-radius: 10px;
}

/* 4. Content Area Inner Padding */
.role-modal-card .tl-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
}

/* 5. Footer Styling */
.role-modal-footer {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 6. Backdrop Blur Logic */
.modal-backdrop.show {
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.7) !important;
    opacity: 1 !important;
}

/* Header Text Primary Color for the Name */
.text-primary {
    color: var(--vtc-blue) !important;
    font-weight: 900;
}

/* Responsive adjustment */
@media (max-width: 576px) {
    #roleManagerModal .modal-dialog {
        margin: 1rem;
        max-width: 100%;
    }
}

.table-fancy th {
    color: #ffffff !important;
    opacity: 0.5;
    padding: 15px 20px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #444;
}

.table-fancy td {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    vertical-align: middle;
}

.badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #aaa;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 10px;
}

.role-check-item {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
}

.role-check {
    position: relative;
    z-index: 6;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.modal-role-input {
    position: relative;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto !important;
}

/* Security Note Box Styling */
.security-note-box {
    margin-top: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03); /* Slightly brighter for contrast */
    border: 1px solid rgba(82, 102, 255, 0.2);
    border-radius: 10px;
}

/* Make text inside the note white and bold */
.security-note-box .note-text {
    color: #ffffff !important; /* Forces text to white */
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 1 !important; /* Ensures no transparency hides the text */
}

#roleManagerModal {
    pointer-events: none;
}

/* 2. Re-enable clicks specifically for the card and all its children */
.role-modal-card {
    pointer-events: auto !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100%;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
}

/* 3. Ensure Header and Footer buttons are definitely on top */
.timeline-large__header, 
.role-modal-footer, 
.btn-icon, 
.admin-btn {
    position: relative;
    z-index: 20 !important;
    pointer-events: auto !important;
}

/* 4. Cross Button (Close) fix */
.btn-icon {
    cursor: pointer !important;
    opacity: 0.7;
    transition: 0.2s;
}
.btn-icon:hover {
    opacity: 1;
    background: rgba(255,255,255,0.1);
}

/* 5. Security Note Box (White Text Fix) */
.security-note-box {
    margin-top: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.security-note-box .note-text {
    color: #ffffff !important;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 6. Allow clicking outside to exit (Change to normal backdrop) */
.modal-backdrop {
    pointer-events: auto !important;
}

/* =========================
  50. PROFILE LOGBOOK TABLE
   ========================= */
#logCard table.table-fancy { table-layout: fixed !important; width: 100% !important; border-collapse: collapse !important; }
#profileJobFeedTable { table-layout: auto !important; width: 100% !important; }
#logCard table.table-fancy th,
#logCard table.table-fancy td,
#profileJobFeedTable th,
#profileJobFeedTable td { white-space: nowrap !important; vertical-align: middle !important; overflow: hidden; text-overflow: ellipsis; padding-left: 20px !important; padding-right: 20px !important; }
#logCard table.table-fancy tbody td { padding-top: 14px !important; padding-bottom: 14px !important; }
#logCard table.table-fancy td > div { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
#logCard table.table-fancy td:has(button) { text-align: center; }
#logCard table#profileJobFeedTable { border-collapse: collapse !important; border-spacing: 0 !important; table-layout: fixed !important; width: 100% !important; }
#logCard table#profileJobFeedTable thead,
#logCard table#profileJobFeedTable tbody { display: table !important; }
#logCard table#profileJobFeedTable thead th,
#logCard table#profileJobFeedTable th { border: none !important; padding: 10px 20px !important; margin: 0 !important; letter-spacing: 0.5px; opacity: 1 !important; }
#logCard table#profileJobFeedTable tbody td,
#logCard table#profileJobFeedTable td { border: none !important; padding: 10px 20px !important; margin: 0 !important; vertical-align: middle !important; }
#logCard table#profileJobFeedTable td > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ============================================================
   HEADER MODAL BUTTONS (TOS / PRIVACY / SUPPORT)
   ============================================================ */

.header-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-start; }
.button { position: relative; overflow: hidden; height: 2.5rem; padding: 0 1rem; border-radius: 1.5rem; background: #181818; background-size: 400%; color: #fff; border: 1px solid rgba(82, 102, 255, 0.45); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(82, 102, 255, 0.35); }
.button::before { content: ""; position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: 0 50%; width: 100%; height: inherit; border-radius: inherit; background: linear-gradient( 82.3deg, rgba(82, 102, 255, 1) 10.8%, rgba(63, 76, 255, 1) 94.3% ); transition: all 0.475s; }
.button:hover::before { transform: scaleX(1); }
.button-content { position: relative; z-index: 1; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.75rem; /* a bit smaller */ }
.button.support-btn { background: rgba(255, 255, 255, 0.04); border-color: rgba(82, 102, 255, 0.35); }
.content-header { margin-bottom: 15px; }

/* ============================================================
   HEADER GAP FIX (raise convoy + profile to the top)
   ============================================================ */
.content-header { margin-bottom: 12px !important; }
.content-header .w-100 { align-items: flex-start !important; }
.content-header .d-flex.justify-content-end { align-items: flex-start !important; margin-top: 0 !important; }
.content-header .dashboard-search { margin-top: 8px !important; }

/* ============================================================
   PIN TOP-RIGHT HEADER CONTROLS (convoy + profile)
   ============================================================ */
.content-header { position: relative; }
.header-top-right { position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; align-items: flex-start; pointer-events: auto; padding-top: 0; }
.header-top-right .select, .header-top-right #liveConvoyWidget { margin: 0; }
.content-header .page-title { padding-top: 4px; }
#supportModal .support-bmc-wrap { min-height: 260px; display: flex; align-items: center; justify-content: center; }
#bmc-widget-root { min-height: 420px; width: 100%; display: flex; justify-content: flex-end; align-items: center; }
.modal .timeline-modal-body { text-align: center; }
.icon { width: 18px; height: 18px; margin-right: 8px; margin-bottom: 4px; vertical-align: middle; }

/* ============================================================
   Construction Overlay
   ============================================================ */
#constructionOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(40, 40, 40); z-index: 99999; display: flex; align-items: center; justify-content: center;}
#constructionOverlay .overlay-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
#constructionOverlay .overlay-icon { width: 120px; height: auto; filter: brightness(0) invert(1); }
#constructionOverlay .overlay-text { color: #ffffff; font-size: 5rem;         font-weight: 900;     text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 25px rgba(255,255,255,0.35); }

/* ============================================================
   Save Edits & Local Mods Pages
   ============================================================ */
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.event-tile { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 14px; min-height: 240px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; position: relative; }
.event-tile__title { font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--vtc-blue); font-size: 0.85rem; margin-bottom: 10px; }
.event-title__createdby { color: rgba(255, 255, 255, 0.37); font-weight: 800; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.2px; min-height: 18px; }
.event-tile__media { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, 0.05); position: relative; }
.event-tile__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0; filter: blur(2px); transition: opacity 0.2s ease, filter 0.2s ease; }
.event-tile__img.loaded { opacity: 1; filter: blur(0); }
.event-tile__download { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--vtc-blue); background: transparent; color: #fff; font-weight: 900; text-decoration: none; padding: 0 10px; }
.event-tile__download[disabled] { opacity: 0.6; cursor: not-allowed; box-shadow: none !important; }
#saveEditGrid .event-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none !important; opacity: 1; }
#saveEditGrid .localmods-delete-btn { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 90, 90, 0.5); background: rgba(255, 60, 60, 0.85); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 5; box-shadow: 0 0 15px rgba(255, 60, 60, 0.25); }
#saveEditGrid .localmods-delete-btn:hover { background: rgba(255, 60, 60, 1); box-shadow: 0 0 25px rgba(255, 60, 60, 0.35); }
.localmods-delete-icon { font-size: 16px; line-height: 1; transform: translateY(-1px); }
#uploadLocalModModal .modal-dialog { transform: none !important; transition: none !important; }
#uploadLocalModModal .timeline-large.modal-card { transform-origin: center top !important; will-change: transform; }
.localmods-upload-wrap { margin-bottom: 10px !important; }
.localmods-upload-layout { display: grid; grid-template-columns: 1fr 0.9fr; gap: 16px; align-items: start; }
.localmods-upload-form { width: 100%; }
.localmods-upload-preview { display: flex; flex-direction: column; gap: 12px; }
.localmods-preview-warning { color: rgba(255, 255, 255, 0.4); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.5px; }
.localmods-preview-media { width: 100%; height: 260px; margin-top: 10px; border-radius: 10px; overflow: hidden; }
.localmods-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1100px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .events-grid { grid-template-columns: 1fr; } .localmods-upload-layout { grid-template-columns: 1fr; } }

/* ============================================================
   DIVISIONS PAGE – PLAQUES + MANAGER BUTTON + MODAL
============================================================ */
.divisions-header-card { margin-top: 10px; margin-bottom: 18px; }
.divisions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width:1100px){ .divisions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:768px){ .divisions-grid { grid-template-columns: 1fr; } }
.division-plaque { background: rgba(255,255,255,0.03); border: 1px solid rgba(82, 102, 255, 0.22); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 230px; }
.division-plaque:hover { border-color: rgba(82, 102, 255, 0.55); box-shadow: 0 0 28px rgba(82, 102, 255, 0.18); }
.division-plaque-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.division-plaque-title { font-weight: 900; letter-spacing: 1px; text-transform: uppercase; font-size: 0.72rem; color: #fff; line-height: 1.25; max-width: 65%; }
.division-plaque-count-wrap { text-align: right; }
.division-plaque-count-label { font-size: 0.65rem; color: #aaa; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.division-plaque-count { font-size: 1.5rem; font-weight: 1000; color: var(--vtc-blue); line-height: 1; margin-top: 4px; }
.division-plaque-chart-title { font-size: 0.65rem; color: #aaa; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.division-plaque-chart-box { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 10px; }
.division-chart { width: 100%; height: 120px; }
.division-manager-btn { background: rgba(82, 102, 255, 0.15); border: 1px solid rgba(82, 102, 255, 0.55); color: #fff; border-radius: 10px; padding: 10px 14px; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.3px; cursor: pointer; transition: 0.2s; }
.division-manager-btn:hover:not(:disabled) { background: rgba(82, 102, 255, 0.28); box-shadow: 0 0 18px rgba(82, 102, 255, 0.35); }
#constructionOverlay,.blur-overlay,.loading-curtain { z-index: 1040; }
body.modal-open .content-wrapper,body.modal-open .sidebar { filter: none !important; pointer-events: none !important; }
body.modal-open::before { content:""; position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:1045; }
body:not(.modal-open)::before { content:none; }
.modal-backdrop.fade.show { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background-color:rgba(0,0,0,0.7) !important; opacity:1 !important; }
#divisionManagerModal { position:relative !important; z-index:1056 !important; }
#divisionManagerModal .modal-dialog,#divisionManagerModal .modal-content { position:relative !important; z-index:1057 !important; }
.division-info-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(82, 102, 255, 0.6); background: rgba(82, 102, 255, 0.12); color: #fff; font-weight: 1000; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; line-height: 1; user-select: none; }
.division-info-btn:hover { background: rgba(82, 102, 255, 0.28); box-shadow: 0 0 18px rgba(82, 102, 255, 0.35); }
.division-submit-btn { background: rgba(82, 102, 255, 0.15); border: 1px solid rgba(82,  102, 255, 0.55); color: #fff; border-radius: 8px; padding: 8px 10px; font-weight: 900; font-size: 0.75rem; letter-spacing: 0.3px; cursor: pointer; transition: 0.2s; width: 100%; }
.division-submit-btn:hover:not(:disabled) { background: rgba(82, 102, 255, 0.28); box-shadow: 0 0 18px rgba(82, 102, 255, 0.35); }
.division-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.division-submit-btn.submitted { background: rgba(46, 204, 113, 0.18); border-color: rgba(46, 204, 113, 0.6); }
#jobFeed tr { display: table-row !important; opacity: 1 !important; visibility: visible !important;}
#jobFeed { display: table !important; width: 100% !important; }
#divisionJobsModal .table-responsive { overflow-x: auto !important; }
#divisionJobsModal .table-fancy { table-layout: auto !important; width: 100%; }
#divisionJobsModal th, divisionJobsModal td { vertical-align: middle !important; word-break: break-word; overflow-wrap: anywhere; }
#divisionJobsModal .company-badge { white-space: normal; overflow: hidden; text-overflow: ellipsis }
#divisionJobsModal .modal-body { max-height: calc(100vh - 200px); overflow: auto; }



.division-cargo-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(82, 102, 255, 0.18);
  border: 1px solid rgba(82, 102, 255, 0.55);
  color: #b9c2ff;
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 0.2px;
}
.division-cargo-pill:hover {
  background: rgba(82, 102, 255, 0.28);
}

.division-cargo-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 0.2px;
  line-height: 1;
  margin: 0;
}

/* ETS2: your blue style */
.division-cargo-pill--ets2 {
  background: rgba(82, 102, 255, 0.18);
  border: 1px solid rgba(82, 102, 255, 0.55);
  color: #b9c2ff;
}

/* ATS: yellow style similar to badge-ats */
.division-cargo-pill--ats {
  background: rgba(241, 196, 15, 0.14);
  border: 1px solid rgba(241, 196, 15, 0.55);
  color: #ffe08a;
}

.division-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0;
}

.division-stat-row .label {
  color: #aaa;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.division-stat-row .value {
  font-weight: 900;
  font-size: 0.85rem;
}

.division-badge-ok {
  color: #2ecc71;
  text-shadow: 0 0 10px rgba(46, 204, 113, 0.15);
}

.division-badge-bad {
  color: #ff5e5e;
  text-shadow: 0 0 10px rgba(255, 94, 94, 0.15);
}


/* Flag section layout */
.division-flags {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.division-flags__title {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.division-flags-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
}

.division-flag-row .label {
  color: #aaa;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.division-flag-row .value {
  font-weight: 900;
  font-size: 0.8rem;
  text-align: right;
  white-space: nowrap;
}

/* Badges */
.division-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.division-badge-ok {
  border-color: rgba(46, 204, 113, 0.5);
  background: rgba(46, 204, 113, 0.12);
  color: #2ecc71;
  text-shadow: none;
}

.division-badge-bad {
  border-color: rgba(255, 94, 94, 0.5);
  background: rgba(255, 94, 94, 0.12);
  color: #ff5e5e;
  text-shadow: none;
}

.division-badge-neutral {
  border-color: rgba(82, 102, 255, 0.5);
  background: rgba(82, 102, 255, 0.12);
  color: #b9c2ff;
}

/* Shrink the new flags section inside the division modal */
#divisionSelectedJobBasicStats .division-flags {
  margin-top: 10px !important;
  padding-top: 8px !important;
}

/* Title */
#divisionSelectedJobBasicStats .division-flags__title {
  font-size: 0.78rem !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.2px !important;
}

/* Grid + spacing */
#divisionSelectedJobBasicStats .division-flags-grid {
  column-gap: 10px !important;
  row-gap: 6px !important;
}

/* Row label */
#divisionSelectedJobBasicStats .division-flag-row .label {
  font-size: 0.68rem !important;
  letter-spacing: 0.2px !important;
}

/* Badge size */
#divisionSelectedJobBasicStats .division-badge {
  padding: 4px 8px !important;
  font-size: 0.72rem !important;
  gap: 6px !important;
}

#divisionSelectedJobBasicStats .division-badge .value {
  font-size: 0.72rem !important;
}

/* Ensure the value area doesn’t add extra height */
#divisionSelectedJobBasicStats .division-flag-row .value,
#divisionSelectedJobBasicStats .division-badge {
  line-height: 1.1 !important;
}

#divisionSelectedJobBasicStats .division-badge {
  white-space: nowrap !important;
}


/* Division Manager waiting list should not expand forever */
.division-manager-jobs-scroll {
  max-height: 520px;        /* adjust to taste */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;      /* small space so scrollbar doesn't overlap */
}

/* Optional: nicer scrollbar styling (works in modern browsers) */
.division-manager-jobs-scroll::-webkit-scrollbar {
  width: 8px;
}
.division-manager-jobs-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.division-manager-jobs-scroll::-webkit-scrollbar-thumb {
  background: rgba(82, 102, 255, 0.25);
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,0.2);
}
.division-manager-jobs-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(82, 102, 255, 0.35);
}

/* Optional: on smaller screens, use a taller area */
@media (max-width: 992px) {
  .division-manager-jobs-scroll {
    max-height: 360px;
  }
}


.division-members-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #aaa;
    margin-bottom: 5px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.member-icon {
    width: 14px;
    height: 14px;
    fill: #5266ff;
}

/* ============================================================
   GLOBAL ICONS SETTINGS
============================================================ */
.card-title { display: flex; align-items: center; gap: 2px; }
.icon { width: 26px; height: 26px; }
.section-title { display: flex; align-items: center !important; gap: 2px; }
.icon { width: 26px; height: 26px; }
.icon { width: 24px; height: 24px; fill: #5266ff;  display: inline-block; vertical-align: middle; margin-right: 10px; flex-shrink: 0; }
.nav-item:hover .icon { fill: #4f5ecf; filter: drop-shadow(0 0 4px #5266ff) drop-shadow(0 0 10px #5266ff80); }
#completedChallengesList::-webkit-scrollbar { display: none; }
.challenge-grid-horizontal { -ms-overflow-style: none; scrollbar-width: none; }
.challenge-card-item .card { transition: transform 0.2s ease, background 0.2s ease; }
.challenge-card-item .card:hover { background: #202020 !important; transform: translateY(-3px); }
.challenge-scroll-container { position: relative; width: 100%; display: flex; align-items: center; }
.challenge-grid-horizontal { display: flex; overflow-x: auto; gap: 16px; padding: 10px 5px 20px 5px; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; }
.challenge-grid-horizontal::-webkit-scrollbar { display: none; }
.challenge-card-item { min-width: 220px; max-width: 220px; flex: 0 0 auto; }
.challenge-card-item .card { background: #181818 !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 12px; height: 100%; }
.scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(30, 30, 30, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); color: white; display: flex; align-items: center; justify-content: center; z-index: 10; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.scroll-btn:hover { background: var(--vtc-blue, #5266ff); border-color: var(--vtc-blue, #5266ff); transform: translateY(-50%) scale(1.1); }
.prev-btn { left: 0px; z-index: 20; }
.next-btn { right: 0px; z-index: 20; }
@media (max-width: 768px) { .scroll-btn { display: none; } .prev-btn { left: 0; } .next-btn { right: 0; } }
.stat-icon-circle { color: #5266ff; background: rgba(82, 102, 255, 0.1); width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(82, 102, 255, 0.15); flex-shrink: 0; }
.extra-small { font-size: 0.65rem; }
.text-spacing-1 { letter-spacing: 0.5px; }
.challenge-card-item .card { background: linear-gradient(145deg, #1a1a1a, #141414) !important; border: 1px solid rgba(255, 255, 255, 0.04) !important; border-radius: 16px; padding: 1.25rem !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.challenge-card-item .card:hover { transform: translateY(-8px); background: linear-gradient(145deg, #202020, #161616) !important; border-color: rgba(82, 102, 255, 0.4) !important; box-shadow: 0 12px 40px rgba(82, 102, 255, 0.15); }
.challenge-title { color: #ffffff; font-weight: 700; font-size: 0.95rem; line-height: 1.3; margin-bottom: 6px; line-clamp: 2;  display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; overflow: hidden; }
.challenge-xp-badge { display: inline-block; color: #00ff88; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; background: rgba(0, 255, 136, 0.08); padding: 2px 8px; border-radius: 6px; margin-bottom: 15px; }
.challenge-date { color: #888; font-size: 0.75rem; font-weight: 500; }
.check-wrapper { margin-top: 12px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(40, 167, 69, 0.1); border: 1.5px solid rgba(40, 167, 69, 0.3); color: #28a745; box-shadow: 0 0 10px rgba(40, 167, 69, 0.1); }
.achievement-summary-card { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px; backdrop-filter: blur(10px); padding: 0.15rem; }
.challenge-grid-horizontal { display: flex; overflow-x: auto; gap: 16px; padding: 10px 40px 20px 40px; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none;
-webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%,  black 92%, transparent 100% ); 
mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); }
.challenge-grid-horizontal::-webkit-scrollbar { display: none; }

/* ============================================================
   GREETING STYLING
============================================================ */
.fancy-greeting { display: flex; align-items: center; gap: 10px; margin-top: -8px; margin-bottom: 25px; font-family: 'Inter', sans-serif; font-size: 1.01rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.greeting-shimmer { background: linear-gradient( 120deg,  #ffffff 10%,  #5266FF 60%,  #5266FF 70% ); background-size: 200% auto; padding-top: 15px;  -webkit-background-clip: text; background-clip: text;  -webkit-text-fill-color: transparent; animation: shimmer 4s linear infinite; }
.greeting-sway { display: inline-block; animation: sway 6s ease-in-out infinite; }
.greeting-float { display: flex; align-items: center; line-height: 1; position: relative; top: 5px;  font-size: 1.8rem; animation: floating 3s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: translateX(0) rotate(0deg); } 33% { transform: translateX(3px) rotate(0.5deg); } 66% { transform: translateX(-3px) rotate(-0.5deg); } }
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }





/* ============================================================
   DRIVERSHUB UPDATE
   ============================================================ */








/* ============================================================
   1. GLOBAL THEME (Shared)
   ============================================================ */
:root { --vtc-blue: #0084ff; --vtc-blue-glow: #5266FF; --vtc-purple: #5266FF; --vtc-bg: #09090b; --vtc-card: rgba(15, 15, 20, 0.85); --vtc-border: rgba(0, 132, 255, 0.15); --neon-shadow: 0 0 15px var(--vtc-blue-glow); }
body { background: var(--vtc-bg); background-image: radial-gradient(circle at 20% 30%, rgba(0, 132, 255, 0.05) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(112, 0, 255, 0.05) 0%, transparent 40%); color: #f4f4f5; font-family: 'Inter', sans-serif; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--vtc-bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, transparent, var(--vtc-blue), transparent); border-radius: 10px; box-shadow: 0 0 10px var(--vtc-blue-glow); } ::-webkit-scrollbar-thumb:hover { background: var(--vtc-blue); }
.content-wrapper { margin-left: 280px; flex-grow: 1; padding: 40px; display: flex; flex-direction: column; min-height: 100vh; }
.page-title { font-weight: 900; text-transform: uppercase; letter-spacing: 4px; background: linear-gradient(to bottom, #fff 40%, var(--vtc-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 12px rgba(0, 132, 255, 0.4)); }
.bg-dark-soft { background: var(--vtc-card) !important; backdrop-filter: blur(15px); border: 1px solid var(--vtc-border) !important; border-radius: 20px !important; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 30px rgba(0,0,0,0.5); position: relative; overflow: hidden; }
.bg-dark-soft:hover { transform: translateY(-8px) scale(1.01); border-color: var(--vtc-blue) !important; box-shadow: 0 0 20px rgba(0, 132, 255, 0.2), 0 20px 40px rgba(0,0,0,0.6); }
.bg-dark-soft::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 132, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 132, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: 0; }
.login-input { width: 100%; height: 45px; background: #121214 !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 8px !important; padding: 0 15px; color: #fff !important; outline: none; transition: 0.3s; }
.login-input:focus { border-color: var(--vtc-blue) !important; box-shadow: 0 0 10px rgba(82, 102, 255, 0.2); background: rgba(0, 132, 255, 0.03) !important; }
.form-label-white { color: #ffffff !important; font-weight: 600; font-size: 0.85rem; margin-bottom: 5px; display: block; }
input[type="checkbox"] { accent-color: var(--vtc-blue); width: 18px; height: 18px; vertical-align: middle; cursor: pointer; }

/* ============================================================
   2. DASHBOARD PAGE
   ============================================================ */
.fancy-greeting { display: flex; align-items: center; gap: 10px; margin-top: -8px; margin-bottom: 25px; font-family: 'Inter', sans-serif; font-size: 1.01rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.greeting-shimmer { background: linear-gradient( 120deg,  #ffffff 10%,  #5266FF 60%,  #5266FF 70% ); background-size: 200% auto; padding-top: 15px;  -webkit-background-clip: text; background-clip: text;  -webkit-text-fill-color: transparent; animation: shimmer 4s linear infinite; }
.greeting-sway { display: inline-block; animation: sway 6s ease-in-out infinite; }
.greeting-float { display: flex; align-items: center; line-height: 1; position: relative; top: 5px;  font-size: 1.8rem; animation: floating 3s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: translateX(0) rotate(0deg); } 33% { transform: translateX(3px) rotate(0.5deg); } 66% { transform: translateX(-3px) rotate(-0.5deg); } }
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#ets2GlobalChart, #atsGlobalChart { background: radial-gradient(circle at top right, rgba(0, 132, 255, 0.05), transparent); border-radius: 15px; padding: 10px; }
.apexcharts-grid-line { stroke: rgba(255, 255, 255, 0.03) !important; } 
.apexcharts-canvas { z-index: 1; }
.apexcharts-tooltip.apexcharts-theme-dark { background: rgba(10, 10, 15, 0.9) !important; border: 1px solid var(--vtc-blue) !important; box-shadow: 0 0 15px var(--vtc-blue-glow) !important; backdrop-filter: blur(5px); }
.badge-ets2 { background: linear-gradient(45deg, #0084ff, #00c2ff) !important; box-shadow: 0 0 10px rgba(0, 132, 255, 0.5); border: none; padding: 4px 8px; border-radius: 4px; }
.badge-ats { background: linear-gradient(45deg, #f1c40f, #ffd32a) !important; box-shadow: 0 0 10px rgba(241, 196, 15, 0.4); color: #000 !important; padding: 4px 8px; border-radius: 4px; }
.status-light-core { box-shadow: 0 0 15px #2ecc71, 0 0 30px #2ecc71; }
.convoy-card-fancy { background: rgba(0, 132, 255, 0.05) !important; border: 1px solid rgba(0, 132, 255, 0.2) !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); text-decoration: none; display: flex; align-items: center; padding: 10px 20px; border-radius: 12px; }
#poda .input { border: 1px solid var(--vtc-border) !important; transition: all 0.3s ease; } 
#poda .input:focus { border-color: var(--vtc-blue) !important; box-shadow: 0 0 15px rgba(0, 132, 255, 0.3); }
.table-fancy tbody tr { transition: all 0.2s ease; cursor: pointer; border-left: 3px solid transparent; } 
.table-fancy tbody tr:hover { background: linear-gradient(90deg, rgba(0, 132, 255, 0.1) 0%, transparent 100%) !important; border-left: 3px solid var(--vtc-blue); transform: translateX(5px); }

/* ============================================================
   3. ADMIN PAGE 
   ============================================================ */
.staff-row-fancy { display: flex; flex-wrap: wrap; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 15px; margin-bottom: 10px; transition: 0.3s; gap: 15px; position: relative; z-index: 1; }
.staff-row-fancy:hover { border-color: var(--vtc-blue); background: rgba(82, 102, 255, 0.05); box-shadow: 0 0 15px rgba(82, 102, 255, 0.15); }
.search-input { background: #121214; border: 1px solid rgba(255,255,255,0.1); color: white; padding: 8px 15px; border-radius: 6px; width: 250px; outline: none; transition: 0.3s; }
.search-input:focus { border-color: var(--vtc-blue); box-shadow: 0 0 10px rgba(82, 102, 255, 0.2); }
.login-btn-main { background: linear-gradient(135deg, var(--vtc-blue), var(--vtc-purple)); color: white; padding: 12px; border: none; border-radius: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; box-shadow: 0 4px 15px rgba(0, 132, 255, 0.3); }
.login-btn-main:hover { transform: translateY(-2px); box-shadow: 0 0 20px var(--vtc-blue-glow); }
.admin-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background: rgba(0,0,0,0.3); color: rgba(255,255,255,0.7); text-decoration: none; backdrop-filter: blur(5px); }
.admin-btn:hover { background: rgba(255,255,255,0.1); color: #fff; transform: translateY(-1px); border-color: rgba(255,255,255,0.2); }
.admin-btn.edit:hover { background: rgba(0, 212, 255, 0.15); color: #00d4ff; border-color: rgba(0, 212, 255, 0.4); box-shadow: 0 0 10px rgba(0, 212, 255, 0.2); }
.admin-btn.view:hover { background: rgba(82, 102, 255, 0.15); color: var(--vtc-blue); border-color: var(--vtc-blue); box-shadow: 0 0 10px rgba(82, 102, 255, 0.2); }
.admin-btn.image:hover { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: #fff; }
.admin-btn.pass:hover { background: rgba(255, 193, 7, 0.15); color: #ffc107; border-color: rgba(255, 193, 7, 0.4); box-shadow: 0 0 10px rgba(255, 193, 7, 0.2); }
.admin-btn.delete:hover { background: rgba(255, 94, 94, 0.15); color: #ff5e5e; border-color: rgba(255, 94, 94, 0.4); box-shadow: 0 0 10px rgba(255, 94, 94, 0.2); }
.modal-backdrop.show { backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.8); }
.modal-content { background: #0f0f12 !important; border: 1px solid var(--vtc-border) !important; box-shadow: 0 0 30px rgba(0,0,0,0.8); color: #fff; }
.modal-header { border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); }
.modal-footer { border-top: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); }
.btn-secondary { background: transparent !important; border: 1px solid #444 !important; color: #aaa !important; }
.btn-secondary:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; border-color: #666 !important; }
.btn-primary { background: var(--vtc-blue) !important; border: none !important; box-shadow: 0 0 10px rgba(0, 132, 255, 0.3); }
.btn-primary:hover { background: #0077e6 !important; box-shadow: 0 0 20px rgba(0, 132, 255, 0.5); }
.btn-close { filter: invert(1) grayscale(1) brightness(200%); }
.role-modal-card { background: #121214 !important; border: 1px solid var(--vtc-blue) !important; box-shadow: 0 0 20px rgba(82, 102, 255, 0.15); }
.role-modal-footer { border-top: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.2); }
.security-note-box { margin-top: 15px; padding: 12px; background: rgba(255, 60, 60, 0.1); border: 1px solid rgba(255, 60, 60, 0.3); border-radius: 8px; }
.security-note-box .note-text { color: #ff6b6b !important; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.timeline-large__header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.3); }
.timeline-large__header .h1 { font-size: 1.1rem; font-weight: 900; letter-spacing: 1px; color: #fff; margin: 0; }
.btn-icon { background: transparent; border: none; color: #aaa; font-size: 1.2rem; cursor: pointer; padding: 5px; transition: 0.2s; }
.btn-icon:hover { color: #fff; transform: rotate(90deg); }
.role-scroll { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 12px; max-height: 300px; overflow-y: auto; margin-bottom: 15px; box-shadow: inset 0 0 15px rgba(0,0,0,0.5); }
.role-scroll::-webkit-scrollbar { width: 6px; }
.role-scroll::-webkit-scrollbar-track { background: transparent; }
.role-scroll::-webkit-scrollbar-thumb { background: rgba(82, 102, 255, 0.2); border-radius: 8px; border: 2px solid rgba(0,0,0,0.2); }
.role-check { display: flex; align-items: center; gap: 10px; color: #ddd; font-weight: 600; font-size: 0.9rem; margin: 6px 0; cursor: pointer; transition: 0.2s; padding: 4px 8px; border-radius: 4px; }
.role-check:hover { background: rgba(255,255,255,0.05); color: #fff; }
.perm-badge { background: rgba(0, 132, 255, 0.15); font-size: 0.65rem; padding: 3px 8px; border-radius: 4px; color: #80bdff; font-weight: 600; border: 1px solid rgba(0, 132, 255, 0.2); margin: 2px; display: inline-block; }
.staff-role-subtext { font-size: 0.7rem; color: var(--vtc-blue); text-transform: uppercase; font-weight: 700; margin-top: 2px; letter-spacing: 0.5px; text-shadow: 0 0 8px rgba(82, 102, 255, 0.3); }

/* ============================================================
   4. CALENDAR PAGE (Event Calendar)
   ============================================================ */
:root { --fc-border-color: rgba(255, 255, 255, 0.05); --fc-button-bg-color: #252525; --fc-button-border-color: #333; --fc-button-hover-bg-color: #5266ff; --fc-button-active-bg-color: #5266ff; --fc-event-bg-color: transparent; --fc-event-border-color: transparent; --fc-today-bg-color: transparent; }
.calendar-card { max-width: 1400px; margin: 20px auto; padding-bottom: 80px; }
.fc { background: var(--vtc-card); padding: 0; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; box-shadow: 0 30px 60px rgba(0,0,0,0.6); overflow: hidden; }
.fc-view-harness { padding: 0 20px 20px 20px; }
.fc-header-toolbar { padding: 25px 30px 15px 30px; margin-bottom: 10px !important; }
.fc-toolbar-title { font-weight: 800 !important; text-transform: uppercase; letter-spacing: 2px; font-size: 1.4rem !important; }
.fc-button-primary { background-color: #2a2a2a !important; border: 1px solid #444 !important; font-weight: 800 !important; text-transform: uppercase; font-size: 0.65rem !important; border-radius: 10px !important; }
.fc-theme-standard .fc-scrollgrid { border: none !important; background: transparent !important; }
.fc-col-header { background: #2f2f2f !important; border-radius: 15px 15px 0 0 !important; overflow: hidden; border-collapse: separate !important; }
.fc-theme-standard th { border: none !important; background: transparent !important; }
.fc-col-header-cell-cushion { color: #5266ff; font-weight: 800; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; text-decoration: none !important; display: block; padding: 12px 0 !important; }
.fc-daygrid-day-number { color: #888; font-weight: 700; padding: 8px 12px !important; font-size: 0.9rem; text-decoration: none !important; }
.fc-daygrid-day { background-color: var(--vtc-card) !important; }
.fc-day-other { background-color: var(--vtc-card) !important; opacity: 1 !important; }
.fc-day-today { background: rgba(82, 102, 255, 0.05) !important; }
.fc-day-today .fc-daygrid-day-number { color: #fff !important; background: #5266ff; border-radius: 4px; margin: 5px; padding: 2px 8px !important; }
.fc-event { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-left: 4px solid #5266ff !important; border-radius: 6px !important; padding: 6px 10px !important; margin: 3px 6px !important; transition: all 0.2s ease !important; }
.fc-event:hover { background: rgba(82, 102, 255, 0.1) !important; transform: translateX(3px); }
.fc-event-title { color: #fff !important; font-weight: 700 !important; font-size: 0.7rem !important; white-space: normal !important; }
.fc-daygrid-event-dot { display: none !important; }
.fc-theme-standard td { border: 1px solid rgba(255, 255, 255, 0.05) !important; }

/* ============================================================
   5. CHALLENGE MANAGEMENT (Create Page)
   ============================================================ */
.two-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1400px; margin: 0 auto; align-items: stretch; }
@media (max-width: 992px) { .two-panels { grid-template-columns: 1fr; } }
.panel-card { background: var(--vtc-card); border: 1px solid var(--vtc-border); border-radius: 20px; height: 100%; min-height: 680px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.5); position: relative; overflow: hidden; }
.panel-card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 132, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 132, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: 0; }
.panel-card > * { position: relative; z-index: 1; }
.panel-col { height: 100%; }
.content-spacer { flex: 1; }
.panel-card h4 { margin-bottom: 1rem; color: #fff; font-weight: 900; letter-spacing: 0.5px; }
.game-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--vtc-blue); background: rgba(82, 102, 255, 0.12); color: #fff; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; font-size: 0.8rem; box-shadow: 0 0 10px rgba(82, 102, 255, 0.2); }
.custom-select-wrapper { position: relative; width: 100%; }
.custom-dropdown-menu { position: absolute; top: 100%; left: 0; width: 100%; background: rgba(15, 15, 20, 0.95); border: 1px solid var(--vtc-border); border-radius: 8px; margin-top: 5px; max-height: 250px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5); backdrop-filter: blur(10px); }
.dropdown-item-custom { padding: 10px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); transition: 0.2s; font-size: 0.85rem; color: #eee; }
.dropdown-item-custom:hover { background: rgba(0, 132, 255, 0.15); color: #fff; }
.dlc-badge { font-size: 0.55rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1); color: #aaa; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.dropdown-item-custom:hover .dlc-badge { background: rgba(255,255,255,0.2); color: white; }
.custom-dropdown-menu::-webkit-scrollbar { width: 6px; }
.custom-dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.custom-dropdown-menu::-webkit-scrollbar-thumb { background: rgba(82, 102, 255, 0.2); border-radius: 10px; }

/* ============================================================
   6. CHALLENGES PAGE
   ============================================================ */
.challenge-grid-horizontal { display: flex; overflow-x: auto; gap: 16px; padding: 10px 40px 20px 40px; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); }
.challenge-grid-horizontal::-webkit-scrollbar { display: none; }
.challenge-card-item { min-width: 220px; max-width: 220px; flex: 0 0 auto; }
.challenge-card-item .card { background: linear-gradient(145deg, #1a1a1a, #141414) !important; border: 1px solid rgba(255, 255, 255, 0.04) !important; border-radius: 16px; padding: 1.25rem !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.challenge-card-item .card:hover { transform: translateY(-8px); background: linear-gradient(145deg, #202020, #161616) !important; border-color: rgba(82, 102, 255, 0.4) !important; box-shadow: 0 12px 40px rgba(82, 102, 255, 0.15); }
.challenge-title { color: #ffffff; font-weight: 700; font-size: 0.95rem; line-height: 1.3; margin-bottom: 6px; line-clamp: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.challenge-xp-badge { display: inline-block; color: #00ff88; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; background: rgba(0, 255, 136, 0.08); padding: 2px 8px; border-radius: 6px; margin-bottom: 15px; }
.challenge-date { color: #888; font-size: 0.75rem; font-weight: 500; }
.check-wrapper { margin-top: 12px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(40, 167, 69, 0.1); border: 1.5px solid rgba(40, 167, 69, 0.3); color: #28a745; box-shadow: 0 0 10px rgba(40, 167, 69, 0.1); }
.stat-icon-circle { color: #5266ff; background: rgba(82, 102, 255, 0.1); width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(82, 102, 255, 0.15); flex-shrink: 0; }
.scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(30, 30, 30, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); color: white; display: flex; align-items: center; justify-content: center; z-index: 10; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.scroll-btn:hover { background: var(--vtc-blue, #5266ff); border-color: var(--vtc-blue, #5266ff); transform: translateY(-50%) scale(1.1); }
.prev-btn { left: 0px; z-index: 20; }
.next-btn { right: 0px; z-index: 20; }
@media (max-width: 768px) { .scroll-btn { display: none; } .prev-btn { left: 0; } .next-btn { right: 0; } }
#completedChallengesList::-webkit-scrollbar { display: none; }

/* ============================================================
   7. CONVOYS / VTC EVENTS PAGE
   ============================================================ */
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.event-tile { background: var(--vtc-card); border: 1px solid var(--vtc-border); border-radius: 12px; padding: 14px; min-height: 240px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; position: relative; transition: all 0.3s ease; overflow: hidden; }
.event-tile:hover { border-color: var(--vtc-blue); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(82, 102, 255, 0.15); }
.event-tile__title { font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--vtc-blue); font-size: 0.85rem; margin-bottom: 10px; z-index: 2; position: relative; }
.event-title__createdby { color: rgba(255, 255, 255, 0.4); font-weight: 800; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.2px; min-height: 18px; z-index: 2; position: relative; }
.event-tile__media { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, 0.05); position: relative; z-index: 1; }
.event-tile__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0; filter: blur(2px); transition: opacity 0.2s ease, filter 0.2s ease; }
.event-tile__img.loaded { opacity: 1; filter: blur(0); }
.event-tile__download { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--vtc-blue); background: rgba(82, 102, 255, 0.05); color: #fff; font-weight: 900; text-decoration: none; padding: 0 10px; transition: 0.2s; z-index: 2; position: relative; margin-top: auto; }
.event-tile__download:hover { background: var(--vtc-blue); box-shadow: 0 0 15px var(--vtc-blue); }
.event-tile__download[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; border-color: #444; background: transparent; }
@media (max-width: 1100px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .events-grid { grid-template-columns: 1fr; } }

/* ============================================================
   8. DIVISIONS PAGE
   ============================================================ */
.divisions-header-card { margin-top: 10px; margin-bottom: 18px; }
.divisions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width:1100px){ .divisions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:768px){ .divisions-grid { grid-template-columns: 1fr; } }
.division-plaque { background: var(--vtc-card); border: 1px solid var(--vtc-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 230px; transition: 0.3s; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.division-plaque:hover { border-color: rgba(82, 102, 255, 0.55); transform: translateY(-5px); box-shadow: 0 0 28px rgba(82, 102, 255, 0.18); }
.division-plaque-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; z-index: 2; }
.division-plaque-title { font-weight: 900; letter-spacing: 1px; text-transform: uppercase; font-size: 0.72rem; color: #fff; line-height: 1.25; max-width: 65%; }
.division-plaque-count-wrap { text-align: right; }
.division-plaque-count-label { font-size: 0.65rem; color: #aaa; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.division-plaque-count { font-size: 1.5rem; font-weight: 1000; color: var(--vtc-blue); line-height: 1; margin-top: 4px; text-shadow: 0 0 10px rgba(82, 102, 255, 0.3); }
.division-plaque-chart-title { font-size: 0.65rem; color: #aaa; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; position: relative; z-index: 2; }
.division-plaque-chart-box { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 10px; position: relative; z-index: 2; }
.division-chart { width: 100%; height: 120px; }
.division-manager-btn { background: rgba(82, 102, 255, 0.15); border: 1px solid rgba(82, 102, 255, 0.55); color: #fff; border-radius: 10px; padding: 10px 14px; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.3px; cursor: pointer; transition: 0.2s; text-transform: uppercase; }
.division-manager-btn:hover:not(:disabled) { background: rgba(82, 102, 255, 0.28); box-shadow: 0 0 18px rgba(82, 102, 255, 0.35); }
.division-members-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.05); padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; color: #aaa; margin-bottom: 5px; border: 1px solid rgba(255, 255, 255, 0.05); }
.member-icon { width: 14px; height: 14px; fill: #5266ff; }
.modal-content { background: #121214 !important; border: 1px solid var(--vtc-border) !important; box-shadow: 0 0 30px rgba(0,0,0,0.8); color: #fff; }
.modal-header { border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); }
.modal-footer { border-top: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); }
.division-manager-jobs-scroll { max-height: 520px; overflow-y: auto; overflow-x: hidden; padding-right: 6px; }
.division-manager-jobs-scroll::-webkit-scrollbar { width: 8px; }
.division-manager-jobs-scroll::-webkit-scrollbar-track { background: transparent; }
.division-manager-jobs-scroll::-webkit-scrollbar-thumb { background: rgba(82, 102, 255, 0.25); border-radius: 8px; border: 2px solid rgba(0,0,0,0.2); }
.division-manager-jobs-scroll::-webkit-scrollbar-thumb:hover { background: rgba(82, 102, 255, 0.35); }
.division-job-confirm-btn { background: rgba(46, 204, 113, 0.15) !important; border: 1px solid rgba(46, 204, 113, 0.5) !important; color: #2ecc71 !important; }
.division-job-confirm-btn:hover:not(:disabled) { background: rgba(46, 204, 113, 0.25) !important; box-shadow: 0 0 15px rgba(46, 204, 113, 0.3); }
.division-job-decline-btn { background: rgba(255, 94, 94, 0.15) !important; border: 1px solid rgba(255, 94, 94, 0.5) !important; color: #ff5e5e !important; }
.division-job-decline-btn:hover:not(:disabled) { background: rgba(255, 94, 94, 0.25) !important; box-shadow: 0 0 15px rgba(255, 94, 94, 0.3); }

/* ============================================================
   9. EVENTS MANAGEMENT PAGE
   ============================================================ */
.event-management-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.event-driver-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; }
.event-driver-list thead th { position: sticky; top: 0; background: rgba(15, 15, 20, 0.95) !important; z-index: 5; backdrop-filter: blur(5px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); border-bottom: 1px solid var(--vtc-border) !important; }
.event-driver-list tbody tr { transition: all 0.2s ease; border-bottom: 1px solid rgba(255,255,255,0.03); }
.event-driver-list tbody tr:hover { background: linear-gradient(90deg, rgba(82, 102, 255, 0.1) 0%, transparent 100%) !important; border-left: 3px solid var(--vtc-blue); transform: translateX(5px); }
.event-driver-list tbody tr:last-child { border-bottom: none; }
.event-driver-list::-webkit-scrollbar { width: 8px; }
.event-driver-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.event-driver-list::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, transparent, var(--vtc-blue), transparent); border-radius: 10px; box-shadow: 0 0 10px var(--vtc-blue-glow); }
.event-driver-list::-webkit-scrollbar-thumb:hover { background: var(--vtc-blue); }

/* ============================================================
   10. HUMAN RESOURCES MANAGEMENT PAGE
   ============================================================ */
#hrUserList { padding: 10px; }
#hrUserList::-webkit-scrollbar { width: 8px; }
#hrUserList::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
#hrUserList::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, transparent, var(--vtc-blue), transparent); border-radius: 10px; box-shadow: 0 0 10px var(--vtc-blue-glow); }
#hrUserList::-webkit-scrollbar-thumb:hover { background: var(--vtc-blue); }

/* ============================================================
   11. CHALLENGES LEADERBOARD PAGE (Refinements)
   ============================================================ */
#leaderboardBody th:first-child { text-align: center; }
#leaderboardBody th:last-child { text-align: right; padding-right: 30px; }

/* ============================================================
   12. DRIVERS XP LEADERBOARD PAGE
   ============================================================ */
.leaderboard-wrapper { background: rgba(10, 10, 10, 0.6); border-radius: 12px; border: 1px solid var(--vtc-border); overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.leaderboard-header-row { display: flex; padding: 15px 25px; background: rgba(0, 0, 0, 0.4); font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.05); }
.leaderboard-row { display: flex; align-items: center; padding: 12px 25px; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid rgba(255, 255, 255, 0.02); transition: all 0.2s ease; }
.leaderboard-row:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(5px); border-left: 3px solid var(--vtc-blue); }
.is-self-row { background: rgba(82, 102, 255, 0.1) !important; border-left: 4px solid var(--vtc-blue) !important; }
.col-rank { width: 80px; font-weight: 800; text-align: center; color: #888; }
.col-driver { flex: 1; display: flex; align-items: center; gap: 15px; color: #fff; }
.col-level { width: 120px; font-weight: 700; color: var(--vtc-blue); text-shadow: 0 0 8px rgba(82, 102, 255, 0.3); }
.col-xp { width: 280px; text-align: right; font-weight: 900; color: #fff; }
.xp-podium { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; align-items: flex-end; }
.xp-podium-card { flex: 1; background: var(--vtc-card); border: 1px solid var(--vtc-border); border-radius: 20px; padding: 30px 20px; text-align: center; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; justify-content: flex-start; padding-bottom: 15px; }
.place-1 { order: 2; min-height: 360px; border: 1px solid rgba(255, 215, 0, 0.3); background: linear-gradient(180deg, rgba(30, 30, 30, 0.8) 0%, rgba(15, 15, 15, 0.9) 100%); }
.place-2 { order: 1; min-height: 320px; border: 1px solid rgba(192, 192, 192, 0.2); background: linear-gradient(180deg, rgba(30, 30, 30, 0.8) 0%, rgba(15, 15, 15, 0.9) 100%); }
.place-3 { order: 3; min-height: 300px; border: 1px solid rgba(205, 127, 50, 0.2); background: linear-gradient(180deg, rgba(30, 30, 30, 0.8) 0%, rgba(15, 15, 15, 0.9) 100%); }
.xp-podium-card:hover { transform: translateY(-10px); border-color: var(--vtc-blue) !important; box-shadow: 0 15px 45px rgba(82, 102, 255, 0.4); }
.podium-avatar-wrapper { position: relative; width: 100px; height: 100px; margin: 0 auto 15px; }
.place-1 .podium-avatar-wrapper { width: 130px; height: 130px; }
.xp-podium-card .xp-avatar { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; border: 4px solid #222; }
.place-1 .xp-avatar { border-color: #ffd700; }
.place-2 .xp-avatar { border-color: #c0c0c0; }
.place-3 .xp-avatar { border-color: #cd7f32; }
.xp-rank-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--vtc-blue); padding: 4px 15px; border-radius: 20px; font-weight: 900; font-size: 0.8rem; }
.place-1 .xp-rank-badge { background: #ffd700; color: #000; }
.xp-name a { font-size: 1.2rem; font-weight: 700; color: white; text-decoration: none; display: block; margin-bottom: 5px; }
.xp-level { font-size: 0.75rem; font-weight: 700; opacity: 0.5; text-transform: uppercase; letter-spacing: 1px; }
.xp-total-badge { display: inline-block; padding: 6px 15px; border-radius: 20px; background: rgba(0, 0, 0, 0.3); margin: 10px 0; font-weight: 800; color: var(--vtc-blue); border: 1px solid var(--vtc-border); }
.xp-podium-subtext { margin-top: auto; font-size: 0.65rem; opacity: 0.5; white-space: nowrap; letter-spacing: 0.5px; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 12px; }
.row-avatar { width: 45px; height: 45px; border-radius: 10px; background: #222; object-fit: cover; transition: opacity 0.5s ease; opacity: 0; }
.row-avatar.loaded { opacity: 1; }
.modern-pagination { display: flex; justify-content: center; align-items: center; padding: 20px; gap: 20px; }
.pag-btn { background: var(--vtc-blue); color: white; border: none; padding: 8px 20px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.pag-btn:hover { background: #fff; color: var(--vtc-blue); box-shadow: 0 0 15px var(--vtc-blue); }
.pag-btn:disabled { background: #222; color: #555; cursor: not-allowed; box-shadow: none; }
.pag-info { font-size: 0.85rem; color: #888; font-weight: 600; }

/* ============================================================
   13. LOCAL MODS PAGE
   ============================================================ */
.localmods-upload-wrap { margin-bottom: 10px !important; }
.localmods-upload-layout { display: grid; grid-template-columns: 1fr 0.9fr; gap: 16px; align-items: start; }
.localmods-upload-form { width: 100%; }
.localmods-upload-preview { display: flex; flex-direction: column; gap: 12px; }
.localmods-preview-warning { color: rgba(255, 255, 255, 0.4); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; }
.localmods-preview-media { width: 100%; height: 260px; margin-top: 10px; border-radius: 10px; overflow: hidden; border: 1px solid var(--vtc-border); position: relative; background: rgba(0,0,0,0.3); }
.localmods-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.localmods-preview-tile { pointer-events: none; }
.localmods-delete-btn { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 90, 90, 0.5); background: rgba(255, 60, 60, 0.85); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 5; box-shadow: 0 0 15px rgba(255, 60, 60, 0.25); transition: 0.2s; }
.localmods-delete-btn:hover { background: rgba(255, 60, 60, 1); box-shadow: 0 0 25px rgba(255, 60, 60, 0.35); }
.localmods-delete-icon { font-size: 16px; line-height: 1; transform: translateY(-1px); }

/* ============================================================
   14. LOGBOOK PAGE
   ============================================================ */
.logbook-refresh-wrap { position: absolute; top: 10px; right: 10px; z-index: 5; }
#logbookRefreshBtn.button { width: 40px; height: 40px; padding: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(82, 102, 255, 0.1); border: 1px solid var(--vtc-border); transition: 0.3s; }
#logbookRefreshBtn.button:hover { background: rgba(82, 102, 255, 0.2); border-color: var(--vtc-blue); box-shadow: 0 0 15px var(--vtc-blue-glow); transform: rotate(90deg); }
#logbookRefreshBtn .button__text { display: none !important; }
#logbookRefreshBtn .button__icon { position: static !important; transform: none !important; width: 100%; height: 100%; background: transparent !important; display: flex !important; align-items: center; justify-content: center; }
#logbookRefreshBtn .svg { width: 18px; fill: #fff; transition: 0.3s; }
#logbookRefreshBtn.button:hover .svg { fill: var(--vtc-blue); }
.job-route-modal-body { min-height: 260px; }
select.login-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235266ff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; padding-right: 2.5rem; }
input[type="date"].login-input::-webkit-calendar-picker-indicator { filter: invert(1) sepia(100%) saturate(1000%) hue-rotate(190deg); cursor: pointer; }
#paginationControls .admin-btn { display: flex; align-items: center; justify-content: center; padding: 5px 12px; }
#paginationControls .admin-btn.active { background: var(--vtc-blue) !important; color: white !important; border-color: var(--vtc-blue) !important; box-shadow: 0 0 10px rgba(82, 102, 255, 0.4); }

/* ============================================================
   15. LOGIN PAGE
   ============================================================ */
body.login-body { background: var(--vtc-bg); background-image: radial-gradient(circle at 50% 50%, rgba(0, 132, 255, 0.08) 0%, transparent 50%), radial-gradient(circle at 20% 30%, rgba(112, 0, 255, 0.05) 0%, transparent 40%); margin: 0; min-height: 100vh; overflow: hidden; font-family: 'Inter', sans-serif; }
.page-wrapper { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-form { position: relative; z-index: 5; width: 420px; max-width: calc(100% - 40px); background: rgba(15, 15, 20, 0.75); border: 1px solid var(--vtc-border); padding: 40px; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05); backdrop-filter: blur(20px); transition: transform 0.3s ease; }
.login-form:hover { transform: translateY(-5px); box-shadow: 0 30px 70px rgba(0,0,0,0.9), 0 0 20px rgba(82, 102, 255, 0.15); }
#particles-js { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8,8,10,0.6), rgba(8,8,10,0.8)); }
.flare-header { font-weight: 900; letter-spacing: 8px; text-transform: uppercase; background: linear-gradient(to right, #fff 20%, var(--vtc-blue) 40%, var(--vtc-blue) 60%, #fff 80%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 5s linear infinite; font-size: 2rem; margin-bottom: 5px; filter: drop-shadow(0 0 15px rgba(82, 102, 255, 0.3)); }
@keyframes shine { to { background-position: 200% center; } }
.header-underline { width: 60px; height: 3px; background: var(--vtc-blue); margin: 10px auto; border-radius: 2px; box-shadow: 0 0 10px var(--vtc-blue); }
.login-subtitle { color: #aaa; font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-top: -5px; }
.login-input { width: 100%; height: 45px; background: rgba(0,0,0,0.4) !important; border: 1px solid var(--vtc-border) !important; border-radius: 8px !important; padding: 0 15px; color: #fff !important; outline: none; transition: 0.3s; font-size: 0.9rem; }
.login-input:focus { border-color: var(--vtc-blue) !important; box-shadow: 0 0 15px rgba(82, 102, 255, 0.3); background: rgba(0, 132, 255, 0.05) !important; }
.login-btn-main { background: linear-gradient(135deg, var(--vtc-blue), var(--vtc-purple)); color: white; padding: 12px; border: none; border-radius: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; box-shadow: 0 4px 15px rgba(0, 132, 255, 0.3); width: 100%; margin-top: 10px; }
.login-btn-main:hover { transform: translateY(-2px); box-shadow: 0 0 25px var(--vtc-blue-glow); background: linear-gradient(135deg, #0077e6, #4437ff); }
.form-check-input { background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.form-check-input:checked { background-color: var(--vtc-blue); border-color: var(--vtc-blue); box-shadow: 0 0 10px rgba(82, 102, 255, 0.4); }
.login-error { color: #ff6b6b; font-size: 0.85rem; font-weight: 700; text-align: center; min-height: 20px; text-shadow: 0 0 5px rgba(255, 107, 107, 0.3); }
@media (max-width: 480px) { .flare-header { font-size: 1.4rem; letter-spacing: 6px; } .login-form { padding: 30px 20px; } }

/* ============================================================
   16. PARTNERS PAGE
   ============================================================ */
.partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
@media (max-width: 1100px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .partners-grid { grid-template-columns: 1fr; } }
.partner-card { position: relative; background: var(--vtc-card); border: 1px solid var(--vtc-border); border-radius: 20px; overflow: hidden; transition: transform 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; }
.partner-card:hover { border-color: var(--vtc-blue); box-shadow: 0 0 30px rgba(82, 102, 255, 0.2); }
.my-atropos-partner { width: 100%; height: 100%; border-radius: 20px; }
.my-atropos-partner .atropos-scale { width: 100%; height: 100%; display: flex; flex-direction: column; }
.my-atropos-partner .atropos-rotate { width: 100%; height: 100%; display: flex; flex-direction: column; }
.my-atropos-partner .atropos-inner { width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: rgba(0,0,0,0.4); }
.partner-media-wrapper { position: relative; width: 100%; padding-top: 56.25%; background: #000; overflow: hidden; }
.partner-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.partner-info { padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; background: rgba(15, 15, 20, 0.6); border-top: 1px solid rgba(255,255,255,0.05); }
.partner-name { font-size: 1.2rem; font-weight: 900; color: #fff; margin-bottom: 8px; letter-spacing: 0.5px; }
.partner-desc { font-size: 0.85rem; color: #aaa; line-height: 1.5; margin-bottom: 15px; }
.partner-btn { align-self: center; margin-top: auto; padding: 8px 20px; background: rgba(82, 102, 255, 0.1); border: 1px solid var(--vtc-blue); color: #fff; border-radius: 20px; text-decoration: none; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
.partner-btn:hover { background: var(--vtc-blue); box-shadow: 0 0 15px var(--vtc-blue); color: #fff; }

/* ============================================================
   17. USER PROFILE PAGE
   ============================================================ */
.profile-header-card { display: flex; flex-direction: column; align-items: center; padding: 30px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.05); text-align: center; }
#viewAvatar { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--vtc-blue); box-shadow: 0 0 20px var(--vtc-blue-glow); margin: 0 auto 20px; padding: 3px; background: var(--vtc-bg); object-fit: cover; }
.level-badge { background: linear-gradient(135deg, var(--vtc-blue), var(--vtc-purple)); color: white; width: 70px; height: 70px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 25px; box-shadow: 0 0 20px rgba(82, 102, 255, 0.4); flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); }
.level-badge span:first-child { font-size: 0.65rem; font-weight: 800; opacity: 0.9; line-height: 1; margin-bottom: 2px; }
.level-badge span:last-child { font-size: 1.8rem; font-weight: 900; line-height: 1; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.progress { height: 14px; background: rgba(0,0,0,0.5); border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.progress-bar { background: linear-gradient(90deg, var(--vtc-blue), var(--vtc-purple)); border-radius: 10px; box-shadow: 0 0 15px var(--vtc-blue); transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.progress-bar::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: translateX(-100%); animation: shimmer 2s infinite; }
.achievement-summary-card { background: rgba(0, 132, 255, 0.05) !important; border: 1px solid var(--vtc-border) !important; }
.achievement-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.achievement-item { min-width: 200px; padding: 15px; background: rgba(0,0,0,0.2); border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 15px; transition: 0.2s; }
.achievement-item:hover { border-color: var(--vtc-blue); background: rgba(82, 102, 255, 0.05); }
.stat-circle { width: 45px; height: 45px; border-radius: 50%; background: rgba(82, 102, 255, 0.15); display: flex; align-items: center; justify-content: center; color: var(--vtc-blue); font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }
.stat-text { flex: 1; }
.stat-value { font-size: 1.1rem; font-weight: 900; color: #fff; }
.stat-label { font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
#ets2Chart, #atsChart { border-radius: 12px; padding: 10px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); }
#logCard table.table-fancy { table-layout: fixed !important; width: 100% !important; border-collapse: separate !important; border-spacing: 0 4px; }
#profileJobFeedTable th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #888; padding: 10px 15px; background: rgba(0,0,0,0.3); border-bottom: 2px solid var(--vtc-border); }
#profileJobFeedTable td { background: rgba(255,255,255,0.02); vertical-align: middle; padding: 12px 15px; border: none; color: #eee; }
#profileJobFeedTable tr:hover td { background: rgba(82, 102, 255, 0.08); }
#profileJobFeedTable td:first-child { border-radius: 8px 0 0 8px; }
#profileJobFeedTable td:last-child { border-radius: 0 8px 8px 0; }
#notLinked { background: rgba(255, 193, 7, 0.1) !important; border: 1px solid rgba(255, 193, 7, 0.3) !important; color: #ffc107 !important; border-radius: 10px; font-weight: 700; }


/* ============================================================
   18. ROLE MANAGEMENT PAGE
   ============================================================ */
#roleManagerModal { position: relative !important; z-index: 1056 !important; pointer-events: none; }
#roleManagerModal .modal-dialog, #roleManagerModal .modal-content { position: relative !important; z-index: 1057 !important; pointer-events: auto !important; }
.role-modal-card { background: #121214 !important; border: 1px solid var(--vtc-blue) !important; box-shadow: 0 0 40px rgba(0,0,0,0.9), 0 0 20px rgba(82, 102, 255, 0.15); width: 100%; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.timeline-large__header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.4); }
.timeline-large__header .h1 { font-size: 1.1rem; font-weight: 900; letter-spacing: 1px; color: #fff; margin: 0; }
.timeline-large__content { flex: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; background: rgba(0,0,0,0.2); }
.role-modal-footer { padding: 20px; border-top: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.4); display: flex; justify-content: flex-end; gap: 10px; }
.role-modal-grid { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 8px; }
.role-check { display: flex !important; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); padding: 12px 16px; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; user-select: none; margin-bottom: 0; color: #eee; font-weight: 600; font-size: 0.9rem; }
.role-check:hover { background: rgba(82, 102, 255, 0.1); border-color: rgba(82, 102, 255, 0.4); color: #fff; }
.role-check input[type="checkbox"] { accent-color: var(--vtc-blue); width: 18px; height: 18px; cursor: pointer; }
.role-modal-grid::-webkit-scrollbar { width: 6px; }
.role-modal-grid::-webkit-scrollbar-track { background: transparent; }
.role-modal-grid::-webkit-scrollbar-thumb { background: var(--vtc-blue); border-radius: 10px; }
.tl-box { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.tl-box__label { font-size: 0.65rem; font-weight: 900; letter-spacing: 1px; color: var(--vtc-blue); margin-bottom: 12px; text-transform: uppercase; }
.security-note-box { margin-top: 15px; padding: 15px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(82, 102, 255, 0.2); border-radius: 10px; }
.security-note-box .note-text { color: #fff !important; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }

/* ============================================================
   19. SAVE EDITS PAGE (Refinements)
   ============================================================ */
#saveEditGrid .event-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   20. SETTINGS PAGE
   ============================================================ */
.settings-grid { column-count: 2; column-gap: 1.5rem; width: 100%; display: block; }
.settings-grid .card { display: inline-block; width: 100%; vertical-align: top; margin-bottom: 1.5rem; break-inside: avoid; }
@media (max-width: 992px) { .settings-grid { column-count: 1; } }
.avatar-container-fixed { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 3px solid var(--vtc-blue); display: inline-block; position: relative; background: #111; box-shadow: 0 0 20px rgba(82, 102, 255, 0.2); margin: 0 auto; }
#avatarPreview { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: object-position 0.1s ease; }
.custom-range::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.1); height: 6px; border-radius: 4px; cursor: pointer; }
.custom-range::-webkit-slider-thumb { background: var(--vtc-blue); border: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; cursor: grab; box-shadow: 0 0 10px rgba(82, 102, 255, 0.5); transition: transform 0.2s ease, background 0.2s ease; }
.custom-range::-webkit-slider-thumb:hover { transform: scale(1.2); background: var(--vtc-purple); }
.integration-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.integration-main-btn { width: 100%; max-width: 200px; min-height: 44px; }
.integration-unlink-btn { width: 88px; min-width: 88px; min-height: 44px; height: 44px; }
.discord-btn { background: linear-gradient(135deg, #5865F2, #7289da); color: white; border: none; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3); transition: all 0.3s ease; }
.discord-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 20px rgba(88, 101, 242, 0.5); background: linear-gradient(135deg, #4752c4, #5865F2); color: white; }
.discord-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   21. STAFF TEAM PAGE
   ============================================================ */
.staff-group { margin-bottom: 50px; text-align: center; }
.staff-group .section-divider { justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.05); margin: 40px 0 20px 0; padding-bottom: 10px; display: flex; align-items: center; gap: 15px; }
.staff-group .section-divider h4 { margin: 0; letter-spacing: 2px; color: var(--vtc-blue) !important; font-weight: 900; text-transform: uppercase; width: 100%; }
.staff-grid { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 20px; justify-content: center; }
.atropos-staff { width: 230px; height: 300px; cursor: pointer; }
.atropos-staff .atropos-inner { border-radius: 12px; transition: 0.3s; border: 1px solid rgba(255,255,255,0.1); background: rgba(15, 15, 20, 0.8); backdrop-filter: blur(10px); overflow: hidden; }
.atropos-staff.atropos-active .atropos-inner { border-color: var(--vtc-blue); box-shadow: 0 0 25px rgba(82, 102, 255, 0.3); transform: scale(1.02); }
.atropos-staff img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   22. MONTHLY TOPS / RANKINGS PAGE
   ============================================================ */
#currentMonthLabel { text-shadow: 0 0 10px rgba(82, 102, 255, 0.3); }
#previousMonthLabel { color: #666; text-shadow: none; }

/* Custom Bootstrap Tooltip Styling */
.tooltip-inner {
    background-color: #1a1a1a !important; /* Matches your dark-soft */
    border: 1px solid var(--vtc-blue);
    color: #fff;
    font-size: 0.8rem;
    padding: 8px 12px;
}

.tooltip .tooltip-arrow::before {
    border-top-color: var(--vtc-blue) !important;
}



/* ============================================================
   99. CONSTRUCTION OVERLAY
   ============================================================ */
   /*
#constructionOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(15, 15, 20, 0.9), #000); z-index: 99999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
#constructionOverlay .overlay-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; animation: fadeIn 1s ease-out; }
#constructionOverlay .overlay-icon { width: 120px; height: auto; filter: drop-shadow(0 0 20px rgba(82, 102, 255, 0.6)); animation: pulse 2s infinite; }
#constructionOverlay .overlay-text { color: #fff; font-size: 4rem; font-weight: 900; letter-spacing: 5px; text-transform: uppercase; text-shadow: 0 0 25px rgba(82, 102, 255, 0.8); background: linear-gradient(to bottom, #fff, var(--vtc-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#constructionOverlay b { color: #aaa; font-size: 1.2rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }
#constructionOverlay .nav-item { margin-top: 30px; padding: 12px 24px; background: rgba(82, 102, 255, 0.1); border: 1px solid var(--vtc-blue); border-radius: 30px; color: #fff; text-decoration: none; font-weight: 700; transition: 0.3s; box-shadow: 0 0 15px rgba(82, 102, 255, 0.2); }
#constructionOverlay .nav-item:hover { background: var(--vtc-blue); box-shadow: 0 0 30px var(--vtc-blue); transform: translateY(-3px); }
@keyframes pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(82, 102, 255, 0.6)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 40px rgba(82, 102, 255, 0.9)); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }